/* ══════════════════════════════════════════════════════════════
   MUDMUNE · prototipo v7
   Paleta muestreada del logo vectorial. Tipografía Nunito.
   Una sola plantilla de sección, repetida. Ver 04-modelo.
   ══════════════════════════════════════════════════════════════ */

:root{
  --navy:#21265A; --indigo:#39308C; --teal:#206E8D;
  --ground:#0C0E24; --surface:#161A3E; --surface2:#1E2350;
  --ink:#F4F3FB; --ink-2:#B9BCDA; --ink-3:#7C81AE;
  --line:rgba(244,243,251,.13);
  --gold:#E3B23C;
  --head-h:4.5rem;
  --pad:clamp(1.15rem,4vw,3.5rem);
  --r:.9rem;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%;}
body{
  background:var(--ground); color:var(--ink);
  font:400 1rem/1.62 Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  overflow-x:clip; min-height:100svh;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
a{color:inherit;text-decoration:none;}
/* Regla de marca (Mudmune, 9 sep): Nunito siempre en mayúsculas para el
   branding, sin el súper black, y con kerning de 100 = .1em. */
h1,h2,h3,h4{
  font-weight:700;line-height:1.16;letter-spacing:.1em;text-transform:uppercase;
}
/* Los títulos de pieza son contenido, no marca: caja normal y tracking corto. */
.rk-info h3,.ficha h2,.perso h3,.lugar h3,.tramo h3,.franja .tit,
.fichita .n,.busq-res .tx b,.player .cab .tx b,.rel-i .n b,.puerta-titulo,
.rp-c h4,.proceso h3,.vs-tx > b,.cita p,.dest-t,.alb-t,.pista-f .pt{
  text-transform:none;letter-spacing:.005em;line-height:1.12;
}
::selection{background:var(--indigo);color:#fff;}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:.35rem;}

/* ── utilidades ───────────────────────────────────────────── */
.wrap{max-width:82rem;margin-inline:auto;padding-inline:var(--pad);}
.eyebrow{
  font-size:.685rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);
}
.hidden{display:none !important;}

/* ── revelado en scroll ───────────────────────────────────── */
.rv{opacity:0;transform:translateY(1.5rem);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.rv.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ══ CABECERA ══════════════════════════════════════════════ */
header.site{
  position:fixed;inset:0 0 auto;z-index:60;height:var(--head-h);
  display:flex;align-items:center;
  background:linear-gradient(180deg,rgba(12,14,36,.92),rgba(12,14,36,0));
  backdrop-filter:blur(0px);
  transition:background .45s var(--ease),backdrop-filter .45s var(--ease),border-color .45s;
  border-bottom:1px solid transparent;
}
header.site.solid{
  background:rgba(12,14,36,.86);backdrop-filter:blur(18px) saturate(1.4);
  border-bottom-color:var(--line);
}
header.site .bar{
  width:100%;max-width:82rem;margin-inline:auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(.6rem,2vw,1.4rem);
}
header.site .bar > .brand{justify-self:start;}
header.site .bar > .head-acts{justify-self:end;}
.brand{display:flex;align-items:center;gap:.6rem;flex:0 0 auto;}
.brand img{height:2.05rem;width:auto;}
nav.main{
  display:flex;gap:clamp(.7rem,2.2vw,1.7rem);justify-content:center;
  overflow-x:auto;scrollbar-width:none;justify-self:center;
}
nav.main::-webkit-scrollbar{display:none;}
nav.main button{
  font-size:.775rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);padding:.45rem 0;white-space:nowrap;position:relative;
  transition:color .3s;
}
nav.main button::after{
  content:"";position:absolute;left:0;right:0;bottom:.1rem;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
nav.main button:hover{color:var(--ink);}
nav.main button[aria-current="page"]{color:var(--ink);}
nav.main button[aria-current="page"]::after{transform:scaleX(1);}
.head-acts{display:flex;align-items:center;gap:.45rem;flex:0 0 auto;}
.icobtn{
  width:2.35rem;height:2.35rem;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line);color:var(--ink-2);transition:.28s var(--ease);
  position:relative;
}
.icobtn:hover{border-color:var(--ink-2);color:var(--ink);background:rgba(244,243,251,.06);}
.icobtn svg{width:1.05rem;height:1.05rem;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.badge{
  position:absolute;top:-.2rem;right:-.2rem;min-width:1.15rem;height:1.15rem;padding:0 .3rem;
  border-radius:.6rem;background:var(--gold);color:#1a1405;
  font-size:.63rem;font-weight:700;display:grid;place-items:center;
}

/* ══ PUERTA (inicio) ═══════════════════════════════════════ */
#v-puerta{isolation:isolate;}
.pant-hero{isolation:isolate;}
.puerta-arte{position:absolute;inset:0;z-index:0;overflow:hidden;}
.pant-hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 85% at 50% 52%,rgba(12,14,36,.06) 0%,rgba(12,14,36,.42) 52%,rgba(12,14,36,.82) 100%),
    linear-gradient(180deg,rgba(12,14,36,.62) 0%,transparent 22%,transparent 62%,rgba(12,14,36,.78) 100%);
}
.panel-home{z-index:2;}
.puerta-arte .cap{position:absolute;inset:0;background-size:cover;}
.puerta-in{
  text-align:center;max-width:46rem;
  display:grid;gap:clamp(.7rem,1.6vh,1.1rem);justify-items:center;
}
.puerta-logo{width:min(17rem,58vw,20svh);height:auto;filter:drop-shadow(0 .4rem 2.4rem rgba(0,0,0,.6));}
.puerta-cover{
  width:min(24rem,72vw,38svh);aspect-ratio:1;border-radius:1.1rem;
  background-size:cover;background-position:50% 50%;background-color:var(--surface2);
  box-shadow:0 2.2rem 5.5rem rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.14);
  transition:transform .6s var(--ease),opacity .6s var(--ease);
}
.puerta-cover:hover{transform:translateY(-4px) scale(1.012);}
.puerta-titulo{font-size:clamp(1.9rem,6.5vw,3.4rem);font-weight:700;letter-spacing:.02em;line-height:1.02;text-shadow:0 .3rem 2rem rgba(0,0,0,.55);}
.puerta-titulo.largo{font-size:clamp(1.6rem,5vw,2.7rem);}
.plats{display:flex;gap:.5rem;justify-content:center;align-items:center;}
.plat{
  width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--ink-2);transition:.28s var(--ease);
  background:rgba(12,14,36,.5);
}
.plat:hover{color:var(--ink);border-color:var(--ink-2);background:rgba(244,243,251,.1);transform:translateY(-2px);}
.plat svg{width:1.15rem;height:1.15rem;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.puerta-frase{
  font-size:clamp(.92rem,1.9vw,1.1rem);color:var(--ink-2);
  max-width:26rem;line-height:1.6;
}
.puerta-ahora{display:grid;gap:.3rem;justify-items:center;}
.puerta-ahora .k{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);}
.puerta-ahora .t{font-size:clamp(1.35rem,4.5vw,2rem);font-weight:700;letter-spacing:.02em;}
.puerta-ahora .s{font-size:.86rem;color:var(--ink-2);}
.puerta-btns{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;}
@media(max-width:62rem){.puerta-btns{justify-content:center;}}
.puerta-links{
  display:flex;flex-wrap:wrap;gap:.15rem .1rem;justify-content:center;margin-top:.8rem;
  align-items:center;
}
.puerta-links button{
  font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);padding:.5rem .95rem;transition:color .3s;
}
.puerta-links button:hover{color:var(--ink);}
.puerta-links .sep{color:var(--ink-3);opacity:.5;font-size:.7rem;}
.scrollhint{
  position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:3;
  font-size:.63rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  display:grid;gap:.5rem;justify-items:center;animation:bob 2.8s ease-in-out infinite;
  transition:color .3s var(--ease);
}
.scrollhint:hover{color:var(--ink);}
.scrollhint i{display:block;width:1px;height:1.7rem;background:linear-gradient(var(--ink-3),transparent);}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,.45rem)}}

/* ── botones ──────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.72rem 1.5rem;border-radius:2rem;border:1px solid var(--line);
  font-size:.775rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  transition:.3s var(--ease);white-space:nowrap;
}
.btn svg{width:.95rem;height:.95rem;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.btn:hover{background:rgba(244,243,251,.09);border-color:var(--ink-2);transform:translateY(-1px);}
.btn.pri{background:var(--ink);color:var(--ground);border-color:var(--ink);}
.btn.pri:hover{background:#fff;border-color:#fff;transform:translateY(-1px);}
.btn.sm{padding:.5rem 1rem;font-size:.7rem;}
.btn.gold{border-color:var(--gold);color:var(--gold);}
.btn.gold:hover{background:rgba(227,178,60,.13);}

/* ══ PANTALLA DE SECCIÓN ══════════════════════════════════
   Una sola altura. Franja de destacado, pestañas de banco y
   la rockola. Se cambia de pestaña, no se baja. */
.pantalla{
  height:100svh;display:grid;justify-items:center;align-items:center;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  gap:clamp(.5rem,1.5vh,1.1rem);
  padding:calc(var(--head-h) + .7rem) var(--pad) .9rem;
  position:relative;isolation:isolate;
}
.pantalla > .dest,
.pantalla > .barra-tabs,
.pantalla > .paneles,
.pantalla > .pie-linea{width:100%;max-width:74rem;}
.pantalla > .bg{
  position:absolute;inset:0;z-index:-2;background-size:cover;
  background-color:var(--ground);
  filter:blur(20px) saturate(.72) brightness(.44);
}
.pantalla::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 90% at 50% 50%,rgba(12,14,36,.72) 0%,rgba(12,14,36,.9) 55%,rgba(12,14,36,.99) 100%),
    linear-gradient(180deg,rgba(12,14,36,.92) 0%,rgba(12,14,36,.72) 26%,rgba(12,14,36,.82) 70%,var(--ground) 100%);
}

/* ══ EL DESTACADO ═════════════════════════════════════════
   Como el ejemplo que armó Mudmune el 18 de septiembre: el arte
   a sangre, y encima, a la izquierda, el título con sus datos.
   El peldaño de la cascada sigue calculándose igual; sólo se
   muestra con «Ver pendientes de contenido». */
.dest{
  position:relative;isolation:isolate;display:flex;align-items:center;
  justify-self:stretch;width:auto !important;max-width:none !important;
  margin-inline:calc(var(--pad) * -1);
  margin-top:calc((var(--head-h) + .7rem) * -1);
  min-height:clamp(14rem,40svh,23rem);
  padding:calc(var(--head-h) + 1rem) 0 1.4rem;
  overflow:hidden;
}
/* El fondo del destacado es atmósfera: da el color de la pieza y nada
   más. Quien llama la atención es la obra, grande y de frente. */
.dest-art{
  position:absolute;inset:0;z-index:-2;background-size:cover;background-position:60% 40%;
  background-color:var(--surface2);
  filter:blur(26px) saturate(1.05) brightness(.5);
}
.dest::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,var(--ground) 2%,rgba(12,14,36,.9) 30%,rgba(12,14,36,.22) 68%,rgba(12,14,36,.55) 100%),
    linear-gradient(180deg,rgba(12,14,36,.8) 0%,transparent 34%,rgba(12,14,36,.35) 72%,var(--ground) 100%);
}
/* La composición del inicio, sin carrusel: texto a la izquierda,
   una sola obra a la derecha. Es lo que a Mudmune le gustó de «lo
   nuevo» —la portada grande— con lo que le faltaba: que sea una. */
.dest-in{
  width:100%;max-width:74rem;margin-inline:auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:clamp(1.2rem,4vw,3rem);
}
/* stretch, no start: así cada renglón ocupa exactamente su columna
   y el texto nunca se mete debajo de la obra en pantallas chicas. */
.dest-tx{display:grid;gap:.42rem;justify-items:stretch;min-width:0;}
.dest-tx > *{max-width:100%;min-width:0;}
.dest-tx .dest-k{justify-self:start;}
.dest-obra{
  width:clamp(8rem,26svh,15rem);aspect-ratio:1;border-radius:1rem;flex:0 0 auto;
  background-size:cover;background-position:50% 50%;background-color:var(--surface2);
  box-shadow:0 1.8rem 4.4rem rgba(0,0,0,.66),0 0 0 1px rgba(255,255,255,.14);
  position:relative;overflow:hidden;cursor:pointer;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.dest-obra:hover{transform:translateY(-5px) scale(1.012);box-shadow:0 2.2rem 5.2rem rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.24);}
.dest-lupa{
  position:absolute;inset:0;display:grid;place-items:center;
  opacity:0;transition:opacity .35s var(--ease);
  background:linear-gradient(0deg,rgba(12,14,36,.55),rgba(12,14,36,.1));
}
.dest-obra:hover .dest-lupa,.dest-obra:focus-visible .dest-lupa{opacity:1;}
.dest-lupa svg{
  width:2.9rem;height:2.9rem;padding:.85rem;border-radius:50%;
  background:rgba(12,14,36,.6);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.34);fill:#fff;stroke:none;
}
.dest-lupa svg[fill="none"]{fill:none;stroke:#fff;}
@media(max-width:52rem){
  .dest-in{grid-template-columns:minmax(0,1fr) auto;gap:1rem;}
  .dest-obra{width:clamp(5.5rem,18svh,8.5rem);border-radius:.7rem;}
  .dest-lupa svg{width:2.1rem;height:2.1rem;padding:.6rem;}
  /* el título baja de tamaño para que una palabra larga quepa en su columna */
  .dest-t{font-size:clamp(1.45rem,6.6vw,2.2rem);}
  .dest-t.largo{font-size:clamp(1.2rem,5.4vw,1.75rem);}
}
.dest-t,.dest-d,.dest-m{overflow-wrap:break-word;}
.dest-k{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);
}
.estr{width:.85rem;height:.85rem;fill:var(--gold);stroke:none;flex:0 0 auto;}
.pel{display:none;font-style:normal;color:var(--ink-3);letter-spacing:.06em;text-transform:none;}
body.pend .pel{display:inline;}
.dest-t{
  font-size:clamp(2rem,5.6vw,3.9rem);font-weight:700;line-height:1.02;
  text-shadow:0 .3rem 2rem rgba(0,0,0,.55);max-width:min(14ch,100%);
}
.dest-t.largo{font-size:clamp(1.55rem,4vw,2.8rem);max-width:min(18ch,100%);}
.dest-m{font-size:.86rem;color:var(--ink-2);letter-spacing:.02em;}
.dest-d{
  font-size:.94rem;color:var(--ink-2);line-height:1.55;max-width:min(32ch,100%);margin-top:.3rem;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.dest-a{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:.75rem;}

/* el lema de la sección, arriba a la derecha, como en su ejemplo */
.sec-lema{
  position:absolute;top:calc(var(--head-h) + 1.1rem);right:var(--pad);z-index:4;
  font-size:clamp(.78rem,1.5vw,.95rem);font-style:italic;line-height:1.35;
  color:var(--ink-2);text-align:right;opacity:.92;pointer-events:none;
  text-shadow:0 .2rem 1.4rem rgba(0,0,0,.8);
}
@media(max-width:62rem){.sec-lema{display:none;}}

/* ══ LA BARRA DE PESTAÑAS ═════════════════════════════════ */
.barra-tabs{
  display:flex;align-items:center;justify-content:space-between;gap:.7rem 1.2rem;flex-wrap:wrap;
}
.pestanas{
  display:flex;gap:.2rem;flex-wrap:wrap;justify-content:flex-start;
  max-width:100%;
}
.pestanas button{
  padding:.48rem 1.15rem;border-radius:1.6rem;white-space:nowrap;
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);transition:.26s var(--ease);
}
.pestanas button:hover{color:var(--ink);}
.pestanas button[aria-selected="true"]{background:var(--ink);color:var(--ground);}

