/* ════════════════════════════════════════════════════════
   LUZ Y VIDA — MODO NOCHE
   La página del festival se viste de negro con brasas
   flotando: entrar aquí debe sentirse como entrar a OTRA
   página. Solo aplica con <body class="lv-noche">.
   ════════════════════════════════════════════════════════ */

body.lv-noche{
  background:#07030d;
  color:#F3EAFB;
}

/* el canvas de brasas vive detrás de todo el contenido */
#lvFuego{
  position:fixed;inset:0;z-index:0;pointer-events:none;
}
/* ── El contenido, por encima del canvas de brasas ──
   Esto estaba escrito al revés: "TODO hijo de body MENOS estos".
   Cada vez que se agregaba un elemento fijo nuevo (menú, popup, botón
   atrás, el propio canvas, la esfera de transición) heredaba
   position:relative y se rompía — tres bugs distintos por la misma
   regla. Ahora se nombra SOLO lo que sí debe subir: el contenido de
   la página. Cualquier overlay nuevo queda fuera por defecto y
   conserva su position:fixed. */
/* el header NO va en esta lista: tiene su propia regla abajo y
   "header.nav" le ganaba en especificidad, quitándole el sticky */
body.lv-noche > section,
body.lv-noche > #footerMount,
body.lv-noche > .ad-slot,
body.lv-noche > .wrap,
body.lv-noche > main{
  position:relative;z-index:1;
}
body.lv-noche>.nav{position:sticky;top:0;z-index:300}
body.lv-noche>#lvFuego{position:fixed;inset:0;z-index:0}

