/* Propuesta «El viaje» (P389) · fernandomarti.com
   Encima de style.css y portada.css de la web: mismos colores, texturas y tipografías.
   Cada sección llega de otra forma: contadores mecánicos, titulares en marcha, la mesa en video
   con paneles, un duelo de listas, una galería de costado, un tablero de interruptores,
   fichas que caen en la mesa, tarjetas que se apilan, un teletipo y una foto que aparece
   por la cuadrícula del símbolo. */

:root{ --rasgo-h:30px; }
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Corte rasgado limpio entre secciones: picos nítidos, sin textura ── */
main>section.mesa{padding:0}
.mesa>.tear{z-index:6}

/* ── El símbolo que viaja: reemplaza la barra de progreso ── */
.avance{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:700;display:flex;flex-direction:column;align-items:center;gap:12px;transition:opacity .4s}
.avance-sim{width:34px;height:34px}
.avance-sim rect{fill:none;stroke:var(--olive);stroke-width:3}
.avance-sim .av-relleno rect{fill:var(--rust);stroke:none;opacity:0;transition:opacity .35s}
.avance-sim .av-relleno rect.on{opacity:1}
.avance-sim .av-relleno rect.acc{fill:var(--ochre)}
.avance-num{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--olive);writing-mode:vertical-rl}
.on-dark .avance-sim rect{stroke:rgba(252,235,202,.7)}.on-dark .avance-sim .av-relleno rect{fill:var(--ochre)}.on-dark .avance-num{color:var(--bone)}
.avance.fuera{opacity:0}
@media(max-width:820px){.avance{display:none}}

/* ── 02 · Contadores mecánicos ── */
#datos .dt-tit{max-width:22ch;margin-top:10px}
.medidores{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,36px);margin-top:clamp(40px,6vh,72px)}
.medidor{position:relative;background:var(--bone);border:1px solid rgba(24,26,19,.55);padding:22px 22px 24px;box-shadow:0 1px 0 rgba(24,26,19,.2),6px 6px 0 rgba(62,62,34,.18)}
.medidor::before{content:"";position:absolute;inset:6px;border:1px dashed rgba(62,62,34,.28);pointer-events:none}
.md-pil{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--rust)}
.md-caja{display:flex;align-items:flex-start;gap:6px;margin-top:16px;background:var(--ink);color:var(--bone);padding:14px 16px 10px;width:max-content;box-shadow:inset 0 2px 10px rgba(0,0,0,.6)}
.md-pct{font-family:var(--head);font-weight:900;font-size:clamp(28px,3vw,44px);color:var(--ochre);line-height:1}
.odo{display:flex;gap:4px;height:clamp(76px,8.4vw,124px);overflow:hidden}
.odo .dig{position:relative;width:.62em;font-family:var(--head);font-weight:900;font-size:clamp(76px,8.4vw,124px);line-height:1;text-align:center;overflow:hidden;background:linear-gradient(#0f100c,#23251c 50%,#0f100c);border-radius:2px}
.odo .dig::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.55)}
.odo .col{display:flex;flex-direction:column;will-change:transform}
.odo .col span{display:block;height:1em}
.md-from{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--olive);margin-top:14px}
.md-barra{position:relative;height:10px;margin-top:14px;background:rgba(62,62,34,.14)}
.md-barra i,.md-barra b{position:absolute;left:0;top:0;bottom:0;width:calc(var(--a) * 100%);transform-origin:left;transform:scaleX(0)}
.md-barra i{background:rgba(62,62,34,.35)}
.md-barra b{background:var(--rust);height:4px;top:3px}
.md-txt{margin:14px 0 0;font-size:15px;max-width:34ch}
.md-src{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--rust);margin-top:12px}
@media(max-width:900px){.medidores{grid-template-columns:minmax(0,1fr)}}