/* la perilla del orden */
.orden-caja{position:relative;flex:0 0 auto;}
.orden-btn{
  display:inline-flex;align-items:center;gap:.5rem;padding:.42rem .85rem;border-radius:1.6rem;
  border:1px solid transparent;color:var(--ink-2);transition:.26s var(--ease);
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.orden-btn:hover,.orden-caja.on .orden-btn{border-color:var(--line);background:rgba(12,14,36,.6);color:var(--ink);}
.orden-btn svg{width:1rem;height:1rem;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.orden-btn .ch{width:.85rem;height:.85rem;transition:transform .3s var(--ease);}
.orden-caja.on .orden-btn .ch{transform:rotate(180deg);}
.orden-menu{
  position:absolute;top:calc(100% + .4rem);right:0;z-index:40;min-width:15rem;
  display:none;flex-direction:column;gap:.1rem;padding:.35rem;border-radius:.7rem;
  background:rgba(12,14,36,.97);backdrop-filter:blur(18px);border:1px solid var(--line);
  box-shadow:0 1rem 3rem rgba(0,0,0,.6);
}
.orden-caja.on .orden-menu{display:flex;animation:fadein .22s var(--ease);}
.orden-menu button{
  display:grid;gap:.1rem;text-align:left;padding:.55rem .7rem;border-radius:.5rem;
  transition:background .22s;
}
.orden-menu button:hover{background:rgba(244,243,251,.08);}
.orden-menu button b{font-size:.8rem;font-weight:700;}
.orden-menu button em{font-size:.72rem;font-style:normal;color:var(--ink-3);}
.orden-menu button[aria-current="true"] b{color:var(--gold);}

.paneles{position:relative;min-height:0;align-self:stretch;}
/* si un panel no cabe en la pantalla, rueda por dentro en vez de
   desbordarse: la sección sigue siendo una sola pantalla */
.panel-b.on{max-height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;}

/* ══ LA LÍNEA DE PIE ══════════════════════════════════════ */
.pie-linea{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem 1.2rem;flex-wrap:wrap;
  font-size:.7rem;color:var(--ink-3);
}
/* el botón del panel de diseño es del prototipo, no del sitio:
   le dejamos su carril para que no tape la firma */
@media(min-width:62rem){.pie-linea{padding-left:12rem;}}
.pie-linea a{letter-spacing:.22em;text-transform:uppercase;transition:color .25s;}
.pie-linea a:hover{color:var(--ink-2);}
.pie-linea .frase{
  display:inline-flex;align-items:center;gap:.45rem;font-style:italic;font-size:.76rem;
}
.pie-linea .estr{fill:var(--gold);opacity:.85;}
@media(max-width:44rem){.pie-linea a{display:none;}.pie-linea{justify-content:center;}}
.panel-nota{
  font-size:.84rem;color:var(--ink-2);max-width:44rem;margin:0 auto .9rem;
  text-align:center;line-height:1.55;
}
/* Los personajes también se pasan de lado: una ficha a la vez,
   sin bajar, igual que los lugares y las especies. */
.persos{
  display:flex;gap:clamp(.8rem,2.5vw,1.8rem);overflow-x:auto;scrollbar-width:none;
  padding-bottom:.4rem;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);
  scroll-snap-type:x mandatory;
}
.persos::-webkit-scrollbar{display:none;}
.panel-b .perso{
  flex:0 0 min(30rem,88vw);scroll-snap-align:start;
  padding:0;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);gap:clamp(.9rem,2.5vw,1.8rem);
}
.panel-b .perso .fig{aspect-ratio:auto;height:clamp(9rem,28svh,15rem);}
.panel-b .perso h3{font-size:clamp(1.25rem,3.2vw,1.8rem);}
.panel-b .perso p.tx{
  font-size:.86rem;margin-top:.5rem;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
}
.panel-b .perso .acts{margin-top:1rem;}
/* la tarjeta cabe entera: botones en un renglón y texto a cuatro líneas */
.panel-b .perso{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);align-items:center;}
.panel-b .perso p.tx{-webkit-line-clamp:4;}
.panel-b .perso .acts{flex-wrap:nowrap;gap:.4rem;}
.panel-b .perso .btn{padding:.5rem .95rem;font-size:.64rem;white-space:nowrap;}
@media(max-width:48rem){
  .panel-b .perso{flex:0 0 min(17.5rem,80vw);grid-template-columns:1fr;align-items:start;}
  .panel-b .perso .fig{height:clamp(7rem,20svh,10rem);}
  .panel-b .perso p.tx{-webkit-line-clamp:3;}
  .panel-b .perso .acts{margin-top:.7rem;}
  .panel-b .perso .btn{padding:.45rem 1rem;font-size:.66rem;}
}
.panel-b .aviso{max-width:44rem;margin-inline:auto;}
.panel-b{display:none;}
.panel-b.on{display:block;animation:fadein .4s var(--ease);}

/* el lema de la sección, en vez de la barrita del pie */
.lema{
  font-size:.76rem;font-weight:600;font-style:italic;letter-spacing:.02em;
  color:var(--ink-3);text-align:center;
}
.lema:empty{display:none;}

/* ══ SECCIONES (plantilla única) ═══════════════════════════ */
.vista{display:none;}
.vista.on{display:block;animation:fadein .5s var(--ease);}
@keyframes fadein{from{opacity:0;transform:translateY(.7rem)}to{opacity:1;transform:none}}

/* — 1. destacado de sección — */
.sec-hero{
  position:relative;min-height:min(80svh,42rem);display:flex;align-items:flex-end;
  isolation:isolate;overflow:hidden;
}
.sec-hero .bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:50% 45%;transform:scale(1.04);}
.sec-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(12,14,36,.9) 0%,rgba(12,14,36,.25) 32%,rgba(12,14,36,.72) 74%,var(--ground) 100%);
}
.sec-hero .in{
  padding:calc(var(--head-h) + 3.2rem) var(--pad) 3.6rem;max-width:82rem;margin-inline:auto;width:100%;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.4rem,4vw,3.4rem);align-items:center;
}
.hero-cover{
  width:clamp(10rem,24vw,19rem);aspect-ratio:1;border-radius:1rem;flex:0 0 auto;
  background-size:cover;background-position:50% 50%;background-color:var(--surface2);
  box-shadow:0 1.8rem 4.5rem rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.13);
}
@media(max-width:52rem){
  .sec-hero .in{grid-template-columns:1fr;justify-items:start;}
  .hero-cover{width:min(16rem,58vw);}
}
.sec-hero h1{font-size:clamp(2.4rem,7.5vw,4.6rem);margin:.5rem 0 .1rem;max-width:16ch;}
.sec-hero h1.largo{font-size:clamp(1.9rem,4.6vw,3.1rem);max-width:22ch;line-height:1.06;}
.sec-hero .lede{max-width:34rem;color:var(--ink-2);margin-top:.85rem;font-size:1.02rem;}
.sec-hero .meta{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.1rem;}
.sec-hero .acts{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.6rem;}
.dest-tag{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
}
.dest-tag i{width:.4rem;height:.4rem;border-radius:50%;background:var(--gold);display:block;}

/* — chips / etiquetas — */
.chip{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.3rem .72rem;border-radius:1.2rem;border:1px solid var(--line);
  font-size:.685rem;font-weight:700;letter-spacing:.06em;color:var(--ink-2);
  background:rgba(244,243,251,.05);white-space:nowrap;
}
.chip.etapa{border-color:rgba(32,110,141,.6);color:#7FD0EE;background:rgba(32,110,141,.14);}
.chip.tipo{border-color:rgba(57,48,140,.7);color:#B4AAF5;background:rgba(57,48,140,.2);}

/* — bloques de sección — */
.bloque{padding:clamp(3rem,7vw,5.4rem) 0;}
.bloque + .bloque{border-top:1px solid var(--line);}
.bloque-cab{
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin-bottom:1.7rem;
}
.bloque-cab h2{font-size:clamp(1.35rem,3.6vw,2rem);}
.bloque-cab p{color:var(--ink-2);font-size:.92rem;max-width:36rem;margin-top:.45rem;}

/* — carrusel horizontal — */
.carrusel{position:relative;}
.pista{
  display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:.3rem .3rem 1.3rem;margin:-.3rem calc(var(--pad) * -1) 0;
  padding-inline:var(--pad);scrollbar-width:none;scroll-behavior:smooth;
}
.pista::-webkit-scrollbar{display:none;}
.pista > *{scroll-snap-align:start;flex:0 0 auto;}
.flechas{display:flex;gap:.4rem;}
.flechas button{
  width:2.2rem;height:2.2rem;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink-2);transition:.28s var(--ease);
}
.flechas button:hover{border-color:var(--ink);color:var(--ink);background:rgba(244,243,251,.07);}
.flechas button:disabled{opacity:.28;cursor:default;}
.flechas svg{width:1rem;height:1rem;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* — rejilla — */
.rejilla{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));}

