/* ============================================================================
   subida.css — solo la portada de «La subida al Burgess» (Exedra) · [B]
   Sobre base.css. Móvil primero (390 px). Alturas en svh (--vh: 1vh, y 1svh
   donde el navegador lo entiende). Sin scroll horizontal.
   Solo tinta / papel / verdín / grises (SPEC §2).

   Mecánica (SPEC §4): cada acto pegajoso es
     section.acto.pegajoso[--alto]  → min-height: alto·svh
       .escena   sticky, calc(100 * var(--vh)), con el dibujo (canvas .tinta + svg .lamina)
       .latidos  se solapa a la escena (margin-top:calc(-100 * var(--vh))) y contiene .paso ×n;
                 cada .latido es sticky dentro de su .paso, así entra por abajo,
                 se queda en su cota (--T) mientras dura su paso y el siguiente
                 lo empuja. La geometría sale de --d1 (primer umbral) y --dur.
   Modo lámina (html.sin-js · html.lamina · prefers-reduced-motion): todo en flujo.
   ============================================================================ */

:root{
  --vh:1vh;             /* unidad de alto de pantalla: svh si el navegador lo entiende (abajo) */
  --T:calc(58 * var(--vh));        /* cota a la que se queda cada latido */
  --dibujo:calc(56 * var(--vh));   /* alto de la zona del dibujo dentro de la escena */
  --gutter:20px;
}
@supports (height:1svh){ :root{--vh:1svh} }
@media (min-width:900px){ :root{--T:calc(64 * var(--vh)); --dibujo:calc(62 * var(--vh)); --gutter:32px} }

main#contenido{position:relative; z-index:1}

