/* ====================================================================
   MISS HERENCIA LATINA USA — v8 «Gala Night 2026» (2026-10-16)

   Felipe señaló Colombian Fest como modelo («así se hace una página de un
   evento») y pidió «la mejor página que hayas hecho, cada detalle». La v8
   es la página de UN evento —la Gala Night 2026, en diciembre, en Dallas—
   con la anatomía de Colombian Fest (portada con ficha y cuenta regresiva,
   cinta, lineup, programa, boletos y patrocinio por niveles, preguntas)
   vestida con el lenguaje de una gala: telón de terciopelo que se recoge al
   cargar, haces de luz que barren la pista, confeti dorado, programa de
   mano impreso, boletos de papel troquelados, tarjeta de «Reservado» para
   el patrocinador, banda dorada para la fundación y marca de agua en el pie.

   Escenas de IA (sin personas) para el ambiente; fotos reales enmarcadas.
   Tipografía: Bodoni Moda (titulares) + Archivo con eje de anchura
   (rótulos condensados y texto) + Pinyon Script (acentos de invitación).
   Movimiento: solo transform/opacity y nada de blur sobre contenido animado
   (lección de la web de Laura). Todo se apaga con prefers-reduced-motion.
   CSS y JS llevan ?v= en cada despliegue (caché de 7 días en /assets).
   ==================================================================== */

:root {
  --vino: #5B0F26; --vino-hondo: #3A0918; --vino-claro: #7A1733; --noche: #1C060D; --negro: #0E0206;
  --oro: #C9A24B; --oro-hondo: #A8812F; --oro-claro: #E8D39C; --oro-brillo: #FFF4D6;
  --marfil: #F7F2EA; --papel: #FBF8F3; --crema: #F3E3E7; --blanco: #FFFFFF;
  --tinta: #241318; --apagado: #6A5A5F; --borde: #E4DAD2; --borde-fuerte: #CDBFB5; --claro-apagado: #E3CBD1;
  --degradado-oro: linear-gradient(100deg, #A8812F 0%, #E8D39C 30%, #FFF4D6 46%, #E8D39C 62%, #B98B2E 100%);
  --degradado-oro-titular: linear-gradient(100deg, #B4892F 0%, #D9B866 30%, #F1DDA2 48%, #D9B866 66%, #BE9339 100%);
  --f-titulo: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --f: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --f-script: 'Pinyon Script', 'Snell Roundhand', 'Apple Chancery', cursive;
  --radio: 2px;
  --pliego: clamp(88px, 10vw, 150px);
  --alto-cabecera: 76px;
  --lado: max(24px, calc((100vw - 1320px) / 2));
  --suave: cubic-bezier(.2, .7, .2, 1);
  interpolate-size: allow-keywords;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; scrollbar-color: var(--oro-hondo) var(--negro); }
body { margin: 0; font-family: var(--f); font-size: 1.0625rem; line-height: 1.6; color: var(--tinta); background: var(--papel); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: var(--oro); color: var(--vino-hondo); }
h1, h2, h3 { margin: 0 0 .45em; line-height: 1.06; text-wrap: balance; }
h1, h2 { font-family: var(--f-titulo); font-weight: 600; letter-spacing: -.012em; }
h1 em, h2 em, h3 em, p em { font-style: italic; font-weight: 500; }
h3 { font-family: var(--f-titulo); font-weight: 600; font-size: 1.5rem; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--vino); text-underline-offset: 3px; }
a:hover { color: var(--vino-claro); }
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }

.pliego { width: min(100% - 48px, 1040px); margin-inline: auto; }
.pliego--ancho { width: min(100% - 48px, 1320px); }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 8px 14px; background: var(--oro); color: var(--tinta); font-weight: 700; text-decoration: none; }
.saltar:focus { top: 12px; }

/* Rótulos condensados: una sola voz para etiquetas, datos y pies de foto. */
.rotulo, .portada__pre, .portada__lema, .portada__bajar, .ficha__rotulo, .cuenta i, .cuenta__pie, .cinta__pista > *, .cabecera__fecha, .carga__presenta,
.momento__tag, .elenco__pie small, .voz__dur, .acto__num, .programa-mano__sub, .programa-mano__tag, .programa-mano__pie, .tiquete__evento, .tiquete__precio small,
.tiquete__talon, .invitacion__dato, .reservado__para, .reservado__mesa, .nivel__pre, .patrocinio__usos-rotulo, .patrocinio__panel-rotulo, .creditos dt,
.cita__rotulo, .pilar__num, .carta__para, .cierre__lema, figcaption, .pie__legal, .ver-video small {
  font-family: var(--f); font-stretch: 78%; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: .72rem; line-height: 1.5;
}

.rotulo { display: flex; align-items: center; gap: 14px; margin: 0 0 26px; color: var(--oro-hondo); }
.rotulo span { font-family: var(--f-titulo); font-stretch: 100%; font-weight: 500; font-size: 1.15rem; letter-spacing: .02em; color: var(--vino); }
.rotulo::after { content: ''; width: 56px; height: 1px; background: currentColor; opacity: .6; }
.rotulo--claro { color: var(--oro); }
.rotulo--claro span { color: var(--oro-claro); }
.rotulo--vino { color: var(--vino-hondo); }
.rotulo--vino span { color: var(--vino-hondo); }
.titulo-grande { font-size: clamp(2.5rem, 5.4vw, 5rem); line-height: 1; color: var(--vino-hondo); margin-bottom: .4em; }
.titulo-grande em { color: var(--vino); }
.titulo-grande--claro { color: var(--blanco); }
.titulo-grande--claro em { color: var(--oro-claro); }
.titulo-medio { font-family: var(--f-titulo); font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.7rem); line-height: 1.08; color: var(--vino-hondo); margin: 0; }
.titulo-medio em { color: var(--vino); }

.seccion-cabeza { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(36px, 4.5vw, 60px); }
.seccion-cabeza .titulo-grande { margin: 0; }
.seccion-cabeza__texto { margin: 0; color: var(--apagado); max-width: 46ch; }
.seccion-cabeza--centro { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; max-width: 780px; margin-inline: auto; }
.seccion-cabeza--centro .rotulo { justify-content: center; margin-bottom: 18px; }
.seccion-cabeza--centro .rotulo::before { content: ''; width: 56px; height: 1px; background: currentColor; opacity: .6; }
.seccion-cabeza--baja { margin-bottom: 32px; }

.manifiesto { max-width: 22ch; margin: 0 0 30px; font-family: var(--f-titulo); font-weight: 500; font-size: clamp(2.1rem, 4.4vw, 4.1rem); line-height: 1.07; letter-spacing: -.014em; color: var(--vino-hondo); }
.manifiesto em { color: var(--vino); }
.manifiesto .p { color: rgba(58, 9, 24, .18); transition: color .4s ease; }
.manifiesto .p.es-luz { color: var(--vino-hondo); }
.manifiesto em .p.es-luz { color: var(--vino); }

/* ------------------------------------------------------------ botones y enlaces */
.boton { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 14px 26px; border: 1.5px solid transparent; border-radius: var(--radio); font-family: var(--f); font-stretch: 85%; font-weight: 600; font-size: .84rem; letter-spacing: .14em; text-transform: uppercase; line-height: 1.25; text-align: center; text-decoration: none; white-space: normal; cursor: pointer; transition: background-color .25s, background-position .6s var(--suave), border-color .25s, color .25s, transform .45s var(--suave), box-shadow .45s var(--suave); }
.boton--grande { min-height: 56px; padding: 17px 32px; font-size: .88rem; }
.boton:hover { transform: translateY(-2px); }
.boton--oro { background: var(--degradado-oro); background-size: 180% 100%; background-position: 0 0; color: var(--vino-hondo); box-shadow: 0 12px 30px rgba(201, 162, 75, .28); }
.boton--oro::after { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent); transform: skewX(-20deg); transition: left .7s var(--suave); }
.boton--oro:hover { background-position: 100% 0; color: var(--vino-hondo); box-shadow: 0 18px 40px rgba(201, 162, 75, .42); }
.boton--oro:hover::after { left: 130%; }
.boton--claro { background: rgba(14, 2, 6, .28); color: var(--blanco); border-color: rgba(255, 255, 255, .55); }
.boton--claro:hover { background: var(--blanco); color: var(--vino-hondo); border-color: var(--blanco); }
.boton--vino { background: var(--vino-hondo); color: var(--blanco); }
.boton--vino:hover { background: var(--vino); color: var(--blanco); box-shadow: 0 14px 30px rgba(58, 9, 24, .3); }
.enlace-flecha { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 4px; border-bottom: 1px solid currentColor; font-family: var(--f); font-stretch: 85%; font-weight: 600; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--vino); }
.enlace-flecha span { transition: transform .3s var(--suave); }
.enlace-flecha:hover span { transform: translateX(6px); }
.enlace-flecha--claro { color: var(--oro-claro); }
.enlace-flecha--claro:hover { color: var(--blanco); }
.ver-video { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; font-family: var(--f); font-stretch: 85%; font-weight: 600; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.ver-video small { font-size: .68rem; opacity: .7; margin-left: 2px; }
.ver-video__icono { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--oro); transition: transform .3s var(--suave); }
.ver-video__icono::after { content: ''; position: absolute; left: 18px; top: 14px; border-left: 13px solid var(--vino-hondo); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.ver-video__icono::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(201, 162, 75, .55); animation: onda 2.4s ease-out infinite; }
.ver-video:hover .ver-video__icono { transform: scale(1.1); }
@keyframes onda { from { transform: scale(1); opacity: .7; } to { transform: scale(1.55); opacity: 0; } }

/* Láminas: las fotos reales, enmarcadas como en una publicación impresa. */
.lamina { position: relative; padding: 12px 12px 16px; background: var(--blanco); box-shadow: 0 30px 70px rgba(36, 6, 15, .2); }
.lamina img { width: 100%; height: 100%; object-fit: cover; }
.lamina figcaption { margin-top: 12px; color: var(--apagado); font-size: .68rem; letter-spacing: .12em; }
.oro-texto { background: var(--degradado-oro); background-size: 230% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.corona { display: block; width: 44px; height: auto; margin: 0 auto 10px; color: var(--oro-hondo); }

/* ------------------------------------------------------------ telón de carga */
.carga { display: none; }
html.js .carga { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; pointer-events: none; }
html.js:not(.es-cargada) .carga { pointer-events: auto; }
.carga__telon { position: absolute; top: 0; bottom: 0; width: 50.5%; background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 68%, rgba(0, 0, 0, .5) 100%), repeating-linear-gradient(90deg, #26050F 0, #4A0D20 24px, #70163A 40px, #4A0D20 58px, #26050F 84px); transition: transform 1.35s cubic-bezier(.7, 0, .18, 1) .25s, opacity .6s ease 1.2s; }
.carga__telon--izq { left: 0; transform-origin: 0 50%; box-shadow: inset -40px 0 50px rgba(0, 0, 0, .5); }
.carga__telon--der { right: 0; transform-origin: 100% 50%; box-shadow: inset 40px 0 50px rgba(0, 0, 0, .5); }
.carga__telon::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; background: linear-gradient(180deg, #F3DFA0, #A8812F) 0 0 / 100% 5px no-repeat, repeating-linear-gradient(90deg, rgba(232, 211, 156, .95) 0 2px, rgba(232, 211, 156, 0) 2px 6px) 0 5px / 100% 25px no-repeat; }
.carga__centro { position: relative; z-index: 1; display: grid; justify-items: center; gap: 14px; text-align: center; transition: opacity .45s, transform .7s var(--suave); }
.carga__presenta { margin: 0; color: var(--oro-claro); letter-spacing: .3em; opacity: 0; animation: entra 1s .3s var(--suave) forwards; }
.carga__logo { clip-path: inset(0 100% 0 0); animation: revela 1.4s .15s cubic-bezier(.65, 0, .35, 1) forwards; }
.carga__logo img { width: min(220px, 52vw); }
.carga__titulo { margin: 0; font-family: var(--f-titulo); font-weight: 500; font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1; color: var(--blanco); opacity: 0; animation: entra 1s .75s var(--suave) forwards; }
.carga__titulo em { color: var(--oro-claro); }
.carga__barra { width: min(240px, 58vw); height: 1px; margin-top: 8px; background: rgba(232, 211, 156, .2); overflow: hidden; }
.carga__barra span { display: block; height: 100%; background: var(--oro); transform-origin: left; transform: scaleX(var(--avance, 0)); transition: transform .2s; }
.carga__num { margin: 0; font-family: var(--f-titulo); font-size: 2.2rem; line-height: 1; color: var(--oro-claro); font-variant-numeric: tabular-nums; }
.carga__num small { font-size: .8rem; margin-left: 4px; color: var(--oro); }
html.es-cargada .carga__centro { opacity: 0; transform: scale(.96); }
html.es-cargada .carga__telon { transform: scaleX(.08); opacity: 0; }
html.es-cargada .carga { animation: fuera 0s 1.9s forwards; }
@keyframes fuera { to { visibility: hidden; } }
@keyframes revela { to { clip-path: inset(0 0 0 0); } }
@keyframes entra { to { opacity: 1; transform: none; } }
html.js:not(.es-cargada) body { overflow: hidden; }

/* ------------------------------------------------------------ cabecera: transparente arriba, oscura o clara según la sección */
.cabecera { position: fixed; left: 0; right: 0; top: 0; z-index: 50; color: var(--blanco); background: var(--negro); border-bottom: 1px solid rgba(201, 162, 75, .22); box-shadow: 0 10px 30px rgba(14, 2, 6, .18); transition: background-color .4s, color .4s, border-color .4s, box-shadow .4s; }
.cabecera.es-arriba { background: linear-gradient(180deg, rgba(14, 2, 6, .62) 0%, rgba(14, 2, 6, 0) 100%); border-color: transparent; box-shadow: none; }
.cabecera.sobre-claro:not(.es-arriba) { color: var(--tinta); background: var(--papel); border-color: var(--borde); box-shadow: 0 10px 30px rgba(36, 6, 15, .06); }
.cabecera.menu-abierto { color: var(--blanco); background: var(--negro); }
.cabecera__fila { display: flex; align-items: center; gap: 22px; height: var(--alto-cabecera); padding-inline: var(--lado); }
.cabecera__logo { flex: none; display: block; }
.cabecera__logo img { width: 118px; }
.cabecera__nav { display: flex; gap: 2px; margin-left: auto; }
.cabecera__nav a { position: relative; padding: 8px 11px; color: inherit; text-decoration: none; white-space: nowrap; font-weight: 500; font-size: .88rem; letter-spacing: .01em; }
.cabecera__nav a::after { content: ''; position: absolute; left: 11px; right: 11px; bottom: 2px; height: 1px; background: var(--oro); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--suave); }
.cabecera__nav a:hover::after { transform: scaleX(1); }
.cabecera__fecha { margin: 0; padding-left: 20px; border-left: 1px solid rgba(201, 162, 75, .45); color: var(--oro); white-space: nowrap; }
.cabecera.sobre-claro:not(.es-arriba) .cabecera__fecha { color: var(--oro-hondo); }
.cabecera__cta { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border: 1px solid var(--oro); color: inherit; text-decoration: none; font-family: var(--f); font-stretch: 85%; font-weight: 600; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; transition: background-color .3s, color .3s, border-color .3s; }
.cabecera:not(.es-arriba) .cabecera__cta, .cabecera__cta:hover { background: var(--oro); border-color: var(--oro); color: var(--vino-hondo); }
.cabecera__menu { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid currentColor; border-radius: var(--radio); background: transparent; color: inherit; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 6px; }
.cabecera__menu span:not(.visualmente-oculto) { display: block; width: 18px; height: 1.5px; background: currentColor; transition: transform .35s var(--suave); }
.cabecera.menu-abierto .cabecera__menu span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.cabecera.menu-abierto .cabecera__menu span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }
.cabecera__progreso { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; transition: opacity .4s; }
.cabecera__progreso i { display: block; height: 100%; background: var(--degradado-oro); transform-origin: left; transform: scaleX(var(--avance, 0)); }
.cabecera.es-arriba .cabecera__progreso, .cabecera.menu-abierto .cabecera__progreso { opacity: 0; }
.menu-movil { max-height: calc(100vh - var(--alto-cabecera)); overflow-y: auto; border-top: 1px solid rgba(201, 162, 75, .3); background: var(--negro); color: var(--blanco); }
.menu-movil ol { padding: 8px var(--lado) 6px; }
.menu-movil ol a { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); color: var(--blanco); text-decoration: none; font-family: var(--f-titulo); font-size: 1.3rem; }
.menu-movil ol a i { font-family: var(--f); font-stretch: 78%; font-style: normal; font-size: .7rem; letter-spacing: .14em; color: var(--oro); }
.menu-movil__pie { margin: 0; padding: 14px var(--lado) 22px; }
.menu-movil__pie .boton { width: 100%; }

