/* =========================================================
   CAPITAL DJs — Prototipo v2 (30-sep-2026) · css/styles.css
   Base + cromo común (nav, menú, footer, notas) + home.
   Dirección: press kit mayo 2026 (B/N editorial) con ritmo de club.
   El movimiento vive en css/motion.css y js/motion.js.
   Tipografías aproximadas con Google Fonts; las reales
   del Canva se confirman con Brenda.
   ========================================================= */

/* ---------- tokens ---------- */
:root {
  --ink: #0b0b0b;
  --ink-2: #151515;
  --paper: #f3f2ef;
  --white: #ffffff;
  --muted: #6b6b6b;
  --line: #d9d7d2;
  --line-dark: #2a2a2a;
  --serif: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --script: "Reenie Beanie", cursive; /* elección de Alan (7-oct-2026); su x mide casi el doble que la de Mrs Saint Delafield: tamaños ~25 % menores */
  --max: 1240px;
  --nav-h: 76px;
  --gutter: 28px;
  /* aire vertical de las secciones (Alan, 2-oct: más espacio entre secciones).
     ~1.5× lo de antes en escritorio (130 → ~196 px a 1440) y más moderado en móvil (130 → 140) */
  --sec-y: clamp(140px, 6vw + 110px, 216px);
  /* abajo, un poco menos: antes de cada sección va una «Línea» (motion.css) que suma su propio
     aire (--ln-u) arriba del folio y --ln-gap abajo del filete */
  --sec-b: calc(var(--sec-y) * .8);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
}

/* ---------- temas (papel ↔ tinta ↔ blanco) ----------
   Cada sección con data-section-theme pinta su fondo (así se ve sin JS).
   Con JS (html.js-themes, ver motion.css) las secciones se vuelven transparentes
   y el body transiciona estas variables al cruzar el centro del viewport. */
