/* =========================================
   FLORENCIA BASTERI — escena.css (T28b)
   Videos "Mirala en escena" (#videos / #galeria) y Shows (#shows) en el lenguaje de la variante D "Satén".
   Usa los componentes de style.css: .glass · .frame + .orn · .poster/.vid/.tone/.glint · .vpanel__bg · .satin-band · .btn--gold/--glass.
   El JS está en assets/js/escena.js (dentro de FB.ready). Notas: .pipeline/notas-t28b.md
   Móvil primero. Compacto = (max-width: 1099px), (orientation: portrait) (igual que FB.isCompact).
   ========================================= */

/* #########################################################################
   VIDEOS — escenario de paneles verticales grandes sobre satén
   El panel activo va nítido, con marco dorado de filigrana y cartela de vidrio; los vecinos, más chicos, desenfocados y con velo.
   Detrás, el mismo video muy desenfocado y teñido (capa 1); delante, chips y controles de vidrio (capa 3).
   ######################################################################### */
.stage {
  --card-h: clamp(380px, calc(var(--u) * 100 - 292px), 700px);
  --card-w: min(calc(var(--card-h) * 9 / 16), 76vw);
  --gap: clamp(20px, 3vw, 52px);
  position: relative; isolation: isolate; overflow: clip;
  padding: calc(var(--header-h) + 6px) 0 clamp(26px, 3vw, 48px);
  color: var(--plum);
}
@media (min-width: 1100px) and (orientation: landscape) {
  .stage { --card-h: clamp(420px, calc(var(--u) * 100 - 250px), 780px); }
}

/* capa 1: el color del video activo, muy desenfocado, mezclado con el satén */
.stage__bg {
  position: absolute; inset: -4% -6%; z-index: -1; pointer-events: none; overflow: hidden; opacity: .72;
  /* el color del video nace del satén: totalmente transparente en el borde superior de la sección (el fondo sobresale 4% por arriba y la sección lo recorta),
     así no hay corte recto contra la portada */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 6%, rgba(0,0,0,.35) 15%, #000 32%, #000 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, transparent 6%, rgba(0,0,0,.35) 15%, #000 32%, #000 80%, transparent 100%);
}
.stage__bgl {
  position: absolute; inset: 0; opacity: 0; background: center / cover no-repeat; transform: scale(1.22);
  filter: blur(22px) saturate(.95) sepia(.18) hue-rotate(78deg) brightness(1.12);
  transition: opacity 1s var(--ease-soft);
}
.stage__bgl.on { opacity: 1; }
.stage__bgveil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(247,226,226,.52) 0%, rgba(240,205,208,.36) 50%, rgba(212,165,176,.46) 100%); }
.stage__bgveil::after { content: ""; position: absolute; inset: 0; mix-blend-mode: soft-light; background: linear-gradient(160deg, rgba(243,218,219,.9), rgba(201,150,127,.5)); }

/* textura de satén sobre los fondos desenfocados: grano fino + pliegues (soft-light), así nunca queda un plano liso */
.stage__bg::after, .shows__ibg::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: soft-light; opacity: .8;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='1.5 0 0 0 -.25  1.5 0 0 0 -.25  1.5 0 0 0 -.25  0 0 0 0 1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    repeating-linear-gradient(106deg, rgba(255,255,255,0) 0 60px, rgba(255,255,255,.62) 105px, rgba(255,255,255,0) 160px, rgba(106,69,88,.46) 230px, rgba(255,255,255,0) 290px);
}

