/* ============================================================
   SCROLL — los 15 bloques del argumento.
   Solo lo carga index_v1.2.html.
   ============================================================ */

/* el presupuesto 70/20/10 se sostiene desde la banda, no sección por sección */
.pad{padding-block:clamp(112px,17vh,240px);}
section[data-banda="medio"].pad{padding-block:clamp(64px,9vh,132px);}

/* ============================================================
   BARRA DE ESCALA — la navegación ES el principio de orden.
   N9 · vive exactamente lo que dura la serie.
   ============================================================ */
.escala{
  position:fixed;left:32px;top:50%;transform:translateY(-50%);z-index:400;
  display:flex;flex-direction:column;gap:14px;
  opacity:0;pointer-events:none;transition:opacity var(--d-base) var(--ease-inout);
}
.escala.on{opacity:1;pointer-events:auto;}
.escala a{color:var(--ink-soft);text-decoration:none;display:block;
  transition:color var(--d-base) var(--ease-inout),transform var(--d-base) var(--ease-out);}
.escala a:hover{color:var(--ink);}
.escala a.act{color:var(--ink);transform:translateX(4px);}
.escala a.inv{color:var(--ink-inv-soft);}      /* 5.85 sobre navy · 7.68 sobre navy-deep */
.escala a.inv.act{color:var(--ink-inv);}     /* --ink-inv-quiet sobre --navy da 4.00:1 y no pasa a 10.6px */

.filete{position:fixed;top:0;left:0;right:0;height:2px;z-index:400;display:none;
  background:var(--rule);opacity:0;transition:opacity var(--d-base) var(--ease-inout);}
.filete.on{opacity:1;}
.filete i{display:block;height:100%;width:0;background:var(--navy);transition:width var(--d-base) linear;}
.filete.inv{background:var(--rule-inv);}
.filete.inv i{background:var(--sand);}

/* ============================================================
   PUERTA AL EXPEDIENTE
   N10 · último elemento del bloque, nunca antes del cuerpo.
   N19 · se nombra por su destino, nunca por la acción de cruzarla.
   ============================================================ */
/* N23 · La afordancia sube por estructura, no por relleno.
   Puede ganar alto, filetes y un cambio de valor de filete. No puede ganar
   fondo lleno, radio de esquina, sombra ni verbo. Cero <button>, cero
   border-radius en los 7 documentos.
   El alto de 32px de la v1.2 quedaba por debajo del mínimo táctil de 44:
   era un defecto de accesibilidad, no una cuestión de gusto. */
.puerta{
  display:flex;align-items:center;justify-content:space-between;gap:2em;
  min-height:56px;margin-top:clamp(28px,4vh,48px);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  color:var(--ink);text-decoration:none;
  transition:border-top-color var(--d-base) var(--ease-inout);
}
.puerta .rotulo{display:flex;align-items:baseline;gap:.55em;flex-wrap:wrap;}
.puerta .etq{color:var(--ink-soft);}
.puerta .nat{color:var(--ink);max-width:none;}
.puerta .accion{color:var(--ink-soft);transition:color var(--d-base) var(--ease-inout);}
.puerta:hover .accion,.puerta:focus-visible .accion{color:var(--ink);}
.puerta .flecha{font-family:var(--sans);transition:transform var(--d-base) var(--ease-out);}
/* el verbo NO se cae en móvil, que es donde más falta hace */
@media (max-width:640px){
  .puerta{flex-wrap:wrap;align-items:baseline;min-height:0;padding-block:12px;}
  .puerta .rotulo{flex:1 1 100%;}
  .puerta .accion{margin-left:auto;}
}
/* el filete cambia de valor; la banda no se mueve —con dos filetes,
   desplazar el conjunto lee como una hoja mal puesta— y la flecha sí,
   que es el elemento que anuncia dirección */
.puerta:hover,.puerta:focus-visible{border-top-color:var(--navy);}
.puerta:hover .flecha,.puerta:focus-visible .flecha{transform:translateX(4px);}

/* segunda puerta · el título del capítulo enlaza al mismo destino.
   Cero tratamiento visual persistente: un título subrayado convierte el
   capítulo en un enlace y le baja el registro. Solo en hover y foco. */
.puerta2{text-decoration:none;color:inherit;}
.puerta2:hover,.puerta2:focus-visible{text-decoration:underline;text-underline-offset:.14em;
  text-decoration-thickness:1px;text-decoration-color:var(--ink-faint);}

