/* ==========================================================================
   MEXICA — sistema de diseño
   Paleta muestreada directamente del logotipo original (jaguar Mexica):
   violeta, azul, cian, el amarillo de los ojos y el negro violáceo del fondo.
   ========================================================================== */

:root{
  /* --- tierra --- */
  --obsidiana:#050110;
  --noche:#0B0420;
  --noche-alta:#150836;
  --hueso:#EDE6D6;
  --hueso-mute:#A79FB4;
  --hueso-tenue:rgba(237,230,214,.42);

  /* --- marca (del logo) --- */
  --violeta:#AF55E6;
  --violeta-hondo:#4A0F7A;
  --violeta-brasa:#7B23C4;
  --azul:#1598F5;
  --azul-hondo:#0B3E8C;
  --cian:#2DCDFB;
  --amarillo:#FCFC0C;      /* los ojos del jaguar — un solo uso por pantalla */

  /* --- líneas y velos --- */
  --linea:rgba(175,85,230,.24);
  --linea-fuerte:rgba(175,85,230,.5);
  --velo:rgba(5,1,16,.72);

  /* --- tipografía --- */
  --caps:'Cinzel',Georgia,'Times New Roman',serif;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI',sans-serif;

  /* --- medida y ritmo --- */
  --maxw:1380px;
  --gutter:clamp(22px,5.2vw,92px);
  --ease:cubic-bezier(.22,.7,.28,1);
  --ease-cine:cubic-bezier(.16,.84,.24,1);
  --ease-danza:cubic-bezier(.34,.9,.2,1);
  --portal:0s;   /* retraso de la portada mientras el portal está abierto */
  --acto:clamp(72px,9vw,150px);
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  background:var(--obsidiana);
  /* el encaje es "proximity": los actos largos siguen desplazándose libres */
  scroll-snap-type:y proximity;
}

body{
  margin:0;
  background:var(--obsidiana);
  color:var(--hueso);
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* clip, no hidden: hidden crea un contenedor de scroll y rompe
     position:sticky en las regiones del viaje. */
  overflow-x:clip;
}

/* el aliento de fondo: un rescoldo violeta-azul que nunca se detiene */
body::before{
  content:"";
  position:fixed;
  inset:-20vmax;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(38vmax 38vmax at 18% 12%, rgba(123,35,196,.30), transparent 62%),
    radial-gradient(42vmax 42vmax at 84% 78%, rgba(21,152,245,.22), transparent 64%),
    radial-gradient(30vmax 30vmax at 52% 50%, rgba(45,205,251,.10), transparent 68%);
  animation:brasa 26s var(--ease) infinite alternate;
}
@keyframes brasa{
  0%  {transform:scale(1)   translate3d(0,0,0);   opacity:.85}
  50% {transform:scale(1.14) translate3d(2%,-2%,0); opacity:1}
  100%{transform:scale(1.04) translate3d(-2%,2%,0); opacity:.9}
}

/* grano fino: le quita el brillo plástico al degradado */
body::after{
  content:"";
  position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);position:relative;z-index:3}

img{max-width:100%;height:auto;display:block}

::selection{background:var(--violeta);color:var(--obsidiana)}

a{color:var(--cian);text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible{
  outline:2px solid var(--amarillo);
  outline-offset:3px;
  border-radius:2px;
}

/* ==========================================================================
   Tipografía
   ========================================================================== */

.eyebrow{
  font-family:var(--sans);
  font-weight:500;
  font-size:10.5px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--violeta);
  margin:0 0 20px;
  display:flex;align-items:center;gap:14px;
}
.eyebrow::before{
  content:"";width:clamp(22px,4vw,58px);height:1px;
  background:linear-gradient(90deg,var(--violeta),transparent);
}

h1,h2,h3{text-wrap:balance;margin:0}

.acto-titulo{
  font-family:var(--caps);
  font-weight:700;
  font-size:clamp(30px,5.4vw,74px);
  line-height:1.02;
  letter-spacing:.008em;
  margin:0 0 clamp(22px,2.6vw,40px);
}

/* el degradado del logo, aplicado al texto */
.tex-texto{
  background:linear-gradient(104deg,var(--azul) 4%,var(--cian) 26%,var(--violeta) 62%,var(--violeta-brasa) 96%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  /* si el recorte falla, el texto sigue siendo legible */
  -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .tex-texto{color:var(--violeta);-webkit-text-fill-color:currentColor}
}

.plomo{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(20px,2.3vw,31px);
  line-height:1.5;
  color:var(--hueso);
  max-width:34ch;
  margin:0 0 28px;
}
.cuerpo{max-width:62ch;color:var(--hueso-mute);margin:0 0 20px}
.cuerpo strong{color:var(--hueso);font-weight:500}

.cita{
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
  font-size:clamp(19px,2vw,27px);
  line-height:1.56;
  color:var(--hueso);
  max-width:46ch;
  margin:0 0 22px;
  padding-left:clamp(18px,2.4vw,34px);
  border-left:1px solid var(--linea-fuerte);
}

.firma{
  font-family:var(--sans);font-size:10.5px;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--violeta);
}

/* ==========================================================================
   Navegación
   ========================================================================== */

.barra{
  position:fixed;inset:0 0 auto;z-index:60;
  display:flex;align-items:center;
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  background:linear-gradient(180deg,rgba(5,1,16,.92),rgba(5,1,16,.55) 70%,transparent);
  border-bottom:1px solid transparent;
  transition:border-color .5s var(--ease),background .5s var(--ease);
}
.barra.pegada{border-bottom-color:var(--linea);background:rgba(5,1,16,.93)}
.barra .in{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;width:100%;min-width:0;
  padding-block:clamp(12px,1.4vw,19px);
}

.marca{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.marca img{
  height:clamp(30px,3.3vw,42px);width:auto;
  /* sin filter: el resplandor del logotipo ya está en el PNG, y un
     drop-shadow aquí es justo lo que pinta recuadros blancos en móvil */
  transition:transform .6s var(--ease-danza);
  transform-origin:0 50%;
}
.marca:hover img{transform:scale(1.04)}
.marca small{
  display:block;font-family:var(--sans);font-weight:400;
  font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--hueso-mute);padding-left:2px;
}

.menu{display:flex;align-items:center;gap:clamp(14px,2vw,32px);list-style:none;margin:0;padding:0}
.menu a{
  font-family:var(--sans);font-size:11px;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--hueso-mute);
  padding-block:6px;position:relative;
  transition:color .4s var(--ease);
}
.menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--violeta),var(--cian));
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.menu a:hover,.menu a[aria-current="true"]{color:var(--hueso)}
.menu a:hover::after,.menu a[aria-current="true"]::after{transform:scaleX(1)}

.acciones{display:flex;align-items:center;gap:12px;flex-shrink:0;min-width:0}

/* conmutador de idioma */
.idioma{
  display:flex;gap:2px;padding:3px;border-radius:999px;
  border:1px solid transparent;
  background:
    linear-gradient(180deg,rgba(21,8,54,.78),rgba(11,4,32,.78)) padding-box,
    linear-gradient(104deg,rgba(175,85,230,.6),rgba(45,205,251,.3)) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.idioma button{
  appearance:none;background:none;border:0;cursor:pointer;border-radius:999px;
  font-family:var(--sans);font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--hueso-mute);padding:7px 12px;
  transition:color .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease);
}
.idioma button[aria-pressed="true"]{
  color:#fff;
  background:
    linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%),
    linear-gradient(104deg,var(--violeta-brasa),var(--azul));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 14px -4px rgba(123,35,196,.8);
}
.idioma button:not([aria-pressed="true"]):hover{color:var(--hueso);background:rgba(175,85,230,.16)}

/* botones — píldora de vitrina: borde en degradado, brillo superior,
   halo de color y un destello que cruza al pasar */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-size:11px;font-weight:600;line-height:1;
  letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  padding:16px 30px;border-radius:999px;
  border:1px solid transparent;
  color:var(--hueso);cursor:pointer;
  background:
    linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 55%) padding-box,
    linear-gradient(180deg,rgba(21,8,54,.78),rgba(11,4,32,.78)) padding-box,
    linear-gradient(104deg,rgba(175,85,230,.8),rgba(45,205,251,.45) 58%,rgba(175,85,230,.35)) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 10px 26px -14px rgba(0,0,0,.8);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  position:relative;overflow:hidden;isolation:isolate;
  -webkit-appearance:none;appearance:none;
  -webkit-tap-highlight-color:transparent;
  transition:color .45s var(--ease),transform .5s var(--ease-danza),box-shadow .55s var(--ease),filter .45s var(--ease);
}
/* el relleno de color que se enciende al pasar */
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:
    linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 52%),
    linear-gradient(104deg,var(--violeta-brasa),#5B3FE0 50%,var(--azul));
  opacity:0;
  transition:opacity .5s var(--ease);
}
/* el destello que cruza */
.btn::after{
  content:"";position:absolute;top:-10%;bottom:-10%;left:-70%;width:42%;z-index:1;
  pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.32) 50%,transparent);
  transform:skewX(-22deg);
  opacity:0;
}
.btn:hover{
  color:#fff;transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    0 16px 38px -12px rgba(123,35,196,.75),
    0 0 26px -6px rgba(45,205,251,.35);
}
.btn:hover::before{opacity:1}
.btn:hover::after{opacity:1;animation:btn-destello 1.1s var(--ease-cine) both}
@keyframes btn-destello{from{left:-70%}to{left:130%}}
.btn:active{transform:translateY(0) scale(.975);transition-duration:.15s}
.btn:focus-visible{
  outline:none;border-radius:999px;
  box-shadow:0 0 0 3px rgba(5,1,16,.9),0 0 0 5px rgba(45,205,251,.7),0 16px 38px -12px rgba(123,35,196,.75);
}