/* ── Franjas: el titular del CTA corre de costado con el scroll ── */
.franja{padding:clamp(56px,9vh,110px) 0 clamp(56px,8vh,96px);overflow:hidden}
.franja-pista{display:flex;gap:.6em;white-space:nowrap;font-family:var(--head);font-weight:900;text-transform:uppercase;font-size:clamp(48px,8.6vw,150px);line-height:.95;will-change:transform;position:relative;z-index:1}
.franja-pista span{flex:none}
.franja-pista .hueca{color:transparent;-webkit-text-stroke:1.5px currentColor}
.franja.bg-ink .franja-pista{color:var(--ochre)}.franja.bg-olive .franja-pista{color:var(--bone)}.franja.bg-rust .franja-pista{color:var(--bone)}
.franja-pie{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:clamp(28px,4vh,48px);flex-wrap:wrap;position:relative;z-index:1}
.franja-pie p{margin:0;max-width:52ch;opacity:.92;font-size:clamp(16px,1.3vw,19px)}

/* ── 03-06 · La mesa ── */
.mesa{background:var(--ink);color:var(--bone)}
.mesa-pista{position:relative}
.mesa-escena{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.mesa-lienzo{position:absolute;inset:0;width:100%;height:100%;display:block}
.mesa-velo{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(ellipse at 50% 55%,transparent 55%,rgba(10,9,6,.55) 100%),
  linear-gradient(to bottom,rgba(10,9,6,.45),transparent 22%,transparent 70%,rgba(10,9,6,.5));opacity:var(--velo,1)}
.mesa-carga{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(252,235,202,.8);transition:opacity .6s;z-index:5}
.mesa-carga.listo{opacity:0}
.mc-sim{width:14px;height:14px;background:var(--rust);animation:mc 1s steps(2) infinite}
@keyframes mc{50%{background:var(--ochre)}}

.mesa-intro{position:absolute;inset:0;pointer-events:none;z-index:3}
.mi-tag{position:absolute;left:var(--gutter);top:clamp(96px,14vh,140px);color:var(--ochre);background:rgba(24,26,19,.86);padding:10px 14px}
.mi-tag::before{background:var(--ochre)}
.mi-lineas{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mi-lineas path{fill:none;stroke:var(--ochre);stroke-width:2;stroke-dasharray:5 5;filter:drop-shadow(0 0 2px rgba(0,0,0,.9))}
.mi-lineas circle{fill:var(--ochre);stroke:var(--ink);stroke-width:2}
.mi-nota{position:absolute;width:min(300px,26vw);background:rgba(24,26,19,.86);border:1px solid rgba(208,137,59,.7);padding:14px 16px 12px;color:var(--bone);backdrop-filter:blur(3px)}
.mi-nota small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--ochre)}
.mi-nota b{display:block;font-family:var(--head);font-weight:900;text-transform:uppercase;font-size:clamp(26px,2.4vw,38px);line-height:.95;margin:4px 0 8px}
.mi-nota p{font-size:13.5px;line-height:1.45;margin:0}
.mi-sombra{position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(to top,rgba(10,9,6,.92),rgba(10,9,6,.6) 45%,transparent);opacity:0}
.mi-final{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(40px,9vh,90px);margin:0;max-width:none;font-family:var(--head);font-weight:900;text-transform:uppercase;font-size:clamp(34px,4.6vw,78px);line-height:.92;color:var(--bone);text-shadow:0 2px 30px rgba(0,0,0,.5)}
.mi-final span{display:block;color:var(--ochre)}

.panel{position:absolute;top:0;bottom:0;width:min(47vw,720px);z-index:4;overflow:hidden;will-change:transform;box-shadow:0 0 60px rgba(0,0,0,.45)}
.panel[data-lado="izq"]{left:0}.panel[data-lado="der"]{right:0}
.panel-in{position:relative;z-index:1;padding:clamp(104px,15vh,150px) clamp(28px,3.4vw,60px) 60px;will-change:transform}
.panel .h-l{font-size:clamp(28px,2.9vw,50px);max-width:18ch;margin:10px 0 22px}
.panel .lead{font-size:clamp(16px,1.2vw,19px)}
.panel p{font-size:15.5px}
.panel .remate{margin-top:22px;font-size:clamp(22px,2.1vw,32px)}
.panel .quote{font-family:var(--head);font-weight:900;text-transform:uppercase;font-size:clamp(22px,1.9vw,30px);line-height:1.02;margin:22px 0 6px;padding-left:18px;border-left:4px solid var(--rust)}
.panel .src{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--rust)}
.panel.bg-ink .och{color:var(--ochre)}
.panel>.tex{position:absolute;inset:0;pointer-events:none;background-size:var(--tex-tile);mix-blend-mode:multiply;opacity:var(--tex-light);background-image:url("../assets/textures/paper-fibre.webp")}
.panel.bg-ink>.tex{mix-blend-mode:screen;opacity:.06}
.panel .reveal{opacity:0;transform:translateY(24px)}