/* ============================================================
   0 · PORTADA
   N3 · ningún bloque de umbral crece más rápido que el documento:
        toda altura en unidades de viewport lleva techo en px.
   ============================================================ */
#portada{height:clamp(520px,92svh,860px);display:flex;align-items:flex-end;background:var(--navy-deep);}
#portada .full{position:absolute;inset:0;}
#portada .velo{opacity:.25;}
#portada .vin{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,transparent 42%,rgba(11,20,28,.55) 100%);}
#portada .wrap{position:relative;z-index:2;padding-bottom:clamp(72px,12vh,140px);width:100%;}
#portada .t-display{color:var(--sand);text-shadow:0 2px 60px rgba(11,20,28,.5);}
/* esquina opuesta a .cue (bottom-right): la viñeta de .vin ya oscurece
   las cuatro esquinas por diseño, así que el crédito no necesita velo propio */
#portada .creditofoto{position:absolute;z-index:2;left:clamp(24px,5vw,72px);bottom:clamp(28px,5vh,56px);}
.cue{position:absolute;bottom:clamp(28px,5vh,56px);right:clamp(24px,5vw,72px);z-index:3;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;color:var(--ink-inv-soft);
  transition:opacity var(--d-base) ease;}
.cue i{display:block;width:1px;height:34px;background:currentColor;transform-origin:top;animation:cue 2.4s var(--ease-inout) infinite;}
@keyframes cue{0%,100%{transform:scaleY(.35);opacity:.3;}50%{transform:scaleY(1);opacity:1;}}
@media (prefers-reduced-motion:reduce){.cue i{animation:none;}}

/* ---------- crédito individual sobre foto a sangre ----------
   N19-foto (nueva) · el crédito de autor vive como hermano visible del
   contenedor aria-hidden de la imagen, nunca dentro de él: la foto sigue
   siendo decorativa, el crédito no lo es. Reutiliza --ink-inv-quiet, el
   mismo token que ya carga colofon/contacto — es la MISMA especie de texto
   (secundario, sobre oscuro), no un patrón nuevo. Esquina libre por
   sección: nunca la misma que ya ocupa .cue, .linea o .acred. */
.creditofoto{color:var(--ink-inv-quiet);pointer-events:none;white-space:nowrap;}
@media (max-width:480px){.creditofoto{white-space:normal;}}

/* ============================================================
   1 · FRONTISPICIO
   ============================================================ */
#frontis{background:var(--sand);padding-bottom:0;}
#frontis .grid{display:grid;grid-template-columns:1fr auto;gap:clamp(32px,6vw,88px);align-items:end;}
#frontis .nombre{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,6vw,4.8rem);line-height:1.02;}
#frontis .titulo{margin-top:.7em;color:var(--ink-soft);}
#frontis .cred{margin-top:clamp(28px,4vh,48px);padding-top:18px;border-top:1px solid var(--rule);
  color:var(--ink);max-width:52ch;}
#frontis .retrato{width:clamp(160px,20vw,240px);aspect-ratio:3/4;border:1px dashed var(--ink-faint);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;color:var(--ink-soft);}

/* ============================================================
   2–3 · MANIFIESTO
   ============================================================ */
/* frontis + manif-1 comparten fondo y banda "claro": la costura entre ambos
   es continuación del mismo bloque, no una transición de sección — por eso
   no se paga el padding-block completo de .pad en los dos lados (arriba se
   anuló con padding-bottom:0). Se reutiliza el clamp ya establecido para la
   banda "medio" (línea 8) como el único valor de la costura. */
#manif-1{background:var(--sand);padding-top:clamp(64px,9vh,132px);}
#manif-2{background:var(--white);}
.manif-lead{font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.34;max-width:26ch;}
.manif-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(28px,4vw,64px);margin-top:clamp(36px,6vh,72px);}
.manif-evid{margin-top:clamp(32px,5vh,60px);max-width:72ch;}
/* manif2.p3 es una frase de cierre, no un párrafo: misma especie que
   c1.voz/c2.voz — cita en serif itálica, no columna de .manif-cols */
.manif-cierre{margin-top:clamp(40px,6vh,80px);}

/* — manif-2 · segunda columna: la dualidad, sin palabras —
   #manif2-grid solo aplica a esta sección: en manif-1 y lograr el
   texto sigue a ancho completo (.manif-cols es otra especie, columnas
   de prosa, no texto + gráfico). */