/* ── Navegación fundida con la noche ── */
body.lv-noche .nav{
  background:rgba(7,3,13,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(247,148,29,.18);
}
body.lv-noche .nav .links a,
body.lv-noche .nav .ch-marca,
body.lv-noche .nav .burger,
body.lv-noche .nav .lang-btn{color:#F3EAFB}
body.lv-noche .nav .links a:hover{color:#FFB200}
body.lv-noche .nav .links a[data-page="festival"]{color:#FF7A1A}

/* ── Hero: la catrina emerge de la oscuridad ── */
body.lv-noche .page-hero{
  background:#07030d;
}
body.lv-noche .page-hero .ph-bg img{
  opacity:.5;
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 98%);
          mask-image:linear-gradient(to bottom,#000 55%,transparent 98%);
}
body.lv-noche .page-hero .ph-kicker{
  color:#FFB200;
  text-shadow:0 0 22px rgba(255,122,26,.65);
  letter-spacing:.22em;
}
body.lv-noche .page-hero h1{
  background:linear-gradient(100deg,#FFB200 5%,#FF7A1A 38%,#EC0A82 68%,#B14BE0 95%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 26px rgba(255,122,26,.35));
}
body.lv-noche .page-hero p{color:#E8D9F5}
body.lv-noche .page-hero .crumb,
body.lv-noche .page-hero .crumb a{color:#B9A6CE}
body.lv-noche .page-hero .rb{
  background:linear-gradient(90deg,#FF4E00,#FF7A1A,#FFB200,#EC0A82,#B14BE0,#7C2D8E);
}

/* ── Secciones sobre negro ── */
body.lv-noche .block{background:transparent}
body.lv-noche .block .kick{color:#FF7A1A;letter-spacing:.24em}
body.lv-noche .block h2{color:#FFF6E8}
body.lv-noche .block p{color:#D9C9E8}
body.lv-noche .block p b{color:#FFB200}
body.lv-noche .block a:not(.acbtn){color:#FFB200}
body.lv-noche .fl-intro .foto img,
body.lv-noche .fl-info .foto img{
  border-radius:18px;
  box-shadow:0 0 0 1px rgba(255,122,26,.25),0 22px 60px rgba(0,0,0,.6),0 0 44px rgba(177,75,224,.22);
}

/* ── Los cuatro momentos: vidrio oscuro con brasa propia ── */
body.lv-noche .fl-momentos-sec{background:transparent}
body.lv-noche .momento{
  background:rgba(20,10,32,.72);
  border:1px solid rgba(255,122,26,.22);
  backdrop-filter:blur(6px);
  box-shadow:0 14px 44px rgba(0,0,0,.5);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
body.lv-noche .momento:hover{
  transform:translateY(-5px);
  border-color:rgba(255,178,0,.55);
  box-shadow:0 22px 60px rgba(0,0,0,.65),0 0 34px rgba(255,122,26,.28);
}
body.lv-noche .momento h3{color:#FFF6E8}
body.lv-noche .momento p{color:#CBB8DE}
body.lv-noche .momento .num{
  background:linear-gradient(135deg,#FF7A1A,#B14BE0);
  color:#fff;
  box-shadow:0 0 22px rgba(255,122,26,.5);
}

/* ── Botones con fuego ── */
body.lv-noche .acbtn{
  background:linear-gradient(100deg,#FF4E00,#FF7A1A 55%,#FFB200);
  color:#1a0800;
  font-weight:700;
  box-shadow:0 10px 34px rgba(255,122,26,.4);
  border:none;
}
body.lv-noche .acbtn:hover{filter:brightness(1.1);box-shadow:0 14px 44px rgba(255,122,26,.55)}
body.lv-noche .fl-link{color:#B14BE0}

/* ── Footer nocturno ── */
body.lv-noche footer,
body.lv-noche .footer{
  background:#0b0512;
  border-top:1px solid rgba(177,75,224,.25);
}

/* ── Publicidad y chatbot legibles sobre negro ── */
body.lv-noche .ad-slot,body.lv-noche .ad-side{
  background:rgba(20,10,32,.7);
  border-color:rgba(255,122,26,.25);
}

@media (prefers-reduced-motion: reduce){
  #lvFuego{display:none}
  body.lv-noche{
    background:
      radial-gradient(90% 60% at 50% 0%,rgba(124,45,142,.25),transparent 70%),
      #07030d;
  }
}

/* ══ EL DESCENSO AL MICTLÁN — los cuatro momentos como camino ══ */
body.lv-noche .mic-intro{
  max-width:640px;margin:14px auto 0;text-align:center;
  color:#CBB8DE;font-size:15.5px;line-height:1.65;
}
body.lv-noche .mic-camino{
  position:relative;margin-top:44px;
  display:flex;flex-direction:column;gap:34px;max-width:660px;margin-left:auto;margin-right:auto;
}
/* la vereda de luz que conecta las estaciones */
body.lv-noche .mic-camino::before{
  content:"";position:absolute;top:0;bottom:0;left:31px;width:2px;
  background:linear-gradient(180deg,
    rgba(255,178,0,.0) 0%,rgba(255,178,0,.75) 12%,
    rgba(255,122,26,.55) 45%,rgba(177,75,224,.55) 80%,rgba(177,75,224,0) 100%);
  box-shadow:0 0 14px rgba(255,140,30,.35);
}
body.lv-noche .mic-paso{
  margin-left:70px;position:relative;
  opacity:0;transform:translateY(34px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.3,1),
             border-color .25s ease,box-shadow .25s ease;
}
body.lv-noche .mic-paso.mic-visto{opacity:1;transform:none}
/* el brasero: el número flota sobre la vereda, encendido */
body.lv-noche .mic-paso .num{
  position:absolute;left:-70px;top:6px;width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;font-family:'Fraunces';font-weight:900;font-size:22px;
  /* 28-sep-2026 (gama baja): el brillo que late ya no anima box-shadow
     (repintaba 60 veces por segundo); la sombra base queda fija y el
     resplandor fuerte vive en un ::after que solo cambia de opacidad, que
     corre en la GPU. Se ve igual: respira entre el brillo suave y el fuerte. */
  box-shadow:0 0 18px rgba(255,122,26,.45),0 0 44px rgba(255,122,26,.18);
}
body.lv-noche .mic-paso .num::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:0 0 26px rgba(255,122,26,.75),0 0 64px rgba(255,122,26,.32);
  opacity:0;animation:micBrasero 2.6s ease-in-out infinite;
}
body.lv-noche .mic-paso:nth-child(2) .num::after{animation-delay:.6s}
body.lv-noche .mic-paso:nth-child(3) .num::after{animation-delay:1.2s}
body.lv-noche .mic-paso:nth-child(4) .num::after{animation-delay:1.8s}
@keyframes micBrasero{
  0%,100%{opacity:0}
  50%{opacity:1}
}
@media(max-width:640px){
  body.lv-noche .mic-camino::before{left:23px}
  body.lv-noche .mic-paso{margin-left:56px}
  body.lv-noche .mic-paso .num{left:-56px;width:44px;height:44px;font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  body.lv-noche .mic-paso{opacity:1;transform:none;transition:none}
  body.lv-noche .mic-paso .num,body.lv-noche .mic-paso .num::after{animation:none}
}

/* ══ AFINACIÓN 22-ago noche ══ */
/* El título: morado fluorescente (el favorito de Uriel) y sin cortes —
   el drop-shadow con background-clip recortaba las letras */
body.lv-noche .page-hero h1{
  background:linear-gradient(100deg,#FF9BF5 0%,#E36BFF 35%,#B14BE0 68%,#9333EA 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:none;
  padding:.06em 0 .14em;
  line-height:1.04;
}

/* Mosaico de la tradición: cuatro fotos que crecen al pasar el cursor,
   como los iconos del dock de la Mac */
/* minmax(0,1fr) y min-width:0 (26-sep-2026): con 1fr a secas el mosaico
   pedía de ancho mínimo lo que miden sus fotos (700 px cada una) y, entre
   781 y ~960 px, le robaba la columna al texto (quedaba de 155 px) y la
   página se salía 30-110 px por la derecha. */
body.lv-noche .lv-mosaico{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:150px;gap:12px;margin:0;
  min-width:0;
}
body.lv-noche .lv-mosaico img{
  width:100%;height:100%;object-fit:cover;border-radius:14px;display:block;
  box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 0 1px rgba(255,122,26,.18);
  transition:transform .32s cubic-bezier(.2,.9,.3,1.4),box-shadow .32s ease,filter .32s ease;
  filter:brightness(.92);
  cursor:pointer;
}
body.lv-noche .lv-mosaico .m1{grid-row:span 2}
body.lv-noche .lv-mosaico .m4{grid-column:span 2;grid-row:span 1}
/* Encuadre por foto: el recorte del mosaico cortaba caras y penachos.
   La m1 es vertical (danzantes al centro, un poco arriba) y la m4 es
   una franja muy ancha — sin esto, cover centraba y decapitaba. */
body.lv-noche .lv-mosaico .m1{object-position:50% 42%}
body.lv-noche .lv-mosaico .m4{object-position:50% 36%}
body.lv-noche .lv-mosaico img:hover{
  transform:scale(1.09);
  filter:brightness(1.05);
  z-index:5;position:relative;
  box-shadow:0 22px 54px rgba(0,0,0,.65),0 0 34px rgba(227,107,255,.35),0 0 0 1px rgba(255,178,0,.5);
}
@media(max-width:720px){body.lv-noche .lv-mosaico{grid-auto-rows:110px}}
@media (prefers-reduced-motion:reduce){body.lv-noche .lv-mosaico img{transition:none}body.lv-noche .lv-mosaico img:hover{transform:none}}

/* ══ Las estaciones del Mictlán con su foto ══ */
body.lv-noche .mic-paso{overflow:hidden;padding:0}
/* La foto es 3:2 (700x467). Con `height:170px` la caja quedaba en 3.23:1 y
   `cover` se comía MÁS DE LA MITAD del alto: la imagen salía decapitada. Y la
   máscara desvanecía el 38 % inferior, que es la "costura" que se veía, con el
   fondo asomando por debajo. Ahora la caja respeta la proporción con
   `aspect-ratio` —así `cover` no recorta nada— y el desvanecido se queda en el
   último 12 %, lo justo para fundir con la tarjeta. (16-sep-2026) */
body.lv-noche .mic-paso .mic-foto{
  width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;
  -webkit-mask-image:linear-gradient(to bottom,#000 88%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 88%,transparent 100%);
}
body.lv-noche .mic-paso h3{padding:0 24px;margin-top:-6px}
body.lv-noche .mic-paso p{padding:0 24px 22px}
body.lv-noche .mic-paso:hover .mic-foto{filter:brightness(1.08)}

/* ══ Hero de LV: 4 fotos que se funden suave, en bucle ══ */
.ph-bg.lv-show img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;
  /* Dos animaciones en paralelo, con el mismo retraso por foto: una
     hace la fundida y la otra un acercamiento lento. El hero deja de
     sentirse una postal fija. */
  /* 18s y no 24: el show quedó en TRES fotos (la primera salió el
     2-sep por verse recortada) y el ciclo se acorta para que no haya
     un hueco a oscuras al final de la vuelta. */
  animation:lvShow 18s linear infinite, lvDeriva 18s ease-in-out infinite;
  transform-origin:52% 46%;will-change:opacity,transform;
}
.ph-bg.lv-show .s1{animation-delay:-1.4s}
.ph-bg.lv-show .s2{animation-delay:4.6s}
.ph-bg.lv-show .s3{animation-delay:10.6s}
@media (prefers-reduced-motion:reduce){
  .ph-bg.lv-show img{animation:none}
  .ph-bg.lv-show .s1{opacity:1}
}


/* ══ MÓVIL LV (25-ago): sin encimados ni trabas ══ */
/* el slideshow: cada foto parte de 0 y NUNCA se suman dos al .5 */
body.lv-noche .page-hero .ph-bg.lv-show img{opacity:0;-webkit-mask-image:none;mask-image:none}
.ph-bg.lv-show::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,3,13,.5) 0%,rgba(7,3,13,.25) 45%,rgba(7,3,13,.85) 100%);
}
/* Menos zoom (1.14→1.07) y más opacidad (.72→.86): el acercamiento
   grande ampliaba la foto y la ablandaba, y al 72% se veía lavada.
   Portada más nítida y con más presencia (Uriel 6-sep). */
@keyframes lvDeriva{
  0%{transform:scale(1.02)}
  45%{transform:scale(1.07) translate3d(-0.8%,-0.5%,0)}
  100%{transform:scale(1.02)}
}
@keyframes lvShow{
  0%{opacity:0}
  6%{opacity:.86}
  30%{opacity:.86}
  39%{opacity:0}
  100%{opacity:0}
}
@media(max-width:820px){
  body.lv-noche .momento,body.lv-noche .nav{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}

/* Quien pide menos movimiento ve la primera foto fija, sin acercamiento */
@media(prefers-reduced-motion:reduce){
  .ph-bg.lv-show img{animation:none;transform:none}
  .ph-bg.lv-show .s1{opacity:.72}
}

/* ── Insignia oficial del festival (logo 30 años, 4-sep) ──
   Tarjeta crema porque el arte del logo es para fondo claro. */
.lv-insignia{
  display:inline-block;background:none;
  border-radius:0;padding:0;margin-bottom:16px;
  /* Sin recuadro crema (Uriel 6-sep): el logo ya es transparente y se
     lee solo sobre la foto nocturna. Un halo suave lo separa del fondo
     en cualquiera de las 3 fotos del show. */
  filter:drop-shadow(0 4px 16px rgba(0,0,0,.7)) drop-shadow(0 0 30px rgba(255,140,40,.28));
}
.lv-insignia img{display:block;width:min(340px,70vw);height:auto}

/* ══ 30 ANIVERSARIO · BOLETOS · PREGUNTAS (16-sep-2026) ══
   La edicion conmemorativa merece peso propio en la pagina, y los
   precios de 2026 son el dato que nadie mas tiene bien publicado. */
body.lv-noche .fl-aniv{background:#140725}
.fl-aniv-cab{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap}
/* Color plano, sin degradado (Uriel 17-sep) */
.fl-aniv-num{
  font-family:'Fraunces',serif;font-weight:900;font-size:clamp(76px,13vw,150px);
  line-height:.8;letter-spacing:-.05em;flex:0 0 auto;color:#FF7A1A;
  text-shadow:0 6px 26px rgba(255,122,26,.35);
}
.fl-aniv-cab>div{flex:1 1 320px;min-width:0}
.fl-cifras{
  list-style:none;margin:34px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;
}
.fl-cifras li{
  padding:18px 16px;border-radius:16px;text-align:center;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);
}
.fl-cifras b{
  display:block;font-family:'Fraunces',serif;font-weight:900;
  font-size:30px;line-height:1;color:#FF9A3C;margin-bottom:7px;
}
.fl-cifras span{font-size:12.5px;line-height:1.35;color:#C9BFDD;display:block}
.fl-aniv-pie{margin-top:26px;color:#C9BFDD;max-width:70ch}

/* ── Boletos ── */
.fl-bol-lead{max-width:62ch}
.fl-zonas{
  list-style:none;margin:24px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(136px,1fr));gap:12px;
}
.fl-zonas li{
  display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;
  min-height:86px;padding:14px 10px;border-radius:15px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
}
.fl-zonas .fz-z{
  font-family:'Oswald',sans-serif;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;font-size:10.5px;color:#C9BFDD;
}
.fl-zonas b{font-family:'Fraunces',serif;font-weight:900;font-size:23px;color:#fff;line-height:1}
.fl-bol-nota{
  margin-top:22px;max-width:70ch;color:#C9BFDD;font-size:14.5px;line-height:1.65;
  border-left:3px solid rgba(255,154,60,.6);padding-left:16px;
}
.fl-bol-btns{margin-top:26px}
.fl-bol-pie{margin-top:18px;font-size:13px;line-height:1.6;color:#8E82AB;max-width:66ch}

/* ── Preguntas frecuentes ── */
.fl-faq{margin-top:26px;display:grid;gap:10px;max-width:78ch}
.fq-i{
  border-radius:15px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);overflow:hidden;
}
.fq-i summary{
  cursor:pointer;list-style:none;padding:17px 46px 17px 20px;position:relative;
  font-family:'Oswald',sans-serif;font-weight:500;font-size:15.5px;line-height:1.4;color:#fff;
}
.fq-i summary::-webkit-details-marker{display:none}
.fq-i summary::after{
  content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;
  border-right:2px solid #FF9A3C;border-bottom:2px solid #FF9A3C;
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.fq-i[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.fq-i summary:hover{background:rgba(255,255,255,.05)}
.fq-r{padding:0 20px 19px;font-size:14.5px;line-height:1.7;color:#C9BFDD}
.fq-r b{color:#fff}
@media(max-width:560px){
  .fl-aniv-cab{gap:14px}
  .fq-i summary{font-size:14.5px;padding:15px 42px 15px 16px}
  .fq-r{padding:0 16px 16px}
}

/* ══ 30 AÑOS MÁS VISIBLE Y BOLETOS EN EL HERO (24-sep-2026) ══
   Quien llega a esta página ya está decidiendo: el primer botón de compra
   estaba siete pantallas abajo. Ahora va junto al contador, y el "30" se lee
   bajo el título aunque el logo no cargue. Colores planos del festival. */
.fl-h1-30{display:flex;align-items:baseline;gap:12px;margin:6px 0 4px;flex-wrap:wrap}
.fl-h1-30 b{
  font-family:'Fraunces',serif;font-weight:900;font-size:clamp(54px,8vw,92px);line-height:.85;
  color:#FFB200;letter-spacing:-.04em;text-shadow:0 0 30px rgba(255,122,26,.45);
}
.fl-h1-30 span{
  font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  font-size:clamp(13px,1.6vw,17px);color:#FFE3C8;
}
.cuenta-reg .cr-boletos{
  font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  font-size:12.5px;color:#2A0F00;background:#FF7A1A;border-radius:999px;
  padding:0 22px;min-height:42px;display:inline-flex;align-items:center;margin-left:10px;
  box-shadow:0 10px 26px rgba(255,122,26,.45);text-decoration:none;touch-action:manipulation;
  transition:transform .16s,box-shadow .16s;
}
.cuenta-reg .cr-boletos:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(255,122,26,.6)}
.cuenta-reg .cr-boletos:active{transform:scale(.97)}
.fl-hero-precios{
  display:inline-block;margin-top:12px;font-family:'Oswald',sans-serif;letter-spacing:.1em;
  text-transform:uppercase;font-size:12px;color:#FFC98F;text-decoration:underline;text-underline-offset:4px;
}
.fl-hero-precios:hover{color:#fff}
@media(max-width:720px){
  .cuenta-reg .cr-boletos{margin:12px 0 0;width:100%;justify-content:center;min-height:48px;font-size:13.5px}
}
/* Que "Comprar boletos" quepa en la primera pantalla de una laptop (1440x900):
   el logo un poco más chico, menos aire arriba y el contador en rejilla (un
   flex que se envuelve mide la suma de todos sus hijos y la caja salía de
   840 px de ancho). */
body.lv-noche .page-hero.has-photo{padding-top:118px}
.lv-insignia img{width:min(260px,62vw)}
.fl-h1-30 b{font-size:clamp(48px,6vw,78px)}
body.lv-noche .page-hero .cuenta-reg{
  display:inline-grid;grid-template-columns:repeat(4,auto) auto auto;
  column-gap:14px;row-gap:6px;align-items:center;
}
body.lv-noche .page-hero .cuenta-reg .cr-para,
body.lv-noche .page-hero .cuenta-reg .cr-fin{grid-column:1/-1}
.fl-hero-precios{display:block;width:fit-content}
@media(max-width:720px){
  body.lv-noche .page-hero .cuenta-reg{grid-template-columns:repeat(4,auto);justify-content:center}
  body.lv-noche .page-hero .cuenta-reg .cr-boletos,
  body.lv-noche .page-hero .cuenta-reg .cr-agendar{grid-column:1/-1}
}