/* Estilo "Spotify neón" (basado en el DESIGN.md de Spotify de awesome-design-md).
   Negros neutros donde las fotos de los tragos ponen el color, tarjetas planas sin borde,
   botones píldora en mayúsculas, el "+" como botón de play redondo, sombras pesadas.
   El modo neón: el verde lima de la marca brilla (resplandor) en todo lo que se toca.
   ROLL-BACK: borrar las dos líneas marcadas "Tema Spotify neón" en index.html (o `git checkout antes-spotify`). */

:root{
  --night:#121212;       /* fondo */
  --jungle:#181818;      /* tarjetas, cajón, ventanas */
  --s2:#1f1f1f;          /* botones, campos */
  --s3:#282828;          /* tarjeta al pasar el mouse */
  --leaf:#3a3a3a;        /* bordes (casi no se usan) */
  --paper:#ffffff;
  --muted:#b3b3b3;
  --danger:#f3727f;
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-cond:"Figtree",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --neon:0 0 8px rgba(184,244,60,.8),0 0 24px rgba(184,244,60,.45);
  --neon-box:0 0 0 1px rgba(184,244,60,.55),0 0 18px rgba(184,244,60,.45),0 0 42px rgba(184,244,60,.2);
  --sh-card:0 8px 8px rgba(0,0,0,.3);
  --sh-dialog:0 8px 24px rgba(0,0,0,.5);
  --r-s:6px; --r-m:8px; --r-l:12px;
}
body{background:var(--night);line-height:1.45}
body::before{background:var(--night)}

/* Fondo: degradé de color arriba que se funde en negro (como la cabecera de una playlist) + un halo neón */
.bg{background:
  linear-gradient(180deg,rgba(184,244,60,.16) 0,rgba(18,18,18,0) 520px),
  radial-gradient(40% 30% at 85% 0%,rgba(184,244,60,.18),transparent 70%)}
.bg::after{opacity:.04}