.cadena{width:100%;height:auto;margin-top:10px;overflow:visible}
.cadena text{font-family:var(--mono);font-size:15px;letter-spacing:.04em;fill:var(--bone)}
.cadena .lbl{font-size:12px;letter-spacing:.14em;fill:var(--ochre);text-transform:uppercase}
.cadena .wire,.cadena .ray,.cadena .link path{fill:none;stroke:var(--ochre);stroke-width:1.6}
.cadena .sysbox{fill:var(--ochre);fill-opacity:.14;stroke:var(--ochre);stroke-width:1.6}
.cadena .keepbox{fill:none;stroke:var(--bone);stroke-width:1.2;stroke-dasharray:3 4}
.cadena .mbig{font-family:var(--head);font-weight:900;font-size:26px;letter-spacing:.02em;text-transform:uppercase;fill:var(--bone)}
.cadena .rbig{font-family:var(--head);font-weight:900;font-size:24px;text-transform:uppercase;fill:var(--ochre)}
.cadena .track{fill:rgba(208,137,59,.3)}.cadena .fill{fill:var(--ochre)}

@media(max-width:820px){
  .panel{left:0!important;right:0!important;top:auto;bottom:0;width:auto;height:62svh}
  .panel-in{padding:34px var(--gutter) 90px}
  .panel .h-l{font-size:clamp(26px,7.4vw,36px)}
  .mi-nota{width:auto;max-width:none;left:var(--gutter)!important;right:var(--gutter)!important;padding:10px 12px}
  .mi-nota p{display:none}
  .mi-nota b{font-size:24px;margin-bottom:0}
  .mi-final{font-size:clamp(28px,8.4vw,44px)}
  .mi-tag{top:84px;right:var(--gutter);font-size:12px}
  .cadena{display:none}
}