/* polvo de luz */
.stage > .stage__bokeh { position: absolute; inset: 0; z-index: 0; overflow: clip; pointer-events: none; }
.stage__bokeh i {
  position: absolute; border-radius: 50%; opacity: .85; filter: blur(4px);
  background: radial-gradient(circle at 35% 30%, rgba(255,251,244,.9), rgba(255,244,228,.35) 58%, rgba(233,211,176,.5) 70%, rgba(233,211,176,0) 74%);
  animation: bokehFloat 14s ease-in-out infinite;
}
.stage__bokeh i:nth-child(1) { width: 150px; height: 150px; left: 4%;  top: 20%; }
.stage__bokeh i:nth-child(2) { width: 84px;  height: 84px;  left: 16%; bottom: 14%; animation-delay: -4s; animation-duration: 17s; }
.stage__bokeh i:nth-child(3) { width: 120px; height: 120px; right: 5%; top: 18%; animation-delay: -7s; }
.stage__bokeh i:nth-child(4) { width: 64px;  height: 64px;  right: 18%; bottom: 18%; animation-delay: -2s; animation-duration: 19s; }
@keyframes bokehFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
.stage > *:not(.stage__bokeh):not(.stage__bg) { position: relative; z-index: 2; }

/* encabezado: etiqueta, título, filete y chips de vidrio */
.stage__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.stage__head::before {   /* halo perla muy suave: el texto chico conserva contraste sobre el satén */
  content: ""; position: absolute; z-index: -1; left: 50%; top: -10px; width: min(640px, 100%); height: 170px; translate: -50% 0; pointer-events: none;
  background: radial-gradient(50% 55% at 50% 45%, rgba(251,246,243,.6), rgba(251,246,243,.28) 60%, rgba(251,246,243,0) 100%);
}
.stage__titles { display: flex; flex-direction: column; align-items: center; }
.stage__head .eyebrow { margin-bottom: 10px; }
.stage__head .h-xl { white-space: nowrap; }
.stage__head .rule { margin-top: 10px; }
.stage__head .chips { margin-top: 14px; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.chip {
  flex: 0 0 auto; min-height: 44px; padding: 0 clamp(14px, 2vw, 22px); border-radius: 999px;
  font: 500 clamp(10.5px, 2.9vw, 12px)/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; color: var(--plum);
  background: var(--glass-bg); border: 1px solid rgba(210,174,138,.9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 8px 22px rgba(106,69,88,.14), inset 0 1px 0 rgba(255,255,255,.8);
  transition: background .35s var(--ease-soft), box-shadow .35s var(--ease-soft), transform .35s var(--ease-out);
}
.chip:hover { background: var(--glass-bg-hi); transform: translateY(-1px); }
.chip.is-active { background: var(--gold-grad); border-color: transparent; box-shadow: 0 10px 26px rgba(122,78,70,.28), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(150,98,84,.35); }
.chip:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .chip { background: rgba(251,246,243,.92); } }
@media (max-width: 420px) { .chips { gap: 6px; } .chip { padding: 0 11px; letter-spacing: .1em; } }

/* pista de paneles: a sangre de borde a borde, con los bordes que se funden */
.stage__viewport {
  position: relative; margin-top: 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.stage__track {
  position: relative; display: flex; align-items: flex-start; gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; padding: 34px calc(50% - var(--card-w) / 2) 78px; outline: none;
}
.stage__track::-webkit-scrollbar { display: none; }
.stage__track:focus-visible { box-shadow: inset 0 0 0 2px var(--plum); border-radius: 18px; }
.stage__track.is-dragging { scroll-snap-type: none; cursor: grabbing; }

.vcard { position: relative; flex: 0 0 var(--card-w); scroll-snap-align: center; transition: opacity .3s var(--ease-soft); }
.vcard.is-center { z-index: 3; }
.vcard[hidden] { display: none; }
.vcard.is-out { opacity: 0; pointer-events: none; }
@media (max-width: 767px) { .vcard { scroll-snap-stop: always; } }

/* el panel entero (marco + medio + cartela) crece al centro */
.vcard__btn {
  position: relative; display: block; color: inherit; -webkit-tap-highlight-color: transparent; border-radius: 10px;
  transform: scale(.76); transform-origin: 50% 34%; will-change: transform;
  transition: transform .7s var(--ease-out);
}
.vcard.is-center .vcard__btn { transform: none; }
.vcard__btn:focus-visible { outline: none; }
.vcard__btn:focus-visible .vcard__frame { box-shadow: 0 0 0 3px var(--pearl), 0 0 0 5px var(--plum), var(--shadow-media); }

/* marco dorado doble (líneas finas) alrededor del medio, solo el filete interior en los vecinos */
.vcard__btn::before, .vcard__btn::after {
  content: ""; position: absolute; left: -11px; right: -11px; top: -11px; height: calc(var(--card-w) * 16 / 9 + 22px);
  pointer-events: none; padding: 1px; border-radius: 12px; background: var(--gold-line);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: opacity .6s var(--ease-soft);
}
.vcard__btn::after { left: -5px; right: -5px; top: -5px; height: calc(var(--card-w) * 16 / 9 + 10px); border-radius: 9px; opacity: .55; }
.vcard__btn::before { opacity: 0; }
.vcard.is-center .vcard__btn::before { opacity: 1; }
.vcard.is-center .vcard__btn::after { opacity: .85; }
.vcard__orns { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--card-w) * 16 / 9); pointer-events: none; opacity: 0; transition: opacity .6s var(--ease-soft); }
.vcard.is-center .vcard__orns { opacity: 1; }
.vcard__orns .orn { width: 46px; height: 46px; }

