/* =============================================================
   WONDER STUDIO — Brutalist B&N
   0. Tipografía de marca: Sequel 100 Wide (OGJ Type Design)
   ============================================================= */
/* Condensadas altas para titulares full-screen (OFL, uso comercial libre) */
@font-face {
  font-family: "Anton";
  src: url("fonts/anton.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bebas Neue";
  src: url("fonts/bebasneue.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atelia";
  src: url("fonts/atelia.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Baleryna Taylor";
  src: url("fonts/baleryna.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Indosign";
  src: url("fonts/indosign.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Not my Type";
  src: url("fonts/notmytype.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sequel 100 Wide";
  src: url("fonts/sequel-100-wide-95.woff2") format("woff2");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sequel 100 Wide";
  src: url("fonts/sequel-100-wide-96.woff2") format("woff2");
  font-weight: 700 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Sequel 100 Wide";
  src: url("fonts/sequel-100-wide-75.woff2") format("woff2");
  font-weight: 100 699;
  font-style: normal;
  font-display: swap;
}

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --bg: #ffffff;
  --ink: #000000;
  --mute: #575757;
  --line: #000000;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --display: "Sequel 100 Wide", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Space Mono", "Courier New", monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(1rem, 4vw, 3rem);
  --header-h: 64px;
  /* alto del cintillo de clientes anclado (medido; se usa para que el
     lema de Good Identity se ancle debajo de el) */
  --cintillo-h: 102px;
  /* Color del anillo de foco. Se invierte en las secciones de fondo oscuro. */
  --focus: #000000;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 8px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
/* VIUDAS (regla dura de Che): `pretty` es heredable — en body cubre TODO
   el texto; `balance` reparte lineas en los bloques cortos */
body { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.02; letter-spacing: -0.02em; }
h5, h6, blockquote, figcaption, dt, dd, .lead, .card-pill, .caso-tapa-hook,
.section-head p, .mp-sub, .stat-label { text-wrap: balance; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
/* Sobre fondo oscuro el anillo negro era invisible: aquí se vuelve blanco */
.hero, .marquee, .contacto { --focus: #ffffff; }

/* Solo para lectores de pantalla y buscadores: invisible, pero presente */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* utilidades de copy por orientacion (movil vs desktop) */
.solo-horizontal { display: none; }
@media (min-width: 720px) {
  .solo-vertical { display: none; }
  .solo-horizontal { display: inline; }
}

.mono {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .6rem 1rem; background: var(--ink); color: var(--bg);
  z-index: 9999; font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* Revelados: estado inicial + visible. Defensivo: [data-split] nunca se oculta */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-split] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* =============================================================
   3. Header
   ============================================================= */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--gutter);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.header-logo { display: flex; align-items: center; gap: .7rem; }
.header-logo img {
  height: 34px; width: auto;
  transition: transform .25s var(--ease-out);
}
/* zoom discreto al pasar el cursor (pedido Che) */
.header-logo:hover img, .header-logo:focus-visible img { transform: scale(1.08); }
.header-logo .header-logo-lockup { height: 26px; }
.header-logo-texto {
  font-family: var(--display);
  font-weight: 800; font-stretch: 115%;
  text-transform: uppercase;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.header-logo-texto em { font-style: italic; font-weight: 400; }
.header-nav { display: none; gap: 0; }
.header-nav a {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: .55rem 1rem;
  border: 1px solid transparent;
  transition: background .15s steps(1), color .15s steps(1);
}
.header-nav a:hover { background: var(--ink); color: var(--bg); }
.header-nav .nav-cta { border: 1px solid var(--ink); margin-left: .5rem; }

.header-burger {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 4px;
}
.header-burger span { display: block; width: 26px; height: 2px; background: var(--ink); transition: transform .3s var(--ease-out); }
.header-burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.header-burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

@media (min-width: 720px) {
  .header-nav { display: flex; align-items: center; }
  .header-burger { display: none; }
}
/* Menú móvil desplegado */
@media (max-width: 719px) {
  .header-nav.is-open {
    display: flex; flex-direction: column; align-items: stretch;
    position: fixed; top: var(--header-h); left: 0; right: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 1rem var(--gutter) 1.5rem;
  }
  .header-nav.is-open a { padding: 1rem 0; border-bottom: 1px solid rgba(0,0,0,.15); font-size: .9rem; }
  .header-nav.is-open .nav-cta { border: 1px solid var(--ink); margin: 1rem 0 0; text-align: center; }
}

/* =============================================================
   4. Hero
   ============================================================= */
.hero {
  /* sticky + z-index negativo: el hero se queda fijo y lo que sigue
     (cintillo, bloque Wonder) sube por encima y lo va cubriendo */
  position: sticky; top: 0; z-index: -1;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 2rem;
  border-bottom: 1px solid var(--line);
  color: #fff;
  overflow: hidden;
}
.hero-fondo { position: absolute; inset: 0; z-index: 0; }
/* el reel de la casa como fondo del hero: entra por encima de las fotos
   cuando ya puede reproducir (corte duro, sin fundido cremoso) */
.hero-video {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  display: none;
}
.hero-video.is-lista { display: block; z-index: 2; }
/* Red de seguridad del hero mientras carga el reel (pedido Che): logo
   blanco sobre negro, orientado hacia la derecha sin pegarse al borde */
.hero-espera {
  position: absolute; inset: 0; z-index: 1; background: #0d0d0d;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: clamp(3rem, 16vw, 18rem);
  transition: opacity .5s ease;
}
/* en cuanto el reel corre, la espera se desvanece y deja de estorbar */
.hero-espera.se-va { opacity: 0; pointer-events: none; }
/* respaldo sin JS: si el video ya esta listo, la espera se va igual */
.hero:has(.hero-video.is-lista) .hero-espera { opacity: 0; pointer-events: none; }
.hero-espera-logo {
  width: clamp(200px, 30vw, 420px); height: auto;
  filter: brightness(0) invert(1);
}
.hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
  opacity: 0;
  transition: opacity .7s ease;
}
.hero-bg.is-activa { opacity: 1; }
/* Entrada del titulo del hero (ref flim.ai de Che): cada linea sube
   desde adentro de su mascara con desfase, aterrizando suave */
.hero-line { display: block; overflow: hidden; padding: .07em 0 .05em; margin: -.04em 0; }
.hero-line-int {
  display: inline-block; transform-origin: left bottom;
  transform: translateY(118%) rotate(3deg);
  animation: hero-linea-subir .85s cubic-bezier(.16, 1, .3, 1) forwards;
}
.hero-line:nth-child(1) .hero-line-int { animation-delay: .15s; }
.hero-line:nth-child(2) .hero-line-int { animation-delay: .30s; }
.hero-line:nth-child(3) .hero-line-int { animation-delay: .45s; }
@keyframes hero-linea-subir { to { transform: translateY(0) rotate(0deg); } }
@media (prefers-reduced-motion: reduce) {
  .hero-line-int { animation: none; transform: none; }
}
.hero-tinte {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,.18) 45%, rgba(0,0,0,.62) 100%);
  pointer-events: none;
}
.hero-meta, .hero-title, .hero-foot { position: relative; z-index: 1; }
.hero-meta {
  display: flex; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.55);
  padding-bottom: .8rem; margin-bottom: auto;
  color: rgba(255,255,255,.85);
}
.hero-title {
  font-family: var(--display);
  font-size: clamp(1.9rem, 6.2vw, 5.4rem);
  font-weight: 800;
  font-stretch: 115%;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.94;
  margin-top: 2rem;
  text-shadow: 0 2px 28px rgba(0,0,0,.35);
}
.hero-line { display: block; }
.hero-title em { font-style: italic; font-weight: 700; }
.hero-star { display: inline-block; margin-left: .1em; animation: starSpin 14s linear infinite; transform-origin: 50% 52%; }
@keyframes starSpin { to { transform: rotate(360deg); } }

.hero-foot {
  display: flex; flex-direction: column; gap: 1.5rem;
  margin-top: 2.5rem; padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.55);
}
.hero-sub { max-width: 44ch; font-size: 1.05rem; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.hero-scroll { color: rgba(255,255,255,.8); transition: color .15s steps(1); align-self: flex-start; padding: .95rem 0; margin-block: -.55rem; }
.hero-scroll:hover { color: #fff; }

@media (min-width: 720px) {
  .hero-foot { flex-direction: row; justify-content: space-between; align-items: flex-end; }
}

/* =============================================================
   5. Marquee
   ============================================================= */
/* Idea Che: el cintillo sube, se BLOQUEA justo debajo del header y los
   logos siguen circulando ahi anclados HASTA que llega el bloque negro
   de This is how we do. Todo lo intermedio (tablero, Good Identity,
   casos, proyectos) desfila POR DETRAS (z menor). El envoltorio
   .pista-cintillo limita hasta donde vive anclado: su colchon inferior
   de 100svh deja que el cintillo y el stop de Proyectos sigan vivos
   mientras la cortina negra (z-index 3, despues en el DOM) los cubre;
   el margen negativo devuelve el flujo para que el resto de la pagina
   no se mueva de su lugar. */
.pista-cintillo { margin-bottom: -165svh; }
/* colchon de CONTENIDO (no padding: los sticky solo viven dentro del area
   de contenido de su contenedor): alarga la vida del cintillo anclado y
   del stop de Proyectos mientras la cortina negra los cubre */
.pista-cintillo::after { content: ""; display: block; height: 165svh; }
.marquee {
  position: sticky; top: var(--header-h); z-index: 3;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--ink);
  padding-block: 1.1rem;
}
/* Etiqueta fija a la izquierda (ref Glaido de Che): bloque negro opaco con
   borde; el cintillo corre y desaparece POR DETRAS de el */
.marquee-etiqueta {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 2;
  font-weight: 700; /* mas bold (pedido Che) */
  display: flex; align-items: center; gap: .6rem;
  padding: 0 clamp(1.1rem, 3vw, 2.4rem);
  background: var(--ink); color: #fff;
  border-right: 1px solid rgba(255, 255, 255, .25);
  white-space: nowrap;
}
.marquee-punto { color: #e10600; font-size: .6rem; }
@media (max-width: 719px) {
  /* en telefono la etiqueta no cabe al lado: pasa a ser una franja arriba */
  .marquee-etiqueta {
    position: relative; inset: auto;
    padding: 0 0 .7rem; border-right: 0;
    /* centrada en el cintillo (pedido Che, solo movil) */
    justify-content: center;
  }
}
/* Bloque de marca: no se pega — pasa de corrido, cubriendo al hero pinneado
   nada mas por ir encima en capas (z-index), sin detenerse en la salida */
.wonder-id {
  /* pasa DE CORRIDO por detras de los dos cintillos, sin bloquearse
     (pedido Che); sin border-bottom: esa era la linea de la costura */
  position: relative; z-index: 1;
  min-height: 78svh; display: flex; align-items: center; justify-content: center;
  background: var(--bg); overflow: hidden;
}
.wonder-id-img { width: min(527px, 66vw); height: auto; display: block; }
/* Cuadricula de hover sobre el tablero (idea Che): cada cuadrito reacciona
   al cursor con un color del festin. Corte duro al entrar, sin fade. */
.wid-marco { position: relative; display: inline-block; line-height: 0; }
/* Zoom in/out del tablero mientras el bloque atraviesa la pantalla
   (pedido Che), amarrado al scroll */
@supports (animation-timeline: view()) {
  @keyframes tablero-zoom {
    0%   { scale: .88; }
    50%  { scale: 1.07; }
    100% { scale: .88; }
  }
  /* timeline NOMBRADO en la seccion: .wonder-id tiene overflow hidden y
     un view() directo en el marco mediria contra ella (que no scrollea)
     — la escala quedaba congelada */
  .wonder-id { view-timeline: --wid block; }
  .wid-marco {
    animation: tablero-zoom linear both;
    animation-timeline: --wid;
  }
  @media (prefers-reduced-motion: reduce) { .wid-marco { animation: none; } }
}
.wid-celdas {
  position: absolute; inset: 0;
  display: grid; grid-template-rows: 1fr 1fr; grid-template-columns: repeat(6, 1fr);
}
.wid-celda--negra:hover, .wid-celda--negra.wid-celda--viva { background: var(--celda-c); mix-blend-mode: screen; }
.wid-celda--blanca:hover, .wid-celda--blanca.wid-celda--viva { background: var(--celda-c); mix-blend-mode: multiply; }
@media (max-width: 719px) {
  .wonder-id { min-height: 58svh; }
  .wonder-id-img { width: min(289px, 66vw); }
}
.marquee-track {
  display: flex; width: max-content;
  animation: marquee 36s linear infinite;
}
.marquee-set {
  display: flex; align-items: center;
  gap: clamp(2.2rem, 5vw, 4rem);
  padding-right: clamp(2.2rem, 5vw, 4rem);
}
.marca {
  height: var(--mh, 40px); width: auto;
  /* logo con fondo transparente → silueta blanca */
  filter: brightness(0) invert(1);
}
.marca--gv {
  /* Great Value: texto claro dentro de óvalo — se conserva el contraste interno en gris */
  filter: grayscale(1) brightness(1.15);
}
.marca--caja {
  /* logo con caja blanca: se invierte y el negro resultante se funde con la banda */
  filter: invert(1) grayscale(1) brightness(2.2);
  mix-blend-mode: screen;
}
@keyframes marquee { to { transform: translateX(-50%); } }
@media (max-width: 719px) { .marca { height: calc(var(--mh, 40px) * .7); } }

/* =============================================================
   6. Secciones comunes
   ============================================================= */
section { padding: clamp(4rem, 9vw, 8rem) var(--gutter); }

.section-head {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1.2rem; margin-bottom: 2.5rem;
}
.section-head h1, .section-head h2 {
  font-family: var(--display);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 800; font-stretch: 110%; text-transform: uppercase;
}
.section-num { color: var(--mute); margin-right: .8rem; font-weight: 400; }

.grid-2 { display: grid; gap: 2rem; }
.grid-3, .grid-4 { display: grid; gap: 1px; }
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: 1fr 2fr; gap: 3rem; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* =============================================================
   7. Manifiesto + stats
   ============================================================= */
/* Fondo opaco: sin esto, mientras el hero sigue "detras" (z-index -1) pegado,
   se transparenta por donde el manifiesto no tiene texto encima. */
.manifiesto {
  /* fijo al tope para que Casos se le monte encima; su contenido se retira
     (sube y encoge) al ritmo del avance de Casos — nunca se ve estatico */
  /* z-index 1 (mismo que el cintillo .marquee pero despues en el DOM):
     al fijarse, tapa el cintillo en vez de dejarlo asomado */
  /* bloque NEGRO (pedido Che): titulo blanco y el festin de neones
     encima — pariente del tablero y de las casillas de numeros */
  background: #0d0d0d; color: #fff; position: sticky; top: 0; z-index: 2;
  border-bottom: 1px solid var(--line);
  /* pantalla completa: el hero (fijo, detras) no debe asomarse.
     El lema anclado ARRIBA sin colchon blanco (estado "perfecto" de Che) */
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-start;
  /* + cintillo: el lema se ancla DEBAJO del header y de la franja negra
     de clientes, que ahora vive bloqueada encima (idea Che) */
  padding-top: calc(var(--header-h) + var(--cintillo-h, 0px) + clamp(2.6rem, 8svh, 4.5rem));
}
.manifiesto-num { color: var(--mute); }
.manifiesto-title {
  font-family: var(--display);
  font-size: clamp(1.8rem, 4.5vw, 3.4rem);
  font-weight: 800; font-stretch: 110%;
  text-transform: uppercase;
  margin-bottom: 1.6rem;
}
.manifiesto-title em { font-style: italic; }
.manifiesto-text { max-width: 62ch; margin-bottom: 1.2rem; font-size: 1.02rem; }
.manifiesto-lema {
  font-family: var(--display);
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  font-weight: 800; font-stretch: 110%;
  text-transform: uppercase;
  max-width: 62ch;
}
.manifiesto-lema em { font-style: italic; }
/* Version standalone: tipografia gigante de lado a lado que se "abre"
   (letter-spacing) conforme la seccion entra con el scroll */
.manifiesto-lema--solo {
  margin: 0; padding: 0; border: 0;
  /* en telefono va GRANDE a 4 lineas: una palabra por linea (pedido Che) */
  font-size: clamp(2.5rem, 14.5vw, 5rem);
  line-height: 1.02;
  width: 100%; text-align: center;
  letter-spacing: .005em;
}
@media (min-width: 720px) {
  .manifiesto-lema--solo { font-size: 4.15vw; line-height: .95; white-space: nowrap; }
}
@supports (animation-timeline: view()) {
  /* el timeline de entrada vive en la seccion; el de retirada vive en .casos
     (seccion hermana), y timeline-scope lo hace audible desde el lema */
  body { timeline-scope: --casos, --movpin; }
  .manifiesto { view-timeline: --manif block; }
  .casos { view-timeline: --casos block; }
  @keyframes lema-abrir {
    from { letter-spacing: -.26em; opacity: .35; }
    to   { letter-spacing: .005em; opacity: 1; }
  }
  /* retirada: el bloque sube y encoge AL RITMO en que Casos se le monta */
  @keyframes lema-retirar {
    from { transform: translateY(0) scale(1); }
    to   { transform: translateY(-24svh) scale(.5); }
  }
  /* el titulo queda PLASMADO (pedido Che): sin retirada — solo la
     apertura de entrada; Casos simplemente le cae encima */
  .manifiesto-lema--solo {
    animation: lema-abrir linear both;
    animation-timeline: --manif;
    animation-range: entry 10% entry 95%;
  }
  /* los cajones de numeros SI se encogen mientras Casos los cubre —
     con piso en 62%: se hacen pequenos pero jamas llegan a cero */
  @keyframes stats-encoger {
    from { transform: scale(1); }
    to   { transform: scale(.62); }
  }
  .stats {
    animation: stats-encoger linear both;
    animation-timeline: --casos;
    animation-range: entry 25% entry 85%;
  }
  @media (prefers-reduced-motion: reduce) { .manifiesto-lema--solo { animation: none; } }

  /* Los numeros se forman con el scroll: enteros registrados para que la
     interpolacion salte de entero en entero (ticks duros) y un counter pinte.
     Dos variables (ida --na en la entrada, regreso --nb en la retirada) se
     combinan en --n: dos animaciones sobre la MISMA variable se pisarian por
     el fill. El texto real lo vacia main.js cuando este camino esta soportado. */
  @property --n  { syntax: '<integer>'; initial-value: 0; inherits: false; }
  @property --na { syntax: '<integer>'; initial-value: 0; inherits: false; }
  @keyframes stat-contar { from { --na: 0; } to { --na: var(--n-final, 0); } }
  @keyframes stat-subir {
    from { transform: translateY(.55em); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }
  /* en la retirada el cajon se disuelve en grises antes de que Casos lo tape */
  @keyframes stat-gris {
    /* arranca desde el color propio de cada cajon (paleta del festin) */
    from { color: var(--stat-c, var(--ink, #000)); }
    to   { color: #bdbdbd; }
  }
  @media (min-width: 720px) {
  .stat-num {
    /* solo la ida (pedido Che): cuentan hasta su maximo y ahi se quedan,
       sin desconteo en la retirada */
    --n: var(--na);
    counter-reset: statn var(--n);
    animation: stat-contar linear both;
    animation-timeline: --manif;
  }
  .stat-num::after { content: counter(statn); }
  .stat {
    /* solo la entrada: llegan a su color pleno y ahi se quedan
       (pedido Che: sin disolverse a gris en la retirada) */
    animation: stat-subir linear both;
    animation-timeline: --manif;
  }
  }
  /* cascada izquierda → derecha en la entrada. El desconteo corre hasta
     entry 160% del montaje de Casos: asi el bloque negro tapa los cajones
     ANTES de que ningun contador llegue a 0 (nunca se ve el cero). El gris
     avanza mas rapido, en el tramo visible de la retirada. */
  .stat:nth-child(1) { animation-range: entry 30% entry 80%; }
  .stat:nth-child(2) { animation-range: entry 40% entry 90%; }
  .stat:nth-child(3) { animation-range: entry 50% entry 100%; }
  .stat:nth-child(1) .stat-num { animation-range: entry 30% entry 80%; }
  .stat:nth-child(2) .stat-num { animation-range: entry 40% entry 90%; }
  .stat:nth-child(3) .stat-num { animation-range: entry 50% entry 100%; }
  @media (prefers-reduced-motion: reduce) {
    .stats, .stat, .stat-num { animation: none; }
    .stat-num { --n: var(--n-final, 0); }
  }
}
.manifiesto-texto {
  /* papel real de fondo (textura de Che) + grano de ruido encima */
  background: var(--bg) url("img/brand/papel.webp") center / cover;
  border-bottom: 1px solid var(--line);
  position: relative; z-index: 2;
}
.manifiesto-texto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .16; mix-blend-mode: multiply;
}
.carta { position: relative; z-index: 1; }
/* Carta editorial: parrafos en maquina de escribir real (Not my Type,
   fuente de Che) al 80% para fundirse con el papel; la firma en
   Baleryna inclinada ENCIMA, fuera de la reticula */
.carta-fecha, .carta-lead, .carta-texto {
  font-family: "Not my Type", var(--mono);
  color: rgba(0, 0, 0, .8);
  /* la maquina escribe en minusculas (pedido Che): sin las mayusculas
     que hereda del estilo mono */
  text-transform: none;
}
.carta {
  max-width: 640px; margin-inline: auto; position: relative;
  padding-block: clamp(1.5rem, 5vw, 4rem);
  /* hoja apenas girada, como puesta sobre la mesa */
  rotate: .4deg;
}
.carta-lead {
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  line-height: 1.55; letter-spacing: .01em;
}
.carta-texto {
  margin-top: 2.4rem;
  font-size: clamp(.95rem, 1.7vw, 1.12rem);
  line-height: 1.85; color: rgba(0, 0, 0, .8);
}
.carta-fecha {
  font-size: .7rem; letter-spacing: .14em;
  color: rgba(0, 0, 0, .65); text-align: right; margin-bottom: 2.6rem;
}
.carta-firma {
  font-family: "Indosign", "Baleryna Taylor", var(--display);
  /* el minimo baja a 2.4rem: en ingles la firma es mas larga
     ("From Guatemala," vs "Desde Guate,") y con 3rem se salia de la carta
     en el telefono. Asi mantiene la misma jerarquia sin desbordar. */
  font-size: clamp(2.4rem, 8.5vw, 5.4rem);
  max-width: 100%;
  line-height: 1; color: var(--ink);
  /* firma real: inclinada, montada sobre el parrafo y saliendose de la
     caja de texto hacia la derecha — fuera de la diagramacion */
  width: max-content; max-width: 120%;
  margin: -.18em -14% 0 auto;
  rotate: -6deg;
  position: relative; z-index: 1;
  /* aparece con disolvencia de menos a mas (pedido Che) */
  opacity: 0;
}
.carta-firma.is-visible {
  animation: firma-disolver 1.6s ease .2s both;
}
/* Sello de cera (asset de Che): lacra la carta junto a la firma, girado,
   y se estampa con un golpecito seco cuando la firma termina */
.carta-cera {
  position: absolute; right: -13%; bottom: -1.8rem; z-index: 2;
  width: clamp(112px, 14vw, 168px); height: auto;
  opacity: 0;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .28));
}
/* el [data-split] del sistema reveal los forzaba visibles desde el inicio:
   estas reglas mas especificas los mantienen ocultos hasta su turno */
.reveal[data-split].carta-cera { opacity: 0; }
.reveal[data-split].carta-firma { opacity: 0; }
.carta-cera.is-visible {
  animation: cera-estampar .18s ease-out 2.1s both;
}
@keyframes cera-estampar {
  from { scale: 1.45; opacity: 0; }
  to   { scale: 1; opacity: 1; }
}
@media (max-width: 719px) {
  /* firma mas chica y contenida (pedido Che: no pegada al margen) */
  .carta-firma { font-size: 2.5rem; margin: -.1em 0 0 auto; max-width: 100%; }
  /* sello al lado IZQUIERDO (pedido Che): la firma vive a la derecha,
     aca tiene su propio aire y no tapa texto */
  .carta-cera { left: 0; right: auto; width: 88px; bottom: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal[data-split].carta-cera { opacity: 1; }
  .reveal[data-split].carta-firma { opacity: 1; }
  .carta-cera.is-visible { animation: none; }
}
@keyframes firma-disolver {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* subrayado de tinta: el rasgo final de quien firma con ganas — se traza
   justo despues de la firma */
.carta-firma::after {
  content: ""; position: absolute;
  left: 6%; right: 2%; bottom: -.1em; height: .16em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M4 11 Q 150 2 296 8' fill='none' stroke='%23111111' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  clip-path: inset(0 100% 0 0);
}
.carta-firma.is-visible::after {
  animation: raya-trazo .5s cubic-bezier(.6, 0, .3, 1) 1.85s both;
}
@keyframes raya-trazo {
  to { clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  .carta { rotate: 0deg; }
  .carta-firma { opacity: 1; animation: none; }
  .carta-firma::after { clip-path: none; animation: none; }
}
@media (max-width: 719px) {
  /* 9vw y no 11: la firma inglesa ("From Guatemala,") es mas larga que la
     espanola y a 11vw se salia del papel en el telefono. El margen negativo
     tambien se recorta para que no cruce el borde derecho de la carta. */
  .carta-firma { font-size: clamp(2rem, 9vw, 3rem); margin-right: 0; }
}
.section-lema { color: var(--mute); font-weight: 400; margin-left: 1rem; white-space: nowrap; }

.stats {
  margin-top: 4rem;
  /* sin caja ni reticula (pedido Che): los numeros flotan sobre el
     negro del bloque y su subida con opacidad vuelve a protagonizar */
  background: transparent;
  border: 0;
}
/* casilla NEGRA (pedido Che): el neon conserva su color y gana el
   contraste que le faltaba sobre blanco; contenido centrado */
.stat {
  background: transparent; padding: 1.6rem 1.4rem;
  color: var(--stat-c, var(--ink)); text-align: center;
}
/* la etiqueta hereda el neon de su numero (pedido Che: no se leia) */
.stat p { color: var(--stat-c, rgba(255, 255, 255, .62)); }
/* En telefono el bloque completo (lema + 3 cajones apilados) era mas alto
   que la pantalla y el tercer numero quedaba cortado (reporte Che):
   se compacta aire para que TODO quepa antes de que Casos lo cubra */
@media (max-width: 719px) {
  .manifiesto { padding-top: calc(var(--header-h) + var(--cintillo-h) + 1rem); }
  .stats { margin-top: 1.2rem; }
  .stat { padding: .8rem 1rem; }
  .stat p { margin-top: .2rem; }
}
/* Numeros con la paleta del festin del lema (pedido Che):
   14+ rosado, 75+ naranja, 100+ verde. La etiqueta (p) sigue en gris. */
.stat:nth-child(1) { --stat-c: #ff10f0; }
.stat:nth-child(2) { --stat-c: #00f0ff; }
.stat:nth-child(3) { --stat-c: #39ff14; }
/* Numeros en Sequel 100 Wide (pedido Che: "otras fonts") — la misma voz
   del titulo GOOD IDENTITY; pisa la clase .mono del markup */
.stat-num {
  font-family: var(--display);
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  font-weight: 700; line-height: 1;
}
.stat-plus { font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; }
/* bold y mas grande (pedido Che: que se lean bien) */
.stat p { font-size: 1rem; font-weight: 700; margin-top: .45rem; text-transform: uppercase; letter-spacing: .04em; }
/* talla legible en telefono (pedido Che): numeros discretos y etiquetas
   completas hasta la tercera — DESPUES de las bases para ganar cascada */
@media (max-width: 719px) {
  .stat-num { font-size: 2.1rem; }
  .stat-plus { font-size: 1.1rem; }
  .stat p { font-size: .72rem; letter-spacing: .05em; margin-top: .25rem; }
}

/* =============================================================
   8. Proyectos
   ============================================================= */
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; }
.filtro {
  font-family: var(--mono); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .08em;
  padding: .55rem 1.1rem;
  border: 1px solid var(--ink);
  transition: background .15s steps(1), color .15s steps(1);
}
.filtro:hover, .filtro.is-active { background: var(--ink); color: var(--bg); }

/* Tarjetas encajonadas (2-3 por fila) con la pildora de nombre flotando
   sobre la foto — el lenguaje de pildoras de bareis-nicolaus en reticula. */
.grid-proyectos {
  display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
@media (min-width: 640px)  { .grid-proyectos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .grid-proyectos { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--bg); }
.card.is-hidden { display: none; }
.card-btn {
  position: relative; display: block; width: 100%; padding: 0; text-align: left;
  overflow: hidden;
}
.card-img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  transition: transform .7s var(--ease-out);
}
/* Foodstyling Ducal: la foto trae marco blanco arriba — zoom leve lo saca
   del encuadre (pedido Che). "scale" es propiedad aparte: convive con el
   transform del hover */
.card-img[src*="foodstyling-ducal"] { scale: 1.14; }
/* FENDI: reencuadrar hacia la modelo (esta al centro-derecha, arriba) */
.card-img[src*="fendi-x-horizon"] { object-position: 55% 42%; }
/* Tarjeta de puro logo (+Proteina en Campanas): logo a color centrado
   sobre blanco, sin recorte */
.card-img--logo { object-fit: contain; background: #fff; padding: 14%; }
/* pill oscura para tarjetas de fondo claro (doble clase: le gana a la
   regla base .card-pill que viene despues en el archivo) */
.card-pill.card-pill--oscura { color: #0d0d0d; text-shadow: none; }
/* y sin el degradado de foto: sobre blanco solo ensucia */
.card-btn:has(.card-img--logo)::after { display: none; }
/* Vista Campanas (pedido Che): presentar primero +Proteina, Ducal
   Bicentenario y Cemaco; el resto conserva su orden de catalogo */
[data-filtro="campanas"] .card { order: 9; }
[data-filtro="campanas"] .card:has([data-slug="greavi-mas-proteina"]) { order: 1; }
[data-filtro="campanas"] .card:has([data-slug="ducal-bicentenario"]) { order: 2; }
[data-filtro="campanas"] .card:has([data-slug="campana-coleccion-cemaco-navidad-2025"]) { order: 3; }
.card-btn:hover .card-img,
.card-btn:focus-visible .card-img { transform: scale(1.05); }
/* Caption de cine: nombre en mono, esquina inferior izquierda, sin contenedor.
   Un degradado sutil garantiza la lectura sobre cualquier foto. */
.card-pill {
  position: absolute; left: 1rem; bottom: .9rem; z-index: 1;
  color: #fff; font-size: .68rem; letter-spacing: .12em;
  white-space: nowrap; max-width: calc(100% - 2rem);
  overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 8px rgba(0,0,0,.55);
}
.card-btn::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 34%;
  background: linear-gradient(to top, rgba(0,0,0,.5), transparent);
  pointer-events: none;
}

.proyectos { background: var(--bg); position: relative; z-index: 2; }
.proyectos-mas { margin-top: 2rem; color: var(--mute); }
.proyectos-toggle {
  display: block; margin: 2.6rem auto 0;
  padding: .85rem 1.6rem;
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  transition: background .15s steps(1), color .15s steps(1);
}
.proyectos-toggle:hover, .proyectos-toggle:focus-visible { background: var(--ink); color: var(--bg); }
.faq-ver-todo {
  display: block; width: max-content; margin: 2.6rem auto 0;
  padding: .85rem 1.6rem; border: 1px solid var(--ink); color: var(--ink);
  transition: background .15s steps(1), color .15s steps(1);
}
.faq-ver-todo:hover, .faq-ver-todo:focus-visible { background: var(--ink); color: var(--bg); }
.proyectos-mas a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }

/* =============================================================
   9. Equipo
   ============================================================= */
.equipo { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.equipo-grid { grid-template-columns: 1fr; }
@media (min-width: 720px) { .equipo-grid { grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); } }
.persona { background: var(--bg); padding: clamp(1.4rem, 3vw, 2.4rem); }
.persona h3 {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800; font-stretch: 110%; text-transform: uppercase;
}
.persona-rol { color: var(--mute); margin: .5rem 0 1.2rem; }
/* Mismo criterio de medida que el resto del sitio (manifiesto 62ch, modal 65ch) */
.persona p { max-width: 60ch; }
.persona p + p { margin-top: .9rem; }

.dreamteam {
  margin-top: 2.5rem; padding: 1.6rem;
  border: 1px dashed var(--ink);
  max-width: 70ch;
}
.dreamteam .mono { margin-bottom: .5rem; }

/* =============================================================
   10. Contacto (sección negra)
   ============================================================= */
.contacto {
  background: var(--ink); color: var(--bg);
  text-align: center;
  /* pantalla completa (pedido Che): el cierre es un acto propio —
     contenido centrado y el © anclado al fondo */
  min-height: 100svh;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  padding-block: clamp(3rem, 6vw, 5rem) 1.6rem;
}
.contacto-copy { margin-top: auto; padding-top: 3rem; }
.contacto-kicker {
  color: #fff; font-size: clamp(.78rem, 1.3vw, .92rem);
  /* margin-top auto: contrapeso del auto del © — asi el grupo central
     queda centrado de verdad en la pantalla */
  margin-top: auto; margin-bottom: 0; letter-spacing: .22em;
}
/* hairline editorial entre la pregunta y la palabra */
.contacto-kicker::after {
  content: ""; display: block;
  width: 3.4rem; height: 1px; background: rgba(255,255,255,.55);
  margin: 1.6rem auto 1.8rem;
}
/* "Platiquemos": la palabra protagonista del cierre — gigante, italica,
   con la estrella como remate; la pregunta arriba apenas susurra */
.contacto-title.contacto-title--platica {
  /* pequeno y centrado, con el vacio negro como protagonista (pedido
     Che: "no lo quiero gigante, mucho aire a todos lados") */
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1; letter-spacing: -.01em;
  margin: 0 0 3.2rem;
  font-weight: 800; font-stretch: 112%;
}
.contacto-title.contacto-title--platica em { font-style: italic; }
.contacto-star { display: inline-block; font-style: normal; font-size: .5em; vertical-align: .35em; }
.contacto-title {
  font-family: var(--display);
  font-size: clamp(2.2rem, 7vw, 5.5rem);
  font-weight: 800; font-stretch: 112%; text-transform: uppercase;
  margin-bottom: 2.5rem;
}
.contacto-title em { font-style: italic; }
.contacto-mail {
  display: inline-block;
  font-family: var(--mono);
  font-size: clamp(1rem, 3.2vw, 1.8rem);
  border-bottom: 2px solid var(--bg);
  padding-bottom: .3rem;
  margin-bottom: 3rem;
  transition: background .15s steps(1), color .15s steps(1);
}
.contacto-mail:hover { background: var(--bg); color: var(--ink); }
.contacto-acciones { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-bottom: 0; }
.btn-invert, .btn-ghost {
  font-family: var(--mono); font-size: .78rem;
  text-transform: uppercase; letter-spacing: .08em;
  padding: .9rem 1.6rem;
  border: 1px solid var(--bg);
  transition: background .15s steps(1), color .15s steps(1);
}
.btn-invert { background: var(--bg); color: var(--ink); }
.btn-invert:hover { background: transparent; color: var(--bg); }
.btn-ghost:hover { background: var(--bg); color: var(--ink); }

.contacto-logo {
  width: min(200px, 40vw);
  margin: 0 auto 2rem;
  /* el PNG trae estrellas negras sobre fondo transparente: invertido = estrellas blancas */
  filter: invert(1);
}
.contacto-copy { color: rgba(255,255,255,.66); }

/* =============================================================
   11. Modal de proyecto
   ============================================================= */
.proyecto-modal {
  border: 1px solid var(--line);
  padding: 0;
  width: min(920px, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  max-height: calc(100dvh - 3rem);
  margin: auto;
  background: var(--bg); color: var(--ink);
}
.proyecto-modal::backdrop { background: rgba(0,0,0,.82); }
.modal-bar {
  position: sticky; top: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: .8rem 1.2rem;
}
.modal-bar p { color: var(--mute); }
.modal-close {
  font-family: var(--mono); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .08em;
  padding: .5rem 1rem;
  border: 1px solid var(--ink);
  transition: background .15s steps(1), color .15s steps(1);
}
.modal-close:hover { background: var(--ink); color: var(--bg); }
.modal-body { padding: 1.5rem 1.2rem 2rem; }
.modal-body h3 {
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  font-weight: 800; font-stretch: 110%; text-transform: uppercase;
  margin-bottom: .4rem;
}
.modal-cats { color: var(--mute); margin-bottom: 1rem; }
.modal-desc { max-width: 65ch; margin-bottom: 1.6rem; }
.modal-video { aspect-ratio: 16 / 9; width: 100%; border: 1px solid var(--line); margin-bottom: 1rem; }
.modal-img { width: 100%; border: 1px solid var(--line); }

/* =============================================================
   11b. Estado presionado — hundido de 1px, sin transición
   (corte seco, consistente con los steps(1) del resto)
   ============================================================= */
.header-nav a:active,
.filtro:active,
.card-btn:active,
.modal-close:active,
.contacto-mail:active,
.btn-invert:active,
.btn-ghost:active,
.hero-scroll:active,
.skip-link:active {
  transform: translateY(1px);
}

/* =============================================================
   12. Reduced motion — solo efectos intrusivos
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation-play-state: paused; }
  .hero-star { animation: none; }
}

/* =============================================================
   13. Critique 2026-08: destacadas, resultado y CTA del modal
   ============================================================= */
/* Los tres proyectos que abren puertas ocupan doble celda */
@media (min-width: 540px) {
  .grid-proyectos { grid-auto-flow: dense; }
  .card--destacada { grid-column: span 2; }
  .card--destacada .card-fig { aspect-ratio: 16 / 9; }
}
.modal-res { max-width: 65ch; margin-bottom: 1.6rem; font-weight: 700; }
.modal-cta {
  display: inline-block; margin-top: 1.8rem; padding: .9rem 1.3rem;
  border: 1px solid var(--ink); color: var(--ink);
  transition: background .15s steps(1), color .15s steps(1);
}
.modal-cta:hover, .modal-cta:focus-visible { background: var(--ink); color: var(--bg); }
.modal-cta:active { transform: translateY(1px); }

/* Ritmo editorial del modal: hero ancha, par, ancha, par... */
[data-modal-body] { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; align-items: start; }
[data-modal-body] > :not(.modal-img) { grid-column: 1 / -1; }
.modal-img:nth-of-type(3n + 1) { grid-column: 1 / -1; }
/* una imagen que quedaria sola en su par se estira a lo ancho */
.modal-img:last-of-type:nth-of-type(3n + 2) { grid-column: 1 / -1; }
@media (max-width: 719px) { [data-modal-body] { grid-template-columns: 1fr; } }

/* Puente del modal a la pagina de caso completa */
.modal-caso {
  display: inline-block; justify-self: start; padding: .95rem 1.4rem;
  background: var(--ink); color: var(--bg); font-weight: 700;
  transition: opacity .15s steps(1);
}
.modal-caso:hover, .modal-caso:focus-visible { opacity: .82; }
.modal-caso:active { transform: translateY(1px); }

/* =============================================================
   14. Casos de estudio — tapas de capitulo a sangre completa
   ============================================================= */
/* Fondo opaco: mismo motivo que .manifiesto — sin esto se transparenta
   contra lo que sigue pegado (hero) mientras esta seccion sube encima. */
.casos {
  background: var(--bg); position: relative; z-index: 2;
  /* titulo con menos aire arriba (pedido Che) y sin colchon abajo:
     La Torre debe tocar a Proyectos */
  padding-top: clamp(2.2rem, 4.5vw, 3.6rem); padding-bottom: 0;
}
.casos-lista {
  width: 100vw; margin-inline: calc(50% - 50vw); margin-top: 2.6rem;
}
/* Colchon de CONTENIDO al final de la lista: sin el, la ULTIMA tapa
   (La Torre) se atora antes de alcanzar su tope bajo las franjas — el
   sticky no puede salirse del content-box de su contenedor (reporte
   Che: "no esta tan ajustado cuando llegamos al de La Torre") */
.casos-lista::after {
  content: ""; display: block;
  height: calc(var(--header-h) + var(--cintillo-h, 0px) + var(--franja-casos-h, 0px));
}
/* Apilado de scroll: cada tapa se queda fija y la siguiente sube y la cubre */
.caso-tapa {
  position: sticky; top: 0; display: flex; align-items: flex-end;
  min-height: 56svh; overflow: hidden; color: #fff; background: #111;
  box-shadow: 0 -1px 0 var(--line);
}
/* En el home (donde vive el cintillo anclado) cada tapa se bloquea JUSTO
   debajo del header + cintillo, sin meterse de mas (evidencia Che); y
   Casos arranca a montarse bastante antes para matar el espacio muerto
   blanco bajo los numeros de Good Identity */
/* alto exacto de la franja de casos: padding-top 1rem + titulo (line-height 1)
   + padding-bottom 1.2rem + borde 1px — mismas piezas que la regla de abajo */
.pista-cintillo .casos { --franja-casos-h: calc(2.2rem + 1px + clamp(1.6rem, 4vw, 2.6rem)); }
.pista-cintillo .caso-tapa { top: calc(var(--header-h) + var(--cintillo-h) + var(--franja-casos-h, 74px)); }
.pista-cintillo .casos .section-head h2 { line-height: 1; }
/* el adelanto de Casos es SOLO de compu (mata el espacio muerto bajo los
   numeros); en telefono no hay espacio muerto y taparia los contadores */
@media (min-width: 720px) {
  .pista-cintillo .casos { margin-top: -34svh; }
}
/* Tercera franja fija (idea Che): la cabecera "02 Casos de estudio" se
   ancla debajo de header + cintillo, full-bleed y opaca, y las tapas
   desfilan y se bloquean debajo de las TRES franjas */
.pista-cintillo .casos .section-head {
  position: sticky; top: calc(var(--header-h) + var(--cintillo-h)); z-index: 6;
  background: var(--bg);
  width: 100vw; margin-inline: calc(50% - 50vw);
  padding-inline: var(--gutter); padding-top: 1rem;
}

/* En proyectos.html (sin cintillo): la franja "02 Casos de estudio" se
   bloquea al llegar bajo el header y las tapas desfilan debajo de ambas
   (pedido Che) — misma mecanica del home con una franja menos */
.casos--pin { --franja-casos-h: calc(2.2rem + 1px + clamp(1.6rem, 4vw, 2.6rem)); }
.casos--pin .section-head {
  position: sticky; top: var(--header-h); z-index: 6;
  background: var(--bg);
  width: 100vw; margin-inline: calc(50% - 50vw);
  padding-inline: var(--gutter); padding-top: 1rem;
}
.casos--pin .section-head h1 { line-height: 1; }
.casos--pin .caso-tapa { top: calc(var(--header-h) + var(--franja-casos-h)); }


/* En pantallas muy angostas "02 Casos de estudio" envolvia a dos lineas y
   la tapa se bloqueaba 25px antes de la franja (hueco visible): titulo a
   UNA linea y variable de alto a juego */
@media (max-width: 479px) {
  .pista-cintillo .casos .section-head h2,
  .casos--pin .section-head h1 { font-size: 1.35rem; white-space: nowrap; line-height: 1; }
  .pista-cintillo .casos, .casos--pin { --franja-casos-h: calc(2.2rem + 1px + 1.35rem); }
}

.caso-tapa:nth-of-type(1) { z-index: 1; }
.caso-tapa:nth-of-type(2) { z-index: 2; }
.caso-tapa:nth-of-type(3) { z-index: 3; }
.caso-tapa:nth-of-type(4) { z-index: 4; }
.caso-tapa:nth-of-type(5) { z-index: 5; }
.caso-tapa-fondo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .7s var(--ease-out);
}
/* video de tapa: invisible hasta tener cuadros (el still es la portada);
   corte duro al entrar, sin fade */
.caso-tapa-video { opacity: 0; }
.caso-tapa-video.is-viva { opacity: 1; }
/* tinte inferior: el texto blanco aguanta sobre cualquier foto */
.caso-tapa::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.28) 38%, rgba(0,0,0,0) 62%);
}
.caso-tapa-info {
  position: relative; z-index: 1; padding: clamp(1.6rem, 4vw, 3.5rem) var(--gutter);
  max-width: 60rem;
}
.caso-tapa-num { color: rgba(255,255,255,.75); margin-bottom: .9rem; }
.caso-tapa h3 {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(1.9rem, 5vw, 4.2rem); line-height: .95;
  letter-spacing: -.01em; margin-bottom: .7rem;
}
.caso-tapa-hook { color: rgba(255,255,255,.85); max-width: 46ch; }
.caso-tapa-cta { display: inline-block; margin-top: 1.2rem; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: .2rem; }
/* hover a COLOR con zoom suave (pedido de Che: nada de perder el color) */
.caso-tapa:hover .caso-tapa-fondo,
.caso-tapa:focus-visible .caso-tapa-fondo { transform: scale(1.055); }

/* ---- Tapas de marca: fondo plano con la marca alineada a la derecha ---- */
.caso-tapa--greavi { background: #EAE2C1; }
.caso-tapa--bandido { background: #EE88CD; }
.caso-tapa--negro { background: #0d0d0d; }
.caso-tapa--jomjom { background: #ffffff; }
/* Arte completo sin recorte (Bandido): el fondo rosa de la seccion es el
   mismo del arte, asi el dibujo entero flota sin costura en el cintillo */
.caso-tapa-fondo--entero {
  object-fit: contain;
  /* arte chiquito flotando en el rosa (pedido Che) */
  height: 64%; top: 18%;
}
/* Encuadre del still de Foremost: que se vea el rostro (esta arriba) */
.caso-tapa-fondo--rostro { object-position: center 20%; }
/* En fondos planos el degradado de foto sobra */
.caso-tapa--plano::after { display: none; }
/* Texto oscuro para tapas claras */
.caso-tapa--claro { color: #0d0d0d; }
.caso-tapa--claro .caso-tapa-num { color: rgba(0,0,0,.55); }
.caso-tapa--claro .caso-tapa-hook { color: rgba(0,0,0,.78); }
.caso-tapa--claro .caso-tapa-cta { color: #0d0d0d; border-bottom-color: rgba(0,0,0,.45); }
.caso-tapa--claro:hover .caso-tapa-cta { border-bottom-color: #0d0d0d; }

.caso-tapa-marca {
  position: absolute; right: var(--gutter); top: 50%;
  transform: translateY(-50%); z-index: 0;
  transition: transform .7s var(--ease-out);
}
.caso-tapa-marca--greavi { width: clamp(230px, 36vw, 560px); }
.caso-tapa-marca--bandido { width: clamp(170px, 21vw, 330px); }
/* +Proteina: reel VERTICAL en telefono, reel HORIZONTAL (test2) en
   compu; el que no toca se oculta y ni siquiera se descarga */
@media (min-width: 720px) {
  .caso-tapa--greavi .caso-tapa-video--vert { display: none; }
}
@media (max-width: 719px) {
  .caso-tapa--greavi .caso-tapa-video--horiz { display: none; }
}
/* Vestuario de tapa con metraje: cuando el loop ya reproduce, la tapa
   clara pasa a texto blanco y recupera el degradado de legibilidad */
.caso-tapa.con-video { color: #fff; }
.caso-tapa--plano.con-video::after { display: block; }
.caso-tapa--claro.con-video .caso-tapa-num { color: rgba(255,255,255,.7); }
.caso-tapa--claro.con-video .caso-tapa-hook { color: rgba(255,255,255,.85); }
.caso-tapa--claro.con-video .caso-tapa-cta { color: #fff; border-bottom-color: rgba(255,255,255,.5); }
.caso-tapa--claro.con-video:hover .caso-tapa-cta { border-bottom-color: #fff; }
.caso-tapa--plano:hover .caso-tapa-marca,
.caso-tapa--plano:focus-visible .caso-tapa-marca { transform: translateY(-50%) scale(1.05); }

/* JomJom: el lockup cicla sus 4 colores con corte seco, como en su caso */
.caso-tapa-marca--ciclo {
  width: clamp(230px, 32vw, 480px); aspect-ratio: 1400 / 666; display: block;
}
.caso-tapa-marca--ciclo img {
  position: absolute; inset: 0; width: 100%; height: auto;
  opacity: 0; animation: jj-tapa-ciclo 2s steps(1) infinite;
}
.caso-tapa-marca--ciclo img:nth-child(1) { animation-delay: 0s; }
.caso-tapa-marca--ciclo img:nth-child(2) { animation-delay: .5s; }
.caso-tapa-marca--ciclo img:nth-child(3) { animation-delay: 1s; }
.caso-tapa-marca--ciclo img:nth-child(4) { animation-delay: 1.5s; }
@keyframes jj-tapa-ciclo { 0% { opacity: 1; } 25% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .caso-tapa-marca--ciclo img { animation: none; }
  .caso-tapa-marca--ciclo img:first-child { opacity: 1; }
}
/* En pantallas angostas la marca sube para no pelear con el texto */
@media (max-width: 719px) {
  .caso-tapa-marca { top: 26%; }
  .caso-tapa-marca--greavi, .caso-tapa-marca--ciclo { width: min(230px, 56vw); }
  .caso-tapa-marca--bandido { width: min(150px, 38vw); }
  /* Bandido: el arte se alinea a la derecha como JomJom y se achica
     (pedido Che, solo telefono) */
  .caso-tapa-fondo--entero {
    height: 28%; top: 9%;
    object-position: calc(100% - .9rem) 50%;
  }
}
.caso-tapa:hover .caso-tapa-cta { border-bottom-color: #fff; }
.caso-tapa:active { transform: translateY(1px); }
.caso-tapa:focus-visible { outline-offset: -4px; }
@media (max-width: 719px) { .caso-tapa { min-height: 46svh; } }
@media (prefers-reduced-motion: reduce) {
  .caso-tapa-fondo { transition: none; }
}

/* =============================================================
   15. En movimiento — reel vertical en mockup (desnudo en movil)
   ============================================================= */
.movimiento {
  /* el negro vive en ::before (una compuerta mas): baja junto con el
     texto en el acto 3 y descubre el muro congelado que espera detras */
  background: transparent; color: #fff; --focus: #ffffff;
  overflow: hidden; position: relative;
  /* sin acolchado vertical: el layout centrado llena el bloque exacto */
  padding-top: 0; padding-bottom: 0;
}
.movimiento::before {
  content: ""; position: absolute; inset: -1px;
  background: #000; z-index: 0; pointer-events: none;
}
/* Cortina horizontal: Proyectos termina en stop (sticky con top negativo,
   calculado por JS segun su altura real) y el reel entra de derecha a
   izquierda encima, empujado por el scroll dentro de .mov-pin (200svh:
   la mitad extra es la pista que alimenta el deslizamiento). */
@supports (animation-timeline: view()) {
  .proyectos { position: sticky; top: calc(100svh - var(--proy-h, 100svh)); }
  /* Con un filtro activo la grilla puede quedar cortisima y el bloque
     siguiente se le montaba de una vez (reporte Che): sin stop — el
     bloque nuevo entra hasta que la seccion termino de verse completa.
     El estado inicial (Todos) conserva la coreografia original. */
  /* SOLO en paginas sin cortina (proyectos.html: la seccion es hija
     directa de main). En el home el stop debe QUEDARSE: sin el, la
     cortina entra sobre flujo normal y se ve el fondo (reporte Che) */
  body.proy-filtrada main > .proyectos { position: relative; top: auto; }
  /* En proyectos.html la grilla ABRE la pagina (nuevo orden pedido por Che):
     ahi no hay cortina que la cubra, asi que no debe quedar pegada con el
     stop negativo del home — fluye normal siempre */
  body.pagina-proyectos .proyectos { position: relative !important; top: auto !important; }
  /* 300svh = tres actos: cortina (entra), jukebox (vive), capas (se
     desarma: telefono sube, texto baja, y el muro blanco entra entre ambos) */
  .mov-pin { position: relative; z-index: 3; height: 300svh; view-timeline: --movpin block; }
  /* Traslape (pedido Che): el bloque negro monta el ultimo tramo de
     Proyectos y empieza a emerger ANTES de que este llegue a su tope —
     transicion continua en vez de "llega al fondo y luego sale" */
  @media (min-width: 900px) {
    /* -207svh y no -42svh: el margen inferior de .pista-cintillo (-165svh)
       y este colapsan al MAS negativo de los dos, asi que para lograr el
       traslape real de 42svh sobre Proyectos hay que pedir 165+42 */
    .mov-pin { margin-top: -207svh; }
    /* con filtro activo: sin el traslape de 42svh (colapsa igual al -165
       del wrapper, o sea cero adelanto real) */
    body.proy-filtrada .mov-pin { margin-top: -165svh; }
    /* Excedente negro hacia arriba: el ancla vertical tiene una deriva
       de unos px a mitad de la entrada; esto evita que se cuele una
       franja blanca sobre el borde superior de la cortina */
    .movimiento::before { top: -12svh; }
  }
  .movimiento { position: sticky; top: 0; min-height: 100svh; }
  @keyframes mov-cortina {
    from { transform: translateX(100vw); }
    to   { transform: translateX(0); }
  }
  /* Ancla vertical: mientras .mov-pin va entrando, el bloque se compensa
     hacia arriba para verse SIEMPRE a pantalla completa — asi la cortina
     se percibe 100% horizontal (pedido Che: nada de esquina diagonal) */
  @keyframes mov-anclar {
    from { translate: 0 -100svh; }
    to   { translate: 0 0; }
  }
  .movimiento {
    animation: mov-cortina linear both, mov-anclar linear both;
    animation-timeline: --movpin, --movpin;
    /* acto 1: la cortina EMPIEZA a asomar desde el primer pixel del
       traslape, antes de que Proyectos llegue a su tope (pedido Che:
       transicion continua, sin tramo muerto) y cierra en el primer
       tramo de la pista */
    animation-range: entry 0% contain 40%, entry 0% entry 100%;
  }
  @media (prefers-reduced-motion: reduce) {
    .proyectos { position: relative; top: auto; }
    .mov-pin { height: auto; margin-top: 0; }
    .movimiento { position: relative; animation: none; }
  }
}
/* Tipografia editorial full-screen: tres lineas que llenan el bloque de
   arriba a abajo; el telefono va centrado ENCIMA del texto (pedido Che) */
.mov-titulo {
  position: absolute; z-index: 1; inset: 0; margin: 0;
  /* lineas juntas al centro (pedido Che: interlineado apretado) y el
     bloque arranca DEBAJO del header fijo para que THIS IS se lea */
  display: flex; flex-direction: column; justify-content: center;
  gap: .015em;
  /* alineado a la izquierda (pedido Che): deja aire a la caja Now playing */
  align-items: flex-start; padding: calc(64px + 1svh) 0 2svh var(--gutter);
  /* Atelia: fuente que subio Che (probamos Anton y Bebas antes).
     Sequel de respaldo si no carga */
  font-family: "Atelia", var(--display); text-transform: uppercase;
  /* Bebas solo existe en un grosor: sin esto el h2 (negrita) hace que el
     navegador FABRIQUE una bold falsa dibujando la letra dos veces, y en
     el estado contorno se ven los dos trazos fantasma */
  font-weight: 400; font-synthesis: none;
  line-height: .8; letter-spacing: 0; color: #fff;
  pointer-events: none;
}
/* la ranura-mascara necesita respiro ARRIBA tambien: sin el, el stroke
   superior de las letras queda decapitado (hallazgo de Che) */
.mov-linea { display: block; overflow: hidden; padding: .08em 0 .06em; margin-top: -.05em; }
.mov-linea-int { display: inline-block; }
.mov-titulo .mov-linea { font-size: min(33svh, 21vw); white-space: nowrap; }
.mov-star { display: inline-block; }
/* Loop intermitente fill ↔ contorno (pedido Che): cada linea parpadea a
   su version stroke-sin-relleno con cortes secos. THIS IS abre el ciclo,
   WE DO entra 4 frames despues (~0.17s), HOW tiene su momento solo a
   mitad del ciclo. El trazo siempre esta puesto; lo que se apaga es el
   relleno (color → transparent), asi el corte es limpio y se lee siempre. */
.mov-titulo .mov-linea { -webkit-text-stroke: .014em #fff; }
@keyframes linea-flicker {
  0%, 11.9%  { color: transparent; }
  12%, 100%  { color: #fff; }
}
.mov-linea { animation: linea-flicker var(--flk-dur, 4s) linear var(--flk-ini, 0s) infinite; }
.mov-linea--1 { --flk-ini: 0s; }
.mov-linea--2 { --flk-ini: -2s; }
.mov-linea--3 { --flk-ini: -3.83s; }
@media (prefers-reduced-motion: reduce) { .mov-linea { animation: none; } }
.movimiento-fono {
  position: relative; z-index: 2;
  display: flex; justify-content: center; align-items: center;
  min-height: 100svh;
}
.telefono {
  width: min(300px, 70vw); aspect-ratio: 9 / 19; box-sizing: border-box;
  padding: .55rem; border: 1px solid #3a3a3a; border-radius: 2.6rem;
  background: #0d0d0d; box-shadow: 0 30px 80px rgba(0,0,0,.55);
  /* corrido a la derecha (pedido Che: que el texto respire) */
  translate: 9vw 0;
  /* vista 100% cenital en reposo (pedido Che): plano, sin escorzo; el
     tilt 3D solo aparece cuando el mouse lo empuja (main.js) */
  transform: perspective(1100px) rotate(4deg);
}
.telefono video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 2.1rem; background: #000;
}
/* Caja "Now playing": sticker editorial cuadrado, mono, pegado al telefono */
.np {
  position: absolute; z-index: 3;
  right: clamp(1.5rem, 6vw, 6rem); top: 50%;
  transform: translateY(-50%) rotate(-1.5deg);
  width: min(300px, 84vw); box-sizing: border-box;
  background: #fff; color: #000; padding: 1rem 1.1rem;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.np-etq { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; }
.np-dot { color: #e10600; animation: np-pulso 1.6s steps(2, jump-none) infinite; }
@keyframes np-pulso { 50% { opacity: .15; } }
.np-titulo {
  font-family: var(--display); text-transform: uppercase;
  font-size: 1.05rem; line-height: 1.05; margin-top: .55rem;
}
.np-cred { margin: .7rem 0 0; }
.np-cred div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .3rem 0; border-top: 1px solid #e6e6e6;
  font-size: .66rem; letter-spacing: .06em; text-transform: uppercase;
}
.np-cred dt { color: #6b6b6b; }
.np-cred dd { margin: 0; text-align: right; }
.np-pos { font-size: .7rem; color: #6b6b6b; margin-top: .45rem; }
.np-controles { display: flex; gap: .4rem; margin-top: .8rem; }
.np-btn {
  appearance: none; background: transparent; border: 1px solid #000;
  color: #000; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .08em; padding: .5rem .65rem; cursor: pointer;
}
.np-btn--play { flex: 1; }
.np-btn:hover, .np-btn:focus-visible { background: #000; color: #fff; }
/* Entrada editorial de las lineas: enmascaradas, suben y se asientan
   (rotadas) al ritmo de la cortina — cada linea con su retraso */
@supports (animation-timeline: view()) {
  /* entrada y salida en una sola linea de tiempo: sube y se asienta al
     inicio, reposa, y al final se hunde de vuelta con la misma inclinacion */
  /* Cortes 22%/78%: con los rangos arrancando en la ENTRADA de la
     cortina, estos numeros dejan el reposo cubriendo todo el jukebox
     y el hundimiento alineado con la capa que baja (contain ~60) */
  @keyframes linea-asentar {
    0%   { transform: translateY(115%) rotate(4deg); }
    22%  { transform: translateY(0) rotate(0deg); }
    78%  { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(115%) rotate(4deg); }
  }
  .mov-linea-int {
    transform-origin: left bottom;
    animation: linea-asentar linear both;
    animation-timeline: --movpin;
  }
  /* Las lineas arrancan DURANTE la entrada de la cortina (pedido Che:
     que el bloque no aparezca solo — las letras van subiendo con el,
     pegadas al scroll), escalonadas, y se hunden al final como antes */
  /* El cintillo de clientes ya quedo cubierto por el bloque negro cuando
     la cortina cierra (contain 40); aqui se apaga del todo para que NO
     asome sobre el muro de Made in Wonder cuando las compuertas del
     desarme lo revelan (el cintillo es z3, el muro z2) */
  @keyframes cintillo-esconder { to { opacity: 0; } }
  .marquee {
    animation: cintillo-esconder linear both;
    animation-timeline: --movpin;
    animation-range: contain 42% contain 45%;
  }
  .mov-linea:nth-child(1) .mov-linea-int { animation-range: entry 10% contain 86%; }
  .mov-linea:nth-child(2) .mov-linea-int { animation-range: entry 30% contain 89%; }
  .mov-linea:nth-child(3) .mov-linea-int { animation-range: entry 50% contain 92%; }
  /* acto 3: la escena se desarma en capas — el telefono (con su caja)
     flota hacia arriba y el bloque tipografico se hunde hacia abajo,
     abriendo paso al muro blanco de Made in Wonder que sube entre ambos */
  @keyframes capa-sube { from { translate: 0 0; } to { translate: 0 -128svh; } }
  @keyframes capa-baja { from { translate: 0 0; } to { translate: 0 118svh; } }
  /* Viaje completo del telefono en UNA sola animacion (dos animaciones
     sobre translate se pisarian por el fill): entra subiendo desde abajo
     despues de que el texto ya asoma (pedido Che, espejo de su salida),
     reposa durante el jukebox, y al final flota hacia arriba como antes.
     Los cortes 15%/62% del keyframe equivalen a contain 16% / contain 60%
     dentro del rango contain 2% -> contain 96% (pedido Che: las lineas
     terminan de asentarse justo en contain ~0 — texto ya LEIBLE completo,
     aunque la cortina siga barriendo — y AHI arranca a subir el telefono). */
  @keyframes fono-viaje {
    0%   { translate: 0 130svh; }
    15%  { translate: 0 0; }
    62%  { translate: 0 0; }
    100% { translate: 0 -128svh; }
  }
  .movimiento-fono {
    animation: fono-viaje linear both;
    animation-timeline: --movpin;
    animation-range: contain 2% contain 96%;
  }
  .mov-titulo {
    animation: capa-baja linear both;
    animation-timeline: --movpin;
    animation-range: contain 60% contain 96%;
  }
  /* el telon negro baja exactamente con el texto: las letras blancas
     nunca quedan sobre el muro blanco */
  .movimiento::before {
    animation: capa-baja linear both;
    animation-timeline: --movpin;
    animation-range: contain 60% contain 96%;
  }
  /* y a la salida, el mismo gesto de la entrada A LA INVERSA (pedido
     Che): cada linea se hunde de vuelta en su ranura enmascarada con la
     misma inclinacion. Entrada y salida viven en UNA sola animacion
     (misma propiedad transform: dos animaciones se pisarian por el fill). */
  /* La tarjeta Now Playing viaja CON el telefono (pedido Che): sube desde
     abajo apenas el texto queda leible, reposa, y sale flotando con su
     pequeno retraso de siempre. Cortes 15%/65% = contain 16% / contain 64%
     dentro del rango contain 2% -> contain 98%. */
  @keyframes np-viaje {
    0%   { translate: 0 130svh; }
    15%  { translate: 0 0; }
    65%  { translate: 0 0; }
    100% { translate: 0 -128svh; }
  }
  .np {
    animation: np-viaje linear both;
    animation-timeline: --movpin;
    animation-range: contain 2% contain 98%;
  }
  /* El muro de Made in Wonder llega ANTES por detras del bloque negro:
     sube escondido mientras la escena esta opaca, queda CONGELADO llenando
     la pantalla (la animacion contrarresta el scroll exacto), y las
     compuertas lo descubren quieto. Al terminar la pista (translate 0)
     entrega el control al flujo normal sin brinco. */
  .marcas-propias {
    margin-top: -100svh; z-index: 2;
    animation: muro-acomodo linear both;
    animation-timeline: --movpin;
    animation-range: contain 0% contain 100%;
  }
  @keyframes muro-acomodo {
    0%   { translate: 0 -100svh; }  /* pegado bajo el borde: invisible */
    45%  { translate: 0 -10svh; }
    58%  { translate: 0 -84svh; }   /* sube rapido tras el negro opaco */
    100% { translate: 0 0; }        /* congelado en pantalla y liberado */
  }
  @media (prefers-reduced-motion: reduce) {
    .mov-linea, .mov-linea-int, .movimiento-fono, .mov-titulo, .np,
    .movimiento::before { animation: none; }
    .marcas-propias { margin-top: 0; animation: none; }
  }
}

/* En proyectos.html el muro Made in Wonder ABRE la pagina: sin la
   coreografia del home (margen -100svh + timeline --movpin inexistente ahi) */
/* El muro Made in Wonder ya no abre la pagina: ahora va al final, antes de
   Platiquemos. Sigue sin la coreografia del home (margen -100svh + --movpin) */
.marcas-propias.mp-abre { margin-top: 0; animation: none;
  border-top: 1px solid var(--line); border-bottom: 0; }

/* =============================================================
   Equipo: flipbooks de rodaje (corte duro) + cinta Propaganda
   ============================================================= */
.equipo { background: #000; position: relative; z-index: 2; padding: 0; }
/* Cada persona es una pantalla completa que se apila sobre la anterior
   (el mecanismo de los casos): foto de rodaje full-bleed cortando como
   GIF, nombre gigante fundido en diferencia, ficha como sticker */
.eq-tapa {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  background: #000;
}
.eq-tapa:nth-of-type(1) { z-index: 1; }
.eq-tapa:nth-of-type(2) { z-index: 2; }
.eq-tapa:nth-of-type(3) { z-index: 3; }
.eq-foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.eq-nombre {
  position: absolute; left: var(--gutter); bottom: 2svh; z-index: 2;
  margin: 0; font-family: "Bebas Neue", var(--display);
  font-weight: 400; font-synthesis: none;
  text-transform: uppercase; line-height: .8; letter-spacing: 0;
  font-size: clamp(5rem, 24svh, 15rem);
  color: #fff; mix-blend-mode: difference;
  pointer-events: none;
}
.eq-ficha {
  position: absolute; right: clamp(1rem, 4vw, 3rem); bottom: clamp(1.2rem, 6svh, 3.4rem);
  z-index: 3; width: min(300px, 78vw);
  background: #fff; color: #000; padding: 1rem 1.1rem;
  transform: rotate(-1.5deg);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.eq-rol { font-size: .7rem; letter-spacing: .12em; }
.eq-bio { margin-top: .5rem; font-size: .88rem; line-height: 1.5; }
/* Cinta Propaganda: corte comercial en el magenta de la casa productora */
.cinta-propaganda {
  background: #f0f; border-block: 1px solid var(--line);
  overflow: hidden; padding-block: 1rem;
  /* se BLOQUEA arriba (como el cintillo del home) y el bloque negro de
     Platiquemos sube y lo cubre */
  position: sticky; top: -6px; z-index: 2;
  /* inclinada, como cinta pegada a mano (pedido Che: que no aparezca
     100% recta); mas ancha para que el giro no deje esquinas vacias */
  width: 106vw; margin-left: -3vw; rotate: -2deg;
}
.cinta-prop-track { display: flex; width: max-content; animation: cinta-prop 30s linear infinite; }
.cinta-prop-set { display: flex; align-items: center; gap: 3rem; padding-right: 3rem; }
.cinta-prop-set img { height: 52px; width: auto; filter: brightness(0); }
.cinta-prop-set span { color: #000; white-space: nowrap; }
@keyframes cinta-prop { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .cinta-prop-track { animation: none; } }

/* =============================================================
   Estudio (quienes somos): lomo vertical gigante + foto + tarjeta
   con degradado de color — mecanismo de la referencia Nike de Che
   ============================================================= */
.estudio {
  position: relative; z-index: 2;
  /* la foto llega al margen izquierdo (pedido Che): sin columna de lomo */
  display: grid; grid-template-columns: 1fr 1.05fr;
  min-height: 100svh; padding: 0;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
/* scroll stacking (pedido Che): cada integrante es una pantalla fija y
   la siguiente sube y la cubre; la cinta y el contacto cierran encima */
@media (min-width: 900px) {
  .estudio { position: sticky; top: 0; height: 100svh; min-height: 0; overflow: hidden; }
  .estudio:nth-of-type(1) { z-index: 1; }
  .estudio:nth-of-type(2) { z-index: 2; }
  .estudio:nth-of-type(3) { z-index: 3; }
  .estudio-caja { overflow-y: auto; }
  /* la cinta se bloquea arriba y esta pista de una pantalla es el tramo
     en que el bloque negro de Platiquemos sube y cubre al Dream Team */
  /* pista calibrada: en el instante en que la cinta toca arriba, el
     bloque negro ya asoma por abajo y se va montando */
}
/* pista GLOBAL (pedido Che: el cintillo tambien se bloquea en movil):
   cuando la cinta va a media pantalla, Platiquemos ya asoma por abajo */
.cinta-propaganda { z-index: 5; margin-bottom: calc(50svh - 5.5rem); }
/* Ese margen es a proposito: da el recorrido en el que la cinta se queda
   pegada arriba mientras Platiquemos sube y la cubre. Pero como es margen,
   por detras se veia el fondo BLANCO del sitio — un bloque blanco enorme
   entre dos bloques negros (reporte Che). La pagina de Equipo termina en
   negro, asi que se le pinta el fondo de negro: todas sus secciones traen su
   propio color, de modo que lo unico que cambia es ese hueco. */
.pagina-equipo { background: #0d0d0d; }

.estudio-lomo {
  overflow: hidden; display: flex; align-items: flex-start; justify-content: center;
  font-family: "Bebas Neue", var(--display); font-weight: 400; font-synthesis: none;
  text-transform: uppercase; line-height: .82;
  font-size: clamp(4.5rem, 10vw, 9rem); letter-spacing: .02em;
  writing-mode: vertical-rl; rotate: 180deg;
  border-left: 1px solid var(--line);
}
.estudio-foto { overflow: hidden; border-right: 1px solid var(--line); }
.estudio-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.estudio-caja {
  padding: clamp(2rem, 5vw, 4.5rem) clamp(1.4rem, 4vw, 4rem);
  display: flex; flex-direction: column; justify-content: center;
  /* el degradado: el momento de color de esta seccion */
  background: linear-gradient(180deg, #ffffff 22%, #5fe5d8 130%);
}
/* Equipo v5 — cine + expediente: foto full-bleed con flipbook, nombre
   gigante en diferencia, y la bio en panel blanco solido (cero degradado:
   la estructura es B&N y el color lo pone el rodaje) */
.eq-cine {
  position: relative; min-height: 100svh;
  background: #000; overflow: hidden;
}
.eq-cine-foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* rodaje en blanco y negro (pedido Che): el unico color de la pagina
     lo pone el magenta de Propaganda. Curva vintage: mas contraste y
     un pelo mas oscura, como copia de archivo */
  filter: grayscale(1) contrast(1.09) brightness(.95);
}
/* Grano de pelicula sobre el rodaje (pedido Che: vintage): ruido SVG
   encima de la foto — vive en z1, debajo del panel de texto (z2) */
.eq-cine::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  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="0.9" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
  background-size: 180px 180px;
  opacity: .16; mix-blend-mode: overlay;
}
@media (max-width: 899px) {
  /* en telefono la foto ocupa solo la franja superior: el grano igual */
  .eq-cine::after { height: 58svh; inset: 0 0 auto 0; }
}
.eq-cine-nombre {
  position: absolute; left: var(--gutter); bottom: 2svh; z-index: 1;
  margin: 0; font-family: "Bebas Neue", var(--display);
  font-weight: 400; font-synthesis: none;
  text-transform: uppercase; line-height: .8; letter-spacing: 0;
  font-size: clamp(4.5rem, 24svh, 15rem);
  color: #fff; mix-blend-mode: difference;
  pointer-events: none;
}
.eq-cine-panel {
  position: absolute; right: 0; top: 0; bottom: 0; z-index: 2;
  width: min(430px, 44vw);
  background: var(--bg); border-left: 1px solid var(--line);
  padding: clamp(1.6rem, 4svh, 3rem) clamp(1.2rem, 2.4vw, 2.2rem);
  overflow-y: auto;
}
.eq-cine-rol { color: var(--mute); letter-spacing: .12em; }
.eq-cine-titulo {
  font-family: var(--display); text-transform: uppercase;
  /* nombre PROTAGONISTA (pedido Che) con mascara para la entrada */
  font-size: clamp(2.2rem, 4vw, 3.4rem); letter-spacing: -.01em;
  margin: .7rem 0 1.2rem; line-height: .95;
  overflow: hidden; padding: .06em 0 .05em;
}
/* tinta por bloque: negra en los blancos, blanca en el de Raquel */
.eq-cine { --tinta: #0d0d0d; }
.eq-cine:nth-of-type(2) { --tinta: #fff; }
/* Bloque PROPAGANDA: full fucsia (pedido Che), tinta negra */
.eq-cine.eq-propaganda { background: #f0f !important; color: #0d0d0d; }
/* Bloque PABLO: fucsia como Propaganda, con diagramacion de spread:
   frase a lo ancho y bio en DOS columnas de revista */
/* invertido al fucsia (pedido Che): fondo NEGRO, tinta y marcos fucsia */
.eq-cine.eq-pablo { background: #0d0d0d !important; color: #f0f; --tinta: #f0f; --fondo: #0d0d0d; }
.eq-pablo .eq-cine-rol { color: rgba(255, 0, 255, .6); }
.eq-cols { columns: 2; column-gap: 2.4rem; }
.eq-cols .eq-cine-parrafo { break-inside: avoid; }
@media (max-width: 899px) { .eq-cols { columns: 1; } }
@media (min-width: 900px) {
  .eq-pablo .eq-cine-panel { left: 7vw; width: min(760px, 58vw); }
  /* pila de Pablo: mas grande y anclada un poco mas abajo, para que
     dialogue con las columnas y no flote (reporte Che) */
  .eq-pablo .pola-pila { left: 68vw; height: min(calc(28vw / .84), 56svh, calc(var(--pila-util) * .88)); }
}
/* sus polaroids van A COLOR (pedido Che): la productora tiene su propia
   personalidad — el B&N es el lenguaje de Wonder */
.eq-propaganda .pola img,
.eq-pablo .pola img { filter: contrast(1.04); }
/* parpadeo stroke↔fill B&N (mismo ritmo del jukebox) + entrada tipo hero */
.eq-titulo-int {
  display: inline-block; transform-origin: left bottom;
  transform: translateY(118%) rotate(3deg);
  -webkit-text-stroke: .016em var(--tinta);
  color: var(--tinta);
}
/* el parpadeo lo marca el MISMO reloj de las polaroids (JS, tick 0.3s):
   cuando la seccion esta "hueca", el nombre queda solo en contorno */
.eq-cine.hueco .eq-titulo-int { color: transparent; }
.eq-cine.en-escena .eq-titulo-int {
  animation: hero-linea-subir .85s cubic-bezier(.16, 1, .3, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .eq-titulo-int { animation: none !important; transform: none; color: var(--tinta); }
}
/* Las polaroids ENTRAN solas de derecha a izquierda cuando la escena ya
   esta puesta (pedido Che): asi no viajan con el bloque y jamas se ven
   fuera de su centro */
.eq-cine.eq-anim .pola-pila { opacity: 0; }
/* RED DE SEGURIDAD (reporte Che: "hay un gran espacio en blanco ahi abajo").
   Todo el bloque de Equipo nace invisible y solo aparece por animacion. Si la
   animacion no llega a correr —el telefono pausa la pestaña al cambiar de app,
   el scroll fue muy rapido, el aparato iba lento— el bloque se quedaba VACIO
   para siempre. Con .ya-visible el JS lo enciende a la fuerza y sin animacion. */
.eq-cine.ya-visible .pola-pila,
.eq-cine.ya-visible .eq-cine-rol,
.eq-cine.ya-visible .eq-cine-parrafo,
.eq-cine.ya-visible .eq-igs {
  opacity: 1 !important; animation: none !important; translate: none !important;
}
@media (min-width: 900px) {
  @keyframes pila-entrar-d {
    from { opacity: 0; translate: 55vw 0; }
    to   { opacity: 1; translate: 0 0; }
  }
  .eq-cine.eq-anim.en-escena .pola-pila {
    animation: pila-entrar-d 1.15s cubic-bezier(.22, 1, .36, 1) .28s forwards;
  }
  /* Dream Team en espejo: su pila entra desde la IZQUIERDA */
  @keyframes pila-entrar-esp {
    from { opacity: 0; translate: -55vw 0; }
    to   { opacity: 1; translate: 0 0; }
  }
  .eq-cine.eq-anim.en-escena:nth-of-type(3) .pola-pila {
    animation: pila-entrar-esp 1.15s cubic-bezier(.22, 1, .36, 1) .28s forwards;
  }
}
@media (max-width: 899px) {
  @keyframes pila-entrar-m {
    from { opacity: 0; translate: 70vw 0; }
    to   { opacity: 1; translate: 0 0; }
  }
  .eq-cine.eq-anim.en-escena .pola-pila {
    animation: pila-entrar-m 1.05s cubic-bezier(.22, 1, .36, 1) .22s forwards;
  }
}
@media (prefers-reduced-motion: reduce) {
  .eq-cine.eq-anim .pola-pila { opacity: 1; animation: none !important; }
}
/* Boton(es) de Instagram por bloque (pedido Che): abajo a la derecha */
/* el boton vive donde TERMINA el parrafo (pedido Che) */
.eq-igs {
  display: flex; flex-direction: column; align-items: flex-start; gap: .55rem;
  margin-top: 1.8rem;
}
.eq-cine:nth-of-type(3) .eq-igs { align-items: flex-end; }
/* boton de Propaganda: NEGRO con letras fucsia + zoom leve al hover
   (pedido Che: que resalte) */
.eq-propaganda .eq-ig {
  background: #0d0d0d; color: #f0f; border-color: #0d0d0d;
  transition: transform .25s var(--ease-out);
}
.eq-propaganda .eq-ig:hover,
.eq-propaganda .eq-ig:focus-visible {
  background: #0d0d0d; color: #f0f; transform: scale(1.06);
}
.eq-cine { --fondo: #fff; }
.eq-cine:nth-of-type(2) { --fondo: #0d0d0d; }
.eq-cine.eq-propaganda { --fondo: #f0f; }
.eq-ig {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--tinta); border: 1px solid var(--tinta);
  padding: .55rem 1.1rem; font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase;
  transition: background .15s steps(1), color .15s steps(1);
}
.eq-ig:hover, .eq-ig:focus-visible { background: var(--tinta); color: var(--fondo); }
@media (max-width: 899px) {
  .eq-igs { margin: 1.4rem 0 .6rem; }
}
/* Entrada escalonada del texto (pedido Che): el rol primero y cada
   parrafo sube aclarandose, en cascada tras el nombre. Solo se ocultan
   cuando el JS marca la seccion (.eq-anim): sin JS todo queda visible */
.eq-cine.eq-anim .eq-cine-rol,
.eq-cine.eq-anim .eq-cine-parrafo,
.eq-cine.eq-anim .eq-igs { opacity: 0; }
@keyframes eq-texto-entrar {
  from { opacity: 0; translate: 0 12px; filter: blur(3px); }
  to   { opacity: 1; translate: 0 0; filter: blur(0); }
}
.eq-cine.eq-anim.en-escena .eq-cine-rol {
  animation: eq-texto-entrar .8s cubic-bezier(.22, 1, .36, 1) .08s forwards;
}
.eq-cine.eq-anim.en-escena .eq-cine-parrafo {
  animation: eq-texto-entrar .95s cubic-bezier(.22, 1, .36, 1) forwards;
}
/* cascada: el rol es p:nth-of-type(1); los parrafos arrancan en la 2 */
.eq-cine.eq-anim.en-escena p:nth-of-type(2) { animation-delay: .30s; }
.eq-cine.eq-anim.en-escena p:nth-of-type(3) { animation-delay: .46s; }
.eq-cine.eq-anim.en-escena p:nth-of-type(4) { animation-delay: .62s; }
.eq-cine.eq-anim.en-escena p:nth-of-type(5) { animation-delay: .78s; }
.eq-cine.eq-anim.en-escena p:nth-of-type(6) { animation-delay: .94s; }
.eq-cine.eq-anim.en-escena p:nth-of-type(7) { animation-delay: 1.10s; }
.eq-cine.eq-anim.en-escena p:nth-of-type(8) { animation-delay: 1.26s; }
.eq-cine.eq-anim.en-escena .eq-igs { animation: eq-texto-entrar .9s cubic-bezier(.22, 1, .36, 1) 1.15s forwards; }
@media (prefers-reduced-motion: reduce) {
  .eq-cine.eq-anim .eq-cine-rol,
  .eq-cine.eq-anim .eq-cine-parrafo,
  .eq-cine.eq-anim .eq-igs { opacity: 1; animation: none !important; }
}
.eq-cine-parrafo { font-size: .92rem; line-height: 1.65; margin-bottom: .9rem; }
/* apilado: cada integrante pantalla fija y el siguiente lo cubre */
@media (min-width: 900px) {
  .eq-cine { position: sticky; top: 0; height: 100svh; }
  .eq-cine:nth-of-type(1) { z-index: 1; }
  .eq-cine:nth-of-type(2) { z-index: 2; }
  .eq-cine:nth-of-type(3) { z-index: 3; }
  .eq-cine:nth-of-type(4) { z-index: 4; }
  .eq-cine:nth-of-type(5) { z-index: 5; }
}
/* Equipo v7 — pila de polaroids (ref Nike de Che): marco crema sobre
   blanco puro; aparecen 1->N y regresan N->1 en loop, cortes duros.
   Pedido Che: bloque anclado a la IZQUIERDA y mas ancho en web; en
   movil la pila queda ANCLADA arriba y el texto scrollea debajo. */
.pola {
  position: absolute; inset: 0;
  background: #f4f0e7; /* crema: el "otro blanco" */
  /* (los bloques 1-3 lo pisan con blanco puro — ver abajo) */
  padding: 5.5% 5.5% 17%;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .16);
  rotate: var(--giro, 0deg); translate: var(--dx, 0) var(--dy, 0);
  display: none;
}
.pola.esta { display: block; }
.pola img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.09) brightness(.95);
}
/* Marcos BLANCOS en Che, Raquel y Dream Team (pedido Che: la sombra ya
   separa; el crema queda para los bloques fucsia donde contrasta) */
.eq-cine:nth-of-type(1) .pola,
.eq-cine:nth-of-type(2) .pola,
.eq-cine:nth-of-type(3) .pola { background: #fff; }
/* Familia Propaganda: marcos NEGROS con fotos a color (pedido Che) */
.eq-propaganda .pola { background: #fff; }
.eq-pablo .pola { background: #fff; }
/* encuadres especiales: tomas de cuerpo completo donde el recorte
   centrado cortaba la cabeza (reporte Che: la del set de +Proteina) */
.pola img[src*="che-12"] { object-position: 50% 12%; }
.pola img[src*="raquel-05"] { object-position: 50% 36%; }
.pola img[src*="raquel-07"] { object-position: 50% 34%; }
.pola img[src*="raquel-11"] { object-position: 50% 28%; }
.pola img[src*="pablo-06"] { object-position: 50% 30%; }
/* grano de pelicula sobre la foto de cada polaroid */
.pola::after {
  content: ""; position: absolute; inset: 5.5% 5.5% 17%; pointer-events: none;
  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="0.9" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
  background-size: 180px 180px;
  opacity: .15; mix-blend-mode: overlay;
}
@media (min-width: 900px) {
  .eq-cine { background: #fff; color: #0d0d0d; }
  /* alternancia de bloques (pedido Che): el suyo blanco, Raquel negro */
  .eq-cine:nth-of-type(2) { background: #0d0d0d; color: #fff; }
  .eq-cine:nth-of-type(2) .eq-cine-rol { color: rgba(255,255,255,.6); }
  .eq-cine::after { content: none; }
  .eq-cine-foto { display: none; }
  /* sin titulo gigante (pedido Che: el nombre ya vive en la ficha) */
  .eq-cine-nombre { display: none; }
  /* texto mas ancho, pegado a la izquierda */
  .eq-cine-panel {
    position: absolute; right: auto; left: 6vw; top: 50%; bottom: auto;
    translate: 0 -50%;
    width: min(540px, 40vw); max-height: 74svh;
    background: transparent; border-left: 0; padding: 0;
  }
  .eq-cine-rol { color: rgba(0,0,0,.55); }
  .eq-cine-parrafo:first-of-type { font-size: 1.15rem; line-height: 1.5; }
  /* sin descolgados: TODO alineado a la izquierda (pedido Che) */
  /* la pila arranca donde termina el texto: bloque anclado a la
     izquierda y mas grande (pedido Che: fuera el espacio muerto) */
  /* La pila se centra en el espacio UTIL (bajo el header fijo), no en el
     viewport completo: con el centrado al 50%/56% la foto se metia debajo
     del header y salia cortada en pantallas de poca altura — el caso de
     Che, 2000x1043 (medido: la pila arrancaba en -82px).
     --pila-util es el alto disponible; de ahi sale el ancho maximo. */
  /* CENTRADO SIN TRANSFORM (Safari incluido): top/bottom + margin auto
     centra la pila en el espacio util (bajo el header) sin tocar el eje de
     las animaciones. El `translate: -50%` chocaba con lo que escribia GSAP
     y con la entrada, y la pila subia media altura quedando cortada.
     El .88 deja aire para las hojas rotadas, que sobresalen del contenedor. */
  .pola-pila {
    --pila-util: calc(100svh - var(--header-h) - 5rem);
    position: absolute; z-index: 1;
    left: 52vw; right: auto;
    top: var(--header-h); bottom: 0; margin-block: auto;
    height: min(calc(33vw / .84), 61svh, calc(var(--pila-util) * .88));
    width: auto; aspect-ratio: .84;
  }
  /* Dream Team en ESPEJO (pedido Che): polaroids a la izquierda y el
     texto alineado a la derecha */
  .eq-cine:nth-of-type(3) .eq-cine-panel { left: auto; right: 10vw; text-align: right; }
  .eq-cine:nth-of-type(3) .pola-pila { left: 12vw; }
  .eq-cine:nth-of-type(3) .eq-titulo-int { transform-origin: right bottom; }
  /* Bios cortas (Raquel, Dream Team, Propaganda): el PAR texto+fotos se
     centra como composicion — pegado al margen dejaba un tercio de
     pantalla vacio (reporte Che) */
  /* Che a dos columnas, misma geometria de spread que Pablo */
  .eq-cine:nth-of-type(1) .eq-cine-panel { left: 7vw; width: min(760px, 58vw); }
  .eq-cine:nth-of-type(1) .pola-pila { left: 68vw; height: min(calc(28vw / .84), 56svh, calc(var(--pila-util) * .88)); }
  .eq-cine:nth-of-type(2) .eq-cine-panel { left: 10vw; width: min(420px, 30vw); }
  /* Propaganda necesita mas ancho: su titulo en Sequel WIDE no cabe en
     la columna angosta (la mascara lo recortaba) */
  .eq-cine:nth-of-type(4) .eq-cine-panel { left: 10vw; width: min(560px, 40vw); }
  .eq-cine:nth-of-type(2) .pola-pila,
  .eq-cine:nth-of-type(4) .pola-pila { left: 54vw; }
}
@media (max-width: 899px) {
  /* overflow visible: con hidden la seccion se vuelve "scroll container"
     y el sticky de la pila jamas engancha */
  .eq-cine { background: #fff; color: #0d0d0d; min-height: 0; overflow: visible; }
  /* "PROPAGANDA" es UNA sola palabra en Sequel WIDE: no puede partirse, y a
     2.2rem mide 350px cuando la columna del telefono da 311 — el
     overflow:hidden del titular se comia la ultima letra ("PROPAGAND").
     En movil el titular se mide contra el ancho de pantalla, no contra un
     minimo fijo, y asi la palabra mas larga siempre entra completa. */
  .eq-cine-titulo { font-size: clamp(1.55rem, 8vw, 2.2rem); }
  .eq-cine:nth-of-type(2) { background: #0d0d0d; color: #fff; }
  .eq-cine:nth-of-type(2) .eq-cine-rol { color: rgba(255,255,255,.6); }
  .eq-cine::after { content: none; }
  .eq-cine-foto { display: none; }
  .eq-cine-nombre { display: none; }
  /* LA PILA SE CLAVA Y EL TEXTO SE DISUELVE POR DETRAS — tambien en movil.
     Che lo pidio y le gusta; lo que estaba mal eran las MEDIDAS:
       · el telon bajaba 14svh por debajo de las fotos y esos ~113px se
         tragaban el rol y el TITULO de cada bloque desde el primer momento
         ("PROPAGANDA" y "PABLO CASTILLO" nacian tapados, nunca se leian);
       · la pila + el telon ocupaban el 60% del alto de pantalla y dejaban
         una rendija de 233px para leer, que se sentia como scroll trabado.
     Ahora: pila mas chica, se ancla mas arriba, y el margen de ABAJO (13svh)
     es MAYOR que lo que el telon invade (9svh) — asi el titulo se lee
     primero y recien despues se disuelve al pasar por detras. */
  .pola-pila {
    /* z3: el panel de texto trae z2 — la pila SIEMPRE encima para que el
       texto pase por DETRAS del telon */
    position: sticky; top: calc(var(--header-h) + 2svh); z-index: 3;
    width: min(52vw, 30svh); aspect-ratio: .84;
    margin: 2svh auto 13svh;   /* 13svh > 9svh del telon: el titulo respira */
  }
  .pola-pila::before {
    content: ""; position: absolute; z-index: -1;
    top: calc(-1 * (var(--header-h) + 2svh));
    bottom: -9svh; left: calc(50% - 50vw); right: calc(50% - 50vw);
    /* el texto se DISUELVE conforme sube por detras de las fotos */
    background: linear-gradient(to bottom, #fff 0%, #fff 68%, rgba(255,255,255,0) 100%);
  }
  .eq-cine:nth-of-type(2) .pola-pila::before {
    background: linear-gradient(to bottom, #0d0d0d 0%, #0d0d0d 68%, rgba(13,13,13,0) 100%);
  }
  /* Propaganda y Pablo tambien con DISOLVENCIA (Che 2026-08-23: antes era un
     telon solido y el texto se metia detras de un cuadro fucsia de golpe;
     "el blanco y negro esta perfecto"). Misma receta: color solido hasta el
     68% y de ahi a transparente, para que el texto se desvanezca en vez de
     cortarse. Al llegar a transparente se ve el fondo del propio bloque, que
     es ese mismo color — la orilla desaparece. */
  .eq-cine.eq-propaganda .pola-pila::before {
    background: linear-gradient(to bottom, #f0f 0%, #f0f 68%, rgba(255, 0, 255, 0) 100%);
  }
  .eq-cine.eq-pablo .pola-pila::before {
    background: linear-gradient(to bottom, #0d0d0d 0%, #0d0d0d 68%, rgba(13, 13, 13, 0) 100%);
  }
  /* la inclinacion de la cinta dejaba triangulos blancos en las orillas:
     un telon fucsia contra-rotado los cubre — el bloque se ve completo */
  .cinta-propaganda::before {
    content: ""; position: absolute; inset: -2.5rem -10vw;
    background: #f0f; rotate: 2deg; z-index: -1;
  }
  .eq-cine-panel {
    position: relative; width: 100%; border-left: 0; border-top: 0;
    background: transparent;
    padding: 0 var(--gutter) 3rem;
  }
}
.estudio-kicker { letter-spacing: .16em; margin-bottom: 1.6rem; }
.estudio-titulo {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem); letter-spacing: -.01em;
  margin-bottom: 1.6rem;
}
.estudio-parrafo { max-width: 52ch; margin-bottom: 1.2rem; font-size: .98rem; line-height: 1.7; }
.estudio-lema {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(1.05rem, 1.9vw, 1.4rem); margin: 1rem 0 2rem;
}
.estudio-lema em { font-style: italic; }
.estudio-cta {
  width: max-content; padding: .85rem 1.6rem;
  border: 1px solid var(--ink); color: var(--ink);
  transition: background .15s steps(1), color .15s steps(1);
}
.estudio-cta:hover, .estudio-cta:focus-visible { background: var(--ink); color: var(--bg); }
@media (max-width: 899px) {
  .estudio { grid-template-columns: 1fr; min-height: 0; }
  .estudio-lomo { display: none; }
  .estudio-foto { max-height: 52svh; border-right: 0; border-bottom: 1px solid var(--line); }
}

/* =============================================================
   FAQ: acordeon editorial (numero → pregunta centrada → +),
   cortes duros al abrir — sin animaciones cremosas
   ============================================================= */
.faq { background: var(--bg); position: relative; z-index: 2; border-bottom: 1px solid var(--line); }
.faq-titulo {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(2.6rem, 7vw, 5rem); letter-spacing: -.02em;
  margin-bottom: 1.6rem;
}
.faq-item { border-top: 1px solid rgba(0,0,0,.18); }
.faq-item:last-child { border-bottom: 1px solid rgba(0,0,0,.18); }
/* Paleta SETTERS (referencia de Che), de derecha a izquierda: amarillo,
   azul, naranja, rojo y negro. Al pasar el mouse la fila se inunda de su
   color EN SECO; abierta se queda pintada. La negra invierte a texto blanco. */
.faq-item:nth-child(5n+1) { --faq-c: #f6e120; --faq-tinta: #000; }
.faq-item:nth-child(5n+2) { --faq-c: #1f9cc9; --faq-tinta: #000; }
.faq-item:nth-child(5n+3) { --faq-c: #e97a2b; --faq-tinta: #000; }
.faq-item:nth-child(5n+4) { --faq-c: #e84b31; --faq-tinta: #000; }
.faq-item:nth-child(5n) { --faq-c: #101010; --faq-tinta: #fff; }
/* la tinta PINTA de abajo hacia arriba (pedido Che): un gradiente del
   color propio crece desde la base con arranque rapido y frenado suave */
.faq-item {
  background-image: linear-gradient(var(--faq-c), var(--faq-c));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0%;
  transition: background-size .55s var(--ease-out), color .3s ease;
}
.faq-item:hover, .faq-item[open] {
  background-size: 100% 100%;
  color: var(--faq-tinta);
}
.faq-num, .faq-resp { transition: color .3s ease; }
.faq-item:hover .faq-num, .faq-item[open] .faq-num,
.faq-item:hover .faq-resp, .faq-item[open] .faq-resp { color: var(--faq-tinta); }
/* filas de margen a margen (pedido Che): el color inunda todo el ancho
   del viewport; el texto se queda alineado a la reticula con el gutter */
.faq-lista { width: 100vw; margin-inline: calc(50% - 50vw); }
.faq-sum {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 1rem; padding: 1.7rem var(--gutter); cursor: pointer; list-style: none;
}
.faq-sum::-webkit-details-marker { display: none; }
.faq-num { justify-self: start; color: var(--mute); }
/* Preguntas en MAYUSCULAS y Space Mono (pedido Che: la font del boton
   "Ver todo el FAQ" en cada fila; Bebas y Sequel vetadas) */
.faq-preg {
  text-align: center; text-transform: uppercase;
  font-family: var(--mono); font-weight: 400;
  font-size: clamp(.9rem, 1.6vw, 1.1rem); letter-spacing: .02em; line-height: 1.35;
}
.faq-mas {
  justify-self: end; font-size: 1.5rem; line-height: 1;
  font-family: var(--mono);
}
.faq-item[open] .faq-mas { rotate: 45deg; }
.faq-sum:hover .faq-preg { text-decoration: underline; text-underline-offset: 4px; }
.faq-resp {
  max-width: 62ch; margin: 0 auto; padding: 0 var(--gutter) 1.9rem;
  color: #333; line-height: 1.7;
}
@media (max-width: 719px) {
  .faq-sum { grid-template-columns: auto 1fr auto; }
  .faq-preg { text-align: left; }
}

/* Las secciones finales cubren al muro (z2) y a Proyectos (z1, que queda
   fijado en su stop para siempre detras de todo) */
.manifiesto-texto { position: relative; z-index: 2; }
/* z5: el cierre SIEMPRE por encima de la cinta magenta (z4) — el bug
   del "cierre que faltaba" en equipo (reporte Che) */
.contacto { position: relative; z-index: 6; overflow: hidden; }
/* Estela de Ws 3D (mecanismo de la referencia SVZ, con la W de Wonder):
   la capa vive detras del contenido y no roba clicks */
.w-espacio {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
}
.w-astro {
  position: absolute; top: 0; left: 0;
  /* normalizadas por ALTURA (pedido Che): el corte duro entre texturas
     no brinca porque todas miden lo mismo de alto; el ancho se acomoda.
     Escala tomada de la referencia SVZ (~media pantalla). */
  width: auto; height: clamp(260px, 56svh, 600px);
}
/* En touch la W rebota tipo DVD y SIEMPRE se ve. La clase --dvd solo la
   pone el JS cuando no hay puntero fino, asi que la regla no necesita
   media query: atarla a (max-width:719px) dejaba la W invisible para
   siempre en tablets y portatiles tactiles mas anchos (bug real). */
.w-astro.w-astro--dvd { height: auto; width: min(42vw, 380px); opacity: 1 !important; }
.w-astro {
  opacity: 0; will-change: transform, opacity;
  /* la W del logo en blanco sobre el negro del bloque */
  filter: brightness(0) invert(1);
}
/* las Ws texturizadas (leopardo, metal…) van a todo color */
.w-astro--tex { filter: none; }
.contacto > :not(.w-espacio) { position: relative; z-index: 1; }
/* En un telefono real, el mockup sobra: el video va desnudo a lo ancho
   y la caja Now playing baja como tarjeta normal bajo el video */
@media (max-width: 719px) {
  .movimiento { display: flex; flex-direction: column; justify-content: center; }
  /* titulo casi pantalla completa en telefono (pedido Che); el video
     aparece abajo al scrollear */
  /* sin pantalla reservada: las letras gigantes llenan solas y el video
     llega antes (pedido Che: menos bloque negro perdido) */
  .mov-titulo { position: relative; inset: auto; padding: 2.4rem var(--gutter) 1.2rem; gap: .06em;
    min-height: 0; justify-content: center; }
  .mov-titulo .mov-linea { font-size: min(19svh, 20.5vw); }
  /* video reducido (pedido Che: ya no full screen), con inclinacion
     informal, y la tarjeta Now playing contra-inclinada encima */
  .movimiento-fono {
    width: min(76vw, 340px); margin-inline: auto; min-height: 0;
    rotate: -2.4deg; margin-top: .8rem;
  }
  .telefono {
    width: 100%; aspect-ratio: 9 / 16; padding: 0;
    border: 0; border-radius: 0; background: none; box-shadow: none;
    transform: none; translate: none;
  }
  .telefono video { border-radius: 0; }
  .np {
    position: relative; left: auto; right: auto; top: auto; bottom: auto;
    transform: rotate(2deg); z-index: 2;
    margin: -3.4rem 4vw 2.6rem auto;
  }
}

/* Alturas opticas del cintillo: area de tinta equivalente por logo
   (h = 40px * (2.5/aspecto)^0.4, tope 52px) */
.marca[src*="marcas/bic"]        { --mh: 35px; }
.marca[src*="marcas/bimbo"]      { --mh: 40px; }
.marca[src*="marcas/ducal"]      { --mh: 40px; }
.marca[src*="marcas/foremost"]   { --mh: 52px; }
.marca[src*="marcas/greatvalue"] { --mh: 50px; }
.marca[src*="marcas/greavi"]     { --mh: 37px; }
.marca[src*="marcas/kerns"]      { --mh: 48px; }
.marca[src*="marcas/la-torre"]   { --mh: 52px; }
.marca[src*="marcas/unicef"]     { --mh: 34px; }
.marca[src*="marcas/walmart"]    { --mh: 33px; }

/* =============================================================
   16. Made in Wonder — muro de marcas propias a un solo color
   ============================================================= */
.marcas-propias {
  background: var(--bg); position: relative; z-index: 2;
  border-bottom: 1px solid var(--line);
  min-height: 92svh; display: flex; flex-direction: column; justify-content: center;
}
.marcas-propias h2 { font-family: var(--display); font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 800; font-stretch: 110%; text-transform: uppercase; }
.mp-star { display: inline-block; }
.mp-sub { color: var(--mute); margin-top: 1rem; max-width: 46ch; }
.mp-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.4rem, 4vw, 3.2rem) clamp(.8rem, 2vw, 1.6rem);
  margin-top: clamp(2.6rem, 6vw, 4.5rem); align-items: center; justify-items: center;
}
@media (min-width: 720px)  { .mp-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1080px) { .mp-grid { grid-template-columns: repeat(6, 1fr); } }
/* tamano optico por logo como TOPES (max) — nunca distorsiona: el alto optico
   limita a los compactos y el ancho de celda limita a los anchos */
.mp-grid img { width: auto; height: auto; max-width: 100%; max-height: calc(var(--mh, 80px) * .48); }
@media (min-width: 860px) { .mp-grid img { max-height: calc(var(--mh, 80px) * .82); } }
.mp-grid img[src*="color/altterio"] { --mh: 108px; }
.mp-grid img[src*="color/bandido"] { --mh: 112px; }
.mp-grid img[src*="color/buro"] { --mh: 63px; }
.mp-grid img[src*="color/cafeyth"] { --mh: 59px; }
.mp-grid img[src*="color/cazador"] { --mh: 81px; }
.mp-grid img[src*="color/cgracia"] { --mh: 67px; }
.mp-grid img[src*="color/clubdelamor"] { --mh: 92px; }
.mp-grid img[src*="color/community"] { --mh: 95px; }
.mp-grid img[src*="color/crossnails-m"] { --mh: 93px; }
.mp-grid img[src*="color/deszelle"] { --mh: 65px; }
.mp-grid img[src*="color/diddimia"] { --mh: 107px; }
.mp-grid img[src*="color/dipi"] { --mh: 85px; }
.mp-grid img[src*="color/diprocasa"] { --mh: 85px; }
.mp-grid img[src*="color/elcamino"] { --mh: 88px; }
.mp-grid img[src*="color/engine"] { --mh: 68px; }
.mp-grid img[src*="color/evolugy"] { --mh: 67px; }
.mp-grid img[src*="color/floral"] { --mh: 112px; }
.mp-grid img[src*="color/fuegodegracia"] { --mh: 69px; }
.mp-grid img[src*="color/icoffee"] { --mh: 69px; }
.mp-grid img[src*="color/ilustratufe"] { --mh: 112px; }
.mp-grid img[src*="color/importaguate"] { --mh: 62px; }
.mp-grid img[src*="color/ion"] { --mh: 65px; }
.mp-grid img[src*="color/jomjom"] { --mh: 72px; }
.mp-grid img[src*="color/kixik"] { --mh: 69px; }
.mp-grid img[src*="color/kolors"] { --mh: 66px; }
.mp-grid img[src*="color/landco"] { --mh: 66px; }
.mp-grid img[src*="color/liquify"] { --mh: 63px; }
.mp-grid img[src*="color/madretierra"] { --mh: 112px; }
.mp-grid img[src*="color/maggie"] { --mh: 64px; }
.mp-grid img[src*="color/mensajero"] { --mh: 98px; }
.mp-grid img[src*="color/miserable"] { --mh: 78px; }
.mp-grid img[src*="color/opendoor"] { --mh: 67px; }
.mp-grid img[src*="color/pachamama"] { --mh: 112px; }
.mp-grid img[src*="color/pennyrivera"] { --mh: 67px; }
.mp-grid img[src*="color/platzees"] { --mh: 66px; }
.mp-grid img[src*="color/playdate"] { --mh: 65px; }
.mp-grid img[src*="color/portela"] { --mh: 77px; }
.mp-grid img[src*="color/proteina"] { --mh: 74px; }
.mp-grid img[src*="color/puppenz"] { --mh: 62px; }
.mp-grid img[src*="color/quantic"] { --mh: 65px; }
.mp-grid img[src*="color/rolinsol"] { --mh: 77px; }
.mp-grid img[src*="color/sama"] { --mh: 63px; }
.mp-grid img[src*="color/scalu"] { --mh: 64px; }
.mp-grid img[src*="color/selah"] { --mh: 65px; }
.mp-grid img[src*="color/solad"] { --mh: 63px; }
.mp-grid img[src*="color/tcc"] { --mh: 64px; }
.mp-grid img[src*="color/trabajasos"] { --mh: 65px; }

/* =============================================================
   17. Cursor punto — difference blend (referencia: creativegiants.art)
   Solo escritorio con mouse; en tactil no existe. El punto se invierte
   contra todo lo que tenga debajo (B&N puro + negativo sobre fotos).
   ============================================================= */
@media (hover: hover) and (pointer: fine) {
  body, a, button, .card-btn, .caso-tapa { cursor: none; }
  /* el punto es un contenedor fijo de 8px que el JS posiciona; el circulo
     visible es su ::before y CRECE con scale (composicion pura, mismo
     visual de 8->18px sin animar medidas de caja) */
  .cursor-dot {
    position: fixed; top: 0; left: 0;
    width: 8px; height: 8px;
    pointer-events: none; z-index: 2000; opacity: 0;
    transition: opacity .2s ease;
  }
  /* El punto INVIERTE lo que tiene debajo en vez de mezclarse con el fondo
     del contexto de apilamiento: `mix-blend-mode: difference` deja de
     aplicarse en cuanto pasa sobre una seccion con filter/transform/blend
     propio (crean su propio contexto) y el punto blanco se perdia sobre
     blanco. `backdrop-filter: invert()` lee los pixeles reales de atras,
     asi que SIEMPRE contrasta. */
  .cursor-dot::before {
    content: ""; position: absolute; inset: 0;
    border-radius: 50%; background: transparent;
    -webkit-backdrop-filter: invert(1) grayscale(1);
    backdrop-filter: invert(1) grayscale(1);
    transition: transform .375s cubic-bezier(.625,.05,0,1);
  }
  /* respaldo donde no haya backdrop-filter */
  @supports not ((backdrop-filter: invert(1)) or (-webkit-backdrop-filter: invert(1))) {
    .cursor-dot::before { background: #fff; mix-blend-mode: difference; }
  }
  .cursor-dot.is-viva { opacity: 1; }
  /* crece cuando hay algo clicable bajo el cursor: la nueva señal de accion */
  body:has(a:hover) .cursor-dot::before,
  body:has(button:hover) .cursor-dot::before { transform: scale(2.25); }
}
@media (prefers-reduced-motion: reduce) {
  body, a, button, .card-btn, .caso-tapa { cursor: auto; }
  a, button, .card-btn { cursor: pointer; }
  .cursor-dot { display: none; }
}

/* Movil: el bloque negro entra DESDE LA DERECHA como pieza completa
   (pedido Che: mismo gesto horizontal del desktop; sin pin ni desarme
   de capas) y el muro de marcas aparece de corrido despues */
@supports (animation-timeline: view()) {
  @media (max-width: 899px) {
    .mov-pin { height: auto; }
    @keyframes mov-cortina-lado {
      from { transform: translateX(100vw); }
      to   { transform: translateX(0); }
    }
    .movimiento {
      position: relative; min-height: 0;
      animation: mov-cortina-lado linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    .movimiento-fono, .np, .mov-titulo, .movimiento::before,
    .mov-linea-int { animation: none; }
    .marcas-propias { margin-top: 0; animation: none; }
  }
}

/* Selector de idioma ES | EN en el header */
.lang { display: inline-flex; align-items: center; gap: .35rem; margin-left: .8rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; }
.lang a { padding: .3rem .1rem; opacity: .45; border: 0; }
.lang a.es-actual { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.lang a:hover { opacity: 1; background: none; color: inherit; }
.lang span { opacity: .3; }
@media (max-width: 899px) { .lang { margin-left: .4rem; } }