/* ── actos ──────────────────────────────────────────────────────────────── */
.acto{position:relative}
.acto.pegajoso{min-height:calc(var(--alto) * calc(1 * var(--vh))); --rec:calc((var(--alto) - 100) * calc(1 * var(--vh)))}
.escena{position:sticky; top:0; height:calc(100 * var(--vh)); overflow:hidden; z-index:1}
/* el asiento vacío es la puerta: un enlace invisible colocado por JS sobre el hueco del banco */
.asiento{position:absolute; display:block; z-index:4; pointer-events:auto; cursor:pointer; border-radius:8px; text-decoration:none}
.asiento[hidden]{display:none}
.asiento:hover{background:rgba(23,20,15,.05)}
.asiento:focus-visible{outline:2px solid var(--verdin); outline-offset:4px}
.banco-pie .asiento{z-index:4}
.banco-pie:not(.en) .asiento{visibility:hidden}
/* las diez líneas en móvil: plegadas; en escritorio hablan las sillas */
.sillas-detalle{margin:22px 0 0}
.sillas-detalle summary{cursor:pointer; font-family:var(--display); font-size:17px; color:var(--tinta); list-style:none; padding:10px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule-2)}
.sillas-detalle summary::-webkit-details-marker{display:none}
.sillas-detalle summary::before{content:"+ "; color:var(--verdin)}
.sillas-detalle[open] summary::before{content:"− "}
.sillas-detalle .sillas-lista{margin-top:0; border-top:0}
@media (min-width:900px){ .sillas-detalle{display:none} }
html.sin-js .sillas-detalle, html.lamina .sillas-detalle{display:block}
.dibujo{position:absolute; left:0; right:0; top:0; height:var(--dibujo)}
.tinta{position:absolute; inset:0; width:100%; height:100%; display:block}
.lamina{display:none; position:absolute; inset:0; width:100%; height:100%; color:var(--tinta)}
.lamina .trazo{fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.lamina .fino{stroke-width:1}
.lamina .figura{fill:currentColor; stroke:none}
.lamina .bicho{fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round}
.curvas-roca{position:absolute; inset:0; width:100%; height:100%; overflow:hidden; pointer-events:none; stroke-dasharray:1; stroke-dashoffset:1; color:var(--tinta)}

/* el contador: esquina inferior izquierda de la escena */
.contador{position:absolute; left:var(--gutter); bottom:16px; display:flex; align-items:baseline; gap:8px; font-variant-numeric:tabular-nums; color:var(--gris); opacity:0; transition:opacity .4s}
.contador.en{opacity:1}
.contador .n{font-family:var(--display); font-size:22px; letter-spacing:.01em; color:var(--tinta); white-space:nowrap}
.contador .u{font-size:12.5px; letter-spacing:.14em; text-transform:none; color:var(--gris-2)}
@media (min-width:900px){ .contador .n{font-size:26px} }

/* ── latidos (pasos + sticky) ───────────────────────────────────────────── */
.latidos{position:relative; z-index:2; margin-top:calc(-100 * var(--vh)); padding-top:calc(var(--d1, 0) * var(--rec) + var(--T)); pointer-events:none}
.paso{height:calc(var(--dur, .2) * var(--rec))}
.paso:last-child{height:calc(var(--dur, .2) * var(--rec) + calc(100 * var(--vh)) - var(--T))}
.latido{position:sticky; top:var(--T); margin:0 auto; padding:0 var(--gutter); max-width:var(--ancho); text-align:center; opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease; font-family:var(--display); font-weight:400; font-size:clamp(22px,5.6vw,34px); line-height:1.28; letter-spacing:-.005em; color:var(--tinta)}
.latido.en{opacity:1; transform:none}
.latido.grande{font-size:clamp(34px,9vw,64px); line-height:1.04; letter-spacing:-.015em}
.latido.chico{font-family:var(--body); font-size:clamp(16px,4.2vw,20px); font-weight:300; line-height:1.5; color:var(--gris)}
.latido.accion{pointer-events:auto}
.latido .cta{pointer-events:auto; margin-top:6px}
.latido .correo{display:block; margin-top:14px; font-family:var(--display); font-size:clamp(17px,4.4vw,22px); letter-spacing:.01em}
.latido .correo a{color:var(--tinta); text-decoration:none; border-bottom:1px solid var(--verdin-c)}
.latido .correo a:hover{color:var(--verdin)}
.latido.pliego{text-align:left; font-family:var(--body); font-size:16px; line-height:1.6; pointer-events:auto; background:var(--paper)}
.latido.pliego details{border-top:1px solid var(--rule)}
.latido.pliego summary{font-size:19px}

/* el título que se monta palabra a palabra */
.titulo{font-family:var(--display); font-weight:400; font-size:clamp(32px,8vw,56px); line-height:1.05; letter-spacing:-.015em; margin:0}
.titulo .palabra{display:inline-block; clip-path:inset(0 100% 0 0); margin-right:.24em}
.titulo .palabra:last-child{margin-right:0}
.latido .puerta-enlace{display:inline-block; margin-top:22px; font-family:var(--body); font-size:14px; pointer-events:auto; opacity:0; transition:opacity .5s .2s}
.latido.puerta-en .puerta-enlace{opacity:1}

/* ── acto III · el pie (el mapa hace zoom) ──────────────────────────────── */
.mapa-caja{position:absolute; left:0; top:0; width:100%; height:var(--dibujo); overflow:hidden}
.mapa-zoom{position:absolute; inset:0}
svg.mapa{display:block; width:100%; height:100%; color:var(--tinta); font-family:var(--display); font-style:italic; font-size:15px; fill:var(--tinta)}  /* la fuente base se hereda dentro de los <use> */
svg.mapa .nombre{font-family:var(--display); font-style:italic; font-size:17px; fill:var(--tinta)}
svg.mapa .etiqueta{font-family:var(--body); font-style:normal; font-weight:600; font-size:11.5px; letter-spacing:.04em; fill:var(--verdin); opacity:0; transform:translateY(12px); transition:opacity .5s, transform .5s}
svg.mapa .etiqueta.en{opacity:1; transform:none}
svg.mapa .voz{font-family:var(--display); font-style:italic; font-size:12.5px; fill:var(--gris-2); opacity:0; transition:opacity .8s}
svg.mapa .voz.en{opacity:.9}
svg.mapa .ruta{stroke-dasharray:1; stroke-dashoffset:1}
svg.mapa .cuerda{stroke-dasharray:0 1 0 1; opacity:0}
svg.mapa .cordada{opacity:0; transition:opacity .4s}
svg.mapa .cordada.en{opacity:1}
svg.mapa .cordada use{offset-rotate:0deg; offset-distance:0%}
@media (max-width:899px){
  svg.mapa .nombre{font-size:28px}
  svg.mapa .etiqueta{display:none}   /* en móvil las etiquetas las llevan las tarjetas */
  svg.mapa .voz{display:none}        /* y las voces, la línea bajo el mapa */
}
.banco-pie{position:absolute; left:50%; top:50%; width:min(78%, 520px); aspect-ratio:2/1; transform:translate(-50%,-50%); opacity:0; transition:opacity .4s}
.banco-pie.en{opacity:1}
.banco-pie canvas{width:100%; height:100%; display:block}
.banco-pie .lamina{display:none}

/* ── acto IV · tres rutas ───────────────────────────────────────────────── */
#rutas .mapa-caja{height:calc(54 * var(--vh))}
#rutas .latidos.capa{position:sticky; top:0; height:calc(100 * var(--vh)); padding:0; margin-top:calc(-100 * var(--vh)); z-index:2; pointer-events:none}
.capa .cabecera{position:absolute; left:var(--gutter); right:var(--gutter); top:14px; margin:0; padding:0; text-align:left; max-width:none; font-size:clamp(21px,5.4vw,30px)}
.capa .cordada-linea{position:absolute; left:var(--gutter); right:var(--gutter); top:calc(calc(54 * var(--vh)) - 12px); margin:0; padding:8px 10px; text-align:left; max-width:none; background:var(--paper); font-family:var(--display); font-size:clamp(15px,3.9vw,19px); line-height:1.35; transform:translateY(-100%)}
.capa .cordada-linea.en{opacity:1; transform:translateY(-100%)}
.voz-movil{position:absolute; left:var(--gutter); right:var(--gutter); top:calc(calc(54 * var(--vh)) - 10px); margin:0; font-family:var(--display); font-style:italic; font-size:14px; line-height:1.4; color:var(--gris-2); opacity:0; transition:opacity .5s; transform:translateY(-100%); background:var(--paper); padding:4px 8px}
.voz-movil.en{opacity:1}
.puertas{position:absolute; left:var(--gutter); right:var(--gutter); top:calc(calc(54 * var(--vh)) + 14px); bottom:10px; pointer-events:none}
.puerta{position:absolute; left:0; right:0; top:0; background:var(--white); border:1px solid var(--rule); padding:16px 18px 14px; opacity:0; transform:translateY(12px); transition:opacity .5s, transform .5s; pointer-events:none}
.puerta.actual{opacity:1; transform:none; pointer-events:auto}
.puerta .para{font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--verdin); margin:0 0 6px}
.puerta h3{font-family:var(--display); font-weight:400; font-size:22px; line-height:1.2; margin:0 0 8px}
.puerta p{font-size:14.5px; line-height:1.55; color:var(--gris); margin:0 0 14px; max-width:none}
.puerta .puerta-enlace{font-size:13px}
@media (min-width:900px){
  #rutas .mapa-caja{width:62%; height:calc(100 * var(--vh))}
  .capa .cabecera{left:62%; right:40px; top:calc(12 * var(--vh)); padding-left:8px; font-size:clamp(22px,2.5vw,30px); white-space:nowrap}
  .puertas{left:62%; right:104px; top:calc(18 * var(--vh)); bottom:auto; padding-left:8px; display:flex; flex-direction:column; gap:10px}
  .puerta{position:static; opacity:0; transform:translateY(12px)}
  .puerta.en{opacity:1; transform:none; pointer-events:auto}
  .capa .cordada-linea{left:62%; right:104px; top:auto; bottom:calc(3 * var(--vh)); padding:0 0 0 8px; background:none; transform:none; font-size:19px}
  .capa .cordada-linea.en{transform:none}
  .voz-movil{display:none}
}