/* ══ LA CARTA (componente único) ═══════════════════════════ */
.carta{
  width:17.5rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;
  height:24.5rem;position:relative;text-align:left;
  transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
.rejilla .carta{width:auto;}
.carta:hover,.carta:focus-within,.carta.open{
  border-color:rgba(244,243,251,.32);transform:translateY(-3px);
  box-shadow:0 1.2rem 2.6rem rgba(0,0,0,.45);
}
.carta .ph{
  height:13.4rem;background-size:cover;background-position:50% 42%;flex:0 0 auto;
  position:relative;transition:height .45s var(--ease);background-color:var(--surface2);
}
.carta:hover .ph,.carta:focus-within .ph,.carta.open .ph{height:7.2rem;}
.carta .ph::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(22,26,62,.85) 100%);
}
.carta .cuerpo{padding:.95rem 1.05rem 1.05rem;display:flex;flex-direction:column;gap:.5rem;flex:1 1 auto;min-height:0;}
.carta .k{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.carta h3{font-size:1.06rem;line-height:1.16;}
.carta .tags{display:flex;flex-wrap:wrap;gap:.3rem;}
.carta .tags .chip{font-size:.6rem;padding:.2rem .55rem;}
.carta .about{
  font-size:.83rem;color:var(--ink-2);line-height:1.5;
  opacity:0;max-height:0;overflow:hidden;
  transition:opacity .35s var(--ease) .05s,max-height .45s var(--ease);
}
.carta:hover .about,.carta:focus-within .about,.carta.open .about{opacity:1;max-height:8rem;}
.carta .acts{
  margin-top:auto;display:flex;gap:.4rem;flex-wrap:wrap;
  opacity:0;transform:translateY(.4rem);
  transition:opacity .35s var(--ease) .08s,transform .35s var(--ease) .08s;
}
.carta:hover .acts,.carta:focus-within .acts,.carta.open .acts{opacity:1;transform:none;}
.carta .mas{
  position:absolute;top:.7rem;right:.7rem;width:1.9rem;height:1.9rem;border-radius:50%;
  background:rgba(12,14,36,.7);backdrop-filter:blur(6px);border:1px solid var(--line);
  display:none;place-items:center;font-size:1rem;line-height:1;color:var(--ink);
}
@media(hover:none){
  .carta .mas{display:grid;}
  .carta{height:auto;min-height:22rem;}
}
.carta .precio{font-size:1.02rem;font-weight:700;color:var(--ink);}
.carta .precio small{font-size:.68rem;font-weight:700;color:var(--ink-3);letter-spacing:.1em;}

/* — carta grande (destacado dentro de carrusel) — */
.carta.ancha{width:26rem;height:16.5rem;flex-direction:row;}
.carta.ancha .ph{width:11rem;height:100%;flex:0 0 auto;}
.carta.ancha:hover .ph{height:100%;width:8rem;}
.carta.ancha .ph::after{background:linear-gradient(90deg,transparent 40%,rgba(22,26,62,.7) 100%);}

/* ══ INICIO ═══════════════════════════════════════════════
   Dos columnas: la marca a la izquierda, lo nuevo a la derecha.
   Una sola pantalla, sin scroll. */
.vista.on{height:100svh;overflow:hidden;position:relative;}
body{overflow:hidden;height:100svh;}
footer.site{display:none;}

/* El inicio es una sola pantalla. El contacto es su propia sección. */
.pant{position:relative;height:100svh;}

.inicio{
  position:relative;z-index:2;          /* por encima del velo del fondo */
  height:100%;max-width:82rem;margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  align-items:end;gap:clamp(1.4rem,5vw,3.4rem);
  padding:calc(var(--head-h) + 1rem) var(--pad) 3.4rem;
}
/* la marca abajo a la izquierda, con aire encima: el minimalismo que aprobó */
.ini-marca{
  display:grid;gap:clamp(.55rem,1.6vh,1rem);justify-items:start;align-self:end;
  padding-bottom:clamp(.5rem,5vh,3.2rem);
}
.ini-kicker{
  font-weight:600;font-size:clamp(.72rem,1.5vw,.88rem);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
}
.ini-marca-nombre{
  font-size:clamp(2.5rem,7.2vw,5.4rem);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;line-height:.98;
  text-shadow:0 .4rem 2.4rem rgba(0,0,0,.6);margin-right:-.1em;
}
.ini-nuevo{min-width:0;align-self:center;}
@media(max-width:62rem){
  .inicio{grid-template-columns:1fr;align-items:center;align-content:center;gap:clamp(.8rem,2.2vh,1.4rem);}
  .ini-marca{justify-items:center;text-align:center;padding-bottom:0;align-self:center;}
  .ini-nuevo{align-self:center;}
}

#rockolaInicio .rk-marco{--card:min(40svh,38vw,21rem);}
#rockolaInicio .rk-info{min-height:6.6rem;}
@media(max-width:62rem){#rockolaInicio .rk-marco{--card:min(32svh,60vw,19rem);}}

/* ══ ROCKOLA ══════════════════════════════════════════════
   La del centro grande y de frente; las de los lados giradas
   hacia atrás. Empieza en lo más nuevo y sigue con el azar. */
.rockola{width:100%;max-width:64rem;margin-inline:auto;}
.rk-cab{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.rk-nav{display:flex;align-items:center;gap:.7rem;}
/* flechas de girar dentro de las cinco: junto a las portadas, no arriba */
.rk-girar{
  position:absolute;top:50%;transform:translateY(-50%);z-index:60;
  width:2.5rem;height:2.5rem;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--ink-2);
  background:rgba(12,14,36,.6);backdrop-filter:blur(10px);transition:.26s var(--ease);
}
.rk-girar:hover{color:var(--ink);border-color:var(--ink-2);background:rgba(12,14,36,.85);}
.rk-girar svg{width:1.05rem;height:1.05rem;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.rk-girar.izq{left:0;} .rk-girar.der{right:0;}
.rk-girar:disabled{opacity:.22;cursor:default;}
.rk-girar:disabled:hover{color:var(--ink-2);border-color:var(--line);background:rgba(12,14,36,.6);}
@media(max-width:44rem){.rk-girar{width:2.1rem;height:2.1rem;}}
/* la puerta del final: aparece sólo al llegar a la última de la selección,
   así deja de competir con la obra y se vuelve recompensa */
.rk-puerta{
  display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.25rem;border-radius:2rem;
  border:1.5px solid var(--gold);color:var(--gold);
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  transition:.26s var(--ease);animation:asoma .5s var(--ease);
}
.rk-puerta:hover{background:rgba(227,178,60,.14);transform:translateY(-1px);}
.rk-puerta svg{width:.95rem;height:.95rem;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
@keyframes asoma{from{opacity:0;transform:translateX(-.5rem)}to{opacity:1;transform:none}}
.rk-volver-sel{
  font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);padding:.5rem .7rem;transition:color .25s;
}
.rk-volver-sel:hover{color:var(--ink);}
.rk-hint{
  font-size:.72rem;font-weight:700;letter-spacing:.1em;color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
@media(max-width:34rem){.rk-hint{display:none;}}
.rk-et{
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);transition:color .5s var(--ease);
}
.rk-et.banco{color:var(--teal);}
.rk-barra{height:2px;border-radius:2px;background:rgba(244,243,251,.12);overflow:hidden;margin:.75rem 0 clamp(1rem,3vw,1.8rem);}
.rk-barra i{display:block;height:100%;width:0;background:var(--gold);border-radius:2px;}
.rk-barra.banco i{background:var(--teal);}

.rk-escena{
  position:relative;display:flex;align-items:center;justify-content:center;
  touch-action:pan-y;user-select:none;
}
/* El marco recorta: dentro cabe la obra completa y el 17% de la siguiente.
   Al pasar el cursor, la siguiente asoma un poco más. */
.rk-marco{
  --card:min(42svh,60vw,26rem);
  --gap:clamp(.55rem,1.4vw,.95rem);
  --peek:calc(var(--card) * .17);
  position:relative;overflow:hidden;border-radius:1rem;
  width:calc(var(--card) + var(--gap) + var(--peek));
  height:var(--card);
  transition:width .45s var(--ease);
}
.rk-escena:hover .rk-marco{--peek:calc(var(--card) * .26);}
.rk-marco.sinpeek{--peek:0px;--gap:0px;}
.rk-card{
  position:absolute;top:0;left:0;width:var(--card);height:var(--card);
  border-radius:1rem;background-size:cover;background-position:50% 50%;
  background-color:var(--surface2);cursor:pointer;
  box-shadow:0 1.1rem 2.8rem rgba(0,0,0,.5);
  transition:transform .52s var(--ease),opacity .4s var(--ease),filter .5s var(--ease);
  will-change:transform;
}
/* la siguiente es la promesa: se reconoce por su filo dorado */
.rk-card.prox{
  filter:brightness(.72) saturate(.9);
  box-shadow:inset 2px 0 0 var(--gold),0 1.1rem 2.8rem rgba(0,0,0,.5);
}
.rk-card.prev{filter:brightness(.5);}
.rk-play{
  position:absolute;inset:0;display:grid;place-items:center;
  opacity:0;transition:opacity .45s var(--ease);pointer-events:none;
}
.rk-card.act .rk-play{opacity:1;}
.rk-play i{
  width:3.4rem;height:3.4rem;border-radius:50%;display:grid;place-items:center;
  background:rgba(12,14,36,.5);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.34);box-shadow:0 .5rem 1.6rem rgba(0,0,0,.45);
}
.rk-play svg{width:1.05rem;height:1.05rem;fill:#fff;margin-left:.14rem;}

.rk-info{
  text-align:center;margin-top:clamp(.8rem,2vh,1.6rem);
  display:grid;gap:.25rem;justify-items:center;min-height:7.6rem;
}
.rk-k{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);}
.rk-info h3{font-size:clamp(1.3rem,4vw,2.1rem);}
.rk-info h3.largo{font-size:clamp(1.05rem,3vw,1.55rem);}
.rk-s{font-size:.85rem;color:var(--ink-2);}
.rk-acts{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;justify-content:center;margin-top:.7rem;}
.rk-play-btn{
  display:inline-flex;align-items:center;gap:.45rem;padding:.6rem 1.3rem;border-radius:2rem;
  background:var(--gold);color:#1a1405;font-size:.78rem;font-weight:700;letter-spacing:.06em;
  transition:.28s var(--ease);
}
.rk-play-btn:hover{filter:brightness(1.1);transform:translateY(-1px);}
.rk-play-btn svg{width:.85rem;height:.85rem;fill:currentColor;stroke:none;}
@media(max-width:44rem){
  .rk-info{min-height:8.4rem;}
  .rk-marco{--card:min(38svh,66vw,20rem);}
}

/* ══ FICHITAS · especies ══════════════════════════════════ */
.fichitas{display:flex;gap:.8rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.5rem;}
.fichitas::-webkit-scrollbar{display:none;}
.fichita{flex:0 0 10rem;}
.fichita{
  display:grid;gap:.5rem;text-align:left;border-radius:.7rem;padding:.3rem;
  border:1px solid transparent;transition:.3s var(--ease);
}
.fichita .t{
  display:block;aspect-ratio:4/3;border-radius:.5rem;background-size:cover;
  background-position:50% 35%;background-color:var(--surface2);
}
.fichita .n{font-size:.88rem;font-weight:700;padding-left:.15rem;}
.fichita:hover{border-color:rgba(244,243,251,.28);background:rgba(244,243,251,.05);}

/* ══ CAPÍTULOS ════════════════════════════════════════════ */
.caps{display:flex;gap:.55rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.5rem;}
/* capítulos como libro: tarjetas verticales con su número grande */
.caps.libro{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(8.5rem,13vw,10.5rem);gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.3rem .1rem .8rem;}
.caps.libro .cap-l{scroll-snap-align:start;position:relative;display:grid;align-content:space-between;gap:.6rem;aspect-ratio:3/4;padding:1rem .95rem;
  border-radius:1rem;text-align:left;overflow:hidden;isolation:isolate;border:1px solid rgba(244,243,251,.1);
  background:linear-gradient(165deg,rgba(57,48,140,.35),rgba(22,26,62,.85) 60%);transition:transform .45s var(--ease),border-color .45s,box-shadow .45s;}
.caps.libro .cap-l::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--img) center/cover;opacity:.32;transition:opacity .45s,transform .8s var(--ease);}
.caps.libro .cap-l::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(12,14,36,.15),rgba(12,14,36,.9));}
.caps.libro .cap-l:hover{transform:translateY(-5px);border-color:rgba(227,178,60,.55);box-shadow:0 1.4rem 2.6rem rgba(0,0,0,.45);}
.caps.libro .cap-l:hover::before{opacity:.5;transform:scale(1.06);}
.caps.libro .num{font-size:2.6rem;font-weight:800;line-height:1;color:var(--gold);letter-spacing:.02em;}
.caps.libro .cap-k{font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);}
.caps.libro .cap-t{font-size:.92rem;font-weight:700;line-height:1.25;text-transform:none;letter-spacing:.005em;}
.caps.libro .cap-x{font-size:.72rem;line-height:1.45;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.caps.libro .cap-l.pronto{background:linear-gradient(165deg,rgba(244,243,251,.05),rgba(22,26,62,.6));border-style:dashed;border-color:rgba(244,243,251,.14);}
.caps.libro .cap-l.pronto .num{color:rgba(227,178,60,.45);}
.caps.libro .cap-l.pronto .cap-t{color:var(--ink-3);font-weight:600;}
.caps.libro .candado{width:1rem;height:1rem;stroke:var(--ink-3);fill:none;stroke-width:2;stroke-linecap:round;}
.caps::-webkit-scrollbar{display:none;}
.cap{flex:0 0 6.5rem;}
.cap{
  display:grid;gap:.15rem;padding:.85rem .9rem;border-radius:.6rem;text-align:left;
  border:1px solid var(--line);background:var(--surface);transition:.28s var(--ease);
}
.cap .num{font-size:1.5rem;font-weight:700;color:var(--ink-3);letter-spacing:.06em;line-height:1;}
.cap .est{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.cap:hover{border-color:rgba(244,243,251,.3);background:var(--surface2);}
.cap:hover .num{color:var(--ink);}

/* ══ RELACIONADAS ═════════════════════════════════════════ */
.rel{margin-top:.6rem;padding-top:1rem;border-top:1px solid var(--line);}
.rel-l{display:grid;gap:.35rem;margin-top:.7rem;}
.rel-i{
  display:flex;gap:.75rem;align-items:center;padding:.4rem;border-radius:.5rem;
  text-align:left;transition:background .24s;width:100%;
}
.rel-i:hover{background:rgba(244,243,251,.07);}
.rel-i .t{
  width:2.9rem;height:2.9rem;border-radius:.4rem;flex:0 0 auto;
  background-size:cover;background-position:50% 40%;background-color:var(--surface2);
}
.rel-i .n{min-width:0;display:grid;}
.rel-i .n b{font-size:.9rem;font-weight:700;}
.rel-i .n em{font-size:.72rem;font-style:normal;color:var(--ink-3);}

/* ══ IDIOMA ═══════════════════════════════════════════════ */
.idioma{
  display:inline-flex;border:1px solid var(--line);border-radius:1.4rem;overflow:hidden;
  background:rgba(12,14,36,.5);
}
.idioma button{
  padding:.4rem .7rem;font-size:.66rem;font-weight:700;letter-spacing:.1em;
  color:var(--ink-3);transition:.26s var(--ease);
}
.idioma button[aria-pressed="true"]{background:var(--ink);color:var(--ground);}
.idioma button:hover[aria-pressed="false"]{color:var(--ink);}
.idioma.flota{position:absolute;top:1.3rem;right:clamp(1.15rem,4vw,3.5rem);z-index:6;}
@media(max-width:44rem){.idioma.flota{top:.9rem;right:.9rem;}}

/* ══ FIJAR (panel) ════════════════════════════════════════ */
.fijar-l{
  display:flex;gap:.55rem;align-items:flex-start;font-size:.78rem;color:var(--ink-2);
  cursor:pointer;line-height:1.45;
}
.fijar-l input{accent-color:var(--gold);margin-top:.18rem;flex:0 0 auto;}
.fijar-l em{font-style:normal;color:var(--ink-3);}

/* ══ PENDIENTES DE CONTENIDO ══════════════════════════════ */
body.pend [data-pend]{position:relative;outline:1.5px dashed var(--gold);outline-offset:-1.5px;border-radius:.4rem;}
body.pend [data-pend]::before{
  content:attr(data-pend);position:absolute;z-index:12;top:.25rem;left:.25rem;
  background:var(--gold);color:#1a1405;font-size:.56rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:.13rem .42rem;border-radius:.28rem;
  pointer-events:none;max-width:calc(100% - .5rem);
}

/* ══ PANEL DE DISEÑO (solo prototipo) ══════════════════════ */
.panel{
  position:fixed;left:1rem;bottom:1rem;z-index:80;
  display:grid;gap:.5rem;justify-items:start;
  transition:bottom .4s var(--ease);
}
body.player-on .panel{bottom:7.2rem;}
body.player-on.pl-abierto .panel{bottom:12.4rem;}
@media(max-width:52rem){
  body.player-on .panel{bottom:13.4rem;}
  body.player-on.pl-abierto .panel{bottom:26rem;}
}
.panel-btn{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.55rem .95rem;border-radius:2rem;
  background:rgba(12,14,36,.9);backdrop-filter:blur(14px);
  border:1px solid var(--gold);color:var(--gold);
  font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.panel-caja{
  width:min(21rem,calc(100vw - 2rem));padding:1rem;border-radius:var(--r);
  background:rgba(12,14,36,.96);backdrop-filter:blur(18px);border:1px solid var(--line);
  display:grid;gap:.85rem;box-shadow:0 1rem 3rem rgba(0,0,0,.6);
}
.panel-caja h4{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);}
.panel-caja p{font-size:.78rem;color:var(--ink-2);line-height:1.5;}
.panel-caja label{font-size:.72rem;color:var(--ink-2);display:grid;gap:.3rem;}
.panel-caja input[type=range]{width:100%;accent-color:var(--gold);}
.panel-out{
  font-size:.76rem;padding:.6rem .7rem;border-radius:.5rem;
  background:rgba(227,178,60,.1);border:1px solid rgba(227,178,60,.35);color:#F0D89B;line-height:1.45;
}

/* ══ BUSCADOR ═════════════════════════════════════════════ */
.buscador{
  position:fixed;inset:0;z-index:90;background:rgba(6,7,20,.86);backdrop-filter:blur(14px);
  display:none;padding:clamp(3rem,10vh,7rem) var(--pad) 2rem;overflow-y:auto;
}
.buscador.on{display:block;animation:fadein .3s var(--ease);}
.buscador .caja{max-width:46rem;margin-inline:auto;}
.buscador input{
  width:100%;background:none;border:0;border-bottom:2px solid var(--line);
  color:var(--ink);font:1000 clamp(1.5rem,5vw,2.4rem)/1.2 Nunito,sans-serif;
  padding:.5rem 0 .8rem;letter-spacing:.02em;
}
.buscador input::placeholder{color:var(--ink-3);}
.buscador input:focus{outline:none;border-bottom-color:var(--gold);}
.busq-nota{font-size:.78rem;color:var(--ink-3);margin-top:.7rem;}
.busq-res{display:grid;gap:.15rem;margin-top:1.6rem;}
.busq-res a{
  display:flex;gap:.85rem;align-items:center;padding:.6rem .7rem;border-radius:.6rem;
  transition:background .22s;cursor:pointer;
}
.busq-res a:hover,.busq-res a.sel{background:rgba(244,243,251,.08);}
.busq-res .mini{width:3.1rem;height:3.1rem;border-radius:.45rem;background-size:cover;background-position:50% 40%;flex:0 0 auto;background-color:var(--surface2);}
.busq-res .tx{min-width:0;}
.busq-res .tx b{display:block;font-weight:700;font-size:.95rem;}
.busq-res .tx span{font-size:.74rem;color:var(--ink-3);}
.busq-vacio{color:var(--ink-2);padding:1.5rem 0;font-size:.92rem;}
.busq-cerrar{position:absolute;top:1.2rem;right:1.2rem;}

/* el buscador (también «Ver todo lo suyo»): panel de vidrio, resultados que entran en cascada */
.buscador{background:radial-gradient(60% 50% at 50% 0%,rgba(57,48,140,.35),transparent 70%),rgba(6,7,20,.9);backdrop-filter:blur(18px) saturate(1.2);}
.buscador .caja{padding:clamp(1.2rem,3vw,2rem);border-radius:1.4rem;border:1px solid rgba(244,243,251,.1);
  background:linear-gradient(165deg,rgba(57,48,140,.22),rgba(22,26,62,.55) 55%,rgba(32,110,141,.12));box-shadow:0 2rem 5rem rgba(0,0,0,.5);
  animation:pgSube .45s var(--ease) both;}
.buscador input{border-bottom:1px solid rgba(244,243,251,.14);background:linear-gradient(90deg,var(--gold),var(--gold)) 0 100%/0 2px no-repeat;
  transition:background-size .5s var(--ease);font-weight:800;}
.buscador input:focus{border-bottom-color:rgba(244,243,251,.14);background-size:100% 2px;}
.busq-res{gap:.35rem;}
.busq-res a{position:relative;gap:1rem;padding:.65rem .8rem;border:1px solid transparent;border-radius:.9rem;
  animation:pgSube .45s var(--ease) both;transition:background .25s,border-color .25s,transform .3s var(--ease);}
.busq-res a:nth-child(2){animation-delay:.04s}.busq-res a:nth-child(3){animation-delay:.08s}.busq-res a:nth-child(4){animation-delay:.12s}
.busq-res a:nth-child(5){animation-delay:.16s}.busq-res a:nth-child(6){animation-delay:.2s}.busq-res a:nth-child(n+7){animation-delay:.24s}
.busq-res a:hover,.busq-res a.sel{background:rgba(244,243,251,.06);border-color:rgba(227,178,60,.35);transform:translateX(4px);}
.busq-res a::after{content:"→";margin-left:auto;color:var(--gold);opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .3s var(--ease);}
.busq-res a:hover::after{opacity:1;transform:none;}
.busq-res .mini{width:3.6rem;height:3.6rem;border-radius:.7rem;box-shadow:0 .5rem 1.2rem rgba(0,0,0,.35);}
.busq-res .tx b{font-size:1rem;}
.busq-res .tx span{letter-spacing:.02em;}
.busq-todos{justify-self:start;margin-top:.8rem;padding:.6rem 1.2rem;border-radius:2rem;border:1px solid rgba(227,178,60,.5);color:var(--gold);
  font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;transition:background .25s,color .25s;}
.busq-todos:hover{background:var(--gold);color:var(--ground);}
@media(prefers-reduced-motion:reduce){.busq-res a,.buscador .caja{animation:none;}}

/* ══ FILTROS ══════════════════════════════════════════════ */
.filtros{display:grid;gap:.8rem;}
.fila-f{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;}
.fila-f > .et{font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);min-width:4.6rem;}
.fchip{
  padding:.34rem .8rem;border-radius:1.2rem;border:1px solid var(--line);
  font-size:.72rem;font-weight:700;color:var(--ink-2);transition:.26s var(--ease);
}
.fchip:hover{border-color:var(--ink-2);color:var(--ink);}
.fchip[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink);font-weight:700;}
.conteo{font-size:.78rem;color:var(--ink-3);margin-top:.2rem;}