/* ── 07 · Criterio: duelo de listas ── */
.cr-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,80px);align-items:start}
.cr-cab .h-l{margin:10px 0 22px}
.cr-der{padding-top:clamp(0px,4vh,40px)}
.cr-duelo{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ink)}
.cr-col{padding:22px 22px 26px}
.cr-col .k{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
.cr-col ul{list-style:none;margin:0;padding:0}
.cr-col li{position:relative;padding:10px 0 10px 26px;border-top:1px solid rgba(24,26,19,.18);font-size:15.5px;line-height:1.35}
.cr-col li::before{content:"";position:absolute;left:0;top:14px;width:12px;height:12px;border:1.5px solid currentColor}
.cr-todos{color:var(--olive)}
.cr-todos li{transition:opacity .4s}
.cr-todos li::after{content:"";position:absolute;left:24px;right:0;top:50%;height:1.5px;background:var(--rust);transform:scaleX(var(--tacha,0));transform-origin:left}
.cr-todos li.off{opacity:.62}
.cr-decide{background:var(--ink);color:var(--bone)}
.cr-decide .k{color:var(--ochre)}
.cr-decide li{border-top-color:rgba(252,235,202,.18);opacity:.55;transition:opacity .45s}
.cr-decide li.on{opacity:1}
.cr-decide li.on::before{background:var(--ochre);border-color:var(--ochre)}
.cr-segunda{margin:26px 0 0;font-size:16px;max-width:60ch}
.cr-remate{grid-column:1/-1;margin:clamp(20px,4vh,40px) 0 0;padding-top:24px;border-top:1px solid rgba(24,26,19,.3);max-width:none}
@media(max-width:900px){.cr-grid{grid-template-columns:1fr}.cr-der{padding-top:0}}
@media(max-width:560px){.cr-duelo{grid-template-columns:1fr}}

/* ── 08 · Especialidades: galería de costado ── */
#especialidades{padding:0}

.es-anclaje{height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.es-pista{display:flex;align-items:stretch;gap:clamp(18px,2vw,30px);padding:0 var(--gutter);will-change:transform}
.es-cab{flex:none;width:min(560px,40vw);display:flex;flex-direction:column;justify-content:center;padding-right:3vw}
.es-cab .h-l{margin-top:12px}
.es-guia{display:flex;align-items:center;gap:12px;margin-top:30px;color:var(--rust)}
.es-guia i{display:block;width:60px;height:1px;background:currentColor;position:relative}
.es-guia i::after{content:"";position:absolute;right:0;top:-4px;border:4px solid transparent;border-left-color:currentColor;border-right:0}
.spec2{flex:none;width:clamp(280px,27vw,400px);min-height:min(62vh,520px);position:relative;background:var(--bone);border:1px solid var(--ink);padding:28px 26px 30px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.spec2::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(62,62,34,.07) 0 1px,transparent 1px 24px),repeating-linear-gradient(0deg,rgba(62,62,34,.07) 0 1px,transparent 1px 24px);pointer-events:none}
.spec2 .sicon{position:absolute;top:26px;right:24px;width:clamp(78px,7vw,110px);height:auto;fill:none;stroke:var(--rust);stroke-width:2.2}
.spec2 .k{font-family:var(--head);font-weight:900;font-size:clamp(90px,9vw,150px);line-height:.8;color:transparent;-webkit-text-stroke:1.5px var(--olive);position:absolute;top:22px;left:22px}
.spec2 h3{font-size:clamp(28px,2.4vw,40px);margin:0 0 12px;position:relative}
.spec2 p{margin:0;font-size:15px;position:relative}
.spec2:nth-child(even){background:var(--oat)}
.spec2:nth-child(3n){background:var(--ink);color:var(--bone)}
.spec2:nth-child(3n) .k{-webkit-text-stroke-color:var(--ochre)}
.spec2:nth-child(3n) .sicon{stroke:var(--ochre)}
.spec2:nth-child(3n)::before{background:repeating-linear-gradient(90deg,rgba(252,235,202,.06) 0 1px,transparent 1px 24px),repeating-linear-gradient(0deg,rgba(252,235,202,.06) 0 1px,transparent 1px 24px)}
@media(max-width:820px){
  .es-anclaje{height:auto;display:block;overflow:visible;padding:clamp(90px,12vh,130px) 0 70px}
  /* P541 · en celular nada se desliza de costado: las seis tarjetas quedan a la vista, en una grilla de 2 */
  .es-pista{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .es-cab{width:auto;grid-column:1/-1;padding:0 0 18px}
  .es-guia{display:none}
  .spec2{width:auto;min-height:0;padding:16px 14px 18px;justify-content:flex-start}
  .spec2 .k{position:relative;top:auto;left:auto;font-size:44px;margin-bottom:46px;-webkit-text-stroke-width:1.2px}
  .spec2 .sicon{top:16px;right:14px;width:42px;stroke-width:2.6}
  .spec2 h3{font-size:19px;line-height:1.02;margin-bottom:8px}
  .spec2 p{font-size:14px;line-height:1.42}
}

/* ── 09 · Disponible: tablero de interruptores ── */
.tb-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,4vw,72px);align-items:center}
.tb-pantalla{position:relative}
.tb-marco{position:relative;background:var(--ink);padding:14px;border-radius:6px;box-shadow:inset 0 0 0 2px #2c2e24,0 20px 40px rgba(24,26,19,.35)}
.tb-marco img{width:100%;height:auto;border-radius:3px;filter:saturate(.9) contrast(1.02);transition:filter .5s}
.tb-marco::after{content:"";position:absolute;inset:14px;border-radius:3px;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.tb-lectura{position:absolute;left:28px;right:28px;bottom:28px;display:flex;align-items:flex-end;gap:16px;background:rgba(24,26,19,.86);color:var(--bone);padding:12px 16px;border-left:4px solid var(--ochre);z-index:2}
.tb-cont{font-family:var(--head);font-weight:900;font-size:44px;line-height:.85;color:var(--ochre)}
.tb-cont b{font-weight:900}
.tb-tit{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;line-height:1.35}
.tb-pilotos{display:flex;gap:10px;margin-top:16px;justify-content:center}
.tb-pilotos i{width:14px;height:14px;border-radius:50%;background:#4a3b27;box-shadow:inset 0 1px 2px rgba(0,0,0,.6);transition:background .3s,box-shadow .3s}
.tb-pilotos i.on{background:var(--ochre);box-shadow:0 0 12px rgba(208,137,59,.8)}
.tb-lista .h-l{margin:10px 0 22px;font-size:clamp(30px,3.2vw,50px);max-width:22ch}
.llaves{list-style:none;margin:0;padding:0;border-top:1px solid rgba(24,26,19,.35);display:grid;grid-template-columns:1fr 1fr;column-gap:26px}
@media(max-width:1100px){.llaves{grid-template-columns:1fr}}
.llaves li{border-bottom:1px solid rgba(24,26,19,.2)}
.llave{appearance:none;background:none;border:0;padding:12px 4px;width:100%;display:flex;gap:16px;align-items:flex-start;text-align:left;cursor:pointer;color:inherit;font:inherit}
.ll-pal{flex:none;position:relative;width:44px;height:24px;border-radius:12px;background:#b9a78a;box-shadow:inset 0 2px 4px rgba(0,0,0,.35);margin-top:2px;transition:background .3s}
.ll-pal::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--bone);box-shadow:0 1px 3px rgba(0,0,0,.45);transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.llave[aria-pressed="true"] .ll-pal{background:var(--rust)}
.llave[aria-pressed="true"] .ll-pal::after{transform:translateX(20px)}
.ll-txt{font-size:14.5px;line-height:1.4;opacity:.75;transition:opacity .35s}
.ll-txt b{display:block;font-size:16px;font-weight:600;margin-bottom:2px}
.llave[aria-pressed="true"] .ll-txt{opacity:1}
.llave.actual .ll-txt b{color:var(--ink);box-shadow:inset 0 -3px 0 var(--rust)}
.llave:focus-visible{outline:3px solid var(--ochre);outline-offset:2px}
.tb-remate{max-width:none;font-size:clamp(22px,2.1vw,32px);line-height:1.05;margin-top:22px;opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s}
.tb-remate.ver{opacity:1;transform:none}
@media(max-width:900px){.tb-grid{grid-template-columns:1fr}.tb-lectura{left:20px;right:20px;bottom:20px}.tb-cont{font-size:34px}}

/* ── 10 · Asesoría: fichas sobre la mesa y boleto ── */
.as-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,4vw,72px);align-items:center}
.as-txt .h-l{margin:10px 0 22px}
.boleto{display:flex;margin-top:34px;background:var(--bone);border:1px solid var(--ink);max-width:560px;position:relative}
.bo-izq{padding:18px 22px;border-right:2px dashed rgba(252,235,202,.35);display:flex;flex-direction:column;justify-content:center;background:var(--ink);color:var(--ochre)}
.bo-izq .mono{font-size:11px}
.bo-izq b{font-family:var(--head);font-weight:900;font-size:46px;line-height:.9}
.bo-der{padding:16px 20px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;justify-content:center}
.bo-der .meta{margin:0}
.as-mesa{position:relative;min-height:560px}
.as-foto{width:100%;height:auto;box-shadow:0 18px 40px rgba(24,26,19,.3)}
.as-rot{margin:22px 0 10px}
.fichas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ficha{position:relative;background:var(--paper);border:1px solid rgba(24,26,19,.55);padding:16px 16px 18px;font-size:14px;line-height:1.4;box-shadow:3px 4px 0 rgba(62,62,34,.25)}
.ficha::before{content:"";position:absolute;top:-9px;left:50%;width:62px;height:18px;transform:translateX(-50%) rotate(-3deg);background:rgba(208,137,59,.55)}
.ficha b{display:block;font-family:var(--head);font-weight:900;text-transform:uppercase;font-size:21px;line-height:1;margin-bottom:6px}
.fi-n{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--rust);margin-bottom:6px}
@media(max-width:900px){.as-grid{grid-template-columns:1fr}.as-mesa{min-height:0}}
@media(max-width:520px){.fichas{grid-template-columns:1fr}.boleto{flex-direction:column}.bo-izq{border-right:0;border-bottom:2px dashed rgba(24,26,19,.45)}}