/* ── actos en flujo (cantera, refugio) ─────────────────────────────────── */
.acto.flujo{padding:72px var(--gutter) 64px; border-top:1px solid var(--rule); background:var(--paper); position:relative; z-index:2}
.acto.flujo .flujo-in{max-width:var(--ancho); margin:0 auto}
.acto.flujo h2{font-family:var(--display); font-weight:400; font-size:clamp(26px,6vw,36px); line-height:1.2; letter-spacing:-.01em; margin:0 0 14px; max-width:26ch}
.acto.flujo .linea{font-family:var(--display); font-size:clamp(18px,4.6vw,22px); line-height:1.4; color:var(--gris); margin:0 0 34px; max-width:40ch}
.acto.flujo .puerta-pie{margin:36px 0 0}

/* el gabinete: cuatro láminas grandes (22-sep). Lo que se ve grande es el ARTEFACTO;
   el fósil baja a etiqueta de espécimen. Las otras dos formas viven en /cantera.
   Por defecto abiertas: el JS (walcott.js) marca html.con-gabinete, las cierra y las va
   abriendo al entrar en pantalla; sin JS se leen enteras. */
.gabinete{display:grid; grid-template-columns:1fr; border-top:1px solid var(--rule); margin:0}
.lamina-g{background:var(--white); border:1px solid var(--rule); margin:0 0 -1px; min-width:0}
.lamina-tirador{display:flex; align-items:center; gap:14px; width:100%; border:0; background:var(--white); padding:15px 18px; text-align:left; cursor:pointer; color:var(--tinta)}
.especimen{display:flex; align-items:center; gap:13px; min-width:0}
.especimen-glifo{display:block; height:26px; width:auto; flex:none; color:var(--tinta); fill:none; stroke:currentColor; stroke-width:4.4; stroke-linecap:round; stroke-linejoin:round}
.especimen-txt{display:flex; flex-direction:column; min-width:0}
.especimen-txt i{font-family:var(--display); font-style:italic; font-size:16px; line-height:1.15; color:var(--tinta)}
.especimen-txt small{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--verdin); margin-top:3px}
.lamina-tirador:hover .especimen-txt i{color:var(--verdin)}
.tirador{margin-left:auto; flex:none; width:30px; height:9px; border:1px solid var(--gris-2); border-radius:5px}
.lamina-g.abierta .tirador{border-color:var(--verdin)}
.lamina-cuerpo{display:grid; grid-template-rows:1fr; opacity:1; transition:grid-template-rows .6s ease, opacity .5s ease}
.lamina-cuerpo-in{min-height:0; overflow:hidden; padding:0 18px}
.artefacto{color:var(--tinta); margin:2px 0 16px}
.artefacto svg{display:block; margin:0 auto; height:clamp(140px,38vw,186px); width:auto; max-width:100%; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; clip-path:inset(0); transition:clip-path 1.5s ease-out .15s}
.lamina-cuerpo h3{font-family:var(--display); font-weight:400; font-size:clamp(19px,4.4vw,23px); line-height:1.22; margin:0 0 8px}
.lamina-cuerpo p{font-size:14.5px; line-height:1.6; color:var(--gris); margin:0 0 20px; max-width:46ch}
html.con-gabinete .lamina-cuerpo{grid-template-rows:0fr; opacity:0}
html.con-gabinete .artefacto svg{clip-path:inset(0 100% 0 0)}
html.con-gabinete .lamina-g.abierta .lamina-cuerpo{grid-template-rows:1fr; opacity:1}
html.con-gabinete .lamina-g.abierta .artefacto svg{clip-path:inset(0)}
@media (min-width:760px){
  .gabinete{grid-template-columns:1fr 1fr}
  .lamina-g{margin:0 -1px -1px 0}
}
@media (prefers-reduced-motion:reduce){
  .lamina-cuerpo{transition:none}
  .artefacto svg{clip-path:none; transition:none}
}