.vcard__frame {
  position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; background: #d9c0c6;
  box-shadow: 0 30px 60px -26px rgba(75,45,64,.5); transform: translateZ(0);
  transition: box-shadow .7s var(--ease-out);
}
.vcard.is-center .vcard__frame { box-shadow: var(--shadow-media); }
.vcard__poster, .vcard__preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter .7s var(--ease-out), transform .7s var(--ease-out); }
.vcard__preview { opacity: 0; transition: opacity .7s var(--ease-soft), filter .7s var(--ease-out); }
.vcard.is-playing .vcard__preview { opacity: 1; }
.vcard:not(.is-center) .vcard__poster, .vcard:not(.is-center) .vcard__preview { filter: blur(2.6px) saturate(.85); transform: scale(1.05); }
/* color unificado (soft-light) + brillo que recorre el panel activo */
.vcard__frame::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: soft-light; background: linear-gradient(170deg, rgba(243,218,219,.34), rgba(167,127,149,.30)); }
.vcard__frame::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: soft-light; opacity: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%); background-size: 260% 100%; background-position: 120% 0;
}
.vcard.is-center .vcard__frame::before { opacity: .8; animation: glint 7s ease-in-out infinite; }
/* velo de los vecinos */
.vcard__dim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(251,246,243,.42) 0%, rgba(243,218,219,.30) 55%, rgba(167,127,149,.36) 100%); transition: opacity .6s var(--ease-soft); }
.vcard.is-center .vcard__dim { opacity: 0; }

.vcard__badge { position: absolute; left: 50%; top: 14px; bottom: auto; z-index: 4; translate: -50% 0; width: calc(100% - 28px); padding: 6px 8px; transition: opacity .5s var(--ease-soft); }
.vcard:not(.is-center) .vcard__badge { opacity: 0; }
/* pastilla "Ver video" centrada sobre la cartela (igual que en la portada): el círculo suelto al costado se veía torcido en iPhone */
.vcard__play {
  position: absolute; left: 50%; translate: -50% 0; bottom: 60px; z-index: 4; display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 14px 0 11px; border-radius: var(--radius-pill); color: var(--plum);
  font: 500 11px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  background: var(--pearl-solid); border: 1px solid rgba(210,174,138,.9);
  box-shadow: 0 10px 26px -8px rgba(75,45,64,.5);   /* sin backdrop-filter: va encima del <video> de la previa */
  opacity: 0; transition: opacity .5s var(--ease-soft), transform .35s var(--ease-out);
}
.vcard__play b { font-weight: 500; }
.vcard__play svg { width: 18px; height: 18px; margin: 0 -3px 0 -4px; }
.vcard.is-center .vcard__play { opacity: 1; }