/* ------------------------------------------------------------ escenas: fondo a sangre, haces, luces y confeti */
.escena { position: relative; isolation: isolate; overflow: hidden; color: var(--blanco); background: var(--negro); }
.escena__fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.escena__img { position: absolute; inset: -9% 0; }
.escena__img img { width: 100%; height: 100%; object-fit: cover; }
.escena__fondo::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.escena__fondo[data-paralaje] { inset: -16% 0; }
.escena__luces { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 45% at 50% 32%, rgba(255, 225, 160, .22), rgba(255, 225, 160, 0) 70%); mix-blend-mode: screen; animation: parpadeo 6.5s ease-in-out infinite; }
@keyframes parpadeo { 0%, 100% { opacity: .55; } 18% { opacity: .9; } 36% { opacity: .62; } 57% { opacity: 1; } 78% { opacity: .7; } }
.haces { position: absolute; inset: 0; overflow: hidden; pointer-events: none; mix-blend-mode: screen; }
.haces i { position: absolute; top: -12%; left: 12%; width: 34vw; height: 132%; transform-origin: 50% 0; background: linear-gradient(90deg, rgba(255, 228, 170, 0) 0%, rgba(255, 228, 170, .07) 30%, rgba(255, 240, 205, .2) 50%, rgba(255, 228, 170, .07) 70%, rgba(255, 228, 170, 0) 100%); clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%); animation: haz 12s ease-in-out infinite alternate; }
.haces i + i { left: auto; right: 12%; animation-duration: 14s; animation-delay: -5s; animation-direction: alternate-reverse; }
@keyframes haz { from { transform: rotate(-24deg); } to { transform: rotate(18deg); } }
.confeti { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }

/* ------------------------------------------------------------ PORTADA DEL EVENTO */
.portada { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--alto-cabecera) + 56px) var(--lado) 26px; }
.portada .escena__img { inset: 0; transform-origin: 50% 42%; }
html.js .portada .escena__img { animation: lento 32s ease-in-out infinite alternate; }
@keyframes lento { from { transform: scale(1.02); } to { transform: scale(1.1); } }
.portada .escena__fondo::after { background: linear-gradient(90deg, rgba(14, 2, 6, .88) 0%, rgba(14, 2, 6, .72) 34%, rgba(14, 2, 6, .4) 56%, rgba(14, 2, 6, .16) 76%, rgba(14, 2, 6, .3) 100%), linear-gradient(180deg, rgba(14, 2, 6, .55) 0%, rgba(14, 2, 6, 0) 24%, rgba(14, 2, 6, 0) 56%, rgba(14, 2, 6, .94) 100%); }
.portada__cuerpo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(300px, 4.3fr); gap: clamp(32px, 5vw, 88px); align-items: end; margin-bottom: 40px; }
.portada__pre { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 12px; color: var(--oro-claro); letter-spacing: .28em; }
.portada__pre i { font-style: normal; color: var(--oro); font-size: .8em; }
.portada__script { margin: 0 0 -.06em .03em; font-family: var(--f-script); font-weight: 400; font-size: clamp(2rem, 3.3vw, 3.3rem); line-height: 1.15; color: var(--oro-claro); }
.portada__titulo { margin: 0 0 26px; font-size: clamp(3.6rem, 10vw, 9.6rem); font-weight: 600; font-variation-settings: 'opsz' 18; line-height: .9; letter-spacing: -.02em; color: var(--blanco); filter: drop-shadow(0 4px 28px rgba(14, 2, 6, .55)); }
.portada__titulo .oro-texto { font-style: italic; font-weight: 600; padding-right: .06em; background-image: var(--degradado-oro-titular); }
.linea { display: block; overflow: hidden; padding: 0 .12em .3em; margin: 0 -.12em -.3em; }
.linea > span { display: inline-block; }
html.js .linea > span { transform: translateY(145%); animation: subir 1.2s var(--suave) forwards; }
html.js .linea:nth-child(1) > span { animation-delay: .45s; }
html.js .linea:nth-child(2) > span { animation-delay: .6s; }
@keyframes subir { to { transform: none; } }
html.js .portada__titulo .oro-texto { animation: brillo-oro 3.4s 1.5s var(--suave) both; }
@keyframes brillo-oro { from { background-position: 100% 0; } to { background-position: 0 0; } }
.portada__bajada { max-width: 46ch; margin: 0 0 30px; font-size: clamp(1rem, 1.25vw, 1.18rem); line-height: 1.6; color: var(--crema); }
.portada__acciones { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }
.ficha { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ficha__celda { padding: 18px 20px; border: 1px solid rgba(232, 211, 156, .26); background: rgba(14, 2, 6, .76); color: var(--crema); }
.ficha__celda--fecha { grid-column: 1 / -1; padding: 22px 22px 18px; border-color: rgba(255, 244, 214, .6); background: linear-gradient(140deg, #F1DFA6 0%, #D9B866 36%, #C9A24B 64%, #A8812F 100%); color: var(--vino-hondo); box-shadow: 0 24px 50px rgba(0, 0, 0, .38); }
.ficha__celda--ancha { grid-column: 1 / -1; }
.ficha__rotulo { display: block; margin-bottom: 6px; color: var(--oro); font-size: .7rem; letter-spacing: .22em; }
.ficha__celda--fecha .ficha__rotulo { color: var(--vino); }
.ficha__dato { display: block; font-family: var(--f-titulo); font-weight: 600; font-size: clamp(1.25rem, 1.5vw, 1.6rem); line-height: 1.1; color: var(--blanco); }
.ficha__celda--fecha .ficha__dato { font-size: clamp(1.9rem, 2.5vw, 2.5rem); color: var(--vino-hondo); }
.ficha__nota { display: block; margin-top: 5px; font-size: .82rem; line-height: 1.4; color: var(--claro-apagado); }
.ficha__celda--fecha .ficha__nota { color: var(--vino); }
.cuenta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 16px; }
.cuenta span { display: grid; justify-items: center; gap: 3px; padding: 10px 4px 8px; overflow: hidden; border: 1px solid rgba(58, 9, 24, .18); background: rgba(58, 9, 24, .09); }
.cuenta b { display: block; font-family: var(--f-titulo); font-weight: 600; font-size: clamp(1.6rem, 2.3vw, 2.3rem); line-height: 1; font-variant-numeric: lining-nums tabular-nums; color: var(--vino-hondo); }
.cuenta b.gira { animation: gira .5s var(--suave); }
@keyframes gira { from { transform: translateY(-45%); opacity: 0; } to { transform: none; opacity: 1; } }
.cuenta i { font-style: normal; font-size: .68rem; letter-spacing: .16em; color: var(--vino); }
.cuenta__pie { display: block; margin-top: 10px; text-align: center; font-size: .68rem; letter-spacing: .2em; color: var(--vino); }
.portada__pie { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding-top: 20px; border-top: 1px solid rgba(232, 211, 156, .28); color: var(--oro-claro); }
.portada__lema { letter-spacing: .24em; }
.portada__bajar { justify-self: center; display: inline-flex; flex-direction: column; align-items: center; gap: 10px; color: var(--oro-claro); text-decoration: none; letter-spacing: .22em; font-size: .68rem; }
.portada__bajar:hover { color: var(--blanco); }
.portada__bajar-linea { position: relative; display: block; width: 1px; height: 40px; overflow: hidden; background: linear-gradient(180deg, rgba(201, 162, 75, 0), var(--oro)); }
.portada__bajar-linea::after { content: ''; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: var(--oro-brillo); animation: gota 2.2s ease-in-out infinite; }
@keyframes gota { to { top: 100%; } }
.portada__marcas { justify-self: end; display: flex; align-items: center; gap: 18px; }
.portada__marcas img { height: 40px; width: auto; }
html.js .portada__texto > :not(.portada__titulo), html.js .ficha, html.js .portada__pie { opacity: 0; transform: translateY(16px); animation: entra 1s var(--suave) forwards; }
html.js .portada__pre { animation-delay: .25s; }
html.js .portada__script { animation-delay: .35s; }
html.js .portada__bajada { animation-delay: .85s; }
html.js .portada__acciones { animation-delay: 1s; }
html.js .ficha { animation-delay: 1.1s; }
html.js .portada__pie { animation-delay: 1.3s; }
html.js .portada .escena__fondo { opacity: 0; animation: abre 2.4s .05s var(--suave) forwards; }
@keyframes abre { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
html.js:not(.es-cargada) .portada, html.js:not(.es-cargada) .portada * { animation-play-state: paused; }

/* ------------------------------------------------------------ cinta dorada */
.cinta { position: relative; z-index: 1; overflow: hidden; background: var(--degradado-oro); color: var(--vino-hondo); box-shadow: inset 0 1px 0 rgba(58, 9, 24, .25), inset 0 -1px 0 rgba(58, 9, 24, .25); }
.cinta__pista { display: flex; width: max-content; padding: 15px 0; white-space: nowrap; }
.cinta__pista > * { margin-right: 36px; font-weight: 700; font-size: .82rem; letter-spacing: .22em; line-height: 1; }
.cinta__pista > i { font-style: normal; color: var(--vino); }
.cinta__pista.es-lista { animation: cinta 38s linear infinite; }
.cinta:hover .cinta__pista { animation-play-state: paused; }
@keyframes cinta { to { transform: translate3d(-50%, 0, 0); } }

/* ------------------------------------------------------------ 01 · LA NOCHE */
.noche { background: var(--papel); padding: var(--pliego) 0; overflow-x: clip; }
.noche__cabeza { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(40px, 7vw, 110px); align-items: center; margin-bottom: clamp(56px, 7vw, 100px); }
.noche__bajada { max-width: 52ch; margin: 0; color: var(--apagado); font-size: 1.08rem; line-height: 1.7; }
.noche__lamina { max-width: 420px; justify-self: end; rotate: 1.6deg; }
.noche__lamina img { aspect-ratio: 4 / 5; object-position: 50% 14%; }
.momentos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); border-top: 1px solid var(--borde-fuerte); }
.momento { position: relative; padding: 32px 0 0; }
.momento::before { content: ''; position: absolute; left: 0; top: -1px; width: 52px; height: 2px; background: var(--oro); }
.momento__num { display: block; margin-bottom: 14px; font-family: var(--f-titulo); font-weight: 500; font-size: 2.6rem; line-height: 1; letter-spacing: .04em; color: var(--oro-hondo); }
.momento__tag { display: block; margin-bottom: 8px; color: var(--oro-hondo); }
.momento h3 { font-size: clamp(1.35rem, 1.8vw, 1.65rem); color: var(--vino-hondo); }
.momento p { margin: 0; color: var(--apagado); font-size: .98rem; }

/* ------------------------------------------------------------ 02 · LOS CERTÁMENES */
.certamenes { position: relative; isolation: isolate; overflow: hidden; padding: 0 0 var(--pliego); background: var(--negro); color: var(--blanco); }
.certamenes__banda { position: absolute; left: 0; right: 0; top: -10%; z-index: -1; height: 80vh; min-height: 540px; overflow: hidden; }
.certamenes__banda img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.certamenes__banda::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 2, 6, .62) 0%, rgba(14, 2, 6, .2) 38%, rgba(14, 2, 6, .84) 76%, var(--negro) 100%); }
.certamenes__cabeza { padding: calc(var(--pliego) * 1.4) 0 clamp(48px, 7vw, 100px); }
.certamenes__cabeza .titulo-grande { max-width: 13ch; margin: 0; }
.certamenes__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3.5vw, 52px); }
.certamen { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(22px, 2.6vw, 36px); align-items: end; padding: 26px; border: 1px solid rgba(232, 211, 156, .22); background: linear-gradient(160deg, rgba(58, 9, 24, .84), rgba(14, 2, 6, .92)); }
.certamen__media { position: relative; isolation: isolate; aspect-ratio: 4 / 5; overflow: hidden; background: var(--noche); outline: 1px solid rgba(232, 211, 156, .4); outline-offset: 6px; }
.certamen__fondo, .certamen__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.certamen__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform 1.6s var(--suave); }
.certamen:hover .certamen__fondo img { transform: scale(1.05); }
.certamen__video { z-index: 1; opacity: 0; transition: opacity .7s; }
.certamen.es-reproduciendo .certamen__video { opacity: 1; }
.certamen__media figcaption { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 10px; padding: 6px 10px; background: rgba(14, 2, 6, .74); color: var(--oro-claro); font-size: .64rem; }
.certamen__texto { position: relative; }
.certamen__numero { position: absolute; right: -6px; top: -.55em; font-family: var(--f-titulo); font-size: clamp(5rem, 9vw, 8.5rem); font-weight: 400; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(232, 211, 156, .5); pointer-events: none; }
.certamen__logo { position: relative; width: 150px; margin: 0 0 18px; }
.certamen h3 { font-size: clamp(1.7rem, 2.3vw, 2.3rem); color: var(--blanco); }
.certamen__lema { font-family: var(--f-titulo); font-style: italic; font-size: 1.15rem; color: var(--oro-claro); margin-bottom: .6em; }
.certamen__texto > p:not(.certamen__lema):not(.certamen__acciones) { color: var(--claro-apagado); font-size: .98rem; }
.certamen__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin: 22px 0 0; }
.certamen__acciones .ver-video { color: var(--blanco); }

