/* ═══════════════════════════════════════════════════════════════
   Diligencia · página de producto · v2 (v1: la sesión de Telegram de Up dejó la portada y el HTML del tótem;
   landing-pro completó los siete capítulos el 3-oct-2026. v2: las pantallas son capturas reales de la app, no maquetas.)
   Hermana-molde: productos/pliego y productos/rubria. Arquitectura de tres capas (manual-de-escena §1):
   1 · BASE sin JS: todo apilado y RESUELTO.  2 · html.js.  3 · un @media con movimiento.
   Canon: vertical Flow (navy, navy matiz, claros). Lo que ENCIENDE en la página es el morado de la familia del Estado,
   tomado de diligencia/src/styles/tokens.css:35-37 (aprobado por Francisco con Do el 29-sep-2026; el canon todavía no lo
   registra: candidato P2 del guion), y SOLO en el punto del logo del cierre. El morado que se ve dentro de las capturas
   es el de la app misma (el llamado, el «Es casi su turno»): la página no lo pinta, lo muestra.
   Las capturas salen de `npm run capturas:producto` en el repo de Diligencia (docs/capturas-app/producto/), sobre la
   organización de demostración «Municipalidad Demo» · «Sede Demo»; su webp con srcset vive en pagina/img/capturas/.
   ═══════════════════════════════════════════════════════════════ */

/* Fuentes alojadas junto a la página (copiadas de sistema/fuentes/, OFL al lado): la página se sirve por reescritura
   desde el dominio de cada producto, cuya CSP admite solo recursos propios (diligencia/next.config.ts: font-src y
   style-src 'self'). Con Google Fonts, allí caería a Georgia sin avisar. */
@font-face{ font-family:"Cormorant Garamond"; font-style:normal; font-weight:300 600; font-display:swap; src:url("fuentes/cormorant-garamond-latin-var.woff2") format("woff2") }
@font-face{ font-family:"Cormorant Garamond"; font-style:italic; font-weight:300 500; font-display:swap; src:url("fuentes/cormorant-garamond-italica-latin-var.woff2") format("woff2") }
@font-face{ font-family:"Archivo"; font-style:normal; font-weight:400 700; font-display:swap; src:url("fuentes/archivo-latin-var.woff2") format("woff2") }
@font-face{ font-family:"DM Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("fuentes/dm-mono-latin-400.woff2") format("woff2") }
@font-face{ font-family:"DM Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("fuentes/dm-mono-latin-500.woff2") format("woff2") }

:root{
  --navy:#132649; --navy-m:#1D396D; --petrol:#1F5B57; --teal:#349891;
  --off:#EDEAE3; --crema-claro:#F0E4D2; --lino:#F2F0EB; --superficie:#F7F6F2;
  /* secundaria sobre navy: la de Flow sobre off-white cae a 2,5:1 aquí; esta da 7,4:1 (canon-visual §6) */
  --sec:#A9BACD;
  --tenue:rgba(237,234,227,.55);
  --hair:rgba(237,234,227,.12);
  --borde:rgba(237,234,227,.22);

  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:Archivo,system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,monospace;

  --nav-h:64px;
  --col:min(1200px, 92vw);
  --lado:max(4vw, calc((100vw - 1200px)/2));
  --franja:min(54svh, 32rem);
}

*,*::before,*::after{ box-sizing:border-box }

/* scroll-behavior:auto — `smooth` le pelea al scrub y hace mentir a toda medición */
html{ scroll-behavior:auto; -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--navy);
  color:var(--off);
  font-family:var(--sans);
  font-size:clamp(.95rem, min(1.12vw, 1.5vh), 1.06rem);
  line-height:1.62;
  overflow-x:hidden;
}
img,svg{ max-width:100% }
img{ height:auto }
a{ color:inherit }
p,figure{ margin:0 }
ol,ul{ margin:0; padding:0; list-style:none }

.saltar{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--off); color:var(--navy); padding:.7rem 1.1rem; font-family:var(--mono); font-size:.78rem }
.saltar:focus{ left:.6rem; top:.6rem }
:focus-visible{ outline:2px solid var(--teal); outline-offset:3px }

