/* ============================================================
   QUETASHENDO — sistema de diseño · "¡Y no es broma!"
   Negro absoluto + espectro de pintura (7 colores de marca).
   Bebas Neue (display) + Montserrat (texto). Mobile-first.
   ============================================================ */
/* WOFF2 y RECORTADAS a los caracteres que usa el sitio (latín + puntuación +
   monedas + flechas). Montserrat pasó de 727 KB (.ttf) a 37 KB conservando su
   eje variable de peso 100–900. Era la descarga más pesada de la portada y la
   paga cada persona que entra con datos móviles en la fila.
   Para regenerarlas desde los .ttf (que quedan en el repo):
     pyftsubset Montserrat.ttf --flavor=woff2 --output-file=Montserrat.woff2 \
       --unicodes="U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20A0-20BF,U+2122,U+2190-2193,U+24B6-24E9,U+25A0-25CF" \
       --layout-features="kern,liga,clig,calt,ccmp,locl,mark,mkmk,rlig"
   (antes decía: WOFF2 primero, 71% menos peso)
   Era la descarga más pesada de la portada y la paga cada persona que entra con
   datos móviles en la fila. El .ttf queda de respaldo para un navegador antiguo:
   no se descarga si el woff2 carga. */
@font-face{font-family:'Bebas Neue';src:url('/fonts/BebasNeue-Regular.woff2') format('woff2'),url('/fonts/BebasNeue-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Montserrat';src:url('/fonts/Montserrat.woff2') format('woff2'),url('/fonts/Montserrat.ttf') format('truetype');font-weight:100 900;font-display:swap}

:root{
  /* Superficies — negro neutro (la marca vive sobre negro puro) */
  --ink:#06060A; --ink-2:#000; --surface:#101016; --surface-2:#181820; --line:rgba(var(--white-rgb),.11);

  /* Espectro Quetashendo (manual de marca) */
  --c-yellow:#FFD600; --c-orange:#FF6A00; --c-magenta:#FF008E;
  --c-cyan:#00B6FF;   --c-lime:#7CFF00;   --c-violet:#9000FF;

  /* Acento funcional = magenta de marca (un solo color manda la UI; el espectro es decorativo) */
  --accent:#FF008E; --accent-2:#FF4FB2; --accent-deep:#C7006F;
  /* Texto SOBRE el magenta de marca. Blanco da 3,72:1 y no pasa AA; este negro da
     5,44:1. Además es lo que ya hace el botón primario, así que es más de marca. */
  --sobre-acento:#08080C;
  --accent-rgb:255,0,142; --accent-deep-rgb:199,0,111;
  --accent-glow:rgba(var(--accent-rgb),.5);

  /* Gradientes de marca */
  --spectrum:linear-gradient(100deg,var(--c-yellow) 0%,var(--c-orange) 17%,var(--c-magenta) 37%,var(--c-violet) 58%,var(--c-cyan) 79%,var(--c-lime) 100%);
  --spectrum-hot:linear-gradient(100deg,var(--c-yellow) 0%,var(--c-orange) 45%,var(--c-magenta) 100%);

  --white:#fff; --white-rgb:255,255,255; --campo:#0d0d10; --muted:#B7B7C2; --muted-2:#83838f;
  --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444; --info:#00B6FF;
  --maxw:1180px; --radius:16px; --radius-sm:11px;
  --shadow:0 18px 50px rgba(0,0,0,.6); --shadow-accent:0 14px 40px rgba(var(--accent-rgb),.3);
  --display:'Bebas Neue','Arial Narrow',sans-serif; --body:'Montserrat',system-ui,Arial,sans-serif;

  /* Movimiento: un solo ritmo para todo el sitio. Duraciones por tipo de cambio y curvas
     que frenan como algo físico (nada de "ease" ni "linear" por defecto, nada de rebote).
     Las salidas van más rápido que las entradas: lo que se va no se hace esperar. */
  --dur-1:110ms;   /* respuesta inmediata: presionar, color */
  --dur-2:200ms;   /* cambio de estado: hover, pestañas, íconos */
  --dur-3:340ms;   /* hojas, avisos, paneles que entran */
  --dur-4:620ms;   /* entradas de contenido y revelados al hacer scroll */
  --dur-5:1100ms;  /* telón del héroe */
  --ease-out:cubic-bezier(.22,1,.36,1);       /* quint: el default de la casa */
  --ease-out-expo:cubic-bezier(.16,1,.3,1);   /* entradas con decisión */
  --ease-in:cubic-bezier(.5,0,.75,0);         /* salidas: arrancan suave y se van */
  --ease-in-out:cubic-bezier(.65,0,.35,1);    /* vaivenes y loops */
  --rise:18px;                                /* cuánto sube lo que entra */
}
/* Con movimiento reducido nada se desplaza: lo que entra solo aparece (fundido). */
@media(prefers-reduced-motion:reduce){:root{--rise:0px}}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* Fondo: salpicaduras de pintura de las 6 tintas de marca, muy bajas, sobre negro.
   Van en una capa fija propia y no con background-attachment:fixed: eso obliga a Chrome a
   repintar toda la pantalla en cada cuadro del scroll (y Safari en iPhone lo ignora, así que
   el fondo ni siquiera se veía igual). Una capa fija se compone una vez y el scroll no la toca. */
body{font-family:var(--body);background:var(--ink);color:var(--white);line-height:1.6;
  font-size:16px;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(680px 420px at 84% -6%,rgba(255,214,0,.10),transparent 62%),
    radial-gradient(760px 460px at 6% 8%,rgba(0,182,255,.10),transparent 60%),
    radial-gradient(900px 520px at 92% 44%,rgba(255,0,142,.09),transparent 62%),
    radial-gradient(820px 500px at 0% 72%,rgba(144,0,255,.10),transparent 60%),
    radial-gradient(640px 420px at 60% 100%,rgba(124,255,0,.06),transparent 60%)}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:.95;letter-spacing:.02em;text-transform:uppercase}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
.muted{color:var(--muted)} .text-accent{color:var(--accent)} .nowrap{white-space:nowrap}
.skip-link{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--sobre-acento);font-weight:800;padding:10px 16px;z-index:200;border-radius:0 0 10px 0}
.skip-link:focus{left:0}
::selection{background:var(--accent);color:var(--sobre-acento)}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;border-radius:6px}

/* ───────── Botones ───────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--body);
  font-weight:800;font-size:.94rem;letter-spacing:.02em;padding:13px 24px;border-radius:999px;
  transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out),opacity var(--dur-2) var(--ease-out);
  white-space:nowrap;border:1px solid transparent;-webkit-tap-highlight-color:transparent}
/* Presionar: hunde rápido y suelta con calma. En el teléfono es la única respuesta táctil que hay
   (no existe hover), así que tiene que sentirse. */
.btn:active{transform:scale(.97);transition-duration:var(--dur-1)}
/* Primario = espectro caliente (amarillo→naranjo→magenta) con tinta negra: máximo contraste y 100% marca. */
.btn-primary{background:var(--spectrum-hot);background-size:180% 100%;background-position:0 0;color:#08080C;font-weight:900;
  box-shadow:0 14px 40px rgba(255,106,0,.28),0 0 0 1px rgba(var(--white-rgb),.08) inset;
  transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-3) var(--ease-out),background-position var(--dur-4) var(--ease-out),opacity var(--dur-2) var(--ease-out)}
.btn-ghost{background:rgba(var(--white-rgb),.05);border-color:var(--line);color:var(--white)}
.btn-outline{background:transparent;border-color:var(--accent);color:var(--accent)}
.btn-cyan{background:transparent;border-color:var(--c-cyan);color:var(--c-cyan)}
/* Hover solo donde hay puntero de verdad: en iPhone el :hover se queda pegado después del toque
   y el botón quedaba levantado y encendido como si siguiera apretado. */
@media(hover:hover) and (pointer:fine){
  .btn-primary:hover{background-position:100% 0;box-shadow:0 18px 52px rgba(255,0,142,.42);transform:translateY(-1px)}
  .btn-primary:active{transform:translateY(0) scale(.97)}
  .btn-ghost:hover{background:rgba(var(--white-rgb),.1);border-color:rgba(0,182,255,.5)}
  .btn-outline:hover{background:var(--accent);color:var(--sobre-acento)}
  .btn-cyan:hover{background:var(--c-cyan);color:#04040A}
}
/* Teclado: el mismo encendido que el hover, para quien navega con Tab. */
.btn-primary:focus-visible{background-position:100% 0;box-shadow:0 18px 52px rgba(255,0,142,.42)}
.btn-ghost:focus-visible{background:rgba(var(--white-rgb),.1);border-color:rgba(0,182,255,.5)}
.btn-outline:focus-visible{background:var(--accent);color:var(--sobre-acento)}
.btn-cyan:focus-visible{background:var(--c-cyan);color:#04040A}
.btn-sm{padding:9px 16px;font-size:.82rem}
.btn-block{width:100%}
.btn-wa{background:linear-gradient(135deg,#25d366,#128c4b);box-shadow:0 14px 40px rgba(37,211,102,.3)}
.btn[disabled]{opacity:.45;filter:grayscale(60%);cursor:not-allowed;transform:none;box-shadow:none}
.linklike{background:none;color:var(--muted);font:inherit;text-align:left}
.linklike:hover{color:var(--white)}

/* ───────── Header / Nav ───────── */
.site-header{position:sticky;top:0;z-index:90;backdrop-filter:blur(16px);
  background:rgba(4,4,8,.78);border-bottom:1px solid var(--line)}
/* Filo de color bajo el encabezado: la firma del espectro, 2px. */
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--spectrum);opacity:.85}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;height:68px}
.brand{display:flex;align-items:center;color:var(--white)}
.brand-lockup{display:inline-flex;align-items:center;gap:12px;color:var(--white)}
.brand-word-img{width:auto;display:block}
.qts-mark{display:block}
.brand-tag{font-family:var(--body);font-size:.58rem;font-weight:800;letter-spacing:.34em;color:var(--muted);white-space:nowrap}
@media(max-width:520px){.brand-tag{display:none}}
.footer-logo .brand-lockup{flex-wrap:wrap}
.nav-desktop{display:none;align-items:center;gap:22px}
.nav-desktop a:not(.btn),.navlink-btn{font-size:.9rem;font-weight:600;color:var(--muted);transition:color var(--dur-2) var(--ease-out);letter-spacing:.01em}
.nav-desktop a:not(.btn):hover,.navlink-btn:hover{color:var(--white)}
.acct-chip{display:inline-flex;flex-direction:column;line-height:1.1;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(var(--accent-rgb),.08)}
.acct-coins{font-weight:800;color:var(--accent);font-size:.86rem;white-space:nowrap}
.acct-user{font-size:.7rem;color:var(--muted)}
.login-link{font-weight:700!important}
.nav-toggle{display:flex;flex-direction:column;gap:5px;padding:8px}
.nav-toggle span{width:24px;height:2px;background:#fff;border-radius:2px;transition:transform var(--dur-3) var(--ease-out),opacity var(--dur-2) var(--ease-out)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-mobile{display:flex;flex-direction:column;gap:4px;padding:14px 20px 22px;border-bottom:1px solid var(--line);background:rgba(10,10,10,.96)}
.nav-mobile[hidden]{display:none}
.nav-mobile a:not(.btn),.nav-mobile .navlink-btn{padding:12px 6px;font-weight:600;color:#e7e7ea;border-bottom:1px solid rgba(var(--white-rgb),.06)}
.nav-mobile .btn{margin-top:12px}
@media(min-width:980px){.nav-desktop{display:flex}.nav-toggle,.nav-mobile{display:none!important}}

/* ───────── Secciones / tipografía ───────── */
.section{padding:72px 0}
.section-head{margin-bottom:34px;max-width:680px}
.eyebrow{display:inline-block;font-weight:800;font-size:.74rem;letter-spacing:.28em;color:var(--accent);text-transform:uppercase;margin-bottom:12px}
.section h2{font-size:clamp(2.4rem,6vw,3.8rem)}
.section .sub{color:var(--muted);margin-top:10px;font-size:1.02rem}
.h-line{height:4px;width:64px;background:var(--accent);border-radius:4px;margin-top:14px}

/* ───────── Hero ───────── */
.hero{position:relative;min-height:90vh;display:flex;align-items:center;padding:60px 0 40px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(800px 500px at 70% 18%,rgba(var(--accent-rgb),.28),transparent 60%)}
.hero-grid{display:grid;gap:38px;align-items:center}
.hero-tonight{display:inline-flex;align-items:center;gap:9px;font-size:.8rem;font-weight:700;letter-spacing:.06em;
  background:rgba(var(--accent-rgb),.12);border:1px solid var(--accent);color:var(--white);padding:8px 16px;border-radius:999px;margin-bottom:20px}
.hero-tonight .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);color:var(--accent)}
.hero-title{font-size:clamp(3.2rem,12vw,7rem);line-height:.86;margin-bottom:10px}
.hero-title .accent{color:var(--accent);text-shadow:0 0 40px var(--accent-glow)}
.hero-sub{color:#e7e7ea;font-size:1.1rem;max-width:520px;margin:6px 0 18px}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin:18px 0 26px;color:var(--muted);font-weight:600;font-size:.92rem}
.hero-meta b{color:var(--white)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-flyer{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);max-width:420px;margin:0 auto;aspect-ratio:9/14;background:var(--surface)}
.hero-flyer img{width:100%;height:100%;object-fit:cover}
@media(min-width:900px){.hero-grid{grid-template-columns:1.1fr .9fr}}

/* Hero póster — fondo full-bleed (QUETASHENDO de lado a lado) + flyer flotando encima */
.hero-poster{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:#050505}
.hero-poster-media{position:absolute;inset:-30px;z-index:0}
.hero-poster-media img{width:100%;height:100%;object-fit:cover;object-position:center 34%;filter:blur(7px) brightness(.5) saturate(1.15);transform:scale(1.06)}
.hero-poster-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.35) 0%,transparent 28%,transparent 55%,rgba(5,5,5,.97) 100%)}
.hero-poster-stage{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;padding:88px 16px 170px}
.hero-poster-card{display:block;height:100%;max-height:78vh;line-height:0}
.hero-poster-card img{height:100%;width:auto;max-width:92vw;object-fit:contain;border-radius:18px;border:1px solid rgba(var(--white-rgb),.14);box-shadow:0 30px 90px rgba(0,0,0,.75),0 0 70px rgba(var(--accent-rgb),.28);transition:transform var(--dur-3) var(--ease-out)}
@media(hover:hover) and (pointer:fine){.hero-poster-card:hover img{transform:scale(1.012)}}
.hero-poster-foot{position:relative;z-index:2;padding:0 0 30px}
.hero-poster-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.hpb-left{display:flex;flex-direction:column;gap:12px}
.hpb-left .countdown{margin:0}
@media(max-width:760px){
  .hero-poster-media img{object-position:center 30%}
  .hero-poster-stage{padding:74px 12px 210px}
  .hero-poster-card{max-height:56vh}
  .hero-poster-bar{justify-content:center;text-align:center}
  .hpb-left{align-items:center}
  .hero-poster .hero-cta{justify-content:center;width:100%}
}

/* Countdown */
.countdown{display:flex;gap:10px;margin:20px 0}
.count-box{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-width:66px;text-align:center}
.count-box .n{font-family:var(--display);font-size:2.2rem;color:var(--accent);line-height:1}
.count-box .l{font-size:.62rem;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;margin-top:4px}

/* ───────── Cards / grids ───────── */
.grid{display:grid;gap:22px}
.card{background:linear-gradient(180deg,var(--surface),rgba(21,16,26,.5));border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:transform var(--dur-3) var(--ease-out),border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-3) var(--ease-out)}
@media(hover:hover) and (pointer:fine){.card:hover{transform:translateY(-4px);border-color:rgba(var(--accent-rgb),.4);box-shadow:var(--shadow)}}
.card:focus-visible{border-color:rgba(var(--accent-rgb),.4)}
/* Tarjetas que son enlaces: al tocarlas en el teléfono se hunden un poco (sin hover que lo diga). */
a.card:active,.hero-fiesta:active{transform:scale(.985);transition-duration:var(--dur-1)}

