*{margin:0;padding:0;box-sizing:border-box}
body{background:#121212;color:#eee;font-family:'Inter',sans-serif; overflow-x:hidden;}
h1,h2,h3{font-family:'Playfair Display',serif}

/* Menú - línea roja al estar activo */
.nav-link {
  position: relative;
  padding-bottom: 5px;
  text-decoration: none;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #ff0000; /* tu rojo */
  transition: width 0.3s;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/*.nav-link.active {
  color: #ff0000;
}*/

.logo{font-weight:800;letter-spacing:2px;font-size:22px;color:#fff}
.navbar nav{display:flex; flex-wrap:wrap; gap:4px; align-items:center;}
.navbar nav a{color:#aaa;text-decoration:none;margin:0 10px;font-weight:600;font-size:14px;position:relative;padding-bottom:4px}
.navbar nav a.active{color:#fff}
.navbar nav a.active::after{content:'';position:absolute;left:0;bottom:-8px;width:100%;height:3px;background:#E53935;border-radius:2px}

.btn-ordina,.btn-rosso,.btn-whatsapp{background:#E53935;color:white;border:none;border-radius:8px;font-weight:700;cursor:pointer;transition:0.2s}
.btn-ordina{padding:9px 18px;font-size:13px; white-space:nowrap;}
.btn-rosso.grande{padding:14px 28px;font-size:15px;margin-top:18px}
.btn-rosso:hover,.btn-ordina:hover,.btn-whatsapp:hover{background:#C62828;transform:translateY(-1px)}
.btn-whatsapp{width:100%;padding:14px;margin-top:14px;text-transform:uppercase;letter-spacing:0.5px}

.hero{display:flex;justify-content:space-between;align-items:center;padding:60px 5%;background:#121212; gap:30px;}
.hero-text{max-width:500px; flex:1;}
.badge{background:#1E1E1E;border:1px solid #333;padding:6px 12px;border-radius:20px;font-size:12px;color:#aaa; display:inline-block;}
.hero h1{font-size:56px;line-height:1.05;margin:18px 0}
.hero h1 span{color:#E53935}
.hero p{color:#999;line-height:1.6}
.hero-img{flex:1; display:flex; justify-content:center;}
.hero-img img{width:100%; max-width:480px; border-radius:20px;box-shadow:0 20px 40px rgba(0,0,0,0.6)}

.main-layout{display:grid;grid-template-columns:1fr 360px;gap:28px;padding:40px 5%;align-items:start}
.pizza-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.pizza-card{background:#1E1E1E;border:1px solid #2a2a2a;border-radius:16px;overflow:hidden;transition:0.2s}
.pizza-card:hover{border-color:#333;transform:translateY(-3px)}
.pizza-card img{width:100%;height:180px;object-fit:cover}
.pizza-card h3{padding:14px 16px 4px;font-size:18px}
.pizza-card p{padding:0 16px;color:#888;font-size:13px; min-height:32px;}
.card-footer{display:flex;justify-content:space-between;align-items:center;padding:14px 16px}
.prezzo{color:#E53935;font-weight:800;font-size:18px}
.btn-add{background:#2A2A2A;color:#fff;border:none;padding:7px 14px;border-radius:20px;font-weight:600;cursor:pointer}
.btn-add:hover{background:#E53935}

.carrello{background:#1E1E1E;border:1px solid #2a2a2a;border-radius:16px;padding:20px;position:sticky;top:80px}
.carrello h2{display:flex;justify-content:space-between;font-size:18px;margin-bottom:16px}
#carrito-count{background:#E53935;color:white;font-size:12px;padding:2px 8px;border-radius:10px}
.vuoto{color:#666;text-align:center;padding:20px 0;font-size:14px}
.totale-row{display:flex;justify-content:space-between;font-weight:800;font-size:18px;border-top:1px solid #2a2a2a;margin-top:16px;padding-top:14px}
.nota{font-size:11px;color:#666;text-align:center;margin-top:10px}

.sezione {padding:60px 5%;border-top:1px solid #1E1E1E}
.sezione h2{font-size:32px;margin-bottom:12px}
.sezione p{color:#999;max-width:600px;line-height:1.6}

/* --- FIX RESPONSIVE REAL --- */
@media(max-width:1024px){
 .main-layout{grid-template-columns:1fr 320px}
 .hero h1{font-size:42px}
}

@media(max-width:768px){
 .navbar{padding:12px 4%; gap:10px;}
 .navbar nav{order:3; width:100%; justify-content:space-between; margin-top:10px; padding-top:10px; border-top:1px solid #2a2a2a;}
 .navbar nav a{margin:0; font-size:13px;}
 .hero{flex-direction:column;text-align:center; padding:30px 5%;}
 .hero h1{font-size:32px;}
 .hero-img img{margin-top:10px;}
 .main-layout{grid-template-columns:1fr; padding:20px 4%; gap:20px;}
 .pizza-grid{grid-template-columns:1fr;}
 .carrello{position:static;}
 .sezione{padding:40px 4%;}
 .sezione h2{font-size:26px;}
}

@media(max-width:480px){
 .hero h1{font-size:28px;}
 .logo{font-size:18px;}
 .btn-ordina{padding:7px 12px; font-size:12px;}
}

/* BARRA DEMO - RESPONSIVE */
.barra-demo{
  background:#ff0000;color:white;text-align:center;
  padding:10px 12px;font-weight:bold;
  position:fixed;top:0;left:0;width:100%;z-index:10001;
  font-family:sans-serif; font-size:14px;
  display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap;
}
.barra-demo a{background:white;color:red;padding:6px 12px;border-radius:6px;text-decoration:none; font-size:13px; font-weight:800;}

.navbar{position:sticky; top:42px; z-index:100; background:#1A1A1A; border-bottom:1px solid #2a2a2a; display:flex; justify-content:space-between; align-items:center; padding:14px 5%; flex-wrap:wrap;}
/* ... resto igual que te pasé antes ... */
@media(max-width:768px){
 body{padding-top:68px;}
 .barra-demo{font-size:12px;}
 .navbar{top:68px;}
}