/* ══ UNIVERSO ═════════════════════════════════════════════ */
.perso{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(1.2rem,4vw,3rem);
  align-items:center;padding:clamp(2rem,5vw,3.5rem) 0;
}

.perso .fig{
  position:relative;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(160deg,var(--navy),var(--ground));
}
.perso .fig .art{position:absolute;inset:0;background-size:cover;background-position:50% 30%;opacity:.45;}
.perso .fig .fig-per{
  position:absolute;inset:auto 0 0;height:88%;background-size:contain;
  background-position:50% 100%;background-repeat:no-repeat;
}
.perso h3{font-size:clamp(1.8rem,5vw,2.9rem);}
.perso .rol{margin-top:.35rem;}
.perso p.tx{color:var(--ink-2);margin-top:1rem;max-width:34rem;}
.perso .acts{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.4rem;}
@media(max-width:48rem){.perso{grid-template-columns:1fr;}.perso:nth-child(even){direction:ltr;}}

/* — etapas (eje de tiempo) — */
.eje{display:flex;gap:1rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.5rem;}
.eje::-webkit-scrollbar{display:none;}
.eje .tramo{flex:0 0 min(22rem,80vw);border-top:0;border-left:2px solid var(--line);
  padding:.2rem 0 .2rem 1.1rem;display:block;}
.eje .tramo .anio{display:flex;align-items:baseline;gap:.6rem;font-size:1.7rem;}
.eje .tramo .anio small{margin:0;}
.tramo{
  display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:clamp(1rem,3vw,2.4rem);
  padding:clamp(1.4rem,3.5vw,2.4rem) 0;border-top:1px solid var(--line);position:relative;
}
.tramo:first-child{border-top:0;}
.tramo .anio{font-size:clamp(2rem,5.5vw,3.2rem);font-weight:700;color:var(--ink-3);letter-spacing:.06em;}
.tramo .anio small{display:block;font-size:.66rem;font-weight:700;letter-spacing:.1em;color:var(--teal);margin-top:.2rem;}
.tramo h3{font-size:clamp(1.3rem,3.4vw,1.85rem);}
.tramo p{color:var(--ink-2);margin-top:.5rem;max-width:38rem;font-size:.94rem;}
.tramo .obras{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.9rem;}
@media(max-width:40rem){.tramo{grid-template-columns:1fr;gap:.6rem;}.tramo .anio{font-size:1.6rem;display:flex;align-items:baseline;gap:.7rem;}.tramo .anio small{margin:0;}}

/* — lugares — */
.lugares{display:flex;gap:1rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.5rem;}
.lugares::-webkit-scrollbar{display:none;}
.lugar{flex:0 0 min(20rem,78vw);}
.lugar{
  position:relative;min-height:clamp(12rem,34svh,19rem);border-radius:var(--r);overflow:hidden;
  display:flex;align-items:flex-end;padding:1.2rem;isolation:isolate;
  border:1px solid var(--line);transition:.4s var(--ease);
}
.lugar .bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:50% 45%;transition:transform .8s var(--ease);}
.lugar::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 30%,rgba(12,14,36,.9) 100%);}
.lugar:hover{border-color:rgba(244,243,251,.3);}
.lugar:hover .bg{transform:scale(1.06);}
.lugar h3{font-size:1.35rem;}
.lugar .sub{font-size:.8rem;color:var(--ink-2);margin-top:.35rem;}
.lugar .subdivs{display:flex;flex-wrap:wrap;gap:.28rem;margin-top:.7rem;}
.lugar .subdivs span{font-size:.62rem;padding:.16rem .5rem;border-radius:1rem;background:rgba(12,14,36,.7);border:1px solid var(--line);color:var(--ink-2);}

/* ══ FICHA (panel lateral) ════════════════════════════════ */
.ficha{
  position:fixed;inset:0 0 0 auto;width:min(34rem,100vw);z-index:95;
  background:var(--surface);border-left:1px solid var(--line);
  transform:translateX(101%);transition:transform .48s var(--ease);
  overflow-y:auto;overscroll-behavior:contain;
}
.ficha.on{transform:none;box-shadow:-1rem 0 4rem rgba(0,0,0,.6);}
.ficha-velo{position:fixed;inset:0;z-index:94;background:rgba(6,7,20,.7);opacity:0;pointer-events:none;transition:opacity .4s;}
.ficha-velo.on{opacity:1;pointer-events:auto;}
.ficha .top{position:relative;height:15rem;background-size:cover;background-position:50% 38%;background-color:var(--surface2);}
.ficha .top::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,26,62,.3),var(--surface));}
.ficha .x{position:absolute;top:.85rem;right:.85rem;z-index:2;background:rgba(12,14,36,.75);backdrop-filter:blur(8px);}
.ficha .in{padding:0 clamp(1.1rem,4vw,1.9rem) 3rem;margin-top:-3.5rem;position:relative;display:grid;gap:1rem;}
.ficha h2{font-size:clamp(1.7rem,5vw,2.35rem);}
.ficha .tags{display:flex;flex-wrap:wrap;gap:.35rem;}
.ficha .tx{color:var(--ink-2);}
.ficha .acts{display:flex;flex-wrap:wrap;gap:.5rem;}
.ficha .dato{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-top:1px solid var(--line);font-size:.86rem;}
.ficha .dato b{color:var(--ink-3);font-weight:700;}
.ficha iframe{width:100%;height:352px;border:0;border-radius:.75rem;}

/* ══ REPRODUCTOR ══════════════════════════════════════════ */
.player{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(12,14,36,.95);backdrop-filter:blur(20px);border-top:1px solid var(--line);
  transform:translateY(101%);transition:transform .45s var(--ease);
}
.player.on{transform:none;}
.player .cab{
  display:flex;align-items:center;gap:.7rem 1rem;padding:.5rem var(--pad);flex-wrap:wrap;
  max-width:82rem;margin-inline:auto;
}
.pl-sp{flex:1 1 18rem;max-width:32rem;min-width:0;display:flex;}
.pl-sp iframe{width:100%;height:80px;border:0;border-radius:.6rem;}
.pl-sp:empty{display:none;}
.player .cab .tx{flex:1 1 8rem;}
.player .cab .mini{width:2.4rem;height:2.4rem;border-radius:.4rem;background-size:cover;background-position:50%;flex:0 0 auto;background-color:var(--surface2);}
.player .cab .tx{flex:1 1 auto;min-width:0;}
.player .cab .tx b{display:block;font-size:.88rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.player .cab .tx span{font-size:.7rem;color:var(--ink-3);}
.player .marco{
  max-height:0;overflow:hidden;transition:max-height .45s var(--ease);
  padding-inline:var(--pad);
}
.player .marco > *{max-width:82rem;margin-inline:auto;}
.player.abierto .marco{max-height:min(14rem,34svh);padding-bottom:.8rem;}
body.player-on{padding-bottom:0;}

/* ══ TIENDA ═══════════════════════════════════════════════ */
.aviso{
  display:flex;gap:.8rem;align-items:flex-start;padding:1rem 1.1rem;border-radius:var(--r);
  background:rgba(227,178,60,.09);border:1px solid rgba(227,178,60,.35);
}
.aviso svg{width:1.15rem;height:1.15rem;stroke:var(--gold);fill:none;stroke-width:1.9;flex:0 0 auto;margin-top:.15rem;}
.aviso p{font-size:.86rem;color:#F0D89B;line-height:1.55;}
.aviso b{color:var(--gold);}

/* ══ PIE ══════════════════════════════════════════════════ */
footer.site{border-top:1px solid var(--line);padding:clamp(2.5rem,6vw,4rem) 0 3rem;margin-top:2rem;}
footer.site .cols{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));}
footer.site h5{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.7rem;}
footer.site a,footer.site button{display:block;font-size:.88rem;color:var(--ink-2);padding:.2rem 0;transition:color .25s;text-align:left;}
footer.site a:hover,footer.site button:hover{color:var(--ink);}
footer.site .logo{width:9rem;opacity:.75;margin-bottom:1rem;}
footer.site .fin{margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid var(--line);font-size:.76rem;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;justify-content:space-between;}

/* ══ EL REPERTORIO ════════════════════════════════════════
   Cinco piezas numeradas en fila y la cuenta siempre a la vista.
   Arriba, las dos perillas: qué se ve (pestañas) y cómo se ordena. */
.repertorio{display:grid;gap:clamp(.7rem,1.8vh,1.2rem);justify-items:center;width:100%;}
.repertorio.cambia .rp-fila{opacity:0;transform:translateY(.5rem);}
.rp-fila{transition:opacity .4s var(--ease),transform .4s var(--ease);}