/* principal: gema de color con brillo y halo */
.btn--solido{
  color:#fff;
  background:
    linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 52%) padding-box,
    linear-gradient(104deg,var(--violeta-brasa),#5B3FE0 50%,var(--azul)) padding-box,
    linear-gradient(104deg,rgba(255,255,255,.55),rgba(255,255,255,.1) 45%,rgba(255,255,255,.4)) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 12px 32px -12px rgba(123,35,196,.8),
    0 3px 10px -4px rgba(21,152,245,.5);
}
.btn--solido::before{
  background:
    linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0) 52%),
    linear-gradient(104deg,#9A3BEA,#3F6BFF 52%,var(--cian));
}
.btn--solido:hover{
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 20px 48px -12px rgba(123,35,196,.9),
    0 0 34px -4px rgba(45,205,251,.5);
}

/* secundario: cristal con filo claro */
.btn--fantasma{
  color:var(--hueso-mute);
  background:
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 55%) padding-box,
    linear-gradient(180deg,rgba(21,8,54,.55),rgba(11,4,32,.55)) padding-box,
    linear-gradient(104deg,rgba(237,230,214,.4),rgba(237,230,214,.1) 55%,rgba(237,230,214,.28)) border-box;
}
.btn--fantasma:hover{color:#fff}

/* un <input> no tiene ::before/::after: se enciende con brillo */
input.btn:hover{filter:brightness(1.14) saturate(1.1)}


/* ==========================================================================
   Actos — la mecánica de entrar y salir
   Cada acto entra con zoom, se asienta, y sale con zoom.
   Se hace con animaciones ligadas al scroll; si el navegador no las
   soporta, el acto simplemente se queda quieto y legible.
   ========================================================================== */

.acto{
  position:relative;
  padding-block:var(--acto);
  scroll-snap-align:start;
  isolation:isolate;
  /* la placa de textura sangra a propósito (inset negativo); hay que
     recortarla aquí o ensancha el documento en pantallas angostas.
     clip y no hidden: hidden crearía un contenedor de scroll. */
  overflow:clip;
}

.acto__escena{
  position:relative;
  z-index:3;
  transform-origin:50% 50%;
  will-change:transform,opacity,filter;
}

/* ==========================================================================
   Texturas vivas — 100 % CSS, sin un solo píxel
   Los cuatro motivos del logotipo (pelaje de jaguar, escama, escama
   magenta y pluma) reconstruidos con degradados. Al ser vectoriales no
   pixelan a ningún tamaño ni en ninguna densidad de pantalla, y derivan
   lentamente por su cuenta.
   ========================================================================== */

.acto__placa{
  position:absolute;
  inset:-8% -4%;
  z-index:1;
  pointer-events:none;
  transform-origin:50% 50%;
  will-change:transform;
  /* se apaga en los bordes para que no se vea dónde acaba el patrón */
  -webkit-mask-image:radial-gradient(74% 64% at 50% 48%,#000 30%,transparent 80%);
  mask-image:radial-gradient(74% 64% at 50% 48%,#000 30%,transparent 80%);
}

/* el patrón vive en el hijo: así el padre conserva su transform de scroll
   y la textura puede derivar sin pelearse con él */
.acto__placa::before{
  content:"";
  position:absolute;
  inset:-14%;
  opacity:.2;
  mix-blend-mode:screen;
  animation:derivar 96s linear infinite alternate;
}
@keyframes derivar{
  0%  {transform:translate3d(-1.5%,-1%,0) scale(1.02) rotate(-.6deg)}
  100%{transform:translate3d(1.5%,1%,0)   scale(1.06) rotate(.6deg)}
}

/* --- pelaje de jaguar: rosetas oscuras sobre violeta ------------------- */
.acto--pelaje .acto__placa::before{
  background-color:#2A0B4D;
  background-image:
    /* núcleos de roseta */
    radial-gradient(ellipse 9% 7% at 22% 26%, #0B0318 58%, transparent 60%),
    radial-gradient(ellipse 7% 6% at 63% 17%, #0B0318 58%, transparent 60%),
    radial-gradient(ellipse 8% 6% at 84% 58%, #0B0318 58%, transparent 60%),
    radial-gradient(ellipse 6% 5% at 41% 72%, #0B0318 58%, transparent 60%),
    radial-gradient(ellipse 7% 6% at 12% 84%, #0B0318 58%, transparent 60%),
    /* anillos rotos alrededor */
    radial-gradient(ellipse 15% 12% at 22% 26%, transparent 52%, rgba(11,3,24,.66) 54%, transparent 72%),
    radial-gradient(ellipse 13% 11% at 63% 17%, transparent 52%, rgba(11,3,24,.66) 54%, transparent 72%),
    radial-gradient(ellipse 14% 11% at 84% 58%, transparent 52%, rgba(11,3,24,.66) 54%, transparent 72%),
    radial-gradient(ellipse 12% 10% at 41% 72%, transparent 52%, rgba(11,3,24,.66) 54%, transparent 72%),
    /* brasa del pelo por debajo */
    radial-gradient(60% 50% at 30% 35%, rgba(175,85,230,.5), transparent 70%),
    radial-gradient(56% 48% at 74% 70%, rgba(123,35,196,.42), transparent 72%);
  background-size:
    26% 30%, 26% 30%, 26% 30%, 26% 30%, 26% 30%,
    26% 30%, 26% 30%, 26% 30%, 26% 30%,
    100% 100%, 100% 100%;
}

/* --- escama azul: hileras de tejas desplazadas ------------------------- */
.acto--escama .acto__placa::before{
  background-color:#07143A;
  background-image:
    /* borde luminoso de cada escama */
    radial-gradient(circle at 50% 100%, transparent 58%, rgba(45,205,251,.55) 60%, transparent 63%),
    radial-gradient(circle at 50% 100%, transparent 58%, rgba(45,205,251,.55) 60%, transparent 63%),
    /* cuerpo de la escama */
    radial-gradient(circle at 50% 100%, rgba(21,152,245,.42) 0 57%, transparent 58%),
    radial-gradient(circle at 50% 100%, rgba(21,152,245,.42) 0 57%, transparent 58%),
    radial-gradient(70% 60% at 40% 30%, rgba(45,205,251,.22), transparent 74%);
  background-size:7.5% 5.4%, 7.5% 5.4%, 7.5% 5.4%, 7.5% 5.4%, 100% 100%;
  background-position:0 0, 3.75% 2.7%, 0 0, 3.75% 2.7%, 0 0;
}

/* --- escama magenta: misma geometría, otro fuego ----------------------- */
.acto--magenta .acto__placa::before{
  background-color:#2B0733;
  background-image:
    radial-gradient(circle at 50% 100%, transparent 58%, rgba(245,57,155,.5) 60%, transparent 63%),
    radial-gradient(circle at 50% 100%, transparent 58%, rgba(245,57,155,.5) 60%, transparent 63%),
    radial-gradient(circle at 50% 100%, rgba(142,30,107,.5) 0 57%, transparent 58%),
    radial-gradient(circle at 50% 100%, rgba(142,30,107,.5) 0 57%, transparent 58%),
    radial-gradient(68% 58% at 62% 34%, rgba(175,85,230,.3), transparent 74%);
  background-size:6.6% 4.8%, 6.6% 4.8%, 6.6% 4.8%, 6.6% 4.8%, 100% 100%;
  background-position:0 0, 3.3% 2.4%, 0 0, 3.3% 2.4%, 0 0;
}

/* --- pluma: barbas a ambos lados del raquis ---------------------------- */
.acto--pluma .acto__placa::before{
  background-color:#1A0940;
  background-image:
    /* barbas, en dos direcciones */
    repeating-linear-gradient(74deg,
      transparent 0 .5%, rgba(45,205,251,.3) .5% .72%, transparent .72% 1.5%),
    repeating-linear-gradient(-74deg,
      transparent 0 .5%, rgba(175,85,230,.32) .5% .72%, transparent .72% 1.5%),
    /* raquis */
    repeating-linear-gradient(90deg,
      transparent 0 11%, rgba(252,252,12,.12) 11% 11.5%, transparent 11.5% 22%),
    radial-gradient(64% 54% at 46% 42%, rgba(123,35,196,.46), transparent 74%);
  background-size:100% 100%;
}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .acto__escena{
      animation:entrar-salir linear both;
      animation-timeline:view();
      /* el gesto termina pronto: el resto del recorrido queda quieto y legible */
      animation-range:entry 6% entry 92%;
    }
    /* la textura viaja al revés: nace la profundidad */
    .acto__placa{
      animation:placa-contra linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 100%;
    }
  }
}

@keyframes entrar-salir{
  /* Entra bailando: sube, se asienta con una leve inclinación y se queda.
     NO se desvanece al salir — una sección visible con opacidad 0.14 es
     exactamente lo que se leía como «faltan fotos». */
  0%  {transform:translateY(38px) scale(.985) rotate(.5deg);  opacity:0}
  26% {transform:translateY(0)    scale(1)     rotate(-.12deg);opacity:1}
  62% {transform:translateY(-4px) scale(1.002) rotate(.08deg); opacity:1}
  100%{transform:translateY(-9px) scale(1)     rotate(0deg);   opacity:1}
}
@keyframes placa-contra{
  /* deriva lenta en contra del scroll: da profundidad sin parpadeo */
  0%  {transform:scale(1.16) translateY(-4%)}
  50% {transform:scale(1.03) translateY(0)}
  100%{transform:scale(1.14) translateY(4%)}
}

/* respaldo para navegadores sin animaciones ligadas al scroll:
   se revela una vez con IntersectionObserver, desde un estado visible */
.acto__escena[data-revelar]{
  transition:transform 1.15s var(--ease-cine),opacity 1.15s var(--ease-cine),filter 1.15s var(--ease-cine);
}
@supports not (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .acto__escena[data-revelar]{transform:translateY(26px) scale(.99);opacity:.35}
    .acto__escena[data-revelar].dentro{transform:none;opacity:1}
  }
}

/* ==========================================================================
   Salto por clic: la cámara se acerca y se aleja
   ========================================================================== */

/* View Transitions donde exista */
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vt-salir .46s var(--ease-cine) both}
  ::view-transition-new(root){animation:vt-entrar .58s var(--ease-cine) both}
}
@keyframes vt-salir{
  to{transform:scale(1.035);opacity:0;filter:blur(4px)}
}
@keyframes vt-entrar{
  from{transform:scale(.982);opacity:0;filter:blur(3px)}
}

/* respaldo: clase sobre <html> mientras se viaja */
html.viajando .lienzo{
  animation:zoom-viaje 1.15s var(--ease-danza) both;
}
@keyframes zoom-viaje{
  0%  {transform:scale(1)}
  40% {transform:scale(1.012);filter:blur(1.6px)}
  100%{transform:scale(1);filter:blur(0)}
}

/* destello al llegar al acto */
.acto.aterrizaje::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 42%,rgba(175,85,230,.3),transparent 70%);
  animation:aterrizar 1.5s var(--ease-danza) both;
}
@keyframes aterrizar{0%{opacity:0}30%{opacity:.55}100%{opacity:0}}

/* ==========================================================================
   Portada
   ========================================================================== */

.portada{
  position:relative;
  min-height:min(96svh,900px);
  display:grid;
  place-items:center;
  /* abajo hay espacio reservado para «Desliza» (≈110 px con su línea):
     sin esto, la línea de sedes —que ahora nombra dos recintos— cae encima */
  padding-block:clamp(120px,15vh,190px) clamp(128px,16vh,170px);
  text-align:center;
  /* coordenadas del puntero, las escribe el JS: -1 … 1 */
  --px:0; --py:0; --lx:50%; --ly:42%; --luz:0;
  overflow:hidden;
  scroll-snap-align:start;
}
.portada__fondo{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(5,1,16,.58),rgba(5,1,16,.82) 58%,var(--obsidiana)),
    var(--img-hero) center/cover no-repeat;
  transform-origin:50% 42%;
  animation:portada-respira 30s var(--ease) infinite alternate;
}
@keyframes portada-respira{
  0%{transform:scale(1.1)}100%{transform:scale(1.26)}
}
.portada__halo{
  position:absolute;
  left:50%;top:44%;
  width:min(150vw,1500px);aspect-ratio:1;
  translate:-50% -50%;
  z-index:2;pointer-events:none;
  background:radial-gradient(circle,rgba(252,252,12,.13),rgba(175,85,230,.15) 32%,transparent 62%);
  animation:halo-late 7.5s ease-in-out infinite;
}
@keyframes halo-late{
  0%,100%{opacity:.6;transform:scale(.95)}
  50%    {opacity:1; transform:scale(1.06)}
}