/* ------------------------------------------------------------ 03 · LAS CANDIDATAS (elenco) */
.candidatas { background: var(--marfil); padding: var(--pliego) 0; overflow-x: clip; }
.elenco { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 30px); margin-bottom: clamp(72px, 9vw, 130px); }
.elenco__item { display: flex; flex-direction: column; min-width: 0; color: var(--tinta); text-decoration: none; }
.elenco__item:hover { color: var(--tinta); }
.elenco__foto { position: relative; display: block; aspect-ratio: 4 / 5; background: var(--blanco); box-shadow: 0 16px 40px rgba(36, 6, 15, .12); transition: transform .7s var(--suave), box-shadow .7s var(--suave); }
.elenco__foto::after { content: ''; position: absolute; inset: -5px; border: 1px solid var(--oro); opacity: 0; transition: opacity .5s, inset .5s var(--suave); pointer-events: none; }
.elenco__foto img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: cover; object-position: 50% 18%; }
.elenco__item:hover .elenco__foto, .elenco__item:focus-visible .elenco__foto { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(36, 6, 15, .2); }
.elenco__item:hover .elenco__foto::after, .elenco__item:focus-visible .elenco__foto::after { opacity: 1; inset: -9px; }
.elenco__pie { display: grid; gap: 3px; padding: 16px 2px 0; }
.elenco__pie small { color: var(--oro-hondo); font-size: .64rem; }
.elenco__pie b { font-family: var(--f-titulo); font-weight: 600; font-size: 1.22rem; line-height: 1.15; color: var(--vino-hondo); }
.elenco__item--destacado { grid-column: span 2; grid-row: span 2; }
.elenco__item--destacado .elenco__foto { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; }
.elenco__item--destacado .elenco__foto img { object-position: 50% 12%; }
.elenco__item--destacado .elenco__pie b { font-size: clamp(2rem, 3vw, 2.8rem); font-style: italic; font-weight: 500; }
.voces__rejilla { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; grid-template-rows: 520px; gap: 12px; }
.voz { position: relative; isolation: isolate; display: block; overflow: hidden; color: var(--blanco); text-decoration: none; background: var(--noche); }
.voz picture { position: absolute; inset: 0; z-index: -2; }
.voz img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transition: transform 1.2s var(--suave); }
.voz::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(28, 6, 13, .05) 38%, rgba(28, 6, 13, .92)); }
.voz::after { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(232, 211, 156, 0); transition: border-color .5s; pointer-events: none; }
.voz:hover img { transform: scale(1.06); }
.voz:hover::after { border-color: rgba(232, 211, 156, .6); }
.voz:hover { color: var(--blanco); }
.voz__dur { position: absolute; top: 18px; right: 18px; padding: 5px 9px; background: rgba(28, 6, 13, .62); color: var(--oro-claro); font-size: .64rem; }
.voz__texto { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 20px; font-size: .9rem; line-height: 1.45; color: #EDDDE1; }
.voz__texto b { display: block; margin-bottom: 6px; font-family: var(--f-titulo); font-weight: 600; font-size: 1.3rem; line-height: 1.15; color: var(--blanco); }
.voz--grande .voz__texto b { font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 2.2vw, 2.1rem); }
.voces__pie { margin: 28px 0 0; text-align: right; }

/* ------------------------------------------------------------ 04 · PROGRAMA (programa de mano sobre terciopelo) */
.programa { position: relative; overflow-x: clip; padding: var(--pliego) 0; color: var(--blanco); background: linear-gradient(180deg, rgba(14, 2, 6, .55) 0%, rgba(14, 2, 6, 0) 22%, rgba(14, 2, 6, 0) 78%, rgba(14, 2, 6, .6) 100%), repeating-linear-gradient(90deg, rgba(0, 0, 0, .22) 0, rgba(255, 255, 255, .035) 48px, rgba(0, 0, 0, .14) 96px, rgba(255, 255, 255, .045) 146px, rgba(0, 0, 0, .22) 196px), var(--vino-hondo); }
.programa__rejilla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 110px); align-items: start; }
.programa__lado { position: sticky; top: calc(var(--alto-cabecera) + 40px); }
.programa__intro { max-width: 36ch; margin-bottom: 28px; color: var(--claro-apagado); }
.programa-mano { position: relative; padding: clamp(14px, 1.6vw, 22px); background: var(--papel); color: var(--tinta); box-shadow: 0 50px 100px rgba(0, 0, 0, .5), 0 0 0 1px rgba(201, 162, 75, .4); rotate: -.8deg; }
.programa-mano__marco { position: relative; padding: clamp(34px, 4vw, 56px) clamp(20px, 4vw, 56px) clamp(30px, 3.4vw, 44px); text-align: center; }
.programa-mano__marco::before, .programa-mano__marco::after { content: ''; position: absolute; pointer-events: none; }
.programa-mano__marco::before { inset: 0; border: 1px solid var(--oro); }
.programa-mano__marco::after { inset: 6px; border: 1px solid rgba(201, 162, 75, .45); }
html.js .programa-mano__marco::before, html.js .programa-mano__marco::after { clip-path: inset(0 100% 100% 0); transition: clip-path 1.8s var(--suave) .3s; }
html.js .programa-mano__marco::after { transition-delay: .55s; }
html.js .programa-mano.es-visible .programa-mano__marco::before, html.js .programa-mano.es-visible .programa-mano__marco::after { clip-path: inset(0 0 0 0); }
.programa-mano .corona { width: 46px; }
.programa-mano__script { margin: 0; font-family: var(--f-script); font-size: clamp(2.8rem, 4.2vw, 3.8rem); line-height: 1.05; color: var(--oro-hondo); }
.programa-mano__titulo { margin: 4px 0 6px; font-family: var(--f-titulo); font-weight: 600; font-size: clamp(1.25rem, 2vw, 1.75rem); letter-spacing: .14em; text-transform: uppercase; color: var(--vino-hondo); }
.programa-mano__sub { margin: 0 0 30px; color: var(--apagado); }
.programa-mano__lista { text-align: left; border-top: 1px solid var(--borde-fuerte); }
.programa-mano__lista li { display: grid; grid-template-columns: 40px auto minmax(24px, 1fr) auto; column-gap: 12px; align-items: baseline; padding: 16px 10px 14px 0; border-bottom: 1px solid var(--borde); }
.programa-mano__num { font-family: var(--f-titulo); font-weight: 500; font-size: 1.1rem; letter-spacing: .04em; color: var(--oro-hondo); text-align: center; }
.programa-mano__lista b { font-family: var(--f-titulo); font-weight: 600; font-size: clamp(1.08rem, 1.5vw, 1.3rem); line-height: 1.2; color: var(--vino-hondo); }
.programa-mano__guia { height: 1px; border-bottom: 1px dotted var(--borde-fuerte); transform: translateY(-.25em); }
.programa-mano__tag { color: var(--oro-hondo); font-size: .64rem; white-space: nowrap; }
.programa-mano__lista p { grid-column: 2 / -1; margin: 4px 0 0; font-family: var(--f-titulo); font-style: italic; font-size: .98rem; line-height: 1.4; color: var(--apagado); }
.programa-mano__estrella { background: linear-gradient(90deg, rgba(201, 162, 75, .18), rgba(201, 162, 75, 0) 85%); }
.programa-mano__estrella b { color: var(--vino); }
.programa-mano__pie { margin: 26px 0 0; color: var(--oro-hondo); letter-spacing: .26em; }
html.js .programa-mano__lista li { opacity: 0; transform: translateY(10px); transition: opacity .7s var(--suave), transform .7s var(--suave); }
html.js .programa-mano.es-visible li { opacity: 1; transform: none; }
html.js .programa-mano.es-visible li:nth-child(1) { transition-delay: .5s; }
html.js .programa-mano.es-visible li:nth-child(2) { transition-delay: .6s; }
html.js .programa-mano.es-visible li:nth-child(3) { transition-delay: .7s; }
html.js .programa-mano.es-visible li:nth-child(4) { transition-delay: .8s; }
html.js .programa-mano.es-visible li:nth-child(5) { transition-delay: .9s; }
html.js .programa-mano.es-visible li:nth-child(6) { transition-delay: 1s; }