/* cartela de vidrio con la leyenda: solo en el panel activo, apoyada sobre su borde inferior */
.vcard__meta {
  position: relative; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 5px; width: calc(100% - 26px); margin: -40px auto 0; padding: 13px 14px 15px; text-align: center;
  border-radius: 16px; background: linear-gradient(140deg, rgba(251,246,243,.93), rgba(243,218,219,.86)); border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-glass), inset 0 1px 0 rgba(255,255,255,.85);   /* sin backdrop-filter: pisa el borde del <video> y vive dentro de un contenedor con máscara */
  opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease-soft), transform .7s var(--ease-out);
}
.vcard.is-center .vcard__meta { opacity: 1; transform: none; }
.vcard__tag { font: 500 10.5px/1.4 var(--font-body); letter-spacing: .26em; text-transform: uppercase; color: var(--plum-s); }
.vcard__title { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.7rem); line-height: 1.12; color: var(--plum); text-wrap: balance; }

/* controles de vidrio: flechas finas, contador y barra de avance en una pastilla */
.stage__foot { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: -26px; }
.ctrl {
  display: grid; place-items: center; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; color: var(--plum);
  background: var(--glass-bg); border: 1px solid rgba(210,174,138,.95);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 22px rgba(106,69,88,.16), inset 0 1px 0 rgba(255,255,255,.8);
  transition: background .35s var(--ease-soft), opacity .25s, transform .3s var(--ease-pop);
}
.ctrl:hover { background: var(--glass-bg-hi); transform: scale(1.05); }
.ctrl svg { width: 20px; height: 20px; }
.ctrl:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; }
.ctrl[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.stage__status {
  display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 22px; border-radius: 999px;
  background: var(--glass-bg); border: 1px solid rgba(210,174,138,.95);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 22px rgba(106,69,88,.14), inset 0 1px 0 rgba(255,255,255,.8);
}
.stage__count { font: italic 400 20px/1 var(--font-serif); color: var(--plum); font-variant-numeric: lining-nums tabular-nums; }
.stage__count b { font-weight: 400; }
.stage__progress { position: relative; display: block; width: clamp(60px, 14vw, 110px); height: 2px; background: rgba(118,82,47,.24); }
.stage__progress i { position: absolute; left: 0; top: 0; height: 2px; width: 12.5%; background: linear-gradient(90deg, #E9D3B0, #C9967F); transition: width .8s var(--ease-out); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ctrl, .stage__status { background: rgba(251,246,243,.92); } }
@media (hover: hover) {
  .stage__track { cursor: grab; }
  .vcard__btn:hover .vcard__play { transform: translateY(-2px); }
}
@media (max-width: 767px) {
  .stage__foot { margin-top: -30px; }
  .vcard__meta { margin-top: -34px; padding: 11px 12px 13px; }
}

/* #########################################################################
   SHOWS — presentación · disciplinas (pin) · roles · contratar · franja
   ######################################################################### */
.shows { position: relative; isolation: isolate; overflow-x: clip; padding: 0 0 clamp(60px, 8vw, 120px); color: var(--plum); }

/* ---------- Presentación ---------- */
.shows__intro { position: relative; isolation: isolate; overflow: clip; padding: calc(var(--header-h) + 28px) 0 clamp(36px, 6vw, 64px); }
.shows__ibg {
  opacity: .82;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
}
.shows__ipanel {
  --ih: calc(var(--u) * 54); position: relative; z-index: 3; width: calc(var(--ih) * .5625); height: var(--ih); margin: 0 auto;
  border-radius: 10px; box-shadow: var(--shadow-media);
}
.shows__iin { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; background: #d9c0c6; transform: translateZ(0); }
.shows__iback {
  position: absolute; z-index: 2; right: -14vw; top: calc(var(--header-h) + 56px); width: 42vw; height: calc(42vw / .5625); max-height: calc(var(--u) * 50);
  border-radius: 10px; overflow: hidden; transform: rotate(8deg); filter: blur(3px) saturate(.95) brightness(1.18); opacity: .95;
  box-shadow: 0 30px 70px -20px rgba(75,45,64,.45); border: 1px solid rgba(233,211,176,.7);
}
.shows__iback::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(251,246,243,.62), rgba(243,218,219,.38) 55%, rgba(167,127,149,.34)); }
.shows__copy { position: relative; z-index: 5; width: auto; margin: -58px 5vw 0; padding: 24px 22px 26px; background: var(--glass-bg-hi); }
.shows__copy .eyebrow { color: var(--plum); }
.shows__title { margin-top: 10px; font: 300 clamp(2rem, 1.2rem + 3.6vw, 3.2rem)/1.06 var(--font-display); letter-spacing: -.005em; color: var(--plum); text-wrap: balance; }
.shows__title em { font-style: italic; font-weight: 300; color: var(--mauve-d); }
.shows__rule { margin: 18px 0 0; background: linear-gradient(90deg, var(--champ), transparent); }
.shows__lead { margin-top: 18px; }
.shows__lead p { font: italic 400 clamp(1.15rem, 1.05rem + .5vw, 1.35rem)/1.5 var(--font-serif); color: var(--plum); }
.shows__lead p + p { margin-top: 12px; }

@media (min-width: 1100px) and (orientation: landscape) {
  .shows__intro { --ipad: max(var(--gutter-d), calc((100vw - 1500px) / 2)); display: flex; align-items: center; min-height: calc(var(--u) * 100); padding: calc(var(--header-h) + 16px) var(--ipad) 56px; }
  .shows__ipanel { --ih: calc(var(--u) * 76); position: absolute; right: calc(var(--ipad) + 4vw); top: calc(50% - var(--ih) / 2 + 12px); margin: 0; }
  .shows__iback { right: calc(var(--ipad) - 3vw); top: calc(50% - var(--u) * 38); width: calc(var(--u) * 58 * .5625); height: calc(var(--u) * 58); max-height: none; }
  .shows__copy { width: min(600px, 46vw); margin: 0; padding: clamp(30px, 3vw, 46px) clamp(28px, 3.2vw, 50px) clamp(32px, 3vw, 48px); }
  .shows__title { font-size: clamp(2.2rem, 1.3rem + 2.2vw, 3.4rem); }
}

/* ---------- Disciplinas: base = lista estática rica (sin movimiento, sin JS o si falla el pin) ---------- */
.disc { position: relative; padding: clamp(40px, 6vw, 90px) 0 clamp(20px, 3vw, 40px); }
.disc__stage { position: relative; width: min(100% - 2 * var(--gutter), 1180px); margin-inline: auto; }
.disc__label { text-align: center; margin-bottom: 8px; }
.fan, .disc__side, .disc__also { display: none; }
.disc__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 30px 26px; margin-top: 22px; }
.disc__list li {
  position: relative; padding: 12px 12px 18px; border-radius: 18px; background: var(--glass-bg); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--shadow-glass), inset 0 1px 0 rgba(255,255,255,.85);
}
.disc__list img { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; object-position: var(--pos, 50% 50%); border-radius: 10px; box-shadow: 0 18px 36px -18px rgba(75,45,64,.45); }
.disc__li { padding: 14px 6px 0; }
.disc__n { font: italic 300 2.2rem/1.1 var(--font-display); color: var(--plum); }
.disc__b { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 2px 10px; font: 500 11.5px/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--plum-s); }
.disc__d { margin-top: 8px; font: 400 16px/1.55 var(--font-body); color: var(--plum); }
.disc__lbtn {
  position: absolute; right: 24px; top: 24px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--plum);
  background: var(--pearl-solid); border: 1px solid rgba(210,174,138,.9); box-shadow: 0 10px 26px -8px rgba(75,45,64,.5);   /* sin backdrop-filter */
}
.disc__lbtn svg { margin-left: 2px; }
.disc__lbtn:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; }
.disc__also-rm { margin-top: 30px; text-align: center; font: italic 400 clamp(1.25rem, 1.1rem + .6vw, 1.6rem)/1.4 var(--font-serif); color: var(--plum); }
.disc__also-rm span, .disc__also span { font: 500 12px/1 var(--font-body); letter-spacing: .22em; text-transform: uppercase; font-style: normal; color: var(--plum-s); margin-right: 8px; }