/* Barra superior */
.top{background:rgba(18,18,18,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.icon-btn{border:0;background:var(--s2);font-family:var(--f-body);font-weight:700;font-size:.88rem;letter-spacing:1.4px;text-transform:uppercase}
.icon-btn:hover{background:var(--s3);box-shadow:var(--neon-box)}
.cart-btn{background:var(--lime);color:#000;box-shadow:var(--neon)}
.cart-btn .count{background:#000;color:var(--lime);letter-spacing:0}

/* Portada */
.lede{color:var(--muted)}
.lede strong{color:#fff;font-weight:700}
.btn{height:52px;padding:0 30px;font-family:var(--f-body);font-weight:700;font-size:.9rem;letter-spacing:1.6px;text-transform:uppercase}
.btn-lime{color:#000;box-shadow:var(--neon)}
.btn-lime:hover{background:var(--lime-hot);box-shadow:0 0 12px rgba(226,255,107,.9),0 0 36px rgba(184,244,60,.6);transform:scale(1.04)}
.btn-ghost{border:1px solid #7c7c7c;color:#fff}
.btn-ghost:hover{background:transparent;border-color:var(--lime);color:var(--lime);box-shadow:var(--neon-box);transform:scale(1.04)}
.hero-meta{font-family:var(--f-body);font-size:.88rem;font-weight:700;letter-spacing:.3px}
.hero-meta span{padding:6px 12px;border-radius:999px;background:var(--s2)}
.hero-meta b{text-shadow:var(--neon)}
.sticker .photo{box-shadow:var(--sh-dialog),0 0 40px rgba(184,244,60,.25)}

/* Tira de slogans: banda negra con letras de neón */
.strip{background:#000;color:var(--lime);border-block:1px solid rgba(184,244,60,.5);box-shadow:0 0 24px rgba(184,244,60,.25)}
.strip .track{text-shadow:var(--neon)}
.strip .track span::after{background:var(--lime);box-shadow:var(--neon)}

/* Carta: títulos en negrita compacta */
.menu-head h2{font-family:var(--f-body);font-weight:800;letter-spacing:-.5px;font-size:clamp(1.8rem,5vw,2.6rem)}
.search input{border:0;background:var(--s2);box-shadow:inset 0 0 0 1px #4d4d4d}
.search input:hover{box-shadow:inset 0 0 0 1px #7c7c7c}
.search input:focus{box-shadow:inset 0 0 0 1.5px var(--lime),0 0 18px rgba(184,244,60,.3)}
.cats{background:linear-gradient(var(--night) 75%,rgba(18,18,18,0))}
.cat{height:36px;border:0;background:var(--s2);font-family:var(--f-body);font-size:.88rem;font-weight:700}
.cat:hover{background:var(--s3)}
.cat[aria-pressed="true"]{background:var(--lime);color:#000;box-shadow:var(--neon)}
.section-title h3{font-family:var(--f-body);font-weight:800;letter-spacing:-.3px;font-size:clamp(1.4rem,3.6vw,1.75rem);color:#fff;text-shadow:none}
.section-title h3::after{content:"";display:inline-block;width:8px;height:8px;margin-left:10px;border-radius:50%;background:var(--lime);box-shadow:var(--neon);vertical-align:middle}
.section-title p{font-family:var(--f-body);font-size:.88rem}

/* Tarjetas: planas, sin borde; al pasar se aclaran y se enciende el neón */
.card{background:var(--jungle);border:0;border-radius:var(--r-m);transition:background .25s,transform .25s cubic-bezier(.3,1.3,.5,1),box-shadow .25s}
.card:hover{background:var(--s3);border-color:transparent;box-shadow:var(--sh-card),var(--neon-box)}
.card.lucky{box-shadow:0 0 0 2px var(--chip),0 0 40px rgba(255,210,63,.4)}
.cup-stage,.cup-stage img{border-radius:var(--r-s)}
.cup-stage{box-shadow:var(--sh-card)}
.card h4{font-family:var(--f-body);font-weight:700;font-size:1.1rem;line-height:1.25}
.card .desc{font-size:.85rem}
.price{font-family:var(--f-body);font-weight:700;font-size:1.05rem;color:#fff;letter-spacing:0}
.badge{font-family:var(--f-body);font-weight:700;font-size:.66rem;letter-spacing:1px;text-transform:uppercase;border-radius:4px;padding:4px 8px;box-shadow:0 0 12px rgba(255,210,63,.55)}
.badge.hot{box-shadow:0 0 12px rgba(243,114,127,.6)}
/* El "+" es el botón de play de Spotify: redondo, verde, con sombra, y crece al tocarlo */
.add{width:48px;height:48px;color:#000;box-shadow:0 8px 8px rgba(0,0,0,.3),0 0 14px rgba(184,244,60,.45)}
.card:hover .add,.add:hover{transform:scale(1.08);box-shadow:0 8px 8px rgba(0,0,0,.3),0 0 10px rgba(226,255,107,.9),0 0 30px rgba(184,244,60,.6)}
.add:active{transform:scale(.9)}

/* Ventana del trago y cajón del pedido */
.scrim{background:rgba(0,0,0,.7)}
.sheet,.drawer{background:var(--jungle);border-color:#2a2a2a;box-shadow:var(--sh-dialog)}
.sheet h3,.drawer h3{font-family:var(--f-body);font-weight:800;letter-spacing:-.5px;font-size:1.75rem;color:#fff}
.sheet h3{text-shadow:none}
.drawer h3::after{content:"";display:inline-block;width:8px;height:8px;margin-left:10px;border-radius:50%;background:var(--lime);box-shadow:var(--neon);vertical-align:middle}
.sheet .cat-name,.field-label,.form-grid label{font-family:var(--f-body)}
.field-label,.form-grid label{font-size:.88rem;font-weight:700}
.close{background:var(--s2)}
.close:hover{background:var(--s3)}
.drawer-head{border-bottom:1px solid #2a2a2a}
.opt span{border:0;background:var(--s2);font-size:.9rem;font-weight:700}
.opt span:hover{background:var(--s3)}
.opt input:checked+span{color:#000;box-shadow:var(--neon)}
.seg .opt span{font-family:var(--f-body);font-size:.88rem;letter-spacing:1.2px;text-transform:uppercase;border-radius:999px}
textarea,.input{border:0;border-radius:var(--r-s);background:var(--s2);box-shadow:inset 0 0 0 1px #4d4d4d}
textarea:hover,.input:hover{box-shadow:inset 0 0 0 1px #7c7c7c}
textarea:focus,.input:focus{box-shadow:inset 0 0 0 1.5px var(--lime),0 0 16px rgba(184,244,60,.25)}
.qty{border:0;background:var(--s2)}
.qty button:hover{background:var(--s3);color:var(--lime)}
.qty output{font-family:var(--f-body);font-weight:700;font-size:1.1rem}
.line{border-bottom:1px solid #2a2a2a}
.line h5{font-family:var(--f-body);font-size:1rem}
.mini{border-radius:var(--r-s)}
.steps i{background:#3a3a3a}
.steps i.on{box-shadow:var(--neon)}
.totals{border-top:1px solid #2a2a2a}
.totals .grand{font-family:var(--f-body);font-size:1.3rem}
.totals .grand span:last-child{color:var(--lime);text-shadow:var(--neon)}
.transf-box{border:0;background:var(--s2)}
.copy{border:1px solid #7c7c7c}
.copy:hover{border-color:var(--lime);box-shadow:var(--neon-box)}
.comp-drop{border-color:#4d4d4d}
.empty-cart .big{font-family:var(--f-body);font-weight:800}
.closed-banner div{border-radius:var(--r-m);background:var(--s2);border-color:rgba(255,210,63,.6);box-shadow:0 0 18px rgba(255,210,63,.18)}
.closed-banner b{font-family:var(--f-body);font-weight:800;font-size:1.1rem}
.closed-note{border:0;background:var(--s2);border-radius:var(--r-m)}

/* Dados: el trago elegido sobre negro */
.dice-reveal{background:rgba(0,0,0,.8)}
.dice-reveal .pick{background:var(--jungle);border-radius:var(--r-l)}
.dice-reveal h3{font-family:var(--f-body)}

/* "Ver carrito": barra tipo "reproduciendo ahora", negra con borde de neón */
.float-cart{font-family:var(--f-body);font-size:.95rem;letter-spacing:1.2px;text-transform:uppercase}
.float-cart.has{background:rgba(24,24,24,.86);color:#fff;box-shadow:var(--sh-dialog),var(--neon-box)}
.float-cart.has:hover,.float-cart.has:focus-visible{background:#181818}
.float-cart #float-total{color:var(--lime);text-shadow:var(--neon);letter-spacing:0}
.toast{background:#fff;color:#000;font-weight:700}
footer{border-top-color:#2a2a2a}

@media (max-width:640px){
  .card{padding:8px 8px 12px;border-radius:var(--r-m)}
  .card h4{font-size:.98rem}
  .price{font-size:.98rem}
  .add{width:40px;height:40px}
}