@property --bg { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --fg { syntax: "<color>"; inherits: true; initial-value: #0b0b0b; }
@property --fg-2 { syntax: "<color>"; inherits: true; initial-value: #333333; }
@property --fg-3 { syntax: "<color>"; inherits: true; initial-value: #6b6b6b; }
@property --rule { syntax: "<color>"; inherits: true; initial-value: #d9d7d2; }
@property --logo-invert { syntax: "<number>"; inherits: true; initial-value: 0; }

:root,
.theme-white, [data-section-theme="white"], body[data-theme="white"] {
  --bg: #ffffff; --fg: #0b0b0b; --fg-2: #333333; --fg-3: #6b6b6b; --rule: #e2e0db; --logo-invert: 0;
}
.theme-paper, [data-section-theme="paper"], body[data-theme="paper"] {
  --bg: #f3f2ef; --fg: #0b0b0b; --fg-2: #333333; --fg-3: #6b6b6b; --rule: #d9d7d2; --logo-invert: 0;
}
.theme-ink, [data-section-theme="ink"], body[data-theme="ink"] {
  --bg: #0b0b0b; --fg: #ffffff; --fg-2: #d4d4d4; --fg-3: #8f8f8f; --rule: #2a2a2a; --logo-invert: 1;
}
[data-section-theme] { background-color: var(--bg); color: var(--fg); }

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 12px); }
html:not(.lenis) { scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* red de seguridad: nada provoca scroll horizontal */
  transition: --bg .8s var(--ease-io), --fg .8s var(--ease-io), --fg-2 .8s var(--ease-io),
              --fg-3 .8s var(--ease-io), --rule .8s var(--ease-io), --logo-invert .8s var(--ease-io);
}
body.theme-instant { transition: none; }
/* grano de papel, como el press kit */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 90;
  opacity: .065;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
::selection { background: var(--fg); color: var(--bg); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.center { text-align: center; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* saltar al contenido (lo pone chrome.js): solo aparece con el foco del teclado */
.skip-link {
  position: fixed; left: -9999px; top: 8px; z-index: 10000;
  padding: 12px 16px; background: #fff; color: #0b0b0b;
  font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
.skip-link:focus { left: 16px; }
main[tabindex="-1"]:focus { outline: none; }
.label {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .38em;
  text-transform: uppercase;
}
.display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.005em;
  text-transform: uppercase;
}
.display em { font-style: italic; }
/* regla de marca: la s de DJs siempre en minúscula, aunque el título vaya en versales */
.lc { text-transform: none; }
.script { font-family: var(--script); font-weight: 400; }

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  font: 500 13px/1 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .25s var(--ease-out), background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--sm { padding: 11px 18px; font-size: 11px; }
.btn--lg { padding: 20px 34px; font-size: 14px; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #2b2b2b; }
.btn--ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: #e9e9e9; }
.btn--outline-light { border-color: #fff; color: #fff; background: transparent; }
.btn--outline-light:hover { background: #fff; color: var(--ink); }
/* siguen el tema activo (útiles sobre fondos que cambian) */
.btn--fg { background: var(--fg); color: var(--bg); }
.btn--line { border-color: currentColor; background: transparent; color: var(--fg); }
.btn--line:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.ico { width: 18px; height: 18px; flex: none; }
.link-arrow {
  display: inline-flex; align-items: center; gap: .7em;
  font: 500 12px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase;
  text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 4px;
}
.link-arrow .i-fl { font-size: 1.3em; }

/* ---------- flechas e íconos de trazo (2-oct-2026) ----------
   En iOS los caracteres ↗ → ← ↑ ↓ (y ♥, ▶…) se pintan como emoji: recuadros azules que rompen el
   blanco y negro (Alan, en su iPhone). Todas las flechas del sitio son SVG propio: 1em, currentColor,
   trazo fino que no engorda con el tamaño (vector-effect) y puntas y uniones en ángulo, como un filete.
   Siempre aria-hidden: el texto accesible lo lleva el link o el botón. El dibujo vive en js/chrome.js
   (FLECHAS) y se repite en el HTML, generar-djs.py, app.js y map.js. */
.i-fl, .i-tr {
  display: inline-block; flex: none;
  width: 1em; height: 1em;
  vertical-align: -.14em;
  overflow: visible;
  fill: none; stroke: currentColor; stroke-width: var(--i-w, 1.25px);
  stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10;
  transition: transform .45s var(--ease-out);
}
.i-fl path, .i-tr path { vector-effect: non-scaling-stroke; }
/* la flecha se adelanta un poco en hover: → a la derecha, ↗ hacia arriba y a la derecha */
a:hover > .i-fl--e, button:hover > .i-fl--e, a:focus-visible > .i-fl--e { transform: translateX(.18em); }
a:hover > .i-fl--w, button:hover > .i-fl--w, a:focus-visible > .i-fl--w { transform: translateX(-.18em); }
a:hover > .i-fl--ne, a:focus-visible > .i-fl--ne { transform: translate(.12em, -.12em); }
a:hover > .i-fl--n, a:focus-visible > .i-fl--n { transform: translateY(-.15em); }

/* =========================================================
   CROMO COMÚN (lo pinta js/chrome.js en todas las páginas)
   ========================================================= */

/* el placeholder del nav ocupa su alto en el flujo (como el sticky de v1);
   data-overlay lo deja en 0 para que la página empiece debajo del nav */
[data-chrome="nav"] { height: var(--nav-h); }
[data-chrome="nav"][data-overlay] { height: 0; }

.cdj-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 26px;
  padding: 0 var(--gutter);
  color: var(--fg);
  transition: transform .55s var(--ease-out), color .3s ease;
}
.cdj-nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  opacity: 0;
  transition: opacity .35s ease;
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
}
.cdj-nav.is-scrolled::before { opacity: .94; }
/* escondido al bajar: COMPLETAMENTE fuera (2-oct-2026). En el iPhone, lo que queda arriba del viewport
   se ve detrás de la barra de estado: con translateY(-105%) se asomaban el logo y «MENÚ» (Alan). Sube su
   alto + el área segura (si la página la expone) + 72 px de aire, y al terminar el viaje queda
   visibility: hidden (no se pinta). Al volver, visible de inmediato y baja. chrome.js lo destapa con Tab. */
.cdj-nav { --nav-out: calc(-100% - env(safe-area-inset-top, 0px) - 72px); }
.cdj-nav.is-hidden,
html.intro-js .cdj-nav.is-hidden {
  transform: translateY(var(--nav-out));
  visibility: hidden;
  pointer-events: none;
  transition: transform .55s var(--ease-out), color .3s ease, opacity .3s ease, visibility 0s linear .55s;
}
.cdj-nav__logo { display: block; flex: none; }
.cdj-nav__logo img { height: 24px; width: auto; filter: invert(var(--logo-invert)); }
.cdj-nav__links { display: flex; gap: 24px; margin: 0 auto; }
.cdj-nav__links a {
  position: relative;
  font: 500 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase;
  text-decoration: none; padding: 8px 0; white-space: nowrap;
}
.cdj-nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.cdj-nav__links a:hover::after, .cdj-nav__links a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.cdj-nav__actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.cdj-nav__links + .cdj-nav__actions { margin-left: 0; }
/* ---------- cambio de idioma «ES / EN» (chrome.js, 7-oct-2026; vuelve el del 1-oct, ahora con ligas) ----------
   El idioma de la página en negritas (sin liga, aria-current); el otro, liga. Sigue el tema del nav (--fg y
   --fg-3 cambian con data-chrome-theme="dark", con la foto de la home y con el menú abierto).
   «Español · English» va también en el menú overlay (.cdj-menu__idioma) y al pie (.cdj-footer__idioma). */
.cdj-lang { display: flex; align-items: center; font: 400 11px/1 var(--sans); letter-spacing: .2em; color: var(--fg-3); white-space: nowrap; }
.cdj-lang b { color: var(--fg); font-weight: 600; }
.cdj-lang a {
  display: inline-flex; align-items: center; min-height: 44px; /* área táctil */
  color: var(--fg-3); text-decoration: none;
  transition: color .25s ease;
}
.cdj-lang a:hover, .cdj-lang a:focus-visible { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; }
.cdj-idiomas__sep { white-space: pre; }
/* el nav se compacta si no cabe (chrome.js, ajustarNav): primero se va el idioma, luego las secciones (con el
   idioma de vuelta si ya cabe), luego los dos y, en inglés, el «on WhatsApp» del CTA (en el nav minimal, el CTA
   corto va antes que quitar el idioma). --mide solo vive mientras chrome.js mide lo que pide la barra (un instante, sin pintar) */
.cdj-nav.cdj-nav--mide { right: auto; width: max-content; }
.cdj-nav--sin-links .cdj-nav__links { display: none; }
.cdj-nav--sin-links .cdj-nav__actions, .cdj-nav--sin-links .cdj-nav__links + .cdj-nav__actions { margin-left: auto; }
.cdj-nav--sin-idioma .cdj-lang { display: none; }
.cdj-nav--cta-corto .cdj-nav__cta-wa { display: none; }
.cdj-nav__cta { background: var(--fg); color: var(--bg); }
.cdj-nav__cta:hover { background: var(--fg-2); }
.cdj-burger {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px; /* área táctil */
  background: none; border: 0; padding: 8px 0 8px 6px; cursor: pointer;
  font: 500 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase;
}
.cdj-burger__lines { position: relative; width: 26px; height: 12px; }
.cdj-burger__lines i {
  position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
  transition: transform .5s var(--ease-out), top .5s var(--ease-out);
}
.cdj-burger__lines i:first-child { top: 1px; }
.cdj-burger__lines i:last-child { top: 9px; }
.menu-open .cdj-burger__lines i:first-child { top: 5px; transform: rotate(45deg); }
.menu-open .cdj-burger__lines i:last-child { top: 5px; transform: rotate(-45deg); }

/* nav sobre páginas oscuras (si la página no usa temas por sección) */
body[data-chrome-theme="dark"]:not([data-theme]) .cdj-nav,
.menu-open .cdj-nav {
  --bg: #0b0b0b; --fg: #ffffff; --fg-2: #d4d4d4; --fg-3: #8f8f8f; --rule: #2a2a2a; --logo-invert: 1;
}
.menu-open .cdj-nav { transform: none; }
html.menu-lock { overflow: hidden; }
.menu-open .cdj-nav::before { opacity: 0; }
.menu-open .cdj-nav__cta { background: #fff; color: var(--ink); }
.cdj-nav--minimal { justify-content: space-between; }

/* ---------- menú overlay a pantalla completa ---------- */
.cdj-menu {
  --bg: #0b0b0b; --fg: #ffffff; --fg-2: #d4d4d4; --fg-3: #8f8f8f; --rule: #2a2a2a; --logo-invert: 1;
  position: fixed; inset: 0; z-index: 79;
  background: var(--bg); color: var(--fg);
  padding: calc(var(--nav-h) + 3vh) var(--gutter) 34px;
  overflow-y: auto; overscroll-behavior: contain;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .85s var(--ease-io), visibility 0s linear .85s;
}
.cdj-menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .85s var(--ease-io), visibility 0s linear 0s; }
.cdj-menu__in {
  max-width: var(--max); margin: 0 auto; min-height: 100%;
  display: grid; grid-template-columns: 2.2fr 1fr; gap: 40px; align-items: end;
}
.cdj-menu__links { list-style: none; margin: 0; padding: 0; counter-reset: m; }
.cdj-menu__links li { overflow: clip; padding: .04em 0; }
.cdj-menu__links a {
  display: flex; align-items: baseline; gap: 18px;
  font: 400 clamp(36px, 4.5vw, 74px)/1.04 var(--serif); text-transform: uppercase; white-space: nowrap;
  text-decoration: none;
  transform: translateY(110%);
  transition: transform .9s var(--ease-out), opacity .35s ease;
}
.cdj-menu.is-open .cdj-menu__links a { transform: none; transition-delay: calc(.22s + var(--i, 0) * .055s), 0s; }
.cdj-menu__n { font: 400 12px/1 var(--mono); letter-spacing: .08em; color: var(--fg-3); min-width: 2.4em; }
.cdj-menu__t { position: relative; display: inline-block; transition: transform .6s var(--ease-out); }
/* sangría en hover: el texto se recorre y aparece una raya */
.cdj-menu__t::before {
  content: ""; position: absolute; right: 100%; top: 52%; width: .7em; height: 1px; margin-right: .2em;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out);
}
.cdj-menu__links a:hover .cdj-menu__t, .cdj-menu__links a:focus-visible .cdj-menu__t { transform: translateX(.95em); font-style: italic; }
.cdj-menu__links a:hover .cdj-menu__t::before, .cdj-menu__links a:focus-visible .cdj-menu__t::before { transform: scaleX(1); }
.cdj-menu__links:hover a:not(:hover) { opacity: .38; }
.cdj-menu__side { display: grid; gap: 26px; padding-bottom: 10px; opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .8s var(--ease-out); }
.cdj-menu.is-open .cdj-menu__side { opacity: 1; transform: none; transition-delay: .5s; }
.cdj-menu__side .label { color: var(--fg-3); font-size: 11px; margin-bottom: 8px; }
.cdj-menu__side a { display: block; padding: 7px 0; text-decoration: none; font: 400 20px/1.5 var(--serif); }
.cdj-menu__side a:hover { font-style: italic; }
/* «Español · English» en el menú (7-oct-2026): el de la página en blanco, el otro en gris y liga */
.cdj-menu__side .cdj-idiomas { font: 400 20px/1.5 var(--serif); color: var(--fg-3); }
.cdj-menu__side .cdj-idiomas b { font-weight: 500; color: var(--fg); }
.cdj-menu__side .cdj-idiomas a { display: inline-block; padding: 7px 0; color: var(--fg-3); }
.cdj-menu__side .cdj-idiomas a:hover, .cdj-menu__side .cdj-idiomas a:focus-visible { color: var(--fg); }
.cdj-menu__sign { font: 400 40px/1 var(--script); color: var(--fg-2); }
.cdj-menu__vinyl { width: 120px; height: 120px; }

/* ---------- footer con reveal ---------- */
.cdj-footer {
  --bg: #060606; --fg: #ffffff; --fg-2: #cfcfcf; --fg-3: #8a8a8a; --rule: #222; --logo-invert: 1;
  position: relative; overflow: hidden;
  background: var(--bg); color: var(--fg);
}
.cdj-footer__in { max-width: var(--max); margin: 0 auto; padding: 120px var(--gutter) 100px; }
/* con su Línea (la pone chrome.js), el aire de arriba es el de cualquier sección que entra por una Línea
   (motion.css: --ln-u + --ln-gap, en el padding del footer) */
[data-transicion="linea"] + .cdj-footer > .cdj-footer__in { padding-top: 0; }
.cdj-footer__hero { text-align: center; }
.cdj-footer__hero .label { color: var(--fg-3); }
.cdj-footer__big { font-size: clamp(104px, 21vw, 330px); line-height: .82; margin: 10px 0 34px; }
/* en inglés la palabra grande es «dance floor» (11 letras contra las 5 de «pista», 7-oct-2026): en escritorio,
   en una línea y más chica (a 1440 px mide ~1140 de los 1184 que hay); de 860 px para abajo se parte en dos
   («dance» / «floor»; en el celular, a 25vw: «dance» mide 3.36 veces el tamaño y no se sale ni en 320 px) */
@media (min-width: 861px) { html:lang(en) .cdj-footer__big { font-size: clamp(104px, 11.5vw, 165px); } }
.cdj-footer__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cdj-footer__cols {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px;
  margin-top: 96px; padding-top: 34px; border-top: 1px solid var(--rule);
}
.cdj-footer__cols .label { font-size: 11px; color: var(--fg-3); margin-bottom: 14px; }
.cdj-footer__cols ul { list-style: none; margin: 0; padding: 0; }
.cdj-footer__cols li { padding: 0; }
/* área táctil de ~44 px en los links del pie */
.cdj-footer__cols li > a, .cdj-footer__cols li > span { display: inline-block; padding: 8px 0; }
.cdj-footer__cols a, .cdj-footer__cols span { font: 400 19px/1.45 var(--serif); text-decoration: none; color: var(--fg-2); }
.cdj-footer__cols a:hover { color: var(--fg); font-style: italic; }
.cdj-footer__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--rule);
}
.cdj-footer__logo { height: 20px; width: auto; opacity: .92; }
.cdj-footer__legal { font-size: 11px; letter-spacing: .08em; color: var(--fg-3); }
.cdj-footer__legal a { color: var(--fg-2); }
/* «Español · English» al pie (7-oct-2026): a la derecha, junto a la línea legal (en el celular, a la derecha
   del logo y la línea legal abajo) */
.cdj-footer__idioma { margin-left: auto; font-size: 11px; letter-spacing: .08em; color: var(--fg-3); white-space: nowrap; }
.cdj-footer__idioma b { font-weight: 600; color: var(--fg); }
.cdj-footer__idioma a { display: inline-block; padding: 12px 0; color: var(--fg-2); } /* área táctil */
.cdj-footer__idioma a:hover, .cdj-footer__idioma a:focus-visible { color: var(--fg); }

/* ---------- WhatsApp flotante ---------- */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 85;
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 10px 26px rgba(0,0,0,.28);
  transition: transform .25s var(--ease-out);
}
.wa-float:hover { transform: scale(1.07); }
.wa-float svg { width: 28px; height: 28px; }

/* ---------- notas del prototipo ---------- */
.has-nota--rel { position: relative; }
.nota {
  position: absolute; top: 14px; right: 14px; z-index: 60;
  max-width: 250px;
  background: #ffe14d; color: #111;
  font: 600 11.5px/1.4 var(--sans); letter-spacing: .01em; text-transform: none; font-style: normal;
  padding: 9px 11px 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  transform: rotate(1.2deg);
  text-align: left;
  white-space: normal;
}
.nota::before { content: "NOTA · "; font-weight: 700; }
.nota--after { position: relative; top: auto; right: auto; display: block; margin: 8px 0; max-width: 100%; }
body.sin-notas .nota { display: none; }
.notes-toggle {
  position: fixed; left: 18px; bottom: 18px; z-index: 86;
  background: #ffe14d; color: #111; border: 0;
  font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  padding: 11px 14px; border-radius: 999px; cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.2);
}

/* =========================================================
   HOME
   ========================================================= */

/* ---------- encabezados de sección ---------- */
.sec-head { text-align: center; padding: 0 24px 56px; }
.sec-head .label { color: var(--fg); }
.sec-head__title { font-size: clamp(52px, 8.4vw, 128px); margin-top: 10px; }
.sec-head__sub { margin-top: 18px; font: 400 14px/1.6 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }

/* ---------- hero (v2.1: la segunda pantalla; la primera es el logo, css/hero.css) ---------- */
.hero {
  position: relative;
  text-align: center;
  padding: calc(var(--nav-h) + clamp(48px, 10vh, 120px)) var(--gutter) var(--sec-b);
  overflow: clip;
}
/* el nav va encima (data-overlay): la nota del hero no se mete debajo de él */
@media (min-width: 861px) { .hero > .nota { top: calc(var(--nav-h) + 14px); } }
.hero__kicker { font-size: 13px; letter-spacing: .5em; margin-bottom: 28px; }
.hero__kicker b { font-weight: 700; }
.hero__title { font-size: clamp(54px, 11.2vw, 182px); line-height: .9; }
.hl { display: block; }
.hw { display: inline-block; }
.hero__h1 {
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(14px, 1.4vw, 18px);
  letter-spacing: .05em; line-height: 1.6;
  max-width: 640px; margin: 40px auto 0; color: var(--fg-2);
}
.hero__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 44px; }
.hero__meta {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
  max-width: 1180px; margin: 72px auto 0; text-align: left;
}
.now { display: flex; align-items: center; gap: 12px; min-width: 0; }
.now__label { font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.now__track {
  position: relative; display: inline-block; overflow: hidden; min-width: 0;
  font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; color: var(--fg-2);
}
.now__track:hover { color: var(--fg); text-decoration: underline; }
.now__track span { display: block; }
.hero__scroll { display: flex; align-items: center; gap: 10px; font: 400 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.hero__scroll i { position: relative; display: block; width: 1px; height: 34px; background: var(--rule); overflow: hidden; }
.hero__scroll i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--fg); animation: cdj-scroll-cue 1.8s var(--ease-io) infinite; }
@keyframes cdj-scroll-cue { to { top: 100%; } }
/* con mouse o trackpad (5-oct-2026): fuera, porque ya bajaron (la fiesta subió encima de la primera pantalla)
   y «Desliza» es de dedo. visibility y no display, para que la fila (space-between) no se mueva.
   En touch (tablet acostada) se queda «Desliza» */