/* ---------- Disciplinas con movimiento: pin, tela que se despliega, abanico de 3 paneles ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.no-fan) .disc { padding: 0; }
  html.js:not(.no-fan) .disc__stage { position: relative; width: auto; margin: 0; height: 100vh; height: calc(var(--u) * 100); min-height: 600px; overflow: clip; isolation: isolate; }
  html.js:not(.no-fan) .disc__list, html.js:not(.no-fan) .disc__also-rm {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; border: 0; display: block;
  }
  html.js:not(.no-fan) .disc__lbtn { display: none; }
  html.js:not(.no-fan) .fan, html.js:not(.no-fan) .disc__side, html.js:not(.no-fan) .disc__also { display: block; }
  html.js:not(.no-fan) .disc__label {
    position: absolute; z-index: 7; left: 50%; top: calc(var(--header-h) + var(--u) * 2.4); translate: -50% 0; margin: 0; white-space: nowrap;
    padding: 7px 16px; border-radius: 999px; background: var(--glass-bg-hi); color: var(--plum); border: 1px solid rgba(210,174,138,.8);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
}
.fan { --ch: calc(var(--u) * 54); --cw: calc(var(--ch) * .5625); position: absolute; left: 50%; top: calc(var(--header-h) + var(--u) * 7.2); width: var(--cw); height: var(--ch); transform: translate(-50%, 0); }
.fan__car, .fan__center { position: absolute; inset: 0; }
.fan__car { z-index: 1; }
.fan__center { z-index: 3; border-radius: 10px; box-shadow: var(--shadow-media); }
.fan__layers { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; background: #d9c0c6; transform: translateZ(0); }
.cp { position: absolute; inset: 0; overflow: hidden; will-change: clip-path; }
.sp {
  position: absolute; inset: 0; border-radius: 10px; overflow: hidden; filter: blur(2.6px); opacity: 0; will-change: transform, opacity;
  border: 1px solid rgba(233,211,176,.6); box-shadow: 0 34px 70px -22px rgba(75,45,64,.4); background: #d9c0c6;
}
.sp::after { content: ""; position: absolute; inset: 0; background: linear-gradient(175deg, rgba(251,246,243,.52), rgba(243,218,219,.26) 50%, rgba(167,127,149,.38)); }
/* fotos de las disciplinas (Tela, Lyra, Hexágono): el encuadre sale de --pos (data-pos del <li>); <picture> no participa del layout */
.cp .poster, .sp .poster, .fan__back .poster { object-position: var(--pos, 50% 50%); }
/* panel de profundidad del Hexágono: otra foto, desenfocada y pálida, asomando detrás del panel central (la mueve escena.js) */
.fan__back {
  position: absolute; inset: 0; z-index: 22; border-radius: 10px; overflow: hidden; opacity: 0; visibility: hidden; transform-origin: 50% 60%; will-change: transform, opacity;
  background: #d9c0c6; border: 1px solid rgba(233,211,176,.7); box-shadow: 0 34px 70px -22px rgba(75,45,64,.4);
}
.fan__back .poster { filter: blur(3.5px) saturate(.95) brightness(1.2); transform: scale(1.06); }
.fan__backveil { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(251,246,243,.68), rgba(243,218,219,.4) 55%, rgba(167,127,149,.34)); }
.cedge { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; overflow: visible; }
.cedge path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
#cedge { stroke: #E9D3B0; stroke-width: 2; }
#cedgeShadow { stroke: rgba(75,45,64,.35); stroke-width: 9; filter: blur(5px); transform: translateY(5px); }
.disc__side { position: absolute; z-index: 7; left: 6vw; right: 6vw; bottom: calc(var(--u) * 8.6 + 8px); }
.disc__card { padding: 14px 18px 16px; background: var(--glass-bg-hi); }
.disc__count { position: relative; display: flex; align-items: baseline; gap: 6px; font: 500 14px/1 var(--font-body); letter-spacing: .2em; color: var(--plum); }
.disc__count b { font: 400 24px/1 var(--font-display); letter-spacing: .04em; color: var(--plum); }
.disc__bar { flex: 1; height: 1px; margin-left: 12px; background: rgba(210,174,138,.5); position: relative; align-self: center; margin-right: 56px; }
.disc__bar i { position: absolute; left: 0; top: -.5px; height: 2px; width: 100%; background: linear-gradient(90deg, #E9D3B0, #C9967F); transform-origin: left; transform: scaleX(.16); }
.disc__txt { position: relative; margin-top: 8px; }
.disc__name { font: italic 300 34px/1.04 var(--font-display); color: var(--plum); }
.disc__badge[hidden] { display: none; }
.disc__badge { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 2px 10px; font: 500 11px/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--plum-s); }
.disc__desc { margin-top: 6px; font: 400 16px/1.45 var(--font-body); color: var(--plum); }
.disc__play[hidden] { display: none; }
.disc__play {
  position: absolute; right: 12px; top: 10px; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--plum);
  background: var(--gold-grad); border: 1px solid rgba(255,255,255,.5); box-shadow: 0 10px 24px -8px rgba(122,78,70,.55), inset 0 1px 0 rgba(255,255,255,.7);
  transition: transform .3s var(--ease-out);
}
.disc__play svg { margin-left: 2px; }
.disc__play:hover { transform: scale(1.08); }
.disc__play:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; }
.disc__also { position: absolute; z-index: 7; left: 6vw; right: 76px; bottom: calc(var(--u) * 2.4); text-align: left; font: 400 italic 17px/1.35 var(--font-serif); color: var(--plum); }

