/* colores de barra animables: la barra toma el color de la sección activa con un fundido */
@property --now1{syntax:"<color>";inherits:true;initial-value:#4a1a72}
@property --now2{syntax:"<color>";inherits:true;initial-value:#1f0c30}
@property --hn1{syntax:"<color>";inherits:true;initial-value:rgba(64,24,96,.62)}
@property --hn2{syntax:"<color>";inherits:true;initial-value:rgba(30,12,44,.62)}
/* Header: cuatro versiones sobre el mismo marcado, elegidas con <html data-header="…">
   actual      la barra de caja completa (la de antes, para comparar)
   isla        A · píldora flotante centrada, indicador que se desliza, se esconde al bajar
   boleto      B · logo suelto, píldora de enlaces al centro y CTA con forma de boleto
   marquesina  C · cinta con el line up corriendo, logo al centro y menú a pantalla completa */

.nav{position:fixed;inset:0 0 auto;z-index:50;pointer-events:none;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.nav-bar{pointer-events:auto;display:flex;align-items:center;gap:24px}
.nav-ticker{display:none}
.nav-glass{display:none}
.nav-logo{display:flex;flex:none}
.nav-logo img{height:26px;width:auto}
.nav-links{position:relative;display:flex}
.nav-links a{position:relative;z-index:1;font:500 13px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:#e8dcd4;transition:color .25s}
.nav-links a:hover{color:var(--amber)}
.nav-indicator{display:none}
.nav-cta{flex:none;display:inline-flex;align-items:center;text-decoration:none;color:#fff;font:500 14px/1 var(--body)}
.cta-stub{display:none}
.nav-burger{display:none;align-items:center;gap:10px;height:40px;padding:0 14px 0 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.04);color:#fff;font:500 13px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.burger{position:relative;width:18px;height:10px}
.burger i{position:absolute;left:0;width:100%;height:1.5px;border-radius:2px;background:currentColor;transition:transform .35s,top .35s}
.burger i:first-child{top:0}.burger i:last-child{top:8.5px}
.menu-open .burger i:first-child{top:4.25px;transform:rotate(45deg)}
.menu-open .burger i:last-child{top:4.25px;transform:rotate(-45deg)}

/* ---------- actual ---------- */
[data-header="actual"] .nav-bar{position:relative;margin:12px 16px 0;height:60px;justify-content:space-between;padding:0 10px 0 20px;
  background:rgba(10,6,7,.72);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border:1px solid var(--line);border-radius:18px}
[data-header="actual"] .nav-links{gap:28px}
[data-header="actual"] .nav-cta{position:relative;min-height:40px;padding:0 20px;border-radius:999px;background:rgba(255,255,255,.03)}
[data-header="actual"] .nav-cta::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}

/* ---------- A · isla ---------- */
[data-header="isla"] .nav-bar{width:max-content;max-width:calc(100% - 24px);margin:14px auto 0;padding:7px 7px 7px 20px;gap:30px;border-radius:999px;
  background:rgba(14,9,10,.62);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 50px -20px rgba(0,0,0,.8);transition:padding .35s,gap .35s,background .35s}
[data-header="isla"] .nav-bar::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(100deg,transparent 10%,rgba(242,154,46,.7) 35%,rgba(212,42,124,.7) 60%,transparent 85%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.8}
[data-header="isla"] .nav-bar{position:relative}
[data-header="isla"] .nav-logo img{height:22px}
[data-header="isla"] .nav-links{gap:4px}
[data-header="isla"] .nav-links a{padding:11px 15px;border-radius:999px;font-size:12px}
[data-header="isla"] .nav-links a.is-active{color:#fff}
[data-header="isla"] .nav-indicator{display:block;position:absolute;z-index:0;top:0;left:0;height:100%;border-radius:999px;background:rgba(255,255,255,.09);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1),opacity .3s}
[data-header="isla"] .nav-cta{height:40px;padding:0 20px;border-radius:999px;background:var(--grad);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
[data-header="isla"] .is-scrolled .nav-bar{padding:5px 5px 5px 18px;gap:22px;background:rgba(10,6,7,.82)}
[data-header="isla"] .nav.is-hidden{transform:translateY(-130%)}

/* ---------- B · boleto ---------- */
[data-header="boleto"] .nav-bar{display:grid;grid-template-columns:1fr auto 1fr;margin:16px 22px 0;gap:20px}
[data-header="boleto"] .nav-logo{justify-self:start;padding:10px 0;filter:drop-shadow(0 4px 14px rgba(0,0,0,.6))}
[data-header="boleto"] .nav-logo img{height:33px}
[data-header="boleto"] .nav-bar{position:relative}
[data-header="boleto"] .nav-bar > :not(.nav-glass){position:relative;z-index:1}
/* la píldora de cristal: arriba sólo envuelve los enlaces; al hacer scroll se estira a los lados,
   mete el logo dentro y se para antes del boleto (las medidas las pone main.js) */
[data-header="boleto"] .nav-glass{display:block;position:absolute;z-index:0;top:50%;left:var(--g-left,0);width:var(--g-width,0);height:var(--g-height,46px);transform:translateY(-50%);
  border-radius:999px;background:linear-gradient(100deg,var(--hn1),var(--hn2));backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border:1px solid rgba(176,120,236,.24);
  transition:left .6s cubic-bezier(.2,.8,.2,1),width .6s cubic-bezier(.2,.8,.2,1),border-radius .6s cubic-bezier(.2,.8,.2,1),background .4s,opacity .3s}
[data-header="boleto"] .is-scrolled .nav-glass{border-radius:14px}
/* la píldora del header toma el color de la sección activa (lo pone main.js en --hn1/--hn2) */
[data-header="boleto"] .nav{--hn1:rgba(64,24,96,.62);--hn2:rgba(30,12,44,.62);transition:transform .45s cubic-bezier(.2,.8,.2,1),--hn1 .7s ease,--hn2 .7s ease}
[data-header="boleto"] .nav-bar .nav-indicator{display:none}
[data-header="boleto"] .nav-links{gap:2px;padding:5px;border:1px solid transparent}
[data-header="boleto"] .nav-links a{padding:11px 17px;border-radius:999px;font:500 15.5px/1 var(--display);letter-spacing:.07em}
[data-header="boleto"] .nav-links a.is-active{color:#fff}
/* efecto de la barra del móvil, sin el giro: resplandor del color del enlace que se desliza y onda al hacer clic */
[data-header="boleto"] .nav-indicator{display:block;position:absolute;z-index:0;top:-8px;left:0;height:calc(100% + 16px);border-radius:50%;background:radial-gradient(closest-side,var(--nc,#a46cf0),transparent);opacity:0;
  transition:transform .6s cubic-bezier(.45,1.35,.45,1),width .6s cubic-bezier(.45,1.35,.45,1),opacity .3s,background .3s}
[data-header="boleto"] .nav-indicator[style*="opacity: 1"]{opacity:.55!important}
[data-header="boleto"] .nav-ring{display:block;position:absolute;z-index:0;left:var(--rx,0);top:50%;width:40px;height:40px;margin:-20px;border-radius:50%;border:2px solid var(--nc,#fff);opacity:0;pointer-events:none}
[data-header="boleto"] .nav-links.is-rippling .nav-ring{animation:nav-ring .7s ease-out}
@keyframes nav-ring{0%{transform:scale(.4);opacity:1}100%{transform:scale(2.4);opacity:0}}

/* el CTA es un boleto de verdad: talón dorado con la fecha, perforación de puntos y mordidas
   arriba y abajo de la línea de corte. Cada mitad lleva su máscara; la sombra va en el padre
   (con filter, porque la máscara se comería un box-shadow). Versión anterior: _maquetas/boleto/ */
[data-header="boleto"] .nav-cta{justify-self:end;height:50px;font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  filter:drop-shadow(0 10px 16px rgba(205,34,59,.32)) drop-shadow(0 2px 3px rgba(0,0,0,.55));transition:transform .4s cubic-bezier(.2,.8,.2,1)}
[data-header="boleto"] .nav-cta:hover{transform:rotate(-2deg) translateY(-1px)}
[data-header="boleto"] .cta-stub,[data-header="boleto"] .cta-text{height:100%;
  -webkit-mask:var(--bite-t) top/100% 51% no-repeat,var(--bite-b) bottom/100% 51% no-repeat;mask:var(--bite-t) top/100% 51% no-repeat,var(--bite-b) bottom/100% 51% no-repeat}
[data-header="boleto"] .cta-stub{--bite-t:radial-gradient(circle 6px at 100% 0,#0000 96%,#000);--bite-b:radial-gradient(circle 6px at 100% 100%,#0000 96%,#000);
  display:grid;place-items:center;align-content:center;padding:0 13px 0 15px;border-radius:9px 3px 3px 9px;color:#2b1206;
  background:linear-gradient(180deg,rgba(255,255,255,.35),transparent 50%),linear-gradient(150deg,#f6c25a,var(--gold) 55%,#b57b25);font:600 21px/.9 var(--display)}
[data-header="boleto"] .cta-stub small{font:700 8.5px/1 var(--body);letter-spacing:.22em;margin:0 0 3px .2em;opacity:.75}
[data-header="boleto"] .cta-text{--bite-t:radial-gradient(circle 6px at 0 0,#0000 96%,#000);--bite-b:radial-gradient(circle 6px at 0 100%,#0000 96%,#000);
  position:relative;display:inline-flex;align-items:center;gap:10px;padding:0 20px 0 18px;border-radius:3px 9px 9px 3px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 50%),linear-gradient(100deg,var(--red),var(--magenta) 75%,#b0308f)}
/* perforación: puntos sobre la línea de corte */
[data-header="boleto"] .cta-text::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:2px;background:radial-gradient(circle,rgba(255,255,255,.7) .9px,transparent 1.3px) 0 0/2px 5px repeat-y}
/* brillo que cruza el boleto al pasar el ratón */
[data-header="boleto"] .cta-text::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-110%);transition:transform .7s ease}
[data-header="boleto"] .nav-cta:hover .cta-text::after{transform:translateX(110%)}
[data-header="boleto"] .nav-logo{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
[data-header="boleto"] .is-scrolled .nav-logo{transform:translateX(18px)}
@media (min-width:901px){[data-header="boleto"] .nav-logo{top:-4px}}   /* el logo sube 4 px en escritorio */

/* ---------- C · marquesina ---------- */
[data-header="marquesina"] .nav-ticker{display:block;height:32px;overflow:hidden;background:linear-gradient(90deg,var(--red),var(--magenta) 50%,var(--purple));pointer-events:auto}
[data-header="marquesina"] .ticker-track{display:flex;align-items:center;gap:22px;width:max-content;height:100%;animation:ticker 38s linear infinite;
  font:600 13px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:#fff;white-space:nowrap}
[data-header="marquesina"] .ticker-track i{font-style:normal;color:var(--gold)}
@keyframes ticker{to{transform:translateX(-50%)}}
[data-header="marquesina"] .nav-bar{display:grid;grid-template-columns:1fr auto 1fr;height:68px;padding:0 22px;transition:background .35s,height .35s;border-bottom:1px solid transparent}
[data-header="marquesina"] .is-scrolled .nav-bar{height:60px;background:rgba(10,6,7,.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:var(--line)}
[data-header="marquesina"] .nav-burger{display:inline-flex;justify-self:start}
[data-header="marquesina"] .nav-logo{justify-self:center}
[data-header="marquesina"] .nav-logo img{height:30px}
[data-header="marquesina"] .nav-links{display:none}
[data-header="marquesina"] .nav-cta{justify-self:end;height:42px;padding:0 22px;border-radius:999px;background:#fff;color:#120a08;font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;transition:background .3s,color .3s}
[data-header="marquesina"] .nav-cta:hover{background:var(--amber)}

/* ---------- Menú a pantalla completa ---------- */
.menu{position:fixed;inset:0;z-index:45;display:flex;align-items:stretch;background:rgba(8,5,6,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.menu-open .menu{opacity:1;visibility:visible}
.menu-inner{width:min(1200px,100% - 32px);margin:auto;display:grid;grid-template-columns:1.4fr 1fr;gap:60px;align-items:center;padding:110px 0 40px}
.menu-links{display:grid;gap:2px}
.menu-links a{display:flex;align-items:baseline;gap:18px;font:600 clamp(36px,min(6.4vw,7.6vh),84px)/1.02 var(--display);text-transform:uppercase;text-decoration:none;color:#fff;
  opacity:0;transform:translateY(24px);transition:opacity .5s,transform .5s cubic-bezier(.2,.8,.2,1),color .25s}
.menu-links a small{font:500 13px/1 var(--body);letter-spacing:.12em;color:var(--gold)}
.menu-links a:hover{color:var(--amber)}
.menu-open .menu-links a{opacity:1;transform:none}
.menu-open .menu-links a:nth-child(2){transition-delay:.04s}.menu-open .menu-links a:nth-child(3){transition-delay:.08s}.menu-open .menu-links a:nth-child(4){transition-delay:.12s}
.menu-open .menu-links a:nth-child(5){transition-delay:.16s}.menu-open .menu-links a:nth-child(6){transition-delay:.2s}.menu-open .menu-links a:nth-child(7){transition-delay:.24s}
.menu-side{display:grid;gap:18px;justify-items:start}
.menu-side img{width:auto;max-width:min(320px,100%);max-height:46vh;border-radius:16px;box-shadow:0 30px 60px -25px rgba(0,0,0,.9)}
.menu-date{margin:0;font:600 22px/1.2 var(--display);text-transform:uppercase;letter-spacing:.04em;color:var(--red)}
.menu-date span{font:500 14px/1.4 var(--body);letter-spacing:.08em;color:var(--gold)}
.menu-social{display:flex;gap:20px;margin:0;font-size:14px}
.menu-social a{color:var(--muted);text-decoration:none}
.menu-social a:hover{color:#fff}
.menu-links em,.menu-social svg{display:none}
body.menu-open{overflow:hidden}

/* ---------- Móvil: todas las versiones llevan botón de menú ---------- */
@media (max-width:900px){
  .nav-links{display:none!important}
  .nav-burger{display:inline-flex}
  .nav-burger-label{display:none}
  .nav-burger{width:42px;justify-content:center;padding:0}
  [data-header="actual"] .nav-bar{margin:10px 10px 0;height:56px;padding:0 8px 0 14px;gap:10px}
  [data-header="actual"] .nav-logo{margin-right:auto}
  [data-header="actual"] .nav-cta{min-height:38px;padding:0 16px;font-size:13px}
  [data-header="isla"] .nav-bar{width:auto;margin:10px 10px 0;gap:10px;padding:6px 6px 6px 16px}
  [data-header="isla"] .nav-logo{margin-right:auto}
  [data-header="isla"] .nav-cta{padding:0 16px}
  /* B en móvil: arriba del todo sólo el logo, grande y suelto sobre el video. Al hacer scroll aparece la barra
     morada abriéndose desde el centro, el logo se encoge y se va a la izquierda y entra la hamburguesa.
     El boleto vive en el menú. */
  [data-header="boleto"] .nav-bar{display:flex;align-items:center;justify-content:flex-end;height:60px;margin:calc(8px + env(safe-area-inset-top)) 10px 0;padding:0 6px 0 16px}
  [data-header="boleto"] .nav-bar .nav-cta{display:none}
  [data-header="boleto"] .nav-glass{display:block;top:0;left:calc(50% - 60px);width:auto;right:calc(50% - 60px);height:100%;transform:none;opacity:0;
    border:1px solid rgba(176,120,236,.24);border-radius:20px;background:linear-gradient(100deg,rgba(62,22,92,.86),rgba(26,10,38,.86));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 18px 40px -12px rgba(0,0,0,.8);
    transition:left .7s cubic-bezier(.7,0,.2,1),right .7s cubic-bezier(.7,0,.2,1),opacity .4s,border-color .4s,box-shadow .4s}
  [data-header="boleto"] .is-scrolled .nav-glass{left:0;right:0;opacity:1;border-radius:20px;background:linear-gradient(100deg,rgba(62,22,92,.86),rgba(26,10,38,.86))}
  [data-header="boleto"] .nav-bar > .nav-logo{position:absolute;top:50%;left:50%;padding:0;filter:drop-shadow(0 4px 14px rgba(0,0,0,.65));transform:translate(-50%,calc(-50% - 6px));transition:left .7s cubic-bezier(.7,0,.2,1),transform .7s cubic-bezier(.7,0,.2,1),filter .4s}
  [data-header="boleto"] .is-scrolled .nav-bar > .nav-logo{left:16px;transform:translate(0,calc(-50% - 6px));filter:none}
  [data-header="boleto"] .nav-logo img{height:42px;width:auto;transition:height .7s cubic-bezier(.7,0,.2,1)}
  [data-header="boleto"] .is-scrolled .nav-logo img{height:34px}
  /* hamburguesa sin círculo: dos trazos de distinto largo que se cruzan en ✕ al abrir */
  [data-header="boleto"] .nav-burger{width:48px;height:48px;padding:0;border:0;background:none;justify-content:center;opacity:0;visibility:hidden;transform:translateX(-14px);transition:opacity .4s .2s,transform .6s .15s cubic-bezier(.7,0,.2,1),visibility 0s .7s}
  [data-header="boleto"] .is-scrolled .nav-burger,[data-header="boleto"] .menu-open .nav-burger{opacity:1;visibility:visible;transform:none;transition:opacity .4s .25s,transform .6s .2s cubic-bezier(.7,0,.2,1)}
  [data-header="boleto"] .nav-burger .burger{width:28px;height:12px}
  [data-header="boleto"] .nav-burger .burger i{height:2px;right:0;left:auto;transition:transform .45s cubic-bezier(.7,0,.2,1),top .45s cubic-bezier(.7,0,.2,1),width .45s cubic-bezier(.7,0,.2,1)}
  [data-header="boleto"] .nav-burger .burger i:first-child{width:100%}
  [data-header="boleto"] .nav-burger .burger i:last-child{top:10px;width:62%}
  [data-header="boleto"] .nav-burger:hover .burger i:last-child{width:100%}
  [data-header="boleto"] .menu-open .nav-burger .burger i{top:5px;width:100%}
  [data-header="boleto"] .menu-open .nav-glass{opacity:0}
  [data-header="boleto"] .nav-cta{height:44px;font-size:12px}
  [data-header="boleto"] .cta-stub{padding:0 10px 0 12px;font-size:18px}
  [data-header="boleto"] .cta-text{padding:0 14px 0 13px}
  [data-header="marquesina"] .nav-bar{height:60px;padding:0 12px}
  [data-header="marquesina"] .nav-logo img{height:22px}
  [data-header="marquesina"] .nav-cta{height:38px;padding:0 14px;font-size:12px}
  .menu-inner{grid-template-columns:1fr;gap:30px;padding:96px 0 30px;align-self:start}
  .menu-side img{display:none}
  .menu{overflow-y:auto}
}
/* ---------- Menú móvil (B): se abre en círculo desde el botón, filas grandes con subtítulo y el boleto al pie ---------- */
@media (max-width:900px){
  [data-header="boleto"] .menu{display:block;opacity:1;visibility:hidden;overflow-y:auto;background:
      radial-gradient(120% 60% at 100% 0,rgba(212,42,124,.28),transparent 60%),
      radial-gradient(90% 50% at 0 100%,rgba(232,100,42,.22),transparent 65%),var(--bg);
    clip-path:circle(0 at calc(100% - 42px) calc(38px + env(safe-area-inset-top)));transition:clip-path .7s cubic-bezier(.7,0,.2,1),visibility 0s .7s}
  [data-header="boleto"] .menu-open .menu{visibility:visible;clip-path:circle(150% at calc(100% - 42px) calc(38px + env(safe-area-inset-top)));transition:clip-path .8s cubic-bezier(.7,0,.2,1)}
  [data-header="boleto"] .menu::after{content:"";position:fixed;inset:auto 0 0;height:34vh;background:url(assets/img/dunas.jpg) 50% 0/cover no-repeat;opacity:.18;
    -webkit-mask:linear-gradient(transparent,#000 70%);mask:linear-gradient(transparent,#000 70%);pointer-events:none}
  [data-header="boleto"] .menu-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:stretch;gap:24px;width:auto;min-height:100%;margin:0;
    padding:calc(88px + env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom))}
  [data-header="boleto"] .menu-links{gap:0;counter-reset:none}
  [data-header="boleto"] .menu-links a{position:relative;align-items:center;gap:16px;padding:min(12px,1.4vh) 0;font-size:clamp(26px,min(9vw,4.4vh),40px);line-height:1}
  [data-header="boleto"] .menu-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);transform:scaleX(0);transform-origin:0 50%;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
  [data-header="boleto"] .menu-open .menu-links a::after{transform:none}
  [data-header="boleto"] .menu-links a small{width:22px;font-size:11px;align-self:center}
  [data-header="boleto"] .ml-label{display:grid;gap:5px}
  [data-header="boleto"] .menu-links em{display:block;font:400 12.5px/1.2 var(--body);font-style:normal;letter-spacing:.02em;text-transform:none;color:var(--muted)}
  [data-header="boleto"] .menu-links a:active .ml-label{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  [data-header="boleto"] .menu-links a{transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1)}
  [data-header="boleto"] .menu-open .menu-links a{transition-delay:calc(.18s + var(--i,0) * .05s)}
  [data-header="boleto"] .menu-links a:nth-child(2){--i:1}[data-header="boleto"] .menu-links a:nth-child(3){--i:2}[data-header="boleto"] .menu-links a:nth-child(4){--i:3}
  [data-header="boleto"] .menu-links a:nth-child(5){--i:4}[data-header="boleto"] .menu-links a:nth-child(6){--i:5}[data-header="boleto"] .menu-links a:nth-child(7){--i:6}
  [data-header="boleto"] .menu-side{margin-top:auto;display:grid;gap:14px;justify-items:stretch;opacity:0;transform:translateY(16px);transition:opacity .5s .5s,transform .6s .5s cubic-bezier(.2,.8,.2,1)}
  [data-header="boleto"] .menu-open .menu-side{opacity:1;transform:none}
  [data-header="boleto"] .menu-ticket{display:flex;justify-self:stretch;height:58px;font-size:14px}
  [data-header="boleto"] .menu-ticket .cta-stub{padding:0 16px 0 18px;font-size:23px}
  [data-header="boleto"] .menu-ticket .cta-text{flex:1;justify-content:center}
  [data-header="boleto"] .menu-date{font-size:15px;color:var(--text);text-align:center}
  [data-header="boleto"] .menu-date span{font-size:13px}
  [data-header="boleto"] .menu-social{justify-content:center;gap:10px}
  [data-header="boleto"] .menu-social a{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.04);color:#fff}
  [data-header="boleto"] .menu-social a span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  [data-header="boleto"] .menu-social svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
  [data-header="boleto"] .menu-social a:nth-child(2) svg{fill:currentColor;stroke:none}
}
/* ---------- Barra de pestañas tipo app (móvil) ----------
   Fondo morado en degradado (el del header) con una joroba bajo el botón de Tickets, fundida con un filtro SVG.
   La píldora del degradado del póster va a la pestaña activa: se estira al viajar y rebota al llegar. */
.tabbar{display:none}
@media (max-width:900px){
  .tabbar{--now1:#4a1a72;--now2:#1f0c30;position:fixed;z-index:48;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,1fr);height:64px;
    filter:drop-shadow(0 14px 22px rgba(0,0,0,.6));transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .35s,--now1 .7s ease,--now2 .7s ease}
  .menu-open .tabbar{transform:translateY(150%);opacity:0}
  .tb-goo{position:absolute;inset:-30px 0 0;filter:url(#tb-goo);pointer-events:none}
  .tb-shape{position:absolute;left:0;right:0;bottom:0;height:64px;border-radius:22px;background:linear-gradient(100deg,var(--now1),color-mix(in srgb,var(--now1) 45%,var(--now2)) 55%,var(--now2))}
  .tb-bump{position:absolute;left:50%;bottom:22px;width:66px;height:66px;margin-left:-33px;border-radius:50%;background:color-mix(in srgb,var(--now1) 50%,var(--now2))}
  .tb-shape{overflow:hidden}
  /* resplandor del color de la activa: se desliza de una pestaña a otra */
  .tb-glow{display:none;position:absolute;left:var(--gx,50%);top:50%;width:150px;height:110px;margin:-55px 0 0 -75px;border-radius:50%;background:radial-gradient(closest-side,var(--gc,transparent),transparent);opacity:.6;
    transition:left .6s cubic-bezier(.45,1.35,.45,1)}
  /* onda que se expande desde la pestaña tocada */
  .tb-ring{position:absolute;z-index:0;left:var(--x,50%);top:50%;width:46px;height:46px;margin:-23px;border-radius:50%;border:2px solid var(--ink,#fff);opacity:0;pointer-events:none}
  .tabbar.is-pouring .tb-ring{animation:tb-ring-out .7s ease-out}
  @keyframes tb-ring-out{0%{transform:scale(.4);opacity:1}100%{transform:scale(2.6);opacity:0}}
  .tabbar a{position:relative;z-index:1;display:grid;justify-items:center;align-content:center;gap:5px;color:rgba(236,224,246,.62);text-decoration:none;font:500 10.5px/1 var(--body);letter-spacing:.03em;-webkit-tap-highlight-color:transparent;transition:color .3s}
  .tabbar svg{width:24px;height:24px}
  .tabbar a > svg{transition:transform .5s cubic-bezier(.3,1.7,.4,1)}
  .tabbar a.is-active{color:#fff;font-weight:600}
  .tabbar a.is-active > svg{transform:translateY(-3px)}
  .tabbar.is-pouring a.is-active > svg{animation:tb-spin .7s cubic-bezier(.3,.7,.3,1)}
  .tabbar a.is-active > span{transform:translateY(-1px)}
  .tabbar a > span{transition:transform .4s}
  /* el icono da una vuelta */
  @keyframes tb-spin{0%{transform:rotateY(0)}100%{transform:rotateY(360deg) translateY(-3px)}}
  /* Tickets: botón dorado que sobresale, encima de la joroba */
  .tabbar .tb-main{align-content:end;padding-bottom:12.25px;color:#f3d48c}   /* misma línea que las otras etiquetas: (64 − 24 − 5 − 10,5) / 2 */
  .tb-fab{position:absolute;left:50%;top:-24px;display:grid;place-items:center;width:54px;height:54px;margin-left:-27px;border-radius:50%;
    background:linear-gradient(150deg,#f8cd6a,var(--gold) 50%,#a86f1f);color:#2b1206;box-shadow:0 8px 20px -6px rgba(0,0,0,.6),0 0 0 4px color-mix(in srgb,var(--now1) 50%,var(--now2));transition:transform .5s cubic-bezier(.3,1.7,.4,1)}
  .tb-fab svg{width:28px;height:28px}
  .tb-fab::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--gold);opacity:0}
  .tabbar .tb-main.is-active{color:#fff}
  .tabbar .tb-main.is-active .tb-fab{animation:tb-fab .7s cubic-bezier(.3,1.7,.4,1) .1s}
  .tabbar .tb-main.is-active .tb-fab::after{animation:tb-ring 1s ease-out}
  @keyframes tb-fab{0%{transform:scale(.85) rotate(0)}50%{transform:scale(1.12) rotate(-10deg)}100%{transform:rotate(0)}}
  @keyframes tb-ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.7);opacity:0}}
  body{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .tabbar *, .tabbar *::after{animation:none!important}
  .tb-glow{transition:none}
}
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none!important}
}

/* Stay: header y barra en el verde de Mayan Monkey (main.js pone .is-mayan y --hn1/--hn2 mezclados con verde oscuro) */
[data-header="boleto"] .nav.is-mayan .nav-glass{border-color:rgba(121,181,166,.4)}
@media (max-width:900px){
  [data-header="boleto"] .nav.is-mayan.is-scrolled .nav-glass{background:linear-gradient(100deg,var(--hn1),var(--hn2))}
}

/* menú del móvil más sereno: títulos a 22 px (antes hasta 40) con aire entre filas; debajo, la línea pequeña */
@media (max-width:900px){
  [data-header="boleto"] .menu-inner{gap:24px}
  [data-header="boleto"] .menu-links a{padding:12px 4px;font:500 22px/1 var(--display);letter-spacing:.08em}
  [data-header="boleto"] .menu-links .ml-label{display:grid;gap:6px}
  [data-header="boleto"] .menu-links em{font-size:12px;letter-spacing:.03em}
}

/* menú del móvil con iconos (Solar duotono, los de la barra de abajo) en el color de cada sección; sin descripciones */
.ml-ico{display:none}
@media (max-width:900px){
  [data-header="boleto"] .menu-links a{gap:16px;padding:11px 4px}
  [data-header="boleto"] .ml-ico{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:13px;color:var(--c);
    background:color-mix(in srgb,var(--c) 16%,transparent);border:1px solid color-mix(in srgb,var(--c) 30%,transparent)}
  [data-header="boleto"] .ml-ico svg{width:22px;height:22px}
  [data-header="boleto"] .menu-links a:active .ml-ico{background:color-mix(in srgb,var(--c) 30%,transparent)}
}

/* chevron relleno (Solar alt-arrow-right-bold) a la derecha de cada fila, en el color de su sección. Lo pidió Carlos:
   es la única flecha permitida del sitio. Se pinta con máscara para no repetir el SVG en cada enlace. */
@media (max-width:900px){
  [data-header="boleto"] .menu-links a::before{content:"";order:3;margin-left:auto;flex:none;width:22px;height:22px;background:var(--c);opacity:.85;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.8351 11.6296L9.20467 5.1999C8.79094 4.79869 8 5.04189 8 5.5703L8 18.4297C8 18.9581 8.79094 19.2013 9.20467 18.8001L15.8351 12.3704C16.055 12.1573 16.0549 11.8427 15.8351 11.6296Z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.8351 11.6296L9.20467 5.1999C8.79094 4.79869 8 5.04189 8 5.5703L8 18.4297C8 18.9581 8.79094 19.2013 9.20467 18.8001L15.8351 12.3704C16.055 12.1573 16.0549 11.8427 15.8351 11.6296Z'/%3E%3C/svg%3E") center/contain no-repeat;
    transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  [data-header="boleto"] .menu-links a:active::before{transform:translateX(4px)}
}

/* ---------- Idioma: EN en la raíz, ES en /es/ ----------
   En escritorio, la última pastilla de la píldora, separada por una raya; en el menú y el pie, «English · Español» con el actual encendido. */
[data-header="boleto"] .nav-links a.nav-lang{position:relative;margin-left:9px;padding:11px 13px;font:600 13px/1 var(--body);letter-spacing:.14em;color:rgba(255,255,255,.72)}
[data-header="boleto"] .nav-links a.nav-lang::before{content:"";position:absolute;left:-6px;top:50%;width:1px;height:18px;margin-top:-9px;background:rgba(255,255,255,.22)}
[data-header="boleto"] .nav-links a.nav-lang:hover{color:#fff}
.lang-switch{display:inline-flex;align-items:center;gap:4px;margin:0;padding:4px;border:1px solid var(--line);border-radius:999px;font:600 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase}
.lang-switch > *{padding:8px 14px;border-radius:999px;text-decoration:none}
.lang-switch a{color:var(--muted)}
.lang-switch a:hover{color:#fff}
.lang-switch [aria-current]{background:rgba(255,255,255,.1);color:#fff}
.menu-foot{display:grid;gap:18px;justify-items:start}
[data-header="boleto"] .nav-links a.nav-lang{padding-top:12px;padding-bottom:10px}
@media (max-width:900px){
  /* móvil: idioma a la izquierda y redes a la derecha, en una sola fila al pie del menú */
  [data-header="boleto"] .menu-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
  [data-header="boleto"] .menu-foot .menu-social{justify-content:flex-end}
  [data-header="boleto"] .menu-foot .menu-social a{width:42px;height:42px}
  .lang-switch > *{padding:8px 11px}
}