/* ------------------------------------------------------------ 05 · BOLETOS (papel troquelado) */
.boletos { background: var(--papel); padding: var(--pliego) 0; overflow-x: clip; }
.boletos__rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px); align-items: center; }
.tiquete-sombra { filter: drop-shadow(0 24px 34px rgba(36, 6, 15, .17)); }
.tiquete-sombra--vip { filter: drop-shadow(0 36px 50px rgba(36, 6, 15, .34)); }
.tiquete { --talon: 76px; --muesca: 14px; --rx: 0deg; --ry: 0deg; position: relative; display: flex; flex-direction: column; min-height: 570px; color: var(--tinta); background: linear-gradient(180deg, #FFFDF8, #F7EFE1);
  -webkit-mask: radial-gradient(circle var(--muesca) at 0 calc(100% - var(--talon)), transparent 96%, #000) 0 0 / 51% 100% no-repeat, radial-gradient(circle var(--muesca) at 100% calc(100% - var(--talon)), transparent 96%, #000) 100% 0 / 51% 100% no-repeat;
  mask: radial-gradient(circle var(--muesca) at 0 calc(100% - var(--talon)), transparent 96%, #000) 0 0 / 51% 100% no-repeat, radial-gradient(circle var(--muesca) at 100% calc(100% - var(--talon)), transparent 96%, #000) 100% 0 / 51% 100% no-repeat;
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .8s var(--suave); }
.tiquete.es-inclinado { transition-duration: .25s; }
.tiquete::before { content: ''; position: absolute; inset: 10px 10px calc(var(--talon) + 6px); border: 1px solid rgba(201, 162, 75, .55); pointer-events: none; }
.tiquete::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 32%, rgba(255, 250, 228, .6) 47%, rgba(255, 255, 255, 0) 62%); background-size: 260% 100%; background-position: var(--brillo, 110%) 0; mix-blend-mode: soft-light; opacity: 0; transition: opacity .5s; }
.tiquete:hover::after { opacity: 1; }
.tiquete__cuerpo { flex: 1; display: flex; flex-direction: column; padding: 36px 34px 26px; }
.tiquete__evento { margin: 0 0 12px; color: var(--oro-hondo); font-size: .64rem; letter-spacing: .26em; }
.tiquete__script { margin: 0; font-family: var(--f-script); font-size: 2.3rem; line-height: 1.05; color: var(--oro-hondo); }
.tiquete__nombre { margin: 0 0 18px; font-size: clamp(2.6rem, 3.6vw, 3.4rem); font-weight: 500; line-height: 1; letter-spacing: -.01em; color: var(--vino-hondo); }
.tiquete__incluye { flex: 1; margin: 0 0 22px; padding: 16px 0 0; border-top: 1px solid rgba(201, 162, 75, .45); }
.tiquete__incluye li { position: relative; padding: 7px 0 7px 24px; font-size: .95rem; line-height: 1.45; color: var(--apagado); }
.tiquete__incluye li::before { content: ''; position: absolute; left: 2px; top: 13px; width: 10px; height: 6px; border-left: 1.5px solid var(--oro-hondo); border-bottom: 1.5px solid var(--oro-hondo); transform: rotate(-45deg); }
.tiquete__precio { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 18px; padding: 12px 0; border-top: 1px dashed var(--borde-fuerte); border-bottom: 1px dashed var(--borde-fuerte); font-family: var(--f-titulo); font-style: italic; font-size: 1.12rem; line-height: 1.3; text-align: right; color: var(--vino); }
.tiquete__precio small { flex: none; font-style: normal; font-size: .62rem; color: var(--oro-hondo); }
.tiquete .boton { width: 100%; }
.tiquete__talon { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: var(--talon); padding: 0 30px; color: var(--vino); font-size: .62rem; letter-spacing: .2em; }
.tiquete__talon::before { content: ''; position: absolute; left: calc(var(--muesca) + 8px); right: calc(var(--muesca) + 8px); top: 0; border-top: 2px dashed rgba(168, 129, 47, .55); }
.tiquete--vip { min-height: 620px; color: var(--blanco); background: linear-gradient(170deg, #4E0E22 0%, var(--vino-hondo) 55%, #22040E 100%); }
.tiquete--vip::before { border-color: rgba(232, 211, 156, .6); }
.tiquete--vip .tiquete__evento, .tiquete--vip .tiquete__precio small { color: var(--oro); }
.tiquete--vip .tiquete__script { color: var(--oro-claro); }
.tiquete--vip .tiquete__nombre { font-size: clamp(3.2rem, 4.6vw, 4.4rem); font-weight: 600; background: var(--degradado-oro); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.tiquete--vip .tiquete__incluye { border-color: rgba(232, 211, 156, .35); }
.tiquete--vip .tiquete__incluye li { color: var(--claro-apagado); }
.tiquete--vip .tiquete__incluye li::before { border-color: var(--oro); }
.tiquete--vip .tiquete__precio { border-color: rgba(232, 211, 156, .35); color: var(--oro-claro); }
.tiquete--vip .tiquete__talon { color: var(--oro-claro); }
.tiquete--vip .tiquete__talon::before { border-color: rgba(232, 211, 156, .45); }
.tiquete__sello { position: absolute; top: 26px; right: 26px; display: grid; place-items: center; width: 62px; height: 62px; border: 1px solid var(--oro); border-radius: 50%; color: var(--oro-claro); rotate: 12deg; box-shadow: inset 0 0 0 4px rgba(201, 162, 75, .14); }
.tiquete__sello .corona { width: 30px; margin: 0; color: currentColor; }
.boletos__nota { margin: 40px 0 0; text-align: center; color: var(--apagado); font-size: .95rem; }

/* ------------------------------------------------------------ 06 · WHITE PARTY (invitación sobre la escena) */
.white { display: flex; align-items: center; min-height: min(92vh, 860px); padding: var(--pliego) 0; color: var(--tinta); background: var(--papel); }
.white .escena__img img { object-position: 62% 50%; }
.white .escena__fondo::after { background: linear-gradient(90deg, rgba(251, 248, 243, .9) 0%, rgba(251, 248, 243, .5) 36%, rgba(251, 248, 243, 0) 66%); }
.white__cuerpo { position: relative; }
.invitacion { position: relative; max-width: 470px; padding: clamp(40px, 4.4vw, 60px) clamp(28px, 3.4vw, 48px); text-align: center; background: var(--blanco); box-shadow: 0 40px 90px rgba(36, 6, 15, .22); rotate: -1.2deg; }
.invitacion::before, .invitacion::after { content: ''; position: absolute; pointer-events: none; }
.invitacion::before { inset: 10px; border: 1px solid var(--oro); }
.invitacion::after { inset: 15px; border: 1px solid rgba(201, 162, 75, .35); }
.invitacion .rotulo { justify-content: center; margin-bottom: 14px; }
.invitacion .rotulo::after { display: none; }
.invitacion__script { margin: 0; font-family: var(--f-script); font-size: clamp(2.1rem, 3.2vw, 2.9rem); line-height: 1.1; color: var(--oro-hondo); }
.invitacion__titulo { margin: 0 0 18px; font-size: clamp(3rem, 5.4vw, 4.8rem); font-weight: 500; line-height: .95; letter-spacing: -.02em; color: var(--vino-hondo); }
.invitacion__texto { max-width: 34ch; margin: 0 auto 14px; color: var(--apagado); }
.invitacion__dato { margin: 0 0 24px; color: var(--oro-hondo); }

/* ------------------------------------------------------------ 07 · PATROCINIO (escena del camerino) */
.patrocinio { padding: var(--pliego) 0; }
.patrocinio .escena__img img { object-position: 64% 50%; }
.patrocinio .escena__fondo::after { background: linear-gradient(90deg, rgba(14, 2, 6, .94) 0%, rgba(14, 2, 6, .8) 46%, rgba(14, 2, 6, .42) 100%), linear-gradient(180deg, rgba(14, 2, 6, 0) 48%, rgba(14, 2, 6, .88) 100%); }
.patrocinio__cabeza { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 80px); align-items: center; margin-bottom: clamp(48px, 6vw, 88px); }
.patrocinio__cabeza .titulo-grande { max-width: 15ch; }
.patrocinio__lema { max-width: 46ch; margin: 0 0 30px; font-family: var(--f-titulo); font-style: italic; font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.4; color: var(--oro-claro); }
.patrocinio__acciones { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }
.reservado { justify-self: center; perspective: 900px; }
.reservado__cara { position: relative; display: grid; justify-items: center; gap: 4px; width: min(300px, 100%); padding: 34px 26px 28px; text-align: center; color: var(--vino-hondo); background: linear-gradient(180deg, #FFFDF8, #F2E8D8); box-shadow: 0 40px 60px rgba(0, 0, 0, .55); transform: rotateX(12deg); rotate: -4deg; animation: flota 6s ease-in-out infinite alternate; }
@keyframes flota { from { translate: 0 0; } to { translate: 0 -8px; } }
.reservado__cara::before { content: ''; position: absolute; inset: 9px; border: 1px solid var(--oro); pointer-events: none; }
.reservado__cara::after { content: ''; position: absolute; left: 8%; right: 8%; bottom: -22px; height: 22px; background: radial-gradient(ellipse at 50% 0, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 70%); }
.reservado .corona { width: 38px; margin-bottom: 2px; }
.reservado__script { font-family: var(--f-script); font-size: clamp(2.8rem, 4vw, 3.6rem); line-height: 1.05; color: var(--vino-hondo); }
.reservado__para { color: var(--oro-hondo); font-size: .7rem; letter-spacing: .26em; }
.reservado__mesa { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(201, 162, 75, .5); color: var(--apagado); font-size: .6rem; letter-spacing: .24em; }
.niveles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: clamp(48px, 6vw, 80px); }
.nivel { display: flex; flex-direction: column; padding: 34px 30px 30px; border: 1px solid rgba(232, 211, 156, .3); background: rgba(14, 2, 6, .8); color: var(--blanco); transition: border-color .5s; }
.nivel:hover { border-color: rgba(232, 211, 156, .75); }
.nivel--principal { border-color: var(--oro); background: linear-gradient(165deg, rgba(91, 15, 38, .94), rgba(14, 2, 6, .94)); box-shadow: 0 0 0 1px rgba(201, 162, 75, .3), 0 30px 70px rgba(0, 0, 0, .45); }
.nivel__pre { margin: 0 0 10px; color: var(--oro); font-size: .66rem; letter-spacing: .24em; }
.nivel h3 { margin-bottom: .5em; font-size: clamp(1.6rem, 2.2vw, 2.1rem); line-height: 1.05; color: var(--blanco); }
.nivel--principal h3 { color: var(--oro-claro); }
.nivel__texto { margin-bottom: 18px; color: var(--claro-apagado); font-size: .96rem; }
.nivel__incluye { flex: 1; margin: 0 0 26px; border-top: 1px solid rgba(232, 211, 156, .25); }
.nivel__incluye li { position: relative; padding: 10px 0 10px 22px; border-bottom: 1px solid rgba(232, 211, 156, .12); color: var(--crema); font-size: .92rem; }
.nivel__incluye li::before { content: '✦'; position: absolute; left: 0; top: 11px; color: var(--oro); font-size: .66rem; }
.nivel .boton { width: 100%; }
.patrocinio__pie { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.patrocinio__usos-rotulo { margin: 0 0 10px; color: var(--oro); }
.patrocinio__usos li { padding: 12px 0; border-top: 1px solid rgba(232, 211, 156, .25); color: var(--claro-apagado); font-size: .96rem; }
.patrocinio__usos b { margin-right: 8px; font-family: var(--f-titulo); font-weight: 600; font-size: 1.1rem; color: var(--blanco); }
.patrocinio__panel { padding: 30px 32px 18px; border: 1px solid rgba(232, 211, 156, .35); background: rgba(14, 2, 6, .82); }
.patrocinio__panel-rotulo { margin: 0 0 12px; color: var(--oro); }
.creditos { margin: 0; border-top: 1px solid rgba(232, 211, 156, .35); }
.creditos > div { display: grid; grid-template-columns: 180px 1fr; gap: 12px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid rgba(232, 211, 156, .16); }
.creditos dt { padding-top: 3px; color: var(--oro); font-size: .66rem; }
.creditos dd { margin: 0; font-family: var(--f-titulo); font-size: 1.08rem; color: var(--blanco); }
.creditos dd a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(232, 211, 156, .45); }
.creditos dd a:hover { color: var(--oro-claro); }
.creditos__libre dd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; }
.creditos__hueco { padding-bottom: 2px; border-bottom: 1px dashed rgba(232, 211, 156, .5); font-style: italic; color: var(--oro-claro); }
.creditos__libre .enlace-flecha { font-size: .68rem; }

/* ------------------------------------------------------------ 08 · QUIÉNES SOMOS */
.proposito { background: var(--papel); padding: var(--pliego) 0; overflow-x: clip; }
.proposito__rejilla { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(40px, 7vw, 110px); align-items: center; margin-bottom: clamp(64px, 8vw, 110px); }
.proposito__cuerpo { max-width: 58ch; margin-bottom: 40px; color: var(--apagado); font-size: 1.05rem; line-height: 1.7; }
.proposito__cuerpo strong { color: var(--tinta); font-weight: 600; }
.citas { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.cita { margin: 0; padding: 22px 0 0; border-top: 2px solid var(--oro); }
.cita__rotulo { display: block; margin-bottom: 10px; color: var(--oro-hondo); }
.cita p { margin: 0; font-family: var(--f-titulo); font-style: italic; font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.35; color: var(--vino-hondo); }
.proposito__lamina { max-width: 430px; justify-self: end; rotate: 1.4deg; }
.proposito__lamina img { aspect-ratio: 4 / 5; }
.pilares { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--borde-fuerte); border-left: 1px solid var(--borde-fuerte); }
.pilar { position: relative; overflow: hidden; padding: 36px 28px 40px; border-right: 1px solid var(--borde-fuerte); border-bottom: 1px solid var(--borde-fuerte); transition: color .5s; }
.pilar::before { content: ''; position: absolute; inset: 0; z-index: 0; background: var(--vino-hondo); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--suave); }
.pilar > * { position: relative; z-index: 1; }
.pilar:hover::before { transform: scaleY(1); }
.pilar__num { display: block; margin-bottom: 56px; color: var(--oro-hondo); transition: color .5s; }
.pilar h3 { margin-bottom: .45em; font-size: clamp(2rem, 3.2vw, 3rem); font-style: italic; font-weight: 500; line-height: 1; color: var(--vino-hondo); transition: color .5s; }
.pilar p { margin: 0; color: var(--apagado); font-size: .98rem; transition: color .5s; }
.pilar:hover h3 { color: var(--oro-claro); }
.pilar:hover p { color: var(--claro-apagado); }
.pilar:hover .pilar__num { color: var(--oro); }

/* ------------------------------------------------------------ 09 · EL CAMINO A LA CORONA (horizontal) */
.viaje { position: relative; background: var(--noche); color: var(--blanco); }
.viaje__fijo { padding: var(--pliego) 0; }
.viaje__cabeza { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 24px 48px; margin-bottom: 40px; }
.viaje__cabeza .titulo-grande { margin: 0; }
.viaje__intro { max-width: 44ch; margin: 0; color: var(--claro-apagado); font-size: 1rem; }
.viaje__progreso { width: 220px; height: 1px; margin-bottom: 14px; background: rgba(255, 255, 255, .18); }
.viaje__progreso span { display: block; width: 100%; height: 100%; background: var(--oro); transform-origin: left; transform: scaleX(var(--avance, 0)); }
.viaje__pista { display: flex; gap: 18px; padding: 0 var(--lado) 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--lado); scrollbar-width: none; }
.viaje__pista::-webkit-scrollbar { display: none; }
.acto { position: relative; isolation: isolate; flex: 0 0 min(78vw, 400px); height: min(66vh, 600px); min-height: 440px; overflow: hidden; scroll-snap-align: start; background: #120408; }
.acto picture, .acto video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transition: transform 1.4s var(--suave); }
.acto picture img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.acto:hover picture, .acto:hover video { transform: scale(1.04); }
.acto::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(28, 6, 13, .5) 0%, rgba(28, 6, 13, .05) 30%, rgba(28, 6, 13, .92) 100%); }
.acto__num { position: absolute; top: 18px; left: 20px; padding: 6px 10px; border: 1px solid rgba(232, 211, 156, .6); color: var(--oro-claro); }
.acto__texto { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 24px 28px; }
.acto h3 { margin-bottom: .3em; font-size: 1.9rem; color: var(--blanco); }
.acto p { margin: 0; color: #EDDDE1; font-size: .96rem; }
.acto--final { outline: 1px solid var(--oro); outline-offset: -10px; }
.viaje--fijo .viaje__fijo { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: calc(var(--alto-cabecera) + 8px) 0 24px; }
.viaje--fijo .viaje__pista { width: max-content; overflow: visible; scroll-snap-type: none; will-change: transform; }
.viaje--fijo .acto { height: min(62vh, 580px); }

/* ------------------------------------------------------------ 10 · PREGUNTAS FRECUENTES */
.faq { background: var(--marfil); padding: var(--pliego) 0; overflow-x: clip; }
.faq__rejilla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 110px); align-items: start; }
.faq__lado { position: sticky; top: calc(var(--alto-cabecera) + 40px); }
.faq__intro { max-width: 36ch; margin: 0; color: var(--apagado); }
.faq__lista { border-top: 1px solid var(--borde-fuerte); }
.pregunta { border-bottom: 1px solid var(--borde-fuerte); }
.pregunta summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; list-style: none; cursor: pointer; font-family: var(--f-titulo); font-weight: 600; font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.25; color: var(--vino-hondo); transition: color .3s; }
.pregunta summary:hover { color: var(--vino); }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: ''; flex: none; width: 34px; height: 34px; border: 1px solid var(--oro); border-radius: 50%; background: linear-gradient(var(--oro-hondo), var(--oro-hondo)) center / 12px 1.5px no-repeat, linear-gradient(var(--oro-hondo), var(--oro-hondo)) center / 1.5px 12px no-repeat; transition: transform .45s var(--suave), background-color .3s; }
.pregunta[open] summary::after { transform: rotate(135deg); background-color: rgba(201, 162, 75, .14); }
.pregunta__cuerpo p { max-width: 58ch; margin: 0 0 26px; color: var(--apagado); }
.pregunta::details-content { block-size: 0; overflow-y: clip; transition: block-size .5s var(--suave), content-visibility .5s allow-discrete; }
.pregunta[open]::details-content { block-size: auto; }