.manif2-grid{display:grid;grid-template-columns:1fr minmax(140px,220px);gap:clamp(40px,6vw,96px);align-items:center;}
/* .dual no es un aparato (H1/H2/H3 no le aplican): es decorativo, sin cifra
   ni pie, por eso vive fuera de window.APARATOS y de la clase .ap.

   v3 — un solo sistema de 7 trazos, no dos objetos que se cruzan. Cada
   fila (.r0….r6) es el mismo tipo de elemento (un <path> horizontal);
   lo que cambia fila por fila es cuánta medida y cuánto terreno tiene:
   r0 es recta pura (medida), r6 es ondulación plena (terreno, construida
   igual que .terr .capa en ap3), y entre ambas el trazo se transforma
   gradualmente — la fila 3 es el umbral, en --mist, sin marca y a medio
   ondular. La unión es esa transformación continua, no el punto donde
   dos trazos se tocan. */
.dual{width:100%;}
.dual svg{width:100%;height:auto;display:block;}
.dual .linea{fill:none;stroke-width:1.25;}
/* gradiente ink → mist → olive, el mismo tono "umbral" (--mist) que
   separa las capas en ap3 marca aquí el punto donde ninguna naturaleza
   domina todavía (r3). Los tonos intermedios están en hex literal, igual
   que los stops de .terr .capa en aparatos.js — no hay mezcla en vivo. */
