:root{
  --bg:#0a0a0a;
  --fg:#ffffff;
  --muted:rgba(255,255,255,.75);
  --gold:#d4af37;
  --gold2:#b99329;
  --card:rgba(255,255,255,.05);
  --border:rgba(255,255,255,.14);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--fg); line-height:1.55;
}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:20;
  background:linear-gradient(90deg, rgba(0,0,0,.9), rgba(20,20,20,.7));
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(4px);
}
.topbar .wrap{
  max-width:1100px; margin:auto; padding:10px 16px;
  display:flex; align-items:center; gap:12px; justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff; font-weight:800; letter-spacing:.2px}
.brand img{height:34px; width:auto; border-radius:8px}
.brand b{color:var(--gold)}
.backlink{color:var(--muted); text-decoration:none; font-size:.9rem}
.backlink:hover{color:var(--gold)}

/* Layout */
.container{max-width:1100px; margin:auto; padding:22px 16px 120px}
.hero{
  background:var(--card); border:1px solid var(--border);
  border-radius:18px; padding:20px; margin-bottom:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.hero h1{margin:0 0 6px; font-size:clamp(24px,3.5vw,36px)}
.muted{color:var(--muted)}
.small{font-size:.85rem}

.delivery-note{
  margin-top:14px;
  padding:14px 16px;
  border:1px solid rgba(212,175,55,.35);
  border-left:3px solid var(--gold);
  border-radius:12px;
  background:rgba(212,175,55,.06);
  font-size:.92rem;
  line-height:1.5;
}
.delivery-note strong{ color:var(--gold); }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:12px; font-weight:800; border:1px solid transparent; cursor:pointer;
  transition: filter .2s, transform .2s;
}
.btn.gold{background:linear-gradient(90deg,var(--gold),var(--gold2)); color:#000; border-color:var(--gold)}
.btn.gold:hover{filter:brightness(1.06); transform:translateY(-1px)}

.grid{display:grid; grid-template-columns:240px 1fr; gap:18px}
@media (max-width:900px){ .grid{grid-template-columns:1fr} }

.toc{
  position:sticky; top:86px;
  background:var(--card); border:1px solid var(--border);
  border-radius:18px; padding:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  height:fit-content;
}
.toc h3{margin:0 0 8px}
.toc ol{list-style:none; margin:0 0 10px; padding:0; display:grid; gap:6px}
.toc a{color:#fff; text-decoration:none; display:block; padding:6px 8px; border-radius:8px; font-size:.92rem}
.toc a:hover{color:var(--gold); background:rgba(255,255,255,.05)}
.toc .note{margin-top:8px; color:var(--muted); font-size:.82rem; line-height:1.5}
.toc .note a{color:var(--gold); display:inline}

.content{display:grid; gap:18px}
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:18px; padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  scroll-margin-top:88px;
}
.card-head{ margin-bottom:10px; }
.card-head h2{margin:0; font-size:1.15rem}

/* Filas de plato */
.item-list{ display:grid; gap:8px; }
.item-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px; border:1px solid var(--border); border-radius:12px;
  background:rgba(255,255,255,.02);
  transition: border-color .2s, background-color .2s;
}
.item-row.has-qty{ border-color:rgba(212,175,55,.5); background:rgba(212,175,55,.05); }
.item-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.item-name{ font-weight:700; }
.item-desc{ color:var(--muted); font-size:.85rem; }
.item-side{ display:flex; align-items:center; gap:14px; flex:0 0 auto; }
.item-price{ font-weight:800; color:var(--gold); white-space:nowrap; }

.qty-stepper{ display:flex; align-items:center; gap:8px; }
.qty-btn{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--border);
  background:rgba(255,255,255,.06); color:#fff; font-size:1.1rem; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition: background-color .2s, border-color .2s;
}
.qty-btn:hover{ border-color:var(--gold); color:var(--gold); }
.qty-value{ min-width:18px; text-align:center; font-weight:700; }

/* Checkout */
.checkout{
  margin-top:26px;
  background:var(--card); border:1px solid var(--border);
  border-radius:18px; padding:20px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.checkout h2{ margin:0 0 12px; }
.checkout-items{ display:grid; gap:6px; margin-bottom:10px; }
.checkout-line{
  display:flex; justify-content:space-between; gap:10px;
  padding:8px 0; border-bottom:1px dashed rgba(255,255,255,.1);
  font-size:.95rem;
}
.checkout-total{
  display:flex; justify-content:flex-end; gap:8px; font-size:1.1rem;
  padding:10px 0; border-top:1px solid var(--border); margin-bottom:16px;
}
.checkout-total strong{ color:var(--gold); }

#pedidoForm{ display:grid; gap:12px; max-width:480px; }
.input{
  width:100%; padding:12px 14px; border:1px solid rgba(255,255,255,.15);
  border-radius:10px; background:rgba(255,255,255,.03); color:#fff; outline:none;
  font-family:inherit; transition:.2s;
}
.input:focus{ border-color:rgba(212,175,55,.6); box-shadow:0 0 0 3px rgba(212,175,55,.15); }
.msg{ color:#ff8a8a; min-height:1.2em; margin:0; font-size:.9rem; }
.msg.success{ color:var(--gold); }
.msg a{ color:inherit; text-decoration:underline; }

/* Barra flotante del carrito */
.cart-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:rgba(10,10,10,.92); border-top:1px solid var(--border);
  backdrop-filter: blur(6px);
  box-shadow:0 -10px 30px rgba(0,0,0,.4);
}
.cart-bar-inner{
  max-width:1100px; margin:auto; padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.cart-bar-inner span{ font-weight:700; }

.foot{border-top:1px solid var(--border); padding:18px 0; background:#000}
.foot .wrap{max-width:1100px; margin:auto; padding:0 16px; color:var(--muted)}

@media (max-width:900px){
  .toc{ position:static; margin-bottom:12px; }
}
@media (max-width:560px){
  .item-row{ flex-wrap:wrap; }
  .item-side{ width:100%; justify-content:space-between; }
}

/* ===== BOTÓN FLOTANTE DE WHATSAPP ===== */
.whatsapp-float{
  position: fixed;
  right: 20px;
  bottom: 96px; /* por encima de la barra del carrito */
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  z-index: 60;
  transition: transform .2s ease, box-shadow .2s ease;
  animation: wa-pulse 2.5s ease-out infinite;
}
.whatsapp-float:hover{
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
}
.whatsapp-float svg{ width: 30px; height: 30px; fill: #fff; }
@keyframes wa-pulse{
  0%{ box-shadow: 0 6px 20px rgba(0,0,0,.35), 0 0 0 0 rgba(37,211,102,.5); }
  70%{ box-shadow: 0 6px 20px rgba(0,0,0,.35), 0 0 0 14px rgba(37,211,102,0); }
  100%{ box-shadow: 0 6px 20px rgba(0,0,0,.35), 0 0 0 0 rgba(37,211,102,0); }
}
@media (max-width: 600px){
  .whatsapp-float{ right: 14px; bottom: 88px; width: 50px; height: 50px; }
  .whatsapp-float svg{ width: 26px; height: 26px; }
}