/* ── Nav ── */
.nav{
  position:fixed; inset:0 0 auto; z-index:100; height:var(--nav-h);
  display:flex; align-items:center; gap:1.5rem;
  padding:0 var(--lado);
  background:rgba(19,38,73,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair);
}
.nav__marca{ text-decoration:none; display:flex; align-items:center; gap:.8rem; white-space:nowrap; min-height:44px }
/* el logo oficial, en su archivo (no se redibuja). height:auto no basta: se fija el alto y el ancho sigue */
.nav__logo{ display:block; height:26px; width:auto }
.nav__casa{ display:none; font:400 .66rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--tenue) }
.nav__links{ display:none; gap:1.6rem; margin-left:auto }
.nav__links a{ font-size:.9rem; text-decoration:none; color:var(--sec) }
.nav__cta{ margin-left:auto; font:500 .85rem/1 var(--sans); text-decoration:none; padding:.6rem 1rem; min-height:44px; display:inline-flex; align-items:center; border-radius:999px; border:1px solid var(--borde) }
@media (hover:hover){
  .nav__links a:hover{ color:var(--off) }
  .nav__cta:hover{ border-color:var(--off) }
}

/* ── Voces: UNA escala por rol en toda la página (lecciones: los dos errores tipográficos) ── */
.rotulo{ font:500 .74rem/1.4 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--sec); margin-bottom:1rem }
h1,h2{ font-family:var(--serif); font-weight:300; letter-spacing:-.015em; margin:0; text-wrap:balance }
h1 em,h2 em{ font-style:italic; color:var(--crema-claro) }
/* mide también por vh (ley 1): un portátil bajo no revienta el pin */
h1{ font-size:clamp(2.5rem, min(5.2vw, 8vh), 4.6rem); line-height:1.02 }
h2{ font-size:clamp(2.1rem, min(4vw, 6.4vh), 3.6rem); line-height:1.05 }
/* la línea suelta bajo un título: serif, una sola talla */
.linea{ font:italic 400 clamp(1.25rem, min(1.9vw, 3vh), 1.6rem)/1.3 var(--serif); color:var(--crema-claro); margin-top:1.1rem; max-width:34rem }
.bajada{ color:var(--sec); max-width:34rem; margin-top:1.2rem; font-size:1.06em }
.nota{ margin-top:1.2rem; padding-left:.9rem; border-left:2px solid var(--hair); color:var(--sec); font-size:.95em; max-width:34rem }
.acciones{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.8rem }

.btn{ display:inline-flex; align-items:center; min-height:44px; padding:.8rem 1.4rem; border-radius:999px; font:600 .95rem/1 var(--sans); text-decoration:none; transition:transform .18s, background .18s, border-color .18s }
/* la luz enciende, no rellena: sobre navy el relleno es el claro y la tinta el navy (canon-visual §3) */
.btn--lleno{ background:var(--off); color:var(--navy) }
.btn--linea{ border:1px solid var(--borde); color:var(--off) }
@media (hover:hover){
  .btn--lleno:hover{ background:#fff; transform:translateY(-1px) }
  .btn--linea:hover{ border-color:var(--off) }
}

/* ═══════════ Capítulos · capa BASE (apilado, resuelto) ═══════════ */
.cap{ position:relative }
/* Ley 2: el riel por fuera, el sticky por dentro. `position` del pin se declara SOLO aquí
   y dentro del @media de movimiento (lecciones: una regla posterior le gana al pin). */
.cap__pin{ position:static; width:var(--col); margin:0 auto; padding:clamp(4rem, 10vh, 6rem) 0 }

/* ── Escenas a sangre: cada pantalla lleva foto (CLAUDE.md de web), en clave baja, con velo navy ── */
.cap--sangre .cap__pin{ width:auto; padding-left:var(--lado); padding-right:var(--lado) }
.cap--sangre{ overflow:clip }   /* clip, nunca hidden: hidden vuelve a la sección contenedor de scroll y mata el pin */
.escena__foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0 }
/* ley 6: el encuadre se decide por escena. Valores X del recorte vertical que fija Iris para cada foto
   (herramientas/landing-pro/originales-iris/PROCEDENCIA.md, tabla «Las 14 fotos»); el eje Y no importa: 50 %. */
