/* ============================================================
   QUETASHENDO — sistema de diseño · "Vive sin filtros"
   Negro absoluto + espectro de pintura (7 colores de marca).
   Bebas Neue (display) + Montserrat (texto). Mobile-first.
   ============================================================ */
@font-face{font-family:'Bebas Neue';src:url('/fonts/BebasNeue-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Montserrat';src: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(255,255,255,.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;
  --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; --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;
}
*,*::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. */
body{font-family:var(--body);background:var(--ink);color:var(--white);line-height:1.6;
  font-size:16px;overflow-x:hidden;background-attachment:fixed;
  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:#fff;padding:10px 16px;z-index:200;border-radius:0 0 10px 0}
.skip-link:focus{left:0}
::selection{background:var(--accent);color:#fff}
: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 .15s ease,box-shadow .2s ease,background .2s ease,opacity .2s;white-space:nowrap;border:1px solid transparent}
.btn:active{transform:translateY(1px)}
/* 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(255,255,255,.08) inset;transition:transform .15s ease,box-shadow .2s,background-position .45s ease}
.btn-primary:hover{background-position:100% 0;box-shadow:0 18px 52px rgba(255,0,142,.42);transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.05);border-color:var(--line);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(0,182,255,.5)}
.btn-outline{background:transparent;border-color:var(--accent);color:var(--accent)}
.btn-outline:hover{background:var(--accent);color:#fff}
.btn-cyan{background:transparent;border-color:var(--c-cyan);color:var(--c-cyan)}
.btn-cyan:hover{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:#fff}

/* ───────── 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:#fff}
.brand-lockup{display:inline-flex;align-items:center;gap:12px;color:#fff}
.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 .2s;letter-spacing:.01em}
.nav-desktop a:not(.btn):hover,.navlink-btn:hover{color:#fff}
.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}
.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:.25s}
.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(255,255,255,.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:#fff;padding:8px 16px;border-radius:999px;margin-bottom:20px}
.hero-tonight .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 var(--accent-glow);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--accent-glow)}70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}
.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:#fff}
.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(255,255,255,.14);box-shadow:0 30px 90px rgba(0,0,0,.75),0 0 70px rgba(var(--accent-rgb),.28);transition:transform .35s ease}
.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 .2s,border-color .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px);border-color:rgba(var(--accent-rgb),.4);box-shadow:var(--shadow)}

/* 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 .4s}
.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)}
.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:#fff;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:#fff;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 .25s}
.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:#fff;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 .2s}
.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:#fff}
.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:#fff;background:rgba(255,255,255,.04)}
.qty button:hover{background:var(--accent);}
.qty input{width:42px;text-align:center;background:transparent;color:#fff;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{aspect-ratio:1;overflow:hidden;border-radius:12px;border:1px solid var(--line)}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.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 .4s}
.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 */
.ig-embeds{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(255,255,255,.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:#fff;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)}
.cat-pill.active,.cat-pill:hover{background:var(--accent);color:#fff;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:#fff;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 .3s;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 / Billetera ───────── */
.acct-grid{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:880px){.acct-grid{grid-template-columns:1.1fr .9fr}}
.wallet-card{background:linear-gradient(135deg,rgba(var(--accent-rgb),.18),rgba(21,16,26,.9));border:1px solid var(--accent);border-radius:var(--radius);padding:26px;position:relative;overflow:hidden}
.wallet-card .wc-label{font-size:.74rem;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.balance-big{font-family:var(--display);font-size:4rem;color:#fff;line-height:1;margin:6px 0}
.wc-id{font-size:.82rem;color:var(--muted)}.wc-id b{color:var(--accent);font-family:var(--display);letter-spacing:.06em;font-size:1.05rem}
.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(255,255,255,.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:#fff;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(255,255,255,.08);color:var(--muted)}

.barra-board{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:780px){.barra-board{grid-template-columns:repeat(3,1fr)}}
.barra-col{background:rgba(21,16,26,.6);border:1px solid var(--line);border-radius:var(--radius);padding:14px;min-height:120px}
.barra-col h3{font-size:1.3rem;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
.barra-col .count{font-family:var(--body);font-size:.8rem;color:var(--muted);background:rgba(255,255,255,.06);padding:2px 9px;border-radius:999px}
.barra-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:13px 14px;margin-bottom:10px}
.barra-card .bc-top{display:flex;justify-content:space-between;font-weight:800;font-size:.86rem}
.barra-card .bc-items{color:var(--muted);font-size:.82rem;margin:6px 0}
.barra-card .bc-actions{display:flex;gap:8px;margin-top:8px}
.col-queued{border-top:3px solid var(--warn)} .col-preparing{border-top:3px solid var(--info)} .col-ready{border-top:3px solid var(--ok)}
.bt-btn{width:50px;height:50px;border-radius:14px;border:1.5px solid var(--line);background:#17171c;color:#fff;font-size:1.9rem;font-weight:800;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:transform .1s,background .15s,border-color .15s;-webkit-tap-highlight-color:transparent;user-select:none}
.bt-btn:hover{background:var(--accent);border-color:var(--accent)}
.bt-btn:active{transform:scale(.9)}
.order-status-pill{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.ps-queued{background:rgba(245,158,11,.16);color:#fcd34d}
.ps-preparing{background:rgba(56,189,248,.16);color:#7dd3fc}
.ps-ready{background:rgba(34,197,94,.18);color:#86efac}
.ps-delivered{background:rgba(255,255,255,.08);color:var(--muted)}
.ps-cancelled{background:rgba(239,68,68,.16);color:#fca5a5}

/* progreso de pedido (vista usuario) */
.order-track{display:flex;gap:6px;margin:14px 0}
.track-step{flex:1;height:6px;border-radius:6px;background:rgba(255,255,255,.1)}
.track-step.on{background:var(--accent)}

/* ───────── 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:slideIn .22s ease;background:#100a12}
.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:slideIn .22s ease, goldGlow 1.8s 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 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 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:#fff;font-size:1rem;font-weight:500;width:100%;transition:border-color .2s}
.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}
.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}
.banner-x:hover{color:#fff;background:rgba(255,255,255,.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}
.modal-close:hover{color:#fff}
.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:translateX(-50%) translateY(20px);z-index:200;
  background:var(--surface-2);border:1px solid var(--accent);color:#fff;padding:13px 22px;border-radius:999px;font-weight:700;
  box-shadow:var(--shadow);opacity:0;transition:.3s;pointer-events:none;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.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 .3s ease}
.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:hover{filter:brightness(1.06)}
.notif-accept:disabled{opacity:.6;cursor:default}
@keyframes slideIn{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}

/* ───────── Checkout / Confirmación / Ticket ───────── */
.checkout-grid{display:grid;gap:24px;grid-template-columns:1fr}
@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(255,255,255,.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(255,255,255,.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{position:sticky;top:0;z-index:20;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)}
.admin-tabs{display:flex;gap:6px;overflow-x:auto;padding:10px 14px;border-bottom:1px solid var(--line);background:#0c0c0e;position:sticky;top:57px;z-index:19}
.admin-tab{white-space:nowrap;padding:9px 15px;border-radius:999px;font-weight:700;font-size:.84rem;color:var(--muted);border:1px solid transparent}
.admin-tab.active{background:var(--accent);color:#fff}
.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:fade .25s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.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(255,255,255,.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:#0d0d10;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:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.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(255,255,255,.06) 75%);
  box-shadow:var(--shadow),0 0 60px rgba(var(--accent-rgb),.14);animation:fadeSlideUp .6s cubic-bezier(.22,1,.36,1) both}
.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 .5s cubic-bezier(.22,1,.36,1) both}
.form-field:nth-of-type(1){animation-delay:.1s}.form-field:nth-of-type(2){animation-delay:.17s}
.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 .2s,box-shadow .2s}
.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 .2s cubic-bezier(.4,0,.2,1),color .2s}
.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:.2s;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 .18s cubic-bezier(.4,0,.2,1),box-shadow .2s,background-position .5s;
  animation:fadeSlideUp .5s cubic-bezier(.22,1,.36,1) both;animation-delay:.24s;margin-top:2px}
.login-button:hover{transform:translateY(-2px);background-position:100% 0;box-shadow:0 18px 46px rgba(var(--accent-rgb),.45)}
.login-button:active{transform:translateY(0) scale(.99)}
.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 .6s 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}}
.admin-row-actions{display:flex;gap:6px;flex-wrap:wrap}
.tiny{font-size:.78rem;padding:6px 12px}
.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(255,255,255,.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:#0d0d10;border:1px solid var(--line);border-radius:9px;padding:10px 12px;color:#fff}
.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 .7fr 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}}

/* ───────── Reveal on scroll ───────── */
/* Solo se ocultan si hay JS (.js lo agrega un script en <head>). Sin JS → todo visible. */
.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.js [data-reveal].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none;transition:none}*{scroll-behavior:auto}.scan-flash.go{animation:none;opacity:0}.nav-toggle span{transition:none}.notif{animation:none}.hero-tonight .dot{animation:none}}
/* 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:#fff;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:#fff}

/* ───────── Pulido (auditoría senior 26-jun) ───────── */
.ledger-row{transition:background .15s ease}
.ledger-row:hover{background:rgba(255,255,255,.035)}
/* Selects de formulario consistentes (antes iban con estilos inline dispersos) */
.admin-form select,.form select{background:#0d0d10;border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px;color:#fff;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(255,255,255,.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 .35s cubic-bezier(.4,0,.2,1),opacity .3s}
.qts-tabbar-inner{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(255,255,255,.14);box-shadow:0 16px 44px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.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;transition:color .2s,background .2s,transform .12s}
.qts-tab svg{width:25px;height:25px}
.qts-tab:active{transform:scale(.9)}
.qts-tab:hover,.qts-tab.active{color:#fff;background:rgba(255,255,255,.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{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 (trago) un poco más grande + anillo de progreso del pedido */
.qts-tab-order{width:56px;height:56px}
.qts-tab-order>svg{width:27px;height:27px}
/* Progreso del pedido bordeando todo el nav (app.js dimensiona el rect según el pill) */
.nav-prog{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;opacity:0;transition:opacity .3s;z-index:3}
.qts-tabbar.has-order .nav-prog{opacity:1}
.nav-prog-track{fill:none;stroke:rgba(255,255,255,.14);stroke-width:3}
.nav-prog-bar{fill:none;stroke:var(--cyan,#38bdf8);stroke-width:3.4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .9s linear,stroke .3s}
.qts-tabbar.ready .nav-prog-bar{stroke:#22c55e;stroke-dashoffset:0;animation:qts-ring-pulse 1.4s ease-in-out infinite}
.qts-tabbar.ready .qts-tabbar-inner{box-shadow:0 0 24px rgba(34,197,94,.55),0 16px 44px rgba(0,0,0,.55)}
@keyframes qts-ring-pulse{0%,100%{opacity:1}50%{opacity:.5}}
/* Line up de hoy */
.lineup-list{display:flex;flex-direction:column;gap:8px}
.lineup-row{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03)}
.lineup-row.now{border-color:var(--accent);background:linear-gradient(135deg,rgba(var(--accent-rgb),.12),rgba(0,0,0,.1))}
.lu-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lineup-row .lu-name{font-weight:800;font-size:1rem}
.lineup-row .lu-time{font-family:var(--display);letter-spacing:.04em;color:var(--cyan,#38bdf8);font-size:1.1rem;margin-left:auto}
.lineup-row.now .lu-time{color:var(--accent)}
.lu-now{font-size:.64rem;font-weight:800;color:var(--accent);letter-spacing:.03em;background:rgba(var(--accent-rgb),.16);padding:3px 9px;border-radius:999px}
.lu-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.dj-score{font-size:.9rem;color:var(--muted)}
.dj-score .dj-stars{color:#ffd24a;letter-spacing:2px;font-size:.95rem}
.dj-score b{color:#fff}
.dj-score.muted .dj-stars{color:var(--muted)}
.dj-rate{display:inline-flex;gap:1px}
.dj-star{background:none;border:none;cursor:pointer;font-size:1.6rem;line-height:1;color:rgba(255,255,255,.22);padding:1px 2px;transition:transform .1s,color .15s}
.dj-star.on{color:#ffd24a;text-shadow:0 0 10px rgba(255,210,74,.5)}
.dj-star:hover{transform:scale(1.18)}
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(255,255,255,.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}
.help-sheet details[open] summary::after{content:'–'}
.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 .18s ease,box-shadow .18s ease}
.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:active{transform:translateY(0)}
@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:#fff;
  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:translateY(100%);opacity:0;transition:transform .26s cubic-bezier(.22,1,.36,1),opacity .2s}
.qts-bot.open{transform:translateY(0);opacity:1}
.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(255,255,255,.06);border:1px solid var(--line);color:#fff;
  width:34px;height:34px;border-radius:10px;cursor:pointer;font-size:1rem;line-height:1}
.qts-bot-x:hover{background:rgba(255,255,255,.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:#fff}
.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:#fff;font:inherit;font-size:.82rem;font-weight:600;
  line-height:1.3;transition:background .15s,border-color .15s}
.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 infinite ease-in-out}
.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:#0d0d10;border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:#fff;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:hover{filter:brightness(1.08)}
@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}
@media(max-width:979px){
  .urgency{left:10px;right:10px;bottom:86px;border-radius:16px;border:1px solid var(--line);
    padding:10px 14px;box-shadow:0 18px 44px rgba(0,0,0,.6)}
  .urgency::before{left:14px;right:14px;border-radius:2px}
  .urgency-tx b{font-size:.88rem}
}

/* ───────── 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(255,255,255,.045),rgba(255,255,255,.015));border:1px solid var(--line);
  transition:transform .22s cubic-bezier(.22,1,.36,1),border-color .22s,box-shadow .22s}
.shop-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.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)}
.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:#fff;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:#fff;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-bar{height:5px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden}
.shop-bar i{display:block;height:100%;width:var(--pct,0%);border-radius:5px;background:var(--tint,var(--c-cyan));transition:width .6s ease}
.shop-left{font-size:.74rem;font-weight:700;color:var(--muted)}
.shop-left b{color:#fff}
.shop-left.hot b{color:var(--c-orange)}
.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)}}
.step{position:relative;padding:24px 22px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.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(255,255,255,.22)}
.step h3{font-size:1.4rem;margin-bottom:8px;color:#fff}
.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(255,255,255,.03);border:1px solid var(--line)}
.trust b{font-size:.86rem;color:#fff}
.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(255,255,255,.025);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:16px 20px;font-weight:700;font-size:.96rem;color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-size:1.6rem;line-height:1;color:var(--c-cyan);transition:transform .22s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] summary{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)}
.xp-card:hover{border-color:var(--tint,var(--c-cyan))}
.xp-card h3{color:#fff}

/* 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:#fff}
.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:#fff;margin-bottom:4px}
.footer-col a,.footer-col span{font-size:.88rem;color:var(--muted);transition:color .18s;line-height:1.45}
.footer-col a:hover{color:#fff}
.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 .18s}
.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:#fff;font-size:.98rem}
.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. */
.qts-hero::before{content:"";position:absolute;inset:0;z-index:0;
  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}
.qts-hero-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;
  opacity:0;transition:opacity 1.1s cubic-bezier(.22,1,.36,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:#fff;
  background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);margin-bottom:20px}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--c-lime);box-shadow:0 0 0 0 rgba(124,255,0,.6);animation:pulse 1.9s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(124,255,0,.55)}70%{box-shadow:0 0 0 11px transparent}100%{box-shadow:0 0 0 0 transparent}}

.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(255,255,255,.14);border-radius:999px;padding:7px 14px;backdrop-filter:blur(6px)}
.hero-facts b{color:#fff;font-weight:800}
.qts-hero .countdown{margin:0 0 26px}
.qts-hero .count-box{background:rgba(0,0,0,.5);border-color:rgba(255,255,255,.16);backdrop-filter:blur(8px)}
.qts-hero .count-box .n{color:#fff}
.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)}

/* Flyer con inclinación 3D (perspectiva real + brillo de espectro que sigue al puntero) */
.tilt-wrap{perspective:1200px;max-width:420px;margin:0 auto;width:100%}
.tilt-card{position:relative;display:block;border-radius:20px;overflow:hidden;line-height:0;
  transform-style:preserve-3d;transition:transform .5s cubic-bezier(.22,1,.36,1);
  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(255,255,255,.18);
  background:radial-gradient(320px 220px at var(--mx,50%) var(--my,30%),rgba(255,255,255,.22),transparent 62%);
  opacity:.55;transition:opacity .35s}
.tilt-card:hover::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}
@media(prefers-reduced-motion:reduce){.tilt-card{transition:none!important}}

/* 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 i{display:block;width:1px;height:36px;background:linear-gradient(180deg,transparent,var(--c-cyan));animation:scrollcue 2.1s ease-in-out infinite}
@keyframes scrollcue{0%,100%{opacity:.25;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}
@media(max-width:760px){.hero-scroll{display:none}}

/* ───────── Barra de urgencia (aparece al salir del héroe) ───────── */
.urgency{position:fixed;left:0;right:0;bottom:0;z-index:95;transform:translateY(110%);
  opacity:0;pointer-events:none;visibility:hidden;
  transition:transform .38s cubic-bezier(.22,1,.36,1),opacity .28s ease,visibility 0s linear .38s;
  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:translateY(0);opacity:1;pointer-events:auto;visibility:visible;transition-delay: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:#fff;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. */

/* ════════════════════════════════════════════════════════════════════════════
   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:#fff}

/* ───────── 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:translateY(140%);opacity:0;transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .3s;
  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:translateY(0);opacity:1}
.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:#fff}
.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 .3s ease;pointer-events:none}
.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);transform:translateY(18px);transition:transform .32s cubic-bezier(.2,.9,.3,1)}
.guia-wrap.show .guia-card{transform:translateY(0)}
.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 .2s,transform .2s}
.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-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(255,255,255,.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}
.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 ease-in-out infinite}
.guia-flecha-arriba{top:calc(6px + env(safe-area-inset-top));right:14px;animation:guiaArriba 1.4s 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 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}}