/* Eventos */
.events-grid{grid-template-columns:1fr}
@media(min-width:720px){.events-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.events-grid{grid-template-columns:repeat(3,1fr)}}
.event-card{display:flex;flex-direction:column}
.event-media{aspect-ratio:4/5;overflow:hidden;position:relative;background:var(--surface-2)}
.event-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-4) var(--ease-out)}
@media(hover:hover) and (pointer:fine){.event-card:hover .event-media img{transform:scale(1.05)}}
.event-badge{position:absolute;top:12px;left:12px;background:var(--accent-deep);color:#fff;font-weight:800;font-size:.7rem;letter-spacing:.08em;padding:6px 12px;border-radius:999px}
.event-badge.soon{background:#fff;color:#0a0a0a}
/* Evento no destacado: flyer borroso (ilegible) + "Próximamente" */
.event-media.is-teaser img{filter:blur(17px) brightness(.78) saturate(1.2);transform:scale(1.18)}
@media(hover:hover) and (pointer:fine){.event-card:hover .event-media.is-teaser img{transform:scale(1.18)}}
.event-media.is-teaser::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(120% 90% at 50% 35%,rgba(var(--accent-rgb),.18),transparent 60%),linear-gradient(180deg,rgba(10,10,10,.42),rgba(10,10,10,.82))}
.event-soon{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;font-family:var(--display);font-size:2.1rem;line-height:1;letter-spacing:.16em;color:#fff;text-transform:uppercase;text-shadow:0 4px 30px rgba(0,0,0,.7)}
.event-soon::before{content:"";width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--accent),var(--accent-deep));box-shadow:0 0 34px var(--accent-glow)}
.event-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.event-body h3{font-size:1.8rem}
.event-date{color:var(--accent);font-weight:800;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase}
.event-venue{color:var(--muted);font-size:.88rem}
.event-foot{margin-top:auto;padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.event-price{font-size:.84rem;color:var(--muted)}
.event-price b{color:var(--white);font-size:1.05rem}
/* Fiestas anteriores (colapsable) */
.past-events{margin-top:34px;border-top:1px solid var(--line);padding-top:20px}
.past-events>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:1.55rem;letter-spacing:.04em;text-transform:uppercase;color:var(--white);user-select:none}
.past-events>summary::-webkit-details-marker{display:none}
.past-events>summary:hover{color:var(--accent-2)}
.past-events .pe-count{font-family:var(--body);font-size:.78rem;font-weight:800;color:var(--accent);background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.35);padding:2px 11px;border-radius:999px}
.past-events .pe-chev{margin-left:auto;color:var(--muted);transition:transform var(--dur-3) var(--ease-out)}
.past-events[open] .pe-chev{transform:rotate(180deg)}
.pe-grid{margin-top:22px}
/* Admin: subir flyer */
.flyer-up{display:flex;gap:14px;align-items:flex-start;margin-top:6px}
.flyer-up-prev{width:80px;height:100px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);flex-shrink:0}
.flyer-up-ctl{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.flyer-up-ctl small{font-size:.74rem;line-height:1.4}
/* Banner: confirma tu correo */
.verify-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:linear-gradient(135deg,rgba(var(--accent-rgb),.15),rgba(var(--accent-rgb),.04));border:1px solid rgba(var(--accent-rgb),.42);border-radius:14px;padding:14px 18px;margin-bottom:22px}
.verify-banner .vb-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.verify-banner .vb-text b{color:var(--white);font-size:.98rem}
.verify-banner .vb-text span{color:var(--muted);font-size:.85rem}
.verify-banner .btn{flex-shrink:0}

/* Tiers (preventa) */
.tier-list{display:flex;flex-direction:column;gap:12px}
.tier{display:flex;align-items:center;gap:14px;justify-content:space-between;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px 18px;transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.tier.active{border-color:var(--accent);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.4)}
.tier.sold-out{opacity:.5}
.tier-info h4{font-size:1.3rem;letter-spacing:.02em}
.tier-info .meta{font-size:.78rem;color:var(--muted);font-family:var(--body)}
.tier-price{font-family:var(--display);font-size:1.7rem;color:var(--white)}
.tier-buy{display:flex;align-items:center;gap:10px}
.tier-tag{font-size:.66rem;font-weight:800;letter-spacing:.1em;padding:4px 9px;border-radius:6px;text-transform:uppercase}
.tag-active{background:rgba(var(--accent-rgb),.15);color:var(--accent)}
.tag-sold{background:rgba(239,68,68,.15);color:#fca5a5}
.tag-vip{background:rgba(245,158,11,.16);color:#fcd34d}

/* Qty stepper */
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.qty button{width:36px;height:36px;font-size:1.2rem;color:var(--white);background:rgba(var(--white-rgb),.04);transition:background-color var(--dur-2) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.qty button:active{transform:scale(.9)}
@media(hover:hover) and (pointer:fine){.qty button:hover{background:var(--accent)}}
.qty button:focus-visible{background:var(--accent)}
.qty input{width:42px;text-align:center;background:transparent;color:var(--white);border:none;font-weight:800;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none}

/* Noticias */
.news-grid{grid-template-columns:1fr}
@media(min-width:680px){.news-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.news-grid{grid-template-columns:repeat(3,1fr)}}
.news-card .event-media{aspect-ratio:16/9}
.news-cat{font-size:.7rem;font-weight:800;letter-spacing:.14em;color:var(--accent);text-transform:uppercase}
.news-card h3{font-size:1.4rem;margin:6px 0}
.news-card p{color:var(--muted);font-size:.9rem}
.article{max-width:760px;margin:0 auto}
.article-cover{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);margin:24px 0}
.article-body{font-family:var(--body);font-size:1.06rem;line-height:1.8;color:#e7e7ea}
.article-body p{margin:0 0 18px}.article-body h2,.article-body h3{margin:28px 0 12px}
.article-body a{color:var(--accent);text-decoration:underline}

/* Galería */
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:680px){.gallery-grid{grid-template-columns:repeat(4,1fr)}}
.gallery-item{display:block;aspect-ratio:1;overflow:hidden;border-radius:12px;border:1px solid var(--line);background:var(--surface)}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-4) var(--ease-out)}
@media(hover:hover) and (pointer:fine){.gallery-item:hover img{transform:scale(1.08)}}

