@font-face{font-family:'Cabinet Grotesk';src:url(/assets/fonts/CabinetGrotesk-Variable.woff2) format('woff2-variations'), url(/assets/fonts/CabinetGrotesk-Variable.woff2) format('woff2'), url(/assets/fonts/CabinetGrotesk-Variable.ttf) format('truetype');font-weight:300 800;font-display:swap}
@font-face{font-family:'Switzer';src:url(/assets/fonts/Switzer-Variable.woff2) format('woff2-variations'), url(/assets/fonts/Switzer-Variable.woff2) format('woff2'), url(/assets/fonts/Switzer-Variable.ttf) format('truetype');font-weight:300 800;font-display:swap}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--z4);--zona-bg:var(--z4);color:#f7f5ee;font-family:'Switzer',sans-serif;font-weight:300}
:root{--gold:#a08a5c;--bg:#1e1e1a;--z2:#0d0c0a;--z3:#171714;--z4:#1e1e1a;--z5:#24241f;--z6:#2b2b25;--cream:#f7f5ee;--pad:clamp(28px,7vw,140px);--prose:700px;--page:1320px}
h1,h2,h3{font-family:'Cabinet Grotesk',sans-serif;font-weight:500;letter-spacing:-.01em}
a,a:hover{color:var(--gold)}
.wrap{max-width:var(--page);margin:0 auto;padding:0 var(--pad)}
.kicker{font:500 12px/1 'Switzer',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}

/* nav */
nav{display:flex;align-items:center;justify-content:space-between;padding:26px var(--pad)}
nav .mark{width:26px;height:26px}
nav .links{display:flex;gap:32px;font:400 13px/1 'Switzer',sans-serif;color:rgba(247,245,238,.55)}

/* ⚠️ EL MENÚ EN UN TELÉFONO. A 375 px los cuatro enlaces pedían 293 px y el
   hueco disponible era 293: exactamente todo, cero de sobra. Así que el primero
   —«The Camera», el más largo— se partía en dos líneas y aterrizaba pegado al
   logotipo, hasta el punto de que parecía que la marca se llamaba «The Camera».
   De esos 293 px, 96 eran los tres huecos de 32.

   En español no se veía porque «La Cámara» es más corto, no porque estuviera
   bien: la española todavía llevaba el diseño anterior. En cuanto herede este
   CSS le habría pasado igual, así que se arregla ANTES de espejar.

   Con 18 px de hueco y 20 de margen, los enlaces piden 260 y hay 309: quedan
   49 px de aire entre la marca y el menú. El `nowrap` es la red — sin él, el
   día que un texto crezca vuelve a partirse en silencio. */
nav .links a{white-space:nowrap}
@media (max-width:560px){
  nav{padding-left:20px;padding-right:20px}
  nav .links{gap:18px}
}

/* hero — name treated as a small uppercase kicker line (like the ES hero),
   the brand phrase promoted to the big bold headline instead */









/* El hero es el único sitio donde el corte cae en el salto de línea: un valor
   por renglón. A 92 px, el contraste de valor DENTRO del titular es lo que da
   la escala — no el tamaño solo. El dorado no entra aquí: ya lo tiene CAMERA
   dos líneas arriba, y dos dorados en una pantalla se anulan. */



/* manifesto */
.section{padding:120px var(--pad)}
.section.narrow{padding-top:56px;padding-bottom:56px}
.section.narrow{display:block;position:relative}


.prose{max-width:640px;margin:0 auto}
.prose .kicker{margin-bottom:20px}
.prose p{font:300 19px/1.75 'Switzer',sans-serif;color:rgba(247,245,238,.7);margin-bottom:22px}
.prose p:last-of-type{margin-bottom:0}
.dropcap{float:left;font-family:'Cabinet Grotesk',sans-serif;font-weight:700;font-size:88px;line-height:.72;color:var(--gold);margin:4px 12px 0 0}
.prose{position:relative;padding-left:26px}
.prose::before{content:'';position:absolute;left:0;top:2px;bottom:2px;width:1px;background:var(--gold);opacity:.5}
/* Las dos frases pasan a display, en dos líneas y a dos valores del mismo
   dorado: la petición apagada, la promesa entera. Sube de 22 px de Switzer a
   Cabinet Grotesk 600 — deja de ser un párrafo más y cierra el manifiesto. */
.prose .brandline{margin-top:clamp(48px,6vw,76px);font-family:var(--display);
  font-weight:600;font-size:clamp(26px,3.4vw,38px);line-height:1.18;letter-spacing:-.025em}
.prose .brandline .ask{display:block;color:rgba(160,138,92,.62)}
.prose .brandline .give{display:block;color:var(--gold)}


/* feature icon grid */
.features{padding:120px var(--pad)}
.features .head{max-width:var(--prose);margin-bottom:64px}
.features .head h2{font-size:clamp(32px,4vw,52px);color:var(--cream)}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 40px;margin-bottom:48px}
@media (max-width:640px){.fgrid{grid-template-columns:1fr;gap:40px}}
.fitem svg{width:42px;height:42px;margin-bottom:20px}
.fitem h3{letter-spacing:normal;font-size:18px;color:var(--cream);margin-bottom:8px;font-family:'Switzer',sans-serif;font-weight:500;min-height:24px;display:flex;align-items:center}
.fitem p{font:300 14.5px/1.6 'Switzer',sans-serif;color:rgba(247,245,238,.5)}
/* Vuelve a la columna del sitio en vez de ir a sangre: era lo más ancho de la
   página siendo lo menos importante. Observación de Design, 6 sep 2026. */
.filmrow{max-width:1180px;margin:70px auto 0;padding:56px var(--pad) 0;
  border-top:1px solid rgba(247,245,238,.1)}
.divider-gold{margin:0 var(--pad);height:1px;background:var(--gold);opacity:.35}
.divider-thin{width:30px;height:1px;background:var(--gold);margin:64px auto}
.divider-gray{height:1px;background:rgba(247,245,238,.08)}
/* ⚠️ EL PROBLEMA ERA LA FORMA, NO EL TAMAÑO. Diagnóstico de Design, y es el
   bueno: «FOUR FILMS» en versalitas chicas y muy espaciadas tiene la forma de
   un ANTETÍTULO, así que agrandarlo solo produce un antetítulo grande — se
   intentó primero subiéndolo a 31 px en dorado y seguía sin leerse como
   jerarquía. Ahora va en caja normal, tipografía de titulares y cuerpo de
   titular de sección, en dos valores: «Four» dorado, «films.» crema. No inventa
   nada: es el mismo recurso que ya usa el remate del manifiesto. */
.filmrow .fk{font-family:'Cabinet Grotesk',sans-serif;font-weight:700;
  font-size:clamp(32px,5.6vw,52px);line-height:1.06;letter-spacing:-.03em;
  text-transform:none;margin-bottom:clamp(36px,4.6vw,58px)}
.filmrow .fk .num{color:var(--gold)}
.filmrow .fk .word{color:var(--cream)}
.films{display:flex;flex-direction:column}
.film{display:grid;grid-template-columns:4px 44px minmax(0,150px) minmax(0,1fr);
  gap:24px;padding:26px 0;border-top:1px solid rgba(247,245,238,.09);
  position:relative;transition:border-color .2s}

/* ⚠️ LA TIRA ES UN DEGRADADO, NUNCA UN COLOR PLANO, y ahí está toda la idea.
   El contraste es una RELACIÓN entre claro y oscuro, así que la muestra
   necesita rango dentro para poder enseñar la diferencia entre Flat y
   Positive; un color sólido no puede decir nada de contraste.
   Y las cuatro recetas no son la misma cosa a cuatro alturas — cada una toca
   los negros por un mecanismo distinto: Flat los levanta hasta mate, Negative
   los levanta un poco y calienta (desechable), Positive es el único que los
   hunde, Original no los toca porque es la referencia. Escalera de contraste
   .60 < 1.00 < 1.14 < 1.38. Receta de Design.
   ⚠️ SON UNA PROMESA, NO NUESTRAS LUT. Si algún día las tiras y las cuatro
   fotos de ejemplo cuentan cosas distintas, mandan las fotos. */