/* la Mesa: diez sillas */
.mesa-caja{position:relative; width:min(100%, 520px); aspect-ratio:1/1; margin:8px auto 0}
.mesa-svg{display:block; width:100%; height:100%; color:var(--tinta)}
.silla{position:absolute; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; border:0; background:transparent; cursor:pointer; padding:0}
.silla::after{content:""; position:absolute; inset:12px; border-radius:50%; background:var(--tinta); opacity:0; transition:opacity .25s}
.silla:hover::after,.silla[aria-expanded="true"]::after,.silla:focus-visible::after{opacity:1}
.silla .solo-lector{pointer-events:none}
.bocadillo{position:absolute; left:50%; top:50%; width:58%; transform:translate(-50%,-50%); background:var(--paper); border:1px solid var(--tinta); padding:12px 14px; font-size:13px; line-height:1.5; color:var(--gris); text-align:center; opacity:0; transition:opacity .25s; pointer-events:none}
.bocadillo.en{opacity:1}
.bocadillo b{display:block; font-family:var(--display); font-weight:400; font-size:16px; color:var(--tinta); margin-bottom:4px}
.sillas-lista{list-style:none; padding:0; margin:22px 0 0; max-width:none; columns:1; border-top:1px solid var(--rule)}
.sillas-lista li{padding:10px 0; border-bottom:1px solid var(--rule-2); font-size:14px; line-height:1.5; color:var(--gris)}
.sillas-lista li b{font-family:var(--display); font-weight:400; font-size:16px; color:var(--tinta); display:block}
@media (min-width:900px){ .sillas-lista{display:none} }