/* Instagram (últimas 3) */
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ig-cell{position:relative;aspect-ratio:1;overflow:hidden;border-radius:14px;border:1px solid var(--line);display:block}
.ig-cell img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-4) var(--ease-out)}
@media(hover:hover) and (pointer:fine){.ig-cell:hover img{transform:scale(1.06)}}
.ig-ic{position:absolute;top:10px;right:10px;font-size:1.1rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
@media(max-width:600px){.ig-grid{gap:8px}}
/* Embeds reales de Instagram. Mientras carga, Instagram deja su iframe en position:absolute: sin un
   contenedor posicionado, el width:100% se mide contra la página y en Safari del iPhone la ensancha
   (franja al borde derecho, 23-10). Además Safari agranda los iframes a su contenido: se recorta acá. */
.ig-embeds{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr;gap:18px;justify-items:center}
@media(min-width:740px){.ig-embeds{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.ig-embeds{grid-template-columns:repeat(3,1fr)}}
.ig-embeds .instagram-media{margin:0 auto!important;width:100%!important;min-width:0!important;max-width:540px!important;border-radius:14px!important}
.ig-fallback{text-align:center;border:1px dashed var(--line);border-radius:16px;padding:34px 20px;background:rgba(var(--white-rgb),.02)}
.ig-fallback p{max-width:460px;margin:0 auto 14px}

/* Reseñas */
.reviews-head{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-bottom:26px}
.rating-big{font-family:var(--display);font-size:3.6rem;color:var(--white);line-height:1}
.stars{color:#fcd34d;letter-spacing:2px;font-size:1.1rem}
.reviews-grid{grid-template-columns:1fr}
@media(min-width:680px){.reviews-grid{grid-template-columns:repeat(3,1fr)}}
.review-card{padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm)}
.review-card .who{font-weight:700;margin-top:10px}
.review-card .body{color:var(--muted);font-size:.92rem;margin-top:6px}

/* ───────── Productos / Carta ───────── */
.menu-cats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.cat-pill{padding:9px 16px;border:1px solid var(--line);border-radius:999px;font-weight:700;font-size:.85rem;color:var(--muted);transition:background-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
.cat-pill.active,.cat-pill:hover{background:var(--accent);color:var(--sobre-acento);border-color:var(--accent)}
.product-grid{grid-template-columns:repeat(2,1fr)}
@media(min-width:720px){.product-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1040px){.product-grid{grid-template-columns:repeat(4,1fr)}}
.product-card{display:flex;flex-direction:column}
.product-card .event-media{aspect-ratio:1}
.product-card .pc-body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.product-card h3{font-size:1.25rem}
.product-card .desc{color:var(--muted);font-size:.82rem;flex:1}
.product-card .pc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.price-coins{font-family:var(--display);font-size:1.4rem;color:var(--accent)}
.pc-price{display:flex;flex-direction:column;line-height:1.05}
.price-bar{font-size:.7rem;color:var(--muted);font-weight:600;letter-spacing:.01em}
.unavailable{opacity:.45;pointer-events:none}
.add-btn{width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--sobre-acento);font-size:1.4rem;font-weight:700;display:grid;place-items:center}
.add-btn:hover{background:var(--accent-deep)}

/* Carrito flotante (carta) */
.cart-bar{position:fixed;left:0;right:0;bottom:0;z-index:80;background:rgba(10,10,10,.94);backdrop-filter:blur(12px);border-top:1px solid var(--accent);
  transform:translateY(110%);transition:transform var(--dur-3) var(--ease-out);padding:14px 0}
.cart-bar.show{transform:translateY(0)}
.cart-inner{display:flex;align-items:center;justify-content:space-between;gap:14px}
.cart-summary{font-weight:700}.cart-summary b{color:var(--accent)}

/* ───────── Cuenta ───────── */
.acct-grid{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:880px){.acct-grid{grid-template-columns:1.1fr .9fr}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.panel h3{font-size:1.5rem;margin-bottom:14px}
.ledger{display:flex;flex-direction:column}
.ledger-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 2px;border-bottom:1px solid rgba(var(--white-rgb),.06)}
.ledger-row:last-child{border-bottom:none}
.ledger-row .lr-type{font-size:.78rem;color:var(--muted)}
.lr-amount{font-weight:800;font-variant-numeric:tabular-nums}
.lr-amount.plus{color:var(--ok)} .lr-amount.minus{color:var(--accent-2)}

/* ───────── Tablero música / karaoke / barra ───────── */
.board{display:flex;flex-direction:column;gap:10px}
.song-row{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 16px}
.song-rank{font-family:var(--display);font-size:1.5rem;color:var(--muted);min-width:34px;text-align:center}
.song-rank.top{color:var(--accent)}
.song-info{flex:1;min-width:0}
.song-info h4{font-size:1.15rem;font-family:var(--body);font-weight:800;text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.song-info .artist{color:var(--muted);font-size:.84rem}
.vote-btn{display:inline-flex;align-items:center;gap:7px;background:rgba(var(--accent-rgb),.12);border:1px solid var(--accent);color:var(--white);border-radius:999px;padding:8px 14px;font-weight:800}
.vote-btn:hover{background:var(--accent)}
.vote-count{font-variant-numeric:tabular-nums}
.song-status{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:6px}
.st-playing{background:rgba(34,197,94,.16);color:#86efac}
.st-played{background:rgba(var(--white-rgb),.08);color:var(--muted)}



/* ───────── Escáner ───────── */
.scan-wrap{max-width:520px;margin:0 auto}
#reader{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#000}
.scan-result{margin-top:18px;border-radius:var(--radius);padding:22px;text-align:center;border:2px solid var(--line);background:var(--surface)}
.scan-result h3{font-size:2rem}
.scan-result.valid{border-color:var(--ok);background:rgba(34,197,94,.1)}
.scan-result.used{border-color:var(--warn);background:rgba(245,158,11,.1)}
.scan-result.invalid{border-color:var(--bad);background:rgba(239,68,68,.1)}
/* Hoja de confirmación: cubre la parte inferior y bloquea hasta tocar "Siguiente" */
.scan-result.sheet{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:130;margin:0;border-radius:22px 22px 0 0;border-width:4px 0 0;max-height:92vh;overflow:auto;box-shadow:0 -24px 70px rgba(0,0,0,.8);animation:sheetUp var(--dur-2) var(--ease-out-expo);background:#100a12}
@keyframes sheetUp{from{transform:translate3d(0,24%,0);opacity:0}}
.scan-result.sheet.valid{background:linear-gradient(180deg,rgba(34,197,94,.22),rgba(34,197,94,.05)),#0b0a0d}
.scan-result.sheet.used{background:linear-gradient(180deg,rgba(245,158,11,.22),rgba(245,158,11,.05)),#0b0a0d}
.scan-result.sheet.invalid{background:linear-gradient(180deg,rgba(239,68,68,.25),rgba(239,68,68,.06)),#0b0a0d}
/* Invitado Exclusivo del dueño: dorado de lujo + brillo animado */
.scan-result.exclusive{border-color:#d4af37 !important;color:#f0d479}
.scan-result.sheet.exclusive{background:linear-gradient(180deg,rgba(212,175,55,.30),rgba(212,175,55,.06)),#100b06 !important;border-top-color:#e9c763;box-shadow:0 -24px 80px rgba(212,175,55,.35);animation:sheetUp var(--dur-2) var(--ease-out-expo), goldGlow 1.8s var(--ease-in-out) infinite}
.scan-result.exclusive h3{color:#f3dd8a;text-shadow:0 0 18px rgba(212,175,55,.6)}
.scan-result.exclusive .scan-photo{border-color:#e9c763;box-shadow:0 0 26px rgba(212,175,55,.55)}
@keyframes goldGlow{50%{box-shadow:0 -24px 110px rgba(212,175,55,.6)}}
.excl-ribbon{display:inline-block;background:linear-gradient(90deg,#bf9b30,#fcf6ba,#bf9b30);background-size:200% 100%;color:#3a2c05;font-weight:900;letter-spacing:.08em;font-size:.82rem;padding:7px 18px;border-radius:999px;margin-bottom:10px;animation:goldShine 2.4s linear infinite}
@keyframes goldShine{to{background-position:200% 0}}
.scan-result .scan-photo{width:150px;height:150px;border-radius:50%;object-fit:cover;border:4px solid currentColor;margin:14px auto;background:var(--surface-2)}
.scan-result .scan-next{margin-top:20px;width:100%;font-size:1.05rem;padding:16px}
.scan-result .scan-data{font-size:1.05rem;line-height:1.5}.scan-result .scan-data b{font-size:1.2rem}
/* Destello a pantalla completa (señal visual fuerte para ambientes ruidosos) */
.scan-flash{position:fixed;inset:0;z-index:140;display:grid;place-items:center;pointer-events:none;opacity:0;color:#fff;font-size:42vw;font-weight:900;line-height:1;text-shadow:0 6px 30px rgba(0,0,0,.4)}
.scan-flash.valid{background:#16a34a}.scan-flash.used{background:#d97706}.scan-flash.invalid{background:#dc2626}
.scan-flash.go{animation:scanFlash .75s var(--ease-out) forwards}
@keyframes scanFlash{0%{opacity:.97}55%{opacity:.72}100%{opacity:0}}
/* Luz rosada para avisos de pedido (pedido enviado / trago listo) */
.qts-flash{position:fixed;inset:0;z-index:140;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 42%,var(--accent-glow),rgba(var(--accent-rgb),.25) 40%,transparent 72%)}
.qts-flash.go{animation:nfFlash .85s var(--ease-out) forwards}
@keyframes nfFlash{0%{opacity:0}14%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.qts-flash.go{animation:none;opacity:0}}

/* ───────── Formularios ───────── */
.form{display:flex;flex-direction:column;gap:16px;max-width:460px}
.field{display:flex;flex-direction:column;gap:7px;font-size:.84rem;font-weight:700;color:var(--muted);flex:1}
.field-row{display:flex;gap:14px;flex-wrap:wrap}
.field input,.field textarea,.field select{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:13px 15px;color:var(--white);font-size:1rem;font-weight:500;width:100%;transition:border-color var(--dur-2) var(--ease-out)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent)}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.field textarea{min-height:110px;resize:vertical}
input[type=range]{accent-color:var(--accent);padding:0}
.form-card{max-width:440px;margin:40px auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:34px}
.form-card h1{font-size:2.6rem;margin-bottom:6px}
.form-switch{margin-top:18px;text-align:center;color:var(--muted);font-size:.9rem}
.form-switch a{color:var(--accent);font-weight:700}
.form-error{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.4);color:#fca5a5;padding:11px 14px;border-radius:10px;font-size:.88rem;font-weight:600}
.form-ok{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.4);color:#86efac;padding:11px 14px;border-radius:10px;font-size:.88rem;font-weight:600}

/* ───────── Modal ───────── */
.modal-backdrop{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.78);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:18px;overflow-y:auto}
.modal-backdrop[hidden]{display:none}
/* Entrada de los diálogos: el velo se funde y la hoja sube y se asienta. Es animación (no
   transición) para que corra sola cada vez que el diálogo pasa de oculto a visible. */
.modal-backdrop{animation:qts-fundido var(--dur-3) var(--ease-out) backwards}
.modal-backdrop>*{animation:qts-hoja var(--dur-3) var(--ease-out-expo) backwards}
@keyframes qts-fundido{from{opacity:0}}
@keyframes qts-hoja{from{opacity:0;transform:translate3d(0,var(--rise),0) scale(.985)}}
.banner-x{position:absolute;top:8px;right:10px;background:transparent;border:none;color:var(--muted);font-size:1.05rem;line-height:1;cursor:pointer;padding:5px 8px;border-radius:8px;transition:color var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out)}
.banner-x:hover{color:var(--white);background:rgba(var(--white-rgb),.08)}
.modal{position:relative;width:100%;max-width:560px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:34px;box-shadow:var(--shadow);max-height:92vh;overflow-y:auto}
.modal-close{position:absolute;top:8px;right:10px;width:44px;height:44px;display:grid;place-items:center;font-size:1.8rem;color:var(--muted);line-height:1;transition:color var(--dur-2) var(--ease-out)}
.modal-close:hover{color:var(--white)}
.modal h2{font-size:2.2rem;margin:6px 0 8px}
.modal-sub{color:var(--muted);font-size:.92rem;margin-bottom:18px}
.party-form{display:flex;flex-direction:column;gap:14px}
.services{border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:9px}
.services legend{padding:0 6px;font-weight:800;font-size:.8rem;color:var(--muted)}
.chip{display:flex;align-items:center;gap:9px;font-weight:600;font-size:.9rem;cursor:pointer}
.chip input{accent-color:var(--accent);width:18px;height:18px}
.chip em{margin-left:auto;color:var(--muted);font-style:normal;font-size:.82rem}
.estimate{background:rgba(var(--accent-rgb),.07);border:1px solid rgba(var(--accent-rgb),.3);border-radius:12px;padding:14px}
.estimate-rows{font-size:.84rem;color:var(--muted);display:flex;flex-direction:column;gap:4px}
.estimate-rows .er{display:flex;justify-content:space-between}
.estimate-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.estimate-total strong{font-family:var(--display);font-size:1.8rem;color:var(--accent)}
.estimate-note{font-size:.72rem;color:var(--muted);margin-top:6px}

/* ───────── Toast + notificaciones ───────── */
.toast{position:fixed;left:50%;bottom:26px;transform:translate3d(-50%,14px,0) scale(.98);z-index:200;
  background:var(--surface-2);border:1px solid var(--accent);color:var(--white);padding:13px 22px;border-radius:999px;font-weight:700;
  box-shadow:var(--shadow);opacity:0;pointer-events:none;max-width:90vw;text-align:center;
  transition:opacity var(--dur-2) var(--ease-in),transform var(--dur-2) var(--ease-in)}
.toast.show{opacity:1;transform:translate3d(-50%,0,0);transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out-expo)}
/* En el teléfono el menú inferior flota abajo: el aviso sale por encima de él, no detrás. */
@media(max-width:979px){.toast{bottom:calc(92px + env(safe-area-inset-bottom))}}
.toast.error{border-color:var(--bad)} .toast.ok{border-color:var(--ok)}
.notif-host{position:fixed;top:80px;right:16px;z-index:150;display:flex;flex-direction:column;gap:10px;max-width:330px}
.notif{display:flex;gap:11px;background:var(--surface-2);border:1px solid var(--accent);border-radius:14px;padding:13px 15px;box-shadow:var(--shadow);animation:slideIn var(--dur-3) var(--ease-out-expo)}
.notif .ic{font-size:1.4rem}.notif .nt{font-weight:800;font-size:.92rem}.notif .nb{color:var(--muted);font-size:.82rem}
.notif-body{min-width:0;flex:1}
.notif-action{border-color:var(--cyan,#38bdf8);box-shadow:0 0 22px rgba(21,227,255,.25)}
.notif-accept{margin-top:9px;width:100%;border:0;border-radius:10px;padding:9px 12px;cursor:pointer;font:inherit;font-weight:800;
  color:#04121a;background:linear-gradient(135deg,var(--cyan,#38bdf8),#22c55e)}
.notif-accept{transition:filter var(--dur-2) var(--ease-out)}
.notif-accept:hover{filter:brightness(1.06)}
.notif-accept:disabled{opacity:.6;cursor:default}
@keyframes slideIn{from{transform:translate3d(40px,0,0);opacity:0}to{transform:none;opacity:1}}

/* ───────── Checkout / Confirmación / Ticket ───────── */
.checkout-grid{display:grid;gap:24px;grid-template-columns:1fr}
/* En el teléfono, primero qué compras y cuánto; después la cuenta y el pago. */
@media(max-width:859px){.checkout-grid>aside{order:-1}}
@media(min-width:860px){.checkout-grid{grid-template-columns:1.2fr .8fr}}
.summary{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;position:sticky;top:90px}
.summary-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid rgba(var(--white-rgb),.06);font-size:.92rem}
.summary-total{display:flex;justify-content:space-between;margin-top:12px;font-family:var(--display);font-size:1.8rem}
.summary-total b{color:var(--accent)}
.pay-card{max-width:480px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.pay-fake{display:flex;align-items:center;gap:10px;background:rgba(var(--white-rgb),.04);border:1px dashed var(--line);border-radius:10px;padding:12px;font-size:.82rem;color:var(--muted);margin:14px 0}
.ticket{max-width:520px;margin:0 auto;background:linear-gradient(180deg,var(--surface),var(--ink-2));border:1px solid var(--accent);border-radius:20px;overflow:hidden}
.ticket-head{padding:24px;text-align:center;border-bottom:2px dashed var(--line)}
.ticket-head h2{font-size:2rem}
.ticket-qr{padding:26px;text-align:center}
.ticket-qr img{width:240px;height:240px;margin:0 auto;background:#fff;border-radius:14px;padding:10px}
.ticket-code{font-family:var(--display);font-size:1.6rem;letter-spacing:.1em;color:var(--accent);margin-top:14px}
.ticket-meta{padding:0 26px 26px;color:var(--muted);font-size:.9rem;text-align:center}
.ticket+.ticket{margin-top:22px}

/* ───────── Admin SPA ───────── */
.admin-body{background:#08080a}
.admin-login{max-width:380px;margin:14vh auto;padding:34px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.admin-shell{display:none;min-height:100vh}
.admin-shell.authed{display:block}
.admin-topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 18px;background:rgba(10,10,10,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
/* Las categorías, siempre a la vista: pegadas arriba al hacer scroll y todas de una, sin deslizar la fila.
   En el teléfono van en 4 columnas, con el ícono sobre el nombre. El menú se ancla a .admin-nav. */
.admin-nav{position:sticky;top:0;z-index:19;border-bottom:1px solid var(--line);background:#0c0c0e}
.admin-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:8px}
.adm-cat-btn{display:flex;flex-direction:column;align-items:center;gap:1px;width:100%;padding:5px 1px;border-radius:12px;font-weight:700;font-size:clamp(.56rem,2.9vw,.72rem);line-height:1.2;color:var(--muted);border:1px solid transparent;
  transition:background-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out)}
.adm-cat-btn>[aria-hidden]{font-size:1.1rem;line-height:1.15}
.adm-cat-btn:hover{color:#fff;background:rgba(255,255,255,.05)}
.adm-cat.abierta .adm-cat-btn{color:#fff;background:rgba(255,255,255,.09)}
.adm-cat.actual .adm-cat-btn{background:var(--accent);color:var(--sobre-acento)}
.adm-menu{position:absolute;left:10px;right:10px;top:calc(100% - 3px);z-index:2;display:flex;flex-wrap:wrap;gap:4px;padding:8px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);animation:qts-fundido var(--dur-2) var(--ease-out)}
.adm-menu[hidden]{display:none}
@media(min-width:760px){
  .admin-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px}
  .adm-cat{position:relative}
  .adm-cat-btn{flex-direction:row;gap:7px;width:auto;white-space:nowrap;padding:9px 14px;border-radius:999px;font-size:.84rem}
  .adm-cat-btn>[aria-hidden]{font-size:inherit}
  .adm-cat-btn::after{content:"▾";font-size:.74em;transition:transform var(--dur-2) var(--ease-out)}
  .adm-cat.abierta .adm-cat-btn::after{transform:rotate(180deg)}
  .adm-menu{left:0;right:auto;top:calc(100% + 6px);min-width:230px;flex-direction:column;flex-wrap:nowrap}
  .adm-menu .admin-tab{width:100%;text-align:left;border-radius:10px}
}
/* En el teléfono la barra de arriba ocupaba media pantalla y se quedaba pegada: ahora se va con el
   scroll, sus botones van en una fila que se desliza, y lo que queda pegado son las pestañas. */
@media(max-width:759px){
  .admin-topbar{flex-wrap:wrap;gap:10px;padding:10px 14px}
  .admin-topbar>div{flex-wrap:nowrap!important;overflow-x:auto;width:100%;padding-bottom:2px;scrollbar-width:none}
  .admin-topbar .guia-acciones{flex-wrap:nowrap}
  .admin-topbar .btn{white-space:nowrap;flex:none}
}
.admin-tab{white-space:nowrap;padding:9px 15px;border-radius:999px;font-weight:700;font-size:.84rem;color:var(--muted);border:1px solid transparent;transition:background-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out)}
.admin-tab.active{background:var(--accent);color:var(--sobre-acento)}
.admin-tab:hover:not(.active){color:#fff;background:rgba(255,255,255,.05)}
.admin-panel{padding:22px 18px;max-width:1200px;margin:0 auto;display:none}
.admin-panel.active{display:block;animation:qts-fundido var(--dur-2) var(--ease-out)}
.stat-grid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr);margin-bottom:24px}
@media(min-width:760px){.stat-grid{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px}
.stat .v{font-family:var(--display);font-size:2.4rem;color:var(--accent);line-height:1}
.stat .l{font-size:.74rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;margin-top:6px}
.data-table{width:100%;border-collapse:collapse;font-size:.86rem}
.data-table th,.data-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.data-table th{color:var(--muted);font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.data-table th,.data-table td{white-space:nowrap}
.data-table tr:hover td{background:rgba(var(--white-rgb),.02)}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-sm)}
@media(max-width:640px){.data-table{font-size:.8rem}.data-table th,.data-table td{padding:8px 9px}}
/* Tareas de hoy (admin) */
.task-row{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:var(--campo);margin-bottom:8px}
.task-row.done{opacity:.55}
.task-row.done .task-title{text-decoration:line-through}
.task-check{display:flex;align-items:center;padding-top:2px}
.task-check input{width:20px;height:20px;accent-color:var(--accent);cursor:pointer}
.task-body{flex:1;min-width:0}
.task-title{font-weight:700;font-size:.95rem}
.task-actions{display:flex;gap:6px;align-items:center;flex-shrink:0}

/* ───────── Login animado (/ingresar) — card central sobre canvas de partículas ───────── */
@keyframes fadeSlideUp{from{opacity:0;transform:translate3d(0,var(--rise),0)}to{opacity:1;transform:none}}
.login-container{position:relative;min-height:calc(100vh - 68px);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:48px 20px}
.particles-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
/* Card con borde-gradiente + glass */
.login-card{position:relative;z-index:1;width:100%;max-width:432px;border-radius:calc(var(--radius) + 4px);padding:1px;
  background:linear-gradient(160deg,rgba(var(--accent-rgb),.55),rgba(56,189,248,.28) 42%,rgba(var(--white-rgb),.06) 75%);
  box-shadow:var(--shadow),0 0 60px rgba(var(--accent-rgb),.14);animation:fadeSlideUp var(--dur-4) var(--ease-out-expo) backwards}
.login-card-inner{background:rgba(14,10,18,.84);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);
  border-radius:calc(var(--radius) + 3px);padding:36px 32px}
.login-header{text-align:center;margin-bottom:22px}
.login-header .login-mark{display:inline-flex;color:#fff;filter:drop-shadow(0 0 22px var(--accent-glow));margin-bottom:8px}
.login-header h1{font-family:var(--display);font-size:3.2rem;line-height:.9;letter-spacing:.02em}
.login-header p{color:var(--muted);margin-top:6px;font-size:.95rem}
.login-form{display:flex;flex-direction:column;gap:16px}
/* Floating labels (CSS :has, sobrevive al ojo inyectado) */
.form-field{position:relative;animation:fadeSlideUp var(--dur-4) var(--ease-out-expo) backwards}
.form-field:nth-of-type(1){animation-delay:90ms}.form-field:nth-of-type(2){animation-delay:160ms}
.form-field input{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:22px 15px 9px;color:#fff;font-family:var(--body);font-size:1rem;font-weight:500;transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.form-field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.form-field label{position:absolute;left:16px;top:16px;color:var(--muted);font-size:.95rem;font-weight:600;pointer-events:none;transform-origin:left top;transition:transform var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out)}
.form-field:has(input:focus) label,.form-field:has(input:not(:placeholder-shown)) label{transform:translateY(-10px) scale(.76);color:var(--accent-2)}
/* Recordarme + olvidé */
.form-options{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.84rem}
.remember-me{display:inline-flex;align-items:center;gap:8px;color:var(--muted);cursor:pointer;font-weight:600}
.remember-me input{position:absolute;opacity:0;width:0;height:0}
.remember-me .checkmark{width:18px;height:18px;border:1px solid var(--line);border-radius:5px;background:var(--surface-2);display:inline-grid;place-items:center;transition:background-color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out);font-size:.72rem;font-weight:900;color:#fff}
.remember-me input:checked + .checkmark{background:linear-gradient(135deg,var(--accent),var(--accent-deep));border-color:var(--accent)}
.remember-me input:checked + .checkmark::after{content:'✓'}
.forgot-password{color:var(--accent-2);font-weight:700}
/* Botón Entrar con gradiente + ripple cian */
.login-button{position:relative;overflow:hidden;width:100%;border:0;cursor:pointer;color:#fff;font-family:var(--display);letter-spacing:.06em;font-size:1.4rem;
  padding:15px;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--accent),var(--accent-deep));background-size:180% 180%;
  box-shadow:var(--shadow-accent);transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),background-position var(--dur-4) var(--ease-out);
  animation:fadeSlideUp var(--dur-4) var(--ease-out-expo) backwards;animation-delay:230ms;margin-top:2px}
@media(hover:hover) and (pointer:fine){.login-button:hover{transform:translateY(-2px);background-position:100% 0;box-shadow:0 18px 46px rgba(var(--accent-rgb),.45)}}
.login-button:focus-visible{background-position:100% 0}
.login-button:active{transform:scale(.98);transition-duration:var(--dur-1)}
.login-button:disabled{opacity:.55;filter:grayscale(.4);cursor:not-allowed;transform:none;box-shadow:none}
.login-button .rp{position:absolute;border-radius:50%;transform:translate(-50%,-50%) scale(0);background:rgba(56,189,248,.55);pointer-events:none;animation:btnRipple var(--dur-4) var(--ease-out) forwards}
@keyframes btnRipple{to{transform:translate(-50%,-50%) scale(16);opacity:0}}
.signup-prompt{text-align:center;color:var(--muted);font-size:.92rem;margin-top:22px}
.signup-prompt a{color:var(--accent);font-weight:800}
.login-staff{text-align:center;color:var(--muted-2);font-size:.74rem;margin-top:12px;line-height:1.5}
@media (prefers-reduced-motion:reduce){.login-card,.form-field,.login-button{animation:none}}
/* Es un <td>: con display:flex deja de ser celda y su borde queda corrido del resto de la fila. */
.admin-row-actions{white-space:normal}
.admin-row-actions>*{margin:3px 6px 3px 0}
.tiny{font-size:.78rem;padding:6px 12px}
/* Con el dedo, un botón de 29px se erra: en pantallas táctiles ninguno queda bajo 40px. */
@media (pointer:coarse){.btn-sm,.tiny{min-height:40px}}
.badge{font-size:.68rem;font-weight:800;padding:3px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:.05em}
.b-ok{background:rgba(34,197,94,.16);color:#86efac}.b-warn{background:rgba(245,158,11,.16);color:#fcd34d}.b-bad{background:rgba(239,68,68,.16);color:#fca5a5}.b-mute{background:rgba(var(--white-rgb),.08);color:var(--muted)}
.admin-form{display:grid;gap:14px;grid-template-columns:repeat(2,1fr);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:22px}
.admin-form .full{grid-column:1/-1}
.admin-form label{display:flex;flex-direction:column;gap:6px;font-size:.78rem;font-weight:700;color:var(--muted)}
.admin-form input,.admin-form textarea,.admin-form select{background:var(--campo);border:1px solid var(--line);border-radius:9px;padding:10px 12px;color:var(--white)}
.admin-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 16px;flex-wrap:wrap}
.admin-section-title h2{font-size:1.9rem}
.tier-editor{display:flex;flex-direction:column;gap:8px}
.tier-edit-row{display:grid;grid-template-columns:1.4fr .8fr .8fr repeat(6,auto);gap:8px;align-items:center}
.tier-edit-row input{padding:8px 10px}
@media(max-width:640px){.admin-form{grid-template-columns:1fr}.tier-edit-row{grid-template-columns:1fr 1fr}}
/* Email marketing: formulario y vista previa del correo lado a lado; en el teléfono, uno bajo el otro. */
.mk-grid{display:grid;gap:18px;grid-template-columns:minmax(0,1fr) minmax(300px,420px);align-items:start}
.mk-form{margin-bottom:0}
.mk-pub{border:0;padding:0;margin:0;display:grid;gap:8px;grid-template-columns:repeat(2,1fr)}
.mk-pub legend{font-size:.78rem;font-weight:700;color:var(--muted);margin-bottom:6px}
.admin-form .mk-op{flex-direction:row;align-items:flex-start;gap:9px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:#0d0d10;cursor:pointer;color:#fff;font-weight:400}
.admin-form .mk-op input{accent-color:var(--accent);margin-top:3px}
.mk-op span{display:flex;flex-direction:column;gap:2px;font-size:.86rem}.mk-op small{color:var(--muted);font-size:.74rem;line-height:1.35}
.mk-op:has(input:checked){border-color:var(--accent);background:rgba(255,0,142,.08)}
.mk-cuantos{font-size:.88rem;color:var(--muted);margin-top:-4px}.mk-cuantos b{color:#fff}
.mk-dos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mk-lado{position:sticky;top:12px}
.mk-vista{display:block;width:100%;height:760px;border:1px solid var(--line);border-radius:16px;background:#050509}
@media(max-width:980px){.mk-grid{grid-template-columns:1fr}.mk-lado{position:static}.mk-vista{height:640px}}
@media(max-width:640px){.mk-pub,.mk-dos{grid-template-columns:1fr}}

/* ───────── Revelado al hacer scroll ─────────
   Solo se ocultan con JS (.js lo pone un script en <head>) y mientras app.js no los marque. Si
   app.js no alcanza a correr (red lenta, un error), el mismo script de <head> pone .sin-reveal a
   los 3 s y todo queda a la vista: nunca una sección en blanco.
   La entrada es una ANIMACIÓN con relleno "backwards", no una transición que se queda puesta:
   antes el "transition: .6s ease" del revelado pisaba el de las tarjetas, y su hover tardaba 600 ms
   en levantar y cambiaba el borde de golpe. Ahora, al terminar, cada tarjeta vuelve a su ritmo. */
.js:not(.sin-reveal) [data-reveal]:not(.in){opacity:0}
.js [data-reveal].in{animation:qts-entra var(--dur-4) var(--ease-out-expo) backwards;animation-delay:var(--d,0ms)}
/* Lo que ya estaba a la vista al cargar (llegando con #ancla o al volver atrás) no viaja: se funde corto. */
.js [data-reveal].in.ya{animation:qts-fundido var(--dur-2) var(--ease-out) backwards}
.sin-reveal [data-reveal].in{animation:none}
/* Imágenes que todavía no llegan cuando corre app.js: en vez de aparecer de golpe sobre una
   tarjeta que ya entró, se funden al cargar. Solo se marcan las que aún no pintaron nada. */
img.img-carga{opacity:0}
img.img-llega{animation:qts-fundido var(--dur-4) var(--ease-out)}

/* Solo para lectores de pantalla (contenido accesible no visible) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ───────── Misc ───────── */
.empty{text-align:center;color:var(--muted);padding:50px 20px;border:1px dashed var(--line);border-radius:var(--radius)}
.empty .big{font-family:var(--display);font-size:2rem;color:var(--white);margin-bottom:8px}
.center{text-align:center}
.mt{margin-top:24px}.mt-sm{margin-top:12px}.mb{margin-bottom:24px}
.divider{height:1px;background:var(--line);margin:30px 0}
.sponsors{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:center;opacity:.7;margin-top:30px}
.sponsors span{font-weight:800;letter-spacing:.08em;color:var(--muted);font-size:.9rem}
.tonight-strip{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;background:linear-gradient(120deg,rgba(var(--accent-rgb),.12),transparent);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius);padding:18px 22px;margin-top:28px}
.tonight-strip .ts-dj{font-family:var(--display);font-size:1.6rem}
.pagehead{padding:48px 0 8px;text-align:center}
.pagehead h1{font-size:clamp(2.8rem,9vw,5rem)}
.breadcrumb{font-size:.8rem;color:var(--muted);margin-bottom:8px}
.breadcrumb a:hover{color:var(--white)}

/* ───────── Pulido (auditoría senior 26-jun) ───────── */
.ledger-row{transition:background-color var(--dur-2) var(--ease-out)}
.ledger-row:hover{background:rgba(var(--white-rgb),.035)}
/* Selects de formulario consistentes (antes iban con estilos inline dispersos) */
.admin-form select,.form select{background:var(--campo);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px;color:var(--white);font-size:.95rem;width:100%}
.admin-form select:focus,.form select:focus{outline:none;border-color:var(--accent)}
/* El carrito fijo (móvil) no debe tapar el contenido al estar visible */
body:has(.cart-bar.show) main{padding-bottom:104px}
/* Estado deshabilitado de inputs */
input[disabled],select[disabled]{opacity:.5;cursor:not-allowed}
/* Agrupador de acciones por fila (admin Usuarios) */
.rowmenu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border:1px solid var(--line);border-radius:999px;background:rgba(var(--white-rgb),.05);font-size:.8rem;font-weight:700;white-space:nowrap}
.rowmenu>summary::-webkit-details-marker{display:none}
.rowmenu[open]>summary{border-color:var(--accent);color:var(--accent-2)}
.rowmenu-body{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;max-width:360px}

/* ───────── Menú inferior glassmorphism (Instagram 2026) · solo mobile ───────── */
.qts-tabbar{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:85;
  transition:transform var(--dur-3) var(--ease-out),opacity var(--dur-2) var(--ease-out)}
.qts-tabbar-inner{position:relative;display:flex;align-items:center;gap:5px;padding:7px;border-radius:999px;
  background:rgba(18,14,24,.62);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);
  border:1px solid rgba(var(--white-rgb),.14);box-shadow:0 16px 44px rgba(0,0,0,.55),inset 0 1px 0 rgba(var(--white-rgb),.10)}
.qts-tab{position:relative;display:grid;place-items:center;width:50px;height:50px;border-radius:999px;color:var(--muted);
  background:transparent;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:color var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.qts-tab svg{width:25px;height:25px}
.qts-tab:active{transform:scale(.9);transition-duration:var(--dur-1)}
.qts-tab.active,.qts-tab:focus-visible{color:var(--white);background:rgba(var(--white-rgb),.10)}
@media(hover:hover) and (pointer:fine){.qts-tab:hover{color:var(--white);background:rgba(var(--white-rgb),.10)}}
.qts-tab-cta{background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#fff;box-shadow:0 8px 22px rgba(var(--accent-rgb),.5)}
.qts-tab-cta:hover,.qts-tab-cta.active,.qts-tab-cta:focus-visible{background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#fff}
.qts-tab-pic{width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid var(--accent)}
.qts-tab-avatar.active .qts-tab-pic,.qts-tab-avatar:hover .qts-tab-pic{border-color:#fff}
.qts-dot{position:absolute;top:7px;right:8px;width:9px;height:9px;border-radius:50%;background:#ff3b6b;border:2px solid rgba(18,14,24,.95)}
/* Botón central (mis entradas / comprar) un poco más grande: es la acción principal. */
.qts-tab-cta{width:56px;height:56px}
@media(max-width:389px){.qts-tabbar-inner{gap:3px}.qts-tab:not(.qts-tab-cta){width:44px;height:44px}}
@media(max-width:359px){.qts-tab:not(.qts-tab-cta){width:42px;height:42px}}   /* con Carta y Fotos son 6: que quepan en un teléfono chico */
.qts-tab-cta>svg{width:27px;height:27px}
/* Line up de hoy */
body:has(.cart-bar.show) .qts-tabbar{transform:translateX(-50%) translateY(170%);opacity:0;pointer-events:none}
.header-acct-mobile{display:flex}
@media(max-width:979px){main{padding-bottom:96px}.site-footer{padding-bottom:106px}}
@media(min-width:980px){.qts-tabbar{display:none}.header-acct-mobile{display:none}}

/* ───────── Modal de ayuda / tutoriales ───────── */
.help-sheet{max-width:520px;width:100%;position:relative;max-height:86vh;overflow-y:auto}
.help-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.help-head h3{margin:0}
.help-sheet details{border:1px solid var(--line);border-radius:12px;padding:0 14px;margin-bottom:8px;background:rgba(var(--white-rgb),.03)}
.help-sheet summary{cursor:pointer;font-weight:700;padding:12px 0;list-style:none}
.help-sheet summary::-webkit-details-marker{display:none}
.help-sheet summary::after{content:'+';float:right;color:var(--accent);font-weight:800;font-size:1.15rem;line-height:1;transition:transform var(--dur-2) var(--ease-out)}
.help-sheet details[open] summary::after{transform:rotate(45deg)}
.help-sheet details[open] p{animation:qts-abre var(--dur-3) var(--ease-out) backwards}
.help-sheet details p{color:var(--muted);font-size:.88rem;padding:0 0 13px;margin:0}

/* ───────── Cuenta: chip compacto de foto + fila de acciones ───────── */
.ingreso-chip{display:flex;align-items:center;gap:14px;padding:11px 14px;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(135deg,rgba(var(--accent-rgb),.07),rgba(21,16,26,.55));margin-bottom:18px}
.ingreso-chip .ic-txt{flex:1;min-width:0}
.ingreso-chip .ic-txt b{display:block;font-size:.95rem}
.ingreso-chip .ic-txt span{display:block;color:var(--muted);font-size:.78rem}
.acct-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.acct-actions>*{flex:1 1 180px;font-size:1.02rem;padding:14px 20px;justify-content:center}

/* ───────── Asistente de ayuda (FAQ bot) ───────── */
.qts-help-link{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;font:inherit}
.qts-help-link .qts-bot-ico{opacity:.85}
/* Lanzador flotante */
.qts-bot-fab{position:fixed;right:16px;bottom:calc(86px + env(safe-area-inset-bottom));z-index:90;
  display:inline-flex;align-items:center;gap:8px;padding:11px 16px 11px 13px;border:0;cursor:pointer;
  border-radius:999px;color:#fff;font-weight:800;font-size:.92rem;letter-spacing:.01em;
  background:linear-gradient(135deg,var(--accent),var(--accent-deep));box-shadow:0 12px 30px var(--accent-glow),0 4px 12px rgba(0,0,0,.4);
  transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),opacity var(--dur-2) var(--ease-out)}
@media(hover:hover) and (pointer:fine){.qts-bot-fab:hover{transform:translateY(-2px);box-shadow:0 16px 38px var(--accent-glow),0 6px 16px rgba(0,0,0,.5)}}
.qts-bot-fab:focus-visible{box-shadow:0 16px 38px var(--accent-glow),0 6px 16px rgba(0,0,0,.5)}
.qts-bot-fab:active{transform:scale(.96);transition-duration:var(--dur-1)}
@media(min-width:980px){.qts-bot-fab{bottom:24px;right:24px}}
/* En móvil el FAB sobra Y ESTORBA: el menú inferior ya trae su botón de Ayuda, y flotando
   ahí tapaba el borde derecho del botón de COMPRAR del héroe (medido: se pisaban 50px).
   Tapar el botón que vende es el peor lugar posible para un botón de ayuda. */
@media(max-width:979px){.qts-bot-fab{display:none}}
/* Oculta el FAB cuando hay carrito abajo, el bot abierto o el menú deslizado */
body:has(.cart-bar.show) .qts-bot-fab,
body:has(.qts-bot.open) .qts-bot-fab{opacity:0;pointer-events:none;transform:translateY(40px)}
/* Panel del asistente */
.qts-bot{position:fixed;z-index:130;right:0;bottom:0;left:0;top:auto;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(20,14,24,.99),rgba(8,6,11,.99));color:var(--white);
  border-top:1px solid var(--accent);box-shadow:0 -18px 60px rgba(0,0,0,.6);
  height:min(88vh,720px);border-radius:20px 20px 0 0;
  transform:translate3d(0,100%,0);opacity:0;transition:transform var(--dur-2) var(--ease-in),opacity var(--dur-2) var(--ease-in)}
.qts-bot.open{transform:none;opacity:1;transition:transform var(--dur-3) var(--ease-out-expo),opacity var(--dur-2) var(--ease-out)}
.qts-bot[hidden]{display:none}
@media(min-width:980px){.qts-bot{left:auto;right:24px;bottom:24px;width:392px;height:min(72vh,640px);
  border:1px solid var(--accent);border-radius:20px}}
.qts-bot-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;
  border-bottom:1px solid var(--line);background:rgba(var(--accent-rgb),.07);border-radius:20px 20px 0 0}
.qts-bot-id{display:flex;align-items:center;gap:10px;min-width:0}
.qts-bot-id>.qts-bot-ico{flex:none;width:38px;height:38px;padding:7px;border-radius:11px;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-deep));box-shadow:0 6px 16px var(--accent-glow)}
.qts-bot-id-tx{min-width:0}
.qts-bot-id-tx b{display:block;font-size:1rem;line-height:1.1}
.qts-bot-id-tx span{display:block;color:var(--muted);font-size:.74rem;margin-top:2px}
.qts-bot-x{flex:none;background:rgba(var(--white-rgb),.06);border:1px solid var(--line);color:var(--white);
  width:34px;height:34px;border-radius:10px;cursor:pointer;font-size:1rem;line-height:1;transition:background-color var(--dur-2) var(--ease-out)}
.qts-bot-x:hover{background:rgba(var(--white-rgb),.12)}
.qts-bot-thread{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.qts-bot-msg{max-width:86%;padding:11px 14px;border-radius:15px;font-size:.9rem;line-height:1.5;word-wrap:break-word}
.qts-bot-msg.bot{align-self:flex-start;background:var(--surface-2);border:1px solid var(--line);border-bottom-left-radius:5px}
.qts-bot-msg.me{align-self:flex-end;background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#fff;border-bottom-right-radius:5px}
.qts-bot-msg.bot a{color:var(--accent-2);font-weight:700;text-decoration:underline}
.qts-bot-msg.bot b{color:var(--white)}
.qts-bot-chips{display:flex;flex-wrap:wrap;gap:7px;margin:-2px 0 2px}
.qts-bot-chip{display:inline-block;max-width:100%;text-align:left;padding:8px 13px;border-radius:999px;cursor:pointer;
  background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.35);color:var(--white);font:inherit;font-size:.82rem;font-weight:600;
  line-height:1.3;transition:background-color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
.qts-bot-chip:hover{background:rgba(var(--accent-rgb),.22);border-color:var(--accent)}
a.qts-bot-chip{text-decoration:none}
.qts-bot-typing{display:inline-flex;gap:4px;align-items:center}
.qts-bot-typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:qts-bot-blink 1s var(--ease-in-out) infinite}
.qts-bot-typing span:nth-child(2){animation-delay:.18s}
.qts-bot-typing span:nth-child(3){animation-delay:.36s}
@keyframes qts-bot-blink{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.qts-bot-form{display:flex;gap:8px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:rgba(10,10,10,.5)}
.qts-bot-form input{flex:1;min-width:0;background:var(--campo);border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--white);font:inherit;font-size:.92rem}
.qts-bot-form input:focus{outline:none;border-color:var(--accent)}
.qts-bot-send{flex:none;width:46px;border:0;border-radius:12px;cursor:pointer;color:#fff;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-deep));box-shadow:0 6px 16px var(--accent-glow)}
.qts-bot-send{transition:filter var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.qts-bot-send:hover{filter:brightness(1.08)}
.qts-bot-send:active{transform:scale(.92);transition-duration:var(--dur-1)}
/* Cada mensaje nuevo del hilo entra subiendo y se asienta. */
.qts-bot-msg,.qts-bot-chips{animation:qts-hoja var(--dur-3) var(--ease-out-expo) backwards}
@media(max-width:620px){body.qts-bot-lock{overflow:hidden}}

/* ════════════════════════════════════════════════════════════════════════════
   QUETASHENDO · EMBUDO DE VENTA + CAPA 3D
   Todo lo que sigue es propio de la home de conversión: héroe WebGL, barra de
   urgencia, tienda de entradas en la misma página, pasos, garantías y FAQ.
   ════════════════════════════════════════════════════════════════════════════ */

/* ───────── Regla de espectro (separador de marca) ───────── */
.spectrum-rule{height:3px;border-radius:3px;background:var(--spectrum);opacity:.9;margin:0}
.h-line{background:var(--spectrum)}
.eyebrow{color:var(--c-cyan)}

/* Texto con el espectro (sólo titulares grandes: en cuerpo pierde contraste) */
.spectrum-text{background:var(--spectrum);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;filter:saturate(1.1)}
@supports not (background-clip:text){.spectrum-text{color:var(--c-yellow);-webkit-text-fill-color:currentColor}}

/* ───────── HÉROE 3D ───────── */
.qts-hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;isolation:isolate;
  padding:96px 0 132px;background:#000}

/* ───────── Tienda de entradas en la home ───────── */
.shop{position:relative}
.shop-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:680px){.shop-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.shop-grid{grid-template-columns:repeat(3,1fr)}}
/* min-width:0 → un ítem de grid PUEDE encogerse bajo su contenido mínimo. Sin esto, un texto
   largo dentro de la tarjeta empuja el ancho de la página entera. overflow-wrap protege de
   palabras sin espacios (un nombre de tramo escrito de corrido desde el admin). */
.shop-grid>*{min-width:0}
.shop-card{min-width:0;overflow-wrap:anywhere}
.shop-card>*{min-width:0;max-width:100%}

.shop-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:22px 22px 20px;border-radius:18px;
  background:linear-gradient(180deg,rgba(var(--white-rgb),.045),rgba(var(--white-rgb),.015));border:1px solid var(--line);
  transition:transform var(--dur-3) var(--ease-out),border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-3) var(--ease-out)}
@media(hover:hover) and (pointer:fine){.shop-card:hover{transform:translateY(-4px);border-color:rgba(var(--white-rgb),.24);box-shadow:0 22px 56px rgba(0,0,0,.5)}}
/* Filo de color por tramo: cada entrada tiene su tinta del espectro. */
.shop-card::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:3px;background:var(--tint,var(--c-cyan))}
.shop-card.is-live{border-color:var(--tint);box-shadow:0 0 0 1px var(--tint) inset,0 18px 50px rgba(0,0,0,.5)}
.shop-card.is-sold{opacity:.42;filter:grayscale(.65)}
@media(hover:hover) and (pointer:fine){.shop-card.is-sold:hover{transform:none;box-shadow:none}}

.shop-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.shop-name{font-family:var(--display);font-size:1.75rem;line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--white);overflow-wrap:anywhere}
/* La etiqueta lleva tinta negra sobre la tinta del tramo. El violeta puro no alcanza
   ratio de contraste con texto chico, así que TODA etiqueta se aclara un 35%: sube la
   luminancia de las seis tintas por igual y el negro queda legible en todas. */
.shop-flag{font-size:.62rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:999px;
  white-space:nowrap;color:#08080C;background:var(--tint,var(--c-cyan))}
@supports (background:color-mix(in srgb,red 50%,white)){
  .shop-flag{background:color-mix(in srgb,var(--tint,var(--c-cyan)) 65%,#fff 35%)}
}
.shop-flag.ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}
.shop-price{font-family:var(--display);font-size:2.6rem;line-height:1;color:var(--white);letter-spacing:.01em}
.shop-price small{font-family:var(--body);font-size:.7rem;font-weight:700;letter-spacing:.16em;color:var(--muted);
  text-transform:uppercase;display:block;margin-top:4px}
.shop-perks{display:flex;flex-direction:column;gap:6px;margin:2px 0 4px}
.shop-perks li{display:flex;gap:9px;align-items:flex-start;font-size:.86rem;color:#D9D9E2;list-style:none;line-height:1.45}
.shop-perks li::before{content:"";flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--tint,var(--c-cyan));margin-top:8px}

.shop-stock{display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:6px}
.shop-left{font-size:.74rem;font-weight:700;color:var(--muted)}
.shop-card .btn{width:100%;justify-content:center;white-space:normal;text-align:center;line-height:1.3;min-height:44px}

/* ───────── Pasos "cómo funciona" ───────── */
.steps{display:grid;gap:18px;counter-reset:step}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
/* Cómo entras: el video tutorial (9:16) junto a los 3 pasos. En el teléfono, el video arriba. */
.como-grid{display:grid;gap:26px}
.tuto{margin:0 auto;width:min(100%,320px);aspect-ratio:9/16;border-radius:26px;overflow:hidden;background:#000;
  border:1px solid var(--line);box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 50px rgba(var(--accent-rgb),.14)}
.tuto video{display:block;width:100%;height:100%;object-fit:cover}
.tuto{position:relative}
.tuto-sonido{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);padding:9px 16px;border-radius:999px;
  border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.62);color:#fff;font:600 13px/1 Montserrat,system-ui,sans-serif;
  white-space:nowrap;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:border-color var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out)}
.tuto-sonido:hover,.tuto-sonido[aria-pressed="true"]{border-color:var(--accent)}
.tuto-sonido:active{background:rgba(0,0,0,.8)}
.tuto-sonido:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(min-width:860px){.como-grid{grid-template-columns:320px 1fr;gap:44px;align-items:center}
  .como-grid .steps{grid-template-columns:1fr}}
/* Panel · pedidos de cambio */
.pedido{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:rgba(var(--white-rgb),.02);margin-bottom:10px}
.pedido-cab{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.8rem}
.pedido-txt{margin:8px 0 0;white-space:pre-wrap;line-height:1.5}
.pedido-decide{display:grid;gap:8px;margin-top:10px}
.pedido-diag{margin:0;font-size:.86rem;line-height:1.5;color:var(--muted)}
.pedido-op{display:grid;gap:3px;text-align:left;padding:11px 13px;border-radius:10px;border:1px solid var(--line);background:rgba(var(--accent-rgb),.06);color:var(--white);font:inherit;font-size:.86rem;line-height:1.45;cursor:pointer;transition:border-color var(--dur-2) var(--ease-out)}
.pedido-op:hover{border-color:var(--accent)}
.pedido-op:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pedido-op:disabled{opacity:.5;cursor:default}
.pedido-res{margin:8px 0 0;padding:8px 10px;border-left:3px solid var(--accent);background:rgba(var(--accent-rgb),.06);white-space:pre-wrap;font-size:.9rem;color:var(--muted)}
.step{position:relative;padding:24px 22px;border:1px solid var(--line);border-radius:16px;background:rgba(var(--white-rgb),.025)}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);position:absolute;top:16px;right:18px;
  font-family:var(--display);font-size:2.6rem;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(var(--white-rgb),.22)}
.step h3{font-size:1.4rem;margin-bottom:8px;color:var(--white)}
.step p{font-size:.9rem;color:var(--muted);line-height:1.55}

/* ───────── Garantías / confianza ───────── */
.trust{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);margin-top:26px}
@media(min-width:760px){.trust{grid-template-columns:repeat(4,1fr)}}
.trust div{display:flex;flex-direction:column;gap:3px;padding:15px 16px;border-radius:13px;
  background:rgba(var(--white-rgb),.03);border:1px solid var(--line)}
.trust b{font-size:.86rem;color:var(--white)}
.trust span{font-size:.76rem;color:var(--muted);line-height:1.45}

/* ───────── FAQ (details nativo: cero JS) ───────── */
.faq{display:flex;flex-direction:column;gap:10px;max-width:800px}
.faq details{border:1px solid var(--line);border-radius:13px;background:rgba(var(--white-rgb),.025);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:16px 20px;font-weight:700;font-size:.96rem;color:var(--white);
  display:flex;align-items:center;justify-content:space-between;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary{transition:color var(--dur-2) var(--ease-out)}
.faq summary::after{content:"+";font-family:var(--display);font-size:1.6rem;line-height:1;color:var(--c-cyan);transition:transform var(--dur-3) var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] summary{color:var(--c-cyan)}
/* La respuesta aparece bajando apenas: se lee como que se abre, sin animar la altura. */
.faq details[open] p{animation:qts-abre var(--dur-3) var(--ease-out) backwards}
@keyframes qts-abre{from{opacity:0;transform:translate3d(0,-6px,0)}}
@media(hover:hover) and (pointer:fine){.faq summary:hover{color:var(--c-cyan)}}
.faq p{padding:0 20px 18px;color:var(--muted);font-size:.9rem;line-height:1.65}
.faq p a{color:var(--c-cyan);text-decoration:underline}

/* ───────── CTA de cierre ───────── */
.closer{position:relative;overflow:hidden;border-radius:22px;padding:52px 28px;text-align:center;border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(255,0,142,.16),rgba(144,0,255,.12) 45%,rgba(0,182,255,.10) 100%),var(--surface)}
.closer::before{content:"";position:absolute;inset:-40% -10% auto;height:70%;filter:blur(70px);opacity:.35;
  background:conic-gradient(from 120deg,var(--c-yellow),var(--c-magenta),var(--c-violet),var(--c-cyan),var(--c-yellow))}
.closer>*{position:relative}
.closer h2{font-size:clamp(2.2rem,6vw,3.6rem);margin-bottom:12px}
.closer p{color:var(--muted);max-width:52ch;margin:0 auto 24px}

/* Experiencia (tarjetas de plataforma) con tinte por tarjeta */
.xp-card{border-color:var(--line)}
@media(hover:hover) and (pointer:fine){.xp-card:hover{border-color:var(--tint,var(--c-cyan))}}
.xp-card:focus-visible{border-color:var(--tint,var(--c-cyan))}
.xp-card h3{color:var(--white)}

/* Misma razón: como TEXTO sobre negro, la tinta se aclara un 28% para que el violeta
   y el magenta pasen el umbral de contraste en tamaño chico. */
.shop-note{font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tint,var(--c-cyan));margin-top:5px}
@supports (color:color-mix(in srgb,red 50%,white)){
  .shop-note{color:color-mix(in srgb,var(--tint,var(--c-cyan)) 72%,#fff 28%)}
}
.shop-card .shop-head>div:first-child{min-width:0}
/* Franja informativa sobre la tienda (precio vigente + por qué comprar ahora) */
.shop-lead{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;padding:16px 20px;border-radius:14px;margin-bottom:22px;
  background:linear-gradient(120deg,rgba(255,214,0,.10),rgba(255,0,142,.07) 60%,transparent);border:1px solid var(--line);border-left:3px solid var(--c-yellow)}
.shop-lead b{color:var(--white)}
.shop-lead .sl-price{font-family:var(--display);font-size:2rem;line-height:1;color:var(--c-yellow)}

/* Anclas: el encabezado es pegajoso, así que las secciones dejan aire arriba al saltar. */
section[id],[id="entradas"],[id="eventos"],[id="faq"],[id="galeria"]{scroll-margin-top:86px}

/* ───────── Pie de página ─────────
   Cierra el sitio y repite la ruta a la compra: es la última oportunidad del embudo. */
.site-footer{position:relative;margin-top:40px;border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,rgba(0,0,0,.6))}
.site-footer::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--spectrum);opacity:.65}
.footer-grid{display:grid;gap:34px;padding:56px 20px 40px;grid-template-columns:1fr}
@media(min-width:700px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}}
.footer-brand{display:flex;flex-direction:column;gap:14px;max-width:380px}
.footer-logo .brand-lockup{flex-wrap:wrap;gap:10px}
.footer-tagline{font-family:var(--display);font-size:1.15rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);line-height:1.2}
.footer-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.footer-col h4{font-size:1.05rem;letter-spacing:.1em;color:var(--white);margin-bottom:4px}
.footer-col a,.footer-col span{font-size:.88rem;color:var(--muted);transition:color var(--dur-2) var(--ease-out);line-height:1.45}
.footer-col a:hover{color:var(--white)}
.footer-bottom{border-top:1px solid var(--line)}
.footer-bottom-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;padding:18px 20px;
  font-size:.78rem;color:var(--muted-2)}
.oz-credit{color:var(--muted-2);transition:color var(--dur-2) var(--ease-out)}
.oz-credit:hover{color:var(--c-cyan)}
/* Acceso oculto al panel: 3 toques en la esquina inferior izquierda (sin pista visual). */
#admin-portal-trigger{position:absolute;left:0;bottom:0;width:58px;height:58px;opacity:0;background:none;border:none;cursor:default}

/* Aviso operativo del panel (correo caído, etc.): tiene que doler verlo. */
.callout-warn{display:flex;flex-direction:column;gap:5px;padding:16px 20px;border-radius:13px;margin-bottom:18px;
  background:linear-gradient(135deg,rgba(245,158,11,.16),rgba(0,0,0,.15));border:1px solid rgba(245,158,11,.5);border-left:4px solid var(--warn)}
.callout-warn b{color:var(--white);font-size:.98rem}
.aviso-acciones{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.callout-warn span{font-size:.86rem;color:#E3E3EA;line-height:1.55}
.callout-warn i{color:var(--warn);font-style:normal;font-weight:600}

/* ───────── Guarda de encuadre ─────────
   Todo ítem de rejilla puede encogerse; ningún texto puede empujar el ancho de la página.
   Esto es lo que evita que el sitio salga "desencuadrado" (zoom-out) en pantallas chicas. */
.grid>*,.steps>*,.trust>*,.faq>*,.shop-grid>*,.events-grid>*,.reviews-grid>*,.news-grid>*{min-width:0}
.step,.trust div,.faq details,.card,.closer{overflow-wrap:anywhere}


/* Respaldo cuando no hay WebGL2 (o mientras el canvas aún no pinta): mismas tintas, en CSS.
   Con JS parte a media luz: si el telón WebGL llega, florece encima desde negro y no se nota el
   cambio de una composición a otra. Si no hay WebGL2, fx3d.js marca .fx3d-off y el respaldo se
   enciende entero. Sin JS no se toca: queda tal cual. */
.qts-hero::before{content:"";position:absolute;inset:0;z-index:0;transition:opacity var(--dur-5) var(--ease-out);
  background:
    radial-gradient(52% 44% at 74% 22%,rgba(255,0,142,.42),transparent 66%),
    radial-gradient(46% 40% at 18% 30%,rgba(0,182,255,.34),transparent 66%),
    radial-gradient(44% 38% at 62% 78%,rgba(144,0,255,.34),transparent 66%),
    radial-gradient(34% 30% at 26% 84%,rgba(255,214,0,.20),transparent 64%),
    #000}
.js .qts-hero:not(.fx3d-off)::before{opacity:.35}
.qts-hero-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;
  opacity:0;transition:opacity var(--dur-4) var(--ease-out)}
.qts-hero-canvas.on{opacity:1}
/* Velo: garantiza contraste del texto pase lo que pase en el shader. */
.qts-hero-veil{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(closest-side at 42% 52%,rgba(0,0,0,.86),rgba(0,0,0,.5) 62%,transparent 100%),
    linear-gradient(180deg,rgba(2,2,6,.82) 0%,rgba(2,2,6,.16) 24%,transparent 52%,rgba(6,6,10,.92) 92%,var(--ink) 100%)}
.qts-hero-inner{position:relative;z-index:3;width:100%}
.qts-hero-grid{display:grid;gap:40px;align-items:center}
@media(min-width:940px){.qts-hero-grid{grid-template-columns:1.06fr .94fr;gap:56px}}

.hero-badge{display:inline-flex;align-items:center;gap:10px;font-size:.74rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;padding:8px 16px;border-radius:999px;color:var(--white);
  background:rgba(0,0,0,.5);border:1px solid rgba(var(--white-rgb),.2);backdrop-filter:blur(8px);margin-bottom:20px}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--c-lime);color:var(--c-lime)}
/* El punto de "en vivo" late con un anillo que se expande y se apaga. Antes animaba box-shadow:
   eso repinta en el hilo principal 60 veces por segundo, para siempre, aunque el héroe ya no se
   vea. Escalar un anillo lo hace la GPU sola. */
.hero-badge .dot,.hero-tonight .dot{position:relative;flex:none}
.hero-badge .dot::after,.hero-tonight .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;
  opacity:0;animation:qts-latido 2.4s var(--ease-out) infinite}
@keyframes qts-latido{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(3.2);opacity:0}}