.escena__foto--portada{ object-position:82% 50% }   /* la sala llena */
.escena__foto--totem{ object-position:76% 50% }     /* la mujer frente al tótem */
.escena__foto--ticket{ object-position:94% 50% }    /* el hombre en la banca con el teléfono */
.escena__foto--llamado{ object-position:79% 50% }   /* la pantalla y la gente que levanta la cabeza */
.escena__foto--modulo{ object-position:89% 50% }    /* la funcionaria en su módulo */
.escena__foto--mandos{ object-position:94% 50% }    /* la jefa con el portátil */
.escena__foto--cierre{ object-position:76% 50% }    /* la oficina en calma */
.escena__velo{ position:absolute; inset:0; z-index:0; background:linear-gradient(180deg, rgba(19,38,73,.5), rgba(19,38,73,.62) 40%, rgba(19,38,73,.94) 78%) }
.cap--sangre .cap__pin > :not(.escena__foto):not(.escena__velo){ position:relative; z-index:1 }

/* ── Capítulos con objeto de escena: en vertical, la foto es una franja arriba y el objeto va sobre navy ── */
.cap--objeto .escena__foto, .cap--objeto .escena__velo{ bottom:auto; height:var(--franja) }
.cap--objeto .escena__velo{ background:linear-gradient(180deg, rgba(19,38,73,.35) 0%, rgba(19,38,73,.55) 50%, var(--navy) 100%) }
.objeto__pin{ display:grid; grid-template-columns:minmax(0,1fr); gap:2.4rem; padding-top:calc(var(--franja) - 7rem) }
.equipos{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end; gap:1.4rem }

/* ── 1 · Portada ── */
.portada__pin{ min-height:72svh; display:grid; align-content:end; padding-top:calc(var(--nav-h) + 30svh) }
.portada__cuerpo{ max-width:40rem }
/* Estado por defecto: --p no está definido → el cuerpo entero visible. */
.portada__se-va{ opacity:calc(1 - var(--p, 0) * 1.6) }


/* ── Las capturas: una pila de cuadros por pantalla (pagina/img/capturas/, scripts/capturas-producto.ts del repo
   de Diligencia). Sin efecto (sin JS, sin pin, teléfono): se ve solo el cuadro --base, el estado resuelto, y los otros
   no se descargan (display:none + loading=lazy). Con pin, el JS turna los cuadros con .esta (capa 3). ── */
.pila{ position:relative; overflow:hidden }
.pila__cuadro{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none }
.pila__cuadro--base{ display:block }
.pila__cuadro img{ display:block; width:100%; height:100%; object-fit:cover }
/* los momentos de una pila, con nombre: solo cuando se turnan (capa 3) */
.pasos{ display:none }

