/* =============================================================
   0. Tipografías, servidas desde el propio sitio
   ============================================================= */
@font-face{ font-family:"Cormorant Garamond"; font-style:normal; font-weight:400;
  src:url("assets/fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); font-display:swap; }
@font-face{ font-family:"Cormorant Garamond"; font-style:normal; font-weight:500;
  src:url("assets/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); font-display:swap; }
@font-face{ font-family:"Cormorant Garamond"; font-style:normal; font-weight:600;
  src:url("assets/fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); font-display:swap; }
@font-face{ font-family:"Cormorant Garamond"; font-style:italic; font-weight:400;
  src:url("assets/fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); font-display:swap; }
@font-face{ font-family:"Barlow"; font-style:normal; font-weight:400;
  src:url("assets/fonts/barlow-latin-400-normal.woff2") format("woff2"); font-display:swap; }
@font-face{ font-family:"Barlow"; font-style:normal; font-weight:500;
  src:url("assets/fonts/barlow-latin-500-normal.woff2") format("woff2"); font-display:swap; }
@font-face{ font-family:"Barlow"; font-style:normal; font-weight:600;
  src:url("assets/fonts/barlow-latin-600-normal.woff2") format("woff2"); font-display:swap; }

/* =============================================================
   OCB — Orquesta Contemporánea de Bolivia
   Mundo visual tomado del afiche de "4 Estaciones Recompuestas":
   el degradado va de negro a violeta profundo, igual que el papel.
   1. Tokens
   ============================================================= */
:root{
  --noche-0:  #07070E;
  --noche-1:  #0C0B24;
  --noche-2:  #131145;
  --violeta:  #1E1C79;
  --hueso:    #F3F1EA;
  --niebla:   #A4A3C6;
  --naranja:  #ED7B2F;
  --naranja-claro: #FFB169;

  /* Las cuatro estaciones, muestreadas de la hoja del afiche */
  --otono:     #CF3A03;
  --invierno:  #4E8AA8;
  --verano:    #E49206;
  --primavera: #5C8A32;

  --bg:      var(--noche-1);
  --fg:      var(--hueso);
  --fg-mute: var(--niebla);
  --line:    rgba(243,241,234,.14);
  --line-fuerte: rgba(243,241,234,.32);
  --accent:  var(--naranja);
  --tarjeta: rgba(243,241,234,.045);
  --tarjeta-hover: rgba(243,241,234,.085);

  --display: "Cormorant Garamond", Garamond, Georgia, serif;
  --sans: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Se mantiene el nombre por comodidad, pero ya no hay monoespaciada:
     las etiquetas y las fechas usan la misma sans, espaciada. */
  --mono: "Barlow", system-ui, -apple-system, sans-serif;

  --mast-h: 62px;
  --gutter: clamp(1.15rem, 4.5vw, 4rem);
  --ancho: 1240px;
  --radio: 3px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* =============================================================
   2. Reset y base
   ============================================================= */
*,*::before,*::after{ box-sizing:border-box; margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--mast-h) + 32px); }
body{
  font-family:var(--sans); font-size:16px; line-height:1.62;
  color:var(--fg); background:var(--noche-1);
  overflow-x:clip; -webkit-font-smoothing:antialiased;
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
input,select,textarea{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
p{ text-wrap:pretty; }
h1,h2,h3,h4{ text-wrap:balance; line-height:1.06; letter-spacing:-.005em; font-weight:500; }
ul{ list-style:none; padding:0; }
::selection{ background:var(--naranja); color:var(--noche-0); }
:focus-visible{ outline:2px solid var(--naranja); outline-offset:3px; border-radius:2px; }

/* la capa de ambiente: fija, detrás de todo, igual que el papel del afiche */
.ambiente{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% 0%, #05050C 0%, transparent 60%),
    radial-gradient(90% 60% at 20% 18%, rgba(237,123,47,.09), transparent 62%),
    radial-gradient(80% 55% at 85% 72%, rgba(78,138,168,.12), transparent 65%),
    linear-gradient(180deg, #06060D 0%, #0C0B24 34%, #141247 68%, #1E1C79 100%);
}
.ambiente__polvo{ position:absolute; inset:0; opacity:.5; }

.saltar{
  position:fixed; top:-120px; left:1rem; z-index:9999;
  padding:.7rem 1.1rem; background:var(--naranja); color:var(--noche-0);
  font-weight:600; border-radius:var(--radio);
}
.saltar:focus{ top:.9rem; }

/* =============================================================
   3. Utilidades
   ============================================================= */
.contenedor{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--gutter); }
.solo-lectores{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.rotulo{
  font-family:var(--sans); font-size:.7rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--fg-mute);
}
.rotulo--acento{ color:var(--naranja); }
.dato{ font-family:var(--sans); font-weight:500; letter-spacing:.06em; font-variant-numeric:tabular-nums; }
.linea{ height:1px; background:var(--line); border:0; }

/* =============================================================
   4. Tipografía
   ============================================================= */
.display{ font-family:var(--display); font-weight:500; }
.titulo-xl{ font-family:var(--display); font-weight:500; font-size:clamp(2.7rem, 9vw, 5.9rem); line-height:1.02; letter-spacing:-.005em; }
.titulo-l { font-family:var(--display); font-weight:500; font-size:clamp(2.15rem, 5.6vw, 3.7rem); line-height:1.06; }
.titulo-m { font-family:var(--display); font-weight:500; font-size:clamp(1.6rem, 3.4vw, 2.3rem); line-height:1.14; }
.titulo-s { font-size:clamp(1rem, 2vw, 1.16rem); font-weight:600; line-height:1.3; letter-spacing:.005em; }
em, .cursiva{ font-style:italic; }
.bajada{ font-size:clamp(1.02rem, 1.6vw, 1.18rem); color:var(--fg-mute); max-width:56ch; }
.texto{ max-width:62ch; color:var(--fg-mute); }
.texto p + p{ margin-top:1.1em; }
.texto strong{ color:var(--fg); font-weight:500; }

/* =============================================================
   5. Componentes
   ============================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.9rem 1.7rem; border-radius:var(--radio);
  font-weight:600; font-size:.92rem; text-align:center;
  transition:transform .35s var(--ease-out), background-color .3s var(--ease-out),
             color .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .4s var(--ease-out);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--principal{ background:var(--naranja); color:#160F06; box-shadow:0 0 0 rgba(237,123,47,0); }
.btn--principal:hover{ background:var(--naranja-claro); box-shadow:0 10px 34px rgba(237,123,47,.28); }
.btn--linea{ border:1px solid var(--line-fuerte); color:var(--fg); }
.btn--linea:hover{ border-color:var(--naranja); color:var(--naranja-claro); }
.btn--ancho{ width:100%; }
.btn[disabled]{ opacity:.34; pointer-events:none; }

.enlace{
  display:inline-flex; align-items:center; gap:.55rem;
  font-weight:600; font-size:.92rem; color:var(--fg);
  padding-bottom:.25rem; border-bottom:1px solid var(--line-fuerte);
  transition:color .3s var(--ease-out), border-color .3s var(--ease-out), gap .3s var(--ease-out);
}
.enlace:hover{ color:var(--naranja-claro); border-color:var(--naranja); gap:.9rem; }
.enlace .flecha{ transition:transform .3s var(--ease-out); }
.enlace:hover .flecha{ transform:translateX(3px); }

/* --- cabecera --- */
.masthead{
  position:fixed; inset:0 0 auto 0; z-index:900;
  background:rgba(8,8,20,.6); border-bottom:1px solid transparent;
  transition:background-color .4s var(--ease-out), border-color .4s var(--ease-out);
}
@supports (backdrop-filter: blur(10px)){ .masthead{ backdrop-filter:blur(16px) saturate(1.2); } }
.masthead.opaca{ background:rgba(8,8,20,.88); border-bottom-color:var(--line); }
.masthead__fila{ height:var(--mast-h); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.marca{ display:flex; align-items:center; gap:.65rem; min-width:0; }
.marca__logo{ width:clamp(148px, 24vw, 208px); height:auto; flex:none; }


.nav{ display:none; }
.nav__lista{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,1.9rem); }
.nav__link{ font-size:.88rem; font-weight:500; color:var(--fg-mute); padding:.3rem 0; position:relative; transition:color .3s var(--ease-out); }
.nav__link::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1.5px;
  background:var(--naranja); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease-out);
}
.nav__link:hover{ color:var(--fg); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after{ transform:scaleX(1); }
.nav__link[aria-current="page"]{ color:var(--fg); }
.nav__cta{ margin-left:.5rem; padding:.58rem 1.1rem; font-size:.85rem; }

.menu-btn{ width:42px; height:42px; margin-right:-8px; display:grid; place-items:center; gap:5px; }
.menu-btn span{ display:block; width:20px; height:1.5px; background:var(--fg); transition:transform .35s var(--ease-out); }
.menu-btn span:first-child{ grid-area:1/1; transform:translateY(-4px); }
.menu-btn span:last-child{ grid-area:1/1; transform:translateY(4px); }
.menu-abierto .menu-btn span:first-child{ transform:rotate(45deg); }
.menu-abierto .menu-btn span:last-child{ transform:rotate(-45deg); }

.menu-movil{
  position:fixed; inset:var(--mast-h) 0 auto 0; z-index:880;
  background:rgba(9,8,26,.97); border-bottom:1px solid var(--line);
  padding:1.2rem var(--gutter) 2rem;
  transform:translateY(-12px); opacity:0; visibility:hidden;
  transition:transform .4s var(--ease-out), opacity .3s var(--ease-out), visibility .3s;
}
.menu-abierto .menu-movil{ transform:translateY(0); opacity:1; visibility:visible; }
.menu-movil a{
  display:flex; align-items:baseline; gap:.9rem;
  padding:.85rem 0; border-bottom:1px solid var(--line);
  font-family:var(--display); font-weight:500; font-size:1.8rem;
}
.menu-movil a span{ font-family:var(--mono); font-size:.62rem; color:var(--fg-mute); }
.menu-movil a[aria-current="page"]{ color:var(--naranja-claro); }

/* --- tarjetas --- */
.tarjeta{
  background:var(--tarjeta); border:1px solid var(--line); border-radius:var(--radio);
  padding:clamp(1.2rem,3vw,1.8rem);
  transition:background-color .35s var(--ease-out), border-color .35s var(--ease-out);
}
a.tarjeta:hover, .tarjeta--activa{ background:var(--tarjeta-hover); border-color:var(--line-fuerte); }

/* --- formularios --- */
.campo{ display:block; margin-bottom:1.1rem; }
.campo__etiqueta{
  display:block; margin-bottom:.4rem;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-mute);
}
.campo__input{
  width:100%; padding:.85rem 1rem; background:rgba(243,241,234,.03);
  border:1px solid var(--line-fuerte); border-radius:var(--radio);
  transition:border-color .3s var(--ease-out), background-color .3s var(--ease-out);
}
.campo__input:focus{ outline:none; border-color:var(--naranja); background:rgba(243,241,234,.06); }
.campo__input::placeholder{ color:var(--fg-mute); opacity:.55; }
.campo__error{ display:none; margin-top:.4rem; font-size:.82rem; color:#FF8B6E; font-weight:500; }
.campo.tiene-error .campo__input{ border-color:#FF8B6E; }
.campo.tiene-error .campo__error{ display:block; }
textarea.campo__input{ min-height:130px; resize:vertical; }

/* =============================================================
   6. Secciones
   ============================================================= */
main{ padding-top:var(--mast-h); }
main.sin-tope{ padding-top:0; }
.seccion{ padding-block:clamp(3.2rem, 7.5vw, 6rem); position:relative; }
.seccion--fina{ padding-block:clamp(2.2rem, 5vw, 3.6rem); }
.seccion--velo{ background:rgba(6,6,14,.42); }
.seccion__cabecera{
  display:grid; gap:.9rem; margin-bottom:clamp(1.8rem,4vw,3rem);
  padding-bottom:1.2rem; border-bottom:1px solid var(--line);
}
.seccion__cabecera .titulo-l{ max-width:20ch; }

/* la línea que se dibuja sola al entrar en pantalla */
.trazo{ width:100%; height:2px; overflow:visible; }
.trazo path{
  fill:none; stroke:var(--naranja); stroke-width:1.4;
  stroke-dasharray:1000; stroke-dashoffset:1000;
  transition:stroke-dashoffset 1.9s var(--ease-out);
}
.trazo.visible path{ stroke-dashoffset:0; }

/* =============================================================
   7. LA OBERTURA — primera pantalla animada por scroll
   ============================================================= */
.obertura{ position:relative; height:260vh; }
.obertura__fijo{
  position:sticky; top:0; height:100svh; min-height:560px;
  display:grid; place-items:center; overflow:hidden;
}
.obertura__marco{
  position:relative; width:100%; max-width:var(--ancho);
  padding-inline:var(--gutter); height:100%;
  display:grid; place-items:center;
}

.obertura__rueda{
  position:absolute; top:50%; left:50%;
  width:min(74vmin, 560px); aspect-ratio:764/1009;
  transform:translate(-50%,-50%);
  will-change:transform, opacity;
}
.obertura__rueda img{ width:100%; height:100%; object-fit:contain; }
.obertura__rueda .cuarto{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  will-change:transform, opacity;
}
.js .obertura__rueda .cuarto{ opacity:0; }
.obertura__scrim{
  position:absolute; inset:auto 0 0 0; height:54%; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(6,6,16,.93) 10%, rgba(6,6,16,.6) 44%, transparent 100%);
}

.obertura__halo{
  position:absolute; top:50%; left:50%; width:min(88vmin,660px); aspect-ratio:1;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(237,123,47,.18), transparent 62%);
  filter:blur(28px); opacity:0; will-change:opacity;
}

.obertura__texto{ position:relative; z-index:2; text-align:center; width:100%; }
.ob-capa{ will-change:transform, opacity; }
.js .ob-capa{ opacity:0; }
.js .obertura__marco{ opacity:0; }
.js .obertura__rueda{ opacity:0; }

.ob-eyebrow{
  font-family:var(--mono); font-size:clamp(.58rem,1.5vw,.7rem);
  letter-spacing:.34em; text-transform:uppercase; color:var(--niebla);
}
.ob-titulo{
  display:grid; gap:.15rem; margin:1rem auto 0;
  width:min(100%, 740px);
  filter:drop-shadow(0 4px 26px rgba(0,0,0,.7));
}
.ob-linea{ width:100%; height:auto; }
.ob-d{ margin-top:.7rem; font-size:clamp(.82rem,1.6vw,.98rem); color:#DCDAE8; text-shadow:0 2px 16px rgba(0,0,0,.85); }
.ob-d b{ color:var(--hueso); font-weight:600; }

.obertura__cierre{
  position:absolute; left:50%; bottom:clamp(1.4rem,5vh,3.4rem);
  transform:translateX(-50%); width:min(100%, 760px);
  padding-inline:var(--gutter); z-index:3;
  display:grid; gap:.9rem; justify-items:center; text-align:center;
}
.obertura__fechas{ display:grid; gap:.35rem; }
.obertura__fechas li{ font-family:var(--mono); font-size:clamp(.68rem,1.8vw,.82rem); color:var(--niebla); }
.obertura__fechas b{ color:var(--hueso); font-weight:500; }

.obertura__pista{
  position:absolute; left:50%; bottom:1.5rem; transform:translateX(-50%);
  font-family:var(--mono); font-size:.62rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--niebla); display:flex; align-items:center; gap:.6rem; z-index:3;
}
.obertura__pista i{ display:block; width:1px; height:26px; background:linear-gradient(var(--niebla), transparent); }

/* si no hay JS, la obertura se ve armada y quieta */
.no-js .obertura{ height:auto; }
.no-js .obertura__fijo{ position:static; height:auto; padding-block:6rem 3rem; }
.no-js .obertura__rueda{ position:static; transform:none; margin:0 auto 2rem; }
.no-js .obertura__rueda .cuarto{ opacity:1; }
.no-js .obertura__rueda .cuarto:not(:first-child){ display:none; clip-path:none; }
.no-js .obertura__cierre{ position:static; transform:none; margin-top:2rem; }
.no-js .obertura__pista{ display:none; }

/* =============================================================
   8. Bloques de contenido
   ============================================================= */
.cifras{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border-block:1px solid var(--line); }
.cifras__item{ background:var(--noche-1); padding:clamp(1.1rem,3vw,1.8rem) .4rem; text-align:center; }
.cifras__n{ font-family:var(--display); font-weight:500; font-size:clamp(2.1rem,5.8vw,3.2rem); line-height:1; display:block; }
.cifras__t{ display:block; margin-top:.5rem; font-family:var(--mono); font-size:.6rem; letter-spacing:.13em; text-transform:uppercase; color:var(--fg-mute); }

.concierto{ display:grid; gap:clamp(1.8rem,4vw,3rem); align-items:start; }
.afiche{ border:1px solid var(--line); border-radius:var(--radio); overflow:hidden; background:var(--noche-0); }
.afiche img{ width:100%; }
.programa{ margin-top:1.6rem; border-top:1px solid var(--line); }
.programa li{ display:grid; gap:.15rem; padding:.85rem 0; border-bottom:1px solid var(--line); }
.programa .compositor{ font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-mute); }
.programa .obra{ font-family:var(--display); font-weight:500; font-size:1.3rem; }

/* estaciones: cuatro fichas que responden al cursor */
.fichas-estacion{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.ficha-estacion{
  background:var(--noche-1); padding:clamp(1.1rem,3vw,1.5rem); display:grid; gap:.4rem;
  transition:background-color .45s var(--ease-out);
}
.ficha-estacion:hover{ background:var(--noche-2); }
.ficha-estacion__barra{ height:4px; width:44px; border-radius:2px; transition:width .5s var(--ease-out); }
.ficha-estacion:hover .ficha-estacion__barra{ width:76px; }
.ficha-estacion h3{ font-family:var(--display); font-weight:500; font-size:1.5rem; }
.ficha-estacion p{ font-size:.86rem; color:var(--fg-mute); }

.funciones{ display:grid; gap:1rem; margin-top:1.8rem; }
.funcion{ display:grid; gap:.55rem; }
.funcion__sede{ display:flex; align-items:center; gap:.6rem; }
.funcion__sede .n{
  width:22px; height:22px; flex:none; border-radius:50%; border:1px solid var(--line-fuerte);
  display:grid; place-items:center; font-family:var(--mono); font-size:.65rem; color:var(--fg-mute);
}
.funcion__meta{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; font-size:.85rem; color:var(--fg-mute); }

.agenda{ border-top:1px solid var(--line); }
.agenda__item{ display:grid; gap:.35rem; padding:clamp(1.1rem,3vw,1.6rem) 0; border-bottom:1px solid var(--line); transition:padding-left .4s var(--ease-out); }
.agenda__item:hover{ padding-left:.7rem; }
.agenda__fecha{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--naranja); }
.agenda__sede{ font-size:.9rem; color:var(--fg-mute); }
.agenda--pasada .agenda__fecha{ color:var(--fg-mute); }
.agenda--pasada .agenda__item{ opacity:.75; }

/* lo marcado con hidden se oculta siempre, aunque tenga display propio */
[hidden]{ display:none !important; }

/* =============================================================
   ESCENA: secciones que se arman con el scroll
   ============================================================= */
.escena{ position:relative; height:340vh; }
.escena__fijo{
  position:sticky; top:0; height:100svh; min-height:520px;
  display:grid; place-items:center; overflow:hidden;
}
.escena__fondo{ position:absolute; inset:-12% 0; display:grid; gap:2vh; align-content:center; }
.escena__fondo img{
  width:112%; margin-left:-6%; height:auto; opacity:.3;
  filter:grayscale(1) contrast(1.05); will-change:transform;
}
.escena__fotos{ position:absolute; inset:0; overflow:hidden; }
.escena__fotos .foto{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.06);
  transition:opacity 1.2s var(--ease-out);
  filter:grayscale(1) contrast(1.08);
}
.escena__fotos .foto.visible{ opacity:.5; animation:acercar 16s ease-out forwards; }
/* Mientras el clip corre encima, la foto se retira casi del todo pero no
   desaparece: si el navegador no llegara a pintar el video, sigue habiendo
   algo debajo y la sección nunca se queda en negro. */
.escena__fotos .foto.visible.tapada{ opacity:.16; }
@keyframes acercar{ from{ transform:scale(1.06) translate3d(0,0,0);} to{ transform:scale(1.2) translate3d(-1.5%,-1%,0);} }

.escena__clips{ position:absolute; inset:0; overflow:hidden; }
.escena__clips .clip{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1s var(--ease-out);
  filter:grayscale(1) contrast(1.06);
}
.escena__clips .clip.visible{ opacity:.42; }

.escena__velo{
  position:absolute; inset:0;
  background:
    radial-gradient(64% 50% at 50% 48%, rgba(8,8,20,.8), rgba(8,8,20,.45) 62%, transparent 100%),
    linear-gradient(180deg, rgba(8,8,20,.92), rgba(8,8,20,.3) 32%, rgba(8,8,20,.3) 68%, rgba(8,8,20,.92));
}
.escena__texto{
  position:relative; z-index:2; display:grid; place-items:center;
  width:100%; max-width:var(--ancho); padding-inline:var(--gutter); text-align:center;
}
.escena__frase{
  grid-area:1/1; max-width:20ch;
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.9rem, 5.4vw, 3.9rem); line-height:1.1; color:var(--hueso);
  text-shadow:0 3px 24px rgba(0,0,0,.92), 0 0 60px rgba(0,0,0,.6); will-change:transform, opacity;
}
.escena__frase small{
  display:block; margin-top:1rem;
  font-family:var(--sans); font-weight:500; font-size:.8rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--naranja);
}
.js .escena__frase{ opacity:0; }
.escena__marca{
  position:absolute; bottom:clamp(1.4rem,5vh,3rem); left:50%; transform:translateX(-50%);
  width:64px; opacity:.4; z-index:2;
}

/* sin JavaScript o con movimiento reducido, la escena se lee de corrido */
.no-js .escena{ height:auto; }
.no-js .escena__fijo{ position:static; height:auto; padding-block:5rem; }
.no-js .escena__texto{ display:grid; gap:3rem; }
.no-js .escena__frase{ grid-area:auto; opacity:1; }
@media (prefers-reduced-motion: reduce){
  .escena{ height:auto; }
  .escena__fijo{ position:static; height:auto; padding-block:5rem; }
  .escena__texto{ display:grid; gap:3rem; }
  .escena__frase{ grid-area:auto; opacity:1 !important; transform:none !important; }
  .escena__fotos .foto.visible{ animation:none; transform:none; }
}

/* --- archivo de conciertos pasados --- */
.pasado{
  display:grid; gap:clamp(1.2rem,3vw,2.2rem);
  padding-block:clamp(2rem,5vw,3rem); border-top:1px solid var(--line);
}
.pasado:first-of-type{ border-top:0; padding-top:0; }
.pasado__afiche{ border:1px solid var(--line); border-radius:var(--radio); overflow:hidden; background:var(--noche-0); }
.pasado__afiche img{ width:100%; height:auto; }
.pasado__cuerpo{ display:grid; align-content:start; gap:.2rem; }
.pasado__video{ margin-top:1.4rem; }
.pasado__fotos{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-top:1rem; }
.pasado__fotos img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border:1px solid var(--line); border-radius:var(--radio); background:var(--noche-2);
  transition:transform .5s var(--ease-out), border-color .4s var(--ease-out);
}
.pasado__fotos img:hover{ transform:scale(1.03); border-color:var(--line-fuerte); }

.accesos{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.accesos:has(> :only-child){ max-width:560px; }
.acceso{ display:grid; gap:.5rem; padding:clamp(1.3rem,3vw,1.9rem); }
.acceso__n{ font-family:var(--mono); font-size:.68rem; color:var(--naranja); letter-spacing:.14em; }
.secciones{ display:grid; gap:1rem; }
.instrumentos{ margin-top:.9rem; display:flex; flex-wrap:wrap; gap:.4rem; }
.instrumentos li{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.06em;
  padding:.3rem .6rem; border:1px solid var(--line); border-radius:99px; color:var(--fg-mute);
}

.retrato{ aspect-ratio:4/5; border:1px solid var(--line); border-radius:var(--radio); overflow:hidden; background:var(--noche-2); }
.retrato img{ width:100%; height:100%; object-fit:cover; }
.foto-ancha{ aspect-ratio:16/9; border:1px solid var(--line); border-radius:var(--radio); overflow:hidden; background:var(--noche-2); }
.foto-ancha img{ width:100%; height:100%; object-fit:cover; }
figcaption{ margin-top:.6rem; font-size:.78rem; color:var(--fg-mute); font-style:italic; }

.cita{ font-family:var(--display); font-size:clamp(1.4rem,3.6vw,2.3rem); line-height:1.22; font-style:italic; max-width:24ch; }
.cita__pie{ display:block; margin-top:1.1rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-mute); font-style:normal; }

.video{ border:1px solid var(--line); border-radius:var(--radio); overflow:hidden; background:#000; aspect-ratio:16/9; }
.video video{ width:100%; height:100%; object-fit:cover; }
.videos{ display:grid; gap:clamp(1.4rem,3vw,2rem); }
.video-item h3{ margin-top:.9rem; }
.video-item p{ margin-top:.3rem; font-size:.88rem; color:var(--fg-mute); }
@media (min-width:720px){ .videos{ grid-template-columns:repeat(3,1fr); } }

.video-falta{
  display:none; margin-top:1rem; padding:1rem 1.2rem;
  border:1px dashed var(--line-fuerte); border-radius:var(--radio);
  font-size:.86rem; color:var(--fg-mute);
}
.video-falta.visible{ display:block; }

.auspicio{ display:grid; gap:1.4rem; justify-items:center; text-align:center; }
.auspicio__lista{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:.8rem clamp(1.4rem,4vw,3rem);
}
.auspicio__lista li{
  display:flex; align-items:center; justify-content:center;
  height:82px;
  font-family:var(--display); font-weight:500; font-size:clamp(1.05rem,2.2vw,1.4rem);
  color:var(--fg-mute); transition:color .4s var(--ease-out);
}
.auspicio__lista li:hover{ color:var(--fg); }
.auspicio__lista img{
  max-height:100%; max-width:190px; width:auto; height:auto;
  object-fit:contain; opacity:.78;
  transition:opacity .4s var(--ease-out);
}
.auspicio__lista li:hover img{ opacity:1; }

/* =============================================================
   9. Entradas
   ============================================================= */
.compra{ display:grid; gap:clamp(1.6rem,4vw,3rem); align-items:start; }
.paso{ margin-bottom:clamp(2rem,5vw,3rem); }
.paso__cabecera{ display:flex; align-items:center; gap:.85rem; margin-bottom:1.2rem; }
.paso__n{
  width:30px; height:30px; flex:none; border-radius:50%;
  display:grid; place-items:center; font-family:var(--mono); font-size:.8rem; font-weight:500;
  border:1px solid var(--line-fuerte); color:var(--fg-mute);
  transition:background-color .3s var(--ease-out), color .3s, border-color .3s;
}
.paso--listo .paso__n{ background:var(--naranja); border-color:var(--naranja); color:#160F06; }
.paso__t{ font-size:1.05rem; font-weight:600; }
.paso__ayuda{ font-size:.85rem; color:var(--fg-mute); margin-bottom:1.1rem; }
.paso--bloqueado{ opacity:.4; pointer-events:none; }

.opciones{ display:grid; gap:.9rem; }
.opcion{
  position:relative; display:block; cursor:pointer;
  border:1px solid var(--line-fuerte); border-radius:var(--radio); padding:1.1rem 1.2rem;
  transition:border-color .3s var(--ease-out), background-color .3s var(--ease-out);
}
.opcion:hover{ border-color:var(--fg-mute); background:var(--tarjeta); }
.opcion input{ position:absolute; opacity:0; pointer-events:none; }
.opcion__marca{
  position:absolute; top:1.15rem; right:1.15rem;
  width:18px; height:18px; border-radius:50%; border:1px solid var(--line-fuerte);
  transition:border-color .25s;
}
.opcion__marca::after{
  content:""; position:absolute; inset:4px; border-radius:50%;
  background:var(--naranja); transform:scale(0); transition:transform .25s var(--ease-out);
}
.opcion input:checked ~ .opcion__marca{ border-color:var(--naranja); }
.opcion input:checked ~ .opcion__marca::after{ transform:scale(1); }
.opcion:has(input:checked){ border-color:var(--naranja); background:var(--tarjeta-hover); }
.opcion input:focus-visible ~ .opcion__marca{ outline:2px solid var(--naranja); outline-offset:3px; }
.opcion__sede{ font-family:var(--display); font-weight:500; font-size:1.55rem; margin-bottom:.3rem; padding-right:2rem; display:block; }
.opcion__fecha{ font-family:var(--mono); font-size:.78rem; color:var(--naranja); letter-spacing:.06em; display:block; }
.opcion__nota{ font-size:.85rem; color:var(--fg-mute); margin-top:.55rem; display:block; }
.opcion__precio{ font-family:var(--mono); font-size:1rem; font-weight:500; white-space:nowrap; }
.opcion--sector{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding-right:3.2rem; }

/* ---- mapa de butacas del auditorio ---- */
.desliza{ display:none; text-align:center; font-family:var(--mono); font-size:.62rem;
  letter-spacing:.1em; color:var(--fg-mute); margin-bottom:.8rem; }
@media (max-width:700px){ .desliza{ display:block; } }
.sala{ overflow-x:auto; padding-bottom:.6rem; min-width:0; }

/* El mapa de la sala es mas ancho que un telefono: se desplaza dentro de
   su propia caja. Sin esto, en pantallas chicas empujaba la columna del
   resumen fuera de la pantalla. */
.compra > *, .compra .paso, #mapa-sala{ min-width:0; }
.escenario[hidden]{ display:none; }
.escenario{
  margin:0 auto 1.8rem; max-width:420px; height:34px; border-radius:0 0 110px 110px;
  background:linear-gradient(180deg, rgba(237,123,47,.28), rgba(237,123,47,.02));
  border-bottom:2px solid rgba(237,123,47,.6);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--naranja);
}
.nivel{ margin-bottom:2rem; }
.nivel__cab{ display:flex; align-items:center; gap:.8rem; margin-bottom:1rem; }
.nivel__cab h3{ font-family:var(--display); font-weight:500; font-size:1.4rem; white-space:nowrap; }
.nota-sala{
  text-align:center; margin:-1rem 0 1.6rem; font-size:.8rem; color:var(--fg-mute);
  max-width:46ch; margin-inline:auto;
}
/* la sala dibujada con su forma real */
.sala-dibujo{ position:relative; width:100%; min-width:700px; max-width:840px; margin-inline:auto; }
.sala-dibujo__fondo{ position:absolute; inset:0; width:100%; height:100%; }
.sala-dibujo__fondo .muro{ fill:rgba(243,241,234,.025); stroke:rgba(243,241,234,.3); stroke-width:4; }
.sala-dibujo__fondo .tarima{ stroke:var(--naranja); stroke-width:6; stroke-linecap:round; }
.sala-dibujo__fondo .piano{ fill:rgba(243,241,234,.05); stroke:rgba(243,241,234,.32); stroke-width:3; }
.sala-dibujo__fondo .invitados{ stroke:rgba(243,241,234,.32); stroke-width:3; stroke-dasharray:12 10; }
.sala-dibujo__fondo .rotulo-svg{
  fill:var(--fg-mute); font-family:var(--sans); font-size:30px;
  font-weight:600; letter-spacing:3px; text-transform:uppercase;
}
.sala-dibujo__fondo .grande{ fill:var(--naranja); font-size:38px; letter-spacing:7px; }

.sala-dibujo .as{
  position:absolute; overflow:visible; width:2.05%; height:auto; aspect-ratio:1;
  transform:translate(-50%,-50%); margin:0;
}
.sala-dibujo .as--silla{ border-radius:50%; }
.sala-dibujo .as--banca{ border-radius:2px; }
.sala-dibujo .as:hover{ transform:translate(-50%,-50%) scale(1.35); z-index:4; }
.sala-dibujo .as.ocupada:hover{ transform:translate(-50%,-50%); }
.flabel-abs{
  position:absolute; transform:translate(-50%,-50%);
  font-family:var(--sans); font-size:.66rem; font-weight:600;
  color:var(--fg-mute); pointer-events:none;
}
.nivel__cab small{ font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-mute); white-space:nowrap; }
.nivel__cab i{ flex:1; height:1px; background:var(--line); }
.bloques{ display:flex; justify-content:center; min-width:max-content; margin-inline:auto; }
.pasillo{ width:24px; flex:none; }
.bloque__nom{ text-align:center; font-family:var(--mono); font-size:.6rem; letter-spacing:.08em;
  color:var(--fg-mute); margin-bottom:.7rem; white-space:nowrap; }
.bloque__nom b{ color:var(--naranja); font-weight:500; }
.fila{ display:flex; align-items:center; gap:4px; margin-bottom:4px; }
.flabel{ width:14px; flex:none; font-family:var(--mono); font-size:.55rem; color:var(--fg-mute); text-align:center; }
.hueco{ width:22px; height:22px; flex:none; }
.as{
  width:22px; height:22px; flex:none; border-radius:4px;
  border:1px solid rgba(243,241,234,.22); background:rgba(243,241,234,.07);
  font-size:0; color:transparent; cursor:pointer;
  transition:transform .2s var(--ease-out), background-color .2s, border-color .2s;
}
/* franjas de precio, de la más cara a la más barata */
/* franjas de precio: la más cara azul, la media verde, la más barata amarilla */
.as.franja-1, .leyenda i.franja-1{ border-color:rgba(87,167,232,.8);  background:rgba(87,167,232,.18); }
.as.franja-2, .leyenda i.franja-2{ border-color:rgba(87,198,122,.78); background:rgba(87,198,122,.17); }
.as.franja-3, .leyenda i.franja-3{ border-color:rgba(232,194,74,.8);  background:rgba(232,194,74,.17); }
.as:hover{ transform:scale(1.16); border-color:var(--naranja); }
.as.elegida{ background:var(--naranja); border-color:var(--naranja); }
.as.ocupada{ background:rgba(243,241,234,.03); border-color:transparent; cursor:not-allowed; opacity:.35; }
.as.ocupada:hover{ transform:none; }
.leyenda{ display:flex; flex-wrap:wrap; gap:1.2rem; margin-top:1.2rem; font-size:.78rem; color:var(--fg-mute); }
.leyenda li{ display:flex; align-items:center; gap:.45rem; }
.leyenda i{ width:14px; height:14px; border-radius:3px; display:block;
  border:1px solid rgba(243,241,234,.22); background:rgba(243,241,234,.07); }
.leyenda i.elegida{ background:var(--naranja); border-color:var(--naranja); }
.leyenda i.ocupada{ opacity:.35; border-color:transparent; }
@media (max-width:420px){
  .as, .hueco{ width:19px; height:19px; }
  .pasillo{ width:18px; }
}

.contador{ display:flex; align-items:center; gap:.2rem; border:1px solid var(--line-fuerte); border-radius:var(--radio); width:max-content; }
.contador button{ width:44px; height:44px; display:grid; place-items:center; font-size:1.2rem; color:var(--fg-mute); transition:color .25s; }
.contador button:hover{ color:var(--naranja); }
.contador output{ min-width:44px; text-align:center; font-family:var(--mono); font-size:1rem; }
.fila-cantidad{ display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem; }

.casilla{ display:flex; gap:.7rem; align-items:flex-start; cursor:pointer; margin-top:1.2rem; font-size:.9rem; }
.casilla input{ width:18px; height:18px; margin-top:.2rem; accent-color:var(--naranja); flex:none; }
.casilla span small{ display:block; color:var(--fg-mute); font-size:.8rem; }

.resumen{ border:1px solid var(--line-fuerte); border-radius:var(--radio); padding:1.4rem; background:rgba(243,241,234,.04); }
.resumen__fila{ display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; font-size:.9rem; }
.resumen__fila span:last-child{ font-family:var(--mono); text-align:right; }
.resumen__total{ margin-top:.8rem; padding-top:1rem; border-top:1px solid var(--line-fuerte); display:flex; justify-content:space-between; align-items:baseline; }
.resumen__total b{ font-family:var(--display); font-size:2rem; font-weight:500; }
.resumen__vacio{ font-size:.88rem; color:var(--fg-mute); }
.resumen__nota{ margin-top:1rem; font-size:.78rem; color:var(--fg-mute); line-height:1.5; }

.confirmacion{ display:none; }
.confirmacion.visible{ display:block; }
.pago-monto{
  display:flex; align-items:baseline; gap:.8rem; margin-top:.9rem;
  font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--fg-mute);
}
.pago-monto b{
  font-family:var(--display); font-weight:500; font-size:2.4rem;
  letter-spacing:0; text-transform:none; color:var(--naranja);
}

.codigo{ font-family:var(--sans); font-weight:600; font-size:clamp(1.5rem,5vw,2.1rem); letter-spacing:.16em; color:var(--naranja); margin:.5rem 0 1.2rem; }
.qr{ width:min(220px,62vw); aspect-ratio:1; border:1px solid var(--line); border-radius:var(--radio); background:#FFF; }
.qr img{ width:100%; height:100%; object-fit:contain; }
.qr-caja{ display:grid; justify-items:center; gap:.75rem; }
.qr-caja .btn{ width:auto; }
.qr__nota{ font-size:.78rem; line-height:1.45; color:var(--fg-mute); text-align:center; max-width:30ch; margin:0; }
.tickets{ display:grid; gap:1.4rem; }
.ticket{ display:grid; gap:.7rem; justify-items:center; }
.ticket canvas{
  width:100%; max-width:360px; height:auto;
  border:1px solid var(--line); border-radius:var(--radio);
}
.ticket .btn{ padding:.6rem 1.2rem; font-size:.82rem; }
@media (min-width:600px){ .tickets{ grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); } }

.acciones-finales{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem; }

.barra-movil{
  position:fixed; inset:auto 0 0 0; z-index:870;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.8rem var(--gutter) calc(.8rem + env(safe-area-inset-bottom));
  background:rgba(9,8,26,.94); border-top:1px solid var(--line-fuerte);
}
@supports (backdrop-filter: blur(10px)){ .barra-movil{ backdrop-filter:blur(14px); } }
.barra-movil b{ font-family:var(--display); font-size:1.7rem; font-weight:500; display:block; }
.barra-movil .btn{ padding:.8rem 1.3rem; }
body:has(.barra-movil:not([hidden])) .pie{ padding-bottom:6rem; }

/* ---- modo gestión ---- */
.gestion{ position:fixed; left:14px; bottom:14px; z-index:940; }
.gestion__llave{
  padding:.42rem .8rem; border-radius:99px;
  border:1px solid var(--line-fuerte); opacity:.45;
  font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-mute);
  transition:opacity .3s var(--ease-out), border-color .3s, color .3s;
}
.gestion__llave:hover{ opacity:1; border-color:var(--naranja); color:var(--naranja); }
.gestion__modos{
  display:grid; grid-template-columns:1fr 1fr; gap:.4rem; margin-bottom:.9rem;
  border:1px solid var(--line); border-radius:var(--radio); padding:.25rem;
}
.gestion__modos button{
  padding:.5rem; border-radius:var(--radio); font-size:.78rem; font-weight:600;
  color:var(--fg-mute); transition:background-color .25s, color .25s;
}
.gestion__modos button.activo{ background:var(--naranja); color:#160F06; }

/* butaca bloqueada: el público la ve ocupada; el vendedor la ve rayada */
body.gestionando .sala-dibujo .as.bloqueada{
  background:rgba(243,241,234,.1); border-color:rgba(243,241,234,.45); opacity:.8;
}
body.gestionando .sala-dibujo .as.bloqueada::after{
  content:""; position:absolute; inset:45% 10%; border-top:2px solid rgba(243,241,234,.7);
}

.gestion__modos{ display:grid; grid-template-columns:1fr 1fr; gap:.4rem; margin-bottom:.9rem; }
.gestion__modos button{
  padding:.5rem; border:1px solid var(--line); border-radius:var(--radio);
  font-size:.78rem; font-weight:600; color:var(--fg-mute);
  transition:border-color .25s, color .25s, background-color .25s;
}
.gestion__modos button.activo{ border-color:var(--naranja); color:var(--naranja); background:rgba(237,123,47,.1); }
.gestion__modos{ display:grid; grid-template-columns:1fr 1fr; gap:.4rem; margin-bottom:.9rem; }
.gestion__modos button{
  padding:.5rem .4rem; border:1px solid var(--line-fuerte); border-radius:var(--radio);
  font-size:.72rem; font-weight:600; color:var(--fg-mute);
  transition:border-color .25s, color .25s, background-color .25s;
}
.gestion__modos button.activo{ border-color:var(--naranja); color:var(--naranja); background:rgba(237,123,47,.1); }

.gestion__venta{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  margin:.2rem 0 .9rem; font-size:.82rem; color:var(--fg-mute);
}
.gestion__venta b{ font-family:var(--display); font-weight:500; font-size:1.3rem; color:var(--fg); }
body.gestionando #confirmacion .solo-online{ display:none !important; }
.gestion__panel{
  position:absolute; left:0; bottom:44px; width:min(88vw, 320px);
  max-height:76vh; overflow-y:auto;
  background:rgba(9,8,26,.97); border:1px solid var(--line-fuerte);
  border-radius:var(--radio); padding:1.1rem;
}
@supports (backdrop-filter: blur(10px)){ .gestion__panel{ backdrop-filter:blur(16px); } }
.gestion__cabecera{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.gestion__cerrar{ font-size:1.3rem; line-height:1; color:var(--fg-mute); }
.gestion__ayuda{ font-size:.8rem; color:var(--fg-mute); margin-bottom:1rem; }
.gestion__cifras{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-bottom:1rem; text-align:center; }
.gestion__cifras b{ display:block; font-family:var(--display); font-weight:500; font-size:1.3rem; }
.gestion__cifras span{ font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-mute); }
.gestion__acciones{ display:grid; gap:.5rem; }
.gestion__acciones .btn{ padding:.6rem 1rem; font-size:.82rem; }
.gestion__aviso{ margin-top:.8rem; font-size:.78rem; color:var(--naranja); min-height:1.1em; }

/* butaca retenida por una reserva que todavía no venció */
.as.reservada{ border-color:rgba(237,123,47,.55) !important; background:rgba(237,123,47,.08) !important; opacity:.6; cursor:not-allowed; }
.leyenda i.reservada{ border-color:rgba(237,123,47,.55); background:rgba(237,123,47,.08); opacity:.6; }
.cuenta-atras{ font-family:var(--sans); font-weight:600; font-size:1.6rem; letter-spacing:.08em; color:var(--naranja); }

body.gestionando .sala-dibujo .as.ocupada{ cursor:pointer; opacity:.55; }
body.gestionando .sala-dibujo .as.ocupada:hover{ transform:translate(-50%,-50%) scale(1.35); }
body.gestionando .barra-movil{ display:none; }

/* =============================================================
   10. Pie
   ============================================================= */
.pie{ padding-block:clamp(2.6rem,5vw,4rem) 2rem; border-top:1px solid var(--line); background:rgba(5,5,12,.5); }
.pie__grid{ display:grid; gap:2rem; }
.pie__marca img{ width:104px; }
.pie h3{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-mute); margin-bottom:.9rem; font-weight:500; }
.pie li{ margin-bottom:.5rem; font-size:.9rem; }
.pie a:hover{ color:var(--naranja-claro); }
.pie__legal{
  margin-top:2.4rem; padding-top:1.2rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; justify-content:space-between;
  font-size:.76rem; color:var(--fg-mute);
}