.portada__in{position:relative;z-index:4;display:grid;justify-items:center;gap:clamp(20px,2.4vw,34px)}

.portada__logo{
  width:min(86vw,760px);
  max-width:100%;
  height:auto;
  /* Sin filter. Dos drop-shadow de 56 y 120 px sobre una imagen de este
     tamaño obligan al móvil a rasterizar una textura enorme, y cuando no
     le alcanza la pinta como un recuadro blanco. El resplandor va detrás,
     en .portada__resplandor, que es un degradado y no cuesta nada. */
  position:relative;
  z-index:2;
  /* parte visible: si la animación no llega a correr, el logo se ve igual */
  opacity:1;
  animation:logo-llega 1.7s var(--ease-danza) var(--portal) both;
}

/* el resplandor del logotipo, como capa propia */
.portada__marco{
  position:relative;
  display:grid;
  place-items:center;
  margin:0;
  isolation:isolate;
}
.portada__marco::before{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:132%;
  aspect-ratio:2.4;
  translate:-50% -50%;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(closest-side ellipse, rgba(175,85,230,.42), transparent 72%),
    radial-gradient(closest-side ellipse at 42% 54%, rgba(21,152,245,.28), transparent 76%);
  animation:resplandor 8s ease-in-out infinite;
}
@keyframes resplandor{
  0%,100%{opacity:.75;transform:scale(.97)}
  50%    {opacity:1;  transform:scale(1.04)}
}



.portada__tesis{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(21px,3vw,42px);
  line-height:1.34;
  max-width:26ch;
  color:var(--hueso);
  animation:subir 1.5s calc(var(--portal) + .58s) var(--ease-cine) both;
}
.portada__tesis em{font-style:italic;color:var(--cian)}
@keyframes logo-llega{
  /* sólo opacity y transform: se compositan en GPU y no piden rasterizar
     ninguna textura extra, así que el móvil no se queda sin memoria */
  0%  {opacity:0;transform:scale(1.14)}
  100%{opacity:1;transform:scale(1)}
}

@keyframes subir{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.portada__kicker{
  font-family:var(--sans);font-size:10px;font-weight:500;
  letter-spacing:.34em;text-transform:uppercase;color:var(--violeta);
  animation:subir 1.4s calc(var(--portal) + .34s) var(--ease-cine) both;
}
.portada__btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;animation:subir 1.5s calc(var(--portal) + .8s) var(--ease-cine) both}
.portada__sede{
  font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--hueso-mute);animation:subir 1.5s calc(var(--portal) + .98s) var(--ease-cine) both;
}

.desliza{
  position:absolute;left:50%;bottom:clamp(18px,3vh,38px);translate:-50% 0;z-index:5;
  display:grid;justify-items:center;gap:9px;
  font-family:var(--sans);font-size:9px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--hueso-tenue);
  animation:subir 1.4s calc(var(--portal) + 1.3s) var(--ease-cine) both;
  pointer-events:none;
}
.desliza i{display:block;width:1px;height:46px;background:linear-gradient(180deg,var(--violeta),transparent);animation:caer 2.4s var(--ease) infinite}
@keyframes caer{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ==========================================================================
   Rejillas de contenido
   ========================================================================== */

.dos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,88px);align-items:start}
.dos--peso{grid-template-columns:1.05fr .95fr}

.datos{display:grid;gap:0;margin:clamp(24px,3vw,40px) 0 0;border-top:1px solid var(--linea)}
.dato{
  display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:baseline;
  padding-block:15px;border-bottom:1px solid var(--linea);
}
.dato dt{
  font-family:var(--sans);font-size:9.5px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--violeta);white-space:nowrap;
}
.dato dd{margin:0;font-family:var(--serif);font-size:clamp(16px,1.5vw,21px);color:var(--hueso)}

/* ficha con retrato de textura */
.retrato{
  position:relative;overflow:hidden;
  border:1px solid var(--linea);
  aspect-ratio:4/5;
  background:var(--noche);
}
.retrato img{width:100%;height:100%;object-fit:cover;transition:transform 1.5s var(--ease-cine),filter 1.5s var(--ease)}
.retrato:hover img{transform:scale(1.07);filter:saturate(1.2)}
.retrato figcaption{
  position:absolute;inset:auto 0 0;padding:clamp(14px,1.6vw,22px);
  background:linear-gradient(180deg,transparent,rgba(5,1,16,.94));
  font-family:var(--sans);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--hueso-mute);
}

/* ==========================================================================
   Cartelera
   ========================================================================== */

.funcion{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  gap:clamp(12px,1.8vw,30px);
  align-items:center;
  padding-block:clamp(17px,1.9vw,26px);
  padding-inline:0;
  border-bottom:1px solid var(--linea);
  transition:padding-inline .5s var(--ease),background .5s var(--ease);
}
.funcion:first-child{border-top:1px solid var(--linea)}
.funcion:hover{background:rgba(175,85,230,.07);padding-inline:14px}
.funcion__fecha{
  font-family:var(--serif);font-size:clamp(25px,2.6vw,42px);
  line-height:1;color:var(--cian);min-width:82px;
}
.funcion__fecha small{
  display:block;font-family:var(--sans);font-size:9px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--hueso-mute);margin-top:7px;
}
.funcion__nombre{font-family:var(--caps);font-weight:400;font-size:clamp(14px,1.5vw,20px);letter-spacing:.03em;color:var(--hueso)}
.funcion__sede{font-family:var(--sans);font-size:11.5px;color:var(--hueso-mute);margin-top:5px}
.funcion__estado{
  font-family:var(--sans);font-size:9px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  padding:6px 13px;border:1px solid var(--linea);color:var(--violeta);white-space:nowrap;
}
.funcion__estado[data-estado="pocos"]{border-color:rgba(252,252,12,.45);color:var(--amarillo)}
.funcion__estado[data-estado="agotado"]{border-color:rgba(237,230,214,.16);color:var(--hueso-tenue)}
.funcion__estado[data-estado="gratuito"]{border-color:rgba(45,205,251,.5);color:var(--cian)}
.funcion__libre{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--cian);justify-self:end}