@media (hover: hover) and (pointer: fine) {
  .hero__scroll { visibility: hidden; }
  .hero__scroll i::after { animation: none; }
}
.hero__media {
  /* la foto se disuelve en el fondo por los cuatro lados: sin corte abajo (Alan, 7-oct-2026; abajo suave, solo la orilla: del 86 %).
     A todo lo ancho en celular; en escritorio hasta 1320 px */
  position: relative;
  width: min(1320px, 100vw);
  margin: 40px 0 0 calc(50% - min(660px, 50vw));
  aspect-ratio: 2000 / 1559;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 10%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 10%, #000 86%, transparent 100%);
  mask-composite: intersect;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- prueba: odómetros + marquees ---------- */
.proof { padding: var(--sec-y) 0 var(--sec-b); overflow: clip; }
.proof__stats {
  list-style: none; margin: 0 auto; padding: 0 var(--gutter);
  max-width: var(--max);
  display: grid; grid-template-columns: repeat(4, 1fr); text-align: center;
}
.proof__stats li { padding: 0 12px; border-left: 1px solid var(--rule); }
.proof__stats li:first-child { border-left: 0; }
.proof__stats strong { display: block; font: 400 clamp(48px, 6vw, 92px)/1 var(--serif); }
.proof__stats .label { display: block; margin-top: 14px; color: var(--fg-3); font-size: 11px; }
.proof__press { margin-top: 84px; }
.proof__press > .label { display: block; text-align: center; color: var(--fg-3); font-size: 11px; margin-bottom: 18px; }
.mq-press { font: 400 clamp(40px, 6.6vw, 100px)/1.12 var(--serif); text-transform: uppercase; }
.mq-press span:nth-child(even) { font-style: italic; }
.mq-brands { margin-bottom: 0; font: 500 clamp(13px, 1.3vw, 17px)/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--fg-2); }
.proof__brands-label { margin-top: 54px; }
/* separador: un vinilito */
.mq-press > span::after, .mq-brands > span::after,
.mq-press .marquee__group > span::after, .mq-brands .marquee__group > span::after {
  content: ""; display: inline-block;
  width: .3em; height: .3em; border-radius: 50%;
  border: 1px solid currentColor; box-shadow: inset 0 0 0 .08em var(--bg);
  background: currentColor;
  margin: 0 .55em; vertical-align: middle; transform: translateY(-.08em);
}
.mq-brands > span::after, .mq-brands .marquee__group > span::after { width: 4px; height: 4px; margin: 0 1.6em; border: 0; box-shadow: none; background: currentColor; } /* punto sólido (Alan, 7-oct-2026) */