.qts-hero h1{font-size:clamp(2.8rem,8.6vw,5.4rem);line-height:.88;margin-bottom:14px;
  text-shadow:0 6px 40px rgba(0,0,0,.75)}
.qts-hero .hero-lede{color:#EDEDF2;font-size:1.06rem;max-width:46ch;margin-bottom:22px;text-shadow:0 2px 18px rgba(0,0,0,.8)}
.hero-facts{display:flex;flex-wrap:wrap;gap:8px 10px;margin-bottom:24px}
.hero-facts span{display:inline-flex;align-items:center;gap:7px;font-size:.84rem;font-weight:600;color:#E9E9F0;
  background:rgba(0,0,0,.42);border:1px solid rgba(var(--white-rgb),.14);border-radius:999px;padding:7px 14px;backdrop-filter:blur(6px)}
.hero-facts b{color:var(--white);font-weight:800}
.qts-hero .countdown{margin:0 0 26px}
.qts-hero .count-box{background:rgba(0,0,0,.5);border-color:rgba(var(--white-rgb),.16);backdrop-filter:blur(8px)}
.qts-hero .count-box .n{color:var(--white)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero-actions .btn{font-size:1rem;padding:15px 30px}
.hero-price-note{font-size:.82rem;color:#CFCFD8;margin-top:14px}
.hero-price-note b{color:var(--c-yellow)}

/* ───────── Entrada del héroe ─────────
   Una sola coreografía al cargar, en cascada corta: el CTA ya está entero antes del medio
   segundo. Es animación CSS con relleno "backwards": el estado normal es VISIBLE y la animación
   solo lo adorna, así que nunca depende de que un script corra para que el texto aparezca.
   El flyer no se funde (es lo más grande de la pantalla, el LCP): se asienta, nada más. */
@keyframes qts-entra{from{opacity:0;transform:translate3d(0,var(--rise),0)}}
@keyframes qts-asienta{from{transform:translate3d(0,calc(var(--rise) * 1.6),0) scale(.965)}}
.hero-copy>*,.hero-fiesta,.entra{animation:qts-entra var(--dur-4) var(--ease-out-expo) backwards;animation-delay:var(--d,0ms)}
.hero-copy>:nth-child(2){--d:55ms}.hero-copy>:nth-child(3){--d:110ms}.hero-copy>:nth-child(4){--d:165ms}
.hero-copy>:nth-child(5){--d:220ms}.hero-copy>:nth-child(6){--d:275ms}.hero-copy>:nth-child(7){--d:330ms}
.hero-fiesta:nth-child(1){--d:170ms}.hero-fiesta:nth-child(2){--d:250ms}.hero-fiesta:nth-child(3){--d:330ms}
/* El titular no se funde: es el elemento más grande (LCP) y un fundido desde 0 atrasaba la
   métrica medio segundo. Está a la vista desde el primer cuadro y se asienta (solo transform,
   que lo hace la GPU; un desenfoque animado se repinta en el hilo principal en Chrome). */
@keyframes qts-titular{from{transform:translate3d(0,var(--rise),0) scale(.985)}}
.hero-copy>h1{animation-name:qts-titular;transform-origin:0 100%}
.qts-hero .tilt-wrap{animation:qts-asienta var(--dur-5) var(--ease-out-expo) 90ms backwards}
.entra.asienta{animation-name:qts-asienta;animation-duration:var(--dur-5)}
.count-box .n{font-variant-numeric:tabular-nums}

/* Flyer con inclinación 3D (perspectiva real + brillo de espectro que sigue al puntero) */
/* Héroe con varias fiestas a la venta: una tarjeta por fiesta, lado a lado también en el teléfono. */
.hero-fiestas{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;max-width:520px;width:100%;margin:0 auto}
.hero-fiesta{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;border:1px solid var(--line);
  background:rgba(10,10,14,.78);box-shadow:0 24px 60px rgba(0,0,0,.55);-webkit-tap-highlight-color:transparent;
  transition:transform var(--dur-3) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
@media(hover:hover) and (pointer:fine){.hero-fiesta:hover{transform:translateY(-3px);border-color:var(--accent)}}
.hero-fiesta:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.hero-fiesta img{display:block;width:100%;height:auto;aspect-ratio:1400/1800;object-fit:cover}
.hf-cuerpo{display:flex;flex-direction:column;gap:4px;padding:12px 12px 14px;flex:1}
.hf-fecha{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--c-cyan)}
.hf-titulo{font-family:var(--display);font-size:1.3rem;line-height:1;color:var(--white);font-weight:400}
.hf-sub{font-size:.76rem;color:var(--muted)}
.hf-precio{font-size:.8rem;color:#CFCFD8;margin-top:auto;padding-top:6px}
.hf-precio b{color:var(--c-yellow)}
.hero-fiesta .btn{margin-top:8px;width:100%;justify-content:center}
/* En el teléfono, filas con el flyer chico a la izquierda: así las dos fiestas y sus botones
   caben en la primera pantalla, sobre el menú inferior. */
@media(max-width:600px){
  .hero-fiestas{grid-template-columns:1fr;gap:12px;max-width:none}
  .hero-fiesta{display:grid;grid-template-columns:108px 1fr}
  .hero-fiesta img{height:100%}
  .hf-cuerpo{padding:10px 12px 12px;gap:3px;min-width:0}
  .hf-titulo{font-size:1.18rem}
  .hf-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hero-fiesta .btn{margin-top:6px}
}
/* Tienda con varias fiestas: pestañas arriba de los tramos. */
.tienda-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:22px}
.tienda-tabs button{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:14px;text-align:left;cursor:pointer;
  border:1px solid var(--line);background:rgba(var(--white-rgb),.03);color:var(--white);font:inherit;font-weight:700;line-height:1.25;
  -webkit-tap-highlight-color:transparent;
  transition:border-color var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.tienda-tabs button:active{transform:scale(.98);transition-duration:var(--dur-1)}
@media(hover:hover) and (pointer:fine){.tienda-tabs button:hover{border-color:rgba(var(--white-rgb),.24)}}
.tienda-tabs small{font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color var(--dur-2) var(--ease-out)}
.tienda-tabs [aria-selected="true"]{border-color:var(--accent);background:rgba(var(--accent-rgb),.13);box-shadow:inset 0 0 0 1px var(--accent)}
.tienda-tabs [aria-selected="true"] small{color:var(--accent)}
.tienda-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tilt-wrap{perspective:1200px;max-width:420px;margin:0 auto;width:100%}
/* Entre fiestas: el logo de pincelada en el lugar del flyer (en el teléfono, arriba del titular). */
.hero-marca{max-width:540px;margin:0 auto;width:100%;animation:qts-asienta var(--dur-5) var(--ease-out-expo) 90ms backwards}
.hero-marca img{display:block;width:100%;height:auto;filter:drop-shadow(0 22px 44px rgba(0,0,0,.6))}
@media(max-width:939px){.hero-marca{order:-1;max-width:420px;margin-bottom:-10px}}
/* La inclinación la amortigua home.js cuadro a cuadro; una transición CSS encima peleaba con
   cada cuadro (se re-arrancaba 60 veces por segundo) y el flyer se sentía blando y atrasado. */
.tilt-card{position:relative;display:block;border-radius:20px;overflow:hidden;line-height:0;
  transform-style:preserve-3d;box-shadow:0 40px 90px rgba(0,0,0,.7)}
.tilt-card::after{content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;
  border:1px solid rgba(var(--white-rgb),.18);
  background:radial-gradient(320px 220px at var(--mx,50%) var(--my,30%),rgba(var(--white-rgb),.22),transparent 62%);
  opacity:.55;transition:opacity var(--dur-3) var(--ease-out)}
.tilt-card:hover::after,.tilt-card:focus-visible::after{opacity:.95}
.tilt-card img{width:100%;height:auto;display:block}
/* Halo de pintura detrás del flyer */
.tilt-wrap::before{content:"";position:absolute;inset:-16% -10%;z-index:-1;filter:blur(58px);opacity:.5;
  background:conic-gradient(from 210deg,var(--c-yellow),var(--c-orange),var(--c-magenta),var(--c-violet),var(--c-cyan),var(--c-lime),var(--c-yellow))}
.tilt-wrap{position:relative;z-index:0}

/* Señal de scroll */
.hero-scroll{position:absolute;left:50%;bottom:26px;z-index:3;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;gap:7px;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:#B7B7C2}
.hero-scroll{animation:qts-fundido var(--dur-4) var(--ease-out) 900ms backwards}
/* Una gota de luz que baja por el hilo y se apaga abajo: señala hacia dónde seguir. */
.hero-scroll i{display:block;width:1px;height:36px;background:linear-gradient(180deg,transparent,var(--c-cyan));
  transform-origin:50% 0;animation:scrollcue 2.4s var(--ease-in-out) infinite}
@keyframes scrollcue{0%{opacity:0;transform:scaleY(0)}45%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:translate3d(0,14px,0) scaleY(1)}}
@media(max-width:760px){.hero-scroll{display:none}}

/* ───────── Barra de urgencia (aparece al salir del héroe) ───────── */
/* Sale rápido y entra con calma: al llegar a la tienda se aparta sin hacerse esperar. */
.urgency{position:fixed;left:0;right:0;bottom:0;z-index:95;transform:translate3d(0,100%,0);
  opacity:0;pointer-events:none;visibility:hidden;
  transition:transform var(--dur-2) var(--ease-in),opacity var(--dur-2) var(--ease-in),visibility 0s linear var(--dur-2);
  background:rgba(4,4,8,.94);backdrop-filter:blur(16px);
  border-top:1px solid var(--line);padding:10px 0 calc(10px + env(safe-area-inset-bottom))}
.urgency::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--spectrum)}
.urgency.show{transform:none;opacity:1;pointer-events:auto;visibility:visible;
  transition:transform var(--dur-3) var(--ease-out-expo),opacity var(--dur-2) var(--ease-out),visibility 0s}
.urgency-inner{display:flex;align-items:center;justify-content:space-between;gap:14px}
.urgency-tx{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.urgency-tx b{font-size:.95rem;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.urgency-tx span{font-size:.74rem;color:var(--muted)}
.urgency .btn{flex-shrink:0}
/* En móvil el tabbar flotante ya ocupa el borde inferior: la urgencia se posa encima, como tarjeta.
   Va DESPUÉS de la regla base a propósito: puesta antes (como estaba), la base le ganaba y la barra
   salía pegada al borde, tapando el menú inferior. */
@media(max-width:979px){
  .urgency{left:10px;right:10px;bottom:calc(86px + env(safe-area-inset-bottom));border-radius:16px;border:1px solid var(--line);
    padding:10px 14px;box-shadow:0 18px 44px rgba(0,0,0,.6);transform:translate3d(0,22px,0) scale(.97)}
  .urgency::before{left:14px;right:14px;border-radius:2px}
  .urgency-tx b{font-size:.88rem}
  .urgency .container{padding:0}
}

/* ════════════════════════════════════════════════════════════════════════════
   ENCUADRE MÓVIL DEL HÉROE — va al FINAL del archivo a propósito.
   Las reglas base del héroe viven más arriba; con la misma especificidad gana la
   última que aparece. Puesto antes que ellas, este bloque no aplicaba nada.
   ════════════════════════════════════════════════════════════════════════════ */
@media(max-width:979px){
  .qts-hero{padding:64px 0 150px}
  .hero-badge{margin-bottom:14px}
  .qts-hero h1{margin-bottom:10px}
  .qts-hero .hero-lede{margin-bottom:16px}
  .hero-facts{margin-bottom:16px}
  .qts-hero .countdown{margin:0 0 18px}
  .hero-actions{gap:10px}
  .hero-actions .btn{font-size:.94rem;padding:14px 20px}
  /* Un solo CTA en móvil: el secundario quedaba bajo el menú flotante y competía con
     el botón que vende. El flyer de más abajo ya lleva a la misma página. */
  .hero-actions .btn-ghost{display:none}
}
/* Pantallas chicas (iPhone SE, 667px de alto): el héroe se aprieta para que el botón de
   COMPRAR quede sobre la línea de flotación. Si hay que hacer scroll para verlo, una
   parte de la gente no lo ve nunca. */
@media(max-width:400px){
  .qts-hero{padding:40px 0 140px}
  .hero-badge{margin-bottom:10px;font-size:.66rem;padding:6px 12px;letter-spacing:.14em}
  .qts-hero h1{font-size:clamp(2.2rem,9.6vw,3rem);margin-bottom:8px}
  .qts-hero .hero-lede{font-size:.92rem;margin-bottom:10px}
  .hero-facts{gap:5px;margin-bottom:10px}
  .hero-facts span{font-size:.74rem;padding:5px 10px;gap:5px}
  .qts-hero .countdown{gap:6px;margin:0 0 12px}
  .qts-hero .count-box{min-width:52px;padding:7px 8px}
  .qts-hero .count-box .n{font-size:1.7rem}
  .qts-hero .count-box .l{font-size:.52rem;letter-spacing:.12em}
  .hero-actions .btn{padding:13px 18px}
  .hero-price-note{margin-top:9px;font-size:.76rem}
}

/* ───────── Autocompletado del navegador ─────────
   Chrome y Safari pintan los campos autocompletados con su propio fondo claro
   (amarillo/azul) y NO se puede cambiar con background-color: lo pisa el motor.
   El truco que sí funciona es una sombra interior gigante del color del tema, y
   -webkit-text-fill-color para el texto. Sin esto, el formulario de ingreso salía
   con cajas amarillas sobre el fondo negro: parecía roto. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color:#fff;
  -webkit-box-shadow:0 0 0 1000px var(--surface) inset;
  box-shadow:0 0 0 1000px var(--surface) inset;
  caret-color:#fff;
  border:1px solid var(--line);
  border-radius:11px;
  /* La transición larguísima evita el destello del color nativo al enfocar. */
  transition:background-color 9999s ease-in-out 0s, border-color .2s;
}
input:-webkit-autofill:focus{border-color:var(--accent)}
/* Firefox usa su propio mecanismo. */
input:autofill,textarea:autofill{background:var(--surface);color:var(--white)}

/* ───────── Aviso de notificaciones (un solo toque) ─────────
   El navegador exige un gesto para pedir el permiso, así que esto es lo más cerca
   que se puede estar de "activos apenas entra": un botón grande, en el momento justo. */
.push-sheet{position:fixed;left:10px;right:10px;bottom:calc(86px + env(safe-area-inset-bottom));z-index:97;
  transform:translate3d(0,28px,0) scale(.98);opacity:0;transition:transform var(--dur-2) var(--ease-in),opacity var(--dur-2) var(--ease-in);
  background:rgba(6,6,10,.97);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 22px 60px rgba(0,0,0,.7);overflow:hidden}
.push-sheet::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--spectrum)}
.push-sheet.show{transform:none;opacity:1;transition:transform var(--dur-3) var(--ease-out-expo),opacity var(--dur-2) var(--ease-out)}
.push-sheet-in{display:flex;flex-direction:column;gap:12px;padding:18px 20px}
.push-sheet-tx{display:flex;flex-direction:column;gap:5px}
.push-sheet-tx b{font-size:1rem;color:var(--white)}
.push-sheet-tx span{font-size:.86rem;color:var(--muted);line-height:1.5}
.push-sheet-ax{display:flex;align-items:center;gap:14px}
.push-sheet-ax .btn{flex:1;justify-content:center}
.push-sheet-no{font-size:.84rem;white-space:nowrap;padding:8px 4px}
@media(min-width:700px){
  .push-sheet{left:auto;right:24px;bottom:24px;max-width:400px}
}

/* ═══════════ Guía de bienvenida (cuenta recién creada) ═══════════
   Aparece una sola vez, con los pasos del teléfono de quien entra.
   La flecha apunta a un botón que NO está en la página (la barra de Safari,
   el menú del navegador): por eso vive fuera de la tarjeta, pegada al borde. */
.guia-wrap{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center;
  opacity:0;transition:opacity var(--dur-2) var(--ease-in);pointer-events:none}
.guia-wrap.show{transition:opacity var(--dur-3) var(--ease-out)}
.guia-wrap.show{opacity:1;pointer-events:auto}
.guia-fondo{position:absolute;inset:0;background:rgba(4,4,8,.76);backdrop-filter:blur(6px)}
body.guia-abierta{overflow:hidden}

.guia-card{position:relative;width:min(520px,calc(100% - 20px));margin:0 10px calc(18px + env(safe-area-inset-bottom));
  background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px 22px 18px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);animation:qts-hoja var(--dur-3) var(--ease-out-expo) backwards}   /* cada paso es una tarjeta nueva: sube y se asienta */