.rp-mando{
  display:flex;align-items:center;justify-content:flex-end;gap:.7rem 1.2rem;
  flex-wrap:wrap;width:100%;
}
.rp-mando.etapa{justify-content:center;}
.rp-orden{display:inline-flex;gap:.2rem;padding:.2rem;border-radius:1.6rem;border:1px solid var(--line);background:rgba(12,14,36,.5);}
.rp-orden button{
  padding:.34rem .85rem;border-radius:1.4rem;white-space:nowrap;
  font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);transition:.26s var(--ease);
}
.rp-orden button:hover{color:var(--ink);}
.rp-orden button[aria-selected="true"]{background:var(--teal);color:#fff;}
.rp-donde{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
.rp-cab{
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--et,var(--ink-2));
}
.rp-cuenta{
  font-size:.7rem;font-weight:700;letter-spacing:.1em;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.rp-mando.etapa .rp-cuenta{padding-left:.6rem;border-left:1px solid var(--line);}
.rp-fl{
  width:1.9rem;height:1.9rem;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--ink-2);transition:.26s var(--ease);
}
.rp-fl:hover:not(:disabled){color:var(--ink);border-color:var(--ink-2);background:rgba(244,243,251,.07);}
.rp-fl:disabled{opacity:.25;cursor:default;}
.rp-fl svg{width:.95rem;height:.95rem;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

.rp-fila{
  --rc:min(13rem,17.4vw,32svh);
  display:grid;grid-auto-flow:column;gap:clamp(.5rem,1.3vw,1.1rem);
  justify-content:center;width:100%;
}
.rp-c{
  width:var(--rc);display:grid;gap:.3rem;text-align:left;cursor:pointer;position:relative;
  align-content:start;
}
.rp-art{
  width:100%;aspect-ratio:4/3;border-radius:.6rem;background-size:cover;background-position:50% 42%;
  background-color:var(--surface2);position:relative;overflow:hidden;
  box-shadow:0 .7rem 1.8rem rgba(0,0,0,.45);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.rp-c:hover .rp-art,.rp-c:focus-visible .rp-art{transform:translateY(-3px);box-shadow:0 1.1rem 2.6rem rgba(0,0,0,.6);}
/* el play vive abajo a la izquierda de la obra, como en su ejemplo */
.rp-play{
  position:absolute;inset:auto auto .55rem .55rem;
  width:2.15rem;height:2.15rem;border-radius:50%;display:grid;place-items:center;
  background:rgba(12,14,36,.6);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.34);
  transition:.28s var(--ease);color:#fff;
}
.rp-c:hover .rp-play{background:rgba(12,14,36,.92);border-color:#fff;transform:scale(1.06);}
.rp-play svg{width:.8rem;height:.8rem;fill:#fff;stroke:none;margin-left:.1rem;}
.rp-play.ver svg{fill:none;stroke:#fff;margin:0;width:1rem;height:1rem;}
.rp-play.sinliga{border-style:dashed;border-color:rgba(227,178,60,.65);}
.rp-play.sinliga svg{fill:rgba(255,255,255,.55);}
.rp-tx{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;}
.rp-c h4{font-size:.95rem;line-height:1.2;min-width:0;}
.rp-n{
  font-size:.66rem;font-weight:700;letter-spacing:.1em;color:var(--ink-3);
  font-variant-numeric:tabular-nums;flex:0 0 auto;transition:color .3s var(--ease);
}
.rp-c:hover .rp-n{color:var(--gold);}
.rp-s{font-size:.72rem;color:var(--ink-3);line-height:1.3;}
.rp-nota{font-size:.8rem;color:var(--ink-2);max-width:40rem;text-align:center;line-height:1.5;}
.rp-nota.sindinero{
  display:flex;align-items:center;justify-content:center;gap:.7rem;flex-wrap:wrap;
  max-width:44rem;padding:.6rem .9rem;border-radius:.6rem;
  background:rgba(227,178,60,.08);border:1px solid rgba(227,178,60,.3);color:#F0D89B;
}

/* «Descubrir 5 más», con sus reglas a los lados */
.rp-pie{display:flex;align-items:center;gap:clamp(.7rem,2.5vw,1.6rem);width:100%;max-width:46rem;}
.rp-regla{
  flex:1 1 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(244,243,251,.22),transparent);
}
.rp-mas{
  display:inline-flex;align-items:center;gap:.65rem;padding:.6rem 1.5rem;border-radius:2rem;
  border:1px solid var(--line);background:rgba(12,14,36,.5);transition:.28s var(--ease);flex:0 0 auto;
}
.rp-mas span{display:grid;gap:.05rem;justify-items:center;}
.rp-mas b{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);}
.rp-mas em{font-size:.68rem;font-style:normal;color:var(--ink-3);}
.rp-az{width:1rem;height:1rem;stroke:var(--gold);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.rp-mas:hover{border-color:var(--gold);background:rgba(227,178,60,.1);transform:translateY(-1px);}
.rp-todas{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
/* Tienda: el catálogo completo, sin selecciones. Se pasa de lado. */
.rp-fila.completa{
  display:flex;overflow-x:auto;scrollbar-width:none;justify-content:flex-start;
  margin-inline:calc(var(--pad) * -1);padding:.2rem var(--pad) .5rem;
  scroll-snap-type:x proximity;
}
.rp-fila.completa::-webkit-scrollbar{display:none;}
.rp-fila.completa .rp-c{flex:0 0 var(--rc);scroll-snap-align:start;}

@media(max-width:52rem){
  .rp-fila{
    --rc:min(11rem,46vw);
    display:flex;overflow-x:auto;scrollbar-width:none;justify-content:flex-start;
    padding-bottom:.4rem;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);
  }
  .rp-fila::-webkit-scrollbar{display:none;}
  .rp-c{flex:0 0 var(--rc);}
  .rp-mando{justify-content:center;}
  .rp-regla{display:none;}
  .rp-mas{width:100%;justify-content:center;}
}

/* ══ VISOR A PANTALLA COMPLETA ════════════════════════════
   Como lo pidió: la obra grande, flechas a los lados, nada más. */
.visor{
  position:fixed;inset:0;z-index:120;display:none;
  background:rgba(5,6,18,.95);backdrop-filter:blur(22px);
  align-items:center;justify-content:center;padding:clamp(2.6rem,7vh,4.5rem) clamp(1rem,7vw,5rem);
}
.visor.on{display:flex;animation:fadein .3s var(--ease);}
.vs-fig{display:grid;gap:.9rem;max-width:min(64rem,100%);max-height:100%;width:100%;}
.vs-img{
  width:100%;height:100%;min-height:0;flex:1 1 auto;border-radius:.9rem;
  background-size:contain;background-repeat:no-repeat;background-position:50% 50%;
  aspect-ratio:auto;max-height:calc(100svh - 12rem);min-height:40svh;
}
.vs-pie{
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.vs-tx{display:grid;gap:.2rem;min-width:0;}
.vs-serie{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);}
.vs-tx > b{font-size:clamp(1.05rem,3vw,1.5rem);font-weight:700;}
.vs-acts{display:flex;align-items:center;gap:.7rem;}
.vs-cuenta{font-size:.72rem;font-weight:700;letter-spacing:.1em;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.vs-x{position:absolute;top:1.1rem;right:1.1rem;background:rgba(12,14,36,.7);backdrop-filter:blur(8px);}
.vs-fl{
  position:absolute;top:50%;transform:translateY(-50%);
  width:2.9rem;height:2.9rem;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--ink-2);background:rgba(12,14,36,.6);
  backdrop-filter:blur(10px);transition:.26s var(--ease);
}
.vs-fl:hover{color:var(--ink);border-color:var(--ink-2);background:rgba(12,14,36,.9);}
.vs-fl svg{width:1.2rem;height:1.2rem;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.vs-fl.izq{left:clamp(.5rem,2vw,1.6rem);} .vs-fl.der{right:clamp(.5rem,2vw,1.6rem);}
@media(max-width:44rem){.vs-fl{width:2.3rem;height:2.3rem;}}

/* ══ CRÉDITOS ═════════════════════════════════════════════
   «Que se pueda picar el crédito y llegue al post original.» */
/* Un renglón por rol, como en su mockup:
   «Desarrollo visual e ilustración: Khyabee / Coloreado por: Pluv» */
.creds{
  display:grid;gap:.06rem;justify-items:start;
  font-size:.76rem;color:var(--ink-3);line-height:1.45;
}
.creds .cr{display:block;}
.creds em{font-style:normal;}
.creds a,.creds b{
  font-weight:700;color:var(--ink-2);border-bottom:1px solid transparent;transition:.25s var(--ease);
}
.creds a:hover{color:var(--gold);border-bottom-color:var(--gold);}
.ficha-creds{margin-top:-.4rem;}

/* ══ SERIES · dónde estás y dónde termina ═════════════════ */
.ficha-serie{
  position:absolute;left:1rem;top:1rem;z-index:2;
  font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#1a1405;background:var(--gold);padding:.25rem .6rem;border-radius:.3rem;
}
.ficha .lupa{position:absolute;top:.85rem;right:3.4rem;z-index:2;background:rgba(12,14,36,.75);backdrop-filter:blur(8px);}

/* ══ TRACKLIST ════════════════════════════════════════════ */
.tracklist{list-style:none;display:grid;gap:.1rem;counter-reset:t;}
.tracklist li{
  counter-increment:t;display:flex;gap:.7rem;align-items:baseline;
  padding:.42rem 0;border-top:1px solid var(--line);font-size:.88rem;color:var(--ink-2);
}
.tracklist li::before{
  content:counter(t,decimal-leading-zero);
  font-size:.68rem;font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums;
}
.pl-caja{display:grid;gap:.5rem;}
.pl-lista{
  list-style:none;display:grid;gap:.05rem;
  grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));
  max-height:min(11rem,28svh);overflow-y:auto;scrollbar-width:thin;
}
.pl-lista li{
  display:flex;gap:.7rem;align-items:baseline;padding:.34rem .5rem;border-radius:.35rem;
  font-size:.84rem;color:var(--ink-2);transition:background .22s;
}
.pl-lista li:hover{background:rgba(244,243,251,.07);color:var(--ink);}
.pl-lista li span{font-size:.66rem;font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.pl-falta{font-size:.8rem;color:var(--ink-3);padding:.5rem 0;}
/* la pantalla se encoge lo justo para que la barra no tape nada */
body.player-on .pantalla{padding-bottom:6.2rem;}
body.player-on.pl-abierto .pantalla{padding-bottom:6.2rem;}
@media(max-width:52rem){body.player-on .pantalla{padding-bottom:9.6rem;}}

/* ══ DETRÁS DE LA PIEZA ═══════════════════════════════════
   También se pasa de lado: una pieza a la vez, sin bajar. */
.procesos{
  display:flex;gap:clamp(.8rem,2.5vw,1.6rem);overflow-x:auto;scrollbar-width:none;
  padding-bottom:.4rem;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);
  scroll-snap-type:x mandatory;
}
.procesos::-webkit-scrollbar{display:none;}
.proceso{
  flex:0 0 min(19rem,78vw);scroll-snap-align:start;
  display:grid;gap:.6rem;align-content:start;
  padding:.85rem;border-radius:.9rem;border:1px solid var(--line);background:var(--surface);
}
.pr-fin{
  width:100%;aspect-ratio:1;max-height:clamp(7rem,22svh,11rem);
  border-radius:.6rem;background-size:cover;background-position:50% 45%;
  background-color:var(--surface2);box-shadow:0 .7rem 2rem rgba(0,0,0,.45);
}
.pr-tx{display:grid;gap:.3rem;justify-items:start;min-width:0;}
.pr-tx h3{font-size:clamp(1rem,2.6vw,1.3rem);}
.pr-mini{display:flex;gap:.35rem;flex-wrap:wrap;margin:.15rem 0 .35rem;}
.pr-m{
  width:2.7rem;height:2.7rem;border-radius:.4rem;background-size:cover;background-position:50% 40%;
  background-color:var(--surface2);position:relative;border:1px solid var(--line);
  transition:.28s var(--ease);flex:0 0 auto;
}
.pr-m span{
  position:absolute;inset:auto .14rem .1rem;font-size:.5rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.9);
}
.pr-m:hover{border-color:var(--gold);transform:translateY(-2px);}
.pr-m.fin{border-color:rgba(227,178,60,.5);}
.proceso .creds{font-size:.7rem;}
.ficha-gal .pr-m{width:3.6rem;height:3.6rem;}

/* ══ 404 · también una pantalla, también centrada ════════ */
.pantalla.perdida{grid-template-rows:minmax(0,1fr);align-content:center;justify-items:center;}
.perdida-in{display:grid;gap:.5rem;justify-items:center;text-align:center;max-width:36rem;}
.perdida-in .dest-d{max-width:34ch;-webkit-line-clamp:3;}

/* ══ CONTACTO · sección propia, no el pie de nadie ═══════ */
.pantalla.contacto{
  grid-template-rows:minmax(0,1fr);align-content:center;
  padding:calc(var(--head-h) + 1.4rem) var(--pad) 2.4rem;
}
.cierre-in{
  width:100%;max-width:74rem;margin-inline:auto;
  display:grid;gap:clamp(1.4rem,4vh,2.8rem);
}
.cita{display:grid;gap:.4rem;justify-items:center;text-align:center;}
.cita p{
  font-size:clamp(1.25rem,4vw,2.2rem);font-weight:700;line-height:1.25;
  max-width:24ch;
}
.cita cite{
  font-style:normal;font-size:.68rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);
}
.cierre-cols{
  display:grid;gap:clamp(1.2rem,3vw,2.4rem);
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
}
.cl{display:grid;gap:.55rem;align-content:start;}
.cl-l{display:grid;gap:.22rem;justify-items:start;}
.cl-l a,.cl-l button{
  font-size:.86rem;color:var(--ink-2);text-align:left;line-height:1.4;
  border-bottom:1px solid transparent;transition:.25s var(--ease);
}
.cl-l a:hover,.cl-l button:hover{color:var(--ink);border-bottom-color:var(--line);}
.cierre-fin{
  display:flex;align-items:baseline;justify-content:space-between;gap:.8rem 1.6rem;flex-wrap:wrap;
  padding-top:clamp(1rem,3vh,1.8rem);border-top:1px solid var(--line);
}
.lema-grande{
  font-size:clamp(.92rem,2.4vw,1.15rem);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);
}
.copy{font-size:.72rem;color:var(--ink-3);}
@media(max-width:44rem){
  .pantalla.contacto{align-content:start;overflow-y:auto;overscroll-behavior:contain;}
  .cierre-in{gap:1.1rem;}
  .cita p{font-size:clamp(1.1rem,5.2vw,1.6rem);}
  .cierre-cols{gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));}
  .cl-l a,.cl-l button{font-size:.8rem;}
  .cierre-fin{padding-top:.9rem;}
}

/* ══ UN ÁLBUM POR DENTRO ══════════════════════════════════
   Le das clic al disco y entras. Portada, datos y las canciones. */