.film .rail{align-self:stretch;border-radius:1px;
  background:linear-gradient(180deg,#4a7fa8,#c9a53f 46%,#20242b)}
.film .rail.r-neg{filter:sepia(.18) saturate(1.45) contrast(1.14) brightness(1.04)}
.film .rail.r-pos{filter:contrast(1.38) saturate(1.52) brightness(.97)}
.film .rail.r-flat{filter:contrast(.60) saturate(.72) brightness(1.08)}
.film:hover{border-color:rgba(160,138,92,.4)}
.film:last-child{border-bottom:1px solid rgba(247,245,238,.09)}
.film .fn{font:400 14px/1.6 'DM Mono',monospace;color:rgba(160,138,92,.55);letter-spacing:.04em;transition:color .2s}
.film:hover .fn{color:var(--gold)}
.film .fname{font-family:'Cabinet Grotesk',sans-serif;font-weight:500;font-size:20px;color:var(--cream);position:relative;transition:color .2s}
.film:hover .fname{color:var(--gold)}
/* La barrita dorada que salía al pasar el ratón se quitó: la tira de color
   ocupa ahora ese mismo sitio y está SIEMPRE. Dos marcas verticales en la
   misma columna se estorban, y la que se queda es la que informa. */
.film .fdesc{font:300 15px/1.6 'Switzer',sans-serif;color:rgba(247,245,238,.55)}
@media (max-width:640px){.film{grid-template-columns:4px 32px minmax(0,1fr);gap:16px;row-gap:9px}
  .film .fname{grid-column:3}.film .fdesc{grid-column:3}}

/* stats — breaks the column, full width */
.stats{padding:150px 0;background:var(--z3);overflow:hidden}
.stats .row{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;padding:0 20px}
.stat{display:flex;flex-direction:column;align-items:center}
.stat .n{font-family:'Cabinet Grotesk',sans-serif;font-weight:700;font-size:clamp(72px,11vw,168px);line-height:1;color:var(--gold);letter-spacing:-.02em}
.stat .l{font:400 14px/1 'Switzer',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:rgba(247,245,238,.5);margin-top:12px}
/* El cero barrado. Se dibuja a mano y no con font-variant-numeric:slashed-zero
   porque esa función depende de que la fuente traiga la variante «zero», y a
   este tamaño —168px— un cero sin tacha se lee como una O al lado de la
   palabra. Todo va en em, así que la tacha escala con el número. */
.stat .n.cero{position:relative;display:inline-block}
.stat .n.cero::after{content:"";position:absolute;left:50%;top:50%;width:.56em;height:.07em;background:currentColor;border-radius:.04em;transform:translate(-50%,-50%) rotate(-58deg)}
.stats .dash{width:clamp(30px,4vw,56px);height:1px;background:var(--gold);opacity:.55;align-self:center;margin:0 clamp(-16px,-1.2vw,-4px)}

.privacy-close{padding:120px var(--pad);text-align:center}
.privacy-close .icons{display:flex;gap:28px;justify-content:center;margin-bottom:36px}
.privacy-close .icons svg{width:92px;height:104px;color:var(--gold)}
.privacy-close h3{font:500 clamp(36px,5vw,60px)/1.18 'Cabinet Grotesk',sans-serif;color:var(--cream);max-width:640px;margin:0 auto 24px}
.privacy-close p{font:300 17px/1.65 'Switzer',sans-serif;color:rgba(247,245,238,.5);max-width:540px;margin:0 auto 14px}
.privacy-close p:last-child{margin-bottom:0;font-size:14px;color:rgba(247,245,238,.36)}
.privacy-close+.soon2{margin-top:0}

/* ── Filmstrip de negativo animado — prueba ─────────────────────────────── */

.fs-track{position:relative}
.fs-row{display:flex;flex-shrink:0;width:max-content;position:relative;animation:fs-scroll 70s linear infinite}



.fs-frame{flex-shrink:0;width:220px;position:relative;padding:24px 3px}
.fs-frame img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;filter:sepia(.15) contrast(1.05)}
@keyframes fs-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.quotebreak{background:var(--z2);color:#8f7d5f;padding:160px var(--pad);text-align:center}
.quotebreak p{font-family:'Cabinet Grotesk',sans-serif;font-weight:500;font-size:clamp(34px,5vw,64px);line-height:1.2;max-width:900px;margin:0 auto}

/* in your hand — asymmetric device placement */
.hand{padding:130px var(--pad);position:relative}
.hand .head{max-width:var(--prose);margin-bottom:70px}
.hand .head h2{font-size:clamp(32px,4vw,52px);color:var(--cream)}
.hand .head .sub{font:300 15px/1.6 'Switzer',sans-serif;color:rgba(247,245,238,.45);margin-top:12px}
.devices{display:flex;align-items:flex-start;justify-content:center;gap:36px;padding:0 20px}
.dev{width:180px;height:378px;border-radius:26px;background:#141312;border:1px solid rgba(247,245,238,.08);flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.dev img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.dev .ph{font:300 10px/1.4 'Switzer',sans-serif;color:rgba(247,245,238,.22);text-align:center;letter-spacing:.05em}
.dev.a{transform:rotate(-6deg) translateY(30px)}
.dev.b{transform:translateY(-14px);width:200px;height:420px}
.dev.c{transform:rotate(7deg) translateY(38px)}
.dev.d{transform:rotate(-2deg) translateY(14px)}
.hand--peek{padding:0 var(--pad) 64px}
.hand--mid{padding:100px var(--pad)}

/* mobile: fixed pixel device widths (some set via inline style) were
   overflowing the viewport and causing horizontal scroll — force them to
   scale with viewport width below 640px, and let the row wrap if it still
   doesn't fit instead of spilling out */
/* ⚠️ `clip` Y NO `hidden`, Y NO ES COSMÉTICO. Los dos recortan igual lo que se
   sale por los lados —la decoración que llega a 885 px, la tira que mide 7040—,
   pero `hidden` convierte al body en contenedor de scroll y eso ROMPE
   `position:sticky` en toda la página. Medido el 5 de septiembre de 2026: con
   `hidden` el botón de volver arriba no se pegaba, se iba con el scroll hasta
   −2187 px; con `clip` se clava. `clip` no crea contenedor de scroll, que es
   justo la diferencia. Si alguien lo devuelve a `hidden`, el botón desaparece
   sin que nada avise. */
html,body{overflow-x:clip}
@media (max-width:640px){
  .devices{flex-wrap:wrap;row-gap:24px;gap:14px}
  .dev{width:27vw!important;height:auto!important;aspect-ratio:210/441;max-width:170px}
}
@media (min-width:641px) and (max-width:900px){
  .devices{gap:16px;padding:0 12px}
  .dev{width:18vw!important;height:auto!important;aspect-ratio:210/441;max-width:180px}
  .dev.b{width:20vw!important;height:auto!important;max-width:200px}
}

/* download */
.dl{padding:140px var(--pad) 120px;text-align:center}
.dl h2{font-size:clamp(30px,4vw,48px);color:var(--cream);margin-bottom:14px}
.dl>p{color:rgba(247,245,238,.5);font-size:16px;margin-bottom:64px}
.dl .row{display:flex;justify-content:center;gap:80px;flex-wrap:wrap}
.qr{width:150px;height:150px;padding:12px;border:1px solid rgba(160,138,92,.22);border-radius:10px;margin:0 auto 18px;background:#141312}
.qr svg{width:100%;height:100%;display:block}
.dl .store{font:500 15px/1 'Switzer',sans-serif;color:var(--cream)}
.dl .date{font:300 12px/1 'Switzer',sans-serif;color:rgba(247,245,238,.4);margin-top:6px}

footer{padding:60px var(--pad);border-top:1px solid rgba(247,245,238,.08);display:flex;align-items:center;justify-content:space-between}
footer .marks{display:flex;align-items:center;gap:14px}
footer .marks svg{width:20px;height:20px}
footer .taglines{font:300 12px/1.6 'Switzer',sans-serif;color:rgba(247,245,238,.35);text-align:center;flex:1;max-width:320px;margin:0 auto}

/* honest placeholder merged with a QR-style graphic — still clearly "coming
   soon", not pretending the code works yet */
.soon2{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin:100px 0 100px}
.soon2-item{display:flex;align-items:center;gap:16px;padding:14px 22px 14px 14px;border:1px solid rgba(160,138,92,.4);border-radius:12px;text-align:left}
.soon2-item .qrbox{width:52px;height:52px;flex:none;opacity:.55}
.soon2-item .qrbox svg{width:100%;height:100%;display:block}
.soon2-item .txt .k{font:400 10px/1 'Switzer',sans-serif;text-transform:uppercase;letter-spacing:.14em;color:rgba(247,245,238,.42);white-space:nowrap}
.soon2-item .txt .v{font-family:'Cabinet Grotesk',sans-serif;font-weight:500;font-size:16px;color:var(--cream);margin-top:3px}
.soon2-item .txt .d{font:300 11.5px/1 'Switzer',sans-serif;color:rgba(247,245,238,.4);margin-top:4px}

/* download — honest placeholder instead of a fake, unscannable QR */
.soon{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.soon-item{min-width:220px;padding:20px 28px;border:1px solid rgba(160,138,92,.4);border-radius:12px;text-align:left}
.soon-item .k{font:400 10.5px/1 'Switzer',sans-serif;text-transform:uppercase;letter-spacing:.16em;color:rgba(247,245,238,.42)}
.soon-item .v{font-family:'Cabinet Grotesk',sans-serif;font-weight:500;font-size:19px;color:var(--cream);margin-top:5px}
.soon-item .d{font:300 12.5px/1 'Switzer',sans-serif;color:rgba(247,245,238,.4);margin-top:6px}

/* legal pages (privacy/privacidad) came from a light theme in style.css
   (hardcoded near-black text) — now unified dark like the rest of the site,
   these override that hardcoding since this file loads after style.css */
.legal h1,.legal p,.legal li{color:var(--cream)}
.legal .updated{color:rgba(247,245,238,.4)}
.legal h2{color:var(--gold);border-top-color:rgba(247,245,238,.12)}
.legal strong{color:var(--cream)}
.pending{background:rgba(160,138,92,.08);border-color:rgba(160,138,92,.3);color:rgba(247,245,238,.68)}
.gap{background:rgba(160,138,92,.16);color:var(--gold)}

/* faq/legal pages reuse the homepage nav+footer — a plain "Home" link
   doesn't need the gold highlight the language link gets */
nav .links a[href="../index.html"],nav .links a[href="../es/index.html"]{color:rgba(247,245,238,.55)}

/* Marca de que una tarjeta es de Plena, no del plan gratis.
   «Inmersión total» aparecía junto a Modo ciego y Compensación de exposición
   como si las tres fueran gratuitas, y solo esa se paga. Mismo tratamiento que
   la app: candado y nombre. */
.plena-lock{
  display:inline-flex;align-items:center;gap:5px;
  vertical-align:middle;margin-left:10px;
  padding:3px 9px 3px 7px;border-radius:99px;
  border:1px solid rgba(160,138,92,.45);
  color:var(--gold);
  font-family:'Switzer',sans-serif;font-weight:500;
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
}
.plena-lock svg{width:11px;height:11px;flex:none}

.funcion-texto{position:relative;padding-left:26px}
.funcion-texto::before{content:'';position:absolute;left:0;top:2px;bottom:2px;width:1px;background:var(--gold);opacity:.5}

/* faint scattered background icons — decoration only, from the app's own
   icon set (gear/expand/exposure/timer/flash), never a new shape. Kept very
   low-opacity so they read as texture, not content. overflow:hidden on the
   hosting section stops them from ever causing horizontal scroll. */
.deco-icon{position:absolute;z-index:-1}
.deco-icon svg{display:block;width:100%;height:100%}

.qa{border-top:1px solid rgba(247,245,238,.09)}
.qa .ancho{display:grid;grid-template-columns:repeat(2,1fr);gap:56px 64px}
.qa-item{padding-top:8px}
.qa-n{font:400 13px/1 'DM Mono',monospace;color:var(--gold);letter-spacing:.04em}
.qa-item h3{font-family:'Cabinet Grotesk',sans-serif;font-weight:500;font-size:26px;color:var(--cream);margin:10px 0 12px}
.qa-item p{font:300 15px/1.65 'Switzer',sans-serif;color:rgba(247,245,238,.55)}
@media (max-width:760px){.qa .ancho{grid-template-columns:1fr}}

/* ── El pie necesita salidas ────────────────────────────────────────────────
   El pie original era logo + frases, sin un solo enlace: quien llegaba al
   final de la portada no tenía cómo ir a las FAQ, al aviso de privacidad ni
   al español. El pie pasa a tres columnas y esta es la del medio.
   En móvil se apila, porque tres columnas en 375 px no caben. */
footer{flex-wrap:wrap;gap:24px;justify-content:space-between}
.pie-enlaces{display:flex;gap:22px;flex-wrap:wrap;justify-content:flex-end;flex:1}
.pie-enlaces a{font:400 13px/1 'Switzer',sans-serif;color:rgba(247,245,238,.55);text-decoration:none;border-bottom:1px solid rgba(247,245,238,.18);padding-bottom:3px}
.pie-enlaces a:hover{color:#f7f5ee;border-bottom-color:#a08a5c}
@media (max-width:720px){
  footer{flex-direction:column;text-align:center}
  footer .taglines{text-align:center}
  /* ⚠️ CENTRADOS, Y CON SITIO PARA EL BOTÓN DE SUBIR.
     En una columna los enlaces seguían pegados a la derecha, así que cuando
     no caben en una línea la que sobra aterriza justo encima del botón
     redondo de «volver arriba», que vive en esa esquina. Pasaba SOLO en
     español —«Preguntas frecuentes» y «Aviso de Privacidad» llenan la
     primera línea y «Escríbenos» caía debajo, tapado a medias—; en inglés
     las tres caben y no se veía.
     Centrarlos aleja la segunda línea de esa esquina, y el hueco de la
     derecha reserva el ancho del botón (44) más su margen. */
  .pie-enlaces{justify-content:center;padding-right:calc(44px + var(--pad, 28px))}
}

/* El menú de arriba gana un cuarto enlace, el del idioma. */
nav .links a[href="/es/"]{color:#a08a5c}
nav .links a{border-bottom:none}

/* ── Exposure · el visor entero es el dial (CSS puro, sin JS) ───────────────
   La captura real de la app es el marco; las siete exposiciones viven DENTRO
   del rectángulo del visor, medido sobre la captura de 1320×2868
   (152,444 → 1168,1972). Se funden en sincronía con el dedo que recorre el
   visor de borde a borde: izquierda la oscura, centro la de referencia
   (exposure-4), derecha la clara. Nunca corta — el control real avanza en
   tercios de diafragma, así que el fundido ES el punto. El easing va horneado
   en las posiciones muestreadas, por eso el timing-function es linear.
   Sin carril sintético: la captura ya trae los controles de verdad. */
.expo{position:relative;width:100%;max-width:340px;margin:0 auto;aspect-ratio:1320/2868}
.expo-shot{display:block;width:100%;height:auto}
.expo-window{position:absolute;left:11.52%;top:15.48%;width:76.97%;height:53.28%;overflow:hidden;border-radius:8px}
.expo-window img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.expo-window img+img{opacity:0;animation:var(--exp-name) 22s linear infinite;will-change:opacity}
.expo-window img:nth-child(2){--exp-name:exp-fade-2}
.expo-window img:nth-child(3){--exp-name:exp-fade-3}
.expo-window img:nth-child(4){--exp-name:exp-fade-4}
.expo-window img:nth-child(5){--exp-name:exp-fade-5}
.expo-window img:nth-child(6){--exp-name:exp-fade-6}
.expo-window img:nth-child(7){--exp-name:exp-fade-7}

/* el dedo — se desliza, no aprieta: sin pulsación, sin onda, sin rebote */
/* el dedo — se desliza, no aprieta: sin pulsación, sin onda, sin rebote.
   Dibujado en el lenguaje de íconos de la marca: trazo fino, punta redondeada,
   geometría mínima. El anillo marca el punto de contacto; el dedo cuelga de él
   hacia abajo-derecha, como una mano real sobre la pantalla. La sombra suave
   lo mantiene legible tanto sobre la exposición oscura como sobre la clara. */
.expo-touch{position:absolute;top:50%;left:50%;width:68px;height:88.1px;margin:-12.6px 0 0 -29.7px;animation:exp-path 22s linear infinite;will-change:left,top;pointer-events:none;z-index:2}


.expo-touch svg{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
/* el pulso de presión — nace en el punto de contacto y se expande, para que se
   lea que el dedo está apretando el cristal, no solo pasando por encima */
.expo-press{position:absolute;left:29.7px;top:12.6px;width:34px;height:34px;border-radius:50%;border:1.5px solid #a08a5c;opacity:.9;transform:translate(-50%,-50%);pointer-events:none}







/* el carril de exposición — el punto dorado y el dedo comparten exp-slide,
   y el carril mide exactamente el ancho del visor (76.97% de la captura),
   así que ambos indicadores van siempre en la misma posición */






/* el carril de exposición, sobre la línea divisoria REAL de la captura
   (y = 2161 de 2868 → 75.35%). No dibuja su propia línea: la de la
   captura es la que vale. Las marcas cuelgan hacia abajo, como en la app.
   Comparte exp-slide con el dedo y mide el ancho del visor, así que los dos
   indicadores van siempre en la misma posición. */
.expo-rail{position:absolute;left:11.52%;top:75.35%;width:76.97%;height:12px;pointer-events:none;z-index:3}
.expo-rail-ticks{position:absolute;left:0;right:0;top:1px;height:4px;background-image:repeating-linear-gradient(to right,rgba(160,138,92,.34) 0 1px,transparent 1px calc(100% / 12))}
.expo-rail-zero{position:absolute;left:50%;top:0;width:1px;height:7px;background:rgba(160,138,92,.65)}
.expo-rail-fill{position:absolute;top:-1px;height:2px;left:50%;width:0;background:#a08a5c;border-radius:1px;animation:exp-fill 22s linear infinite;will-change:left,width}
.expo-rail-dot{position:absolute;top:-2.5px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#a08a5c;animation:exp-slide 22s linear infinite;will-change:left}
.expo-caption{max-width:340px;margin:16px auto 0;font:400 11px/1.5 'DM Mono',monospace;letter-spacing:.06em;text-align:center;color:rgba(247,245,238,.3)}

/* Movimiento reducido: se detiene en la foto de referencia (exposure-4) */
@media (prefers-reduced-motion:reduce){
  .expo-window img+img,.expo-touch{animation:none}
  .expo-window img:nth-child(5),.expo-window img:nth-child(6),.expo-window img:nth-child(7){opacity:0}
  .expo-touch,.expo-rail-dot{left:50%}
  .expo-touch{top:50%}
  .expo-press{animation:none;opacity:.9;transform:translate(-50%,-50%)}
  .expo-rail-fill,.expo-rail-dot{animation:none}
  .expo-rail-fill{left:50%;width:0}
}










































































@keyframes exp-fade-2{0.00%{opacity:1.000}2.00%{opacity:1.000}4.00%{opacity:1.000}5.67%{opacity:1.000}7.33%{opacity:1.000}9.00%{opacity:1.000}10.86%{opacity:1.000}12.71%{opacity:1.000}14.57%{opacity:1.000}16.43%{opacity:1.000}18.29%{opacity:1.000}20.14%{opacity:1.000}22.00%{opacity:1.000}23.88%{opacity:1.000}25.75%{opacity:1.000}27.63%{opacity:1.000}29.50%{opacity:1.000}31.38%{opacity:1.000}33.25%{opacity:0.750}35.13%{opacity:0.188}37.00%{opacity:0.000}38.67%{opacity:0.000}40.33%{opacity:0.000}42.00%{opacity:0.000}43.86%{opacity:0.245}45.71%{opacity:0.980}47.57%{opacity:1.000}49.43%{opacity:1.000}51.29%{opacity:1.000}53.14%{opacity:1.000}55.00%{opacity:1.000}56.88%{opacity:1.000}58.75%{opacity:1.000}60.63%{opacity:1.000}62.50%{opacity:1.000}64.38%{opacity:1.000}66.25%{opacity:0.750}68.13%{opacity:0.188}70.00%{opacity:0.000}71.67%{opacity:0.000}73.33%{opacity:0.000}75.00%{opacity:0.000}77.00%{opacity:0.333}79.00%{opacity:1.000}81.00%{opacity:1.000}83.00%{opacity:1.000}85.00%{opacity:1.000}87.00%{opacity:1.000}89.00%{opacity:1.000}91.00%{opacity:1.000}93.00%{opacity:1.000}95.00%{opacity:1.000}96.67%{opacity:1.000}98.33%{opacity:1.000}100.00%{opacity:1.000}}
@keyframes exp-fade-3{0.00%{opacity:1.000}2.00%{opacity:1.000}4.00%{opacity:1.000}5.67%{opacity:1.000}7.33%{opacity:1.000}9.00%{opacity:1.000}10.86%{opacity:1.000}12.71%{opacity:1.000}14.57%{opacity:1.000}16.43%{opacity:1.000}18.29%{opacity:1.000}20.14%{opacity:1.000}22.00%{opacity:1.000}23.88%{opacity:1.000}25.75%{opacity:1.000}27.63%{opacity:1.000}29.50%{opacity:1.000}31.38%{opacity:0.688}33.25%{opacity:0.000}35.13%{opacity:0.000}37.00%{opacity:0.000}38.67%{opacity:0.000}40.33%{opacity:0.000}42.00%{opacity:0.000}43.86%{opacity:0.000}45.71%{opacity:0.000}47.57%{opacity:1.000}49.43%{opacity:1.000}51.29%{opacity:1.000}53.14%{opacity:1.000}55.00%{opacity:1.000}56.88%{opacity:1.000}58.75%{opacity:1.000}60.63%{opacity:1.000}62.50%{opacity:1.000}64.38%{opacity:0.688}66.25%{opacity:0.000}68.13%{opacity:0.000}70.00%{opacity:0.000}71.67%{opacity:0.000}73.33%{opacity:0.000}75.00%{opacity:0.000}77.00%{opacity:0.000}79.00%{opacity:0.333}81.00%{opacity:1.000}83.00%{opacity:1.000}85.00%{opacity:1.000}87.00%{opacity:1.000}89.00%{opacity:1.000}91.00%{opacity:1.000}93.00%{opacity:1.000}95.00%{opacity:1.000}96.67%{opacity:1.000}98.33%{opacity:1.000}100.00%{opacity:1.000}}
@keyframes exp-fade-4{0.00%{opacity:1.000}2.00%{opacity:1.000}4.00%{opacity:1.000}5.67%{opacity:1.000}7.33%{opacity:1.000}9.00%{opacity:1.000}10.86%{opacity:1.000}12.71%{opacity:1.000}14.57%{opacity:1.000}16.43%{opacity:1.000}18.29%{opacity:1.000}20.14%{opacity:1.000}22.00%{opacity:1.000}23.88%{opacity:1.000}25.75%{opacity:1.000}27.63%{opacity:1.000}29.50%{opacity:1.000}31.38%{opacity:0.000}33.25%{opacity:0.000}35.13%{opacity:0.000}37.00%{opacity:0.000}38.67%{opacity:0.000}40.33%{opacity:0.000}42.00%{opacity:0.000}43.86%{opacity:0.000}45.71%{opacity:0.000}47.57%{opacity:0.204}49.43%{opacity:1.000}51.29%{opacity:1.000}53.14%{opacity:1.000}55.00%{opacity:1.000}56.88%{opacity:1.000}58.75%{opacity:1.000}60.63%{opacity:1.000}62.50%{opacity:1.000}64.38%{opacity:0.000}66.25%{opacity:0.000}68.13%{opacity:0.000}70.00%{opacity:0.000}71.67%{opacity:0.000}73.33%{opacity:0.000}75.00%{opacity:0.000}77.00%{opacity:0.000}79.00%{opacity:0.000}81.00%{opacity:1.000}83.00%{opacity:1.000}85.00%{opacity:1.000}87.00%{opacity:1.000}89.00%{opacity:1.000}91.00%{opacity:1.000}93.00%{opacity:1.000}95.00%{opacity:1.000}96.67%{opacity:1.000}98.33%{opacity:1.000}100.00%{opacity:1.000}}
@keyframes exp-fade-5{0.00%{opacity:0.000}2.00%{opacity:0.000}4.00%{opacity:0.000}5.67%{opacity:0.000}7.33%{opacity:0.000}9.00%{opacity:0.000}10.86%{opacity:0.122}12.71%{opacity:0.490}14.57%{opacity:1.000}16.43%{opacity:1.000}18.29%{opacity:1.000}20.14%{opacity:1.000}22.00%{opacity:1.000}23.88%{opacity:1.000}25.75%{opacity:1.000}27.63%{opacity:1.000}29.50%{opacity:0.000}31.38%{opacity:0.000}33.25%{opacity:0.000}35.13%{opacity:0.000}37.00%{opacity:0.000}38.67%{opacity:0.000}40.33%{opacity:0.000}42.00%{opacity:0.000}43.86%{opacity:0.000}45.71%{opacity:0.000}47.57%{opacity:0.000}49.43%{opacity:0.796}51.29%{opacity:1.000}53.14%{opacity:1.000}55.00%{opacity:1.000}56.88%{opacity:1.000}58.75%{opacity:1.000}60.63%{opacity:1.000}62.50%{opacity:0.000}64.38%{opacity:0.000}66.25%{opacity:0.000}68.13%{opacity:0.000}70.00%{opacity:0.000}71.67%{opacity:0.000}73.33%{opacity:0.000}75.00%{opacity:0.000}77.00%{opacity:0.000}79.00%{opacity:0.000}81.00%{opacity:0.000}83.00%{opacity:1.000}85.00%{opacity:1.000}87.00%{opacity:1.000}89.00%{opacity:1.000}91.00%{opacity:1.000}93.00%{opacity:0.375}95.00%{opacity:0.000}96.67%{opacity:0.000}98.33%{opacity:0.000}100.00%{opacity:0.000}}
@keyframes exp-fade-6{0.00%{opacity:0.000}2.00%{opacity:0.000}4.00%{opacity:0.000}5.67%{opacity:0.000}7.33%{opacity:0.000}9.00%{opacity:0.000}10.86%{opacity:0.000}12.71%{opacity:0.000}14.57%{opacity:0.102}16.43%{opacity:0.898}18.29%{opacity:1.000}20.14%{opacity:1.000}22.00%{opacity:1.000}23.88%{opacity:1.000}25.75%{opacity:1.000}27.63%{opacity:0.313}29.50%{opacity:0.000}31.38%{opacity:0.000}33.25%{opacity:0.000}35.13%{opacity:0.000}37.00%{opacity:0.000}38.67%{opacity:0.000}40.33%{opacity:0.000}42.00%{opacity:0.000}43.86%{opacity:0.000}45.71%{opacity:0.000}47.57%{opacity:0.000}49.43%{opacity:0.000}51.29%{opacity:1.000}53.14%{opacity:1.000}55.00%{opacity:1.000}56.88%{opacity:1.000}58.75%{opacity:1.000}60.63%{opacity:0.313}62.50%{opacity:0.000}64.38%{opacity:0.000}66.25%{opacity:0.000}68.13%{opacity:0.000}70.00%{opacity:0.000}71.67%{opacity:0.000}73.33%{opacity:0.000}75.00%{opacity:0.000}77.00%{opacity:0.000}79.00%{opacity:0.000}81.00%{opacity:0.000}83.00%{opacity:0.667}85.00%{opacity:1.000}87.00%{opacity:1.000}89.00%{opacity:1.000}91.00%{opacity:0.500}93.00%{opacity:0.000}95.00%{opacity:0.000}96.67%{opacity:0.000}98.33%{opacity:0.000}100.00%{opacity:0.000}}
@keyframes exp-fade-7{0.00%{opacity:0.000}2.00%{opacity:0.000}4.00%{opacity:0.000}5.67%{opacity:0.000}7.33%{opacity:0.000}9.00%{opacity:0.000}10.86%{opacity:0.000}12.71%{opacity:0.000}14.57%{opacity:0.000}16.43%{opacity:0.000}18.29%{opacity:0.510}20.14%{opacity:0.878}22.00%{opacity:1.000}23.88%{opacity:0.812}25.75%{opacity:0.250}27.63%{opacity:0.000}29.50%{opacity:0.000}31.38%{opacity:0.000}33.25%{opacity:0.000}35.13%{opacity:0.000}37.00%{opacity:0.000}38.67%{opacity:0.000}40.33%{opacity:0.000}42.00%{opacity:0.000}43.86%{opacity:0.000}45.71%{opacity:0.000}47.57%{opacity:0.000}49.43%{opacity:0.000}51.29%{opacity:0.020}53.14%{opacity:0.755}55.00%{opacity:1.000}56.88%{opacity:0.812}58.75%{opacity:0.250}60.63%{opacity:0.000}62.50%{opacity:0.000}64.38%{opacity:0.000}66.25%{opacity:0.000}68.13%{opacity:0.000}70.00%{opacity:0.000}71.67%{opacity:0.000}73.33%{opacity:0.000}75.00%{opacity:0.000}77.00%{opacity:0.000}79.00%{opacity:0.000}81.00%{opacity:0.000}83.00%{opacity:0.000}85.00%{opacity:0.667}87.00%{opacity:1.000}89.00%{opacity:0.625}91.00%{opacity:0.000}93.00%{opacity:0.000}95.00%{opacity:0.000}96.67%{opacity:0.000}98.33%{opacity:0.000}100.00%{opacity:0.000}}
@keyframes exp-path{0.00%{left:50.00%;top:48.00%}2.00%{left:50.00%;top:48.00%}4.00%{left:50.00%;top:48.00%}5.67%{left:50.00%;top:57.33%}7.33%{left:50.00%;top:80.67%}9.00%{left:50.00%;top:90.00%}10.86%{left:51.72%;top:90.00%}12.71%{left:56.89%;top:90.00%}14.57%{left:65.50%;top:90.00%}16.43%{left:76.70%;top:90.00%}18.29%{left:85.31%;top:90.00%}20.14%{left:90.48%;top:90.00%}22.00%{left:92.20%;top:90.00%}23.88%{left:89.56%;top:90.00%}25.75%{left:81.65%;top:90.00%}27.63%{left:68.46%;top:90.00%}29.50%{left:50.00%;top:90.00%}31.38%{left:31.54%;top:90.00%}33.25%{left:18.35%;top:90.00%}35.13%{left:10.44%;top:90.00%}37.00%{left:7.80%;top:90.00%}38.67%{left:7.80%;top:80.67%}40.33%{left:7.80%;top:57.33%}42.00%{left:7.80%;top:48.00%}43.86%{left:11.24%;top:48.00%}45.71%{left:21.58%;top:48.00%}47.57%{left:38.80%;top:48.00%}49.43%{left:61.20%;top:48.00%}51.29%{left:78.42%;top:48.00%}53.14%{left:88.76%;top:48.00%}55.00%{left:92.20%;top:48.00%}56.88%{left:89.56%;top:48.00%}58.75%{left:81.65%;top:48.00%}60.63%{left:68.46%;top:48.00%}62.50%{left:50.00%;top:48.00%}64.38%{left:31.54%;top:48.00%}66.25%{left:18.35%;top:48.00%}68.13%{left:10.44%;top:48.00%}70.00%{left:7.80%;top:48.00%}71.67%{left:7.80%;top:38.67%}73.33%{left:7.80%;top:15.33%}75.00%{left:7.80%;top:6.00%}77.00%{left:12.49%;top:6.00%}79.00%{left:26.56%;top:6.00%}81.00%{left:50.00%;top:6.00%}83.00%{left:73.44%;top:6.00%}85.00%{left:87.51%;top:6.00%}87.00%{left:92.20%;top:6.00%}89.00%{left:86.92%;top:6.00%}91.00%{left:71.10%;top:6.00%}93.00%{left:55.27%;top:6.00%}95.00%{left:50.00%;top:6.00%}96.67%{left:50.00%;top:15.33%}98.33%{left:50.00%;top:38.67%}100.00%{left:50.00%;top:48.00%}}
@keyframes exp-slide{0.00%{left:50.00%}2.00%{left:50.00%}4.00%{left:50.00%}5.67%{left:50.00%}7.33%{left:50.00%}9.00%{left:50.00%}10.86%{left:51.72%}12.71%{left:56.89%}14.57%{left:65.50%}16.43%{left:76.70%}18.29%{left:85.31%}20.14%{left:90.48%}22.00%{left:92.20%}23.88%{left:89.56%}25.75%{left:81.65%}27.63%{left:68.46%}29.50%{left:50.00%}31.38%{left:31.54%}33.25%{left:18.35%}35.13%{left:10.44%}37.00%{left:7.80%}38.67%{left:7.80%}40.33%{left:7.80%}42.00%{left:7.80%}43.86%{left:11.24%}45.71%{left:21.58%}47.57%{left:38.80%}49.43%{left:61.20%}51.29%{left:78.42%}53.14%{left:88.76%}55.00%{left:92.20%}56.88%{left:89.56%}58.75%{left:81.65%}60.63%{left:68.46%}62.50%{left:50.00%}64.38%{left:31.54%}66.25%{left:18.35%}68.13%{left:10.44%}70.00%{left:7.80%}71.67%{left:7.80%}73.33%{left:7.80%}75.00%{left:7.80%}77.00%{left:12.49%}79.00%{left:26.56%}81.00%{left:50.00%}83.00%{left:73.44%}85.00%{left:87.51%}87.00%{left:92.20%}89.00%{left:86.92%}91.00%{left:71.10%}93.00%{left:55.27%}95.00%{left:50.00%}96.67%{left:50.00%}98.33%{left:50.00%}100.00%{left:50.00%}}
@keyframes exp-fill{0.00%{left:50.00%;width:0.00%}2.00%{left:50.00%;width:0.00%}4.00%{left:50.00%;width:0.00%}5.67%{left:50.00%;width:0.00%}7.33%{left:50.00%;width:0.00%}9.00%{left:50.00%;width:0.00%}10.86%{left:50.00%;width:1.72%}12.71%{left:50.00%;width:6.89%}14.57%{left:50.00%;width:15.50%}16.43%{left:50.00%;width:26.70%}18.29%{left:50.00%;width:35.31%}20.14%{left:50.00%;width:40.48%}22.00%{left:50.00%;width:42.20%}23.88%{left:50.00%;width:39.56%}25.75%{left:50.00%;width:31.65%}27.63%{left:50.00%;width:18.46%}29.50%{left:50.00%;width:0.00%}31.38%{left:31.54%;width:18.46%}33.25%{left:18.35%;width:31.65%}35.13%{left:10.44%;width:39.56%}37.00%{left:7.80%;width:42.20%}38.67%{left:7.80%;width:42.20%}40.33%{left:7.80%;width:42.20%}42.00%{left:7.80%;width:42.20%}43.86%{left:11.24%;width:38.76%}45.71%{left:21.58%;width:28.42%}47.57%{left:38.80%;width:11.20%}49.43%{left:50.00%;width:11.20%}51.29%{left:50.00%;width:28.42%}53.14%{left:50.00%;width:38.76%}55.00%{left:50.00%;width:42.20%}56.88%{left:50.00%;width:39.56%}58.75%{left:50.00%;width:31.65%}60.63%{left:50.00%;width:18.46%}62.50%{left:50.00%;width:0.00%}64.38%{left:31.54%;width:18.46%}66.25%{left:18.35%;width:31.65%}68.13%{left:10.44%;width:39.56%}70.00%{left:7.80%;width:42.20%}71.67%{left:7.80%;width:42.20%}73.33%{left:7.80%;width:42.20%}75.00%{left:7.80%;width:42.20%}77.00%{left:12.49%;width:37.51%}79.00%{left:26.56%;width:23.44%}81.00%{left:50.00%;width:0.00%}83.00%{left:50.00%;width:23.44%}85.00%{left:50.00%;width:37.51%}87.00%{left:50.00%;width:42.20%}89.00%{left:50.00%;width:36.92%}91.00%{left:50.00%;width:21.10%}93.00%{left:50.00%;width:5.27%}95.00%{left:50.00%;width:0.00%}96.67%{left:50.00%;width:0.00%}98.33%{left:50.00%;width:0.00%}100.00%{left:50.00%;width:0.00%}}
@keyframes exp-press-gate{0%{opacity:0}0.80%{opacity:0}3.20%{opacity:0}4.80%{opacity:0}8.20%{opacity:0}9.80%{opacity:0.9}21.20%{opacity:0.9}22.80%{opacity:0.9}36.20%{opacity:0.9}37.80%{opacity:0}41.20%{opacity:0}42.80%{opacity:0.9}54.20%{opacity:0.9}55.80%{opacity:0.9}69.20%{opacity:0.9}70.80%{opacity:0}74.20%{opacity:0}75.80%{opacity:0.9}86.20%{opacity:0.9}87.80%{opacity:0.9}94.20%{opacity:0.9}95.80%{opacity:0}99.20%{opacity:0}100%{opacity:0}}
@keyframes exp-press-pulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.08)}}


/* ══════════════════════════════════════════════════════════════════════════
   03 · ESCALA DE ZONAS
   Los cuatro fondos que ya existían — #1e1e1a, #171714, #1f1b18, #0d0c0a —
   llegaron uno por uno, sin sistema: una escala tonal por accidente. Aquí
   quedan nombrados como cinco pasos y asignados por función, no por gusto:
   lectura y manifiesto en el medio, producto un paso más claro, la pausa y la
   tira al fondo, el remate arriba. Son variables, no efectos — reversible en
   un commit, y cero coste de render.
   ══════════════════════════════════════════════════════════════════════════ */
.z2{background:var(--z2);--zona-bg:var(--z2)}
.z3{background:var(--z3);--zona-bg:var(--z3)}
.z4{background:var(--z4);--zona-bg:var(--z4)}
.z5{background:var(--z5);--zona-bg:var(--z5)}
.z6{background:var(--z6);--zona-bg:var(--z6)}

/* ══════════════════════════════════════════════════════════════════════════
   05 · LUZ DE CANTO
   Un objeto oscuro sobre fondo oscuro no se separa con sombra: se separa por
   el filo de su propio canto. Lo que había era border:1px rgba(cream,.08)
   uniforme en los cuatro lados — que es exactamente lo que hace una
   calcomanía y nunca lo que hace un objeto.
   Dos reglas que sostienen el truco:
   · La luz entra SIEMPRE desde arriba-izquierda. Dos direcciones y se cae.
   · Sombras desplazadas, no inset: estos elementos llevan la imagen encima
     (.dev con un img en inset:0, y los otros son <img>), y en contenido
     reemplazado una sombra inset queda por debajo — no se vería.
   ══════════════════════════════════════════════════════════════════════════ */
.dev,.trio img,.funcion-imagen img{
  border:none;
  box-shadow:
    -1px -1px 0 0 rgba(247,245,238,.22),
    1px 1px 0 0 rgba(160,138,92,.10),
    0 26px 44px -22px rgba(0,0,0,.9),
    0 0 80px -30px rgba(160,138,92,.34);
}
/* El de en medio del trío ya mandaba con un borde dorado; ahora manda con un
   canto dorado y un levante algo mayor. */
.trio figure:nth-child(2) img{
  box-shadow:
    -1px -1px 0 0 rgba(160,138,92,.5),
    1px 1px 0 0 rgba(160,138,92,.14),
    0 30px 50px -22px rgba(0,0,0,.9),
    0 0 92px -28px rgba(160,138,92,.42);
}

/* ══════════════════════════════════════════════════════════════════════════
   01 + 02 · GRANO Y VIÑETEO — una sola decisión de "placa"
   Fijos al viewport, no por sección: grano que hace scroll con el contenido
   se lee como imagen de fondo; grano quieto se lee como el plano de la
   película. Ambos por debajo de .05 — pasando de .06 el dorado se enloda.
   Van con z-index alto y pointer-events:none porque media página lleva
   position:relative; a z-index 0 el grano quedaría por debajo de unas
   secciones y por encima de otras, que es peor que no tenerlo.
   ══════════════════════════════════════════════════════════════════════════ */


@media print{body::before,body::after{display:none}}

/* ══════════════════════════════════════════════════════════════════════════
   10 · RIEL DE BORDE DE PELÍCULA — sólo en el manifiesto
   El marginado real de un 35 mm: las perforaciones y la clave de canto que
   Kodak imprime FUERA del cuadro. Ocupa el vacío exterior de la columna, que
   es donde no pasaba nada.
   Dos decisiones que no son de gusto:
   · Va absoluto a la sección, no fixed a la página. Scoped al manifiesto se
     lee como el margen de ESA placa; fijo y recorriendo once mil píxeles se
     convierte en cromo de interfaz.
   · La opacidad va al 9%, no al 6% que pedía la ficha, porque el viñeteo
     (02) oscurece el canto izquierdo hasta un 40% y ahí es justo donde el
     riel vive. Nueve por ciento bajo ese viñeteo aterriza en ~5-6% efectivo:
     el valor que la ficha quería. Sin compensar, no se vería.
   Se retira por debajo de 900 px: ahí el margen exterior ya no existe.
   ══════════════════════════════════════════════════════════════════════════ */



@media (max-width:900px){}
.rail-film{position:absolute;left:0;top:0;bottom:0;width:52px;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,rgba(0,0,0,.22),rgba(0,0,0,0) 88%);
  border-right:1px solid rgba(247,245,238,.06)}
/* La banda de perforaciones con el paso real del 35 mm: agujero 2.79 mm sobre
   un paso de 4.75 mm ≈ 12 px de agujero cada 20 px. */

/* Los dos filos que convierten una columna de agujeros en una tira. */




@media (max-width:900px){.rail-film{display:none}}

/* El manifiesto cede sitio al riel y respira un paso más: el contenido se
   corre a la derecha y las dos columnas bajan de 660/460 a 610/420, para que
   la tira quede entera fuera del texto y no pegada a él. */
.rail-film{position:absolute;left:0;top:0;bottom:0;width:46px;pointer-events:none;z-index:1;
  border-right:1px solid rgba(247,245,238,.06)}
/* Paso del original de referencia: agujero de 9 px cada 22 px — el hueco es
   MÁS ancho que el agujero. Escalado aquí a 12/29 para el riel de 46 px, misma
   proporción. Sin filos flanqueando la banda: el original no los lleva y
   convertían la tira en un rectángulo dibujado. */
.rail-film i{position:absolute;left:11px;top:0;bottom:0;width:11px;opacity:.16;
  background:repeating-linear-gradient(rgba(206,195,168,1) 0 12px,transparent 12px 29px)}
.rail-film span{position:absolute;left:28px;top:38px;writing-mode:vertical-rl;
  font:400 9px/1 'DM Mono',monospace;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(206,195,168,1);opacity:.15;white-space:nowrap}
@media (max-width:900px){.rail-film{display:none}}

/* ══════════════════════════════════════════════════════════════════════════
   12 · TITULAR A DOS VALORES
   Tres valores, no dos: crema al 100% para la promesa, crema al 30% para la
   condición o el planteamiento, y dorado UNA sola vez en todo el sitio para
   la palabra que decide.
   Disciplina de la ficha, y es la que sostiene el efecto: un corte por
   titular, siempre en el mismo sitio semántico, y solo en cuatro titulares.
   Aplicado a los ocho, deja de ser jerarquía y vuelve a ser ruido.
   ══════════════════════════════════════════════════════════════════════════ */
.tv-dim{color:rgba(247,245,238,.30)}
.tv-key{color:var(--gold)}
/* La tira toma el mismo tratamiento que el riel del manifiesto: mismo beige
   (206,195,168) a la misma opacidad (.16) y el mismo paso — agujero de 12 px
   cada 29, el hueco más ancho que el agujero. Fuera los dos hairlines que la
   enmarcaban arriba y abajo: el riel no los lleva, y eran lo que hacía que la
   tira se leyera como una caja dibujada en vez de una tira de película.
   La geometría vertical no se toca: sigue a escala real de 35 mm — área de
   imagen 68.6% de la altura, bordes perforados 15.7% cada uno. */
/* ⚠️ `overflow-x:auto` Y NO `hidden`: es lo que la hace arrastrable con el
   dedo, sin una línea de JavaScript. Comprobado en vivo antes de escribirlo —
   la posición que el usuario arrastra SE QUEDA, y el área de desplazamiento no
   se descoloca mientras la animación corre (4360 px constantes en 6 s). O sea
   que la deriva automática y el arrastre conviven.
   La barra se esconde en los tres motores: aquí es un carril de película, no
   un contenedor con scroll. */
.filmstrip-live{background:var(--z4);padding:6px 0;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
.filmstrip-live::-webkit-scrollbar{display:none}
.fs-perf{position:absolute;left:0;right:0;height:11px;opacity:.16;pointer-events:none;
  background-image:repeating-linear-gradient(to right,rgba(206,195,168,1) 0 12px,transparent 12px 29px)}
.fs-perf.top{top:7px}
.fs-perf.bottom{bottom:7px}

/* ══════════════════════════════════════════════════════════════════════════
   REGLA DE ADYACENCIA — consecuencia directa de la 03
   Dos secciones contiguas nunca comparten valor de fondo. Sin esto, la escala
   de zonas existe en las variables pero no se ve: tres secciones seguidas en
   Zona IV son una sola superficie larga, que es el problema que la escala
   venía a resolver. El corte entre zonas ES la transición.
   Secuencia: hero III · manifiesto IV · how it works V · tira IV · stats III
   · rewind V · Q&A IV · what it does IV(*) · four looks V · quotebreak II ·
   plena V · privacy VI · pie II.
   (*) "what it does" baja a IV para no repetir la V de "in your hands", que
   la precede; sus secciones anidadas no llevan fondo y heredan la suya, así
   que el capítulo entero queda a un valor.
   ══════════════════════════════════════════════════════════════════════════ */

/* Los titulares de sección van todos al mismo tratamiento que .funcion-texto
   h2 ("Shoot without looking"), que es el que funciona: peso 700, interlineado
   1.08 y tracking -.025em. Los de .features y .hand venían heredando peso 500
   y el line-height 1.6 del body — a 37 px eso deja los renglones tan
   separados que el titular deja de leerse como un bloque. */
.features .head h2,.hand .head h2{font-weight:700;line-height:1.08;letter-spacing:-.025em}

/* ══════════════════════════════════════════════════════════════════════════
   03 aplicada a LAS CUATRO PELÍCULAS
   Aquí la escala de zonas deja de ser una decisión de layout y se convierte en
   el contenido: cada película es un tratamiento tonal, así que las cuatro
   filas ocupan cuatro pasos de la escala y la sección demuestra lo que dice.
   Corren a sangre —margen negativo contra el var(--pad) de .features, que ya
   lleva overflow:hidden— porque una banda de valor que no toca los cantos se
   lee como una tarjeta, no como una zona.
   Y desaparecen los hairlines entre filas: el cambio de valor ES la costura.
   Ladder de oscuro a claro, II → III → V → VI. La última queda en VI y la
   sección siguiente ("four looks") está en V, así que tampoco se pegan.
   ══════════════════════════════════════════════════════════════════════════ */
.films .film{
  border-top:none;
  margin-left:calc(var(--pad) * -1);
  margin-right:calc(var(--pad) * -1);
  padding:30px var(--pad);
}
.films .film:last-child{border-bottom:none}
.films .film:nth-child(1){background:var(--z2)}
.films .film:nth-child(2){background:var(--z3)}
.films .film:nth-child(3){background:var(--z5)}
.films .film:nth-child(4){background:var(--z6)}
/* Sin borde que cambiar, el hover se apoya en lo que ya tenía: la barra
   dorada junto al nombre y el número y el nombre pasando a dorado. Se le suma
   un paso de valor, que es el gesto propio de esta sección. */
.films .film{transition:background .22s,border-color .2s}
.films .film:nth-child(1):hover{background:#100f0d}
.films .film:nth-child(2):hover{background:#1b1b17}
.films .film:nth-child(3):hover{background:#29291f}
.films .film:nth-child(4):hover{background:#31312a}
/* La banda a sangre necesita que el número no se salga de la columna. */
.films .film .fn{padding-left:0}
@media (max-width:640px){
  .films .film{padding-left:var(--pad);padding-right:var(--pad)}
}

/* Dos columnas solo cuando caben: 434 px de gráfico + 486 mínimos de lectura
   + el padding del riel. La columna de texto lleva mínimo real (480 px) para
   que nunca vuelva a ser ella la que absorbe el faltante. */

/* ══════════════════════════════════════════════════════════════════════════
   09 · LA UVE COMO CORTE DE CAPÍTULO
   Una sola, en el punto donde el sitio deja de hablar de filosofía y empieza
   a hablar de producto (entre Q&A y "in your hands"). Ahí no había nada: ni
   raya ni cambio de zona, y es el cambio estructural más grande de la página.
   Es la geometría de la marca haciendo trabajo tipográfico, así que no puede
   leerse como decoración importada.
   La banda toma Zona II para que el corte tenga espesor y respete la regla de
   adyacencia: Q&A IV → uve II → in your hands V.
   ══════════════════════════════════════════════════════════════════════════ */


.vee-cut{background:var(--z2);padding:18px 0;overflow:hidden;line-height:0}
.vee-cut i{display:block;height:30px;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='40' viewBox='0 0 160 40'%3E%3Cpath d='M0 2 L40 38 L80 2 L120 38 L160 2' fill='none' stroke='%23a08a5c' stroke-width='2.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:repeat-x;background-size:120px 30px;background-position:center}

/* ── Manifiesto · el gráfico deja de ser rígido ───────────────────────────
   Los dos teléfonos venían con width:210px en el atributo style, o sea 434 px
   inamovibles. Eso era lo que forzaba el salto a 1180 px y lo que antes hacía
   que la columna de texto absorbiera todo el faltante.
   Ahora escalan: aspect-ratio fijo y ancho flexible con tope en 210. El
   !important es necesario para ganarle al style inline.
   Y una decisión de contenido, no de layout: entre 901 y 1180 px no caben dos
   teléfonos al lado de una columna legible, así que se queda uno solo. Un
   teléfono a buen tamaño cuenta más que dos miniaturas. */
.manigraphic{justify-self:center;width:100%;max-width:434px;display:flex;align-items:center;gap:14px;justify-content:center;margin:48px auto 0}
.manigraphic .dev{width:auto!important;height:auto!important;flex:0 1 210px;min-width:0;max-width:210px;aspect-ratio:210/441;align-self:center}

@media (min-width:901px){
  .section.narrow{
    display:grid;
    grid-template-columns:minmax(400px,660px) minmax(240px,434px);
    gap:32px;align-items:center;justify-content:center;
    padding-left:calc(var(--pad) + 24px);
  }
  .section.narrow .manigraphic{margin:0}
}
@media (min-width:1180px){
  .section.narrow{padding-left:calc(var(--pad) + 62px)}
}

/* ══════════════════════════════════════════════════════════════════════════
   01 + 02 · GRANO Y VIÑETEO — corregido el banding
   El anillado no lo causaba el grano: era cuantización de 8 bits en el
   degradado. Y el grano no lo estaba disolviendo porque el modo de fusión lo
   anulaba: overlay con base < 0.5 calcula 2 × base × mezcla, y con #1e1e1a
   (0.118) contra ruido gris medio da 2 × 0.118 × 0.5 = 0.118 — exactamente el
   valor de partida, cero cambio. El ruido estaba ahí y no hacía nada justo
   donde hacía falta.
   Cinco correcciones:
   1 · mix-blend-mode:normal a .06, para que el ruido sume ±1-2 niveles reales
       de 8 bits en vez de multiplicarse contra el fondo.
   2 · El grano por encima del viñeteo (z 9998 sobre 9997). Si el degradado va
       arriba, vuelve a alisar lo que el grano acaba de romper.
   3 · Interpolación en oklab: reparte los escalones de forma perceptualmente
       uniforme. Va con declaración de reserva delante — si el navegador no
       entiende "in oklab" descarta ESA línea y se queda con la anterior, no
       con el viñeteo entero roto.
   4 · Recorrido más corto: alfa final .28 en vez de .42. El banding es
       proporcional a lo que viaja el degradado.
   5 · Deriva de tono: el extremo oscuro es rgba(6,8,12) y no negro puro, así
       los escalones de cada canal caen en puntos distintos y los anillos se
       rompen entre sí.
   Techo duro: no subir el grano de .08 — a partir de ahí el dorado se enloda.
   ══════════════════════════════════════════════════════════════════════════ */
body::before{
  content:'';position:fixed;inset:0;z-index:9998;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='wwg' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23wwg)'/%3E%3C/svg%3E");
  background-size:300px 300px;
  opacity:.06;mix-blend-mode:normal;
}
body::after{
  content:'';position:fixed;inset:0;z-index:9997;pointer-events:none;
  background:radial-gradient(125% 95% at 50% 34%,rgba(6,8,12,0) 38%,rgba(6,8,12,.28) 100%);
  background:radial-gradient(125% 95% at 50% 34% in oklab,rgba(6,8,12,0) 38%,rgba(6,8,12,.28) 100%);
}
@media print{body::before,body::after{display:none}}

/* ══════════════════════════════════════════════════════════════════════════
   PRIMERA PANTALLA — el diafragma que abre
   El rollo de 24 cuadros recortado por el ojo del diafragma, la marca detrás
   al 17%, el grabado siguiendo la curva inferior del aro, y el texto sobre un
   velo radial.
   Notas que no son de gusto:
   · transform-box:view-box en cuchillas y aro. Sin él, transform-origin se
     mide desde la esquina del viewBox y el giro sale torcido.
   · El grabado va en SU PROPIA capa al 62%. Dentro del grupo de la marca
     (17%) sería ilegible.
   · Las curvas de cuchillas y círculo son distintas a propósito
     —(.16,.86,.24,1) y (.22,.78,.24,1)—. Igualadas, el gesto se convierte en
     un iris de cine antiguo.
   · Estado inicial legible: el aro contraído ya lee como la marca. Nada
     parqueado en opacity:0 esperando — es lo que ve quien tiene conexión
     lenta y lo que sale en la previsualización de un enlace.
   · No repite grano ni viñeteo: los de body::before/::after ya cubren esto y
     el grano ya es un mosaico estático, no feTurbulence vivo.
   · Flag de taller: <html class="no-hero-anim"> deja el estado final sin
     esperar los 1,3 s.
   ══════════════════════════════════════════════════════════════════════════ */







.hero .blades,

















/* Estado final completo e inmediato: sin esto, quien tenga movimiento
   reducido se queda mirando un aro cerrado para siempre. */
@media (prefers-reduced-motion:reduce){
  .hero *{animation:none!important}
  
}
 

/* ══════════════════════════════════════════════════════════════════════════
   REGLA DE VELOS
   Un velo es exactamente el color de la superficie que tiene detrás, nunca un
   literal escrito a mano. Cada clase de zona publica su valor como --zona-bg
   y el velo lo consume con color-mix. El literal que queda delante es la
   declaración de reserva para navegadores sin color-mix — y está en el mismo
   valor, no en otro, precisamente por esto.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   11 · NÚMERO FANTASMA — instrumentación, no adorno
   Sustituye al "18 / 24" que había: era un número a 92 px flotando dentro de
   la columna, y un número que cabe entero es un gráfico. Este va sangrado por
   el canto izquierdo y CORTADO por él, que es lo que sugiere una capa más
   grande que la página — ahí está la profundidad, gratis.
   Cuenta algo real: Exposure es la tercera de las tres funciones que lista
   .fgrid justo arriba (Modo Ciego, Inmersión, Exposición), en ese orden.
   DM Mono 300 al 4.5%, nunca centrado.
   ══════════════════════════════════════════════════════════════════════════ */
.ghostnum{position:absolute;left:calc(-1 * var(--pad) - 14px);bottom:-46px;z-index:0;pointer-events:none;user-select:none;
  font:300 clamp(200px,26vw,320px)/.72 'DM Mono',ui-monospace,monospace;
  color:var(--cream);opacity:.09;letter-spacing:-.03em}

/* ══════════════════════════════════════════════════════════════════════════
   Tres correcciones de composición
   1 · LOS 18 Y LOS 6. El dato es la DIFERENCIA entre los dos grupos, no el
       brillo de ninguno. Al subir los vacíos de .13 a .22 para que se vieran
       sobre Zona III, la diferencia se comprimió de 1.97 a 1.45 — se igualaron.
       Los llenos suben a .85: los vacíos siguen en 1.96:1 contra el fondo y la
       diferencia entre grupos vuelve a 2.17, por encima de la del brief.
   2 · EL ARO. Las uves llevan trazo 9.1 y las cuchillas 3.4 — a la misma
       opacidad de grupo, la uve manda 2.7 a 1 por construcción, y encima el
       diafragma quedaba justo debajo del velo del texto. Se separan en dos
       capas: las uves por debajo y más bajas (.11), el iris POR ENCIMA del
       velo (z 7) para que el aro se lea y el grabado tenga barrilete del que
       salir.
   3 · EL VELO. Se había encogido a 44% para librar el grabado; ahora que el
       grabado se fue a r=104 y vive 84 px por debajo, puede volver a ser
       grande: núcleo opaco del todo y caída larga, para que ningún borde de
       cuadro cruce por detrás de las letras.
   ══════════════════════════════════════════════════════════════════════════ */










/* El velo, corregido de raíz. En radial-gradient los radios son % del ANCHO y
   el ALTO de la caja, no de la mitad: con 82%/74% el rx salía 446 contra una
   media-caja de 272, así que el degradado seguía OPACO donde terminaba el
   elemento y se cortaba en plano — un rectángulo, no un velo.
   Dos condiciones que solo caben juntas si la caja es mayor que el texto:
   el radio menor que la media-caja (para llegar a transparente antes del
   borde) y el texto dentro del núcleo. De ahí el padding grande: le da sitio
   al degradado para desvanecerse dentro del elemento.
   Comprobado: alfa 0 en los cuatro bordes medios, 1 en las esquinas del
   texto, 48 px de caída, y llega a cero 434 px por encima del grabado. */


/* El iris vuelve por DEBAJO del velo. A z 7 el aro de 183 px de diámetro y las
   seis cuchillas cruzaban el titular de lado a lado: oro sobre el único
   elemento de la pantalla que no puede negociar. Es el mismo motivo por el que
   ya habíamos descartado subir el grabado por encima del velo. */



/* ── El aro, resuelto por escala y no por orden de capas ──────────────────
   El problema era geométrico: con el iris a la escala de la marca, el aro
   medía 91 px de radio y el núcleo opaco del velo 293×121 — el aro cabía
   ENTERO dentro. Ningún z-index por debajo del velo podía revelarlo, y por
   encima pintaba oro sobre el titular.
   La única palanca que no negocia con el titular: agrandar SOLO el iris, que
   ya es un elemento aparte. A ×1.9 el aro tiene 172 px de radio, así que sus
   arcos superior e inferior emergen por fuera del núcleo vertical (140 px) y
   se leen, mientras los lados siguen dentro del núcleo horizontal (341 px) y
   no cruzan el texto. El texto queda DENTRO del objetivo, y el grabado por fin
   tiene barrilete al que pertenecer.
   Comprobado: visibilidad 0.34 arriba y abajo, 0.00 en los lados.
   ×2 ya no cabe en 915 px de ancho; ×1.8 deja el arco inferior en 0.32. */




/* ── Disparados vs. por disparar: diferencia estructural, no de brillo ────
   Antes eran dorado .85 contra crema .22 — dos valores distintos, sí, pero
   ambos resuelven a una línea de 1 px de luminancia parecida (122 contra 72)
   sobre fondo oscuro, y a ese grosor el ojo no compara brillos: los lee como
   el mismo gris apagado. Por eso no se distinguían aunque el marcado y el CSS
   estuvieran bien.
   Ahora la diferencia es de MATERIA: el disparado tiene relleno, porque tiene
   una imagen dentro; el vacío es solo contorno. Lleno contra hueco se lee de
   un golpe de vista y sin comparar, que es lo que pedía el dato. */



/* ── El velo, ahora como máscara sobre la retícula ────────────────────────
   Se quita de .txt. Un óvalo oscuro encima de la retícula tenía tres daños:
   se reconocía como mancha, se comía la mitad inferior del aro (el círculo
   leía como arco, y con el grabado en otro arco el círculo no se resolvía
   nunca) y aparecía desde el primer fotograma sobre nada, porque vivía en el
   fondo de .txt y solo se animaban sus hijos.
   Como mask-image en .roll no se añade nada oscuro, así que no hay mancha
   posible; el aro y el grabado quedan íntegros por encima; y en t=0 solo hay
   una retícula con un hueco suave donde va a caer el texto.
   El hueco está dimensionado a la caja del texto (452×150 medidos), no a un
   círculo genérico: 250×96 de núcleo transparente y caída hasta 400×168.
   La máscara convive con el clip-path de la apertura — son propiedades
   distintas y se aplican en cascada, no compiten. */



/* ── El aro, recalibrado sin velo ─────────────────────────────────────────
   Estaba a .34 para sobrevivir al velo que se lo comía. Sin velo se ve
   entero, y a .34 pesaba el doble que las uves (.17) — siendo las dos partes
   de la misma marca, ninguna debe mandar sobre la otra. Igualado a .17: el
   círculo y las uves leen como una sola pieza. */


/* ══════════════════════════════════════════════════════════════════════════
   PRIMERA PANTALLA — montada desde worthwait-hero-centrado.html
   Reproducción del archivo objetivo, con las cuatro sustituciones de
   producción: Cabinet Grotesk / Switzer / DM Mono desde el dominio propio en
   vez de los suplentes de Google; --zona-bg (que ya es el sistema de zonas
   del sitio) en vez de --hero-bg; sin placa de grano ni viñeteo, que el sitio
   ya tiene resueltos como mosaico estático + oklab; y la altura del nav a
   78 px, que es la real de este sitio y no los 70 del archivo.
   Borrado de la ronda pasada: el iris a ×1.9 y las dos capas con z-index
   cruzados, el relleno degradado de los cuadros, la mask-image sobre .roll y
   el textPath colgado del aro de la marca.
   ══════════════════════════════════════════════════════════════════════════ */
/* ⚠️ EL HÉROE NO LLENA LA PANTALLA, Y ES LO QUE HACE QUE FUNCIONE.
   Estaba en calc(100vh - 78px) —91 vh— y la banda de fotografía que va
   justo debajo empezaba EXACTAMENTE en el pliegue: el visitante veía el
   logotipo y ninguna foto, que era el problema que la banda venía a
   resolver. Bajándolo a 90vh asoma el borde superior de la imagen.
   Y asomar es MEJOR que verla entera: una franja cortada por el borde de
   la pantalla es de los disparadores de scroll más eficaces que hay —
   ves que hay algo, no ves qué es, y bajas. */
.hero{position:relative;z-index:1;height:calc(90vh - 78px);height:calc(90svh - 78px);min-height:560px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  /* ⚠️ EL RELLENO DE ARRIBA LLEVA UNA COMPENSACIÓN, Y NO ES UN NÚMERO
     AL AZAR. El héroe centra sus hijos, así que las CAJAS ya quedaban
     simétricas — medido: 46 px arriba y 46 abajo. Pero lo que se ve no
     son las cajas, es la TINTA, y la caja del monograma es cuadrada
     mientras el dibujo no la llena: sobra aire dentro. Medido sobre
     píxeles a 1440x900: 69 px de aire arriba contra 51 abajo. El ojo lo
     lee como que la banda empuja al nombre hacia arriba.
     El relleno va ABAJO: el aire que sobra está arriba, así que hay que
     subir el contenido. Con el centrado, 18 px de relleno abajo = 9 px
     de subida = 60 y 60. (Puesto arriba lo empeora — probado.)
     Va en `clamp` porque el aire sobrante es proporcional al tamaño del
     monograma, que a su vez depende de la anchura. */
  padding:var(--pad);padding-bottom:calc(var(--pad) + clamp(10px,1.25vw,18px));
  --h1:clamp(32px,5.2vw,68px)}

/* LA ÓPTICA · la caja que hace posible el «canto bajo» (Design, opción 06).
   Retícula, marca y grabado se centran contra ELLA y no contra el héroe, así
   que el nombre puede ir debajo en flujo sin taparla ni descolocarla.
   El tope de 580 es de Design; la marca ya no necesita el suyo del 86 %
   porque nunca llega a los cantos. */
.hero .optic{position:relative;width:clamp(300px,46vw,580px);aspect-ratio:1;flex:none;z-index:1}

/* 1 · Los 18 y los 6, por POSICIÓN: 6×4, y la última fila entera son los que
   faltan. Contorno siempre, nunca relleno — el argumento del producto es que
   esta cámara puede abrir sin enseñar una sola foto. */
.hero .roll{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(88vw,740px);z-index:2;clip-path:circle(1.5% at 50% 50%)}
.hero .grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(7px,1.1vw,13px)}
/* Disparados a .42 para que la marca respire. Los vacíos NO se tocan: son el
   eslabón débil y los primeros que desaparecen si se baja todo por igual.
   Suelo duro: por debajo de .35 la fila vacía deja de leerse y el rollo vuelve
   a ser decoración. Si la composición se siente cargada, se baja la MARCA
   (.19 → .14), no la retícula — se apaga la capa que decora, no la que
   informa. */
/* ⚠️ EL 20 % ESTÁ ELEGIDO, NO HEREDADO. Estaba en 42 % y la cuadrícula
   competía con el titular: no es que fuera muy brillante, es que va por
   DELANTE del texto, así que a plena intensidad cruzaba «WORTHWAIT
   CAMERA» y tapaba la frase en arco. Dennis comparó cinco versiones —con
   y sin cuadrícula, con y sin la frase— y se quedó con esta: la
   cuadrícula sigue estando, pero deja leer. */
.hero .cell{aspect-ratio:3/2;border:1px solid rgba(160,138,92,.20);border-radius:1px}
.hero .cell.left{border-color:rgba(247,245,238,.11)}

/* 3 · La marca, UNA sola capa y UNA sola opacidad: uves, aro y cuchillas
   juntas, ninguna mandando sobre otra.

   A SU COLOR Y SU BRILLO DE VERDAD (6 sep 2026). Estaba al 19 % y se leía como
   una marca de agua; ahora es el mismo dorado a plena opacidad que el logotipo
   del encabezado, que es de donde sale la referencia. Dejó de ser textura de
   fondo: al quitarse la frase de marca, el héroe son el nombre y ella. */
/* ⚠️ EL TAMAÑO SE DECLARA AUNQUE `inset:0` YA LO ESTIRE. En `style.css` —que se
   carga antes— hay un `.mark` global con `width:clamp(84px,18vw,112px)`, y
   basta con que aquí no se diga nada del ancho para que ese gane y la marca se
   quede en 112 px dentro de una caja de 404. */
.hero .mark{position:absolute;inset:0;width:100%;height:100%;
  color:var(--gold);opacity:1;pointer-events:none;z-index:3}
.hero .mark svg{width:100%;height:100%;display:block}
.hero .blades,.hero .ring{transform-box:view-box;transform-origin:50% 50%}

.hero .flash{position:absolute;inset:0;background:var(--cream);opacity:0;pointer-events:none;z-index:5}

/* 2 · El velo entra CON el texto: vive en .txt y se anima .txt completo, no
   solo sus hijos, así que no hay mancha oscura sobre nada durante la
   apertura. Su color sale de --zona-bg — la misma variable que pinta la
   sección — nunca de un hex a mano. */
/* Ya no es un velo sobre el dibujo —el nombre está DEBAJO, no encima—, así que
   el acolchado enorme que lo separaba de la marca sobra: ahora solo hace falta
   el hueco de la firma. */
/* ⚠️ EL MARGEN NO ES TODO EL HUECO. El dibujo de la marca no llega al borde
   de su caja: deja un 6,7 % vacío abajo — 20 px con la óptica a 300. Así que
   el hueco visible es el margen MÁS eso, y en un teléfono se leía como un
   abismo porque la marca ocupa el 80 % del ancho y el nombre son 16 px.
   Medido: 40 px de hueco en móvil contra 73 en escritorio. Proporcionalmente
   igual, visualmente no. Por eso el mínimo del clamp baja a 2. */
.hero .txt{position:relative;z-index:6;text-align:center;flex:none;
  margin-top:clamp(2px,2.6vw,34px);padding:0}
.hero .txt::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
/* EL NOMBRE FIRMA, NO TITULA. Opción 06 de Design, «canto bajo».
   ⚠️ SE PROBÓ GRANDE Y ENCIMA DE LA MARCA, Y NO FUNCIONA: el nombre se pierde
   sobre el dibujo y «CAMERA», que va en dorado, queda ilegible justo encima
   del aro dorado. Descartado por Dennis el 6 sep 2026 mirándolo publicado. No
   volver a subirlo de tamaño ni a montarlo sobre la marca.
   A plena opacidad igualmente: estuvo al 82 % y se veía apagado. */
.hero .wordmark{font-family:'Cabinet Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  color:var(--cream);letter-spacing:.22em;line-height:1;font-size:clamp(16px,2.1vw,26px);
  margin:0;opacity:1}
/* «CAMERA» sigue en la misma línea: debajo de la marca hay sitio de sobra a lo
   ancho, que es lo que faltaba cuando el nombre iba dentro del aro. */
.hero .wordmark em{font-style:normal;color:var(--gold);opacity:1}

/* 4 · La línea de datos, curvada y CONCÉNTRICA con el aro. SVG aparte pero
   con el mismo tamaño y viewBox que .mark a propósito: así el radio se mide
   en las unidades del logotipo y el arco queda paralelo de verdad. Radio 47,
   pegado al borde exterior del aro (37.8). Al bajarlo, el texto conserva su
   longitud, abarca más ángulo y sus extremos suben hacia el titular: por
   debajo de 44 estorban. */
/* El grabado no lleva recorte ni capas especiales, y la marca SÍ lleva tope
   de altura (86%): sin él se recorta 135px por lado en cualquier viewport de
   menos de ~908px de alto, y el logotipo cortado por los dos cantos deja de
   leerse como marca.
   Las dos cosas conviven porque la fuente del grabado es 2.3 —el valor de la
   referencia—, no 3.15: a 2.3 el texto mide 91.2 unidades de viewBox, barre
   111° del arco y sus extremos quedan por debajo del titular incluso con la
   marca encogida. Subir esa fuente es lo que reabre el solape y desencadena
   toda la cascada de parches (radios 60/66/72, clip-path, fórmulas con --h1).
   .arcsub comparte el tope con .mark a propósito: así el arco queda
   concéntrico con el aro en vez de aproximado. */
/* ⚠️ EL GRABADO PASÓ DE ADORNO A DATO, y por eso crece. Razonamiento de Design
   con la opción 06, y es correcto: al quitarse el titular, este arco es lo
   ÚNICO en toda la primera pantalla que dice qué hace el producto. De 2.3 a
   2.9 de cuerpo y de .62 a .85 de opacidad. Si alguien vuelve a bajarlo «por
   elegancia», la portada se queda sin decir nada.
   El aviso viejo de que a más de 2.3 los extremos estorban al titular YA NO
   APLICA: no hay titular, y el arco vive dentro de .optic con la marca.
   Aquí había además `opacity:.62 * 0.69) 0 0 0)`, que no es CSS válido y el
   navegador tiraba entero. */
.hero .arcsub{position:absolute;inset:0;color:var(--gold);pointer-events:none;z-index:7;opacity:.85}
.hero .arcsub svg{width:100%;height:100%;display:block;overflow:visible}
.hero .arcsub text{font-family:'DM Mono',ui-monospace,monospace;font-size:2.9px;
  letter-spacing:.56px;fill:currentColor;text-transform:uppercase}
/* La focal, en dorado pleno; el resto del arco, en crema tenue: como la focal
   destacada en el anillo de un lente (22 sep 2026). */
.hero .arcsub text{fill:rgba(247,245,238,.55)}
.hero .arcsub .focal{fill:var(--gold)}
/* El <h1> del arco no ocupa sitio: la frase la pinta el SVG. NO es texto
   oculto con display:none ni visibility (Google lo descartaría): es texto de
   1 px fuera del flujo, el mismo patrón que .skip, y sigue siendo legible por
   lectores de pantalla y seleccionable. */
.hero .h1-arco{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── La secuencia: una sola vez al cargar, ~2,4 s ─────────────────────────
   El reparto importa más que el total: toda la duración añadida está en el
   gesto de apertura y en la cola, nunca antes de que se pueda leer.
   Las cuchillas llevan una deceleración larga sin rebote — un diafragma real
   no rebota — y su curva es distinta a la del círculo a propósito: igualadas,
   el gesto parece un iris de cine antiguo.
   El flag de taller acepta las dos clases: la del archivo (.no-anim) y la que
   ya existía en el sitio (.no-hero-anim). */
@media (prefers-reduced-motion:no-preference){
  html:not(.no-anim):not(.no-hero-anim) .hero .blades{animation:hero-iris 880ms cubic-bezier(.12,.9,.15,1) 180ms both}
  html:not(.no-anim):not(.no-hero-anim) .hero .ring{animation:hero-ringup 1200ms cubic-bezier(.12,.9,.15,1) 180ms both}
  html:not(.no-anim):not(.no-hero-anim) .hero .roll{animation:hero-open 1000ms cubic-bezier(.22,.78,.24,1) 180ms both}
  html:not(.no-anim):not(.no-hero-anim) .hero .flash{animation:hero-pop 190ms linear 1010ms both}
  html:not(.no-anim):not(.no-hero-anim) .hero .txt{animation:hero-veil 420ms ease-out 1120ms both}
  html:not(.no-anim):not(.no-hero-anim) .hero .txt>*{animation:hero-rise 460ms cubic-bezier(.2,.7,.2,1) both}
  html:not(.no-anim):not(.no-hero-anim) .hero .txt>.wordmark{animation-delay:1140ms}
  html:not(.no-anim):not(.no-hero-anim) .hero .arcsub{animation:hero-fadein 820ms ease-out 1560ms both}
}
@keyframes hero-fadein{from{opacity:0}to{opacity:.85}}
@keyframes hero-iris{from{transform:rotate(-46deg) scale(.13)}to{transform:rotate(0) scale(1)}}
@keyframes hero-open{from{clip-path:circle(1.5% at 50% 50%)}to{clip-path:circle(82% at 50% 50%)}}
@keyframes hero-ringup{0%{opacity:.34}46%{opacity:1}100%{opacity:1}}
@keyframes hero-pop{0%{opacity:0}42%{opacity:.16}100%{opacity:0}}
@keyframes hero-veil{from{opacity:0}to{opacity:1}}
@keyframes hero-rise{from{transform:translateY(14px)}to{transform:translateY(0)}}

/* Estado final inmediato, sin movimiento. El clip-path va incluido: sin él,
   quien tenga el ajuste activo se queda mirando un aro cerrado para siempre. */
html.no-anim .hero .roll,html.no-hero-anim .hero .roll{clip-path:circle(82% at 50% 50%)}
@media (prefers-reduced-motion:reduce){
  .hero *{animation:none!important}
  .hero .roll{clip-path:circle(82% at 50% 50%)}
}
@media (max-width:640px){
  .hero .roll{width:min(92vw,420px)}
  .hero .grid{gap:6px}
  /* ⚠️ EL ACOLCHADO DE AQUÍ SE QUITÓ, Y NO ES UN OLVIDO.
     Metía 52,5 px por arriba en un teléfono de 375 —y NADA en escritorio—, así
     que el nombre se despegaba de la marca solo en móvil. Era coherente cuando
     el texto iba ENCIMA de la marca y este acolchado era el velo que lo
     separaba del dibujo; al pasar el nombre a firmar debajo (opción 06 de
     Design, 6 sep 2026) se quedó como espacio muerto.
     Lo cazó Dennis mirando el sitio en el teléfono, no una medición: en
     escritorio no existe. */
}

/* ══════════════════════════════════════════════════════════════════════════
   LAS CINCO SECCIONES · dirección gráfica
   Tres de las cinco mejoran quitando: el reloj de Blind Mode, el icono de
   persona de Yours alone y los círculos concéntricos de Full Immersion eran
   gráfica importada. Lo que las sustituye es material propio puesto a
   trabajar: la UI, la escala de exposición, el diafragma.
   Ninguna lleva animación — la secuencia es del hero y solo del hero.
   ══════════════════════════════════════════════════════════════════════════ */

/* 01 · FULL IMMERSION — el fantasma de la interfaz.
   La sección dice «one tap and everything else disappears». Dibujando la UI
   en contorno en las posiciones exactas donde iría, alrededor de un teléfono
   que ya no la tiene, la desaparición se ve: el visitante percibe el hueco. */
.ghostui{position:relative;padding:64px 46px 92px}
.gu{position:absolute;border:1px solid rgba(247,245,238,.09);border-radius:4px}
.gu-top{top:22px;left:24px;right:24px;height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 12px}
.gu-tab{bottom:24px;left:24px;right:24px;height:46px;display:flex;align-items:center;justify-content:space-around}
.gu i{display:block;width:15px;height:15px;border:1px solid rgba(247,245,238,.12);border-radius:3px}
.gu span{font-family:'DM Mono',ui-monospace,monospace;font-size:8.5px;letter-spacing:.14em;color:rgba(247,245,238,.10);text-transform:uppercase}
.gu-lbl{position:absolute;left:0;bottom:0;font-family:'DM Mono',ui-monospace,monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(160,138,92,.34)}

/* 02 · EXPOSURE — la escala del instrumento, ampliada ×4.
   La misma pieza que ya vive diminuta dentro del teléfono, convertida en
   gráfica ambiental. Mismo movimiento que el grabado del aro en el hero. */
.exscale{position:absolute;left:-8%;right:calc(340px + 96px);top:52%;height:78px;z-index:0;pointer-events:none}
.exscale .ticks{position:absolute;inset:0 0 auto;height:34px;background:repeating-linear-gradient(to right,rgba(247,245,238,.16) 0 1px,transparent 1px 34px)}
.exscale .base{position:absolute;left:0;right:0;top:34px;height:1px;background:rgba(247,245,238,.10)}
.exscale .mk{position:absolute;left:41%;top:8px;width:2px;height:52px;background:var(--gold);opacity:.5}
.exscale .mk::after{content:"±0";position:absolute;left:50%;top:56px;transform:translateX(-50%);font-family:'DM Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.1em;color:rgba(160,138,92,.5)}
.seccion .ancho{position:relative;z-index:2}
@media (max-width:880px){.exscale{display:none}}

/* 03 · BLIND MODE — el vacío es el tema.
   Sin teléfono y sin nada dentro del encuadre: es la única de las cinco donde
   el vacío ES el argumento. Una superficie oscura con el texto solo dice «sin
   previsualización» mejor que cualquier icono. */
.blind{position:relative;min-height:clamp(360px,42vw,470px);padding-bottom:140px;display:grid;grid-template-columns:minmax(0,1fr);align-content:center}
.corners{position:absolute;inset:clamp(18px,3vw,40px);pointer-events:none}
.corners b{position:absolute;width:clamp(40px,5vw,64px);height:clamp(40px,5vw,64px);border:1px solid rgba(247,245,238,.13)}
.corners b:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.corners b:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.corners b:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.corners b:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
.blind > .ancho{width:100%;max-width:none;margin-left:0;margin-right:0;justify-self:start}
.blind > .ancho > .funcion{display:block}
.blind > .ancho > .funcion > .funcion-texto{max-width:46ch;padding-left:clamp(18px,4vw,64px);position:relative;z-index:2}

/* 04 · YOURS ALONE — el diafragma cerrado.
   El icono de persona era el glifo de «cuenta de usuario» que usa todo SaaS:
   en la sección cuyo argumento es que NO hay cuenta, enseñaba el icono de la
   cuenta. Ahora son las cuchillas del hero contraídas, estáticas — y cierra
   el arco: arriba el obturador se abre y deja entrar, aquí se cierra. */
.shut{width:clamp(96px,11vw,132px);height:clamp(96px,11vw,132px);margin:0 auto clamp(30px,4vw,44px);color:var(--gold);opacity:.85}
.shut svg{width:100%;height:100%;display:block}
.shut .blades{transform-box:view-box;transform-origin:50% 50%;transform:rotate(-46deg) scale(.13)}

/* 05 · SEE IT DEVELOP — comparación controlada.
   En una comparación la única variable puede ser la que comparas: distinto
   tamaño cambia el contraste percibido y la saturación aparente. Mismo
   tamaño, misma rotación (ninguna), mismo espaciado, y etiquetadas — antes se
   enseñaban cuatro imágenes sin nombrar ninguna. */
.filmgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.2vw,30px);margin-top:clamp(32px,4vw,52px)}
@media (max-width:820px){.filmgrid{grid-template-columns:repeat(2,1fr)}}
.filmcard{margin:0}
.filmcard .frame{aspect-ratio:2/3;border-radius:5px;overflow:hidden;border:1px solid rgba(247,245,238,.09);background:#0b0b09}
.filmcard .frame img{width:100%;height:100%;object-fit:cover;display:block}
.filmcard figcaption{margin-top:12px;font-family:'DM Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,245,238,.38)}
.filmcard figcaption b{color:var(--gold);font-weight:400;margin-right:8px}

/* Padding lateral duplicado. Las tres secciones de función viven dentro de
   .features (anidación previa), así que el padding de .features se sumaba al
   del .ancho de cada una: 129 px de inset extra, y con grid 1fr 340px la
   columna de texto caía a 220 px — 21 caracteres por línea en Exposure.
   Se anula el segundo, no el primero: .features conserva su overflow:hidden,
   que es lo que recorta la cifra fantasma por el canto izquierdo. Desanidar
   habría cambiado esa referencia y perdido el sangrado. */
.features > .seccion > .ancho{padding-left:0;padding-right:0}

/* .invertida espeja el LADO, no la medida del texto. Con 1fr 340px heredado
   de .funcion y el order:2 del texto, el texto aterrizaba en la columna fija
   de 340px: 9px más estrecho que en las secciones normales. Una columna de
   lectura que cambia de ancho según el lado es un accidente, no un sistema. */
@media (min-width:820px){.funcion.invertida{grid-template-columns:340px minmax(0,1fr)}}


@media (max-height:690px){.hero .arcsub{display:none}}

/* Aquí vivía un bloque que congelaba la sección de Exposure para TODO EL
   MUNDO: dejaba el dedo parado en un fotograma fijo y apagaba el fundido de
   las siete fotos, dejando visible solo la segunda. Venía de la ronda en que
   se decidió que ninguna de las cinco secciones llevara movimiento.

   Aquí esa regla no se sostiene: en las demás secciones el movimiento es
   adorno, pero en esta el gesto ES la explicación del control. Sin él se ve un
   dedo quieto que no cuenta qué hace. Quitado el 5 de septiembre de 2026.

   Y no hacía falta para nada: el bloque de prefers-reduced-motion de arriba
   (~línea 305) ya apaga exactamente estas cuatro animaciones para quien pide
   menos movimiento, que es donde esa decisión sí corresponde. */

@media (prefers-reduced-motion: reduce){
  .fs-row{animation:none!important;transform:translateX(0)!important}
}

/* ── Volver arriba ──────────────────────────────────────────────────────────
   Sin una línea de JavaScript, porque el sitio promete que no te sigue y eso
   tiene que ser verdad hasta en un botón.

   CÓMO APARECE SIN SCRIPTS. Es un elemento pegajoso anclado POR ARRIBA a la
   altura del borde inferior (`top:calc(100vh - 72px)`). Mientras su sitio
   natural queda por debajo de esa línea, el botón está fuera de pantalla; en
   cuanto el scroll lo alcanza, se clava ahí y se queda hasta el final. Es el
   mismo mecanismo que una cabecera pegajosa, del revés.

   ⚠️ ANCLADO POR ARRIBA, NUNCA POR ABAJO. Con `bottom` hace lo contrario: se ve
   en la portada y desaparece al bajar. Probado, y cuesta un rato entender por
   qué, así que queda escrito.

   ⚠️ LOS DOS MÁRGENES SE CANCELAN A PROPÓSITO. El de arriba lo empuja 26vh para
   que no asome en la portada —el héroe mide algo menos de una pantalla—; el
   negativo de abajo devuelve ese espacio. Medido: la página no cambia ni un
   píxel de alto. Si se quita uno de los dos, aparece un hueco enorme.

   Y depende de `overflow-x:clip` de más arriba. Con `hidden` no se pega. */
.subir{position:sticky;top:calc(100vh - 72px);height:0;margin:26vh 0 -26vh;
  z-index:40;pointer-events:none}
.subir a{position:absolute;right:var(--pad,20px);width:44px;height:44px;
  display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(160,138,92,.55);background:rgba(20,20,18,.72);
  backdrop-filter:blur(6px);pointer-events:auto;
  transition:border-color .2s ease,background .2s ease}
.subir a:hover{border-color:rgba(160,138,92,.95);background:rgba(20,20,18,.9)}
.subir svg{width:16px;height:16px;display:block}
.subir path{stroke:#a08a5c;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

/* Quien pide menos movimiento no quiere un salto de diez pantallas: el
   `scroll-behavior:smooth` de arriba se apaga solo para esa persona. */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ── El cierre ──────────────────────────────────────────────────────────────
   Va ENTRE la privacidad y los dos QR, y ese sitio es el argumento: antes, los
   códigos aparecían sin que nada los presentara, como un pie de página que se
   coló. Ahora la página los anuncia y ellos rematan.

   Hereda las medidas de `.privacy-close` a propósito —mismo ancho de lectura,
   misma escala de titular— para que las dos últimas secciones se lean como una
   sola despedida y no como dos finales seguidos. */
.cierre{padding:120px var(--pad) 0;text-align:center}
.cierre h2{font:500 clamp(36px,5vw,60px)/1.18 'Cabinet Grotesk',sans-serif;
  color:var(--cream);max-width:640px;margin:0 auto 24px}
.cierre p{font:300 17px/1.65 'Switzer',sans-serif;color:rgba(247,245,238,.5);
  max-width:520px;margin:0 auto}
.cierre+.soon2{margin-top:56px}

/* ── Las dos tiendas ────────────────────────────────────────────────────────
   Dos fichas, una por tienda, con su código QR DE VERDAD (21 sep 2026). Antes
   hubo aquí dos gráficos con forma de QR que no llevaban a ninguna parte y se
   quitaron: en una página cuyo argumento es no fingir nada, eran la única nota
   falsa. Estos se leen —comprobado— y apuntan a `/ios` y `/android`, que
   `netlify.toml` redirige. En teléfono el código se esconde y queda el enlace. */
.descarga{display:grid;grid-template-columns:repeat(2,minmax(0,360px));justify-content:center;
  gap:18px;padding:0 var(--pad);margin:56px 0 72px}
.ficha{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:start;
  padding:24px 24px 24px 28px;border:1px solid rgba(160,138,92,.32);border-radius:14px;
  background:rgba(247,245,238,.025);text-decoration:none;text-align:left;
  transition:border-color .2s,background .2s}
a.ficha:hover,a.ficha:focus-visible{border-color:rgba(160,138,92,.75);background:rgba(160,138,92,.06)}
.ficha .k{font:400 10px/1 'DM Mono',ui-monospace,monospace;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(247,245,238,.4);margin:0}
.ficha .v{font:700 25px/1.1 'Cabinet Grotesk',sans-serif;color:var(--cream);margin:9px 0 0}
.ficha .d{font:400 11.5px/1.4 'DM Mono',ui-monospace,monospace;color:var(--gold);
  letter-spacing:.05em;margin:9px 0 0}
.ficha .ir{display:inline-block;font:500 13.5px/1.55 'Switzer',sans-serif;color:var(--cream);
  margin:16px 0 0;text-decoration:underline;text-decoration-color:rgba(160,138,92,.7);
  text-decoration-thickness:1px;text-underline-offset:5px}
.ficha .qr{align-self:center;width:112px;height:112px;padding:9px;border-radius:9px;background:var(--cream);
  color:#1e1e1a;box-sizing:border-box}
.ficha .qr svg{display:block;width:100%;height:100%}
@media (max-width:760px){
  .descarga{grid-template-columns:minmax(0,420px)}
  .ficha{grid-template-columns:1fr}
  .ficha .qr{display:none}
}

/* ── El remate ──────────────────────────────────────────────────────────────
   Lo último antes del pie. Hasta ahora la página acababa en el párrafo sobre
   analítica anónima: información necesaria y bien escrita, pero letra pequeña,
   y drenaba la emoción justo donde hacía falta. Ahora acaba en lo que promete.

   ⚠️ LA FRASE ES LA MISMA DEL HÉROE, Y ESO ES EL MECANISMO, NO UN DESCUIDO.
   Arriba es una declaración de intenciones; aquí, cuando ya se entendió que el
   producto va de esperar, la misma frase dice CUÁNTO. Por eso la fecha va
   debajo. Para que se lea como llegada y no como eco, va a la escala MÁS GRANDE
   del sitio —por encima del titular del héroe— sobre la zona más oscura, que
   hace de suelo. A la misma escala sería una repetición y restaría.

   La cita que había a mitad de página se quitó: con esta, la frase queda al
   principio y al final, y en medio no hace falta. */
.remate{background:var(--z2,#0d0c0a);text-align:center;
  padding:clamp(90px,13vw,180px) var(--pad)}
.remate .frase{font:600 clamp(38px,6.4vw,86px)/1.02 'Cabinet Grotesk',sans-serif;
  letter-spacing:-.038em;color:var(--cream);max-width:13ch;margin:0 auto;
  text-wrap:balance}
.remate .filete{width:34px;height:1px;background:var(--gold);opacity:.6;
  margin:clamp(30px,4vw,46px) auto clamp(20px,2.4vw,28px)}
.remate .fecha{font:400 clamp(12px,1.25vw,14px)/1 'DM Mono',ui-monospace,monospace;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0}

/* La banda de portada. A sangre, sin margen y sin radio: es una ventana
   a la calle, no una tarjeta. El alto en `min()` para que en un móvil no
   se coma la pantalla entera. */
.portada-banda{margin:0}
/* LA BANDA · a sangre, corte DURO arriba y abajo, y SIN RECORTAR NUNCA.
   Nada de degradados ni velos: un borde duro dice «esto es una
   fotografía». Sin filtros ni graduación de color — la marca promete
   «nothing invented», y eso incluye no retocar nuestras propias fotos.

   ⚠️ NI `cover` NI `max-height`. LA FOTO SE VE ENTERA SIEMPRE.
   Hubo tres intentos antes y los tres recortaban:
     · `52vh` ataba el alto a la ALTURA de la ventana: en pantalla ancha
       ampliaba hasta cortar la cabeza.
     · atado a la anchura pero con tope: volvía a cortar por encima de
       1512 px.
     · `max(38vh,23vw)` con `cover`: el cálculo decía que la figura
       cabía, y en un 16" real le cortaba la cabeza igual — la medida de
       la figura estaba mal hecha (medí la ropa roja, no la persona).
   La regla que queda es la única que no depende de acertar una medida:
   `height:auto`, la imagen conserva su proporción y no se recorta a
   ninguna anchura.

   El archivo ya viene cortado del 5 % al 82 % del original, que es la
   franja que Dennis pidió: aire sobre el dintel de la puerta (que está
   al 13 %) y la línea blanca del pavimento entera (va del 62 al 80 %).

   ⚠️ CONSECUENCIA, Y ES DELIBERADA: la banda es alta. En un portátil de
   16" ocupa unos 890 px de 1000. No se puede tener «que se vea todo» y
   «que la banda sea de 38vh» a la vez: son la misma decisión mirada
   desde dos lados. Se eligió que se vea todo. */
.portada-banda{margin:0}
.portada-banda img{display:block;width:100%;height:auto}

/* ── LA FILA DE CIFRAS, EN 2×2 CUANDO NO CABEN LAS CUATRO ─────────────────
   Con tres cifras la fila cabía en casi todo. Con la cuarta —el 35 mm, que
   entró el 9 de septiembre de 2026— se pliega sola, y se plegaba MAL: a
   390 px quedaba «35 · 24 · 24» arriba y «0» solo debajo. El descenso
   dejaba de leerse de izquierda a derecha y de arriba abajo, que es lo
   único que hace que esos cuatro números cuenten algo.

   Con la rejilla quedan 35 / 24 arriba y 24 / 0 abajo, en su orden. Las
   rayas separadoras se esconden: en dos filas ya no separan nada, unen mal.

   ⚠️ LOS `!important` NO SON PEREZA. El `div.row` trae `gap:0px` y
   `justify-content` escritos EN LÍNEA desde el HTML de Design, y un estilo
   en línea gana a la hoja. Tocar ese atributo sería editar su maquetación;
   esto lo deja intacto y solo cambia el comportamiento donde hace falta. */
@media (max-width: 900px) {
  .stats .row {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 6vw, 56px) 0 !important;
    justify-items: center;
  }
  .stats .dash { display: none }
}

/* ── SEO técnico, 21 sep 2026 · NADA de esto se ve ──────────────────────────
   `<header class="sem">` y `<main class="sem">` existen para los lectores de pantalla y para Google; en
   la maquetación no cuentan: `display:contents` hace que sus hijos se coloquen
   como si el envoltorio no estuviera (la nav y las secciones siguen siendo, a
   efectos de CSS, hijas directas de <body>). `<picture>` igual: el <img> de
   dentro se comporta como si fuera hijo directo de su caja.
   El enlace de salto solo aparece con el foco del teclado. */
/* ⚠️ POR CLASE, no por etiqueta: en el FAQ y en privacidad el <main class="docwrap"> SÍ es una caja con medidas. */
.sem{display:contents}
picture{display:contents}
.skip{position:absolute;left:-999px;top:12px;z-index:1000;padding:10px 16px;border-radius:8px;
  background:var(--cream);color:#1e1e1a;font:500 14px/1 'Switzer',sans-serif;text-decoration:none}
.skip:focus{left:1rem}