/* ------------------------------------------------------------ 11 · LA FUNDACIÓN (banda dorada) */
.fundacion { position: relative; overflow: hidden; padding: var(--pliego) 0; color: var(--vino-hondo); background: radial-gradient(ellipse 70% 90% at 12% 0%, rgba(255, 244, 214, .7), rgba(255, 244, 214, 0) 60%), linear-gradient(135deg, #E3C77E 0%, #C9A24B 52%, #B48E3A 100%); }
.fundacion::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(58, 9, 24, .14) 1px, rgba(58, 9, 24, 0) 1.3px); background-size: 14px 14px; -webkit-mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, 0) 55%); mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, 0) 55%); }
.fundacion__rejilla { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.fundacion__medallon { display: grid; place-items: center; width: clamp(160px, 18vw, 240px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #FFFFFF, var(--papel) 70%); box-shadow: 0 0 0 6px var(--papel), 0 0 0 7px var(--oro-hondo), 0 0 0 15px rgba(255, 244, 214, .38), 0 0 0 16px rgba(58, 9, 24, .55), 0 34px 60px rgba(58, 9, 24, .3); }
.fundacion__medallon img { width: 62%; }
.fundacion__texto h2 { max-width: 18ch; margin-bottom: 22px; font-size: clamp(2.3rem, 4.6vw, 4.2rem); line-height: 1.02; color: var(--vino-hondo); }
.fundacion__texto h2 em { color: var(--vino); }
.fundacion__texto p { max-width: 62ch; color: #4A1A26; }
.fundacion__texto strong { color: var(--vino-hondo); }
.fundacion .enlace-flecha { color: var(--vino-hondo); }
.tricolor { display: flex; width: min(100%, 360px); height: 6px; margin-bottom: 24px; }
.tricolor i { display: block; height: 100%; transform: scaleX(0); transform-origin: left; transition: transform 1s var(--suave); }
.tricolor i:nth-child(1) { flex: 2; background: #F7C51E; }
.tricolor i:nth-child(2) { flex: 1; background: #2756C8; transition-delay: .35s; }
.tricolor i:nth-child(3) { flex: 1; background: #E0242B; transition-delay: .6s; }
.es-visible .tricolor i, html:not(.js) .tricolor i { transform: scaleX(1); }

/* ------------------------------------------------------------ CIERRE */
.cierre { padding: clamp(110px, 14vw, 190px) 0 80px; }
.cierre .escena__img img { opacity: .55; }
.cierre .escena__fondo::after { background: radial-gradient(ellipse at 50% 40%, rgba(91, 15, 38, .35), rgba(14, 2, 6, .95) 72%); }
.cierre__frase { max-width: 20ch; margin: 0 0 64px; font-size: clamp(2.2rem, 4.8vw, 4.6rem); line-height: 1.02; }
.cierre__frase em { color: var(--oro-claro); }
.cartas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(201, 162, 75, .35); }
.carta { padding: 32px 28px 32px 0; border-bottom: 1px solid rgba(201, 162, 75, .35); }
.carta + .carta { padding-left: 28px; border-left: 1px solid rgba(201, 162, 75, .35); }
.carta__para { margin: 0 0 14px; color: var(--oro); }
.carta__frase { margin: 0 0 22px; font-family: var(--f-titulo); font-style: italic; font-size: clamp(1.25rem, 1.8vw, 1.55rem); line-height: 1.3; color: var(--crema); }
.cierre__pie { display: grid; justify-items: center; margin-top: 72px; text-align: center; }
.cierre__logo { position: relative; overflow: hidden; margin-bottom: 18px; }
.cierre__logo img { width: 210px; }
.cierre__logo::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 244, 214, .9), transparent); mix-blend-mode: overlay; transform: skewX(-18deg); animation: glint 5.5s ease-in-out infinite; }
@keyframes glint { 0%, 60% { left: -40%; } 100% { left: 120%; } }
.cierre__lema { margin: 0; color: var(--oro); letter-spacing: .32em; }
.cierre__contacto { margin: 16px 0 0; color: var(--claro-apagado); }
.cierre__contacto a { color: var(--oro-claro); font-weight: 600; }

/* ------------------------------------------------------------ pie con marca de agua */
.pie { overflow: hidden; padding: clamp(56px, 7vw, 96px) 0 34px; background: var(--negro); color: var(--claro-apagado); border-top: 1px solid rgba(201, 162, 75, .3); }
.pie__marca { margin: 0 0 clamp(36px, 5vw, 64px); font-family: var(--f-titulo); font-weight: 500; font-size: clamp(2.3rem, 11.4vw, 11rem); line-height: .9; letter-spacing: -.035em; text-align: center; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(232, 211, 156, .36); }
.pie__marca em { -webkit-text-stroke-color: rgba(232, 211, 156, .62); }
.pie__fila { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 14px 32px; padding-top: 26px; border-top: 1px solid rgba(201, 162, 75, .2); }
.pie__edicion { max-width: 60ch; margin: 0; font-size: .86rem; color: var(--claro-apagado); }
.pie__enlaces { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.pie a { color: var(--blanco); text-decoration: none; font-size: .9rem; }
.pie a:hover { color: var(--oro-claro); }
.pie__legal { color: var(--oro); }

/* ------------------------------------------------------------ reproductor y visor */
.cine { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px; background: rgba(16, 3, 8, .95); opacity: 0; transition: opacity .4s; }
.cine.es-abierto { opacity: 1; }
.cine__marco { display: grid; gap: 14px; justify-items: center; transform: translateY(20px) scale(.97); transition: transform .6s var(--suave); }
.cine.es-abierto .cine__marco { transform: none; }
.cine__titulo { margin: 0; font-family: var(--f-titulo); font-style: italic; font-size: 1.3rem; color: var(--oro-claro); text-align: center; }
.cine__video { width: auto; max-width: min(92vw, 520px); max-height: 82vh; aspect-ratio: 9 / 16; background: #000; box-shadow: 0 30px 90px rgba(0, 0, 0, .6); outline: 1px solid rgba(201, 162, 75, .45); outline-offset: 8px; }
.cine__cerrar { position: absolute; top: 18px; right: 22px; width: 52px; height: 52px; border: 1px solid rgba(232, 211, 156, .5); border-radius: 50%; background: transparent; color: var(--oro-claro); font-size: 1.9rem; line-height: 1; cursor: pointer; transition: background-color .3s, color .3s; }
.cine__cerrar:hover { background: var(--oro); color: var(--vino-hondo); }
.visor { position: fixed; inset: 0; z-index: 150; display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; justify-items: center; padding: 24px 12px; background: rgba(20, 4, 10, .96); }
.visor img { grid-column: 2; grid-row: 1; width: auto; max-width: min(100%, 900px); max-height: 88vh; object-fit: contain; box-shadow: 0 30px 90px rgba(0, 0, 0, .5); }
.visor__cerrar { position: absolute; top: 14px; right: 18px; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, .4); background: transparent; color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.visor__nav { grid-row: 1; width: 52px; height: 52px; border: 1px solid rgba(232, 211, 156, .5); border-radius: 50%; background: transparent; color: var(--oro-claro); font-size: 2rem; line-height: 1; cursor: pointer; }
.visor__nav--ant { grid-column: 1; }
.visor__nav--sig { grid-column: 3; }
body.con-visor { overflow: hidden; }

/* ------------------------------------------------------------ cursor, grano, imán, Lenis, aparecer, barra móvil */
.cursor { display: none; }
html.cursor-activo .cursor { display: block; position: fixed; left: 0; top: 0; z-index: 500; pointer-events: none; }
html.cursor-activo, html.cursor-activo a, html.cursor-activo button, html.cursor-activo summary { cursor: none; }
.cursor__punto { position: fixed; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--oro); mix-blend-mode: difference; transition: opacity .25s; }
.cursor__aro { position: fixed; left: -22px; top: -22px; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(201, 162, 75, .8); border-radius: 50%; transition: width .35s var(--suave), height .35s var(--suave), left .35s var(--suave), top .35s var(--suave), background-color .35s, border-color .35s; }
.cursor__texto { font-family: var(--f); font-stretch: 85%; font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--vino-hondo); opacity: 0; transition: opacity .25s; }
html.cursor-encima .cursor__aro { left: -32px; top: -32px; width: 64px; height: 64px; border-color: var(--oro); background: rgba(201, 162, 75, .12); }
html.cursor-ver .cursor__aro { left: -46px; top: -46px; width: 92px; height: 92px; border-color: var(--oro); background: var(--oro); }
html.cursor-ver .cursor__texto { opacity: 1; }
html.cursor-ver .cursor__punto { opacity: 0; }
.grano { position: fixed; inset: -50%; z-index: 250; pointer-events: none; background: url("/assets/img/grano.png"); opacity: .16; animation: grano 1.2s steps(6) infinite; }
@keyframes grano { 0% { transform: translate(0, 0); } 20% { transform: translate(-7%, 4%); } 40% { transform: translate(5%, -6%); } 60% { transform: translate(-4%, 7%); } 80% { transform: translate(6%, 3%); } 100% { transform: translate(0, 0); } }
[data-iman] { transition: background-color .25s, background-position .6s var(--suave), border-color .25s, color .25s, transform .45s var(--suave), box-shadow .45s var(--suave); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
html.js [data-aparece] { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--suave), transform 1s var(--suave); }
html.js [data-aparece].es-visible { opacity: 1; transform: none; }
.momentos > :nth-child(2), .certamenes__rejilla > :nth-child(2), .boletos__rejilla > :nth-child(2), .niveles > :nth-child(2), .pilares > :nth-child(2), .cartas > :nth-child(2) { transition-delay: .12s; }
.momentos > :nth-child(3), .boletos__rejilla > :nth-child(3), .niveles > :nth-child(3), .pilares > :nth-child(3), .cartas > :nth-child(3) { transition-delay: .24s; }
.pilares > :nth-child(4) { transition-delay: .36s; }
[data-paralaje] { will-change: transform; }
.barra-movil { display: none; }

/* ------------------------------------------------------------ páginas legales (privacidad, 404) */
.pagina-legal main { min-height: 72vh; padding: calc(var(--alto-cabecera) + var(--pliego) * .6) 0 var(--pliego); background: var(--papel); }
.pagina-legal .legal { max-width: 760px; }
.pagina-legal .legal h1 { font-size: clamp(2.4rem, 5vw, 4rem); color: var(--vino-hondo); }
.pagina-legal .legal p { max-width: 62ch; color: var(--apagado); }
.pagina-legal .cabecera, .pagina-legal .cabecera.es-arriba { color: var(--tinta); background: rgba(251, 248, 243, .96); border-color: var(--borde); }
.pagina-legal .cabecera__cta { background: var(--oro); color: var(--vino-hondo); }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1500px) {
  .cabecera__fecha { display: none; }
}
@media (max-width: 1180px) {
  .portada__cuerpo { grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); }
  .certamenes__rejilla { grid-template-columns: 1fr; }
  .certamen { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); max-width: 980px; }
  .pilares { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .niveles { grid-template-columns: 1fr 1fr; }
  .nivel--principal { grid-column: 1 / -1; }
  .tiquete__cuerpo { padding: 32px 26px 24px; }
}
@media (max-width: 980px) {
  :root { --alto-cabecera: 68px; }
  .cabecera__nav { display: none; }
  .cabecera__menu { display: inline-flex; }
  .cabecera__cta { margin-left: auto; }
  .cabecera__cta + .cabecera__menu { margin-left: 0; }
  .portada { padding-bottom: 22px; }
  .portada__cuerpo { grid-template-columns: 1fr; gap: 30px; margin-bottom: 30px; }
  .portada__titulo { font-size: clamp(3.6rem, 13vw, 7rem); }
  .portada__pie { grid-template-columns: 1fr auto; }
  .portada__bajar { display: none; }
  .seccion-cabeza, .noche__cabeza, .proposito__rejilla, .programa__rejilla, .faq__rejilla, .patrocinio__cabeza, .patrocinio__pie { grid-template-columns: 1fr; }
  .noche__lamina, .proposito__lamina { justify-self: start; max-width: 360px; }
  .programa__lado, .faq__lado { position: static; }
  .momentos { grid-template-columns: 1fr; gap: 0; }
  .momento { padding: 26px 0 28px; border-bottom: 1px solid var(--borde); }
  .momento__num { font-size: 2rem; }
  .certamenes__banda { height: 60vh; min-height: 380px; }
  .certamen { grid-template-columns: 1fr; padding: 20px; }
  .certamen__media { max-width: 420px; }
  .certamen__numero { right: 4px; top: -.3em; }
  .elenco { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .voces__rejilla { grid-template-columns: 1fr 1fr; grid-template-rows: 420px 360px 360px; }
  .voz--grande { grid-column: 1 / -1; }
  .boletos__rejilla { grid-template-columns: minmax(0, 480px); justify-content: center; gap: 28px; }
  .tiquete, .tiquete--vip { min-height: 0; }
  .white { min-height: 0; }
  .white .escena__fondo::after { background: linear-gradient(180deg, rgba(251, 248, 243, .15) 0%, rgba(251, 248, 243, .7) 100%); }
  .invitacion { margin-inline: auto; }
  .reservado { justify-self: start; }
  .viaje__cabeza { grid-template-columns: 1fr; }
  .viaje__progreso { display: none; }
  .fundacion__rejilla { grid-template-columns: 1fr; justify-items: start; }
  .fundacion__medallon { justify-self: center; }
  .cartas { grid-template-columns: 1fr; }
  .carta + .carta { padding-left: 0; border-left: 0; }
}
@media (max-width: 640px) {
  :root { --alto-cabecera: 64px; }
  body { font-size: 1rem; }
  .pliego, .pliego--ancho { width: min(100% - 32px, 1320px); }
  .cabecera__logo img { width: 100px; }
  .cabecera__cta { display: none; }
  .cabecera__menu, .cabecera__cta + .cabecera__menu { margin-left: auto; }
  .portada { padding-inline: 16px; padding-top: calc(var(--alto-cabecera) + 40px); }
  .portada .escena__fondo::after { background: linear-gradient(180deg, rgba(14, 2, 6, .55) 0%, rgba(14, 2, 6, .18) 18%, rgba(14, 2, 6, .62) 38%, rgba(14, 2, 6, .9) 60%, rgba(14, 2, 6, .96) 100%); }
  .portada__bajada { text-shadow: 0 1px 14px rgba(14, 2, 6, .8); }
  .portada__pre { gap: 8px; font-size: .7rem; letter-spacing: .18em; }
  .portada__script { font-size: 1.9rem; }
  .portada__titulo { font-size: clamp(3.3rem, 17vw, 5rem); margin-bottom: 20px; }
  .portada__acciones .boton { width: 100%; }
  .ficha__celda { padding: 14px; }
  .ficha__celda--fecha { padding: 18px 14px 14px; }
  .ficha__nota { font-size: .78rem; }
  .cuenta { gap: 4px; }
  .cuenta b { font-size: 1.5rem; }
  .portada__pie { grid-template-columns: 1fr; gap: 14px; }
  .portada__marcas { justify-self: start; }
  .portada__marcas img { height: 34px; }
  .cinta__pista { padding: 12px 0; }
  .cinta__pista > * { margin-right: 24px; font-size: .74rem; }
  .manifiesto { font-size: clamp(1.9rem, 8.4vw, 2.5rem); }
  .citas { grid-template-columns: 1fr; }
  .certamen__logo { width: 130px; }
  .certamen__numero { display: none; }
  .elenco { grid-template-columns: 1fr 1fr; gap: 14px; }
  .elenco__item--destacado { grid-column: 1 / -1; grid-row: auto; }
  .elenco__item--destacado .elenco__foto { flex: none; aspect-ratio: 4 / 5; }
  .elenco__foto img { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
  .elenco__pie { padding-top: 12px; }
  .elenco__pie b { font-size: 1.05rem; }
  .voces__rejilla { grid-template-rows: 380px 300px 300px; gap: 8px; }
  .voz__texto { padding: 14px 12px; font-size: .82rem; }
  .voz__texto b { font-size: 1.05rem; }
  .programa-mano { rotate: 0deg; }
  .programa-mano__lista li { grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 10px; padding-right: 4px; }
  .programa-mano__guia { display: none; }
  .tiquete { --talon: 64px; }
  .tiquete__cuerpo { padding: 30px 24px 22px; }
  .tiquete__talon { padding: 0 24px; font-size: .58rem; letter-spacing: .14em; }
  .tiquete__sello { width: 52px; height: 52px; top: 22px; right: 22px; }
  .invitacion { rotate: 0deg; }
  .patrocinio__acciones .boton { width: 100%; }
  .reservado__cara { width: min(270px, 100%); }
  .niveles { grid-template-columns: 1fr; }
  .nivel { padding: 28px 22px 24px; }
  .patrocinio__panel { padding: 22px 18px 12px; }
  .creditos > div { grid-template-columns: 1fr; gap: 4px; }
  .pilares { grid-template-columns: 1fr; border-left: 0; }
  .pilar { padding: 28px 0 32px; border-right: 0; }
  .pilar__num { margin-bottom: 24px; }
  .acto { flex-basis: 84vw; height: 480px; min-height: 0; }
  .fundacion__medallon { width: 150px; }
  .cierre__lema { letter-spacing: .16em; font-size: .64rem; }
  .pie { padding-bottom: 96px; }
  .pie__fila { flex-direction: column; align-items: flex-start; }
  .barra-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--negro); border-top: 1px solid rgba(201, 162, 75, .5); transform: translateY(110%); transition: transform .35s var(--suave); }
  .barra-movil.es-visible { transform: none; }
  .barra-movil .boton { min-height: 46px; padding: 12px 10px; font-size: .76rem; }
  .visor { grid-template-columns: 44px 1fr 44px; padding: 16px 4px; }
  .visor__nav { width: 40px; height: 40px; font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  html.js [data-aparece], html.js .linea > span, html.js .portada__texto > *, html.js .ficha, html.js .portada__pie, html.js .portada .escena__fondo, html.js .programa-mano__lista li { opacity: 1; transform: none; }
  html.js .programa-mano__marco::before, html.js .programa-mano__marco::after { clip-path: none; }
  html.js .carga, .grano, .confeti, .haces { display: none; }
  .manifiesto .p { color: var(--vino-hondo); }
  .tricolor i { transform: none; }
}

/* ====================================================================
   v8.1 — LEGIBILIDAD (2026-10-16)
   Felipe: «casi no se lee» (título) y «aquí se corta la G». Una auditoría
   de 4 lentes (tipografía grande, contraste medido, texto sobre fotos,
   letra pequeña) con verificación adversarial encontró la causa común
   —Bodoni Moda con opsz automático deja trazos finos de ~0,2 px en
   pantallas 1x— y 40 detalles más. Cada regla está medida antes y
   después en 1903@1, 1440@1, 768@2, 390@3 y 360@3 (y 1522@1,25, la
   escala de Felipe). Va al final para sobrescribir sin tocar lo de arriba.
   ==================================================================== */

/* 1. Bodoni Moda: corte óptico fijo por niveles (la portada sigue en 18).
      Solo Bodoni tiene eje opsz (Archivo: wdth+wght; Pinyon: ninguno). */
:root { --opsz-texto: 9; --opsz-subtitulo: 12; --opsz-titulo: 16; --oro-tinta: #7A5A1E; --apagado-hondo: #4F3F45; }
body { font-variation-settings: 'opsz' var(--opsz-texto); }
.titulo-medio, .tiquete__nombre, .pilar h3, .elenco__item--destacado .elenco__pie b,
.momento__num, .carga__titulo { font-variation-settings: 'opsz' var(--opsz-subtitulo); }
.titulo-grande, .manifiesto, .cierre__frase, .fundacion__texto h2,
.tiquete--vip .tiquete__nombre, .pagina-legal .legal h1 { font-variation-settings: 'opsz' var(--opsz-titulo); }
.invitacion__titulo { font-weight: 600; font-variation-settings: 'opsz' 18; }
.rotulo span { font-variation-settings: 'opsz' 6; }
.pie__marca, .certamen__numero { font-variation-settings: normal; }
/* El corte óptico ensancha la línea un 0,6-1,4 %: estas tres reglas mantienen las mismas roturas. */
.cierre__frase { max-width: 20.5ch; }
.nivel h3 { letter-spacing: -.01em; }
@media (max-width: 640px) { .programa-mano__lista b, .voz__texto b { letter-spacing: -.012em; } }

/* 2. Dorado de tinta para texto pequeño sobre papel claro (--oro-hondo daba 2,9-3,6:1; ahora 5-6:1). */
.rotulo:not(.rotulo--claro):not(.rotulo--vino), .momento__tag, .cita__rotulo, .pilar__num, .elenco__pie small,
.programa-mano__num, .programa-mano__tag, .programa-mano__pie, .tiquete__evento, .tiquete__precio small,
.invitacion__dato, .cabecera.sobre-claro:not(.es-arriba) .cabecera__fecha, .pagina-legal .cabecera__fecha { color: var(--oro-tinta); }
.programa-mano__estrella .programa-mano__num { color: var(--vino); }
.cuenta i, .cuenta__pie { color: var(--vino-hondo); }

/* 3. Manifiestos: las palabras aún no encendidas se leen (1,47:1 → 3,4:1); el JS además las enciende antes. */
.manifiesto .p { color: rgba(58, 9, 24, .5); }

/* 4. Programa de mano: en pantallas de baja densidad el giro emborronaba todo el texto. */
.programa-mano__lista p { font-weight: 500; color: var(--apagado-hondo); }
@media (max-resolution: 1.5dppx) { .programa-mano { rotate: 0deg; } }

/* 5. Rótulos condensados: mínimo de 11,2 px (iban de 9,3 a 10,9 px) y menos tracking. */
.elenco__pie small, .voz__dur, .programa-mano__tag, .tiquete__evento, .tiquete__precio small, .certamen__media figcaption,
.nivel__pre, .creditos dt, .lamina figcaption, .cuenta i, .cuenta__pie, .portada__bajar, .creditos__libre .enlace-flecha { font-size: .7rem; }
.tiquete__evento, .nivel__pre, .programa-mano__pie, .cuenta__pie, .portada__bajar { letter-spacing: .16em; }
.tiquete__talon { font-size: .7rem; letter-spacing: .14em; }
.reservado__para, .reservado__mesa { font-size: .7rem; letter-spacing: .16em; font-weight: 700; }
.reservado__para { color: var(--oro-tinta); }
.reservado__mesa { color: var(--vino-hondo); }
@media (max-width: 640px) {
  .programa-mano__tag { letter-spacing: .1em; }
  .tiquete__talon { padding: 0 20px; font-size: .68rem; letter-spacing: .1em; }
  .cierre__lema { font-size: .7rem; letter-spacing: .14em; }
}

/* 6. Portada en celular: velo más firme sobre la fila de focos y halo en antetítulo y caligrafía. */
.portada__script { text-shadow: 0 1px 2px rgba(14, 2, 6, .85), 0 0 18px rgba(14, 2, 6, .7); }
@media (max-width: 640px) {
  .portada .escena__fondo::after { background: linear-gradient(180deg, rgba(14, 2, 6, .66) 0%, rgba(14, 2, 6, .48) 9%, rgba(14, 2, 6, .52) 22%, rgba(14, 2, 6, .72) 36%, rgba(14, 2, 6, .9) 58%, rgba(14, 2, 6, .96) 100%); }
  .portada__pre, .portada__script { text-shadow: 0 1px 2px rgba(14, 2, 6, .9), 0 0 16px rgba(14, 2, 6, .85); }
}

/* 7. Los certámenes: la corona no se veía en celular ni tableta (el <picture> no tenía alto). */
.certamenes__banda picture { height: 100%; }
.certamenes__banda::after { background: linear-gradient(90deg, rgba(14, 2, 6, .7) 0%, rgba(14, 2, 6, .42) 40%, rgba(14, 2, 6, 0) 64%), linear-gradient(180deg, rgba(14, 2, 6, .62) 0%, rgba(14, 2, 6, .2) 38%, rgba(14, 2, 6, .84) 76%, var(--negro) 100%); }
.certamenes__cabeza .titulo-grande { text-shadow: 0 2px 18px rgba(14, 2, 6, .8); }
@media (max-width: 980px) { .certamenes__banda { top: 0; } }

/* 8. Patrocinio: la foto del camerino se estiraba hasta 9,8x en celular; ahora cubre la cabecera y se funde a negro. */
.patrocinio .escena__fondo[data-paralaje] { inset: -6% 0 auto; height: max(110vh, 900px); }
.patrocinio .escena__img { inset: 0; }
.patrocinio .escena__fondo::after { background: linear-gradient(90deg, rgba(14, 2, 6, .94) 0%, rgba(14, 2, 6, .8) 46%, rgba(14, 2, 6, .42) 100%), linear-gradient(180deg, rgba(14, 2, 6, 0) 45%, var(--negro) 100%); }
@media (max-width: 980px) {
  .patrocinio .escena__img img { object-position: 22% 50%; }
  .patrocinio .escena__fondo::after { background: linear-gradient(90deg, rgba(14, 2, 6, .9) 0%, rgba(14, 2, 6, .8) 50%, rgba(14, 2, 6, .66) 100%), linear-gradient(180deg, rgba(14, 2, 6, .2) 0%, rgba(14, 2, 6, 0) 30%, var(--negro) 100%); }
}

/* 9. Texto sobre fotos y videos: placas y velos más firmes. */
.acto__num { background: rgba(28, 6, 13, .62); }
.acto::before { background: linear-gradient(180deg, rgba(28, 6, 13, .5) 0%, rgba(28, 6, 13, .05) 30%, rgba(28, 6, 13, .45) 52%, rgba(28, 6, 13, .88) 70%, rgba(28, 6, 13, .95) 100%); }
.certamen__media figcaption { background: rgba(14, 2, 6, .88); }
.voz__dur { background: rgba(28, 6, 13, .82); }
.carta__para { color: #D9B866; text-shadow: 0 1px 10px rgba(14, 2, 6, .9); }
@media (min-width: 641px) and (max-width: 980px) { .voz--grande img { object-position: 50% 0%; } }

/* 10. Medida de lectura en tableta (había líneas de 84-102 caracteres). */
.momento p, .certamen__texto > p:not(.certamen__lema):not(.certamen__acciones), .nivel__texto { max-width: 54ch; }

/* ====================================================================
   v9 — LO QUE PIDIÓ LA CLIENTA EN LOS AUDIOS (2026-10-18)

   «Es el evento de mi fundación… que hable del certamen, que informe de qué
   se trate… las fechas del evento y todos los detallitos… lo más sencilla.»
   La fundación presenta desde la portada y su banda sube al 02; el 01 dice
   qué es la gala en palabras llanas; el calendario sube al 03 con la fecha
   y el estado de cada paso; «Quiénes somos» sale (su esencia va a las
   preguntas). Respaldo: respaldos/2026-10-18-v9-antes/.
   ==================================================================== */

/* El nombre completo de la fundación, bajo «Un evento de ASOCOLCUL». */
.fundacion__nombre { max-width: 34ch; margin: -6px 0 22px; font-family: var(--f-titulo); font-style: italic; font-weight: 500; font-variation-settings: 'opsz' 12; font-size: clamp(1.2rem, 1.9vw, 1.6rem); line-height: 1.3; color: var(--vino-hondo); }
.fundacion__nombre span { display: block; margin-top: 8px; font-family: var(--f); font-style: normal; font-stretch: 78%; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: .72rem; line-height: 1.5; color: var(--vino); }

/* Las fechas: cada paso dice cuándo y en qué va. */
.acto .acto__fecha { margin: 0 0 6px; font-family: var(--f); font-stretch: 78%; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: .78rem; line-height: 1.4; color: var(--oro-claro); }
.acto__num--pasado { border-color: rgba(237, 221, 225, .45); color: #EDDDE1; }
.acto__num--oro { border-color: var(--oro); background: var(--oro); color: var(--vino-hondo); }
.acto--final .acto__fecha { color: var(--oro-brillo); }

/* ====================================================================
   v10 — VIDEO REAL DE LA GALA EN LA PORTADA (2026-10-18)

   Felipe: la escena de IA «me gusta, pero es muy genérica; algo más como un
   video de la gala». Ahora el fondo es la Gala Night 2024 de verdad (video de la
   fundación, con su logo como marca de agua; 13,5 s en bucle, corregido hacia
   vino y oro). El póster es un cuadro del propio video, así el fundido no salta.
   Sobre gente real sobran los haces y el parpadeo de la escena de IA; se quedan
   el confeti y el velo. Respaldo: respaldos/2026-10-18-v10-antes/.
   ==================================================================== */
.escena__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s var(--suave); }
.escena__video.esta-sonando { opacity: 1; }
html.js .portada .escena__img { animation: none; }
.portada .confeti { opacity: .7; }
/* En celular el velo de la escena de IA tapaba casi todo el video: se abre arriba,
   donde van el título y la candidata, y se cierra antes de la bajada y los botones. */
@media (max-width: 640px) {
  .portada .escena__fondo::after { background: linear-gradient(180deg, rgba(14, 2, 6, .62) 0%, rgba(14, 2, 6, .32) 10%, rgba(14, 2, 6, .4) 24%, rgba(14, 2, 6, .62) 37%, rgba(14, 2, 6, .86) 52%, rgba(14, 2, 6, .96) 100%); }
}

/* ====================================================================
   v10b — «QUIÉN ORGANIZA» EN NEGRO (2026-10-18)

   Felipe: «esta sección no me gusta, me gustaría que fuera negra, se vería
   más elegante». La banda dorada pasa a negro de gala: filetes de oro arriba
   y abajo (la separan de «Las fechas», que también es oscura), el punteado y
   un halo en oro muy bajo, el medallón con aro dorado y el nombre en oro.
   ==================================================================== */
.fundacion { color: var(--blanco); background: radial-gradient(ellipse 55% 85% at 14% 50%, rgba(201, 162, 75, .14), rgba(201, 162, 75, 0) 62%), var(--negro); border-block: 1px solid rgba(201, 162, 75, .5); }
.fundacion::before { background-image: radial-gradient(rgba(232, 211, 156, .13) 1px, rgba(232, 211, 156, 0) 1.3px); }
.fundacion::after { content: ''; position: absolute; inset: 7px 0; border-block: 1px solid rgba(201, 162, 75, .22); pointer-events: none; }
.fundacion__medallon { background: radial-gradient(circle at 50% 35%, #FFFFFF, var(--papel) 70%); box-shadow: 0 0 0 5px var(--negro), 0 0 0 6px var(--oro), 0 0 0 15px rgba(201, 162, 75, .07), 0 0 0 16px rgba(201, 162, 75, .4), 0 30px 70px rgba(0, 0, 0, .6); }
.fundacion__texto h2 { color: var(--blanco); }
.fundacion__texto h2 em { color: var(--oro-claro); }
.fundacion__nombre { color: var(--oro-claro); }
.fundacion__nombre span { color: var(--oro); }
.fundacion__texto p:not(.rotulo):not(.fundacion__nombre) { color: var(--claro-apagado); }
.fundacion__texto strong { color: var(--blanco); }
.fundacion .enlace-flecha { color: var(--oro-claro); }
.fundacion .enlace-flecha:hover, .fundacion .enlace-flecha:focus-visible { color: var(--blanco); }
/* `.fundacion__texto p` (texto vino de la banda dorada) les ganaba al rótulo y al nombre: se suben de especificidad. */
.fundacion__texto .rotulo { color: var(--oro); }
.fundacion__texto .rotulo span { color: var(--oro-claro); }
.fundacion__texto .fundacion__nombre { color: var(--oro-claro); }

/* 2026-10-19 — patrocinios por teléfono (+1 214 229 7511): el número a la vista bajo los botones,
   para quien está en un computador y no puede pulsar «llamar». */
.patrocinio__linea { margin: 18px 0 0; font-family: var(--f); font-stretch: 85%; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; color: var(--claro-apagado); }
.patrocinio__linea a { color: var(--oro-claro); text-decoration: none; border-bottom: 1px solid currentColor; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.patrocinio__linea a:hover { color: var(--blanco); }
.cierre__contacto a[href^="tel:"] { white-space: nowrap; }

/* ====================================================================
   v11 — PULIDO VISUAL (2026-10-19)

   Encargo de Felipe en 9 puntos: más profesional y de lujo SIN tocar textos,
   enlaces ni el orden de las secciones; misma paleta (vino, oro, crema) y
   mismas letras. Todo va aquí, al final, para sobrescribir sin reescribir lo
   de arriba; cada media query de este bloque repite lo que hace falta porque
   una regla de :root posterior gana también dentro de las media queries viejas.
   Respaldo: respaldos/2026-10-19-v11-antes/.
   ==================================================================== */

/* 3 + 4. Escala tipográfica y ritmo únicos para todas las secciones. */
:root {
  --t-h2: clamp(2.3rem, 4.4vw, 4rem);
  --t-h3: clamp(1.4rem, 1.9vw, 1.8rem);
  --t-eyebrow: .74rem;
  --t-eyebrow-espacio: .18em;
  --t-body: 1.0625rem;
  --t-chico: .95rem;
  --pliego: clamp(80px, 10vw, 140px);
  --alto-cabecera: 88px;
  --claro-apagado: #ECDDE1;              /* 8. texto pequeño sobre oscuro: más claro, holgado sobre AA */
}
html { scroll-padding-top: calc(var(--alto-cabecera) + 16px); }
body { font-size: var(--t-body); }

.titulo-grande, .manifiesto, .fundacion__texto h2, .invitacion__titulo, .cierre__frase { font-size: var(--t-h2); line-height: 1.04; }
.titulo-medio, .momento h3, .certamen h3, .nivel h3, .acto h3 { font-size: var(--t-h3); line-height: 1.15; }
.tiquete__nombre, .tiquete--vip .tiquete__nombre { font-size: calc(var(--t-h3) * 1.7); }

.rotulo, .portada__pre, .momento__tag, .elenco__pie small, .tiquete__evento, .nivel__pre, .patrocinio__usos-rotulo,
.patrocinio__panel-rotulo, .carta__para, .ficha__rotulo, .creditos dt, .invitacion__dato, .acto .acto__fecha,
.fundacion__nombre span, .cita__rotulo, .cabecera__fecha, .portada__lema, .lamina figcaption {
  font-size: var(--t-eyebrow); letter-spacing: var(--t-eyebrow-espacio); font-weight: 600;
}
.portada__bajada, .noche__bajada, .seccion-cabeza__texto, .programa__intro, .invitacion__texto, .fundacion__texto p:not(.rotulo):not(.fundacion__nombre),
.faq__intro, .pregunta__cuerpo p, .viaje__intro, .patrocinio__usos li { font-size: var(--t-body); }
.momento p, .certamen__texto > p:not(.certamen__lema):not(.certamen__acciones), .nivel__texto, .acto p, .tiquete__incluye li, .nivel__incluye li { font-size: var(--t-chico); }

.certamenes { padding-bottom: var(--pliego); }
.certamenes__cabeza { padding-top: var(--pliego); }
.cierre { padding: var(--pliego) 0; }
/* El hueco bajo los tres momentos (I, II, III) antes de la banda de ASOCOLCUL. */
.noche { padding-bottom: clamp(48px, 5vw, 72px); }

/* 1. Cabecera: logo un 32 % más grande, en vino sobre las secciones claras. */
.cabecera__logo img { width: 156px; height: auto; }
.cabecera__logo-vino { display: none; }
.cabecera.sobre-claro:not(.es-arriba):not(.menu-abierto) .cabecera__logo-oro,
.pagina-legal .cabecera:not(.menu-abierto) .cabecera__logo-oro { display: none; }
.cabecera.sobre-claro:not(.es-arriba):not(.menu-abierto) .cabecera__logo-vino,
.pagina-legal .cabecera:not(.menu-abierto) .cabecera__logo-vino { display: block; }
.cabecera__nav a { font-weight: 600; font-size: .9rem; }
.cabecera.es-arriba .cabecera__nav a { text-shadow: 0 1px 10px rgba(14, 2, 6, .7); }
.cabecera.sobre-claro:not(.es-arriba) .cabecera__nav a { color: var(--vino-hondo); }
/* 6. El botón de la cabecera se queda en contorno: el dorado lleno es para «Quiero asistir» de la portada. */
.cabecera__cta, .cabecera:not(.es-arriba) .cabecera__cta { background: transparent; border: 1px solid var(--oro); color: var(--oro-claro); }
.cabecera.sobre-claro:not(.es-arriba) .cabecera__cta, .pagina-legal .cabecera__cta { background: transparent; border-color: var(--oro-hondo); color: var(--vino-hondo); }
.cabecera__cta:hover, .cabecera:not(.es-arriba) .cabecera__cta:hover, .pagina-legal .cabecera__cta:hover { background: var(--oro); border-color: var(--oro); color: var(--vino-hondo); }

/* 2. Portada: velo firme a la izquierda (el título no se monta en las caras) y ficha en negro con filo de oro. */
.portada .escena__fondo::after { background: linear-gradient(90deg, rgba(14, 2, 6, .9) 0%, rgba(14, 2, 6, .85) 28%, rgba(14, 2, 6, .55) 46%, rgba(14, 2, 6, .18) 66%, rgba(14, 2, 6, 0) 82%), linear-gradient(180deg, rgba(14, 2, 6, .55) 0%, rgba(14, 2, 6, 0) 22%, rgba(14, 2, 6, 0) 58%, rgba(14, 2, 6, .92) 100%); }
.ficha__celda { background: rgba(14, 2, 6, .62); }
.ficha__celda--fecha { border: 1px solid var(--oro); background: rgba(14, 2, 6, .62); color: var(--crema); box-shadow: none; }
.ficha__celda--fecha .ficha__rotulo { color: var(--oro); }
.ficha__celda--fecha .ficha__dato { font-size: clamp(1.6rem, 2.1vw, 2.1rem); color: var(--blanco); }
.ficha__celda--fecha .ficha__nota, .ficha__nota { color: var(--claro-apagado); }
.cuenta span { border: 1px solid rgba(232, 211, 156, .28); background: rgba(255, 244, 214, .04); }
.cuenta b { color: var(--oro-claro); }
.cuenta i { color: var(--claro-apagado); }
.cuenta__pie { color: var(--oro); }

/* 3. La caligrafía queda solo en la portada y en «Programa»; el resto pasa a Bodoni itálica. */
.tiquete__script, .invitacion__script, .reservado__script { font-family: var(--f-titulo); font-style: italic; font-weight: 500; font-variation-settings: 'opsz' 12; letter-spacing: 0; }
.tiquete__script { margin-bottom: 2px; font-size: 1.45rem; line-height: 1.2; }
.invitacion__script { margin-bottom: 6px; font-size: clamp(1.35rem, 1.9vw, 1.7rem); line-height: 1.25; }
.reservado__script { font-size: clamp(2.1rem, 3vw, 2.7rem); line-height: 1.1; }

/* 4. Boletos: misma altura, precio y botón alineados abajo (el VIP ya no tiene hueco en medio). */
.boletos__rejilla { align-items: stretch; }
.tiquete-sombra { display: flex; }
.tiquete-sombra > .tiquete { flex: 1; }
.tiquete, .tiquete--vip { min-height: 0; }
.tiquete__cuerpo { padding-top: 34px; }

/* 4. Los certámenes ocupan todo el ancho del contenedor también cuando van en una columna. */
.certamen { max-width: none; }

/* 5. Medallón de ASOCOLCUL con aire para sus aros; números romanos en Bodoni llena, no en contorno. */
.fundacion__medallon { margin: 18px; }
.certamen__numero { color: rgba(232, 211, 156, .3); -webkit-text-stroke: 0; font-weight: 500; font-variation-settings: 'opsz' 16; letter-spacing: -.02em; }

/* 6. Dorado lleno solo en el botón principal; los secundarios, en contorno de oro de 1 px. */
.boton { border-width: 1px; }
.boton--claro { background: transparent; border-color: var(--oro); color: var(--crema); }
.boton--claro:hover { background: rgba(201, 162, 75, .16); border-color: var(--oro-claro); color: var(--blanco); }
.boton--vino { background: transparent; border-color: var(--oro-hondo); color: var(--vino-hondo); }
.boton--vino:hover { background: var(--vino-hondo); border-color: var(--vino-hondo); color: var(--blanco); box-shadow: none; }
.programa .boton--oro, .tiquete .boton--oro, .nivel .boton--oro { background: transparent; border-color: var(--oro); color: var(--oro-claro); box-shadow: none; }
.programa .boton--oro::after, .tiquete .boton--oro::after, .nivel .boton--oro::after { display: none; }
.programa .boton--oro:hover, .tiquete .boton--oro:hover, .nivel .boton--oro:hover { background: rgba(201, 162, 75, .16); border-color: var(--oro-claro); color: var(--blanco); box-shadow: none; }
.cinta { background: var(--negro); color: var(--oro-claro); box-shadow: inset 0 1px 0 rgba(201, 162, 75, .45), inset 0 -1px 0 rgba(201, 162, 75, .45); }
.cinta__pista > * { font-weight: 600; }
.cinta__pista > i { color: var(--oro); }

/* 7. Galería: todas las fotos en 4:5 con el mismo marco y pies iguales (tres por fila). */
.elenco { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.elenco__item--destacado { grid-column: auto; grid-row: auto; }
.elenco__item--destacado .elenco__foto { flex: none; aspect-ratio: 4 / 5; }
.elenco__item--destacado .elenco__foto img { object-position: 50% 18%; }
.elenco__item--destacado .elenco__pie b { font-size: 1.22rem; font-style: normal; font-weight: 600; font-variation-settings: 'opsz' var(--opsz-texto); }

/* 8. Texto pequeño sobre oscuro y pie. */
.acto p, .viaje__intro, .pie, .pie__edicion { color: var(--claro-apagado); }
.acto p { text-shadow: 0 1px 8px rgba(14, 2, 6, .6); }
.pie__legal { color: var(--oro-claro); }
.pie__marca { -webkit-text-stroke: 1.2px rgba(232, 211, 156, .62); }
.pie__marca em { -webkit-text-stroke-color: rgba(232, 211, 156, .9); }

/* Tablet y celular: lo mismo, repetido donde las reglas viejas de cada media query mandarían. */
@media (max-width: 980px) {
  :root { --alto-cabecera: 76px; }
  .elenco { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  :root { --alto-cabecera: 72px; }
  body { font-size: 1rem; }
  .cabecera__logo img { width: 132px; }
  .portada .escena__fondo::after { background: linear-gradient(180deg, rgba(14, 2, 6, .64) 0%, rgba(14, 2, 6, .4) 10%, rgba(14, 2, 6, .5) 24%, rgba(14, 2, 6, .66) 37%, rgba(14, 2, 6, .86) 52%, rgba(14, 2, 6, .96) 100%); }
  .manifiesto { font-size: var(--t-h2); }
  .elenco { grid-template-columns: 1fr 1fr; }
  .elenco__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .elenco__item--destacado .elenco__pie b { font-size: 1.05rem; }
  .cuenta b { font-size: 1.6rem; }
  .visor__nav { width: 44px; height: 44px; }
}
/* 2. (ajuste) El velo sostiene el 85 % hasta pasado el título y se abre después, a la derecha. */
.portada .escena__fondo::after { background: linear-gradient(90deg, rgba(14, 2, 6, .9) 0%, rgba(14, 2, 6, .85) 34%, rgba(14, 2, 6, .72) 50%, rgba(14, 2, 6, .36) 62%, rgba(14, 2, 6, .06) 78%, rgba(14, 2, 6, 0) 88%), linear-gradient(180deg, rgba(14, 2, 6, .55) 0%, rgba(14, 2, 6, 0) 22%, rgba(14, 2, 6, 0) 58%, rgba(14, 2, 6, .92) 100%); }
@media (max-width: 640px) {
  .portada .escena__fondo::after { background: linear-gradient(180deg, rgba(14, 2, 6, .64) 0%, rgba(14, 2, 6, .4) 10%, rgba(14, 2, 6, .5) 24%, rgba(14, 2, 6, .66) 37%, rgba(14, 2, 6, .86) 52%, rgba(14, 2, 6, .96) 100%); }
}
/* 4. Voces en tableta y celular: el último video no se queda solo con un hueco al lado. */
@media (max-width: 980px) { .voces__rejilla > :last-child:nth-child(even) { grid-column: 1 / -1; } }

/* ====================================================================
   v12 — SEGUNDA RONDA DE PULIDO (2026-10-19)

   Segundo encargo de Felipe (8 puntos): acabado de evento de lujo, nivel
   agencia, con las mismas reglas que la v11 —ni textos, ni enlaces, ni orden
   de secciones; misma paleta y mismas letras—. Va al final y usa las
   variables del sistema que se declaran aquí. Respaldo:
   respaldos/2026-10-19-v12-antes/.
   ==================================================================== */

/* 2. Sistema: un radio, un filo dorado de 1 px, dos sombras, espacios de 8 en 8. */
:root {
  --radio: 2px;
  --filo: 1px;
  --borde-oro: rgba(201, 162, 75, .38);
  --borde-oro-fuerte: var(--oro);
  --sombra-1: 0 10px 30px rgba(36, 6, 15, .1);
  --sombra-2: 0 24px 56px rgba(36, 6, 15, .22);
  --sombra-2-oscura: 0 26px 60px rgba(0, 0, 0, .5);
  --e-1: 8px; --e-2: 16px; --e-3: 24px; --e-4: 32px; --e-5: 40px; --e-6: 48px; --e-7: 56px; --e-8: 64px;
  --medida: 62ch;
  --crema-70: rgba(243, 227, 231, .7);
  --transicion: 250ms;
  --ritmo-entrada: 80ms;
  --alto-cabecera-compacta: 68px;
  --logo-cabecera: 156px;
  --logo-cabecera-compacto: 120px;
}

.certamen, .certamen__media, .nivel, .ficha__celda--fecha, .patrocinio__panel, .acto, .voz, .elenco__foto,
.invitacion, .lamina, .programa-mano, .reservado__cara, .cuenta span, .cabecera__cta, .boton { border-radius: var(--radio); }
.momento::before { height: var(--filo); }
.tiquete__talon::before { border-top-width: var(--filo); }
.lamina { box-shadow: var(--sombra-2); }
.invitacion { box-shadow: var(--sombra-2); }
.nivel--principal, .programa-mano { box-shadow: var(--sombra-2-oscura), 0 0 0 var(--filo) var(--borde-oro); }

/* 2. Eyebrows idénticos: tamaño, tracking, filete de 56 px a la derecha y 24 px hasta el título. */
.rotulo { gap: var(--e-2); margin: 0 0 var(--e-3); }
.rotulo::after { width: var(--e-7); height: var(--filo); opacity: .6; }
.seccion-cabeza--centro .rotulo, .invitacion .rotulo { margin-bottom: var(--e-3); }
.seccion-cabeza--centro .rotulo::before { display: none; }
.invitacion .rotulo::after { display: block; }

/* 2. Misma retícula: la cabecera de Boletos se alinea a la izquierda como todas las demás. */
.boletos .seccion-cabeza--centro { grid-template-columns: minmax(0, 1fr); justify-items: start; max-width: none; margin-inline: 0; text-align: left; }
.boletos .seccion-cabeza--centro .rotulo { justify-content: flex-start; }
.boletos__nota { max-width: var(--medida); text-align: left; }
.acto p, .carta__frase, .cierre__contacto { max-width: var(--medida); }
.seccion-cabeza { margin-bottom: var(--e-6); }

/* 1. Contador en oro; etiquetas en crema al 70 %. 4. El contador, más protagonista. */
.cuenta b { font-size: clamp(2rem, 2.7vw, 2.75rem); background: var(--degradado-oro-titular); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.cuenta i { color: var(--crema-70); }
.ficha__celda--fecha { padding: var(--e-3) var(--e-3) var(--e-2); }

/* 1. Marca de agua del pie: trazo al 50 % y un brillo que la recorre una sola vez al entrar en pantalla. */
.pie__marca { -webkit-text-stroke: var(--filo) rgba(232, 211, 156, .5); background: linear-gradient(100deg, rgba(255, 244, 214, 0) 42%, rgba(255, 244, 214, .45) 50%, rgba(255, 244, 214, 0) 58%) 140% 0 / 300% 100% no-repeat; -webkit-background-clip: text; background-clip: text; }
.pie__marca em { -webkit-text-stroke-color: rgba(232, 211, 156, .55); }
.pie__marca.brilla { animation: brillo-marca 2.6s var(--suave) .2s 1 forwards; }
@keyframes brillo-marca { from { background-position: 140% 0; } to { background-position: -40% 0; } }

/* 1. Certámenes: el contenido se centra junto a la foto, la altura la marca la foto y el numeral va
      arriba a la derecha, a la altura del borde superior de la foto. */
.certamen { align-items: center; }
.certamen__texto { position: static; }
.certamen__numero { top: 26px; right: 26px; font-size: clamp(3.4rem, 5.4vw, 5rem); line-height: .78; }

/* 3. Cabecera: cambio de tono en 120 ms sin estado intermedio; se compacta al bajar; subrayado desde el centro y enlace activo. */
.cabecera { transition: background-color 120ms linear, color 120ms linear, border-color 120ms linear, box-shadow 120ms linear; }
.cabecera__fila { transition: height .3s var(--suave); }
.cabecera__logo img { width: var(--logo-cabecera); transition: width .3s var(--suave); }
.cabecera:not(.es-arriba) .cabecera__fila { height: var(--alto-cabecera-compacta); }
.cabecera:not(.es-arriba) .cabecera__logo img { width: var(--logo-cabecera-compacto); }
.cabecera__nav a::after { height: var(--filo); transform-origin: center; transition: transform var(--transicion) var(--suave); }
.cabecera__nav a.es-activo::after { transform: scaleX(1); }
.cabecera__nav a.es-activo { color: var(--oro-claro); }
.cabecera.sobre-claro:not(.es-arriba) .cabecera__nav a.es-activo { color: var(--vino); }

/* 4. Portada: viñeta suave, grano fino al 3,5 % y velo que sostiene la ficha de la derecha. */
.portada .escena__fondo::after { background: radial-gradient(ellipse 120% 95% at 50% 45%, rgba(14, 2, 6, 0) 55%, rgba(14, 2, 6, .55) 100%), linear-gradient(90deg, rgba(14, 2, 6, .9) 0%, rgba(14, 2, 6, .85) 34%, rgba(14, 2, 6, .72) 50%, rgba(14, 2, 6, .36) 62%, rgba(14, 2, 6, .06) 78%, rgba(14, 2, 6, 0) 88%), linear-gradient(180deg, rgba(14, 2, 6, .55) 0%, rgba(14, 2, 6, 0) 22%, rgba(14, 2, 6, 0) 44%, rgba(14, 2, 6, .92) 100%); }
.grano { display: none; }
.portada .escena__fondo::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: url("/assets/img/grano.png"); opacity: .035; }
/* 4. Confeti a la mitad (el JS pinta la mitad de trozos) y fuera de la zona del título. */
.portada .confeti { opacity: .35; -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 54%, #000 72%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 54%, #000 72%); }
/* 4. Ficha: el contador manda; «Dónde», «La noche» y «Organiza», sin fondo y con filetes de 1 px. */
.ficha { gap: 0 var(--e-3); }
.ficha__celda--fecha { margin-bottom: var(--e-3); }
.ficha__celda:not(.ficha__celda--fecha) { padding: var(--e-2) 0; border: 0; border-top: var(--filo) solid var(--borde-oro); background: transparent; text-shadow: 0 1px 12px rgba(14, 2, 6, .9); }
.ficha__celda--ancha { border-bottom: var(--filo) solid var(--borde-oro); }
/* 4. Entrada escalonada: eyebrow → caligrafía → «Gala Night» → «2026» → párrafo → botones (80 ms entre cada uno). */
html.js .portada__titulo .linea > span { opacity: 0; transform: translateY(16px); animation: entra .9s var(--suave) forwards; }
html.js .portada__texto > :not(.portada__titulo) { transform: translateY(16px); animation-duration: .9s; }
html.js .portada__pre { animation-delay: .2s; }
html.js .portada__script { animation-delay: calc(.2s + var(--ritmo-entrada)); }
html.js .portada__titulo .linea:nth-child(1) > span { animation-delay: calc(.2s + var(--ritmo-entrada) * 2); }
html.js .portada__titulo .linea:nth-child(2) > span { animation-delay: calc(.2s + var(--ritmo-entrada) * 3); }
html.js .portada__bajada { animation-delay: calc(.2s + var(--ritmo-entrada) * 4); }
html.js .portada__acciones { animation-delay: calc(.2s + var(--ritmo-entrada) * 5); }
html.js .ficha { animation-delay: calc(.2s + var(--ritmo-entrada) * 6); }
html.js .portada__pie { animation-delay: calc(.2s + var(--ritmo-entrada) * 7); }

/* 5. Botones: 250 ms; el principal con su brillo diagonal; los secundarios se llenan de oro al 10 %; :active a .98. */
.boton { transition: background-color var(--transicion), background-position .6s var(--suave), border-color var(--transicion), color var(--transicion), transform var(--transicion) var(--suave), box-shadow var(--transicion); }
.boton:active, .cabecera__cta:active { transform: scale(.98); }
.boton--claro:hover, .programa .boton--oro:hover, .tiquete .boton--oro:hover, .nivel .boton--oro:hover { background: rgba(201, 162, 75, .1); border-color: var(--oro-claro); color: var(--blanco); }
.boton--vino:hover { background: rgba(201, 162, 75, .1); border-color: var(--oro); color: var(--vino-hondo); }
.cabecera__cta { transition: background-color var(--transicion), color var(--transicion), border-color var(--transicion), transform var(--transicion); }
.cabecera__cta:hover, .cabecera:not(.es-arriba) .cabecera__cta:hover, .pagina-legal .cabecera__cta:hover { background: rgba(201, 162, 75, .1); border-color: var(--oro); color: inherit; }
.cabecera.sobre-claro:not(.es-arriba) .cabecera__cta:hover, .pagina-legal .cabecera__cta:hover { color: var(--vino-hondo); }
.cabecera:not(.sobre-claro) .cabecera__cta:hover, .cabecera.es-arriba .cabecera__cta:hover { color: var(--oro-claro); }

/* 5. Foco visible en todo lo que se pulsa: anillo dorado de 2 px a 3 px. */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }

/* 5. Tarjetas: elevación de 4 px y sombra 2; la imagen hace zoom de 1,04 dentro de su marco. */
.tiquete-sombra { transition: transform var(--transicion) var(--suave), filter var(--transicion); }
.tiquete-sombra:hover { transform: translateY(-4px); filter: drop-shadow(0 30px 44px rgba(36, 6, 15, .24)); }
.acto, .nivel, .voz { transition: transform var(--transicion) var(--suave), box-shadow var(--transicion), border-color .5s; }
.acto:hover, .nivel:hover, .voz:hover { transform: translateY(-4px); box-shadow: var(--sombra-2-oscura); }
.acto:hover picture, .acto:hover video, .voz:hover img, .certamen:hover .certamen__fondo img { transform: scale(1.04); }
.elenco__foto { overflow: hidden; border: 8px solid var(--blanco); box-shadow: var(--sombra-1); transition: transform var(--transicion) var(--suave), box-shadow var(--transicion); }
.elenco__foto::after { display: none; }
.elenco__foto img { inset: 0; width: 100%; height: 100%; transition: transform .7s var(--suave); }
.elenco__item:hover .elenco__foto, .elenco__item:focus-visible .elenco__foto { transform: translateY(-4px); box-shadow: var(--sombra-2); outline: var(--filo) solid var(--oro); outline-offset: 5px; }
.elenco__item:hover .elenco__foto img, .elenco__item:focus-visible .elenco__foto img { transform: scale(1.04); }

/* 5. Un mismo revelado para fotos de distintas fuentes: un punto más cálido y con algo de contraste. */
.elenco__foto img, .lamina img, .certamen__fondo img, .voz img, .acto picture img { filter: saturate(.94) contrast(1.05) sepia(.07); }

/* 5. Costura entre secciones: filete dorado con un rombo al centro, en lugar del corte seco. */
.costura { position: relative; z-index: 3; height: 0; pointer-events: none; }
.costura::before { content: ''; position: absolute; left: var(--lado); right: var(--lado); top: 0; height: var(--filo); transform: translateY(-50%); background: linear-gradient(90deg, rgba(201, 162, 75, 0), rgba(201, 162, 75, .7) 18%, rgba(201, 162, 75, .7) 82%, rgba(201, 162, 75, 0)); }
.costura span { position: absolute; left: 50%; top: 0; width: 9px; height: 9px; background: var(--oro); transform: translate(-50%, -50%) rotate(45deg); box-shadow: 0 0 0 5px rgba(201, 162, 75, .14); }

/* 5. Visor y reproductor: íconos de línea en dorado dentro de círculos de 44 px. */
.visor__cerrar, .visor__nav, .cine__cerrar { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: var(--filo) solid rgba(232, 211, 156, .6); border-radius: 50%; background: rgba(14, 2, 6, .45); color: var(--oro-claro); font-size: 0; line-height: 0; transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion); }
.visor__cerrar:hover, .visor__nav:hover, .cine__cerrar:hover { background: rgba(201, 162, 75, .14); border-color: var(--oro); color: var(--blanco); }
.visor__cerrar svg, .visor__nav svg, .cine__cerrar svg { width: 20px; height: 20px; }

/* 5. Cursor propio solo con ratón: fuera en pantallas táctiles. */
@media (hover: none), (pointer: coarse) {
  .cursor { display: none !important; }
  html.cursor-activo, html.cursor-activo a, html.cursor-activo button, html.cursor-activo summary { cursor: auto; }
}

/* 6. Boletos: el VIP un 3 % mayor, con filo y brillo dorados. */
.tiquete-sombra--vip { transform: scale(1.03); filter: drop-shadow(0 30px 50px rgba(36, 6, 15, .34)) drop-shadow(0 0 18px rgba(201, 162, 75, .28)); }
.tiquete-sombra--vip:hover { transform: scale(1.03) translateY(-4px); filter: drop-shadow(0 34px 56px rgba(36, 6, 15, .38)) drop-shadow(0 0 22px rgba(201, 162, 75, .34)); }
.tiquete--vip::before { border-color: var(--oro); }

/* 6. White Party: sección más baja para que no compita con la gala. */
.white { min-height: min(70vh, 640px); }

/* 6. Preguntas: apertura con altura y opacidad; el + gira a ×. */
.pregunta::details-content { opacity: 0; transition: block-size .5s var(--suave), opacity .4s var(--suave), content-visibility .5s allow-discrete; }
.pregunta[open]::details-content { opacity: 1; }
.pregunta summary::after { transition: transform .35s var(--suave), background-color var(--transicion); }
.pregunta[open] summary::after { transform: rotate(45deg); }

/* 6. Patrocinio: el principal con filo en degradado de oro; los demás, filo simple. */
.nivel--principal { border: var(--filo) solid transparent; background: linear-gradient(165deg, rgba(91, 15, 38, .96), rgba(14, 2, 6, .96)) padding-box, var(--degradado-oro) border-box; }
.nivel:not(.nivel--principal) { border: var(--filo) solid var(--borde-oro); }

/* 7. Contraste AA: la palabra itálica de los boletos y de la invitación pasa al dorado de tinta. */
.tiquete:not(.tiquete--vip) .tiquete__script, .invitacion__script { color: var(--oro-tinta); }

/* 7. Movimiento reducido: sin brillo del pie, sin elevaciones animadas ni compactación con transición. */
@media (prefers-reduced-motion: reduce) {
  .pie__marca.brilla { animation: none; }
  .tiquete-sombra:hover, .acto:hover, .nivel:hover, .voz:hover { transform: none; }
  .tiquete-sombra--vip, .tiquete-sombra--vip:hover { transform: scale(1.03); }
  html.js .portada__titulo .linea > span { opacity: 1; transform: none; }
}

/* 6. Las fechas en tableta y celular: tarjetas bajas (foto 4:3 y texto debajo) e indicador dorado de avance. */
@media (max-width: 980px) {
  :root { --alto-cabecera-compacta: 64px; }
  .viaje__progreso { display: block; width: 100%; max-width: 320px; margin: var(--e-1) 0 0; }
  .acto { display: flex; flex-direction: column; flex-basis: min(76vw, 320px); height: auto; min-height: 0; background: var(--noche); border: var(--filo) solid var(--borde-oro); }
  .acto::before { display: none; }
  .acto picture, .acto video { position: relative; inset: auto; z-index: 0; flex: none; width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .acto picture img { height: 100%; }
  .acto__num { z-index: 1; }
  .acto__texto { position: relative; flex: 1; padding: var(--e-2) var(--e-3) var(--e-3); }
  .acto--final { outline-offset: -6px; }
  .certamen__numero { top: 20px; right: 20px; }
  .ficha__celda:not(.ficha__celda--fecha) { background: rgba(14, 2, 6, .35); padding-inline: var(--e-2); }
}
@media (max-width: 640px) {
  :root { --alto-cabecera-compacta: 60px; --logo-cabecera: 132px; --logo-cabecera-compacto: 104px; }
  .portada .confeti { -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 44%, #000 62%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 44%, #000 62%); }
  .elenco__foto { border-width: 6px; }
  .elenco__foto img { inset: 0; width: 100%; height: 100%; }
  .acto { flex-basis: 80vw; height: auto; }
  .cuenta b { font-size: 1.75rem; }
}
/* 6. (ajuste) La foto empujaba la caja: el 4:3 se fija con la imagen en absoluto dentro del <picture>. */
@media (max-width: 980px) {
  .acto picture { overflow: hidden; min-height: 0; }
  .acto picture img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .acto video { object-fit: cover; }
}
/* 8. El botón de la cabecera medía 43 px: mínimo táctil de 44. */
.cabecera__cta { min-height: 44px; }

/* ====================================================================
   v12b — cuatro ajustes (2026-10-19). Respaldo: respaldos/2026-10-19-v12b-antes/.
   ==================================================================== */
/* 1. Pie: el trazo del «Gala Night 2026» gigante, al 70 % para que se lea claro (el brillo de una vez se mantiene). */
.pie__marca { -webkit-text-stroke-color: rgba(232, 211, 156, .7); }
.pie__marca em { -webkit-text-stroke-color: rgba(232, 211, 156, .78); }

/* 2. Patrocinador principal: filo de 1 px en degradado de oro con un pseudo-elemento enmascarado;
      Aliado y Mecenas se quedan con el filo simple. */
.nivel--principal { position: relative; border: var(--filo) solid transparent; background: linear-gradient(165deg, rgba(91, 15, 38, .96), rgba(14, 2, 6, .96)); }
.nivel--principal::before { content: ''; position: absolute; inset: calc(var(--filo) * -1); padding: var(--filo); border-radius: inherit; background: var(--degradado-oro); pointer-events: none;
  -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); }
.nivel--principal:hover { border-color: transparent; }

/* 3. White Party: la sección mide ~70 % de la pantalla por altura mínima, no por relleno; la tarjeta, centrada en vertical. */
.white { min-height: 70vh; padding-block: var(--e-6); align-items: center; }
@media (max-width: 980px) { .white { min-height: 0; padding-block: var(--pliego); } }

/* 4. Portada: aire a la derecha del título para la cola del «2026» en itálica. */
.portada__titulo { padding-inline-end: .1em; }

/* ====================================================================
   v13 — TERCERA RONDA DE PULIDO (2026-10-19)

   Mismas reglas: ni textos, ni enlaces, ni orden de secciones. Puntos 1-5
   de diseño; los 6-7 (videos e imágenes) viven en el HTML, el JS y los
   archivos de /assets. Respaldo: respaldos/2026-10-19-v13-antes/.
   ==================================================================== */

/* 1. ASOCOLCUL: disco marfil (no blanco puro), aro dorado de 1 px y sombra interior suave. */
.fundacion__medallon { background: var(--marfil); box-shadow: inset 0 2px 14px rgba(58, 9, 24, .16), inset 0 0 0 var(--filo) rgba(255, 255, 255, .6), 0 0 0 var(--filo) var(--borde-oro), 0 0 0 var(--e-2) rgba(201, 162, 75, .04), 0 28px 60px rgba(0, 0, 0, .55); }

/* 2. «En qué se invierte cada aporte»: el mismo panel y la misma tabla de dos columnas que «Temporada 2026 · la hacen posible». */
.patrocinio__pie { align-items: start; }
.patrocinio__usos { padding: 30px 32px 18px; border: var(--filo) solid rgba(232, 211, 156, .35); border-radius: var(--radio); background: rgba(14, 2, 6, .82); }
.patrocinio__usos-rotulo { margin: 0 0 12px; }
.patrocinio__usos ul { border-top: var(--filo) solid rgba(232, 211, 156, .35); }
.patrocinio__usos li { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--e-2); align-items: baseline; padding: 13px 0; border-top: 0; border-bottom: var(--filo) solid rgba(232, 211, 156, .16); color: var(--claro-apagado); font-size: var(--t-chico); line-height: 1.5; }
.patrocinio__usos b { margin: 0; font-family: var(--f-titulo); font-weight: 600; font-size: 1.08rem; line-height: 1.3; color: var(--blanco); }

/* 3. Cierre: el mismo rótulo numerado que las demás secciones (solo «11» y el filete). */
.cierre__rotulo { margin-bottom: var(--e-3); }

/* 4. Cierre y pie, todo centrado (como el logo, el lema y la marca de agua) y con menos aire entre el contacto y el «Gala Night 2026». */
.cierre { padding-bottom: var(--e-6); }
.cierre__pie { margin-top: var(--e-7); }
.pie { padding-top: var(--e-4); }
.pie__marca { margin-bottom: var(--e-4); }
.pie__fila { flex-direction: column; align-items: center; justify-content: center; gap: var(--e-2); text-align: center; }
.pie__edicion { max-width: 72ch; }
.pie__enlaces { justify-content: center; }

/* 5. Momentos I / II / III de «El evento»: numeral en oro sólido y más grande, filete de 40 px encima y texto en tinta normal. */
.momento { padding-top: var(--e-4); }
.momento::before { width: 40px; height: 2px; background: var(--oro); }
.momento__num { margin-bottom: var(--e-2); font-size: clamp(2.8rem, 3.4vw, 3.4rem); font-weight: 600; color: var(--oro-hondo); opacity: 1; }
.momento p { font-size: var(--t-body); line-height: 1.6; color: var(--tinta); }

@media (max-width: 980px) {
  .momento__num { font-size: 2.6rem; }
  .patrocinio__usos { padding: 22px 18px 12px; }
}
@media (max-width: 640px) {
  .patrocinio__usos li { grid-template-columns: 1fr; gap: 4px; }
  .pie { padding-bottom: 96px; }
  .pie__fila { align-items: center; }
}