.pantalla.alb{grid-template-rows:auto minmax(0,1fr) auto auto;}
.pantalla.alb > .alb-top,
.pantalla.alb > .alb-in,
.pantalla.alb > .alb-mas{width:100%;max-width:74rem;}
.alb-top{display:flex;align-items:center;justify-content:space-between;gap:.7rem 1.2rem;flex-wrap:wrap;}
.alb-volver{
  display:inline-flex;align-items:center;gap:.5rem;padding:.42rem .9rem;border-radius:2rem;
  border:1px solid var(--line);color:var(--ink-2);transition:.26s var(--ease);
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.alb-volver:hover{color:var(--ink);border-color:var(--ink-2);background:rgba(244,243,251,.06);}
.alb-volver svg{width:.95rem;height:.95rem;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.alb-nav{display:flex;align-items:center;gap:.6rem;font-size:.68rem;font-weight:700;letter-spacing:.06em;color:var(--ink-3);}

.alb-in{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(1.4rem,4vw,3.2rem);align-items:center;
}
.alb-izq{
  display:grid;grid-template-columns:clamp(8.5rem,26svh,15rem) minmax(0,1fr);
  gap:clamp(1rem,2.5vw,1.7rem);align-items:start;
}
.alb-cover{
  width:100%;aspect-ratio:1;border-radius:.8rem;background-size:cover;background-position:50% 50%;
  background-color:var(--surface2);cursor:zoom-in;
  box-shadow:0 1.4rem 3.4rem rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.12);
  transition:transform .4s var(--ease);
}
.alb-cover:hover{transform:translateY(-3px);}
.alb-tx{display:grid;gap:.35rem;justify-items:start;min-width:0;}
.alb-t{font-size:clamp(1.7rem,4.4vw,2.9rem);font-weight:700;line-height:1.04;}
.alb-t.largo{font-size:clamp(1.35rem,3.4vw,2.2rem);}
.alb-m{font-size:.82rem;color:var(--ink-2);}
.alb-d{
  font-size:.9rem;color:var(--ink-2);line-height:1.55;max-width:34ch;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.alb-a{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem;}

.alb-der{display:grid;gap:.5rem;align-content:center;min-width:0;min-height:0;}
.pantalla.alb > .alb-in{min-height:0;overflow:hidden;}
.alb-cab{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;}
.alb-cab h3{font-size:.76rem;color:var(--ink-2);}
.alb-cab span{font-size:.7rem;color:var(--ink-3);}
.pistas{
  list-style:none;display:grid;gap:.05rem;
  max-height:min(46svh,24rem);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
}
.pista-f{
  display:grid;grid-template-columns:1.8rem minmax(0,1fr) auto 1.7rem;
  align-items:center;gap:.7rem;padding:.5rem .6rem;border-radius:.45rem;
  border-top:1px solid var(--line);cursor:pointer;transition:background .22s;
}
.pista-f:first-child{border-top:0;}
.pista-f:hover{background:rgba(244,243,251,.07);}
.pista-f .pn{font-size:.68rem;font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.pista-f .pt{font-size:.9rem;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pista-f.falta .pt{color:var(--ink-3);font-style:italic;}
.pista-f .pd{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);opacity:.75;}
.pista-f .pp{display:grid;place-items:center;opacity:0;transition:opacity .25s;}
.pista-f:hover .pp{opacity:1;}
.pista-f .pp svg{width:.75rem;height:.75rem;fill:var(--ink-2);stroke:none;}
.alb-nota{font-size:.72rem;color:var(--ink-3);line-height:1.45;margin-top:.3rem;}

/* la banda de la misma etapa */
.alb-mas{display:grid;gap:.5rem;padding-top:.9rem;border-top:1px solid var(--line);}
.am-k{
  font-size:.64rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--et,var(--ink-3));
}
.am-l{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.2rem;}
.am-l::-webkit-scrollbar{display:none;}
.am-i{
  flex:0 0 auto;display:flex;align-items:center;gap:.6rem;padding:.35rem .7rem .35rem .35rem;
  border-radius:2rem;border:1px solid var(--line);background:rgba(12,14,36,.5);
  transition:.26s var(--ease);text-align:left;
}
.am-i:hover{border-color:var(--ink-2);background:rgba(244,243,251,.07);transform:translateY(-1px);}
.am-i .t{
  width:2.1rem;height:2.1rem;border-radius:50%;flex:0 0 auto;
  background-size:cover;background-position:50% 45%;background-color:var(--surface2);
}
.am-i .n{display:grid;min-width:0;}
.am-i .n b{font-size:.8rem;font-weight:700;white-space:nowrap;}
.am-i .n em{font-size:.64rem;font-style:normal;color:var(--ink-3);}

@media(max-width:62rem){
  .alb-in{grid-template-columns:1fr;gap:1rem;align-content:center;}
  .alb-izq{grid-template-columns:clamp(5.5rem,16svh,8rem) minmax(0,1fr);}
  .alb-d{-webkit-line-clamp:2;}
  .pistas{max-height:min(34svh,17rem);}
  .alb-nav span{display:none;}
  .alb-mas{padding-top:.6rem;}
  .am-i .n em{display:none;}
}
@media(max-width:44rem){
  .alb-t{font-size:clamp(1.25rem,5.6vw,1.7rem);line-height:1.06;}
  .alb-a{margin-top:.4rem;}
  .alb-a .btn{padding:.45rem .95rem;font-size:.62rem;}
  .alb-izq{grid-template-columns:clamp(4.6rem,15svh,6.4rem) minmax(0,1fr);gap:.8rem;}
  .alb-tx{gap:.22rem;}
  .alb-m{font-size:.74rem;}
  .alb-d{-webkit-line-clamp:2;font-size:.82rem;}
  .alb-izq .creds{display:none;}
  .alb-cab h3{font-size:.7rem;}
  .pistas{max-height:min(30svh,13rem);}
  .pista-f{padding:.42rem .5rem;gap:.55rem;}
  .pista-f .pt{font-size:.84rem;}
  /* el aviso de las ligas es una nota de trabajo: vive en el modo pendientes */
  .alb-nota{display:none;}
  body.pend .alb-nota{display:block;}
}
@media(max-width:44rem) and (max-height:44rem){
  .alb-mas{display:none;}
}

/* ══ RESPONSIVO ═══════════════════════════════════════════ */
@media(max-width:44rem){
  :root{--head-h:6.2rem;}
  header.site .bar{
    grid-template-columns:auto 1fr;
    grid-template-areas:"marca acciones" "menu menu";
    row-gap:.15rem;padding-top:.5rem;
  }
  header.site .bar > .brand{grid-area:marca;}
  header.site .bar > .head-acts{grid-area:acciones;justify-self:end;}
  nav.main{
    grid-area:menu;justify-self:stretch;justify-content:flex-start;padding-bottom:.35rem;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
  }
  .carta{width:15.5rem;height:23rem;}
  .carta.ancha{width:19rem;height:auto;flex-direction:column;}
  .carta.ancha .ph{width:100%;height:9rem;}
  .carta.ancha:hover .ph{width:100%;height:6rem;}
  .rejilla{grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr));}
  .panel{left:.7rem;bottom:.7rem;}
  .puerta-links .sep{display:none;}
  .puerta-links{gap:.1rem .4rem;}
  .ficha iframe{height:80px;}
}

/* ══ LA PÁGINA DE UNA PIEZA ════════════════════════════════
   Se arma con los bloques que elige el panel. La vista rueda por
   dentro (el sitio es de una pantalla); la portada va a sangre y
   cada bloque centra su contenido. */
.vista#v-pieza.on{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scroll-behavior:smooth;}
.pg{position:relative;min-height:100%;padding-bottom:3rem;isolation:isolate;}
.pg.quieta .rv{opacity:1;transform:none;transition:none;}
.pg > :first-child:not(.pg-portada){margin-top:calc(var(--head-h) + 2rem);}
.pg::before{content:"";position:fixed;inset:0;z-index:-3;background:radial-gradient(90% 60% at 50% 0%,rgba(57,48,140,.22),transparent 70%),var(--ground);}

/* portada: cinco estilos sobre la misma paleta. El acento es el color de la etapa. */
.pg{--acento:var(--gold);--acento-tx:var(--gold);counter-reset:pgh;}
.pg::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(40% 35% at 85% 20%,color-mix(in srgb,var(--acento) 14%,transparent),transparent 70%),
             radial-gradient(45% 40% at 10% 85%,rgba(32,110,141,.16),transparent 70%);}
.pg-portada{position:relative;display:grid;align-items:end;overflow:hidden;overflow:clip;isolation:isolate;
  padding:calc(var(--head-h) + 1.5rem) var(--pad) clamp(2rem,5vh,3.5rem);}
.pg-portada.alto-grande{min-height:min(94svh,60rem);}
.pg-portada.alto-mediana{min-height:min(70svh,44rem);}
.pg-portada.alto-chica{min-height:min(48svh,30rem);}
.pg-fondo{position:absolute;inset:-3rem;z-index:-2;background-size:cover;background-position:50% 40%;
  filter:blur(34px) saturate(1.05) brightness(.48);transform:scale(1.1);}
.pg-portada::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,14,36,.55) 0%,rgba(12,14,36,.2) 38%,rgba(12,14,36,.82) 86%,var(--ground) 100%);}
.pg-portada-in{width:100%;max-width:74rem;margin-inline:auto;display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;}
.pg-portada-tx{display:grid;gap:1rem;justify-items:start;}
.pg-portada-tx > *,.pg-cartela > *,.pg-prod-info > *{animation:pgSube .9s var(--ease) both;}
.pg-portada-tx > :nth-child(2),.pg-cartela > :nth-child(2),.pg-prod-info > :nth-child(2){animation-delay:.08s;}
.pg-portada-tx > :nth-child(3),.pg-cartela > :nth-child(3),.pg-prod-info > :nth-child(3){animation-delay:.16s;}
.pg-portada-tx > :nth-child(n+4),.pg-cartela > :nth-child(n+4),.pg-prod-info > :nth-child(n+4){animation-delay:.24s;}
@keyframes pgSube{from{opacity:0;transform:translateY(1.4rem)}to{opacity:1;transform:none}}
@keyframes pgAparece{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.pg-portada .eyebrow{color:var(--acento-tx);display:flex;align-items:center;gap:.6rem;}
.pg-portada .eyebrow::before{content:"";width:1.6rem;height:1px;background:currentColor;opacity:.7;}
.pg-t{font-size:clamp(2.5rem,6.6vw,5.4rem);text-transform:none;letter-spacing:.003em;line-height:1.02;font-weight:800;text-wrap:balance;
  text-shadow:0 .4rem 2.4rem rgba(0,0,0,.35);}
.pg-t.largo{font-size:clamp(2rem,5vw,3.9rem);}
.pg-portada .tags{display:flex;flex-wrap:wrap;gap:.35rem;}
.pg-portada .alb-volver{background:rgba(12,14,36,.45);backdrop-filter:blur(10px);}
.pg-portada .acts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.3rem;}
.pg-rol{font-size:clamp(1rem,1.6vw,1.2rem);color:var(--ink-2);font-style:italic;}
/* la obra: nítida, con su halo del color de la etapa */
.pg-portada-img,.pg-lienzo-obra,.pg-disco-obra{position:relative;display:block;cursor:zoom-in;border-radius:1.2rem;
  animation:pgAparece 1.1s .1s var(--ease) both;transition:transform .6s var(--ease),box-shadow .6s var(--ease);
  box-shadow:0 2.5rem 6rem rgba(0,0,0,.6),0 0 0 1px rgba(244,243,251,.09),0 0 5rem color-mix(in srgb,var(--acento) 22%,transparent);}
.pg-portada-img:hover,.pg-lienzo-obra:hover,.pg-disco-obra:hover{transform:translateY(-6px);
  box-shadow:0 3rem 7rem rgba(0,0,0,.65),0 0 0 1px rgba(244,243,251,.16),0 0 7rem color-mix(in srgb,var(--acento) 32%,transparent);}
.pg-portada-img img,.pg-lienzo-obra img,.pg-disco-obra img{border-radius:inherit;}
.pg-portada-img{justify-self:end;width:100%;max-width:30rem;overflow:hidden;}
.pg-portada-img img{width:100%;max-height:min(62svh,36rem);object-fit:cover;}
.pg-portada.alto-chica .pg-portada-img img{max-height:min(34svh,18rem);}
.pg-bajar{position:absolute;left:50%;bottom:1.2rem;transform:translateX(-50%);width:2.6rem;height:2.6rem;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--line);color:var(--ink-2);background:rgba(12,14,36,.35);backdrop-filter:blur(8px);
  animation:bob 2.4s ease-in-out infinite;}
.pg-bajar svg{width:1.1rem;height:1.1rem;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* cine (Universo): la imagen a sangre y nítida, con movimiento lento */
.pg-portada.est-cine{align-items:end;}
.pg-cine-img{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:50% 30%;
  animation:pgCine 26s ease-in-out infinite alternate;}
@keyframes pgCine{from{transform:scale(1.04)}to{transform:scale(1.14) translate(-1.5%,-1%)}}
.pg-portada.est-cine::after{background:
  linear-gradient(90deg,rgba(12,14,36,.82) 0%,rgba(12,14,36,.35) 45%,transparent 75%),
  linear-gradient(180deg,rgba(12,14,36,.5) 0%,transparent 30%,rgba(12,14,36,.55) 70%,var(--ground) 100%);}
.pg-portada.est-cine .pg-portada-in{grid-template-columns:minmax(0,46rem);padding-bottom:2.5rem;}

/* cine con figura (personajes): el paisaje atrás y el personaje completo al frente */
.pg-portada.con-figura .pg-portada-in{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:end;padding-bottom:0;}
.pg-cine-img.difuso{filter:blur(28px) brightness(.45) saturate(1.1);transform:scale(1.15);animation:none;}
.pg-cine-figura{justify-self:center;align-self:end;cursor:zoom-in;animation:pgAparece 1.1s .15s var(--ease) both;}
.pg-cine-figura img{display:block;max-height:min(80svh,46rem);max-width:100%;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 1.5rem 2.5rem rgba(0,0,0,.55)) drop-shadow(0 0 2.5rem color-mix(in srgb,var(--acento) 30%,transparent));
  animation:pgFlota 7s ease-in-out infinite;}
@keyframes pgFlota{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.pg-portada.con-figura::after{background:linear-gradient(90deg,rgba(12,14,36,.85) 0%,rgba(12,14,36,.35) 50%,rgba(12,14,36,.1) 100%),
  linear-gradient(180deg,rgba(12,14,36,.4) 0%,transparent 30%,transparent 75%,var(--ground) 100%);}
@media(max-width:52rem){
  .pg-portada.con-figura .pg-portada-in{grid-template-columns:minmax(0,1fr);}
  .pg-cine-figura{order:-1;}
  .pg-cine-figura img{max-height:48svh;}
}
@media(prefers-reduced-motion:reduce){.pg-cine-figura img{animation:none;}}

/* museo (Arte): la obra a un lado, fija al bajar; la cartela y su texto al otro */
.pg-portada.est-lienzo{align-items:start;padding-bottom:clamp(2rem,5vh,3rem);}
.pg-lienzo-in{width:100%;max-width:74rem;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.6rem,4vw,4rem);align-items:start;}
.pg-lienzo-izq{position:sticky;top:calc(var(--head-h) + 1.5rem);display:grid;justify-items:center;}
.pg-lienzo-obra{padding:clamp(.45rem,1vw,.8rem);background:linear-gradient(145deg,rgba(244,243,251,.1),rgba(244,243,251,.02));
  border:1px solid rgba(244,243,251,.12);border-radius:1.1rem;max-width:100%;}
.pg-lienzo-obra img{display:block;max-height:min(74svh,44rem);max-width:100%;width:auto;height:auto;border-radius:.6rem;}
.pg-cartela{display:grid;justify-items:start;text-align:left;gap:.85rem;min-width:0;padding-top:.4rem;}
.pg-cartela .eyebrow{color:var(--acento-tx);}
.pg-cartela .pg-t{font-size:clamp(2rem,4vw,3.4rem);}
.pg-cartela-pie{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .9rem;font-size:.86rem;color:var(--ink-3);}
.pg-cartela-pie .creds{display:flex;flex-wrap:wrap;gap:.3rem .9rem;}
.pg-cartela-pie .cr{display:inline;}
.pg-cartela-pie > *:not(:last-child)::after,.pg-cartela-pie .cr:not(:last-child)::after{content:"·";margin-left:.9rem;color:var(--ink-3);}
.pg-cartela .pg-tx{margin-top:.6rem;padding-top:1.1rem;border-top:1px solid var(--line);font-size:1rem;color:var(--ink-2);max-width:none;}
.pg-cartela .pg-tx > p:first-child::first-letter{float:left;font-size:3.2em;line-height:.82;font-weight:800;margin:.06em .14em 0 0;color:var(--acento-tx);}