@media (min-width: 1100px) and (orientation: landscape) {
  .fan { --ch: calc(var(--u) * 76); left: 41vw; top: 50%; transform: translate(-50%, -48%); }
  .disc__side { left: auto; right: var(--gutter-d); bottom: auto; top: calc(var(--u) * 33); width: min(380px, 27vw); }
  .disc__card { padding: 24px 26px 26px; }
  .disc__count b { font-size: 30px; }
  .disc__txt { margin-top: 16px; }
  .disc__name { font-size: clamp(2.4rem, 2rem + 1vw, 3.2rem); }
  .disc__badge { margin-top: 10px; font-size: 12px; }
  .disc__desc { margin-top: 12px; font-size: 16.5px; line-height: 1.55; }
  .disc__play { top: 18px; right: 18px; width: 52px; height: 52px; }
  .disc__also { left: auto; right: var(--gutter-d); bottom: calc(var(--u) * 9); width: min(380px, 27vw); text-align: left; font-size: 20px; }
  html.js:not(.no-fan) .disc__label { left: auto; right: var(--gutter-d); width: min(380px, 27vw); translate: none; top: calc(var(--u) * 26); background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; white-space: normal; }
}

/* ---------- Dúo: foto grande en marco dorado, su eco desenfocado detrás y cartela de vidrio ---------- */
.shows__duo { position: relative; z-index: 2; isolation: isolate; padding: clamp(56px, 9vw, 120px) 0 clamp(64px, 9vw, 100px); }
.duo__panel { position: relative; z-index: 3; width: min(86vw, 440px); margin: 0 auto; aspect-ratio: 1128 / 1394; border-radius: 10px; box-shadow: var(--shadow-media); }
.duo__in { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; background: #d9c0c6; transform: translateZ(0); }
.duo__in picture, .duo__back picture { position: absolute; inset: 0; display: block; }
.duo__in .poster, .duo__back .poster { object-position: var(--pos, 50% 50%); }
.duo__back {
  position: absolute; z-index: 1; right: -18vw; top: clamp(90px, 14vw, 150px); width: 54vw; aspect-ratio: 1128 / 1394; max-width: 440px; border-radius: 10px; overflow: hidden;
  transform: rotate(8deg); filter: blur(3px) saturate(.95) brightness(1.18); opacity: .95; background: #d9c0c6;
  box-shadow: 0 30px 70px -20px rgba(75,45,64,.45); border: 1px solid rgba(233,211,176,.7);
}
.duo__back::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(251,246,243,.6), rgba(243,218,219,.38) 55%, rgba(167,127,149,.34)); }
.duo__cap { position: absolute; z-index: 6; left: 6%; right: 6%; bottom: -50px; display: block; padding: 16px 20px 18px; text-align: center; background: var(--glass-bg-hi); }
.duo__cap .eyebrow { color: var(--plum-s); }
.duo__title { display: block; margin-top: 6px; font: italic 300 clamp(1.7rem, 1.4rem + 1.2vw, 2.3rem)/1.1 var(--font-display); color: var(--plum); text-wrap: balance; }
.duo__title em { color: var(--mauve-d); }
@media (min-width: 1100px) and (orientation: landscape) {
  .shows__duo { --dh: calc(var(--u) * 84); display: flex; justify-content: center; align-items: center; min-height: calc(var(--u) * 100); padding: 40px var(--gutter-d); }
  .duo__panel { width: calc(var(--dh) * 1128 / 1394); height: var(--dh); aspect-ratio: auto; margin: 0; }
  .duo__back { right: auto; top: calc(50% - var(--dh) * .5 + 14px); left: calc(50% + var(--dh) * .22); width: calc(var(--dh) * .74 * 1128 / 1394); max-width: none; transform: rotate(8deg); }
  .duo__cap { left: auto; right: calc(100% - 96px); bottom: 14%; width: min(400px, 27vw); text-align: left; padding: 24px 26px 26px; }
  .duo__title { font-size: clamp(2.1rem, 1.7rem + 1vw, 2.9rem); }
}