/* ── 2 · El tótem: ZeroQ de 15", pantalla 4:3 horizontal, con la impresora del ticket abajo ── */
.totem{ --w:min(30rem, 88vw); width:var(--w); display:grid; justify-items:center }
.totem__cabeza{ width:100%; padding:calc(var(--w) * .035); background:linear-gradient(180deg, #F4F2EE, #DEDAD2); border-radius:calc(var(--w) * .04) calc(var(--w) * .04) 8px 8px;
  box-shadow:0 30px 70px rgba(0,0,0,.4), inset 0 0 0 1px rgba(19,38,73,.12) }
.totem__pantalla{ aspect-ratio:4/3; border-radius:4px; background:#EFE4D3; box-shadow:0 0 0 1px rgba(19,38,73,.18) }
.totem__ranura{ height:calc(var(--w) * .016); width:40%; margin:calc(var(--w) * .03) auto 0; background:#1b1f2a; border-radius:99px }
.totem__pie{ width:56%; background:linear-gradient(180deg, #DEDAD2, #CFCAC0); padding:0 0 calc(var(--w) * .035); display:grid; justify-items:center }
/* el papel sale de la ranura: el rollo recorta arriba y el ticket baja con --q (capa 3) */
.ticket-rollo{ width:64%; overflow:clip }
/* el ticket de 80 mm impreso (Ticket80mm.tsx), capturado tal cual sale */
.ticket{ display:block; width:100%; height:auto; box-shadow:0 6px 14px rgba(0,0,0,.18) }
.totem__base{ width:72%; height:calc(var(--w) * .03); background:#B9B3A8; border-radius:4px 4px 0 0 }
/* el cartel QR de la oficina, en su hoja carta */
.cartel{ width:min(13rem, 62vw); align-self:center }
.cartel img{ display:block; width:100%; height:auto; border-radius:4px; box-shadow:0 24px 50px rgba(0,0,0,.35) }

/* ── 3 y 4 · El celular: un chasis medido por su ancho (--fw); la pantalla es la captura a 390×844 ── */
.fono{ --fw:min(17rem, 70vw); width:var(--fw); padding:calc(var(--fw) * .045); background:#0E1220; border-radius:calc(var(--fw) * .15);
  box-shadow:0 30px 70px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08) }
.fono__pantalla{ aspect-ratio:390/844; border-radius:calc(var(--fw) * .11); background:#ECE9E2 }
.fono--chico{ --fw:min(11rem, 46vw) }

/* ── 4 · La pantalla de la sala: TV 16:9 a 1920×1080 ── */
.equipos--llamado{ position:relative; align-items:flex-end }
.sala{ width:min(100%, 40rem) }
.sala__tv{ background:#0B0F1A; padding:1.1%; border-radius:8px; box-shadow:0 30px 70px rgba(0,0,0,.45) }
.sala__pantalla{ aspect-ratio:16/9; border-radius:2px; background:#132649 }

/* ── 5 y 6 · El panel, en el computador de la oficina (1440×900). En el teléfono, el recorte de la misma captura
   (el cuadro de trabajo, sin el menú) para que se lea; en el escritorio, la pantalla entera en un portátil ── */
.pc{ width:100% }
.pc__marco{ background:#0E1220; padding:.4rem; border-radius:8px; box-shadow:0 30px 70px rgba(0,0,0,.4) }
.pc__pantalla{ border-radius:4px; background:#F1EFEA }
.pc--modulo .pc__pantalla{ aspect-ratio:812/594 }
.pc--mandos .pc__pantalla{ aspect-ratio:1148/624 }
.pc__base{ display:none }

/* ── 7 · Cierre ── */
.cierre__pin{ display:grid; grid-template-columns:minmax(0,1fr); gap:2.4rem; align-content:end; min-height:72svh; padding-top:calc(var(--nav-h) + 6rem); padding-bottom:0 }
.cierre__cuerpo{ max-width:44rem }
.cierre__logo{ width:clamp(8rem, min(16vw, 22vh), 12rem); margin-bottom:1.4rem }
.cierre__logo svg{ display:block; width:100%; height:auto; overflow:visible }
/* el punto del turno del logo (el círculo del archivo oficial, ya en el claro de la familia): se enciende */
.cierre__logo circle{ filter:drop-shadow(0 0 5px rgba(149,97,181,.9)) }

/* ── Pie (montado dentro del cuadro del cierre, manual §4.13) ── */
.pie{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.4rem; padding:1.4rem 0 1.6rem; border-top:1px solid var(--hair) }
.pie canvas{ width:150px; height:46px }
.pie__credito{ font:500 .7rem/1.4 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--sec); text-decoration:none; min-height:24px; display:inline-flex; align-items:center }
@media (hover:hover){ .pie__credito:hover{ color:var(--off) } }


/* ═══════════ Ley 3 · UN solo breakpoint ═══════════
   Bloque A — solo layout de ancho: no depende de movimiento. */
@media (min-width:1025px){
  .nav__links{ display:flex }
  .nav__casa{ display:inline }
  .nav__cta{ margin-left:0 }
  .escena__velo{ background:
      linear-gradient(90deg, rgba(19,38,73,.95) 0%, rgba(19,38,73,.86) 40%, rgba(19,38,73,.5) 62%, rgba(19,38,73,.2) 82%, rgba(19,38,73,.15) 100%),
      linear-gradient(0deg, rgba(19,38,73,.55), transparent 35%) }
  .portada__pin{ min-height:100dvh; align-content:center; padding-top:calc(var(--nav-h) + 2rem); padding-bottom:3rem }

  .cap--objeto .escena__foto, .cap--objeto .escena__velo{ bottom:0; height:100% }
  .cap--objeto .escena__velo{ background:
      linear-gradient(90deg, rgba(19,38,73,.95) 0%, rgba(19,38,73,.88) 40%, rgba(19,38,73,.64) 62%, rgba(19,38,73,.5) 100%),
      linear-gradient(0deg, rgba(19,38,73,.6), transparent 45%) }
  .objeto__pin{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:center; gap:4rem; padding-top:clamp(5rem, 12vh, 7rem) }
  /* el panel es una pantalla de computador: necesita más ancho que un teléfono para leerse */
  .cap--modulo .objeto__pin, .cap--mandos .objeto__pin{ grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr); gap:3rem }
  /* la sala y el teléfono, lado a lado: la TV necesita casi el mismo ancho que el panel para que su lista se lea */
  .cap--llamado .objeto__pin{ grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:3rem }

  /* el tótem con el ticket afuera cabe en el pin a 1440×720 (cabeza ≈ .82 --w, ticket ≈ .68 --w) */
  .totem{ --w:min(26rem, 46vh) }
  .cartel{ width:min(11rem, 22vh) }
  .fono{ --fw:min(17rem, 33vh) }
  .fono--chico{ --fw:min(10rem, 21vh); position:absolute; right:-1rem; bottom:-2.5rem }
  /* la TV deja sitio al teléfono: montado encima tapaba «Últimos llamados» */
  .equipos--llamado{ justify-content:flex-start; padding-bottom:2.5rem; padding-right:3rem }
  .sala{ width:calc(100% - 8rem) }

  /* el portátil: la pantalla entera a 16:10 y la base más ancha que la tapa */
  .pc__marco{ padding:1.4% 1.4% 2%; border-radius:14px 14px 4px 4px }
  .pc--modulo .pc__pantalla, .pc--mandos .pc__pantalla{ aspect-ratio:16/10 }
  .pc__base{ display:block; width:108%; margin-left:-4%; height:.8rem; background:linear-gradient(180deg, #D6D1C8, #A9A49A); border-radius:0 0 14px 14px }

  .cierre__pin{ min-height:100dvh; align-content:end; padding-top:calc(var(--nav-h) + 4rem) }
}

/* Bloque B — layout + movimiento. El pin exige 44rem de alto (Restó360): por debajo, apilado. */
@media (min-width:1025px) and (min-height:44rem) and (prefers-reduced-motion:no-preference){
  /* medida con piloto: la nav mide 64px; el pin la descuenta (ley 1 + dos stickies) */
  .cap--riel .cap__pin{ position:sticky; top:var(--nav-h); height:calc(100dvh - var(--nav-h)) }
  /* Todos los capítulos frenan a la misma altura, también el cierre (guion V1: 100dvh + 90vh) */
  .cap--riel{ height:calc(100dvh + 90vh) }
  .portada__pin{ min-height:0; padding-top:0; padding-bottom:0 }
  .objeto__pin{ padding-top:0; padding-bottom:0; align-content:center }
  /* la sala se aclara mientras el cuerpo se va: lo que pesaba queda atrás */
  .cap--portada .escena__velo{ opacity:calc(1 - var(--p, 0) * .45) }

  /* 2 a 6 · las capturas se turnan en su pantalla (.pila--narra y .esta las pone el JS) */
  .pila--narra .pila__cuadro{ display:block; opacity:0; transition:opacity .35s }
  .pila--narra .pila__cuadro.esta{ opacity:1 }
  .pasos--narra{ display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.2rem; margin-top:1.1rem;
    font:500 .72rem/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--tenue) }
  .pasos--narra li{ transition:color .3s }
  .pasos--narra li.esta{ color:var(--off) }

  /* 2 · el ticket baja de la ranura (--q de 0 a 1) */
  .totem--narra .ticket{ transform:translateY(calc((1 - var(--q, 1)) * -101%)) }

  /* 7 · el logo entra y su punto se enciende al final (--f de 0 a 1) */
  .cierre__pin{ min-height:0; padding-top:0; padding-bottom:0; align-content:stretch; grid-template-rows:minmax(0,1fr) auto }
  .cierre__cuerpo{ align-self:center }
  .cierre__logo svg{ opacity:clamp(.15, calc(var(--f, 1) * 2.5), 1) }
  .cierre__logo circle{ opacity:clamp(0, calc((var(--f, 1) - .6) / .3), 1); filter:drop-shadow(0 0 calc(var(--f, 1) * 7px) rgba(149,97,181,.95)) }
}