/* ---------- por qué + manifiesto (tipografía cinética) ---------- */
.why { padding: var(--sec-y) 0 var(--sec-b); overflow: clip; }
.why .sec-head { padding-bottom: 70px; }
.why__epi { margin-top: 18px; font: italic 400 clamp(20px, 2vw, 26px)/1.3 var(--serif); color: var(--fg-2); }
.mani { position: relative; border-top: 1px solid var(--rule); overflow: clip; }
/* retícula de columnas con líneas finas */
.mani__grid {
  position: absolute; inset: 0; pointer-events: none;
  display: grid; grid-template-columns: repeat(6, 1fr);
}
.mani__grid i { border-left: 1px solid var(--rule); }
.mani__grid i:first-child { border-left: 0; }
.mani__row {
  position: relative;
  padding: 50px var(--gutter) 150px;
  border-bottom: 1px solid var(--rule);
}
.mani__num { display: block; font: 400 13px/1 var(--mono); letter-spacing: .08em; color: var(--fg-3); margin-bottom: 18px; }
.mani__phrase { font: 400 clamp(46px, 7.6vw, 128px)/1 var(--serif); letter-spacing: -.01em; white-space: nowrap; }
.mani__phrase em { font-style: italic; }
.mani__move { display: inline-block; will-change: transform; }
.mani__row--r .mani__phrase { text-align: right; }
.mani__txt { max-width: 440px; margin-top: 26px; color: var(--fg-2); }
.mani__row--r .mani__txt { margin-left: auto; }
.mani__row:not(.mani__row--r) .mani__txt { margin-left: calc(100% / 6 * 3); }
/* el vinilo rueda sobre la raya de abajo */
.mani__wheel { position: absolute; left: 0; bottom: 0; width: 104px; height: 104px; z-index: 2; pointer-events: none; }
.mani__wheel .vinyl { width: 100%; height: 100%; }
html:not(.js-motion) .mani__wheel { left: auto; right: 8vw; }
.mani__row--r .mani__wheel { left: 0; }
html:not(.js-motion) .mani__row--r .mani__wheel { left: 8vw; right: auto; }