/* el libro de cumbre */
.libro{background:var(--white); border:1px solid var(--rule); padding:26px 28px 22px; margin:44px 0 0; box-shadow:0 1px 2px rgba(23,20,15,.04)}
.libro h3{font-family:var(--body); font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--verdin); margin:0 0 12px}
.libro ol{list-style:none; padding:0; margin:0}
.libro li{display:flex; justify-content:space-between; gap:18px; align-items:baseline; border-top:1px solid var(--rule-2); padding:9px 0; font-family:var(--display); font-style:italic; font-size:16.5px; line-height:1.35; clip-path:inset(0 100% 0 0)}
.libro li.en{clip-path:inset(0 0 0 0); transition:clip-path 1.1s ease}
.libro li .cuando{font-family:var(--body); font-style:normal; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--gris-2); white-space:nowrap}
.libro .ultima{font-size:12.5px; color:var(--gris-2); margin:12px 0 0}
.quien-responde{margin:36px 0 0}
.quien-responde .nombre{font-family:var(--display); font-size:clamp(19px,4.8vw,24px); line-height:1.3; margin:0 0 12px}
.quien-responde details{max-width:66ch}

/* ── el raíl de altitud ─────────────────────────────────────────────────── */
.rail{position:fixed; z-index:20; pointer-events:none}
.rail .rail-desk{display:none}
.rail .rail-movil{position:fixed; left:0; top:calc(10 * var(--vh)); height:calc(80 * var(--vh)); width:24px}
.rail .rail-movil .linea{position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--rule)}
.rail .rail-movil .hecho{position:absolute; left:0; top:0; width:2px; height:0; background:var(--tinta)}
.rail .rail-movil a{position:absolute; left:0; width:24px; height:24px; margin-top:-12px; pointer-events:auto; display:block}
.rail .rail-movil a::after{content:""; position:absolute; left:0; top:11px; width:7px; height:2px; background:var(--gris-2)}
.rail .rail-movil a.actual::after{background:var(--tinta); width:9px}
.rail .rail-movil .punto{position:absolute; left:-2px; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:var(--tinta)}
@media (min-width:900px){
  .rail .rail-movil{display:none}
  .rail .rail-desk{display:block; position:fixed; right:22px; top:50%; width:72px; height:220px; margin-top:-110px}
  .rail .rail-desk svg{width:72px; height:220px; display:block; overflow:visible}
  .rail .rail-desk .perfil{fill:none; stroke:var(--rule); stroke-width:1.4; stroke-linejoin:round}
  .rail .rail-desk .perfil-hecho{fill:none; stroke:var(--tinta); stroke-width:1.4; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1}
  .rail .rail-desk a{pointer-events:auto}
  .rail .rail-desk a circle{fill:var(--paper); stroke:var(--gris-2); stroke-width:1.2}
  .rail .rail-desk a:hover circle, .rail .rail-desk a.actual circle{fill:var(--tinta); stroke:var(--tinta)}
  .rail .rail-desk a circle.hit, .rail .rail-desk a:hover circle.hit, .rail .rail-desk a.actual circle.hit{fill:transparent; stroke:none}
  .rail .rail-desk a text{font-family:var(--body); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; fill:var(--gris-2); opacity:0; transition:opacity .2s}
  .rail .rail-desk a:hover text, .rail .rail-desk a:focus-visible text{opacity:1}
  .rail .rail-desk .punto{fill:var(--tinta)}
  .rail .rail-desk .guia{offset-rotate:0deg; offset-distance:0%; color:var(--tinta); fill:var(--tinta)}
}