/* ── 11 · Caminos: tarjetas que se apilan ── */
.ca-cab .h-l{margin-top:10px}
.pila{margin-top:clamp(40px,6vh,70px);position:relative}
.camino{position:sticky;top:calc(100px + var(--i) * 64px);margin-bottom:clamp(24px,5vh,48px);background:#23251c;border:1px solid rgba(252,235,202,.35);padding:clamp(24px,3vw,44px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:18px 40px;align-content:start;box-shadow:0 -14px 40px rgba(0,0,0,.35);transform-origin:top center}
.camino.top{background:var(--rust);color:var(--bone);border-color:var(--rust)}
.ca-k{grid-column:1/-1;display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ochre)}
.camino.top .ca-k{color:var(--bone)}
.camino h3{font-size:clamp(40px,5.2vw,88px);line-height:.9}
.camino p{font-size:clamp(16px,1.3vw,19px);margin:0;align-self:end}
.ca-nivel{grid-column:1/-1;display:flex;gap:8px;margin-top:10px}
.ca-nivel i{width:34px;height:10px;border:1px solid currentColor;opacity:.6}
.ca-nivel i.on{background:currentColor;opacity:1}
.ca-remate{margin-top:10px;max-width:none;font-size:clamp(22px,2.2vw,34px)}
@media(max-width:820px){.camino{grid-template-columns:1fr;top:calc(76px + var(--i) * 52px)}}