.dual .r0{stroke:var(--ink);}
.dual .r1{stroke:#425462;}
.dual .r2{stroke:#687D8B;}
.dual .r3{stroke:var(--mist);}
.dual .r4{stroke:#839A9B;}
.dual .r5{stroke:#778C83;}
.dual .r6{stroke:var(--olive);}
/* la medida (marcas de intervalo, como ap1.peine) solo vive en las filas
   donde el trazo aún es sobre todo recto, y se disuelve fila por fila en
   vez de cortarse de golpe — para r4-r6 ya no existe. */
.dual .marca line{stroke:var(--ink-faint);stroke-width:1;}
.dual .marca .t0{opacity:1;}
.dual .marca .t1{opacity:.62;}
.dual .marca .t2{opacity:.3;}
.dual .marca .t3{opacity:.1;}
/* el terreno respira, la medida no: r0/r1 quedan fijos (son casi pura
   regla) y a partir de r2 —donde la ondulación ya es perceptible— cada
   fila se expande y contrae sobre su propio centro (transform-box:
   fill-box ancla el origen a cada trazo, no al gráfico completo), con
   una fase propia por fila: viento cruzando capas de terreno, no un
   pulso mecánico sincronizado. */
.dual .r2,.dual .r3,.dual .r4,.dual .r5,.dual .r6{
  transform-box:fill-box;transform-origin:center;
  animation:respira 15s var(--ease-inout) infinite;
}
.dual .r2{animation-delay:0s;}
.dual .r3{animation-delay:-1.4s;}
.dual .r4{animation-delay:-2.8s;}
.dual .r5{animation-delay:-4.2s;}
.dual .r6{animation-delay:-5.6s;}
@keyframes respira{
  0%,100%{transform:scaleY(.9);}
  50%{transform:scaleY(1.12);}
}
@media (max-width:820px){
  /* sin segunda columna en móvil, no hay sitio para el gráfico sin
     apretar la lectura — y es puramente decorativo, se pierde sin costo */
  .manif2-grid{grid-template-columns:1fr;}
  .dual{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .dual .r2,.dual .r3,.dual .r4,.dual .r5,.dual .r6{animation:none;}
}

/* ============================================================
   4 · BISAGRA — única pantalla que es solo palabras
   ============================================================ */
#bisagra{background:var(--navy);color:var(--ink-inv);min-height:clamp(420px,70svh,780px);display:flex;align-items:center;}
#bisagra .t-display{color:var(--sand);}
#bisagra .orden{margin-top:clamp(32px,5vh,64px);padding-top:20px;border-top:1px solid var(--rule-inv);color:var(--ink-inv-soft);}

/* ============================================================
   COTAS
   ============================================================ */
.cota{position:relative;}
/* rótulo apilado arriba del título, título al margen izquierdo — mismo patrón
   en las 4 secciones cota, sin importar si el texto de cada una es corto o
   largo. Antes era flex por sección y se rompía con rótulo+título largos
   (ver #cafeteria); se consolida aquí como comportamiento de sistema. */
.cota .head{display:block;margin-bottom:clamp(24px,4vh,44px);}
.cota .rot{display:block;margin-bottom:.9em;color:var(--ink-soft);}
.cota .sub{margin-top:clamp(36px,5vh,64px);display:grid;gap:clamp(28px,4vh,48px);}
.cota .sub h3{margin-bottom:.6em;}
.cota figure{margin:0;}
.cota figcaption{margin-top:14px;color:var(--ink-soft);font-family:var(--serif);font-style:italic;font-size:.98rem;line-height:1.5;max-width:46ch;}

.ficha{border-top:1px solid var(--rule);padding-top:16px;display:grid;gap:6px;color:var(--ink-soft);}
.ficha .k{color:var(--ink-soft);}
.ficha--cota{margin-top:clamp(36px,5vh,64px);max-width:none;}

/* — Cota 1 · una mesa — */
#cafeteria{background:var(--white);}
#cafeteria .dato{color:var(--ink);margin-bottom:clamp(40px,6vh,80px);}
#cafeteria .body-grid{display:grid;grid-template-columns:1fr minmax(240px,34%);gap:clamp(32px,5vw,72px);align-items:start;}

/* — Cota 2 · un parque — */
#almagro{background:var(--sand);}
#almagro .banda{margin:clamp(32px,5vh,64px) calc(50% - 50vw);width:100vw;}

/* — Cota 3 · un pueblo — evidencia primero — */
#tepoztlan{background:var(--sand-deep);}
#tepoztlan .terreno{position:relative;width:100vw;margin-left:calc(50% - 50vw);height:min(64svh,560px);overflow:hidden;background:var(--navy-deep);}
#tepoztlan .terreno .velo3{position:absolute;inset:0;background:var(--navy-deep);opacity:.42;pointer-events:none;}
#tepoztlan .terreno .velo-cab{position:absolute;left:0;right:0;top:0;z-index:2;pointer-events:none;
  height:clamp(100px,14vh,180px);
  background:linear-gradient(to bottom,var(--velo) 0,var(--velo) 52%,transparent 100%);}
/* el sobreancho va en vh, la misma unidad que el desplazamiento del parallax */
#tepoztlan .terreno svg{position:absolute;inset:-8vh 0;width:100%;height:calc(100% + 16vh);}
/* anotaciones en HTML sobre la banda: nunca se recortan, siempre a tamaño real */
#tepoztlan .anot{position:absolute;inset:0;z-index:3;list-style:none;
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-content:start;
  gap:14px;padding:clamp(20px,4vh,44px) clamp(24px,5vw,72px);color:var(--ink-inv);}
#tepoztlan .anot li{position:relative;padding-top:20px;}
#tepoztlan .anot li::before{content:"";position:absolute;top:0;left:0;width:1px;height:14px;background:var(--ink-inv-quiet);}
/* < 768px · Nivel C: el terreno se queda solo y las 5 anotaciones bajan a columna */
@media (max-width:767px){
  #tepoztlan .terreno{height:40svh;}
  #tepoztlan .anot{position:static;grid-auto-flow:row;grid-auto-columns:auto;gap:10px;
    padding:22px 0 0;color:var(--ink-soft);}
  #tepoztlan .anot li::before{background:var(--ink-faint);}
}

/* — Cota 4 · una cuenca — */
#tres-palos{background:var(--white);}
#tres-palos .rotulo{color:var(--ink-quiet);margin-bottom:clamp(32px,5vh,64px);}
#tres-palos .body-grid{display:grid;grid-template-columns:minmax(280px,42%) 1fr;gap:clamp(32px,5vw,72px);align-items:start;}

/* ============================================================
   7 · ENTREACTO
   ============================================================ */
#entreacto{height:min(54svh,470px);overflow:hidden;position:relative;background:var(--sky);}
#entreacto .duo{position:absolute;inset:-10vh 0;}
#entreacto .velo-pie{position:absolute;left:0;right:0;bottom:0;z-index:1;pointer-events:none;
  height:clamp(150px,22vh,260px);
  background:linear-gradient(to top,var(--velo) 0,var(--velo) 46%,transparent 100%);}
/* la cita y el crédito comparten la misma franja inferior, ya oscurecida
   por .velo-pie: se resuelven en un solo flex, no en dos absolutos que
   adivinan el ancho del otro. En mobile, flex-wrap manda el crédito a su
   propia línea antes de arriesgar choque con la cita. */
#entreacto .linea{position:absolute;left:0;right:0;bottom:clamp(32px,6vh,72px);z-index:2;color:var(--sand);
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 24px;}
#entreacto .linea .creditofoto{white-space:normal;}

/* ============================================================
   10 · REGISTRO — un lugar más en la misma serie
   ============================================================ */