.why__quote { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; margin-top: 120px; }
.why__photo { position: relative; background: #fff; padding: 12px 12px 14px; transform: rotate(-1.6deg); box-shadow: 0 18px 40px rgba(0,0,0,.16); }
.why__photo::before {
  content: ""; position: absolute; top: -12px; left: 50%; z-index: 2;
  width: 110px; height: 26px; transform: translateX(-50%) rotate(-3deg);
  background: rgba(214,212,204,.82); box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.why__frame { overflow: hidden; aspect-ratio: 1600 / 1344; }
.why__frame img { width: 100%; height: 100%; object-fit: cover; }
.why__quote blockquote { margin: 0; }
.why__quote blockquote p { font: 400 clamp(17px, 1.6vw, 22px)/1.55 var(--mono); letter-spacing: -.01em; max-width: 30em; margin-bottom: 30px; } /* Geist Mono, más chica y legible (Alan, 7-oct-2026) */
.why__quote blockquote em { font-style: normal; font-weight: 600; }
/* cinta adhesiva del collage, dosificada */
.taped { position: relative; box-shadow: 0 18px 40px rgba(0,0,0,.14); }

/* ---------- DJs: polaroids ---------- */
.djs { padding: var(--sec-y) 0 var(--sec-b); overflow: clip; }
.djs .sec-head__sub a { color: var(--fg); }
.djs__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 64px 38px; }
.dj-card { display: block; text-decoration: none; color: var(--ink); perspective: 900px; }
.polaroid {
  position: relative;
  display: block;
  background: #fff; color: var(--ink);
  padding: 12px 12px 18px;
  box-shadow: 0 16px 34px rgba(0,0,0,.13), 0 2px 6px rgba(0,0,0,.08);
  transform: rotate(var(--r, 0deg)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .45s var(--ease-out), box-shadow .45s ease;
  text-decoration: none;
}
.polaroid::before {
  content: ""; position: absolute; top: -11px; left: 50%; z-index: 2;
  width: 88px; height: 24px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(214,212,204,.8);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  transition: transform .45s var(--ease-out);
}
.dj-card:hover .polaroid, .dj-card:focus-visible .polaroid {
  transform: translateY(-10px) rotate(0deg) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.03);
  box-shadow: 0 30px 50px rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.08);
}
.dj-card:hover .polaroid::before { transform: translateX(-50%) rotate(2deg) scaleX(1.08); }
.polaroid__photo { display: block; overflow: hidden; background: #eee; }
.polaroid img { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: center 22%; filter: grayscale(1) contrast(1.04); transition: transform .8s var(--ease-out); }
.dj-card:hover .polaroid img { transform: scale(1.05); }
.polaroid__sig { display: block; font: 400 40px/1 var(--script); margin: 12px 4px 0; }
.polaroid__genres { display: block; font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; margin: 8px 4px 0; color: #2d2d2d; }
.polaroid__ticket {
  display: inline-block; margin: 10px 4px 0; padding: 4px 9px;
  border: 1px dashed #9a9a9a; border-radius: 3px;
  font: 400 10px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #555;
}
.polaroid__ticket b { display: block; font-size: 14px; letter-spacing: 1px; margin-top: 3px; }
.polaroid__ig { display: block; font-size: 12px; color: var(--muted); margin: 8px 4px 0; }
/* entrada "aventadas sobre la mesa" (app.js): escondidas solo hasta que entran */
html.js-motion .djs__grid.is-toss:not(.is-in) .dj-card { opacity: 0; }

/* ---------- servicios (el menú del press kit) ---------- */
.services { padding: var(--sec-y) 0 var(--sec-b); overflow: clip; }
.services .sec-head .label { color: var(--fg); }
.services__list { border-bottom: 1px solid var(--rule); }
.svc {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 90px minmax(260px, 1.1fr) 1fr 40px; align-items: center; gap: 28px;
  padding: 46px max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  border-top: 1px solid var(--rule);
  text-decoration: none; color: var(--fg);
  transition: background-color .4s ease;
}
.svc:hover { background-color: rgba(255,255,255,.035); }
.svc__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .2; filter: grayscale(1); transition: opacity .5s ease, transform .8s var(--ease-out); }
.svc:hover .svc__bg { opacity: .36; transform: scale(1.03); }
html.has-float .svc__bg { display: none; }
.svc > *:not(.svc__bg):not(.nota) { position: relative; }
.svc__num { font: 400 22px/1 var(--serif); letter-spacing: .4em; }
.svc__title { font: 400 clamp(34px, 4.6vw, 66px)/.95 var(--serif); text-transform: uppercase; transition: transform .6s var(--ease-out); }
.svc:hover .svc__title { transform: translateX(.25em); font-style: italic; }
.svc__title small { display: block; font: 500 11px/1 var(--sans); font-style: normal; letter-spacing: .38em; margin-bottom: 10px; color: var(--fg-3); }
.svc__txt { color: var(--fg-2); font-size: 15px; }
.svc__price { display: block; margin-top: 10px; font: 600 13px/1.3 var(--mono); letter-spacing: .08em; color: var(--fg); }
.svc__arrow { font-size: 30px; line-height: 0; text-align: right; transition: transform .5s var(--ease-out); --i-w: 1.25px; }
.svc__arrow .i-fl { vertical-align: top; }
.svc:hover .svc__arrow { transform: translate(4px, -4px) rotate(45deg); }
.svc--nophoto { background: repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 14px, rgba(255,255,255,.045) 14px 28px); }

/* ---------- mapa: lo pinta MAPA (js/map.js + css/map.css) ----------
   Aquí solo un respaldo mínimo sin JS, con :where() para no pelear con map.css. */
:where(section[data-map]) { position: relative; }
:where(section[data-map] > h2) { margin: 0 auto; padding: var(--sec-y) var(--gutter) 0; text-align: center; font: 400 clamp(46px, 7vw, 110px)/.95 var(--serif); text-transform: uppercase; }
:where(section[data-map] > p) { margin-top: 16px; text-align: center; font: 400 14px/1.6 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
:where(section[data-map] > ul) { list-style: none; margin: 40px auto 0; padding: 0 var(--gutter) var(--sec-y); max-width: 900px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
:where(section[data-map] > ul > li) { font: 400 20px/1.3 var(--serif); }
:where(section[data-map] > ul > li > span) { font: 400 12px/1 var(--mono); color: var(--fg-3); margin-left: 6px; }

/* ---------- reseñas ---------- */
.reviews { padding: var(--sec-y) 0 var(--sec-b); overflow: clip; }
.stars { display: inline-block; color: var(--fg); }
/* las 5 estrellas: un SVG (★ salía del sistema) */
.i-stars { display: inline-block; width: auto; height: .82em; aspect-ratio: 128 / 24; vertical-align: -.06em; fill: currentColor; }
.reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-bottom: 44px; }
.review { border: 1px solid var(--rule); padding: 30px 28px; background: rgba(255,255,255,.55); }
.review__stars { font-size: 14px; line-height: 1; }
.review__txt { font: italic 400 21px/1.35 var(--serif); margin: 14px 0 20px; color: var(--fg-2); }
.review__who { font: 500 11px/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--fg-3); }
.review__who span { color: var(--fg); }
.reviews__cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 36px; }