/* ── modo sin tinta: hay scroll pero no hay motor (Ink) ni símbolos ────── */
html.sin-tinta .tinta{display:none}
html.sin-tinta .lamina{display:block}
html.sin-tinta .curvas-roca{display:none}

/* ── modo lámina: sin JS, reduced-motion o saveData ─────────────────────── */
html.sin-js .acto.pegajoso, html.lamina .acto.pegajoso{min-height:0}
html.sin-js .escena, html.lamina .escena{position:relative; height:auto; overflow:visible}
html.sin-js .dibujo, html.sin-js .mapa-caja, html.lamina .dibujo, html.lamina .mapa-caja{position:relative; height:auto; aspect-ratio:16/9; max-height:calc(70 * var(--vh)); width:100% !important}
html.sin-js .mapa-caja svg.mapa, html.lamina .mapa-caja svg.mapa{position:absolute; inset:0; width:100%; height:100%}
html.sin-js .tinta, html.lamina .tinta{display:none}
html.sin-js .lamina, html.lamina .lamina{display:block; position:absolute}
html.sin-js .banco-pie, html.lamina .banco-pie{display:none}
html.sin-js .contador, html.lamina .contador{position:static; opacity:1; padding:6px var(--gutter) 0}
html.sin-js .latidos, html.lamina .latidos{margin-top:0; padding:24px 0 8px; pointer-events:auto}
html.sin-js .paso, html.lamina .paso, html.sin-js .paso:last-child, html.lamina .paso:last-child{height:auto}
html.sin-js .latido, html.lamina .latido{position:static; opacity:1; transform:none; margin:0 auto 26px; transition:none}
html.sin-js .titulo .palabra, html.lamina .titulo .palabra{clip-path:none}
html.sin-js .latido .puerta-enlace, html.lamina .latido .puerta-enlace{opacity:1}
html.sin-js svg.mapa .ruta, html.lamina svg.mapa .ruta{stroke-dashoffset:0}
html.sin-js svg.mapa .etiqueta, html.lamina svg.mapa .etiqueta, html.sin-js svg.mapa .voz, html.lamina svg.mapa .voz{opacity:1; transform:none}
@supports (offset-path:path("M0 0")){ html.sin-js svg.mapa .cordada, html.lamina svg.mapa .cordada{opacity:1} }
html.sin-js svg.mapa .cordada use, html.lamina svg.mapa .cordada use{offset-distance:var(--od, 60%)}
html.sin-js svg.mapa .cuerda, html.lamina svg.mapa .cuerda{opacity:1; stroke-dasharray:0 .60 .10 1}
html.sin-js .mapa-zoom, html.lamina .mapa-zoom{transform:none !important; position:relative}
html.sin-js #rutas .latidos.capa, html.lamina #rutas .latidos.capa{position:static; height:auto; margin:0; padding:24px 0 8px}
html.sin-js .capa .cabecera, html.lamina .capa .cabecera, html.sin-js .capa .cordada-linea, html.lamina .capa .cordada-linea, html.sin-js .puertas, html.lamina .puertas{position:static; transform:none; opacity:1; padding:0 var(--gutter); margin:0 auto; max-width:var(--ancho)}
html.sin-js .puertas, html.lamina .puertas{display:grid; gap:10px; margin:18px auto}
html.sin-js .puerta, html.lamina .puerta{position:static; opacity:1; transform:none; pointer-events:auto}
html.sin-js .voz-movil, html.lamina .voz-movil{display:none}
html.sin-js .cajon-caja .lamina-cajon{max-height:none; opacity:1; padding:2px 14px 16px}
html.sin-js .lamina-cajon svg, html.lamina .lamina-cajon svg{clip-path:none}
html.sin-js .libro li, html.lamina .libro li{clip-path:none}
html.sin-js .sillas-lista, html.lamina .sillas-lista{display:block}
html.sin-js .rail, html.lamina .rail{display:none}
html.sin-js .cabecera, html.lamina .cabecera{margin-bottom:12px}