.guia-card::before{content:"";position:absolute;top:0;left:22px;right:22px;height:2px;background:var(--spectrum)}

.guia-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.guia-paso{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.guia-puntos{display:flex;gap:6px}
.guia-puntos i{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background-color var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.guia-puntos i.on{background:var(--accent);transform:scale(1.25)}

.guia-card h3{margin:0 0 8px;font-size:1.42rem;line-height:1.15}
.guia-cuerpo{color:var(--muted);font-size:.95rem;line-height:1.5}
.guia-nota{display:block;margin-top:10px}
.guia-cuerpo b{color:var(--text)}

.guia-pasos{margin:14px 0 4px;padding:0;list-style:none;counter-reset:gp;display:flex;flex-direction:column;gap:9px}
.guia-pasos li{counter-increment:gp;position:relative;padding-left:34px;color:var(--text);font-size:.93rem;line-height:1.35}
.guia-pasos li::before{content:counter(gp);position:absolute;left:0;top:-1px;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;font-size:.78rem;font-weight:800;color:#06060A;background:var(--accent)}
.guia-glifo{display:inline-flex;align-items:center;gap:5px;padding:2px 7px;border-radius:7px;
  background:rgba(var(--accent-rgb),.16);border:1px solid rgba(var(--accent-rgb),.35);white-space:nowrap}
.guia-glifo svg{width:15px;height:15px;flex:none}

/* Maqueta del aviso tal como se ve en la pantalla bloqueada. */
.guia-aviso-demo{margin-top:14px;display:flex;gap:11px;align-items:center;padding:12px 13px;border-radius:14px;
  background:rgba(var(--white-rgb),.07);border:1px solid var(--line)}
.guia-aviso-demo>div{display:flex;flex-direction:column;min-width:0}
.guia-aviso-demo b{font-size:.82rem;color:var(--text)}
.guia-aviso-demo span:last-child{font-size:.84rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Paso "Sigue desde el ícono": el ícono tal como queda en el inicio del teléfono */
.guia-app-ico{display:flex;flex-direction:column;align-items:center;gap:6px;margin:4px auto 14px;width:max-content}
.guia-app-ico .guia-aviso-ico{width:58px;height:58px;border-radius:15px;font-size:1.6rem}
.guia-app-ico small{font-size:.74rem;color:var(--text)}
.guia-aviso-ico{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  font-weight:900;color:#06060A;background:var(--spectrum)}

.guia-ax{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.guia-ax .btn{width:100%}
.guia-saltar{align-self:center;font-size:.85rem;color:var(--muted);background:none;border:0;cursor:pointer;padding:6px}

/* La flecha: apunta al botón de la barra del navegador, fuera de la página. */
.guia-flecha{position:absolute;font-size:2.4rem;line-height:1;color:var(--accent);
  text-shadow:0 0 18px rgba(var(--accent-rgb),.8);pointer-events:none}
.guia-flecha-abajo{bottom:6px;left:50%;transform:translateX(-50%);animation:guiaAbajo 1.4s var(--ease-in-out) infinite}
.guia-flecha-arriba{top:calc(6px + env(safe-area-inset-top));right:14px;animation:guiaArriba 1.4s var(--ease-in-out) infinite}
@keyframes guiaAbajo{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,9px)}}
@keyframes guiaArriba{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media (prefers-reduced-motion:reduce){.guia-flecha{animation:none}}

/* ═══════════ Acceso del equipo en su cuenta ═══════════
   Quien trabaja la fiesta abre /cuenta para una sola cosa: llegar a su
   herramienta. Va arriba del todo y con el botón grande. */
.crew-acceso{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  margin:0 0 18px;padding:16px 18px;border-radius:16px;position:relative;overflow:hidden;
  border:1px solid var(--accent);background:linear-gradient(135deg,rgba(var(--accent-rgb),.16),rgba(0,0,0,.12))}
.crew-acceso::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--spectrum)}
.ca-txt{display:flex;align-items:center;gap:12px;min-width:0}
.ca-ico{font-size:1.7rem;line-height:1;flex:none}
.ca-txt>div{display:flex;flex-direction:column;min-width:0}
.ca-txt b{font-size:1.02rem;line-height:1.2}
.ca-txt span{font-size:.84rem;color:var(--muted)}
.ca-btns{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:560px){
  .crew-acceso{flex-direction:column;align-items:stretch}
  .ca-btns{width:100%}
  .ca-btns .btn{flex:1 1 auto;text-align:center}
}

/* ═══════════ Controles de cámara del escáner ═══════════
   El QR del carnet mide ~13 mm y el lente no enfoca más cerca de ~10 cm: la
   salida es alejar y usar el zoom. Estos controles tienen que poder tocarse con
   una mano, de noche, con guantes y la fila esperando: nada bajo 44 px. */
.cam-ctrl{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.cam-row{display:flex;gap:8px;flex-wrap:wrap}
.cam-row .btn{flex:1 1 auto;min-height:44px}
.cam-row .btn.on{background:var(--accent);color:#06060A;border-color:var(--accent)}
.cam-zoom{display:flex;align-items:center;gap:10px}
.cam-zoom input[type=range]{flex:1;min-width:0;accent-color:var(--accent);height:34px}
.cam-zoom b{min-width:46px;text-align:right;font-variant-numeric:tabular-nums;color:var(--accent)}
.cam-z{width:44px;height:44px;flex:none;border-radius:12px;border:1px solid var(--line);
  background:var(--surface);color:var(--text);font-size:1.35rem;line-height:1;cursor:pointer}
.cam-z:active{background:var(--accent);color:#06060A}
.cam-hint{margin:0;font-size:.82rem;color:var(--muted);line-height:1.45}
.cam-hint b{color:var(--text)}
/* Marca de "enfocando acá" donde tocó el guardia. */
#reader{position:relative}
.cam-foco{position:absolute;width:64px;height:64px;margin:-32px 0 0 -32px;border:2px solid var(--accent);
  border-radius:50%;pointer-events:none;animation:camFoco .6s var(--ease-out) forwards}
@keyframes camFoco{0%{transform:scale(1.4);opacity:0}30%{transform:scale(1);opacity:1}100%{transform:scale(.85);opacity:0}}
@media (prefers-reduced-motion:reduce){.cam-foco{animation:none;opacity:.6}}

/* ═══════════ Tarjeta fija de instalar + avisos (en /cuenta) ═══════════
   No se puede cerrar a propósito: es la única puerta que queda cuando la persona
   ya descartó el aviso flotante. Se oculta sola cuando no falta nada. */
.pwa-card{margin:0 0 18px;padding:16px 18px;border-radius:16px;position:relative;overflow:hidden;
  border:1px solid var(--line);background:linear-gradient(135deg,rgba(var(--accent-rgb),.10),rgba(0,0,0,.12));
  display:flex;flex-direction:column;gap:12px}
.pwa-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--spectrum)}
.pwa-tx{display:flex;flex-direction:column;gap:4px;min-width:0}
.pwa-tx b{font-size:1.02rem;line-height:1.25}
.pwa-tx span{font-size:.86rem;color:var(--muted);line-height:1.45}
.pwa-tx span b{color:var(--text)}
.pwa-ax{display:flex;gap:8px;flex-wrap:wrap}
.pwa-ax .btn{flex:1 1 auto;min-height:42px}
@media (min-width:620px){ .pwa-ax .btn{flex:0 1 auto} }

/* ══════════ Mis entradas (panel de cuenta) ══════════
   La tarjeta es lo que la persona le muestra al guardia: el QR va grande, sobre
   blanco y sin nada encima, porque el lector de la puerta tiene que leerlo con
   poca luz y a veces con la pantalla sucia. */
.tk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:16px}
.tk-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;overflow:hidden}
.tk-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--spectrum)}
.tk-top{display:flex;flex-direction:column;gap:3px;width:100%}
.tk-top b{font-family:var(--display);font-size:1.7rem;line-height:1;letter-spacing:.01em}
.tk-tier{font-size:.86rem;color:var(--muted)}
.tk-qr{width:min(220px,100%);height:auto;aspect-ratio:1;background:#fff;border-radius:14px;padding:10px;display:block}
.tk-code{font-family:ui-monospace,Menlo,monospace;font-size:.95rem;letter-spacing:.08em;font-weight:700}
.tk-foot{font-size:.8rem;color:var(--muted);line-height:1.45}
.tk-estado{padding:18px 8px;color:var(--muted);font-weight:700}
.tk-off{opacity:.62}
.tk-off::before{background:var(--line)}

.buy-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:16px 18px;margin-top:12px;
  border-radius:var(--radius);border:1px solid rgba(var(--accent-rgb),.45);background:rgba(var(--accent-rgb),.07)}