/* ==========================================================================
   Galería del montaje — encaje editorial
   ========================================================================== */

.galeria{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(124px,14.5vw,208px);
  gap:clamp(7px,.9vw,15px);
}
.galeria figure{position:relative;margin:0;overflow:hidden;background:var(--noche);border:1px solid rgba(175,85,230,.14)}
.galeria figure:nth-child(1){grid-column:span 2;grid-row:span 2}
.galeria figure:nth-child(4){grid-column:span 2}
.galeria img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease-cine),filter 1s var(--ease)}
.galeria figure:hover img{transform:scale(1.09);filter:saturate(1.25) brightness(1.06)}
.galeria figcaption{
  position:absolute;inset:auto 0 0;padding:12px 14px;
  background:linear-gradient(180deg,transparent,rgba(5,1,16,.92));
  font-family:var(--sans);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--hueso-mute);opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.galeria figure:hover figcaption,.galeria figure:focus-within figcaption{opacity:1;transform:none}

/* ==========================================================================
   Boletos
   ========================================================================== */

.zonas{display:grid;gap:0;border-top:1px solid var(--linea)}
.zona{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding-block:17px;border-bottom:1px solid var(--linea);
  transition:padding-inline .45s var(--ease),background .45s var(--ease);
}
.zona:hover{background:rgba(21,152,245,.07);padding-inline:12px}
.zona__nombre{font-family:var(--caps);font-size:clamp(14px,1.4vw,18px);letter-spacing:.04em;color:var(--hueso)}
.zona__desc{font-family:var(--sans);font-size:12px;color:var(--hueso-mute);margin-top:4px;max-width:40ch}
.zona__precio{font-family:var(--serif);font-size:clamp(20px,1.9vw,29px);color:var(--cian);white-space:nowrap}

.formulario{
  border:1px solid var(--linea);
  background:linear-gradient(168deg,rgba(21,8,54,.9),rgba(5,1,16,.72));
  padding:clamp(22px,2.6vw,38px);
  display:grid;gap:16px;
}
.campo{display:grid;gap:7px}
.campo label{
  font-family:var(--sans);font-size:9.5px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--violeta);
}
.campo input,.campo select{
  appearance:none;
  background:rgba(5,1,16,.6);
  border:1px solid var(--linea);
  color:var(--hueso);
  font-family:var(--sans);font-size:14.5px;
  padding:12px 14px;border-radius:0;
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
.campo input:hover,.campo select:hover{border-color:var(--linea-fuerte)}
.campo select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M0 0h11L5.5 7z' fill='%23AF55E6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;
}
.campo--par{grid-template-columns:1fr 1fr;gap:14px}
.nota-maqueta{
  font-family:var(--sans);font-size:11.5px;line-height:1.6;
  color:var(--hueso-tenue);
  border-left:1px solid rgba(252,252,12,.4);
  padding-left:14px;margin:18px 0 0;max-width:56ch;
}

/* ==========================================================================
   Prensa
   ========================================================================== */

.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:clamp(14px,1.8vw,26px)}
.tarjeta{
  border:1px solid var(--linea);
  padding:clamp(20px,2.2vw,32px);
  background:linear-gradient(168deg,rgba(21,8,54,.55),transparent);
  transition:border-color .55s var(--ease),transform .55s var(--ease-cine),background .55s var(--ease);
}
.tarjeta:hover{
  border-color:var(--linea-fuerte);transform:translateY(-5px);
  background:linear-gradient(168deg,rgba(21,8,54,.9),rgba(11,4,32,.4));
}
.tarjeta h3{
  font-family:var(--caps);font-weight:400;font-size:clamp(15px,1.5vw,20px);
  letter-spacing:.04em;margin:0 0 11px;color:var(--hueso);
}
.tarjeta p{font-size:14.5px;color:var(--hueso-mute);margin:0}
.tarjeta .fuente{
  font-family:var(--sans);font-size:9.5px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--violeta);display:block;margin-bottom:10px;
}

/* ==========================================================================
   Pie
   ========================================================================== */

.pie{
  position:relative;z-index:3;
  border-top:1px solid var(--linea);
  padding-block:clamp(48px,6vw,84px) clamp(26px,3vw,40px);
  margin-top:clamp(40px,6vw,90px);
}
.pie__rejilla{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(26px,4vw,64px)}
.pie h4{
  font-family:var(--sans);font-size:9.5px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--violeta);margin:0 0 16px;
}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pie ul a{font-size:14px;color:var(--hueso-mute);transition:color .35s var(--ease)}
.pie ul a:hover{color:var(--cian)}
.pie__marca img{height:40px;width:auto;margin-bottom:16px;filter:drop-shadow(0 0 16px rgba(175,85,230,.45))}
.pie__nota{font-size:13.5px;color:var(--hueso-mute);max-width:44ch;margin:0}
.pie__fin{
  display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;
  margin-top:clamp(34px,4vw,60px);padding-top:22px;border-top:1px solid var(--linea);
  font-family:var(--sans);font-size:11px;letter-spacing:.1em;color:var(--hueso-tenue);
}

/* ==========================================================================
   Barra de progreso
   ========================================================================== */
.progreso{
  position:fixed;inset:0 0 auto;height:2px;z-index:70;
  background:linear-gradient(90deg,var(--violeta),var(--azul) 46%,var(--cian));
  transform-origin:0 50%;transform:scaleX(0);
}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .progreso{animation:avanzar linear both;animation-timeline:scroll(root block)}
    @keyframes avanzar{to{transform:scaleX(1)}}
  }
}

/* ==========================================================================
   Adaptación
   ========================================================================== */

@media (max-width:1000px){
  .dos,.dos--peso{grid-template-columns:1fr;gap:34px}
  .pie__rejilla{grid-template-columns:1fr 1fr}
  .pie__marca{grid-column:1 / -1}
  
}
@media (max-width:640px){
  body{font-size:16px}
  html{scroll-snap-type:none}
  .galeria{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(116px,32vw,170px)}
  .galeria figure:nth-child(1){grid-column:span 2;grid-row:span 1}
  .galeria figure:nth-child(4){grid-column:span 2}
  .funcion{grid-template-columns:auto 1fr;row-gap:12px}
  .funcion__estado{grid-column:1}
  .funcion .btn{grid-column:2;justify-self:end}
  .campo--par{grid-template-columns:1fr}
  .pie__rejilla{grid-template-columns:1fr}
  .cita{padding-left:16px}
}

/* --- encabezado en pantallas angostas ---------------------------------
   A 375 px la marca, el conmutador y el botón no caben en una fila; sin
   permitir que encojan, el flex forzaba su ancho mínimo y el documento
   entero heredaba ese desbordamiento. */
@media (max-width:760px){
  .barra .in{gap:10px}
  .marca small{display:none}
  .marca img{height:30px}
  .marca b{font-size:17px;letter-spacing:.12em}
  .acciones{gap:8px}
  .acciones .btn{padding:12px 16px;font-size:10px;letter-spacing:.14em}
  .idioma button{padding:6px 9px;font-size:9.5px}
}
@media (max-width:400px){
  .marca b{font-size:15px;letter-spacing:.08em}
  .marca img{height:26px}
  .acciones .btn{padding:10px 12px}
  .portada__btns .btn{width:100%;justify-content:center}
}


/* impresión: sin escenografía */
@media print{
  body::before,body::after,.acto__placa,.portada__fondo,.portada__halo,.barra,.progreso,.desliza{display:none!important}
  body{background:#fff;color:#111}
  .acto__escena{transform:none!important;opacity:1!important;filter:none!important}
}

/* ==========================================================================
   EL VIAJE — las cuatro regiones
   La escenografía se fija con position:sticky: la cámara se queda quieta
   y el mundo cambia alrededor. Cada región trae su propio tinte, tomado
   de la paleta del logotipo, para que entrar en ella se sienta distinto.
   ========================================================================== */

.viaje{position:relative}

.region{
  position:relative;
  /* alta a propósito: da recorrido para que la escenografía se sostenga
     fijada mientras el texto pasa por encima */
  min-height:190svh;
  overflow:clip;              /* clip recorta sin crear contenedor de scroll */
  isolation:isolate;
  --tinte:var(--violeta);
  --tinte-2:var(--violeta-brasa);
}

/* tinte propio de cada festival */
#guelaguetza   {--tinte:#AF55E6;--tinte-2:#7B23C4}   /* pluma, violeta */
#dia-de-muertos{--tinte:#2DCDFB;--tinte-2:#0B3E8C}   /* escama, cian y azul */
#carnaval-de-veracruz{--tinte:#F5399B;--tinte-2:#8E1E6B}   /* magenta de carnaval */
#romeria       {--tinte:#FCFC0C;--tinte-2:#8A6F1A}   /* el amarillo de los ojos */

/* la escenografía: se queda fijada mientras dura la región */
.region__escena{
  position:sticky;
  top:0;
  height:100svh;
  overflow:clip;
  z-index:1;
}
.region__foto{
  position:absolute;inset:0;
  transform-origin:50% 44%;
  will-change:transform;
}
.region__foto img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(1.06) contrast(1.03);
}
/* velo + tinte: la foto tiene que sostener texto encima */
.region__velo{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(188deg,rgba(5,1,16,.82) 0%,rgba(5,1,16,.2) 34%,rgba(5,1,16,.78) 74%,var(--obsidiana) 100%),
    radial-gradient(86% 60% at 16% 90%,color-mix(in srgb,var(--tinte-2) 62%,transparent),transparent 72%);
}
@supports not (color: color-mix(in srgb,red,blue)){
  .region__velo{background:linear-gradient(188deg,rgba(5,1,16,.82) 0%,rgba(5,1,16,.2) 34%,rgba(5,1,16,.78) 74%,var(--obsidiana) 100%)}
}
/* destello del tinte al cruzar el umbral de la región */
.region__umbral{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 55% at 50% 50%,var(--tinte),transparent 68%);
  opacity:0;mix-blend-mode:screen;
}