/* ---------- proceso: línea de tiempo que se dibuja ---------- */
.process { padding: var(--sec-y) 0 var(--sec-b); overflow: clip; }
.process__track { position: relative; }
.process__line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); }
.process__line i { position: absolute; inset: 0; background: var(--fg); transform-origin: left center; }
.process__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.process__steps li { position: relative; padding-top: 34px; transition: opacity .6s ease, transform .8s var(--ease-out); }
.process__steps li::before {
  content: ""; position: absolute; left: 0; top: -6px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--fg);
  transition: background-color .4s ease, transform .5s var(--ease-out);
}
.process__steps li.is-on::before { background: var(--fg); transform: scale(1.15); }
.process__when { font: 400 34px/1 var(--serif); text-transform: uppercase; margin-bottom: 18px; }
.process__when span { font-size: 96px; line-height: .8; float: left; margin-right: 10px; }
.process__when em { display: block; font-style: italic; }
.process__steps li p:last-child { clear: both; padding-top: 12px; color: var(--fg-2); }
/* con JS, cada paso se enciende cuando la línea llega (nunca queda invisible) */
html.js-motion .process__track.is-drawn .process__steps li:not(.is-on) { opacity: .28; transform: translateY(14px); }

/* ---------- el test (bloque nuevo) ---------- */
.test { padding: var(--sec-y) 0 var(--sec-b); overflow: clip; }
.test__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 50px; align-items: center; }
.test .label { color: var(--fg-3); }
.test__title { font-size: clamp(52px, 6.4vw, 112px); line-height: 1.02; margin: 14px 0 28px; white-space: nowrap; }
.test__sub { max-width: 470px; font-size: 17px; color: var(--fg-2); margin-bottom: 36px; }
.test__deck { position: relative; aspect-ratio: 1; max-width: 520px; width: 100%; justify-self: center; }
.test__deck .test__vinyl { position: absolute; inset: 9%; width: auto; }
.sticker {
  position: absolute; z-index: 2;
  padding: 12px 16px;
  background: #fff; color: var(--ink);
  font: 400 clamp(15px, 1.5vw, 20px)/1.1 var(--serif); font-style: italic;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  white-space: nowrap;
}
.sticker--mono { font: 600 12px/1 var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; background: #ffe14d; }
.sticker--1 { top: 6%; left: -4%; transform: rotate(-7deg); }
.sticker--2 { top: 42%; right: -6%; transform: rotate(5deg); }
.sticker--3 { bottom: 9%; left: 2%; transform: rotate(-3deg); }
.sticker--4 { top: 0; right: 10%; transform: rotate(8deg); }
html.js-motion .test__deck.is-pop:not(.is-in) .sticker { opacity: 0; }

/* ---------- instagram: dropping stack ---------- */
.insta { padding: var(--sec-y) 0 var(--sec-b); overflow: clip; }
.insta__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 50px; align-items: center; }
.insta__copy .label { color: var(--fg-3); }
.insta__title { font-size: clamp(42px, 5.6vw, 92px); text-transform: none; margin: 14px 0 26px; white-space: nowrap; }
.insta__lead { max-width: 420px; color: var(--fg-2); margin-bottom: 30px; }
.insta__ctrl { display: none; align-items: center; gap: 18px; margin-bottom: 34px; }
.insta.has-stack .insta__ctrl { display: flex; }
.insta__ctrl button {
  display: inline-grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--fg); background: transparent; color: var(--fg);
  font: 400 20px/1 var(--sans); cursor: pointer; transition: background-color .25s ease, color .25s ease;
}
.insta__ctrl button:hover { background: var(--fg); color: var(--bg); }
.insta__ctrl .insta__play { font-size: 16px; }
.insta__ctrl .insta__play[hidden] { display: none; }
.insta__count { font: 400 22px/1 var(--mono); letter-spacing: .08em; display: inline-flex; align-items: baseline; }
.insta__cur { position: relative; display: inline-block; overflow: hidden; height: 1.15em; line-height: 1.15; vertical-align: bottom; }
.insta__cur span { display: block; }
.insta__cta { display: flex; gap: 12px; flex-wrap: wrap; }
/* sin JS: cuadrícula como v1 */
.insta__stack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.insta__card { display: block; overflow: hidden; text-decoration: none; color: var(--ink); background: #fff; }
.insta__card img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: grayscale(1); }
.insta__cap { display: none; }
/* con JS: la pila */
.insta__stack.is-stack { display: block; position: relative; height: clamp(380px, 46vw, 600px); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.insta__stack.is-stack .insta__card {
  position: absolute; left: 50%; top: 50%;
  width: min(78%, 400px); margin: 0; padding: 12px 12px 0;
  translate: -50% -50%;
  box-shadow: 0 22px 46px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.2);
}
.insta__stack.is-stack .insta__card img { aspect-ratio: 4 / 4.4; pointer-events: none; -webkit-user-drag: none; }
.insta__stack.is-stack .insta__cap { display: block; padding: 10px 2px 12px; font: 400 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #333; }

/* ---------- prensa ---------- */
.press { padding: var(--sec-y) 0 var(--sec-b); overflow: clip; }
/* con el aire de .wrap a los lados (antes padding: 0 le ganaba a .wrap y, abajo de 1240 px, la lista
   quedaba pegada a la orilla de la pantalla) */
.press__list {
  list-style: none; padding: 0; margin: 0 auto;
  width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--max) - 2 * var(--gutter));
  border-top: 1px solid var(--fg);
}
.press__list li { border-bottom: 1px solid var(--rule); }
.press__row {
  position: relative;
  display: grid; grid-template-columns: 300px 1fr 70px 70px; gap: 24px; align-items: baseline;
  padding: 26px 0; text-decoration: none; color: var(--fg);
  transition: padding .6s var(--ease-out);
}
/* links con sangría en hover */
.press__row::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 34px; height: 1px; background: var(--fg);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out);
}
.press__row:hover, .press__row:focus-visible { padding-left: 54px; }
.press__row:hover::before, .press__row:focus-visible::before { transform: scaleX(1); }
.press__outlet { font: 400 28px/1.1 var(--serif); text-transform: uppercase; }
.press__row:hover .press__outlet { font-style: italic; }
.press__what { color: var(--fg-2); }
.press__when { font: 400 13px/1 var(--mono); color: var(--fg-3); }
.press__go { display: inline-flex; align-items: center; justify-content: flex-end; gap: .7em; font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-align: right; }
.press__go .i-fl { font-size: 1.3em; }
.press__row:hover .press__go .i-fl, .press__row:focus-visible .press__go .i-fl { transform: translate(.12em, -.12em); }

/* ---------- FAQs ---------- */
/* abajo, --sec-b como las demás: ahora entra la Línea del footer, que suma su propio aire */
.faqs { padding: var(--sec-y) 0 var(--sec-b); overflow: clip; }
.faqs__list { max-width: 860px; }
.faqs details { border-bottom: 1px solid var(--rule); padding: 4px 0; }
.faqs summary { list-style: none; cursor: pointer; padding: 22px 46px 22px 0; position: relative; font: 400 clamp(20px, 2vw, 26px)/1.25 var(--serif); transition: padding .5s var(--ease-out); }
.faqs summary:hover { padding-left: 12px; }
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary::after { content: "+"; position: absolute; right: 4px; top: 18px; font: 300 30px/1 var(--sans); transition: transform .4s var(--ease-out); }
.faqs details[open]:not(.is-closing) summary::after { transform: rotate(45deg); }
.faq__a { overflow: hidden; }
.faq__a p { padding: 0 46px 24px 0; color: var(--fg-2); }