.buy-cta b{display:block;font-size:1.05rem}
.buy-cta span{font-size:.86rem;color:var(--muted)}

.asg-row{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center;padding:13px 2px;border-bottom:1px solid rgba(var(--white-rgb),.06)}
.asg-info{min-width:0;font-size:.95rem}
.asg-e{display:inline-block;font-size:.84rem;margin-top:3px;font-weight:600}
.asg-e.ok{color:var(--ok)} .asg-e.warn{color:var(--warn)} .asg-e.off{color:var(--muted)}
.asg-acc{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.asg-form{grid-column:1/-1;padding:12px;border-radius:var(--radius-sm);background:var(--surface-2);display:flex;flex-direction:column;gap:8px}
/* display:flex le gana al hidden del navegador: sin esto los formularios nacen todos abiertos. */
.asg-form[hidden]{display:none}
.asg-btns{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:520px){ .asg-row{grid-template-columns:1fr} .asg-acc{justify-content:flex-start} }

/* margin:auto de vuelta: el reset global (*{margin:0}) le quita al <dialog> el centrado del navegador. */
.qr-dialog{margin:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--white);padding:22px;
  width:min(340px,92vw);text-align:center}
.qr-dialog::backdrop{background:rgba(0,0,0,.72)}
.qr-dialog img{width:100%;height:auto;aspect-ratio:1;background:#fff;border-radius:14px;padding:10px;display:block;margin:0 auto 10px}

/* Escáner: el RUT a cruzar con el carnet y el trago incluido, legibles de un vistazo
   con poca luz y el teléfono en una mano. */
.scan-carnet{margin:12px 0 4px;padding:12px 14px;border-radius:12px;border:2px solid var(--c-yellow);background:rgba(255,214,0,.1);
  display:flex;flex-direction:column;gap:2px;text-align:center;font-weight:700}
.scan-carnet b{font-family:ui-monospace,Menlo,monospace;font-size:1.7rem;letter-spacing:.04em;color:var(--c-yellow)}
.scan-carnet span{font-size:.8rem;font-weight:500;color:var(--muted)}
.scan-trago{margin:8px 0 4px;padding:10px 12px;border-radius:12px;background:var(--c-lime);color:#08080C;font-weight:800;text-align:center}
.tier-horas{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;margin-top:-2px}
.tier-horas label{flex-direction:row;gap:6px;align-items:center;font-size:.72rem;color:var(--muted)}
.tier-horas input{padding:6px 8px;font-size:.78rem}

/* ───────── Q, la guía (tutorial por rol) ───────── */
.shendo{position:fixed;inset:0;z-index:2147483000;pointer-events:none}
.shendo-velo{position:fixed;inset:0;background:rgba(4,4,8,.78);pointer-events:auto;animation:qts-fundido var(--dur-3) var(--ease-out) backwards}
/* La luz se mueve con transform: anclada arriba a la izquierda y trasladada a su blanco. Mover
   top/left cuenta como salto de contenido (CLS) y recalcula el layout en cada scroll. Entre un paso
   y otro viaja con una curva suave (.viaja); con el scroll la sigue pegada, cuadro a cuadro. */
.shendo-foco{position:fixed;top:0;left:0;border-radius:14px;box-shadow:0 0 0 2px var(--accent),0 0 0 9999px rgba(4,4,8,.78);pointer-events:none;
  animation:qts-fundido var(--dur-3) var(--ease-out) backwards}
.shendo-foco.viaja{transition:transform var(--dur-4) var(--ease-out-expo),width var(--dur-4) var(--ease-out-expo),height var(--dur-4) var(--ease-out-expo)}
.shendo::after{content:"";position:fixed;inset:0;pointer-events:auto;background:transparent}   /* nada de la página se toca mientras guía */
.shendo-card{position:fixed;top:0;left:0;z-index:1;pointer-events:auto;width:min(380px,calc(100vw - 24px));background:linear-gradient(180deg,#15121c,#0c0b10);border:1px solid var(--line);border-radius:18px;padding:16px 18px 14px;box-shadow:0 24px 60px rgba(0,0,0,.6);outline:none;
  animation:qts-sube var(--dur-3) var(--ease-out-expo) backwards}
/* "translate" suelto (no "transform"): se suma a la posición que pone guia.js en vez de pisarla. */
@keyframes qts-sube{from{opacity:0;translate:0 var(--rise)}}
.shendo-card::before{content:"";position:absolute;left:14px;right:14px;top:0;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,#FFD600,#FF6A00,#FF008E,#9000FF,#00B6FF,#7CFF00)}
/* La tarjeta se ubica con transform (guia.js): al centro, junto a su blanco, o arriba/abajo en el teléfono. */
.shendo-card.viaja{transition:transform var(--dur-4) var(--ease-out-expo)}
@media(max-width:639px){.shendo-card{width:calc(100vw - 24px)}}
.shendo-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.shendo-top b{display:block;font-size:.95rem}
.shendo-top span span,.shendo-top div>span{font-size:.72rem;color:var(--muted)}
.shendo-ava{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font:400 1.3rem/1 'Bebas Neue',Impact,sans-serif;color:#08080C;background:conic-gradient(from 200deg,#FFD600,#FF6A00,#FF008E,#9000FF,#00B6FF,#7CFF00,#FFD600)}
.shendo-x{margin-left:auto;background:none;border:0;color:var(--muted);font-size:1.1rem;cursor:pointer;padding:6px}
.shendo-barra{height:3px;border-radius:3px;background:rgba(var(--white-rgb),.08);margin-bottom:12px;overflow:hidden}
.shendo-barra i{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--avance,0));transition:transform var(--dur-4) var(--ease-out-expo)}
.shendo-card h3{font-size:1.25rem;margin:0 0 6px}
.shendo-card p{font-size:.92rem;line-height:1.55;color:#E4E4EC;margin:0}
.shendo-ax{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.shendo-nota{display:block;margin-top:10px;font-size:.7rem;color:var(--muted-2)}
.guia-acciones{display:flex;gap:6px;flex-wrap:wrap}
@media(prefers-reduced-motion:reduce){.shendo-foco.viaja,.shendo-card.viaja,.shendo-barra i{transition:none}}
.shendo [hidden]{display:none!important}

/* ───────── En vivo (panel admin): la noche en números ─────────
   Solo transform y opacity en CSS; el anillo y la curva son canvas que se redibujan cuando cambian los datos. */
.vivo{display:grid;gap:14px}
.vivo-top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.vivo-top h2{margin:0;font-size:2.4rem}
.vivo-ev{color:var(--muted);font-size:.86rem}
.vivo-acc{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.vivo-live{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.vivo-dot{width:9px;height:9px;border-radius:50%;background:#ff2d55;position:relative;flex:none}
.vivo-dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:inherit;animation:vivo-ping 1.8s var(--ease-out) infinite}
.vivo-live.caido .vivo-dot{background:var(--muted-2)}
.vivo-live.caido .vivo-dot::after{animation:none;opacity:0}
@keyframes vivo-ping{0%{transform:scale(1);opacity:.75}100%{transform:scale(3.4);opacity:0}}
.vivo-card{background:linear-gradient(180deg,var(--surface),#0a0a0f);border:1px solid var(--line);border-radius:18px;padding:16px;position:relative;overflow:hidden}
.vivo-card h3{margin:0 0 12px;font-family:var(--body);font-weight:700;font-size:.7rem;letter-spacing:.18em;color:var(--muted)}
.vivo-hero{display:grid;grid-template-columns:minmax(230px,310px) 1fr;gap:14px}
@media(max-width:760px){.vivo-hero{grid-template-columns:1fr}}
.vivo-ring{position:relative;aspect-ratio:1;width:100%;max-width:310px;margin:0 auto}
.vivo-ring canvas{position:absolute;inset:0;width:100%;height:100%}
.vivo-ring-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px}
.vivo-big{font-family:var(--display);font-size:clamp(3.6rem,10vw,5.6rem);line-height:.85;font-variant-numeric:tabular-nums}
.vivo-sub{color:var(--muted);font-size:.78rem}
.vivo-pct{font-weight:800;font-size:1.1rem;background:var(--spectrum-hot);-webkit-background-clip:text;background-clip:text;color:transparent}
.vivo-ring.late{animation:vivo-late var(--dur-4) var(--ease-out)}
@keyframes vivo-late{35%{transform:scale(1.04)}}
.vivo-mas{position:absolute;left:50%;top:18%;font-family:var(--display);font-size:2rem;color:#7CFF00;pointer-events:none;animation:vivo-mas 1.7s var(--ease-out) forwards}
@keyframes vivo-mas{0%{transform:translate(-50%,14px) scale(.7);opacity:0}18%{transform:translate(-50%,0) scale(1);opacity:1}100%{transform:translate(-50%,-54px) scale(1);opacity:0}}
.vivo-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;align-content:start}
.vivo-kpi{background:rgba(var(--white-rgb),.03);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.vivo-kpi b{display:block;font-family:var(--display);font-weight:400;font-size:2.1rem;line-height:1;font-variant-numeric:tabular-nums;margin-bottom:4px}
.vivo-kpi span{color:var(--muted);font-size:.74rem}
.vivo-kpi.alerta{border-color:rgba(245,158,11,.5)}
.vivo-kpi.alerta b{color:var(--warn)}
.vivo-chart{height:270px;position:relative;padding:0}
.vivo-chart h3{position:absolute;left:16px;top:14px;margin:0;z-index:1}
.vivo-chart canvas{position:absolute;inset:34px 0 0;width:100%;height:calc(100% - 34px);display:block}
.vivo-now{position:absolute;left:0;top:34px;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;box-shadow:0 0 14px 2px rgba(255,0,142,.9);pointer-events:none}
.vivo-now::after{content:'';position:absolute;inset:0;border-radius:50%;background:#FF008E;animation:vivo-ping 1.8s var(--ease-out) infinite}
.vivo-leyenda{position:absolute;right:16px;top:14px;display:flex;gap:14px;font-size:.7rem;color:var(--muted);z-index:1}
.vivo-leyenda i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.vivo-ticker{min-height:128px}
.vivo-idea{position:absolute;inset:16px 18px 26px;display:flex;align-items:center;gap:18px}
.vivo-idea .ico{font-size:2.4rem;flex:none}
.vivo-idea b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,6vw,3.6rem);line-height:1;background:var(--spectrum);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.vivo-idea p{margin:2px 0 0;color:#ececf2;font-size:1rem;line-height:1.35}
.vivo-idea.entra{animation:vivo-entra var(--dur-4) var(--ease-out-expo) both}
.vivo-idea.sale{animation:vivo-sale var(--dur-3) var(--ease-in) both}
@keyframes vivo-entra{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes vivo-sale{to{opacity:0;transform:translateY(-16px)}}
.vivo-dots{position:absolute;right:16px;bottom:12px;display:flex;gap:6px}
.vivo-dots i{width:6px;height:6px;border-radius:50%;background:#fff;opacity:.2;transition:transform var(--dur-2) var(--ease-out),opacity var(--dur-2) var(--ease-out)}
.vivo-dots i.on{opacity:1;transform:scale(1.4)}
.vivo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px}
.vivo-bar{height:10px;border-radius:6px;background:rgba(var(--white-rgb),.07);overflow:hidden;position:relative}
.vivo-bar i{position:absolute;inset:0;border-radius:inherit;transform-origin:left;transform:scaleX(0);transition:transform var(--dur-5) var(--ease-out-expo);background:var(--spectrum-hot)}
.vivo-bar i.m{transform-origin:right;background:#00B6FF}
.vivo-bar i.f{background:#FF008E}
.vivo-fila{display:grid;gap:6px;margin-bottom:13px}
.vivo-fila:last-child{margin-bottom:0}
.vivo-fila>div:first-child{display:flex;justify-content:space-between;gap:10px;font-size:.84rem}
.vivo-fila em{font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums}
.vivo-puerta{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vivo-puerta div{background:rgba(var(--white-rgb),.03);border-radius:12px;padding:10px 12px}
.vivo-puerta b{display:block;font-family:var(--display);font-weight:400;font-size:1.9rem;line-height:1;font-variant-numeric:tabular-nums}
.vivo-puerta span{font-size:.72rem;color:var(--muted)}
.admin-panel:fullscreen{max-width:none;background:var(--ink);padding:28px;overflow:auto}
.admin-panel:fullscreen .vivo-chart{height:34vh}

/* ───────── Movimiento reducido ─────────
   Va al final del archivo para ganarle a cada componente. Nada se mueve solo ni se repite: cada
   animación termina en el acto (las de entrada quedan en su estado final y los loops se detienen
   en reposo), y las hojas que se deslizaban ahora solo se funden. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;animation-iteration-count:1!important}
  .js:not(.sin-reveal) [data-reveal]:not(.in){opacity:1}
  .urgency,.urgency.show,.push-sheet,.push-sheet.show,.qts-bot,.qts-bot.open{transform:none}
  .toast,.toast.show{transform:translate3d(-50%,0,0)}
  .scan-flash.go{animation:none;opacity:0}
}
/* Regalías (/regalia/ID y /cuenta#regalias): la tarjeta de entrada, con un botón grande para ganar la carrera */
.rg-card{text-align:center}
.rg-cuerpo{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.rg-quedan{font-size:1.05rem;color:var(--muted)}
.rg-quedan b{font-family:var(--display);font-size:2.4rem;color:var(--white);vertical-align:-.2em;margin:0 .1em}
.rg-btn{min-height:58px;font-size:1.1rem}
.rg-gano{font-family:var(--display);font-size:2rem;line-height:1}

/* Para qué fiesta se compra (checkout) y de qué fiesta es cada tramo (tienda con varias fiestas) */
.ck-fiesta{display:flex;flex-direction:column;gap:2px;margin:0 0 14px;padding:12px 14px;border-radius:12px;background:var(--surface-2);border-left:4px solid var(--accent)}
.ck-fiesta span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ck-fiesta b{font-family:var(--display);font-size:1.7rem;line-height:1.05;letter-spacing:.01em}
.ck-fiesta em{font-style:normal;font-weight:700;color:var(--accent-2)}
.shop-fiesta{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--muted);margin-bottom:4px}
.tier-pack-nota{font-size:.74rem;font-weight:700;color:var(--accent-2);align-self:center}
.tier-pack-nota:empty{display:none}

/* Oferta exclusiva (la promo 3x20 para mujeres): a lo ancho, primera en la tienda, con el filo del espectro.
   Sin loops ni brillos animados: la oferta destaca por tamaño y color, no por movimiento. */
.oferta-card{grid-column:1/-1;gap:0;padding:0;overflow:hidden;border:0;
  background:linear-gradient(135deg,rgba(255,0,142,.20),rgba(144,0,255,.12) 55%,rgba(0,182,255,.08));
  box-shadow:0 0 0 1px rgba(255,0,142,.6) inset,0 24px 60px rgba(0,0,0,.5)}
.oferta-card::before{left:0;right:0;top:0;bottom:auto;width:auto;height:4px;border-radius:0;background:var(--spectrum)}
.oferta-card>*{padding-left:22px;padding-right:22px}
.oferta-card>:first-child{padding-top:20px}
.oferta-cinta{padding-top:20px;font-size:.74rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2)}
.oferta-card .shop-fiesta{margin:6px 0 0}
.oferta-card .shop-name{margin-top:8px}
.oferta-cuerpo{display:grid;gap:16px;padding-top:4px;padding-bottom:22px}
@media(min-width:680px){.oferta-cuerpo{grid-template-columns:1.4fr 1fr;align-items:end}}
.oferta-precio{font-family:var(--display);font-size:3.8rem;line-height:1;color:var(--white);margin:8px 0 12px;letter-spacing:.01em}
.oferta-precio span{color:var(--c-yellow);margin-right:.14em}
.oferta-card .shop-perks li::before{background:var(--accent)}
.oferta-accion{display:flex;flex-direction:column;gap:10px}
.oferta-cupos{font-family:var(--display);font-size:1.6rem;line-height:1;letter-spacing:.02em;color:var(--white)}
.oferta-cupos b{color:var(--c-yellow)}
@media(hover:hover) and (pointer:fine){.oferta-card:hover{box-shadow:0 0 0 1px var(--accent) inset,0 26px 64px rgba(0,0,0,.55)}}

/* La misma oferta, arriba en el héroe: una franja que baja a su tarjeta. */
.hero-oferta{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;margin-top:14px;padding:11px 14px;border-radius:14px;max-width:540px;
  background:linear-gradient(90deg,rgba(255,0,142,.24),rgba(144,0,255,.16));border:1px solid rgba(255,0,142,.6);
  color:var(--white);font-size:.86rem;line-height:1.35;text-align:left;-webkit-tap-highlight-color:transparent;
  transition:transform var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
.ho-cinta{justify-self:start;font-size:.6rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;border-radius:999px;
  background:var(--accent);color:var(--sobre-acento)}
.ho-txt b{color:var(--c-yellow)}
.ho-txt{grid-column:1}
.ho-ir{grid-column:2;grid-row:1/3;font-size:1.2rem;font-weight:900;color:var(--accent-2)}
@media(hover:hover) and (pointer:fine){.hero-oferta:hover{transform:translateY(-2px);border-color:var(--accent)}}
.hero-oferta:active{transform:scale(.98)}
@media(max-width:600px){.hero-oferta{margin-top:10px;font-size:.8rem;padding:9px 12px}}

/* ───────── Fiesta que exige los avisos (lib/avisos-puerta.js) ───────── */
.avisos-falta{display:flex;flex-direction:column;gap:8px;margin:0 0 16px;padding:16px;border:2px solid var(--accent);border-radius:var(--radius);background:rgba(var(--accent-rgb),.1)}
.avisos-falta small{color:var(--muted)}
.avisos-pasos{font-size:.92rem}
.avisos-pasos summary{font-weight:700;cursor:pointer}
.avisos-pasos ol{margin:8px 0 2px;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.avisos-nota{padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--line);background:rgba(var(--accent-rgb),.08);font-weight:600}
/* «Ahora sí»: tapa la pantalla para que el guardia lo vea de un vistazo. */
.qts-ahora{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:28px;text-align:center;background:var(--ink);color:var(--white);
  animation:qts-fundido var(--dur-3) var(--ease-out) backwards}
.qa-caja{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:420px;animation:qts-asienta var(--dur-4) var(--ease-out-expo) backwards}
.qa-ico{font-size:4.4rem;line-height:1}
.qts-ahora h2{font-size:clamp(3rem,14vw,4.6rem);line-height:.96;color:var(--accent);text-wrap:balance}
.qts-ahora p{font-size:1.1rem;color:var(--muted)}
.qts-ahora .qa-lema{font-family:var(--display);font-size:clamp(2rem,9vw,2.8rem);line-height:1.05;color:var(--white);margin-bottom:14px}

/* Arrastrar hacia abajo para recargar, en la app instalada (recargar.js). Solo transform. */
.ptr{position:fixed;left:50%;top:env(safe-area-inset-top,0px);z-index:250;display:grid;place-items:center;width:42px;height:42px;margin:-46px 0 0 -21px;border-radius:50%;
  background:var(--surface-2);color:var(--muted);border:1px solid var(--line);box-shadow:var(--shadow);font-size:1.4rem;font-weight:700;line-height:1;pointer-events:none;
  transition:transform var(--dur-3) var(--ease-out),color var(--dur-2) var(--ease-out)}
.ptr span{display:block}
.ptr.tira{transition:none}
.ptr.lista,.ptr.cargando{color:var(--accent)}
.ptr.cargando span{animation:ptr-gira .8s linear infinite}
@keyframes ptr-gira{to{rotate:360deg}}

/* El logo de la fiesta como título (events.hero): reemplaza al texto en la portada y en la ficha. */
.h1-logo{font-size:0;line-height:0;margin-bottom:10px}
.h1-logo img{display:block;width:100%;max-width:460px;height:auto}
.qts-hero h1.h1-logo{text-shadow:none}
/* En escritorio, su alto cede ante la pantalla: el botón de comprar se ve sin bajar. */
.qts-hero .h1-logo img{max-width:min(440px,44vh);margin-left:-8px}
@media(min-width:940px) and (max-height:820px){
  .qts-hero:has(.h1-logo) :is(.hero-badge,.hero-facts,.countdown){margin-bottom:12px}
  .qts-hero:has(.h1-logo) .hero-lede{margin-bottom:12px}
}
@media(max-width:939px){.qts-hero .h1-logo img{max-width:560px;margin:0 auto}}

/* El acceso a las fotos en el Resumen del panel. */
.callout-fotos{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;padding:14px 16px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius-sm);background:var(--surface)}
.callout-fotos span{color:var(--muted);font-size:.86rem}
.callout-fotos .aviso-acciones{margin-top:4px}

/* La salida de las herramientas de cada cargo (renderPage, opción volver). */
.qts-volver{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;font-size:.92rem;font-weight:700;color:var(--white)}

/* La campana y su panel (public/js/campana.js). El número va en blanco: en los temas claros el encabezado es magenta. */
.qts-campana{position:relative;flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:none;color:var(--white);-webkit-tap-highlight-color:transparent;transition:transform var(--dur-1) var(--ease-out)}
.qts-campana:active{transform:scale(.92)}
.qts-campana svg{width:23px;height:23px}
.header-inner .qts-campana{margin:0 -10px 0 auto}
@media(max-width:979px){.header-inner{gap:10px}.acct-chip{padding:6px 12px}}
.qts-campana-n{position:absolute;top:3px;right:1px;min-width:18px;height:18px;padding:0 5px;display:grid;place-items:center;border-radius:9px;background:#fff;color:#000;font-size:.66rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.qts-campana-n[hidden],.qts-campana[hidden]{display:none}
.qts-avisos{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:none;color:var(--white)}
.qts-avisos:focus{outline:0}
.qts-avisos::backdrop{background:rgba(0,0,0,.55)}
.qa-hoja{position:absolute;top:calc(env(safe-area-inset-top,0px) + 8px);left:8px;right:8px;display:flex;flex-direction:column;max-width:420px;max-height:min(80dvh,640px);margin-left:auto;overflow:hidden;border-radius:20px;border:1px solid var(--line);background:var(--surface);box-shadow:0 24px 60px rgba(0,0,0,.6);transform-origin:top right;animation:qa-abre var(--dur-3) var(--ease-out)}
@keyframes qa-abre{from{opacity:0;transform:scale(.94) translate3d(0,-10px,0)}to{opacity:1;transform:none}}
.qa-hoja>header{flex:none;display:flex;align-items:center;justify-content:space-between;padding:10px 6px 6px 18px}
.qa-hoja h2{margin:0;font-family:var(--display);font-size:1.75rem;line-height:1}
.qa-cerrar{width:44px;height:44px;background:none;color:inherit;font-size:1.05rem}
.qa-lista{overflow-y:auto;overscroll-behavior:contain;padding:0 8px 10px}
.qa-item{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:60px;padding:10px;border-radius:14px;color:inherit}
.qa-item.nuevo{background:rgba(var(--accent-rgb),.13)}
.qa-item:active{background:rgba(var(--white-rgb),.08)}
.qa-ico{font-size:1.35rem;line-height:1;text-align:center}
.qa-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.qa-tx b{font-size:.92rem;line-height:1.25}
.qa-tx span{font-size:.82rem;line-height:1.35;color:var(--muted)}
.qa-tx time{font-size:.72rem;color:var(--muted)}
.qa-ir{max-width:84px;font-size:.76rem;font-weight:700;line-height:1.2;text-align:right;color:var(--accent)}
.qa-vacio{margin:0;padding:26px 14px 32px;text-align:center;font-size:.9rem;line-height:1.5;color:var(--muted)}

/* El pedido en vivo (public/js/pedido-vivo.js): la pastilla con la fase y la luz que bordea el menú. */
.qts-pedido{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 90px);z-index:84;display:flex;align-items:center;width:fit-content;max-width:calc(100vw - 32px);min-height:42px;margin:0 auto;padding:8px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(10,10,14,.94);color:#fff;font-family:var(--body);font-size:.86rem;font-weight:700;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.qts-pedido[hidden]{display:none}
.qp{display:inline-flex;align-items:center;gap:8px}
.qts-pedido b{display:inline-block;font-weight:800;font-variant-numeric:tabular-nums}
.qts-pedido.fase-listo{background:#0d2404}
@media(min-width:980px){.qts-pedido{bottom:22px}}
.qts-luz{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible;pointer-events:none;transition:color 1200ms var(--ease-in-out)}
.qts-luz rect{fill:none;stroke:currentColor;stroke-linecap:round;transition:stroke-dashoffset 5s linear}
.ql-halo{stroke-width:9;stroke-dasharray:100 100;opacity:.42;filter:blur(4px)}
.ql-traza{stroke-width:2.5;stroke-dasharray:100 100}
.qts-luz .ql-punta{stroke:#fff;stroke-width:4;stroke-dasharray:1.2 100;animation:ql-late 1100ms var(--ease-in-out) infinite alternate}
.qts-luz.lista{animation:ql-late 700ms var(--ease-in-out) infinite alternate}
.qts-luz.lista .ql-punta{display:none}
@keyframes ql-late{from{opacity:.5}to{opacity:1}}

/* Entregado: pantalla completa en el teléfono de quien pidió. */
.qts-entregado{position:fixed;inset:0;z-index:1200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;padding:24px;border:0;background:rgba(3,12,3,.95);color:#fff;font-family:var(--body);text-align:center;animation:qe-entra var(--dur-2) var(--ease-out)}
.qts-entregado b{font-family:var(--display);font-size:clamp(3.6rem,19vw,5.4rem);font-weight:400;line-height:1;letter-spacing:.01em}
.qts-entregado span{font-size:1.05rem;line-height:1.4}
.qts-entregado .qe-salud{font-weight:800;color:#7CFF00}
.qts-entregado .qe-aro{position:relative;display:block;width:132px;height:132px;margin-bottom:12px}
.qe-aro svg{width:100%;height:100%;fill:none;stroke:#7CFF00;stroke-linecap:round;stroke-linejoin:round}
.qe-aro circle{stroke-width:2.5;stroke-dasharray:152;stroke-dashoffset:152;animation:qe-traza 520ms var(--ease-out) forwards}
.qe-aro path{stroke-width:4;stroke-dasharray:44;stroke-dashoffset:44;animation:qe-traza 320ms 400ms var(--ease-out) forwards}
.qe-aro i{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:2px;background:var(--c);opacity:0;animation:qe-chispa 900ms 420ms var(--ease-out) both}
@keyframes qe-entra{from{opacity:0}to{opacity:1}}
@keyframes qe-traza{to{stroke-dashoffset:0}}
@keyframes qe-chispa{0%{opacity:1;transform:rotate(var(--a)) translate3d(0,-44px,0)}100%{opacity:0;transform:rotate(var(--a)) translate3d(0,-158px,0) scale(.4)}}

/* /cuenta por secciones. */
.cta-nav{position:sticky;top:68px;z-index:40;display:flex;gap:6px;overflow-x:auto;margin-top:20px;padding:10px 0;background:var(--ink);scrollbar-width:none}
.cta-nav::-webkit-scrollbar{display:none}
.cta-nav a{flex:none;display:inline-flex;align-items:center;min-height:38px;padding:0 11px;border-radius:999px;border:1px solid var(--line);font-size:.8rem;font-weight:700;color:var(--muted)}
.section-head.cta-sec{margin:34px 0 12px;scroll-margin-top:136px}
.cta-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px 18px;margin:0}
.cta-datos dt{font-size:.74rem;color:var(--muted)}
.cta-datos dd{margin:0;font-weight:700;overflow-wrap:anywhere}
.cta-editar{margin-top:10px}
.cta-editar summary{display:flex;align-items:center;min-height:40px;font-size:.88rem;font-weight:700;color:var(--accent);cursor:pointer}

@media(prefers-reduced-motion:reduce){
  .qa-hoja,.qts-luz.lista,.qts-luz .ql-punta,.qts-entregado{animation:none}
  .qts-luz rect{transition:none}
  .qe-aro circle,.qe-aro path{animation:none;stroke-dashoffset:0}
}