/* ── 12 · Preguntas: teletipo ── */
.fq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}
.fq-cab{position:sticky;top:120px}
.fq-cab .h-l{margin-top:10px}
.teletipo{background:var(--bone);border:1px solid var(--ink);box-shadow:8px 8px 0 rgba(62,62,34,.2);position:relative}
.teletipo::before{content:"";display:block;height:20px;background:radial-gradient(circle at 10px 10px,var(--paper) 4px,transparent 4.5px) 0 0/28px 20px;border-bottom:1px solid rgba(24,26,19,.25)}
.teletipo details{border-bottom:1px solid rgba(24,26,19,.18)}
.teletipo details:last-child{border-bottom:0}
.teletipo summary{list-style:none;cursor:pointer;padding:20px 60px 20px 24px;font-family:var(--head);font-weight:900;text-transform:uppercase;font-size:clamp(22px,2.1vw,32px);line-height:1;position:relative}
.teletipo summary::-webkit-details-marker{display:none}
.teletipo summary::after{content:"+";position:absolute;right:24px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-weight:400;font-size:22px;color:var(--rust);transition:transform .3s}
.teletipo details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.teletipo summary:hover{color:var(--rust)}
.teletipo .a{padding:0 24px 22px;font-family:var(--mono);font-size:14px;line-height:1.65;color:var(--olive)}
.teletipo .a .src{margin-top:8px;color:var(--rust);font-size:11px}
.cursor{display:inline-block;width:.6em;height:1.1em;background:var(--rust);vertical-align:-2px;margin-left:2px;animation:parp .8s steps(2) infinite}
@keyframes parp{50%{opacity:0}}
@media(max-width:900px){.fq-grid{grid-template-columns:1fr}.fq-cab{position:static}}

/* ── 13 · Quién: la foto aparece por la cuadrícula del símbolo ── */
.qn-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,4vw,72px);align-items:center}
.qn-foto{position:relative}
.qn-foto img{width:100%;height:auto}
.qn-celdas{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:0}
.qn-celdas i{background:var(--oat);border:1px solid rgba(62,62,34,.35);transition:none}
.qn-celdas i.acc{background:var(--ochre)}
.qn-txt .h-l{margin:10px 0 22px}
@media(max-width:900px){.qn-grid{grid-template-columns:1fr}}

/* Entradas genéricas (las mueve viaje.js) */
.entra{opacity:0}
@media (prefers-reduced-motion: reduce){.entra{opacity:1!important;transform:none!important}}