@media (prefers-reduced-motion:reduce){
  .acto.pegajoso{min-height:0}
  .escena{position:relative; height:auto; overflow:visible}
  .dibujo, .mapa-caja{position:relative; height:auto; aspect-ratio:16/9; max-height:calc(70 * var(--vh)); width:100% !important}
  .tinta{display:none}
  .lamina{display:block; position:absolute}
  .banco-pie{display:none}
  .contador{position:static; opacity:1; padding:6px var(--gutter) 0}
  .latidos{margin-top:0; padding:24px 0 8px; pointer-events:auto}
  .paso, .paso:last-child{height:auto}
  .latido{position:static; opacity:1; transform:none; margin:0 auto 26px; transition:none}
  .titulo .palabra{clip-path:none}
  .latido .puerta-enlace{opacity:1}
  svg.mapa .ruta{stroke-dashoffset:0}
  svg.mapa .etiqueta, svg.mapa .voz{opacity:1; transform:none}
  @supports (offset-path:path("M0 0")){ svg.mapa .cordada{opacity:1} }
  svg.mapa .cordada use{offset-distance:var(--od, 60%)}
  svg.mapa .cuerda{opacity:1; stroke-dasharray:0 .60 .10 1}
  .mapa-zoom{transform:none !important; position:relative}
  #rutas .latidos.capa{position:static; height:auto; margin:0; padding:24px 0 8px}
  .capa .cabecera, .capa .cordada-linea, .puertas{position:static; transform:none; opacity:1; padding:0 var(--gutter); margin:0 auto; max-width:var(--ancho)}
  .puertas{display:grid; gap:10px; margin:18px auto}
  .puerta{position:static; opacity:1; transform:none; pointer-events:auto}
  .voz-movil{display:none}
  .cajon-caja .lamina-cajon{transition:none}
  .lamina-cajon svg{clip-path:none; transition:none}
  .libro li{clip-path:none; transition:none}
  .sillas-lista{display:block}
  .rail{display:none}
  .cabecera{margin-bottom:12px}
  .etiqueta, .puerta, .bocadillo, .contador, .lamina-cajon{transition:none}
}

/* a11y: los enlaces de latidos y puertas que aún no se ven no reciben foco (con JS y sin modo lámina) */
html:not(.lamina):not(.sin-js) .latido:not(.en) a, html:not(.lamina):not(.sin-js) .latido:not(.en) details, html:not(.lamina):not(.sin-js) .puerta:not(.en):not(.actual) a{visibility:hidden} /* a11y */
.voces-lista{display:none; list-style:none; padding:0; margin:12px 0 0; font-family:var(--display); font-style:italic; font-size:15px; color:var(--gris); max-width:none}
.voces-lista li{padding:6px 0; border-top:1px solid var(--rule-2)}
@media (max-width:899px){ html.sin-js .voces-lista, html.lamina .voces-lista{display:block} }
@media (prefers-reduced-motion:reduce) and (max-width:899px){ .voces-lista{display:block} }