#registro{background:var(--sand);}
#registro .intro{color:var(--ink-soft);margin-bottom:clamp(36px,5vh,64px);}
#registro .reg-item{max-width:60ch;}
#registro .rot{color:var(--ink-soft);display:block;margin-bottom:.9em;}
#registro h3{margin-bottom:.7em;}
#registro .rol{margin-top:1.1em;color:var(--ink-soft);}

/* ============================================================
   11 · INSTRUMENTOS
   ============================================================ */
#instrumentos{background:var(--sky);}
#instrumentos .cols{display:grid;grid-template-columns:1fr minmax(260px,38%);gap:clamp(32px,5vw,72px);align-items:start;}
#instrumentos .tira{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
#instrumentos .tira .duo{aspect-ratio:3/4;}
#instrumentos .t-body{color:var(--ink-sky);}

/* ============================================================
   12 · HACIA DÓNDE VOY
   ============================================================ */
#futuro{background:var(--sky);}
#futuro .banda{width:100vw;margin-left:calc(50% - 50vw);height:min(44svh,380px);margin-top:clamp(36px,5vh,64px);}
#futuro .banda .duo{height:100%;}
/* sobre --sky, --ink-soft cae a 4.34:1 y no pasa el 4.5. Se corrigió el cuerpo de
   #instrumentos y el .t-meta de aquí, pero el cuerpo de este bloque se quedó
   fuera de la medición: --ink-sky lo sube a 5.65:1. */
#futuro .t-body,
#futuro .t-meta{color:var(--ink-sky);}

/* ============================================================
   13 · QUÉ PUEDE LOGRAR
   ============================================================ */
#lograr{background:var(--sand-deep);}

/* ============================================================
   14 · CIERRE
   ============================================================ */
#cierre{background:var(--navy-deep);color:var(--ink-inv);min-height:clamp(460px,64svh,680px);display:flex;align-items:center;}
#cierre .full{position:absolute;inset:0;}
#cierre .velo{opacity:1;background:var(--velo);}
/* el texto pequeño no se salva con velo: sale de la foto. Anclado a SU contenido. */
#cierre .acred{position:relative;}
#cierre .acred::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  left:calc(50% - 50vw);width:100vw;
  top:calc(-1 * clamp(40px,6vh,80px));
  bottom:calc(-1 * clamp(112px,17vh,240px));
  background:linear-gradient(to bottom,transparent 0,
    var(--navy-deep) clamp(40px,6vh,80px),var(--navy-deep) 100%);}
#cierre .wrap{position:relative;z-index:2;width:100%;}
#cierre .t-display{color:var(--sand);max-width:22ch;}
#cierre .contacto{margin-top:clamp(40px,6vh,80px);display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,64px);}
#cierre .contacto .k{color:var(--ink-inv-quiet);margin-bottom:.5em;}
#cierre .contacto .v{font-family:var(--serif);font-size:1.15rem;}
/* Mismo criterio que .puerta2: sin subrayado persistente, solo en hover/foco.
   Color de subrayado tomado de la familia inversa ya usada en esta banda
   (colofon/contacto), no de --ink-faint (pensado para fondo claro). */
#cierre .contacto .v a{text-decoration:none;color:inherit;}
#cierre .contacto .v a:hover,#cierre .contacto .v a:focus-visible{
  text-decoration:underline;text-underline-offset:.14em;
  text-decoration-thickness:1px;text-decoration-color:var(--rule-inv);}
#cierre .colofon{margin-top:clamp(48px,7vh,96px);padding-top:18px;border-top:1px solid var(--rule-inv);
  color:var(--ink-inv-quiet);font-size:.72rem;line-height:1.7;max-width:none;}
/* fuera de .wrap y última en el DOM del section: pinta encima del degradado
   de .acred::before (misma banda inferior) en vez de quedar debajo por
   empate de z-index. Esquina simétrica a la de #portada: abre y cierra
   el documento con la misma firma visual. */
#cierre .creditofoto{position:absolute;z-index:2;left:clamp(24px,5vw,72px);bottom:clamp(28px,5vh,56px);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1023px){
  .escala{display:none;}
  .filete{display:block;}
}
@media (max-width:820px){
  #frontis .grid{grid-template-columns:1fr;align-items:start;}
  #cafeteria .body-grid,#tres-palos .body-grid,#instrumentos .cols{grid-template-columns:1fr;}
  .manif-cols{grid-template-columns:1fr;}
  #cierre .contacto{gap:22px 36px;}
  .t-body{max-width:none;}
}