/* el texto viaja por encima de la escenografía fijada */
.region__in{
  position:relative;z-index:4;
  min-height:190svh;
  display:grid;align-items:center;
  padding-block:clamp(60px,12vh,150px);
  pointer-events:none;              /* deja pasar el cursor salvo en lo interactivo */
}
.region__in > *{pointer-events:auto}

.region__orden{
  font-family:var(--caps);font-weight:700;
  font-size:clamp(40px,8vw,120px);line-height:1;
  color:transparent;
  -webkit-text-stroke:1px color-mix(in srgb,var(--tinte) 60%,transparent);
  margin:0 0 4px;
}
@supports not (color: color-mix(in srgb,red,blue)){
  .region__orden{-webkit-text-stroke:1px rgba(175,85,230,.55)}
}
.region__lugar{
  font-family:var(--sans);font-size:10px;font-weight:500;
  letter-spacing:.34em;text-transform:uppercase;
  color:var(--tinte);margin:0 0 12px;
}
.region__nombre{
  font-family:var(--caps);font-weight:700;
  font-size:clamp(34px,7.4vw,104px);line-height:.96;
  letter-spacing:.01em;margin:0 0 clamp(16px,2vw,28px);
  color:var(--hueso);
  text-shadow:0 10px 50px rgba(5,1,16,.92);
}
.region__texto{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(17px,1.9vw,26px);line-height:1.55;
  max-width:44ch;color:var(--hueso);
  margin:0 0 clamp(18px,2.2vw,30px);
  text-shadow:0 2px 24px rgba(5,1,16,.9);
}

/* los cuadros que se bailan en esa región */
.cuadros{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.cuadros li{
  font-family:var(--sans);font-size:10px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--hueso-mute);
  border:1px solid color-mix(in srgb,var(--tinte) 34%,transparent);
  padding:8px 14px;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  background:rgba(5,1,16,.42);
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
.cuadros li:hover{color:var(--hueso);border-color:var(--tinte)}
@supports not (color: color-mix(in srgb,red,blue)){
  .cuadros li{border-color:var(--linea)}
}

/* --- el movimiento de cámara, ligado al scroll --- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .region__foto{
      animation:camara linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
    .region__umbral{
      animation:umbral linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 46%;
    }
    .region__in > div{
      animation:region-texto linear both;
      animation-timeline:view();
      animation-range:entry 16% cover 46%;
    }
  }
}
@keyframes camara{
  /* recorrido corto y continuo: la escenografía respira, no salta */
  0%  {transform:scale(1.15) translateY(-1.8%)}
  46% {transform:scale(1.015) translateY(0)}
  100%{transform:scale(1.11) translateY(1.8%)}
}
@keyframes umbral{
  0%  {opacity:.5}
  100%{opacity:0}
}
@keyframes region-texto{
  0%  {opacity:0;transform:translateY(40px) scale(.988)}
  70% {opacity:1;transform:translateY(0)    scale(1)}
  100%{opacity:1;transform:translateY(-3px) scale(1)}
}
@supports not (animation-timeline:view()){
  .region__foto{transform:scale(1.06)}
}

/* ==========================================================================
   Riel de ruta — sólo visible mientras se viaja
   Guelaguetza · Día de Muertos · Carnaval de Veracruz · Romería
   ========================================================================== */

.ruta{
  position:fixed;
  left:50%;translate:-50% 0;
  bottom:clamp(14px,2.6vh,30px);
  z-index:58;
  display:flex;align-items:center;gap:clamp(6px,1vw,16px);
  padding:9px clamp(10px,1.4vw,18px);
  border:1px solid var(--linea);
  border-radius:999px;
  background:rgba(5,1,16,.82);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  opacity:0;transform:translateY(16px) scale(.96);pointer-events:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease-cine);
}
.ruta.visible{opacity:1;transform:none;pointer-events:auto}

.ruta a{
  display:flex;align-items:center;gap:7px;
  font-family:var(--sans);font-size:9.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--hueso-tenue);
  padding:5px 9px;border-radius:999px;
  transition:color .4s var(--ease),background .4s var(--ease);
  white-space:nowrap;
}
.ruta a i{
  width:5px;height:5px;border-radius:50%;
  background:currentColor;opacity:.5;flex-shrink:0;
  transition:opacity .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease);
}
.ruta a:hover{color:var(--hueso)}
.ruta a[aria-current="true"]{color:var(--paso,var(--violeta))}
.ruta a[aria-current="true"] i{
  opacity:1;transform:scale(1.55);
  box-shadow:0 0 12px currentColor;
}
.ruta span.sep{width:clamp(8px,1.6vw,22px);height:1px;background:var(--linea);flex-shrink:0}

.ruta a:nth-of-type(1){--paso:#AF55E6}
.ruta a:nth-of-type(2){--paso:#2DCDFB}
.ruta a:nth-of-type(3){--paso:#F5399B}
.ruta a:nth-of-type(4){--paso:#FCFC0C}

@media (max-width:560px){
  .ruta a span{display:none}
  .ruta{gap:4px;padding:8px 12px}
  .ruta span.sep{width:10px}
}

/* ==========================================================================
   Personajes
   ========================================================================== */

.personajes{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea)}
.personaje{
  background:var(--obsidiana);
  padding:clamp(20px,2.2vw,32px);
  transition:background .55s var(--ease);
}
.personaje:hover{background:var(--noche)}
.personaje h3{
  font-family:var(--caps);font-weight:700;font-size:clamp(17px,1.8vw,24px);
  letter-spacing:.03em;margin:0 0 6px;color:var(--hueso);
}
.personaje .papel{
  font-family:var(--sans);font-size:9.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--violeta);
  display:block;margin-bottom:13px;
}
.personaje p{font-size:14.5px;color:var(--hueso-mute);margin:0;line-height:1.66}

/* ==========================================================================
   Llorona — la canción
   ========================================================================== */

.cancion{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:clamp(14px,2vw,32px) clamp(26px,4vw,64px);
  margin-top:clamp(24px,3vw,44px);
}
.cancion p{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(16px,1.5vw,20px);line-height:1.62;
  color:var(--hueso);margin:0;
  padding-left:16px;border-left:1px solid rgba(175,85,230,.3);
  transition:border-color .5s var(--ease),color .5s var(--ease);
}
.cancion p:hover{border-left-color:var(--cian)}
.cancion p span{display:block;color:var(--hueso-mute)}

/* ==========================================================================
   Ficha creativa
   ========================================================================== */

.ficha{display:grid;gap:0;border-top:1px solid var(--linea);margin-top:clamp(22px,2.6vw,38px)}
.ficha__fila{
  display:grid;grid-template-columns:minmax(180px,.9fr) 1.1fr;
  gap:6px 26px;align-items:baseline;
  padding-block:15px;border-bottom:1px solid var(--linea);
  transition:padding-inline .45s var(--ease),background .45s var(--ease);
}
.ficha__fila:hover{background:rgba(175,85,230,.06);padding-inline:12px}
.ficha__fila dt{
  font-family:var(--sans);font-size:9.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--violeta);
}
.ficha__fila dd{
  margin:0;font-family:var(--serif);font-size:clamp(16px,1.6vw,22px);
  color:var(--hueso);
}

/* ==========================================================================
   Contacto oficial
   ========================================================================== */

.contacto{display:grid;gap:14px;margin-top:clamp(20px,2.4vw,34px)}
.contacto a{
  display:flex;align-items:baseline;gap:14px;
  padding-block:13px;border-bottom:1px solid var(--linea);
  color:var(--hueso);transition:padding-inline .45s var(--ease),background .45s var(--ease)}
.contacto a:hover{background:rgba(21,152,245,.07);padding-inline:12px}
.contacto b{
  font-family:var(--sans);font-size:9.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--violeta);
  min-width:96px;flex-shrink:0;
}
.contacto span{font-family:var(--serif);font-size:clamp(16px,1.6vw,21px);color:var(--cian)}

@media (max-width:640px){
  .region{min-height:150svh}
  .region__in{min-height:150svh}
  .ficha__fila{grid-template-columns:1fr;gap:3px}
  .contacto a{flex-direction:column;gap:4px}
  .contacto b{min-width:0}
}