/* apaisado de teléfono: menos altura para el dibujo, latidos más cortos */
@media (max-height:480px){ :root{--T:calc(40 * var(--vh)); --dibujo:calc(46 * var(--vh))} .latido{font-size:clamp(18px,3.4vw,24px)} .contador{bottom:8px} }
@supports not (aspect-ratio:1){ .banco-pie::before{content:""; display:block; padding-top:50%} }

/* ── v0.4 · contextualizar (23-sep): la línea llana, las voces arriba, las caras en la Mesa ── */
.llana{display:block; margin:14px auto 0; max-width:38ch; font-family:var(--body); font-size:clamp(15px,3.9vw,17px); line-height:1.55; color:var(--gris); letter-spacing:0}
.latido.definicion{font-size:clamp(19px,4.8vw,26px); line-height:1.4; max-width:30ch}
.cabecera .llana{font-size:clamp(14px,3.6vw,16px); margin-top:8px}
.voces-arriba{list-style:none; padding:0; margin:22px 0 0; border-top:1px solid var(--rule)}
.voces-arriba li{font-family:var(--display); font-size:clamp(19px,4.8vw,24px); line-height:1.35; color:var(--tinta); padding:14px 0; border-bottom:1px solid var(--rule-2); max-width:34ch}
.acto.flujo .linea.puente{margin:30px 0 0; color:var(--tinta)}
.silla img{position:absolute; inset:0; width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:50% 22%; background:var(--paper); box-shadow:0 0 0 1px var(--rule); transition:box-shadow .25s}
.silla::after{display:none}
.silla:hover img,.silla[aria-expanded="true"] img,.silla:focus-visible img{box-shadow:0 0 0 2px var(--tinta)}

.cabecera .llana{margin-left:0; white-space:normal}
@media (min-width:900px){ .puertas{top:calc(calc(18 * var(--vh)) + 44px)} }
@media (min-width:600px){ .silla{width:66px; height:66px; margin:-33px 0 0 -33px} }
@media (min-width:900px) and (max-height:900px){
  .puertas{gap:6px; top:calc(calc(16 * var(--vh)) + 40px)} .capa .cabecera{top:calc(10 * var(--vh))}
  .puerta{padding:11px 16px 9px} .puerta .para{margin-bottom:3px} .puerta h3{font-size:20px; margin-bottom:4px}
  .puerta p{font-size:14px; line-height:1.5; margin-bottom:6px}
}
/* #voces, centrado (23-sep): las frases como anotaciones de cuaderno, una a una */
#voces .flujo-in{text-align:center}
#voces h2{margin-left:auto; margin-right:auto; max-width:24ch}
.voces-arriba{border-top:0; margin:34px auto 0; max-width:34ch}
.voces-arriba li{font-style:italic; font-size:clamp(20px,5.2vw,27px); line-height:1.38; padding:0; margin:0 auto; border:0; max-width:none}
.voces-arriba li + li{margin-top:22px}
.voces-arriba li + li::before{content:""; display:block; width:28px; height:1px; margin:0 auto 22px; background:var(--verdin-c, var(--rule))}
#voces .linea.puente{margin:40px auto 0; max-width:32ch; font-size:clamp(19px,4.8vw,24px)}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    html:not(.lamina) .voces-arriba li, html:not(.lamina) #voces .puente{animation:voz-entra linear both; animation-timeline:view(); animation-range:entry 10% cover 30%}
  }
}
@keyframes voz-entra{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.mesa-guia{font-size:clamp(15px,3.9vw,17px) !important; margin-top:-18px !important; font-family:var(--body) !important}
.mesa-guia{max-width:none !important}