/* EXCESS · la historia. Una sola dirección: blanco y negro con sus balances, el nombre como monumento con las
   cadenas del container dentro. Revista que se lee bajando; la consola es un capítulo. Objetivo: que lo contraten. */
:root{
  --negro:#0A0A0A; --carbon:#161616; --grafito:#262626; --acero:#3D3D3D; --ceniza:#7A7A7A; --niebla:#B5B3AE; --hueso:#E6E3DC; --luz:#F5F4F0;
  --m:clamp(16px,2.4vw,36px); --nivel:0;
  --t-body:clamp(1.0625rem,1rem + .3vw,1.25rem);
  --t-lead:clamp(1.2rem,1.05rem + .6vw,1.6rem);
  --t-head:clamp(2.6rem,1.4rem + 4.4vw,6.2rem);
  --t-sub:clamp(1.35rem,1.1rem + .9vw,2rem);
  color-scheme:dark;
}
html[data-balance="contraste"]{--filtro:contrast(1.4) brightness(1.02)}
html[data-balance="sombra"]{--filtro:brightness(.52) contrast(1.35)}
html[data-balance="negativo"]{--filtro:invert(1) contrast(1.25)}
*{box-sizing:border-box} html,body{margin:0}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{background:var(--negro);color:var(--luz);font:400 var(--t-body)/1.55 "Onest",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--luz);outline-offset:3px}
.foto{filter:var(--filtro);transition:filter .5s ease}
h1,h2,h3{margin:0;text-wrap:balance}
h2{font:800 var(--t-head)/.92 "Unbounded",sans-serif;letter-spacing:-.04em;text-transform:uppercase}
h3{font:500 var(--t-sub)/1.1 "Unbounded",sans-serif;letter-spacing:-.02em}
p{margin:0}