/* producto (Tienda): galería con miniaturas y la compra a la mano */
.pg-portada.est-producto{align-items:start;padding-bottom:clamp(2rem,5vh,3rem);}
.pg-prod{width:100%;max-width:74rem;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:start;}
.pg-prod-gal{display:grid;gap:.8rem;animation:pgAparece 1s var(--ease) both;}
.pg-prod-escena{position:relative;}
.pg-prod-fl{position:absolute;top:50%;z-index:2;width:2.9rem;height:2.9rem;border-radius:50%;display:grid;place-items:center;transform:translateY(-50%);
  background:rgba(12,14,36,.55);border:1px solid rgba(244,243,251,.18);color:var(--ink);backdrop-filter:blur(10px);
  opacity:.85;transition:opacity .3s,background .3s,transform .3s var(--ease);}
.pg-prod-fl:hover{opacity:1;background:rgba(12,14,36,.8);transform:translateY(-50%) scale(1.06);}
.pg-prod-fl.izq{left:.9rem;}.pg-prod-fl.der{right:.9rem;}
.pg-prod-fl svg{width:1.2rem;height:1.2rem;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.pg-prod-cuenta{position:absolute;right:.9rem;bottom:.9rem;z-index:2;font-size:.68rem;font-weight:800;letter-spacing:.1em;padding:.3rem .7rem;border-radius:2rem;
  background:rgba(12,14,36,.6);border:1px solid rgba(244,243,251,.14);backdrop-filter:blur(8px);font-variant-numeric:tabular-nums;}
@media(hover:hover){.pg-prod-escena .pg-prod-fl{opacity:0;}.pg-prod-escena:hover .pg-prod-fl{opacity:.85;}}
.pg-prod-main{position:relative;aspect-ratio:1;border-radius:1.2rem;overflow:hidden;background:rgba(12,14,36,.55);
  border:1px solid rgba(244,243,251,.1);box-shadow:0 2.5rem 5rem rgba(0,0,0,.5),0 0 5rem color-mix(in srgb,var(--acento) 16%,transparent);}
.pg-prod-main.entra > *{animation:pgAparece .45s var(--ease) both;}
.pg-prod-foto{display:block;width:100%;height:100%;cursor:zoom-in;}
.pg-prod-foto img{width:100%;height:100%;object-fit:contain;transition:transform .8s var(--ease);}
.pg-prod-foto:hover img{transform:scale(1.04);}
.pg-prod-main .pg-m-vid{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;}
.pg-prod-mini{display:grid;grid-auto-flow:column;grid-auto-columns:4.6rem;gap:.55rem;overflow-x:auto;scrollbar-width:none;padding:.15rem;}
.pg-prod-mini::-webkit-scrollbar{display:none;}
.pg-prod-mini button{aspect-ratio:1;border-radius:.7rem;background:var(--surface2) center/cover;border:1px solid var(--line);
  opacity:.6;transition:opacity .3s,border-color .3s,transform .3s var(--ease);display:grid;place-items:center;}
.pg-prod-mini button:hover{opacity:1;transform:translateY(-2px);}
.pg-prod-mini button.on{opacity:1;border-color:var(--acento);box-shadow:0 0 0 1px var(--acento);}
.pg-prod-mini button svg{width:1.2rem;height:1.2rem;fill:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));}
/* acompaña a la foto al bajar, siempre alineada con su borde de arriba */
.pg-prod-info{position:sticky;top:calc(var(--head-h) + 1.5rem);display:grid;align-self:start;gap:1.05rem;justify-items:start;
  padding:clamp(1.3rem,3vw,2rem);border-radius:1.3rem;background:linear-gradient(160deg,rgba(57,48,140,.3),rgba(22,26,62,.6) 55%,rgba(32,110,141,.18));
  border:1px solid rgba(244,243,251,.11);backdrop-filter:blur(16px);box-shadow:0 2rem 4rem rgba(0,0,0,.35);}
.pg-prod-info .pg-t{font-size:clamp(1.9rem,3.6vw,3rem);}
.pg-prod-corta{color:var(--ink-2);font-size:1.02rem;line-height:1.6;}
.pg-prod-info .pg-precio{padding-top:.9rem;border-top:1px solid var(--line);width:100%;}
.pg-prod-info .acts .btn{flex:1 1 auto;justify-content:center;}
.pg-prod-info .acts{width:100%;}

/* disco (Música): portada cuadrada con un disco que asoma */
.pg-portada.est-disco{align-items:center;min-height:min(86svh,52rem);}
.pg-portada.est-disco .pg-portada-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);}
.pg-disco-obra{justify-self:start;width:min(82%,25rem);aspect-ratio:1;overflow:visible;z-index:1;}
.pg-disco-sp{width:100%;max-width:30rem;height:232px;border:0;border-radius:.9rem;margin-top:.2rem;}
.pg-disco-sp.corto{height:152px;}
.pg-disco-obra img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1;}
.pg-disco-obra::before{content:"";position:absolute;inset:4%;border-radius:50%;z-index:0;
  background:radial-gradient(circle,#0b0c1d 0 14%,color-mix(in srgb,var(--acento) 60%,#0b0c1d) 14.5% 16%,#0b0c1d 16.5% 100%),#0b0c1d;
  box-shadow:inset 0 0 0 1px rgba(244,243,251,.08),0 1rem 3rem rgba(0,0,0,.5);
  transform:translateX(0);transition:transform .9s var(--ease);animation:pgDisco 1.4s .5s var(--ease) both;}
.pg-disco-obra::after{content:"";position:absolute;inset:4%;border-radius:50%;z-index:0;
  background:repeating-radial-gradient(circle,rgba(244,243,251,.05) 0 1px,transparent 1px 4px);animation:pgDisco 1.4s .5s var(--ease) both;}
@keyframes pgDisco{to{transform:translateX(17%) rotate(40deg)}}
.pg-disco-obra:hover::before,.pg-disco-obra:hover::after{transform:translateX(21%) rotate(70deg);}

/* bloques */
/* todos los bloques comparten el borde izquierdo de la portada; el texto largo
   se queda en un ancho cómodo de lectura */
.pg-b{width:100%;max-width:calc(74rem + 2*var(--pad));margin:0 auto;padding:clamp(.9rem,2.2vh,1.6rem) var(--pad);display:grid;gap:.9rem;}
.pg-b.ancho{max-width:calc(74rem + 2*var(--pad));}
.pg-tx,.pg-pistas,.pg-creds,.pg-cita blockquote,.pg-sp,.pg-b > .acts,.pg-b > .pg-img{max-width:48rem;}
.pg-yt,.pg-video .pg-m-vid{max-width:40rem;}
.pg-portada + .pg-b{padding-top:clamp(1.6rem,4vh,2.6rem);}
.pg.est-lienzo .pg-tx,.pg.est-lienzo .pg-creds{margin-inline:auto;}
.pg.est-lienzo .pg-creditos{text-align:center;}
.pg.est-lienzo .pg-b .pg-tx{max-width:42rem;text-align:left;}
.pg-b.completo{max-width:none;padding-inline:0;}
.pg-h{font-size:.74rem;font-weight:800;letter-spacing:.14em;color:var(--ink-2);display:flex;align-items:center;gap:.8rem;}
.pg-h::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent);}
.pg-tx{display:grid;gap:.9rem;color:var(--ink-2);font-size:1.02rem;line-height:1.75;}
.pg-tx.grande{font-size:clamp(1rem,1.3vw,1.1rem);color:var(--ink);}
.pg-b .acts{display:flex;flex-wrap:wrap;gap:.5rem;}
.pg-sp{width:100%;height:352px;border:0;border-radius:.9rem;}
.pg-datos-l{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.7rem;}
.pg-datos-l .dato{display:grid;gap:.3rem;align-content:start;padding:.85rem 1rem;border-radius:1rem;border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(244,243,251,.05),rgba(244,243,251,.015));transition:border-color .3s,transform .4s var(--ease);}
/* borde de luz: el mismo dorado en todas, tenue, al mismo ritmo */
@property --giro{syntax:'<angle>';inherits:false;initial-value:0deg;}
.pg-datos-l .dato{position:relative;isolation:isolate;border-color:rgba(244,243,251,.07)!important;}
.pg-datos-l .dato::before,.pg-datos-l .dato::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:1;pointer-events:none;
  background:conic-gradient(from var(--giro),
    rgba(227,178,60,0) 0%,rgba(227,178,60,.35) 10%,rgba(240,194,77,.75) 17%,rgba(227,178,60,.35) 24%,rgba(227,178,60,0) 34%,
    rgba(227,178,60,0) 50%,rgba(227,178,60,.35) 60%,rgba(240,194,77,.75) 67%,rgba(227,178,60,.35) 74%,rgba(227,178,60,0) 84%);
  padding:1px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:pgGiro 8s linear infinite;}
.pg-datos-l .dato::after{display:none;}
@keyframes pgGiro{to{--giro:360deg}}
@media(prefers-reduced-motion:reduce){.pg-datos-l .dato::before,.pg-datos-l .dato::after{animation:none;opacity:.35;}}
.pg-datos-l .dato:hover{border-color:color-mix(in srgb,var(--acento) 45%,transparent);transform:translateY(-2px);}
.pg-datos-l .dato b{font-size:.64rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);}
.pg-datos-l .dato span{font-size:1rem;font-weight:700;line-height:1.35;}
.est-cine .pg-descripcion .pg-tx > p:first-child::first-letter,.est-lienzo .pg-descripcion .pg-tx > p:first-child::first-letter{
  float:left;font-size:3.6em;line-height:.82;font-weight:800;margin:.06em .14em 0 0;color:var(--acento-tx);}
.pg-m-img{box-shadow:0 1rem 2.5rem rgba(0,0,0,.3);transition:box-shadow .5s var(--ease),transform .5s var(--ease);}
.pg-m:hover .pg-m-img{transform:translateY(-3px);box-shadow:0 1.6rem 3rem rgba(0,0,0,.45),0 0 0 1px color-mix(in srgb,var(--acento) 40%,transparent);}
.pg-quedan{color:var(--acento-tx)!important;border-color:color-mix(in srgb,var(--acento) 50%,transparent)!important;}
.pg-cita blockquote{border-left-color:var(--acento)!important;}
.pg-creds .creds{display:flex;flex-wrap:wrap;gap:.35rem 1.8rem;font-size:.9rem;}
.pg-creds .cr{display:inline;}

/* compra */
.pg-compra{background:linear-gradient(135deg,rgba(57,48,140,.28),rgba(32,110,141,.16));border:1px solid var(--line);
  border-radius:1.2rem;max-width:48rem;padding:1.4rem var(--pad);margin:1.2rem 0 1.2rem max(var(--pad),calc((100% - 74rem)/2));}
.pg-precio{font-size:clamp(1.8rem,4vw,2.4rem);font-weight:800;display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;}
.pg-precio small{font-size:.75rem;color:var(--ink-3);letter-spacing:.1em;}
.pg-quedan{font-size:.72rem;font-weight:700;color:var(--gold);border:1px solid rgba(227,178,60,.45);border-radius:2rem;padding:.2rem .7rem;}
.pg-nota{font-size:.8rem;color:var(--ink-3);}

/* galería: los destacados primero y en grande */
.pg-m{position:relative;display:grid;gap:.55rem;margin:0;min-width:0;}
.pg-m-img{display:block;width:100%;border-radius:.9rem;overflow:hidden;background:var(--surface2);cursor:zoom-in;}
.pg-m-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),filter .5s;}
.pg-m-img:hover img{transform:scale(1.035);}
.pg-m figcaption{display:grid;gap:.15rem;font-size:.84rem;line-height:1.45;}
.pg-m figcaption b{font-weight:700;}
.pg-m figcaption span{color:var(--ink-3);}
.pg-m-vid{position:relative;aspect-ratio:16/9;border-radius:.9rem;overflow:hidden;background:#05060f;}
.pg-m-vid iframe,.pg-m-vid video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:contain;background:#000;}
.pg-play{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 50%,rgba(57,48,140,.55),#0b0c1d) center/cover;}
.pg-play[style]{background-size:cover;background-position:center;}
.pg-play::before{content:"";position:absolute;inset:0;background:rgba(6,7,20,.32);transition:background .3s;}
.pg-play:hover::before{background:rgba(6,7,20,.12);}
.pg-play span{position:relative;width:4.2rem;height:4.2rem;border-radius:50%;display:grid;place-items:center;
  background:rgba(244,243,251,.94);color:var(--ground);box-shadow:0 1rem 2.5rem rgba(0,0,0,.45);transition:transform .3s var(--ease);}
.pg-play:hover span{transform:scale(1.08);}
.pg-play svg{width:1.5rem;height:1.5rem;fill:currentColor;margin-left:.2rem;}
.pg-dest{display:grid;gap:1.4rem;margin-bottom:.6rem;}
/* destacada: sola y centrada a su tamaño real; con descripción, foto y texto lado a lado */
.pg-m.dest{justify-items:center;gap:.7rem;}
.pg-m.dest .pg-m-img{width:fit-content;max-width:100%;background:none;box-shadow:0 1.6rem 3.5rem rgba(0,0,0,.45);}
.pg-m.dest .pg-m-img img{display:block;width:auto;height:auto;max-width:100%;max-height:min(62svh,34rem);object-fit:contain;}
.pg-m.dest .pg-m-vid{width:min(100%,52rem);aspect-ratio:16/9;}
.pg-m.dest figcaption{text-align:center;justify-items:center;}
.pg-m.dest figcaption b{font-size:1.05rem;}
.pg-m.dest.con-tx{grid-template-columns:minmax(0,auto) minmax(14rem,24rem);justify-content:center;justify-items:start;align-items:center;gap:clamp(1.2rem,3vw,2.6rem);}
.pg-m.dest.con-tx figcaption{text-align:left;justify-items:start;gap:.5rem;font-size:1rem;}
.pg-m.dest.con-tx figcaption b{font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.25;}
.pg-m.dest.con-tx figcaption span{color:var(--ink-2);line-height:1.6;}

/* mosaico justificado: cada renglón llena el ancho, misma altura, sin recortar */
.pg-gal.mosaico{display:flex;flex-wrap:wrap;gap:1rem;}
.pg-gal.mosaico::after{content:"";flex:999 1 0;}
.pg-gal.mosaico.corta::after{display:none;}
.pg-gal.mosaico .pg-m{flex:var(--ar,1) 1 calc(var(--ar,1) * 15rem);min-width:0;align-content:start;}
.pg-gal.mosaico .pg-m-img,.pg-gal.mosaico .pg-m-vid{aspect-ratio:var(--ar,1);height:auto;}
.pg-gal.rejilla{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));}
.pg-gal.rejilla .pg-m-img{aspect-ratio:1;}
.pg-gal.rejilla .pg-m-vid{aspect-ratio:1;}
.pg-gal.carrusel{display:grid;grid-auto-flow:column;grid-auto-columns:min(78%,24rem);gap:1rem;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:.3rem;}
.pg-gal.carrusel::-webkit-scrollbar{display:none;}
.pg-gal.carrusel .pg-m{scroll-snap-align:start;}
.pg-gal.carrusel .pg-m-img{aspect-ratio:4/5;}
.pg-gal.carrusel .pg-m-vid{aspect-ratio:4/5;}
.pg-galeria .flechas{justify-content:flex-end;}