/* ==========================================================================
   MEXICA EXPERIENCE — los paquetes de curso
   Son dos, así que se tratan como dos piezas enfrentadas, no como tarjetas
   de catálogo. El precio manda en la jerarquía porque es lo que se compara.
   ========================================================================== */

.experiencia{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:clamp(14px,1.8vw,26px);
  margin-top:clamp(24px,3vw,42px);
}
.paquete{
  position:relative;
  border:1px solid var(--linea);
  padding:clamp(24px,2.6vw,38px);
  background:linear-gradient(168deg,rgba(21,8,54,.72),rgba(5,1,16,.5));
  display:grid;align-content:start;gap:16px;
  transition:border-color .55s var(--ease),transform .55s var(--ease-cine),background .55s var(--ease);
}
.paquete:hover{
  border-color:var(--linea-fuerte);transform:translateY(-4px);
  background:linear-gradient(168deg,rgba(21,8,54,.95),rgba(11,4,32,.62));
}
.paquete--vip{border-color:rgba(252,252,12,.34)}
.paquete--vip:hover{border-color:rgba(252,252,12,.6)}

.paquete__precio{
  font-family:var(--caps);font-weight:700;
  font-size:clamp(40px,5.4vw,70px);line-height:1;
  letter-spacing:-.01em;margin:0;
  background:linear-gradient(104deg,var(--cian) 0%,var(--violeta) 54%,var(--violeta-brasa) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.paquete--vip .paquete__precio{
  background:linear-gradient(104deg,#FCFC0C 0%,#F5C518 46%,var(--violeta) 100%);
  -webkit-background-clip:text;background-clip:text;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .paquete__precio{color:var(--cian);-webkit-text-fill-color:currentColor}
  .paquete--vip .paquete__precio{color:var(--amarillo)}
}

.paquete__que{
  font-family:var(--sans);font-size:10px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--hueso-mute);
  margin:-8px 0 0;
}
.paquete__nombre{
  font-family:var(--caps);font-weight:700;font-size:clamp(17px,1.8vw,23px);
  letter-spacing:.04em;margin:0;color:var(--hueso);
}
.paquete__incluye{
  list-style:none;margin:0;padding:0;display:grid;gap:10px;
}
.paquete__incluye li{
  position:relative;padding-left:22px;
  font-size:14.5px;line-height:1.55;color:var(--hueso-mute);
}
.paquete__incluye li::before{
  content:"";position:absolute;left:2px;top:.62em;
  width:6px;height:6px;border-radius:50%;
  background:var(--violeta);
}
.paquete--vip .paquete__incluye li::before{background:var(--amarillo)}

/* la línea del evento al que pertenece el paquete */
.experiencia__evento{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;
  margin-top:clamp(22px,2.6vw,36px);
  padding-top:18px;border-top:1px solid var(--linea);
  font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--hueso-mute);
}
.experiencia__evento b{color:var(--cian);font-weight:500}
.experiencia__evento .invitada{color:var(--amarillo)}

/* la cartelera agrupada por año */
.anio-sep{
  display:flex;align-items:center;gap:16px;
  margin:clamp(26px,3vw,44px) 0 6px;
  font-family:var(--sans);font-size:10px;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;color:var(--violeta);
}
.anio-sep::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--linea),transparent)}
.funcion__nota{
  font-family:var(--sans);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--amarillo);margin-top:6px;
}

/* ==========================================================================
   Polvo de estrellas — el rastro del puntero y del dedo
   Lienzo fijo por encima de la escenografía y por debajo de la barra.
   pointer-events:none para no interceptar nada.
   ========================================================================== */
.polvo{
  position:fixed;
  inset:0;
  z-index:55;
  pointer-events:none;
  opacity:.85;
}

/* ==========================================================================
   Texturas en movimiento
   Cada motivo se mueve como se movería de verdad: el pelaje deriva, las
   escamas ondulan en hileras, la pluma corre a lo largo de la barba. Encima
   pasa un barrido de luz, que es lo que hace un cañón sobre una superficie.
   Todo con background-position y transform, sin repintar filtros costosos.
   ========================================================================== */

/* --- el patrón, además de derivar, se desliza --------------------------- */
.acto--pelaje  .acto__placa::before{animation:derivar 96s linear infinite alternate, manchas 150s linear infinite}
.acto--escama  .acto__placa::before{animation:derivar 96s linear infinite alternate, ondular 62s linear infinite}
.acto--magenta .acto__placa::before{animation:derivar 96s linear infinite alternate, ondular-inv 74s linear infinite}
.acto--pluma   .acto__placa::before{animation:derivar 96s linear infinite alternate, barbas 48s linear infinite}

/* el pelaje se desplaza en diagonal, como un lomo que se mueve */
@keyframes manchas{
  0%  {background-position:0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0}
  100%{background-position:26% 30%, -26% 30%, 26% -30%, -26% -30%, 26% 30%,
                           26% 30%, -26% 30%, 26% -30%, -26% -30%, 0 0, 0 0}
}
/* las escamas corren en hileras: el patrón avanza justo una celda, así que
   el ciclo es invisible y el movimiento continuo */
@keyframes ondular{
  0%  {background-position:0 0,          3.75% 2.7%,   0 0,          3.75% 2.7%,   0 0}
  100%{background-position:0 5.4%,       3.75% 8.1%,   0 5.4%,       3.75% 8.1%,   0 0}
}
@keyframes ondular-inv{
  0%  {background-position:0 0,          3.3% 2.4%,    0 0,          3.3% 2.4%,    0 0}
  100%{background-position:0 -4.8%,      3.3% -2.4%,   0 -4.8%,      3.3% -2.4%,   0 0}
}
/* la pluma corre a lo largo de sus barbas */
@keyframes barbas{
  0%  {background-position:0 0,     0 0,     0 0,   0 0}
  100%{background-position:3% 0,   -3% 0,    22% 0, 0 0}
}

/* --- barrido de luz, como un cañón cruzando la superficie -------------- */
.acto__placa::after{
  content:"";
  position:absolute;
  inset:-30% -60%;
  pointer-events:none;
  mix-blend-mode:overlay;
  opacity:.5;
  background:linear-gradient(74deg,
    transparent 38%,
    rgba(237,230,214,.16) 47%,
    rgba(45,205,251,.1) 50%,
    transparent 60%);
  animation:canon 26s var(--ease) infinite;
}
.acto--pelaje  .acto__placa::after{animation-duration:31s}
.acto--escama  .acto__placa::after{animation-duration:24s;animation-delay:-8s}
.acto--magenta .acto__placa::after{animation-duration:28s;animation-delay:-14s}
.acto--pluma   .acto__placa::after{animation-duration:22s;animation-delay:-5s}

@keyframes canon{
  0%,  100%{transform:translate3d(-38%,0,0)}
  50%      {transform:translate3d(38%,0,0)}
}

/* la escenografía de las regiones también recibe el cañón, más tenue */
.region__escena::after{
  content:"";
  position:absolute;inset:-20% -50%;
  pointer-events:none;z-index:3;
  mix-blend-mode:soft-light;
  opacity:.4;
  background:linear-gradient(78deg,
    transparent 40%,
    color-mix(in srgb, var(--tinte) 26%, transparent) 50%,
    transparent 60%);
  animation:canon 34s var(--ease) infinite;
}
@supports not (color: color-mix(in srgb,red,blue)){
  .region__escena::after{background:linear-gradient(78deg,transparent 40%,rgba(237,230,214,.12) 50%,transparent 60%)}
}



/* ==========================================================================
   PORTAL — el isotipo se abre y el inframundo se vuelve el sitio
   Línea de tiempo (2.7 s):
     0.0 – 0.4  el jaguar aparece, el vórtice se enciende
     0.4 – 1.2  los ojos laten, el jaguar respira
     1.2 – 2.3  la cámara entra girando por el entrecejo del jaguar
     1.8 – 2.7  se abre un iris en el centro y detrás está la portada
   Sólo transform, opacity y máscara: ningún filter, para que el móvil
   no rasterice texturas enormes.
   ========================================================================== */

@property --iris{
  syntax:'<percentage>';
  inherits:false;
  initial-value:0%;
}