/* ---------- Roles: numeral dorado, vidrio sobre medio ---------- */
.shows__roles { position: relative; z-index: 2; padding: clamp(56px, 9vw, 140px) 0 clamp(8px, 2vw, 24px); }
.roles { width: min(100% - 2 * var(--gutter), 115rem); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(46px, 11vw, 72px); }
.role { position: relative; min-width: 0; }
.role__media { aspect-ratio: 4 / 3; border-radius: 10px; box-shadow: var(--shadow-media); margin-inline: 4px; }
.role__in { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; background: #d9c0c6; transform: translateZ(0); }
.role__in .poster { object-position: var(--pos, 50% 40%); height: 116%; top: -8%; }
.role__glass { position: relative; z-index: 3; margin: -64px 16px 0; padding: 20px 22px 24px; background: var(--glass-bg-hi); }
.role__num {
  display: block; font: italic 300 clamp(3rem, 2.4rem + 2vw, 4.4rem)/1 var(--font-display); font-variant-numeric: lining-nums; margin-bottom: 8px;
  background: linear-gradient(120deg, #7E4F31 0%, #9C6A44 48%, #6F4630 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(251,246,243,.85));
}
.role__name { font: 500 clamp(1.4rem, 1.2rem + .6vw, 1.75rem)/1.18 var(--font-display); color: var(--plum); text-wrap: balance; }
.role__desc { margin-top: 10px; font: 400 16px/1.6 var(--font-body); color: var(--plum); }
@media (min-width: 768px) {
  .roles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(26px, 3.4vw, 60px); align-items: start; }
  .role__media { aspect-ratio: 3 / 4; }
  .role:nth-child(2) { margin-top: clamp(36px, 6vw, 96px); }
  .role__glass { margin: -78px 14px 0; padding: 22px 22px 26px; }
}
@media (min-width: 768px) and (max-width: 1099px) { .role__desc { font-size: 15.5px; line-height: 1.55; } .role__glass { padding: 18px 18px 22px; } }

/* ---------- Contratar + franja ---------- */
.shows__cta { position: relative; z-index: 3; display: flex; justify-content: center; padding: clamp(40px, 5vw, 72px) var(--gutter) 0; }
.shows__band { margin-top: clamp(46px, 6vw, 90px); }
.shows__band .satin-band__track { animation: none; }

/* ---------- Movimiento reducido: todo visible y quieto ---------- */
@media (prefers-reduced-motion: reduce) {
  .stage__bokeh i, .vcard.is-center .vcard__frame::before { animation: none; }
  .vcard__btn, .vcard__frame, .vcard__meta, .vcard__poster, .vcard__preview, .vcard__orns, .stage__bgl, .chip, .ctrl, .vcard__play { transition-duration: .01ms !important; }
  .stage__track { scroll-behavior: auto; }
  .shows__band .satin-band__track { transform: none; }
}