/* =============================================================
   11. Efectos
   ============================================================= */
.aparece{ opacity:0; transform:translateY(18px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.aparece.visible{ opacity:1; transform:none; }
.no-js .aparece{ opacity:1; transform:none; }
@view-transition{ navigation:auto; }

/* =============================================================
   12. Responsive
   ============================================================= */
@media (min-width:540px){
  .funciones{ grid-template-columns:1fr 1fr; }
  .opciones--sedes{ grid-template-columns:1fr 1fr; }
  .fichas-estacion{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:720px){
  :root{ --mast-h:74px; }
  .secciones{ grid-template-columns:repeat(3,1fr); }
  .pie__grid{ grid-template-columns:1.4fr 1fr 1fr; }
  .concierto{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,5vw,4rem); }
  .pasado{ grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr); align-items:start; }
  .seccion__cabecera{ grid-template-columns:1fr auto; align-items:end; }
  .obertura__fechas{ grid-auto-flow:column; gap:2rem; }
}
@media (min-width:960px){
  .nav{ display:flex; align-items:center; }
  .menu-btn, .menu-movil{ display:none; }
  .compra{ grid-template-columns:minmax(0,1fr) minmax(300px,360px); }
  .resumen{ position:sticky; top:calc(var(--mast-h) + 28px); }
  .dos-columnas{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
  .cifras{ border-inline:1px solid var(--line); }
  .barra-movil{ display:none; }
  /* recién con la pantalla ancha entran las cuatro estaciones en fila;
     minmax(0,1fr) es lo que les permite encogerse en vez de desbordar */
  .fichas-estacion{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* =============================================================
   12b. Pantallas táctiles: enlaces con área cómoda para el dedo
   ============================================================= */
@media (hover:none){
  .pie__grid ul a{ display:inline-block; padding-block:.6rem; }
  .pie li{ margin-bottom:.1rem; }
  .enlace{ padding-block:.35rem; }
  .menu-movil a{ padding-block:.35rem; }
}

/* =============================================================
   13. Movimiento reducido: la obertura queda armada y quieta
   ============================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .obertura{ height:auto; }
  .obertura__fijo{ position:static; height:auto; padding-block:6rem 3rem; }
  .obertura__rueda{ position:static; transform:none !important; margin:0 auto 2rem; opacity:1 !important; }
  .obertura__rueda .cuarto{ opacity:1 !important; transform:none !important; }
  .obertura__cierre{ position:static; transform:none; margin-top:2rem; }
  .obertura__pista{ display:none; }
  .js .ob-capa{ opacity:1 !important; transform:none !important; }
}

@media print{
  .masthead,.pie,.paso,.resumen__nota,.acciones-finales,.menu-movil,.barra-movil,.ambiente{ display:none !important; }
  body{ background:#fff; color:#000; }
}