/* galería «bento»: la destacada grande y las demás llenan la cuadrícula */
.pg-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(8.5rem,12.5vw,12rem);gap:.8rem;}
.pg-bento.dos{grid-template-columns:repeat(4,minmax(0,1fr));}
.pg-bento .pg-m{position:relative;display:block;border-radius:1rem;overflow:hidden;background:var(--surface2);
  grid-column:span var(--c,1);grid-row:span var(--r,1);box-shadow:0 1rem 2.4rem rgba(0,0,0,.3);}
.pg-bento .pg-m[data-c="2"]{--c:2;}.pg-bento .pg-m[data-c="3"]{--c:3;}.pg-bento .pg-m[data-c="4"]{--c:4;}
.pg-bento .pg-m[data-r="2"]{--r:2;}
.pg-bento .pg-m-img,.pg-bento .pg-m-vid{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none;}
.pg-bento .pg-m-img img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;}
.pg-bento .pg-m:hover .pg-m-img{transform:none;box-shadow:none;}
.pg-bento .pg-m:hover img{transform:scale(1.05);}
.pg-bento figcaption{position:absolute;left:0;right:0;bottom:0;z-index:1;pointer-events:none;display:grid;gap:.2rem;
  padding:2.2rem 1rem .85rem;background:linear-gradient(180deg,transparent,rgba(6,7,20,.88));font-size:.8rem;}
.pg-bento .grande figcaption{padding:3rem 1.3rem 1.1rem;font-size:.9rem;}
.pg-bento .grande figcaption b{font-size:1.1rem;}
.pg-bento figcaption span{color:var(--ink-2);}
.pg-bento .pg-m.vid figcaption{display:none;}
@media(max-width:52rem){
  .pg-bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(8rem,38vw,12rem);gap:.6rem;}
  .pg-bento .pg-m{--c:1;}
  .pg-bento .pg-m[data-cm="2"],.pg-bento .pg-m.grande{--c:2;}
}

/* los videos de la galería: completos, 16:9, centrados */
.pg-videos{display:grid;gap:1rem;max-width:44rem;width:100%;margin:1.2rem auto 0;}
.pg-videos.dos{max-width:none;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));}
.pg-videos figcaption{text-align:left;}

/* «Detrás de la pieza»: del boceto a la obra, unidos por una línea */
/* fila deslizable; los márgenes automáticos de la primera y la última la centran cuando cabe (también en Safari) */
/* tres a la vez (dos en tableta, uno y un poco en celular); si hay más, se desliza */
.pg-proceso{list-style:none;margin:0 auto;padding:0 0 .4rem;display:flex;gap:1.2rem;width:100%;max-width:62rem;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;position:relative;}
.pg-proceso li{flex:0 0 calc((100% - 2.4rem) / 3);}
@media(max-width:52rem){.pg-proceso{gap:1rem;}.pg-proceso li{flex-basis:calc((100% - 1rem) / 2);}}
@media(max-width:34rem){.pg-proceso li{flex-basis:78%;}}
.pg-proceso li:first-child{margin-left:auto;}
.pg-proceso li:last-child{margin-right:auto;}
.pg-proceso-fl{justify-content:center;margin-top:.4rem;}
.pg-proceso::-webkit-scrollbar{display:none;}
.pg-proceso li{display:grid;justify-items:center;gap:.55rem;scroll-snap-align:start;position:relative;}
.pg-proceso-img{width:100%;aspect-ratio:4/5;border-radius:.9rem;overflow:hidden;background:var(--surface2);cursor:zoom-in;
  box-shadow:0 1rem 2.4rem rgba(0,0,0,.35);transition:transform .5s var(--ease);}
.pg-proceso-img:hover{transform:translateY(-4px);}
.pg-proceso-img img{width:100%;height:100%;object-fit:cover;}
.pg-proceso .punto{position:relative;z-index:1;width:2.1rem;height:2.1rem;border-radius:50%;display:grid;place-items:center;
  background:var(--ground);border:1px solid rgba(227,178,60,.6);color:var(--gold);font-size:.7rem;font-weight:800;}
.pg-proceso .linea{position:relative;width:100%;display:grid;place-items:center;}
.pg-proceso li:not(:last-child) .linea::after{content:"";position:absolute;top:50%;left:50%;width:calc(100% + 1.2rem);height:1px;
  background:linear-gradient(90deg,rgba(227,178,60,.65),rgba(227,178,60,.2));}
.pg-proceso .et{font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);}

/* Arte (Museo): todo en un mismo eje central */
.pg.est-lienzo .pg-b > *:not(.pg-bento):not(.pg-datos-l):not(.pg-rel):not(.pg-proceso):not(.pg-gal){margin-inline:auto;}
.pg.est-lienzo .pg-h{justify-content:center;}
.pg.est-lienzo .pg-h::before{content:"";flex:1;height:1px;background:linear-gradient(270deg,var(--line),transparent);max-width:16rem;}
.pg.est-lienzo .pg-h::after{max-width:16rem;}
.pg.est-lienzo .pg-b > .acts{justify-content:center;}
.pg.est-lienzo .pg-creds .creds{justify-content:center;}

/* video y canciones lado a lado */
.pg-escucha-dos{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(1rem,2.5vw,2rem);align-items:start;}
.pg-escucha-dos .pg-yt{max-width:none;}
.pg-escucha-dos .pg-pistas{max-width:none;align-content:start;}
.pg-escucha-dos .pg-pistas button{padding:.6rem .8rem;}
/* lista de canciones */
.pg-pistas{list-style:none;display:grid;gap:.35rem;margin:0;padding:0;}
.pg-pistas button{width:100%;display:grid;grid-template-columns:1.8rem minmax(0,1fr) auto;align-items:center;gap:.5rem;text-align:left;
  padding:.65rem .9rem;border-radius:.8rem;border:1px solid var(--line);background:rgba(244,243,251,.025);transition:background .3s,border-color .3s,transform .3s var(--ease);}
.pg-pistas button:not(:disabled):hover{background:rgba(244,243,251,.06);border-color:rgba(227,178,60,.35);transform:translateX(3px);}
.pg-pistas button:disabled{cursor:default;}
.pg-pistas .n{font-size:.72rem;font-weight:800;color:var(--acento-tx);font-variant-numeric:tabular-nums;}
.pg-pistas .t{font-size:.95rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pg-pistas .p{width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--ink-2);transition:background .3s,color .3s;}
.pg-pistas button:hover .p{background:var(--ink);color:var(--ground);}
.pg-pistas .p svg{width:.8rem;height:.8rem;fill:currentColor;margin-left:.1rem;}

/* imagen, cita, botón, espacio */
.pg-img{margin:0;display:grid;gap:.6rem;}
.pg-img img{width:100%;border-radius:1rem;}
.pg-b.completo .pg-img img{border-radius:0;max-height:90svh;object-fit:cover;}
.pg-img figcaption{font-size:.82rem;color:var(--ink-3);text-align:center;padding-inline:var(--pad);}
.pg-cita blockquote{border-left:2px solid var(--gold);padding:.4rem 0 .4rem clamp(1rem,3vw,1.8rem);display:grid;gap:.8rem;}
.pg-cita p{font-size:clamp(1.35rem,3vw,2rem);line-height:1.3;font-weight:700;text-wrap:balance;}
.pg-cita cite{font-style:normal;font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);}
.pg-boton{justify-items:center;}
.pg-esp.chico{height:.8rem;}.pg-esp.mediano{height:2.2rem;}.pg-esp.grande{height:5rem;}

/* «Todo lo de…»: filas por mundo, como en una app de streaming */
.pg-todo{display:grid;gap:1.6rem;}
.pg-todo .cab{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.7rem;}
.pg-todo .cab b{font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);}
.pg-todo .cab span{font-size:.68rem;font-weight:800;color:var(--gold);padding:.1rem .5rem;border-radius:1rem;border:1px solid rgba(227,178,60,.4);}
.pg-todo .fila{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:.2rem .1rem .6rem;}
.pg-todo .fila::-webkit-scrollbar{display:none;}
.pg-todo-c{flex:0 0 clamp(9.5rem,17vw,13rem);display:grid;gap:.45rem;text-align:left;scroll-snap-align:start;}
.pg-todo-c .t{position:relative;aspect-ratio:1;border-radius:1rem;background-size:cover;background-position:center;
  box-shadow:0 1rem 2.2rem rgba(0,0,0,.35);transition:transform .5s var(--ease),box-shadow .5s var(--ease);}
.pg-todo-c:hover .t{transform:translateY(-5px) scale(1.02);box-shadow:0 1.6rem 3rem rgba(0,0,0,.45),0 0 0 1px rgba(227,178,60,.45);}
.pg-todo-c .pl{position:absolute;right:.6rem;bottom:.6rem;width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;background:rgba(244,243,251,.92);color:var(--ground);}
.pg-todo-c .pl svg{width:.85rem;height:.85rem;fill:currentColor;margin-left:.1rem;}
.pg-todo-c b{font-size:.92rem;font-weight:700;line-height:1.25;}
.pg-todo-c em{font-size:.72rem;font-style:normal;color:var(--ink-3);}

/* relacionadas y pie */
.pg-rel{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));}
.pg-rel-i{display:grid;gap:.5rem;text-align:left;}
.pg-rel-i .t{aspect-ratio:1;border-radius:.9rem;background-size:cover;background-position:center;transition:transform .5s var(--ease);}
.pg-rel-i:hover .t{transform:translateY(-3px);}
.pg-rel-i b{font-size:.95rem;font-weight:700;line-height:1.2;}
.pg-rel-i em{font-size:.72rem;font-style:normal;color:var(--ink-3);}
.pg-pie{max-width:74rem;margin:1.6rem auto 0;padding:1.6rem var(--pad) 0;border-top:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:1rem;}
.pg-pie > .btn{grid-column:2;grid-row:1;}
.pg-vecina.ant{grid-column:1;grid-row:1;}
.pg-vecina.sig{grid-column:3;grid-row:1;max-width:100%;}
.pg-pie .btn svg{width:.95rem;height:.95rem;}
.pg-vecina{display:flex;align-items:center;gap:.8rem;text-align:left;min-width:0;padding:.4rem;border-radius:.9rem;transition:background .3s;}
.pg-vecina:hover{background:rgba(244,243,251,.06);}
.pg-vecina.sig{justify-self:end;flex-direction:row-reverse;text-align:right;}
.pg-vecina .t{width:3.6rem;height:3.6rem;border-radius:.7rem;flex:0 0 auto;background-size:cover;background-position:center;}
.pg-vecina .n{display:grid;min-width:0;}
.pg-vecina em{font-size:.62rem;font-style:normal;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);}
.pg-vecina b{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* el visor también muestra videos */
.vs-vid{background:#000;aspect-ratio:16/9;height:auto;min-height:0;max-width:calc((100svh - 12rem)*16/9);margin-inline:auto;}
.vs-vid iframe,.vs-vid video{width:100%;height:100%;border:0;object-fit:contain;}

@media(max-width:52rem){
  .pg-m.dest.con-tx,.pg-escucha-dos{grid-template-columns:minmax(0,1fr);}
  .pg-portada-in,.pg-portada.est-cine .pg-portada-in,.pg-portada.est-disco .pg-portada-in{grid-template-columns:minmax(0,1fr);}
  .pg-prod{grid-template-columns:minmax(0,1fr);}
  .pg-prod-info{position:relative;top:auto;}
  .pg-disco-obra{width:min(78%,20rem);justify-self:start;}
  .pg-lienzo-in{grid-template-columns:minmax(0,1fr);}
  .pg-lienzo-izq{position:relative;top:auto;}
  .pg-lienzo-obra img{max-height:58svh;}
  .pg-portada-img{justify-self:start;max-width:min(100%,24rem);order:-1;}
  .pg-portada.alto-grande,.pg-portada.alto-mediana{min-height:auto;}
  .pg-pie{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pg-pie > .btn{grid-column:1/-1;grid-row:1;justify-self:center;}
  .pg-vecina.ant{grid-column:1;grid-row:2;}
  .pg-vecina.sig{grid-column:2;grid-row:2;}
  .pg-vecina .t{width:2.8rem;height:2.8rem;}
}
@media(max-width:34rem){
  .pg-datos-l{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;}
  .pg-datos-l .dato{padding:.75rem .8rem;}
  .pg-datos-l .dato span{font-size:.9rem;}
  .pg-rel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:.8rem;}
  .pg-rel::-webkit-scrollbar{display:none;}
  .pg-rel-i{flex:0 0 62%;scroll-snap-align:start;}
  .pg-gal.mosaico{gap:.6rem;}
  .pg-gal.mosaico .pg-m{flex-basis:calc(var(--ar,1) * 8rem);}
  .pg-gal.rejilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;}
  .pg-sp{height:232px;}
}
/* en la vista previa del panel nada se queda escondido esperando el scroll */
.pg-prod-gal,.pg-prod-info{min-width:0;}
.pg-portada.sin-imagen .pg-portada-in{grid-template-columns:minmax(0,1fr);}
.pg-portada.sin-imagen .pg-portada-tx{max-width:46rem;}
.pg-portada-tx,.pg-cartela,.pg-datos-l .dato{min-width:0;}
.pg-t,.pg-tx,.pg-prod-corta,.pg-datos-l .dato span,.pg-rel-i b{overflow-wrap:anywhere;}
.pg .btn{max-width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere;justify-content:center;text-align:center;}
.pg .btn svg{flex-shrink:0;}
.mm-previa .pg .rv{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.pg-cine-img,.pg-bajar{animation:none;}.pg-portada-tx > *,.pg-cartela > *,.pg-prod-info > *{animation:none;}}