/* Cortina: la sección sube por encima de la última imagen del tramo, que queda fija */
main>section.cortina{position:relative;z-index:50!important}
.tear.top.sobre-imagen{top:-47px;transform:scaleY(-1);height:48px}

/* 05 · Comunidad: la cita y el remate van a lo ancho, en dos columnas, para que la sección sea más corta */
#comunidad .co-pie{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:end;margin-top:clamp(28px,5vh,56px);padding-top:28px;border-top:1px solid rgba(24,26,19,.25)}
#comunidad .co-pie .quote{margin:0}
#comunidad .co-pie .remate{margin:0;max-width:none}
@media(max-width:900px){#comunidad .co-pie{grid-template-columns:1fr}}

/* ── 03 · Tres llaves: tres paneles de colores que se abren de a uno con el scroll ── */
#pilares{padding:0}
.ll-anclaje{height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3vh,32px);padding:clamp(80px,11vh,110px) 0 clamp(30px,5vh,56px)}
.ll-cab .num-tag{color:var(--ink);margin:0}
.ll-fila{display:flex;gap:6px;height:min(60vh,600px)}
.pilar[data-i] .pl-cuerpo{visibility:visible}
.pilar{--g:1;flex:var(--g) 1 0;min-width:0;position:relative;overflow:hidden;display:flex;border:1px solid var(--ink);transition:none}
.pilar{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.pilar.abierto{border-color:var(--ochre)}
.pilar .pl-palabra{color:rgba(252,235,202,.9);transition:color .3s}
.pilar.abierto .pl-palabra{color:var(--ochre)}
.pl-lomo{flex:none;width:clamp(72px,7vw,110px);display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:18px 0;border-right:1px solid rgba(252,235,202,.25)}
.pl-n{font:700 14px/1 var(--mono);letter-spacing:.14em;color:var(--ochre)}
.pl-palabra{writing-mode:vertical-rl;transform:rotate(180deg);font:900 clamp(34px,3.6vw,58px)/1 var(--head);text-transform:uppercase;white-space:nowrap}
.pl-cuerpo{flex:1;min-width:0;padding:clamp(22px,3vw,48px);display:flex;flex-direction:column;justify-content:flex-end;opacity:var(--o,0);transform:translateX(calc((1 - var(--o,0)) * 40px))}
.pl-cuerpo svg{width:clamp(64px,6vw,96px);height:auto;fill:none;stroke:var(--ochre);stroke-width:2.4;margin-bottom:auto}

.pl-cuerpo small{font:400 12px/1 var(--mono);letter-spacing:.16em;color:var(--ochre);margin-bottom:10px}

.pl-cuerpo h3{font-size:clamp(48px,6.4vw,112px);line-height:.85;margin:0 0 18px;white-space:nowrap}
.pl-cuerpo p{font-size:clamp(16px,1.3vw,20px);line-height:1.45;max-width:36ch;margin:0}
.ll-final{margin:0;max-width:none;font:900 clamp(28px,3.4vw,56px)/.95 var(--head);text-transform:uppercase;color:var(--ink);opacity:var(--f,0);transform:translateY(calc((1 - var(--f,0)) * 30px))}
.ll-final span{color:var(--ink)}
@media(max-width:820px){
  .ll-fila{flex-direction:column;height:66svh;gap:8px}
  .pilar{flex-direction:column}
  .pl-lomo{width:auto;flex-direction:row;padding:10px 16px;border-right:0;border-bottom:1px solid rgba(252,235,202,.25);justify-content:flex-start;gap:14px}
  .pl-palabra{writing-mode:horizontal-tb;transform:none;font-size:28px}
  .pl-cuerpo{padding:16px}
  .pl-cuerpo svg{display:none}
  .pl-cuerpo h3{display:none}
  .pl-cuerpo p{font-size:15px}
  .ll-final{font-size:clamp(24px,7vw,34px)}
}

/* Contraste (P394): el óxido de la marca sobre avena no llega a 4.5:1; en texto chico se usa un óxido más oscuro */
.bg-oat .rust,.bg-oat .mono.rust{color:#7E3310}

/* Móvil: el doble de margen lateral (P416) */
@media(max-width:820px){:root{--gutter:40px}}