/* Botones: una sola forma, rectos */
.btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 26px;border:0;font:500 16px "Onest",sans-serif;text-decoration:none;cursor:pointer;transition:background .2s,transform .12s}
.btn:active{transform:scale(.97)}
.btn-claro{background:var(--luz);color:var(--negro)} .btn-claro:hover{background:var(--niebla)}
.btn-oscuro{background:var(--negro);color:var(--luz)} .btn-oscuro:hover{background:var(--acero)}
.enlace{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.enlace:hover{color:var(--niebla)}

/* Barra superior: nombre, capítulos, contratar */
.barra{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:28px;padding:12px var(--m);background:var(--negro)}
.barra .marca{font:800 20px/1 "Unbounded",sans-serif;letter-spacing:-.03em;text-transform:uppercase;text-decoration:none}
.barra nav{display:flex;gap:24px;margin-left:auto;font-size:15px;font-weight:500}
.barra nav a{text-decoration:none;color:var(--niebla);transition:color .2s} .barra nav a:hover,.barra nav a.activo{color:var(--luz)}
.barra .btn{height:42px;padding:0 20px;font-size:15px}

/* ───────── Portada: retrato sobre el nombre; las cadenas del container dentro de las letras ───────── */
.portada{position:relative;min-height:calc(min(100svh,1000px) - 66px);padding:28px var(--m) var(--m);display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:1fr auto;column-gap:16px}
.portada-texto{grid-column:1/6;grid-row:1;align-self:start;display:grid;gap:28px;z-index:2}
.lema{font-size:var(--t-lead);line-height:1.35;max-width:28ch}
.acciones{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.portada-retrato{grid-column:6/9;grid-row:1;align-self:end;margin:0 0 -2px;max-height:56svh;aspect-ratio:4/5;overflow:hidden}
.portada-retrato img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.monumento{grid-column:1/-1;grid-row:2;font:800 100px/.78 "Unbounded",sans-serif;letter-spacing:-.045em;text-transform:uppercase;white-space:nowrap;pointer-events:none;
  background:url(img/a001-violeta.jpg) center 30%/cover;-webkit-background-clip:text;background-clip:text;color:transparent;filter:var(--filtro)}
.monumento span,.pie-nombre span{display:inline-block}

/* ───────── Capítulos ───────── */
.capitulo{padding:clamp(96px,12vw,200px) var(--m);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;position:relative}

.nombre-foto{grid-column:1/6;margin:0}
.nombre-foto img{width:100%;aspect-ratio:4/5;object-fit:cover}
.nombre-texto{grid-column:7/13;align-self:center;display:grid;gap:22px}
.nombre-texto h2{margin-bottom:12px}
.nombre-texto p{max-width:44ch}
blockquote{margin:28px 0 0;font:300 clamp(1.6rem,1.1rem + 1.8vw,2.6rem)/1.15 "Unbounded",sans-serif;letter-spacing:-.02em;max-width:22ch}
blockquote cite{display:block;margin-top:14px;font:500 16px "Onest";font-style:normal;color:var(--niebla)}

/* ───────── Línea de tiempo (en escritorio se fija y avanza de lado) ───────── */
.linea{background:var(--carbon);position:relative}
.linea-pin{min-height:100svh;display:grid;grid-template-rows:auto 1fr;padding:clamp(72px,9vw,120px) 0 48px;overflow:hidden}
.linea-cabeza{padding:0 var(--m);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px 24px;margin-bottom:48px}
.linea-cabeza p{color:var(--niebla);font-size:var(--t-lead)}
.linea-avance{grid-column:1/-1;height:4px;background:var(--grafito);margin-top:16px}
.linea-avance i{display:block;height:100%;width:100%;background:var(--luz);transform-origin:0 50%;transform:scaleX(var(--avance,0))}
.linea-pista{list-style:none;margin:0;padding:0 var(--m);display:flex;gap:clamp(24px,3vw,48px);align-items:flex-start;will-change:transform}
.linea-pista li{flex:0 0 clamp(280px,30vw,440px);display:grid;gap:20px}
.linea-pista figure{margin:0;aspect-ratio:4/5;overflow:hidden;max-height:50svh}
.linea-pista img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s}
.linea-pista li:hover img{transform:scale(1.04)}
.linea-pista b{display:block;font:500 15px "Onest";color:var(--niebla);margin-bottom:8px}
.linea-pista h3{margin-bottom:10px}
.linea-pista p{color:var(--hueso);max-width:38ch}

/* ───────── El sonido ───────── */
.sonido-texto{grid-column:1/6;align-self:center;display:grid;gap:24px}
.generos{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.generos button{height:50px;padding:0 22px;border:0;background:var(--grafito);color:var(--luz);font:500 16px "Onest";cursor:pointer;transition:background .2s,color .2s}
.generos button:hover{background:var(--acero)}
.generos button[aria-pressed="true"]{background:var(--luz);color:var(--negro)}
.genero-nota{color:var(--hueso);min-height:3em}
.palabras{font:300 clamp(1.1rem,1rem + .6vw,1.5rem)/1.4 "Unbounded";color:var(--niebla)}
.sonido-foto{grid-column:7/13;margin:0}
.sonido-foto img{width:100%;aspect-ratio:4/5;object-fit:cover}
.sonido-foto figcaption{margin-top:12px;color:var(--niebla);font-size:15px}

/* ───────── Escúchalo ───────── */
.escuchar{background:var(--carbon);align-items:center}
.escuchar-texto{grid-column:1/5;display:grid;gap:24px;align-content:center}
.video-fachada{position:relative;display:grid;gap:10px;padding:0;border:0;background:none;color:var(--luz);text-align:left;cursor:pointer;font:500 16px "Onest"}
.video-fachada img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:grayscale(1) contrast(1.2) brightness(.8);transition:filter .3s}
.video-fachada::after{content:"";position:absolute;left:50%;top:calc(50% - 18px);width:0;height:0;margin:-18px 0 0 -12px;border-left:30px solid var(--luz);border-top:18px solid transparent;border-bottom:18px solid transparent}
.video-fachada:hover img{filter:grayscale(1) contrast(1.2) brightness(1)}
.video-marco{aspect-ratio:16/9;width:100%}
.video-marco iframe{width:100%;height:100%;border:0}
.escuchar-texto .btn{justify-self:start}

/* La consola (pieza de equipo: lleva sus propios materiales) */
.cdj{grid-column:6/13;justify-self:end;width:min(100%,640px);padding:18px;border-radius:16px;user-select:none;display:grid;gap:16px;
  font-family:"Barlow Condensed",sans-serif;font-variant-numeric:tabular-nums;color:#e9e7e2;
  background:radial-gradient(120% 60% at 50% -10%,rgba(255,255,255,.06),transparent 60%),linear-gradient(#1b1b1c,#111112);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 0 #050505,0 50px 90px -30px #000,0 0 0 1px #050505}
.pantalla{border-radius:6px;overflow:hidden;background:#030303;box-shadow:0 0 0 8px #0b0b0b,0 0 0 9px #2a2a2a;margin:9px;display:grid;grid-template-rows:30px auto 52px;position:relative}
.pantalla::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.06),rgba(255,255,255,0) 38%)}
.barra-estado{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:0 10px;background:#101010;font-size:15px;font-weight:600}
.deck{background:#e9e7e2;color:#000;text-align:center;border-radius:2px;font-size:14px;line-height:20px}
.titulo-pista{overflow:hidden;white-space:nowrap}
.titulo-pista span{display:inline-block}
.titulo-pista.largo span{animation:corre 14s linear infinite;padding-right:60px}
@keyframes corre{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.t-resta{color:#9b9893}
.lista{list-style:none;margin:0;padding:8px;font-size:18px;font-weight:500;min-height:190px}
.lista li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 8px;border-radius:3px;cursor:pointer;line-height:1.15}
.lista li small{display:block;font-size:13px;color:#8d8a85}
.lista li .der{color:#9b9893;font-size:15px}
.lista li:hover{background:#151515}
.lista li[aria-selected="true"]{background:#e9e7e2;color:#000}
.lista li[aria-selected="true"] small,.lista li[aria-selected="true"] .der{color:#3a3a3a}
.lista li.sonando{padding-left:20px}
.lista li.sonando::before{content:"";position:absolute;left:6px;top:50%;margin-top:-6px;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.lista li.vacia{cursor:default;color:#8d8a85;display:block}
.onda{width:100%;height:52px;display:block;cursor:pointer;background:#060606;border-top:1px solid #1d1d1d}
.pads{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.pad{height:38px;border:0;border-radius:5px;cursor:pointer;font:700 14px "Barlow Condensed";color:#8d8a85;
  background:linear-gradient(#232324,#19191a);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 0 #060606,inset 0 -3px 0 #2c2c2c;transition:all .15s}
.pad:hover{color:#fff}
.pad.activo{color:#000;background:#e9e7e2;box-shadow:0 0 14px rgba(245,244,240,.55),inset 0 -3px 0 #bdbab4}
.cdj-abajo{display:grid;grid-template-columns:96px minmax(0,1fr) 72px;align-items:center;gap:10px}
.transporte{display:flex;flex-direction:column;gap:16px;align-items:center;align-self:end}
.redondo{width:76px;height:76px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;font:700 15px "Barlow Condensed";letter-spacing:.06em;text-transform:uppercase;color:#d9d7d2;
  background:radial-gradient(circle at 50% 35%,#2b2b2c,#171718 70%);box-shadow:0 0 0 3px #0b0b0b,0 0 0 5px #3a3a3a,0 4px 0 5px #060606;transition:box-shadow .2s,transform .08s}
.redondo svg{width:24px;height:24px;fill:currentColor}
.redondo:active{transform:translateY(2px)}
.redondo.play.listo{animation:parpadeo 1s steps(2) infinite}
.redondo.play[aria-pressed="true"]{color:#fff;box-shadow:0 0 0 3px #0b0b0b,0 0 0 5px #f5f4f0,0 0 22px 4px rgba(245,244,240,.45),0 4px 0 5px #060606;animation:none}
.redondo.cue.encendido{box-shadow:0 0 0 3px #0b0b0b,0 0 0 5px #bdbab4,0 4px 0 5px #060606}
@keyframes parpadeo{50%{box-shadow:0 0 0 3px #0b0b0b,0 0 0 5px #f5f4f0,0 0 16px 2px rgba(245,244,240,.35),0 4px 0 5px #060606}}
.cdj [hidden]{display:none!important}
.jog{width:min(100%,330px);aspect-ratio:1;justify-self:center;border-radius:50%;position:relative;cursor:grab;touch-action:none}
.jog:active{cursor:grabbing}
.jog-anillo{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(#2f2f30 0 .9deg,#161617 .9deg 1.8deg);
  box-shadow:0 0 0 2px #070707,0 0 calc(10px + var(--nivel) * 34px) calc(var(--nivel) * 6px) rgba(245,244,240,calc(.12 + var(--nivel) * .55)),inset 0 0 0 3px rgba(245,244,240,calc(.18 + var(--nivel) * .7))}
.jog-plato{position:absolute;inset:7%;border-radius:50%;will-change:transform;
  background:repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.035) 0 1px,rgba(0,0,0,.05) 1px 3px),
    conic-gradient(from 20deg,#8d8d8d,#2f2f2f 11%,#a2a2a2 24%,#353535 37%,#8f8f8f 50%,#2f2f2f 62%,#a2a2a2 75%,#353535 88%,#8d8d8d);
  box-shadow:inset 0 0 0 2px #0a0a0a,inset 0 0 30px rgba(0,0,0,.55),0 6px 18px rgba(0,0,0,.7)}
.jog-pantalla{position:absolute;inset:27%;border-radius:50%;overflow:hidden;background:#000;box-shadow:0 0 0 4px #0b0b0b,0 0 0 6px #444}
.jog-pantalla img{width:100%;height:100%;object-fit:cover;filter:var(--filtro) brightness(.85)}
.jog-marca{position:absolute;left:50%;top:5%;width:4px;height:18%;margin-left:-2px;background:#fff;border-radius:2px;box-shadow:0 0 6px #fff}
.volumen{display:flex;flex-direction:column;align-items:center;gap:8px;font:600 13px "Barlow Condensed";letter-spacing:.08em;text-transform:uppercase;color:#77746f}
.volumen input{writing-mode:vertical-lr;direction:rtl;height:180px;width:30px;accent-color:#e9e7e2;cursor:ns-resize}
.volumen output{font-size:18px;color:#e9e7e2;letter-spacing:0}

/* ───────── UMBRA ───────── */
.umbra-cabeza{grid-column:1/13;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;row-gap:28px;margin-bottom:72px}
.umbra-logo{grid-column:1/6;width:100%;max-width:520px;height:auto}
.umbra-cabeza h2{grid-column:1/9}
.umbra-cabeza p{grid-column:1/7;font-size:var(--t-lead);line-height:1.4;color:var(--hueso)}
.umbra-cuerpo{grid-column:1/13;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px}
.umbra-pestanas{grid-column:1/5;display:grid;align-content:start}
.umbra-pestanas button{text-align:left;border:0;background:none;color:var(--ceniza);padding:14px 0;cursor:pointer;font:500 clamp(1.2rem,1rem + .9vw,1.9rem)/1.1 "Unbounded";letter-spacing:-.02em;transition:color .2s,padding .3s}
.umbra-pestanas button:hover{color:var(--hueso)}
.umbra-pestanas button[aria-selected="true"]{color:var(--luz);padding-left:18px;box-shadow:inset 4px 0 0 var(--luz)}
.umbra-panel{grid-column:5/13;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px;align-items:end}
.umbra-panel figure{margin:0;aspect-ratio:4/5;overflow:hidden}
.umbra-panel img{width:100%;height:100%;object-fit:cover}
.umbra-info{display:grid;gap:14px;padding-bottom:8px}
.umbra-info p{color:var(--hueso)}

/* ───────── Dónde ha sonado ───────── */
.donde{background:var(--carbon);row-gap:56px}
.donde-texto{grid-column:1/7;display:grid;gap:22px;align-content:start}
.lugares{list-style:none;margin:8px 0 0;padding:0;display:grid}
.lugares li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:12px 14px;cursor:pointer;transition:background .2s}
.lugares li:hover{background:var(--grafito)}
.lugares li[aria-selected="true"]{background:var(--luz);color:var(--negro)}
.lugares li b{font:500 clamp(1.1rem,1rem + .5vw,1.45rem) "Unbounded";letter-spacing:-.02em}
.lugares li small{display:block;font-size:15px;color:var(--niebla);margin-top:4px}
.lugares li[aria-selected="true"] small,.lugares li[aria-selected="true"] span{color:var(--acero)}
.lugares li span{color:var(--niebla)}
.donde-texto .btn{justify-self:start;margin-top:12px}
.mapa{grid-column:8/13;width:100%;aspect-ratio:4/5;background:#0d0d0d;align-self:start;position:sticky;top:90px}
.mapa .pais{fill:#151515;stroke:#5a5a5a;stroke-width:2;vector-effect:non-scaling-stroke}
.mapa .reja{stroke:#1d1d1d;stroke-width:1;vector-effect:non-scaling-stroke}
.mapa .punto{fill:#e9e7e2}
.mapa .onda-p{fill:none;stroke:#e9e7e2;stroke-width:1.5;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;animation:sonar 1.8s ease-out infinite}
.mapa g text{display:none;fill:#e9e7e2;font-family:"Unbounded";font-weight:500;paint-order:stroke;stroke:#0d0d0d;stroke-width:5px}
.mapa g.activa text{display:inline} .mapa g:not(.activa) .onda-p{display:none}
@keyframes sonar{from{transform:scale(.4);opacity:1}to{transform:scale(3.2);opacity:0}}
.cinta{grid-column:1/-1;overflow:hidden;white-space:nowrap;font:300 clamp(1.4rem,1rem + 1.6vw,2.4rem) "Unbounded";letter-spacing:-.02em;color:var(--hueso)}
.cinta-mueve{display:inline-block;animation:corre 40s linear infinite}

/* ───────── En imágenes ───────── */
.galeria{padding-left:0;padding-right:0}
.galeria-cabeza{grid-column:1/-1;padding:0 var(--m);display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.galeria-cabeza p{color:var(--niebla)}
.carrete{grid-column:1/-1;display:flex;gap:12px;overflow-x:auto;padding:0 var(--m) 8px;scroll-snap-type:x proximity;scrollbar-width:none;cursor:grab;outline-offset:-2px}
.carrete::-webkit-scrollbar{display:none}
.carrete.arrastrando{cursor:grabbing;scroll-snap-type:none}
.carrete button{flex:0 0 auto;height:min(64svh,560px);padding:0;border:0;background:var(--carbon);cursor:zoom-in;scroll-snap-align:start;position:relative;overflow:hidden}
.carrete button img{height:100%;width:auto;max-width:none;transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .5s;pointer-events:none}
.carrete button:hover img{transform:scale(1.03)}
.carrete button span{position:absolute;left:12px;bottom:12px;font-size:15px;font-weight:500;background:var(--negro);padding:4px 10px}
.visor{max-width:min(94vw,1100px);max-height:94svh;padding:0;border:0;background:var(--negro);color:var(--luz)}
.visor::backdrop{background:rgba(10,10,10,.92)}
.visor img{max-height:84svh;width:auto;margin:0 auto;filter:var(--filtro)}
.visor p{padding:12px 16px 0;color:var(--niebla)}
.visor .cerrar{position:absolute;top:10px;right:10px;height:40px;padding:0 16px;border:0;background:var(--luz);color:var(--negro);font:500 15px "Onest";cursor:pointer}

/* ───────── Lo que viene: campo hueso ───────── */
.viene{background:var(--hueso);color:var(--negro);row-gap:64px}
.viene h2{grid-column:1/-1}
.metas{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.metas h3{margin-bottom:12px}
.metas p{color:var(--acero);max-width:30ch}
.proximas{grid-column:1/-1;display:grid;gap:20px}
.proximas h3 .cuenta{font:500 16px "Onest";color:var(--acero);margin-left:12px;letter-spacing:0}
.fechas{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fechas li{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:24px;align-items:center;padding:18px 20px;background:#d9d5cc}
.fechas .dia{font:800 clamp(1.8rem,1.4rem + 1.2vw,2.6rem)/1 "Unbounded";letter-spacing:-.03em}
.fechas .dia small{display:block;font:500 14px "Onest";letter-spacing:0;margin-top:6px;color:var(--acero)}
.fechas .lugar{font:500 clamp(1.1rem,1rem + .5vw,1.4rem) "Unbounded";letter-spacing:-.02em}
.fechas .lugar small{display:block;font:400 15px "Onest";letter-spacing:0;color:var(--acero);margin-top:4px}
.fechas .etiqueta{font:600 12px "Onest";letter-spacing:.06em;border:1.5px solid currentColor;padding:2px 6px;margin-left:8px;vertical-align:3px;color:var(--acero)}
.fechas .boletas{font-weight:500;text-decoration:none;background:var(--negro);color:var(--luz);padding:10px 16px}
.fechas .vacia{display:block;color:var(--acero)}

/* ───────── Booking ───────── */
.booking-texto{grid-column:1/6;display:grid;gap:22px;align-content:start}
.booking-texto p{font-size:var(--t-lead);line-height:1.4;color:var(--hueso);max-width:30ch}
.booking-texto .rider{font-size:16px;color:var(--niebla)}
.formulario{grid-column:7/13;display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;align-content:start}
.formulario label{display:grid;gap:8px;font-size:15px;color:var(--niebla)}
.formulario .ancho{grid-column:1/-1}
.formulario input{height:54px;background:var(--carbon);border:1.5px solid var(--acero);color:var(--luz);padding:0 14px;font:16px "Onest";border-radius:0}
.formulario input:focus{border-color:var(--luz);outline:none}
.formulario .btn{height:58px;background:var(--luz);color:var(--negro);font-size:17px}
.formulario .btn:hover{background:var(--niebla)}

/* ───────── Pie ───────── */
.pie{background:var(--hueso);color:var(--negro);padding:120px var(--m) var(--m)}
.pie-nombre{margin:0 0 40px;font:800 100px/.78 "Unbounded",sans-serif;letter-spacing:-.045em;text-transform:uppercase;white-space:nowrap;pointer-events:none}
.pie-linea{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:16px}
.pie-linea nav{display:flex;gap:24px;flex-wrap:wrap}
.pie-linea a{text-decoration:none;font-weight:500} .pie-linea a:hover{text-decoration:underline;text-underline-offset:4px}
.sc{position:fixed;width:1px;height:1px;left:-10px;bottom:0;opacity:0;pointer-events:none;border:0}
.estrobo{position:fixed;inset:0;z-index:60;background:#fff;opacity:0;pointer-events:none}

/* ───────── Celular ───────── */
@media (max-width:900px){
  .barra{gap:12px}.barra nav{display:none}.barra .btn{margin-left:auto}
  .portada,.capitulo,.umbra-cabeza,.umbra-cuerpo{grid-template-columns:minmax(0,1fr)}
  .portada{grid-template-rows:auto auto auto;row-gap:28px;padding-top:24px}
  .portada-texto,.portada-retrato,.monumento{grid-column:1}
  .portada-retrato{grid-row:2;width:72%;justify-self:end;max-height:none}
  .monumento{grid-row:3}
  .nombre-foto,.nombre-texto,.sonido-texto,.sonido-foto,.escuchar-texto,.cdj,.umbra-logo,.umbra-cabeza h2,.umbra-cabeza p,.umbra-pestanas,.umbra-panel,
  .donde-texto,.mapa,.booking-texto,.formulario{grid-column:1}
  .nombre-texto,.sonido-foto,.cdj,.formulario{margin-top:48px}
  .linea-pin{min-height:auto}
  .linea-cabeza{grid-template-columns:minmax(0,1fr)}
  .linea-avance{display:none}
  .linea-pista{flex-direction:column;gap:56px}
  .linea-pista li{flex:none;width:100%}
  .linea-pista figure{max-height:none}
  .cdj{justify-self:stretch;width:100%;padding:12px}
  .cdj-abajo{grid-template-columns:58px minmax(0,1fr) 46px;gap:6px}
  .redondo{width:54px;height:54px}.redondo svg{width:20px;height:20px}
  .volumen input{height:130px}
  .pads{gap:5px}.pad{height:34px}
  .umbra-pestanas{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;gap:20px;margin-bottom:24px;scrollbar-width:none}
  .umbra-pestanas button{font-size:1.05rem}
  .umbra-pestanas button[aria-selected="true"]{padding-left:0;box-shadow:inset 0 -3px 0 var(--luz)}
  .umbra-panel{grid-template-columns:minmax(0,1fr)}
  .mapa{position:static;aspect-ratio:1}
  .metas{grid-template-columns:minmax(0,1fr)}
  .fechas li{grid-template-columns:76px minmax(0,1fr);gap:14px}
  .fechas li > :last-child{grid-column:2;justify-self:start}
  .formulario{grid-template-columns:minmax(0,1fr)}
  .carrete button{height:58svh}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cinta-mueve,.titulo-pista.largo span,.onda-p,.redondo.play.listo{animation:none}
}
/* la fila de fotos de la línea es muy ancha: la columna no puede crecer con ella */
.linea-pin{grid-template-columns:minmax(0,1fr);width:100%}
.linea-cabeza{min-width:0}
/* el retrato del nombre no debe empujar el título fuera de la pantalla */
.nombre-foto img{max-height:82svh;object-position:50% 30%}
.nombre-cap{align-items:center}
@media (min-width:901px){
  .linea-pin{height:100svh;min-height:0;padding-top:clamp(40px,6vh,80px);padding-bottom:28px}
  .linea h2{font-size:clamp(2.2rem,1.2rem + 3vw,4.6rem)}
  .linea-cabeza{margin-bottom:28px}
  .linea-pista figure{max-height:40svh}
  .linea-pista li{gap:14px}
  .linea-pista h3{font-size:clamp(1.2rem,1rem + .7vw,1.7rem)}
}
.sonido{align-items:center}
.sonido-foto img{max-height:80svh}
.umbra-panel figure{max-height:70svh}

/* ═══════════ Capa editorial (directorcreativo 152 + 159, desingweb 45) ═══════════
   Tres voces: Unbounded = titulares (la marca) · Newsreader = lectura y citas · Onest = rótulos, créditos y botones. */
:root{ --serif:"Newsreader","Iowan Old Style",Georgia,serif; --sans:"Onest",system-ui,sans-serif; }
body{font-family:var(--serif);font-size:clamp(1.125rem,1.05rem + .35vw,1.3rem);line-height:1.6;
  font-kerning:normal;font-feature-settings:"kern","liga","onum";font-optical-sizing:auto}
.capitulo p,.linea-pista p,.lema{text-wrap:pretty;hanging-punctuation:first last}
.capitulo p{max-width:60ch}
/* lo que es interfaz vuelve a la sans */
.barra,.btn,.enlace,.generos button,.umbra-pestanas button,.lugares li span,.lugares li small,.cuenta,.fechas .dia small,.fechas .lugar small,
.formulario label,.formulario input,.pie-linea,figcaption,.video-fachada,.genero-nota,.rider,.galeria-cabeza p,.linea-cabeza p,.palabras,.carrete button span,.visor p,.cinta{font-family:var(--sans)}
.lema{font-family:var(--serif);font-size:clamp(1.35rem,1.15rem + .8vw,1.9rem);line-height:1.3;font-weight:400}

/* antetítulo: dice en qué capítulo de la historia estás (la historia sí es una secuencia) */
.kicker{display:block;font:500 13px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--niebla);margin-bottom:22px}
.viene .kicker{color:var(--acero)}
/* bajada: la frase que abre cada capítulo, en cursiva */
.bajada{font:italic 400 clamp(1.3rem,1.1rem + .8vw,1.8rem)/1.32 var(--serif);color:var(--hueso);max-width:34ch!important}
.viene .bajada{color:var(--acero)}
/* capitular */
.capitular::first-letter{-webkit-initial-letter:3 2;initial-letter:3 2;font-family:"Unbounded",sans-serif;font-weight:800;margin-right:.12em;color:var(--luz)}
@supports not (initial-letter:3){.capitular::first-letter{float:left;font-size:4.1em;line-height:.8;margin:.06em .1em 0 0}}
/* citas: cursiva grande, comilla colgada */
blockquote{font:italic 400 clamp(2rem,1.3rem + 2.6vw,3.6rem)/1.06 var(--serif);letter-spacing:-.015em;max-width:20ch;text-indent:-.42em}
blockquote cite{text-indent:0;font-family:var(--sans)}
/* subtítulos editoriales en serif: contraste con los titulares anchos */
h3{font:500 clamp(1.45rem,1.2rem + .9vw,2.1rem)/1.12 var(--serif);letter-spacing:-.01em}
.linea-pista h3{font-family:var(--serif)}
.linea-pista b{font:500 clamp(1.2rem,1rem + .6vw,1.6rem)/1 "Unbounded",sans-serif;letter-spacing:-.02em;color:var(--luz);margin-bottom:12px;font-variant-numeric:lining-nums}
.lugares li b{font-family:var(--serif);font-weight:500;font-size:clamp(1.25rem,1.1rem + .6vw,1.65rem);letter-spacing:0}
.fechas .lugar{font-family:var(--serif);font-weight:500;letter-spacing:0}
.fechas .dia{font-variant-numeric:lining-nums}
.umbra-info h3{font-size:clamp(1.6rem,1.3rem + 1vw,2.4rem)}
/* créditos de foto, como en revista */
.credito{display:block;margin-top:10px;font:400 13px var(--sans);letter-spacing:.04em;color:var(--ceniza)}
.credito b{font-weight:500;color:var(--niebla)}
figcaption{font-size:14px}
.viene-cabeza{grid-column:1/-1;display:grid;gap:18px}
.portada-retrato{overflow:visible}
.portada-retrato .credito{position:absolute;right:0;bottom:calc(100% + 8px);margin:0}
.portada-retrato{position:relative}
.portada-retrato img{display:block}
.linea-cabeza h2{margin-top:0}
@media (min-width:901px){ .linea-pin{padding-top:calc(66px + clamp(28px,4vh,56px))} }
.umbra-cabeza .kicker{grid-column:1/-1;margin-bottom:0}
@media (max-width:900px){ blockquote{text-indent:0} }