/* ---------- hover-float (servicios y prensa; lo crea app.js) ---------- */
.hover-float {
  position: fixed; left: 0; top: 0; z-index: 70;
  width: 290px; pointer-events: none;
  opacity: 0; transition: opacity .3s ease;
}
.hover-float.is-on { opacity: 1; }
.hover-float__img { aspect-ratio: 4 / 5; overflow: hidden; background: #222; box-shadow: 0 24px 50px rgba(0,0,0,.4); }
.hover-float__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.hover-float__ph { display: grid; place-items: center; height: 100%; padding: 20px; text-align: center; font: 400 11px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #bbb; background: repeating-linear-gradient(135deg, #161616 0 12px, #1d1d1d 12px 24px); }
.clipping {
  background: #fbfaf7; color: var(--ink);
  padding: 22px 22px 26px; box-shadow: 0 22px 44px rgba(0,0,0,.22);
  border: 1px solid #e5e2db;
}
.clipping__outlet { display: block; font: 400 30px/1 var(--serif); text-transform: uppercase; border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 12px; }
.clipping__what { display: block; font: italic 400 21px/1.2 var(--serif); }
.clipping__when { display: block; margin-top: 14px; font: 400 11px/1 var(--mono); letter-spacing: .08em; color: #666; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .cdj-nav__links { display: none; }
  .cdj-nav__actions, .cdj-nav__links + .cdj-nav__actions { margin-left: auto; }
}
@media (max-width: 1080px) {
  .djs__grid { grid-template-columns: repeat(3, 1fr); }
  .svc { grid-template-columns: 60px 1fr 40px; }
  .svc__txt { grid-column: 2 / 3; }
  .press__row { grid-template-columns: 220px 1fr 60px 60px; }
}
@media (max-width: 860px) {
  :root { --nav-h: 64px; --gutter: 20px; }
  .cdj-nav { gap: 12px; }
  /* «ES / EN» fuera de la barra (como el del 1-oct): en el celular y la tablet va en el menú y al pie.
     El nav minimal (la encuesta, sin menú) lo conserva mientras quepa (chrome.js, ajustarNav) */
  .cdj-nav:not(.cdj-nav--minimal) .cdj-lang { display: none; }
  .cdj-menu__in { grid-template-columns: 1fr; align-items: start; gap: 36px; }
  .cdj-menu__links a { white-space: normal; font-size: clamp(34px, 10.4vw, 64px); }
  .cdj-menu__vinyl { width: 84px; height: 84px; }
  .cdj-footer__in { padding-top: 96px; }
  .cdj-footer__cols { grid-template-columns: 1fr 1fr; }
  .hero__meta { flex-direction: column; align-items: flex-start; gap: 14px; }
  /* "Sonando:" no se sale de la pantalla: se corta con puntos suspensivos */
  .now { max-width: 100%; }
  .now__track { flex: 1 1 auto; }
  .now__track span { overflow: hidden; text-overflow: ellipsis; }
  .hero__scroll { display: none; }
  .proof__stats { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .proof__stats li:nth-child(3) { border-left: 0; }
  .mani__row { padding: 40px var(--gutter) 100px; }
  .mani__phrase { white-space: normal; font-size: clamp(42px, 11vw, 80px); }
  .mani__row:not(.mani__row--r) .mani__txt { margin-left: 0; }
  .mani__row--r .mani__phrase { text-align: left; }
  .mani__row--r .mani__txt { margin-left: 0; }
  .mani__wheel { width: 64px; height: 64px; }
  .mani__grid { grid-template-columns: repeat(3, 1fr); }
  .mani__grid i:nth-child(n+4) { display: none; }
  .why__quote { grid-template-columns: 1fr; gap: 44px; }
  .djs__grid { grid-template-columns: repeat(2, 1fr); gap: 48px 22px; }
  .polaroid__sig { font-size: 35px; }
  .svc { grid-template-columns: 1fr 30px; gap: 14px; padding: 34px var(--gutter); }
  .svc__num { display: none; }
  .svc__txt { grid-column: 1 / 2; }
  .svc__arrow { grid-row: 1; grid-column: 2; }
  .reviews__grid, .process__steps { grid-template-columns: 1fr; }
  .process__steps { gap: 46px; padding-left: 30px; }
  .process__line { left: 6px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .process__line i { transform-origin: center top; }
  .process__steps li { padding-top: 0; }
  .process__steps li::before { left: -30px; top: 6px; }
  .test__grid, .insta__grid { grid-template-columns: 1fr; }
  .test__deck { max-width: 360px; }
  .press__row { grid-template-columns: 1fr auto; gap: 8px 16px; }
  .press__what { grid-column: 1 / -1; grid-row: 2; }
  .press__when { display: none; }
  .press__row:hover, .press__row:focus-visible { padding-left: 0; }
  .press__row::before { display: none; }
  .nota { position: relative; top: auto; right: auto; display: block; margin: 0 auto 18px; max-width: 92%; }
}
@media (max-width: 520px) {
  .cdj-nav__cta { display: none; }
  /* en el nav minimal (encuesta) no hay WhatsApp flotante: el CTA se queda (brief §6.2) */
  .cdj-nav--minimal .cdj-nav__cta { display: inline-flex; padding: 10px 12px; font-size: 10px; letter-spacing: .08em; }
  .cdj-nav--minimal .cdj-nav__logo img { height: 18px; }
  .hero__kicker { font-size: 11px; letter-spacing: .38em; margin-bottom: 22px; }
  .hero__h1 { margin-top: 30px; }
  .hero__cta { margin-top: 34px; }
  .hero__meta { margin-top: 48px; }
  .hero__title { font-size: 15.4vw; }
  .hero__cta .btn { padding: 14px 20px; font-size: 12px; }
  .djs__grid { grid-template-columns: 1fr 1fr; gap: 38px 14px; }
  .polaroid { padding: 8px 8px 12px; }
  .polaroid__sig { font-size: 29px; }
  .polaroid__genres, .polaroid__ticket { font-size: 9px; }
  .polaroid__ticket b { font-size: 12px; }
  .cdj-footer__big { font-size: 30vw; }
  html:lang(en) .cdj-footer__big { font-size: 25vw; } /* «dance» / «floor», en dos líneas */
  .cdj-footer__cols { grid-template-columns: 1fr; gap: 26px; margin-top: 70px; }
  .sticker { font-size: 15px; padding: 9px 12px; }
  .sticker--1 { left: 0; }
  .sticker--2 { right: 0; }
  .insta__ctrl button { width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.lenis) { scroll-behavior: auto; }
  body { transition: none; }
  .hero__scroll i::after { animation: none; }
  .cdj-menu, .cdj-menu__links a, .cdj-menu__side { transition: none !important; }
}
@media print {
  .cdj-nav, .cdj-menu, .wa-float, .notes-toggle, .nota { display: none !important; }
}

/* =========================================================
   AVISO DE COOKIES Y PREFERENCIAS (lo arma js/analitica.js; README «Analítica»)
   Solo aparece si hay GA4 en producción o con ?analitica=prueba. Fijo (no empuja nada): abajo a la
   izquierda, lejos del WhatsApp flotante (abajo a la derecha); en el celular, a lo ancho y ENCIMA del
   flotante. Blanco y negro editorial: tarjeta blanca con filete negro, etiquetas en versales.
   Entra con un fundido que sube 12 px; modo suave (movimiento reducido): solo el fundido.
   Aceptar y Rechazar: el mismo botón, mismo tamaño y mismo peso.
   ========================================================= */
.cdj-cookies {
  --ck-bg: #ffffff; --ck-fg: #0b0b0b; --ck-fg-2: #333333; --ck-fg-3: #6b6b6b; --ck-rule: #e2e0db;
  position: fixed; left: 22px; bottom: 22px; z-index: 88;
  width: min(440px, calc(100vw - 118px)); /* 118 = margen + el flotante (58 px a 22 px) + aire */
  max-height: calc(100vh - 120px);
  max-height: calc(100svh - 120px);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 22px 22px 20px;
  background: var(--ck-bg); color: var(--ck-fg);
  border: 1px solid var(--ck-fg);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
  font: 400 13.5px/1.6 var(--sans); letter-spacing: normal; text-transform: none; text-align: left;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .4s ease, transform .6s var(--ease-out), visibility 0s linear .6s;
}
.cdj-cookies.is-in {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .55s ease, transform .75s var(--ease-out), visibility 0s;
}
/* el menú de pantalla completa (z-index 79) y las hojas modales (la del aviso simplificado de la encuesta) van
   encima: mientras están abiertos, analitica.js le pone .is-tapado (e inert) y el aviso se funde en su lugar,
   sin clics ni foco; al cerrarlos vuelve con el fundido de .is-in */
.cdj-cookies.is-in.is-tapado {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
/* en el prototipo, el botón amarillo de notas vive abajo a la izquierda: el aviso se sube (en dist/ no hay botón) */
body:has(.notes-toggle) .cdj-cookies { bottom: 70px; }
.cdj-cookies a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cdj-cookies :focus-visible { outline: 2px solid var(--ck-fg); outline-offset: 3px; }
.cdj-cookies [tabindex="-1"]:focus { outline: none; } /* el título recibe el foco al abrir las preferencias */
.cdj-cookies__label { font-size: 11px; letter-spacing: .32em; margin-bottom: 10px; }
.cdj-cookies__txt { color: var(--ck-fg-2); }
.cdj-cookies__aviso { font-weight: 600; color: var(--ck-fg); white-space: nowrap; }
.cdj-cookies__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.cdj-cookies__btns--uno { grid-template-columns: 1fr; }
.cdj-cookies__btn {
  min-height: 46px; padding: 12px 16px;
  border: 1px solid var(--ck-fg); border-radius: 999px;
  background: transparent; color: var(--ck-fg);
  font: 600 11.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
.cdj-cookies__btn:hover { background: var(--ck-fg); color: var(--ck-bg); }
/* preferencias */
.cdj-cookies__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.cdj-cookies__head .cdj-cookies__label { margin-bottom: 0; }
.cdj-cookies__x {
  flex: none; width: 44px; height: 44px; margin: -12px -12px -12px 0; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; color: var(--ck-fg); cursor: pointer;
}
.cdj-cookies__x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.25px; }
.cdj-cookies__x svg path { vector-effect: non-scaling-stroke; }
.cdj-cookies__fila { padding: 14px 0 12px; border-top: 1px solid var(--ck-rule); }
.cdj-cookies__head + .cdj-cookies__fila { border-top: 0; padding-top: 8px; }
/* cada fila: el texto aprobado tal cual (sin versales, para que se lea idéntico) con su nombre en negritas y,
   en la de analítica, abajo el interruptor con su estado (igual en el celular y en escritorio) */
.cdj-cookies__desc { color: var(--ck-fg-2); font-size: 13px; line-height: 1.55; }
.cdj-cookies__nombre { font-weight: 600; color: var(--ck-fg); }
.cdj-cookies__pie { margin-top: 12px; font-size: 12px; text-align: center; }
/* el interruptor (role="switch"): riel con filete; prendido = riel negro y botón blanco a la derecha */
.cdj-switch {
  display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 10px;
  min-height: 44px; margin: 6px 0 -6px; padding: 0;
  background: none; border: 0; color: var(--ck-fg); cursor: pointer;
}
.cdj-switch__txt { font: 600 10.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.cdj-switch__riel {
  position: relative; flex: none; width: 42px; height: 24px;
  border: 1px solid var(--ck-fg); border-radius: 999px;
  transition: background-color .25s ease;
}
.cdj-switch__riel i {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--ck-fg);
  transition: transform .3s var(--ease-out), background-color .25s ease;
}
.cdj-switch[aria-checked="true"] .cdj-switch__riel { background: var(--ck-fg); }
.cdj-switch[aria-checked="true"] .cdj-switch__riel i { transform: translateX(18px); background: var(--ck-bg); }
/* «Preferencias de cookies» al pie (chrome.js; en la encuesta, analitica.js): se ve como una liga */
.cdj-cookies-liga {
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
  text-decoration: underline; text-underline-offset: 2px;
}
.cdj-footer__legal .cdj-cookies-liga { color: var(--fg-2); }
/* celular: a lo ancho, encima del WhatsApp flotante (22 + 58 px) */
@media (max-width: 560px) {
  .cdj-cookies, body:has(.notes-toggle) .cdj-cookies {
    left: 12px; right: 12px; bottom: 92px; width: auto;
    padding: 18px 18px 16px; font-size: 13px;
  }
  .cdj-cookies__btns { margin-top: 14px; }
}
/* la encuesta no lleva WhatsApp flotante: el aviso baja */
.enc-page .cdj-cookies { bottom: 22px; }
@media (max-width: 560px) { .enc-page .cdj-cookies { bottom: 12px; } }
html.js-soft .cdj-cookies { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cdj-cookies, .cdj-cookies.is-in { transform: none; }
  .cdj-cookies { transition: opacity .4s ease, visibility 0s linear .4s; }
  .cdj-cookies.is-in { transition: opacity .4s ease, visibility 0s; }
  .cdj-switch__riel, .cdj-switch__riel i { transition: none; }
}
@media print { .cdj-cookies { display: none !important; } }


/* ---- producción (lo agrega herramientas/build.py): nada del prototipo a la vista ---- */
.nota, .notes-toggle, .hero-picker, .enc-notas, [data-solo-prototipo] { display: none !important; }