.portal{
  position:fixed;inset:0;
  z-index:1000;
  display:grid;place-items:center;
  overflow:hidden;
  background:
    radial-gradient(60% 55% at 50% 52%, #120630 0%, #07021A 52%, var(--obsidiana) 100%);
  -webkit-mask-image:radial-gradient(circle at 50% 52%, transparent var(--iris), #000 calc(var(--iris) + 1.5%));
          mask-image:radial-gradient(circle at 50% 52%, transparent var(--iris), #000 calc(var(--iris) + 1.5%));
  animation:
    portal-iris 2.7s cubic-bezier(.7,0,.2,1) both,
    portal-fin 2.7s step-end both;
}
.sin-portal .portal{display:none}
.con-portal:not(.sin-portal){--portal:1.98s}

@keyframes portal-iris{
  0%, 68%{--iris:0%;  opacity:1}
  90%    {opacity:1}
  100%   {--iris:150%;opacity:0}
}
@keyframes portal-fin{
  0%  {visibility:visible;pointer-events:auto}
  100%{visibility:hidden; pointer-events:none}
}

/* salida anticipada cuando se toca «Entrar» */
.portal.portal--fin{
  animation:portal-cierre .75s cubic-bezier(.7,0,.2,1) both;
}
@keyframes portal-cierre{
  from{--iris:0%;  opacity:1;visibility:visible}
  to  {--iris:150%;opacity:0;visibility:hidden;pointer-events:none}
}

/* --- el vórtice ------------------------------------------------------- */
/* el contenedor escala y se enciende; la espiral de adentro gira sola.
   Separados porque dos animaciones sobre transform en el mismo nodo se pisan. */
.portal__vortice{
  position:absolute;
  width:170vmax;height:170vmax;
  left:50%;top:52%;
  translate:-50% -50%;
  animation:vortice 2.7s cubic-bezier(.5,0,.3,1) both;
}
@keyframes vortice{
  0%  {transform:scale(.6);  opacity:0}
  18% {transform:scale(.92); opacity:.42}
  44% {transform:scale(1);   opacity:.62}
  86% {transform:scale(2.2); opacity:1}
  100%{transform:scale(2.7); opacity:.75}
}
.espiral{
  position:absolute;inset:0;
  /* todos los anillos giran juntos: así la espiral conserva su forma */
  animation:espiral 2.4s linear infinite;
}
@keyframes espiral{to{transform:rotate(-360deg)}}

.anillo{
  position:absolute;inset:0;border-radius:50%;
  background:
    repeating-conic-gradient(from var(--desde,0deg),
      rgba(175,85,230,.5) 0deg 3.2deg,
      transparent 3.2deg 20deg,
      rgba(21,152,245,.42) 20deg 22.6deg,
      transparent 22.6deg 40deg,
      rgba(45,205,251,.38) 40deg 41.4deg,
      transparent 41.4deg 60deg);
  -webkit-mask-image:radial-gradient(closest-side, transparent var(--r1), #000 calc(var(--r1) + .6%), #000 calc(var(--r2) - .6%), transparent var(--r2));
          mask-image:radial-gradient(closest-side, transparent var(--r1), #000 calc(var(--r1) + .6%), #000 calc(var(--r2) - .6%), transparent var(--r2));
}

/* la garganta oscura y el desvanecido hacia los bordes */
.portal__vortice::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(closest-side,
      #000 0%, rgba(5,1,16,.94) 6%, rgba(11,4,32,.5) 20%, transparent 40%,
      transparent 62%, rgba(5,1,16,.7) 88%, var(--obsidiana) 100%);
}

/* --- brasas absorbidas hacia el centro -------------------------------- */
.portal__brasas{
  position:absolute;
  width:120vmax;height:120vmax;
  left:50%;top:52%;translate:-50% -50%;
  border-radius:50%;
  background:
    radial-gradient(circle at 18% 30%, rgba(252,252,12,.9) 0 .18%, transparent .3%),
    radial-gradient(circle at 76% 22%, rgba(45,205,251,.9) 0 .16%, transparent .28%),
    radial-gradient(circle at 84% 64%, rgba(175,85,230,.9) 0 .2%,  transparent .32%),
    radial-gradient(circle at 30% 78%, rgba(21,152,245,.9) 0 .16%, transparent .28%),
    radial-gradient(circle at 58% 12%, rgba(175,85,230,.8) 0 .14%, transparent .26%),
    radial-gradient(circle at 10% 58%, rgba(45,205,251,.8) 0 .14%, transparent .26%),
    radial-gradient(circle at 64% 88%, rgba(252,252,12,.7) 0 .12%, transparent .24%),
    radial-gradient(circle at 92% 40%, rgba(21,152,245,.8) 0 .14%, transparent .26%),
    radial-gradient(circle at 42% 36%, rgba(175,85,230,.7) 0 .1%,  transparent .2%),
    radial-gradient(circle at 36% 60%, rgba(45,205,251,.7) 0 .1%,  transparent .2%);
  animation:absorber 2.7s cubic-bezier(.55,0,.4,1) both;
}
@keyframes absorber{
  0%  {transform:scale(1.5) rotate(0deg);   opacity:0}
  16% {opacity:1}
  80% {transform:scale(.35) rotate(320deg); opacity:.9}
  100%{transform:scale(.05) rotate(420deg); opacity:0}
}

/* --- el latido de los ojos, detrás del isotipo ------------------------- */
.portal__ojo{
  position:absolute;left:50%;top:50%;
  width:min(60vw,380px);aspect-ratio:1;
  translate:-50% -50%;
  border-radius:50%;
  background:radial-gradient(closest-side,
    rgba(252,252,12,.34), rgba(175,85,230,.22) 42%, transparent 72%);
  animation:ojo 2.7s ease-in-out both;
}
@keyframes ojo{
  0%  {transform:scale(.4); opacity:0}
  16% {transform:scale(1);  opacity:.8}
  26% {transform:scale(.9); opacity:.55}
  34% {transform:scale(1.08);opacity:1}
  44% {transform:scale(.95);opacity:.7}
  62% {transform:scale(1.6);opacity:.9}
  100%{transform:scale(7);  opacity:0}
}

/* --- el jaguar: aparece, respira y la cámara entra por su entrecejo ---- */
.portal__jaguar{
  position:relative;z-index:3;
  width:min(46vw,300px);
  transform-origin:50% 60%;
  will-change:transform,opacity;
  animation:jaguar 2.7s cubic-bezier(.62,0,.28,1) both;
}
.portal__jaguar img{width:100%;height:auto;display:block}
@keyframes jaguar{
  0%  {transform:scale(.55) rotate(-14deg);opacity:0}
  15% {transform:scale(1)   rotate(0deg);  opacity:1}
  30% {transform:scale(1.035) rotate(0deg);opacity:1}
  44% {transform:scale(1)   rotate(0deg);  opacity:1}
  58% {transform:scale(1.5) rotate(28deg); opacity:1}
  80% {transform:scale(7)   rotate(190deg);opacity:1}
  92% {transform:scale(11)  rotate(250deg);opacity:0}
  100%{transform:scale(11)  rotate(250deg);opacity:0}
}

/* --- «Entrar»: por si alguien no quiere esperar ------------------------ */
.portal__saltar{
  position:absolute;left:50%;bottom:clamp(22px,5vh,48px);translate:-50% 0;
  z-index:4;
  appearance:none;cursor:pointer;
  background:none;border:1px solid rgba(237,230,214,.22);border-radius:999px;
  color:var(--hueso-mute);
  font-family:var(--sans);font-size:10px;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;
  padding:9px 20px;
  animation:saltar 2.7s ease both;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.portal__saltar:hover{color:var(--hueso);border-color:var(--violeta)}
@keyframes saltar{
  0%, 20%{opacity:0}
  30%, 62%{opacity:1}
  72%, 100%{opacity:0}
}

/* sin movimiento: no hay portal */
/* mientras el portal está abierto no se desplaza la página (lo pone y lo
   quita el JS; si el JS no corre, nunca se bloquea) */
html.portal-abierto,html.portal-abierto body{overflow:hidden}


/* ==========================================================================
   Portada reactiva — el puntero mueve la escena
   El JS sólo escribe --px/--py (−1…1) y --lx/--ly (% del puntero); todo el
   movimiento lo resuelve el CSS. Se usan las propiedades individuales
   `translate` y `rotate`, que se suman a las animaciones de `transform`
   que ya corren en estas capas en lugar de pisarlas.
   ========================================================================== */

/* la fotografía se desliza al revés que el puntero: profundidad */
.portada__fondo{
  translate:calc(var(--px) * -24px) calc(var(--py) * -16px);
  transition:translate 1.2s var(--ease-danza);
}
/* el halo, a media distancia */
.portada__halo{
  translate:calc(-50% + var(--px) * 34px) calc(-50% + var(--py) * 24px);
  transition:translate 1s var(--ease-danza);
}
/* el logotipo se inclina hacia el puntero, como una pieza en vitrina */
.portada__marco{
  transform:perspective(1100px)
            rotateY(calc(var(--px) * 9deg))
            rotateX(calc(var(--py) * -7deg))
            translate3d(calc(var(--px) * 10px), calc(var(--py) * 8px), 0);
  transition:transform .8s var(--ease-danza);
  will-change:transform;
}
/* su resplandor se queda atrás: se lee la separación de planos */
.portada__marco::before{
  translate:calc(-50% + var(--px) * -30px) calc(-50% + var(--py) * -20px);
  transition:translate .9s var(--ease-danza);
}
/* los textos, apenas, en contra */
.portada__tesis,
.portada__kicker{
  translate:calc(var(--px) * -7px) calc(var(--py) * -5px);
  transition:translate 1s var(--ease-danza);
}

/* foco: una luz de cañón que sigue al puntero */
.portada__luz{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    radial-gradient(520px circle at var(--lx) var(--ly),
      rgba(175,85,230,.24), rgba(21,152,245,.12) 38%, transparent 64%),
    radial-gradient(160px circle at var(--lx) var(--ly),
      rgba(252,252,12,.07), transparent 70%);
  mix-blend-mode:screen;
  opacity:var(--luz);
  transition:opacity .7s var(--ease);
}


/* ==========================================================================
   Fotos de cada festival + visor
   ========================================================================== */
.region__in > div{min-width:0}
.fotos-festival{
  display:flex;gap:8px;list-style:none;
  margin:clamp(18px,2.2vw,30px) 0 0;padding:0 0 8px;
  max-width:min(100%,780px);
  overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:var(--tinte) transparent;
  -webkit-overflow-scrolling:touch;
}
.fotos-festival li{flex:0 0 auto;scroll-snap-align:start}
.fotos-festival button{
  display:block;padding:0;margin:0;cursor:zoom-in;overflow:hidden;
  background:var(--noche);
  border:1px solid color-mix(in srgb,var(--tinte) 34%,transparent);
  transition:border-color .4s var(--ease);
}
.fotos-festival button:hover,.fotos-festival button:focus-visible{border-color:var(--tinte)}
.fotos-festival img{
  display:block;width:auto;height:clamp(92px,11vw,140px);
  transition:transform 1s var(--ease-cine);
}
.fotos-festival button:hover img{transform:scale(1.06)}

.visor{padding:0;border:0;background:transparent;max-width:96vw;max-height:94vh;overflow:visible}
.visor::backdrop{background:rgba(5,1,16,.92)}
.visor img{display:block;max-width:96vw;max-height:94vh;width:auto;height:auto}
.visor form{position:absolute;top:-6px;right:-6px;margin:0;z-index:1}
.visor__cerrar{
  width:44px;height:44px;border:1px solid var(--linea);border-radius:50%;
  background:rgba(5,1,16,.8);color:var(--hueso);font-size:26px;line-height:1;cursor:pointer;
}
.region__escena .foco{z-index:3}
.retrato .foco{--foco-r:360px}
.galeria .foco{--foco-r:300px}
.fotos-festival .foco{--foco-r:150px}
.retrato figcaption,.galeria figcaption{z-index:2}

/* la foto se desliza al revés que el puntero (sólo mientras está encendida
   y ampliada por el :hover, para que nunca asome el borde) */
.retrato img{
  translate:calc(var(--px) * var(--luz) * -10px) calc(var(--py) * var(--luz) * -7px);
  transition:transform 1.5s var(--ease-cine),filter 1.5s var(--ease),translate 1.2s var(--ease-danza);
}
.galeria img{
  translate:calc(var(--px) * var(--luz) * -10px) calc(var(--py) * var(--luz) * -7px);
  transition:transform 1.6s var(--ease-cine),filter 1s var(--ease),translate 1.2s var(--ease-danza);
}
.fotos-festival img{
  translate:calc(var(--px) * var(--luz) * -3px) calc(var(--py) * var(--luz) * -2px);
  transition:transform 1s var(--ease-cine),translate 1.2s var(--ease-danza);
}
.region__foto{
  translate:calc(var(--px) * var(--luz) * -10px) calc(var(--py) * var(--luz) * -6px);
  transition:translate 1.2s var(--ease-danza);
}

/* ==========================================================================
   MEXICA Experience: aviso «para bailarines»
   ========================================================================== */
.aviso-bailarines{
  display:inline-block;margin:0 0 clamp(14px,1.8vw,22px);padding:11px 20px;
  font-family:var(--sans);font-size:clamp(12px,1.25vw,15px);font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:#fff;
  background:linear-gradient(104deg,var(--violeta-brasa),var(--azul));
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 12px 44px rgba(123,35,196,.4);
}

/* ==========================================================================
   Formulario de contacto (Contact Form 7)
   ========================================================================== */
.formulario{margin-top:clamp(30px,3.6vw,52px);max-width:820px}
.formulario > .plomo{margin:0 0 18px}
.formulario__rejilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px}
.formulario label{
  display:grid;gap:8px;
  font-family:var(--sans);font-size:9.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--violeta);
}
.formulario__mensaje{margin-top:18px}
.formulario .wpcf7-form-control-wrap{display:block}
.formulario input:not([type=submit]),.formulario select,.formulario textarea{
  width:100%;box-sizing:border-box;margin:0;
  font-family:var(--serif);font-size:17px;letter-spacing:0;text-transform:none;
  color:var(--hueso);background:rgba(5,1,16,.55);
  border:1px solid var(--linea);border-radius:0;padding:12px 14px;
  color-scheme:dark;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.formulario select option{background:var(--noche);color:var(--hueso)}
.formulario input:not([type=submit]):focus,.formulario select:focus,.formulario textarea:focus{
  outline:none;border-color:var(--cian);background:rgba(21,152,245,.06);
}
.formulario textarea{min-height:150px;resize:vertical}
.formulario .wpcf7-submit{margin-top:22px;cursor:pointer}
.formulario .wpcf7-spinner{vertical-align:middle;margin-top:22px}
.formulario .wpcf7-not-valid-tip{
  margin-top:6px;font-family:var(--sans);font-size:12px;
  letter-spacing:.04em;text-transform:none;color:#F5399B;
}
.formulario .wpcf7 form .wpcf7-response-output{
  margin:20px 0 0;padding:12px 14px;border:1px solid var(--linea);
  font-family:var(--sans);font-size:14px;color:var(--hueso);
}
.formulario .wpcf7 form.sent .wpcf7-response-output{border-color:var(--cian)}
.formulario .wpcf7 form.invalid .wpcf7-response-output,
.formulario .wpcf7 form.failed .wpcf7-response-output,
.formulario .wpcf7 form.spam .wpcf7-response-output{border-color:#F5399B}
@media (max-width:640px){.formulario__rejilla{grid-template-columns:1fr}}

/* retrato sin recorte: la foto se muestra completa, en su proporción */
.retrato--completo{aspect-ratio:auto}
.retrato--completo img{height:auto;display:block}

/* Ficha creativa con retrato del director general */
.dos--ficha{grid-template-columns:1.45fr .85fr}
.retrato-enlace{display:block;position:sticky;top:clamp(90px,12vh,130px);color:inherit}
.retrato-enlace figcaption{transition:color .4s var(--ease)}
.retrato-enlace:hover figcaption{color:var(--hueso)}
@media (max-width:1100px){
  .dos--ficha{grid-template-columns:1fr}
  .retrato-enlace{position:static;max-width:460px}
}

@media (max-width:640px){.funcion__libre{grid-column:2}}

/* carteles: se leen completos — sin recorte, sin zoom, sin deriva, y el
   pie va debajo en lugar de encima del texto del cartel */
.retrato--cartel{aspect-ratio:auto;overflow:visible;border:0;background:none}
.retrato--cartel img,
.retrato--cartel:hover img{
  height:auto;display:block;object-fit:contain;
  transform:none;translate:none;filter:none;
  border:1px solid var(--linea);
}
.retrato--cartel figcaption{position:static;background:none;padding:12px 2px 0}

/* carteles de MEXICA Experience: completos, uno sobre otro, se amplían al tocar */
.carteles{display:grid;gap:clamp(18px,2.2vw,30px);align-content:start}
.cartel__abrir{display:block;width:100%;padding:0;margin:0;border:0;background:none;cursor:zoom-in}
.cartel__abrir:focus-visible{outline:2px solid var(--cian);outline-offset:4px}
.retrato--cartel .foco{display:none}

/* crédito del pie: texto arcoíris que fluye */
.pie__credito{white-space:nowrap}
.arcoiris{
  font-weight:600;letter-spacing:.02em;
  background:linear-gradient(90deg,#FF2D55,#FF3BB0,#C13BFF,#8A3FFC,#C13BFF,#FF3BB0,#FF2D55);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:arcoiris 6s linear infinite;
  transition:filter .35s var(--ease);
}
.arcoiris:hover{filter:brightness(1.25) saturate(1.2);text-decoration:none}
@keyframes arcoiris{from{background-position:0% 50%}to{background-position:300% 50%}}
.hamburguesa span{
  display:block;position:absolute;left:0;
  width:100%;height:2px;background:var(--hueso);
  border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s;
}
.hamburguesa span:nth-child(1){top:0}
.hamburguesa span:nth-child(2){top:11px}
.hamburguesa span:nth-child(3){top:22px}
.hamburguesa[aria-expanded="true"] span:nth-child(1){transform:translateY(11px) rotate(45deg)}
.hamburguesa[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburguesa[aria-expanded="true"] span:nth-child(3){transform:translateY(-11px) rotate(-45deg)}

/* ─── Mobile menu overlay (outside .barra) ─── */
.menu-movil{
  display:none;
  position:fixed;inset:0;
  z-index:200;
  background:#000;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.menu-movil.is-open{display:flex}
.menu-movil__logo{display:block;width:180px;margin-bottom:32px}
.menu-movil__logo img{width:100%;height:auto}
.menu-movil ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;
  align-items:center;gap:24px;
}
.menu-movil a{
  font-family:var(--caps);
  font-size:20px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--hueso);text-decoration:none;
  transition:color .2s;
}
.menu-movil a:hover{color:var(--violeta)}
.menu-movil__pie{
  display:flex;align-items:center;gap:16px;
  margin-top:48px;
}
.menu-movil__pie .idioma button{
  background:none;border:1px solid var(--linea);
  color:var(--hueso);padding:6px 10px;
  font-size:11px;cursor:pointer;border-radius:3px;
  font-family:var(--caps);letter-spacing:.1em;
}
.menu-movil__pie .idioma button[aria-pressed="true"]{
  background:var(--violeta-hondo);border-color:var(--violeta);
}

@media(max-width:1000px){
  .hamburguesa{display:block}
  .menu,.acciones{display:none}
}