:root{
  --black:#0a0a0a; --deep:#111; --card:#141414; --card2:#1b1b1b;
  --blue:#1a8cff; --blue-osc:#0f5fb3;
  --white:#f0f0f0; --muted:#8a8a8a; --tenue:#585858; --linea:rgba(255,255,255,0.08);
  --ok:#3ecf8e; --alerta:#e0a32e; --mal:#e05c5c; --oro:#d4900a;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{background:var(--black);color:var(--white);font-family:'DM Sans',system-ui,sans-serif;font-size:16px;line-height:1.5;min-height:100vh}
img{display:block;max-width:100%}
button,input,select,textarea{font-family:inherit;font-size:16px;color:inherit}
button{background:none;border:none;cursor:pointer}
a{color:var(--blue)}
.oculto{display:none!important}
.syne{font-family:'Syne',sans-serif;font-weight:800;letter-spacing:-0.02em}
.eti{font-family:'Syne',sans-serif;font-weight:700;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(240,240,240,.45)}
.num{font-family:'Space Grotesk',sans-serif;font-weight:700;font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.app{max-width:560px;margin:0 auto;padding:0 16px 48px}

header.cab{position:sticky;top:0;z-index:20;background:rgba(10,10,10,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--linea);padding:calc(env(safe-area-inset-top) + 12px) 16px 12px;display:flex;align-items:center;gap:12px}
header.cab img{height:28px;width:auto}
header.cab .tit{font-family:'Syne',sans-serif;font-weight:700;font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(240,240,240,.5)}
header.cab .der{margin-left:auto;font-size:.85rem}

.hero{padding:40px 0 24px;text-align:left}
.hero h1{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(2.1rem,9vw,3.2rem);line-height:1;letter-spacing:-.03em}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero p{color:var(--muted);margin-top:14px;max-width:34ch}

.tarjeta{background:var(--card);border:1px solid var(--linea);border-radius:16px;padding:18px}
.tarjeta + .tarjeta{margin-top:12px}
.aviso{border-radius:12px;padding:12px 14px;font-size:.92rem;margin:12px 0;background:rgba(26,140,255,.1);border:1px solid rgba(26,140,255,.3)}
.aviso.mal{background:rgba(224,92,92,.1);border-color:rgba(224,92,92,.35)}
.aviso.alerta{background:rgba(224,163,46,.1);border-color:rgba(224,163,46,.35)}

.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;border-radius:12px;
  background:var(--blue);color:#fff;font-weight:600;font-size:1rem;padding:0 18px;transition:transform .1s,opacity .2s;text-decoration:none}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.sec{background:var(--card2);border:1px solid var(--linea);color:var(--white)}
.btn.peligro{background:transparent;border:1px solid rgba(224,92,92,.5);color:var(--mal)}
.btn.ok{background:var(--ok);color:#06210f}
.fila-btn{display:flex;gap:10px;margin-top:16px}
.fila-btn .btn{flex:1}

/* Pestañas de evento */
.pestanas{display:flex;gap:8px;margin:8px 0 16px;overflow-x:auto}
.pestanas button{flex:1;min-height:44px;border-radius:999px;border:1px solid var(--linea);background:var(--card);font-weight:600;white-space:nowrap;padding:0 16px}
.pestanas button.on{background:var(--white);color:var(--black);border-color:var(--white)}

/* Tipos de entrada */
.tipo{display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:start}
.tipo h3{font-family:'Syne',sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:-.01em}
.tipo .precio{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.25rem;text-align:right}
.tipo .desc{grid-column:1/-1;color:var(--muted);font-size:.9rem}
.tipo ul{grid-column:1/-1;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.tipo li{font-size:.78rem;padding:3px 9px;border-radius:999px;background:var(--card2);border:1px solid var(--linea)}
.tipo .pie{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;flex-wrap:wrap}
.tipo.reservado{border-color:rgba(212,144,10,.45);background:linear-gradient(160deg,rgba(212,144,10,.09),var(--card) 60%)}
.chip{font-family:'Syne',sans-serif;font-weight:700;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;padding:5px 9px;border-radius:999px}
.chip.ultimas{background:rgba(224,163,46,.15);color:var(--alerta)}
.chip.agotado{background:rgba(224,92,92,.14);color:var(--mal)}
.chip.proximamente{background:var(--card2);color:var(--muted)}
.chip.disponible{background:rgba(62,207,142,.12);color:var(--ok)}
.chip.oro{background:rgba(212,144,10,.16);color:var(--oro)}
.contador{display:flex;align-items:center;gap:4px;background:var(--card2);border:1px solid var(--linea);border-radius:12px;padding:3px}
.contador button{width:42px;height:42px;border-radius:9px;font-size:1.35rem;font-weight:600}
.contador button:active{background:rgba(255,255,255,.06)}
.contador button:disabled{opacity:.25}
.contador span{min-width:28px;text-align:center}
select.campo{appearance:none;-webkit-appearance:none}

/* Formularios */
label.l{display:block;font-size:.85rem;color:var(--muted);margin:14px 0 6px}
.campo{width:100%;min-height:50px;border-radius:12px;border:1px solid var(--linea);background:var(--card2);padding:12px 14px;outline:none}
.campo:focus{border-color:var(--blue)}
.check{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:.9rem;color:var(--muted)}
.check input{width:22px;height:22px;margin-top:1px;flex-shrink:0;accent-color:var(--blue)}
.otp{font-family:'Space Grotesk',sans-serif;font-size:2rem;letter-spacing:.5em;text-align:center;padding-left:.5em}

/* Barra inferior de compra */
.barra{position:sticky;bottom:0;z-index:15;background:rgba(10,10,10,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--linea);padding:12px 16px calc(env(safe-area-inset-bottom) + 12px);margin:24px -16px 0}
.barra .res{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}

/* Cola */
.cola{text-align:center;padding:48px 0}
.cola .grande{font-size:4rem;line-height:1}
.progreso{height:6px;border-radius:99px;background:var(--card2);overflow:hidden;margin:24px 0 12px}
.progreso div{height:100%;background:var(--blue);width:0;transition:width 1s linear}
.pulso{width:14px;height:14px;border-radius:50%;background:var(--blue);margin:0 auto 22px;animation:pulso 1.4s ease-in-out infinite}
@keyframes pulso{0%,100%{box-shadow:0 0 0 0 rgba(26,140,255,.5)}50%{box-shadow:0 0 0 14px rgba(26,140,255,0)}}

/* Resumen y QR */
.lineas{list-style:none;margin:12px 0}
.lineas li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--linea);font-size:.95rem}
.lineas li.total{border:none;font-weight:700;font-size:1.1rem}
.qr{background:#fff;border-radius:16px;padding:14px;max-width:300px;margin:16px auto}
.qr svg{width:100%;height:auto;display:block}
.loc{text-align:center;font-size:1.4rem;letter-spacing:.12em}
.estado{display:inline-block;font-family:'Syne',sans-serif;font-weight:800;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;padding:7px 12px;border-radius:999px}
.estado.pendiente{background:rgba(224,163,46,.15);color:var(--alerta)}
.estado.confirmado{background:rgba(62,207,142,.15);color:var(--ok)}
.estado.caducado,.estado.cancelado{background:rgba(224,92,92,.14);color:var(--mal)}
.estado.retenido{background:var(--card2);color:var(--muted)}
.temporizador{font-size:.9rem;text-align:center;color:var(--muted);margin:8px 0}
.temporizador b{color:var(--white)}
.pequeno{font-size:.8rem;color:var(--tenue);margin-top:28px}

/* Aviso de "se acaba de agotar": que se vea al instante */
.aviso-stock{margin:14px 0;padding:16px;border-radius:16px;border:2px solid var(--mal);background:rgba(224,92,92,.12);animation:sacude .35s}
.aviso-stock b.t{display:block;font-family:'Syne',sans-serif;font-size:1.15rem;margin-bottom:4px;color:var(--mal)}
.aviso-stock .btn{margin-top:10px}
@keyframes sacude{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.aviso-stock{animation:none}}
.aviso-stock.bien{border-color:var(--ok);background:rgba(62,207,142,.1);animation:none}

/* Cómo funciona + mayores de edad */
.como{border:1px solid rgba(224,163,46,.4);background:rgba(224,163,46,.08);border-radius:14px;padding:14px 16px;margin:4px 0 14px}
.como-tit{margin:0 0 6px;font-weight:700;color:var(--alerta);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem}
.como ol{margin:0;padding-left:20px;font-size:.95rem;line-height:1.5}
.como li{margin:4px 0}
.mayor{display:flex;align-items:center;gap:10px;margin:12px 0 0;font-size:.92rem}
.mas18{flex-shrink:0;display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;border:2px solid var(--mal);color:var(--mal);font-weight:800;font-size:.85rem}
.pago48{font-size:.98rem}
.check.fuerte{color:var(--white)}