/* ===========================================================
   TORINOS PARRILLA — Hoja de estilos global
   Paleta: negro #0A0A0A, rojo #CC0000, dorado/acento #FFD700, blanco
   Tipografía: Anton / Bebas Neue (titulares), Work Sans (texto)
   =========================================================== */

:root{
  --negro: #0A0A0A;
  --negro-2: #171412;
  --rojo: #CC0000;
  --rojo-2: #8f0000;
  --acento: #FFD700;
  --acento-rgb: 255,215,0;
  --blanco: #FFFFFF;
  --gris-claro: #C9C4BC;
  --radio: 14px;
  --sombra: 0 10px 30px rgba(0,0,0,.35);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--negro);
  color: var(--blanco);
  font-family: 'Work Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }

h1,h2,h3,.titular{
  font-family: 'Anton', 'Bebas Neue', Impact, sans-serif;
  letter-spacing: .5px;
  text-transform: uppercase;
  line-height: 1.02;
  margin: 0;
}
.container{
  width:100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Barra de promo (arriba de todo) ---------- */
.promo-bar{
  background: var(--acento);
  color: var(--negro);
  text-align:center;
  font-weight:800;
  font-size: .85rem;
  padding: 9px 12px;
  letter-spacing:.2px;
}
.promo-bar strong{ text-decoration: underline; }

/* ---------- Header / Nav ---------- */
header.site-header{
  background: var(--negro);
  border-bottom: 3px solid var(--rojo);
  position: sticky;
  top:0;
  z-index: 50;
}
.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 20px;
  max-width: 1140px;
  margin:0 auto;
  gap: 16px;
}
.logo{
  font-family:'Anton','Bebas Neue',Impact,sans-serif;
  font-size: 1.5rem;
  letter-spacing: 1px;
  color: var(--blanco);
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}
.logo-img{
  height: 42px;
  width: 42px;
  border-radius: 50%;
  display:block;
}
.logo span{ color: var(--rojo); }
nav.main-nav{
  display:flex;
  align-items:center;
  gap: 20px;
  flex-wrap: nowrap;
  white-space:nowrap;
}
nav.main-nav a{
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  color: var(--gris-claro);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition:.15s;
}
nav.main-nav a:hover, nav.main-nav a.activo{
  color: var(--blanco);
  border-bottom-color: var(--acento);
}
.btn-nav-cta{
  background: var(--rojo) !important;
  color: var(--blanco) !important;
  padding: 10px 18px !important;
  border-radius: 999px;
  border-bottom: none !important;
  font-weight:800 !important;
  white-space:nowrap;
}
.btn-nav-cta:hover{ background: var(--rojo-2) !important; }

/* ---------- Dropdown "Cartas" en el nav de escritorio ---------- */
.nav-dropdown{ position:relative; }
.nav-dropdown summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:4px;
  font-size:.8rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  color: var(--gris-claro); padding:6px 2px; border-bottom:2px solid transparent;
  transition:.15s;
}
.nav-dropdown summary::-webkit-details-marker{ display:none; }
.nav-dropdown summary::after{ content:'▾'; font-size:.65em; margin-left:1px; }
.nav-dropdown[open] summary,
.nav-dropdown summary:hover,
.nav-dropdown summary.activo{
  color: var(--blanco); border-bottom-color: var(--acento);
}
.nav-dropdown .dropdown-menu{
  position:absolute; top:100%; left:0; margin-top:12px; background:var(--negro-2);
  border:1px solid #2a2622; border-radius:10px; padding:8px; min-width:200px;
  box-shadow:0 14px 30px rgba(0,0,0,.5); z-index:60;
}
.nav-dropdown .dropdown-menu a{
  display:block; padding:11px 12px; font-size:.78rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.4px; color:var(--gris-claro); border-radius:6px; border-bottom:none !important;
}
.nav-dropdown .dropdown-menu a:hover{ background:rgba(255,255,255,.06); color:var(--blanco); }

.menu-toggle{
  display:none;
  background:none;
  border: 2px solid var(--gris-claro);
  color: var(--blanco);
  border-radius:8px;
  padding:8px 10px;
  font-size:1.1rem;
  cursor:pointer;
  flex:none;
}

/* ---------- Menú móvil: panel deslizable ---------- */
.mobile-nav-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  z-index:90; opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.mobile-nav-backdrop.show{ opacity:1; pointer-events:auto; }
.mobile-nav-panel{
  position:fixed; top:0; right:0; bottom:0; width:78%; max-width:320px;
  background: var(--negro-2);
  z-index:100; transform:translateX(100%); transition:transform .25s ease;
  display:flex; flex-direction:column; padding:24px 22px calc(24px + env(safe-area-inset-bottom,0px));
  box-shadow:-8px 0 30px rgba(0,0,0,.5);
  overflow-y:auto; border-left:3px solid var(--acento);
}
.mobile-nav-panel.show{ transform:translateX(0); }
.mobile-nav-close{
  align-self:flex-end; background:none; border:0; color:var(--blanco);
  font-size:1.8rem; cursor:pointer; width:44px; height:44px; line-height:1; margin-bottom:6px;
}
.mobile-nav-panel a{
  display:block; font-family:'Anton','Bebas Neue',Impact,sans-serif;
  font-size:1.3rem; letter-spacing:.5px; text-transform:uppercase;
  color: var(--acento); padding:14px 4px; border-bottom:1px solid rgba(255,255,255,.1);
}
.mobile-nav-panel a:last-child{ border-bottom:none; }
.mobile-nav-panel a:active, .mobile-nav-panel a:hover{ color: var(--blanco); }
.mobile-nav-panel a.btn-nav-cta{
  margin-top:16px; text-align:center; color:var(--blanco) !important;
  font-family:'Anton','Bebas Neue',Impact,sans-serif; border-bottom:none !important;
}
@media (min-width:981px){ .mobile-nav-backdrop, .mobile-nav-panel{ display:none; } }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:1rem;
  padding: 15px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor:pointer;
  transition:.15s transform, .15s background;
}
.btn:active{ transform: scale(.97); }
.btn-primario{ background: var(--rojo); color:var(--blanco); }
.btn-primario:hover{ background: var(--rojo-2); }
.btn-acento{ background: var(--acento); color: var(--negro); }
.btn-acento:hover{ filter:brightness(.93); }
.btn-outline{ background:transparent; color:var(--blanco); border-color: var(--gris-claro); }
.btn-outline:hover{ border-color: var(--blanco); }
.btn-lg{ font-size:1.15rem; padding:19px 34px; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background:
    linear-gradient(180deg, rgba(10,10,10,.35) 0%, rgba(10,10,10,.92) 78%),
    radial-gradient(ellipse at top right, rgba(204,0,0,.35), transparent 55%),
    var(--negro);
  padding: 78px 0 64px;
  overflow:hidden;
  border-bottom: 4px solid var(--acento);
}
.hero .container{
  position:relative;
  z-index:2;
  text-align:center;
}
.hero .eyebrow{
  display:inline-block;
  background: var(--rojo);
  color:var(--blanco);
  font-weight:800;
  font-size:.78rem;
  letter-spacing:1px;
  text-transform:uppercase;
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.hero h1{
  font-size: clamp(2.6rem, 8vw, 5.2rem);
  color: var(--blanco);
}
.hero h1 .accent{ color: var(--acento); }
.hero p.sub{
  max-width: 640px;
  margin: 18px auto 0;
  color: var(--gris-claro);
  font-size: 1.08rem;
}
.hero .cta-row{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top: 34px;
}
.hero .whatsapp-numero{
  margin-top: 26px;
  font-family:'Anton','Bebas Neue',Impact,sans-serif;
  font-size: clamp(1.8rem, 6vw, 3.2rem);
  color: var(--blanco);
  letter-spacing: 3px;
}
.hero .whatsapp-numero small{
  display:block;
  font-family:'Inter',sans-serif;
  font-size: .8rem;
  letter-spacing:1px;
  text-transform:uppercase;
  color: var(--acento);
  font-weight:700;
  margin-bottom: 6px;
}

/* ---------- Bloques de franja horaria (Almuerzo / Noche) ---------- */
.franjas{ padding: 60px 0; background: var(--negro-2); }
.section-title{ text-align:center; margin-bottom: 40px; }
.section-title .kicker{
  display:block;
  color: var(--acento);
  font-weight:800;
  font-size:.8rem;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:10px;
}
.section-title h2{ font-size: clamp(1.8rem, 5vw, 2.8rem); }
.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.grid-3{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px;
}
.franja-card{
  background: var(--negro);
  border: 2px solid #262220;
  border-radius: var(--radio);
  padding: 30px 26px;
  transition:.2s border-color;
}
.franja-card:hover{ border-color: var(--rojo); }
.franja-card .badge{
  display:inline-block;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:999px;
  margin-bottom:16px;
}
.franja-card.dia .badge{ background: rgba(var(--acento-rgb),.15); color: var(--acento); }
.franja-card.noche .badge{ background: rgba(204,0,0,.2); color:#ff5c5c; }
.franja-card.barril{ border-color: var(--acento); }
.franja-card.barril .badge{ background: linear-gradient(120deg, var(--rojo), var(--acento)); color: var(--blanco); }
.franja-card h3{ font-size:1.6rem; margin-bottom:10px; }
.franja-card p{ color: var(--gris-claro); margin: 0 0 18px; font-size:.95rem; }
.franja-card .horario{ font-weight:700; color:var(--blanco); font-size:.9rem; margin-bottom:18px; }

/* ---------- Promo destacada ---------- */
.promo-destacada{
  background: linear-gradient(120deg, var(--rojo) 0%, var(--rojo-2) 100%);
  border-radius: var(--radio);
  padding: 34px 30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
  flex-wrap:wrap;
  box-shadow: var(--sombra);
}
.promo-destacada .txt .kicker{
  color: var(--acento);
  font-weight:800;
  font-size:.78rem;
  letter-spacing:1.5px;
  text-transform:uppercase;
  display:block;
  margin-bottom:8px;
}
.promo-destacada h3{ font-size: clamp(1.4rem,4vw,2rem); color:var(--blanco); }
.promo-destacada p{ color: #ffd7d7; margin:8px 0 0; }

/* ---------- Carta / Menú ---------- */
.carta-header{
  background: var(--negro-2);
  padding: 54px 0 34px;
  text-align:center;
  border-bottom: 3px solid var(--rojo);
}
.carta-header .kicker{
  color: var(--acento); font-weight:800; letter-spacing:2px;
  text-transform:uppercase; font-size:.8rem; display:block; margin-bottom:10px;
}
.carta-header h1{ font-size: clamp(2.2rem,6vw,3.6rem); }
.carta-header p{ color: var(--gris-claro); max-width:560px; margin: 14px auto 0; }

.tabs-carta{
  display:flex;
  justify-content:center;
  gap:12px;
  margin: 26px 0 8px;
  flex-wrap:wrap;
}
.tabs-carta a{
  padding:10px 20px;
  border-radius:999px;
  border:2px solid #333;
  font-weight:800;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.5px;
  color: var(--gris-claro);
}
.tabs-carta a.activo{ background: var(--acento); color:var(--negro); border-color:var(--acento); }
.tabs-carta a:hover:not(.activo){ border-color: var(--blanco); color:var(--blanco); }

.carta-cuerpo{ padding: 50px 0 80px; }
.categoria{ margin-bottom: 52px; }
.categoria h2{
  font-size: 1.6rem;
  color: var(--acento);
  border-bottom: 2px solid #262220;
  padding-bottom: 14px;
  margin-bottom: 22px;
}
.categoria .nota{
  font-size:.85rem;
  color: var(--gris-claro);
  font-family:'Inter',sans-serif;
  text-transform:none;
  font-weight:400;
  letter-spacing:0;
  display:block;
  margin-top:6px;
}
.plato{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px dashed #2a2622;
}
.plato:last-child{ border-bottom:none; }
.plato .nombre{ font-weight:700; font-size:1.02rem; }
.plato .desc{
  display:block;
  font-weight:400;
  color: var(--gris-claro);
  font-size:.86rem;
  margin-top:3px;
}
.plato .precio{
  font-family:'Anton','Bebas Neue',Impact,sans-serif;
  color: var(--acento);
  font-size:1.15rem;
  white-space:nowrap;
}
.combo-box{
  background: var(--negro-2);
  border: 2px dashed var(--acento);
  border-radius: var(--radio);
  padding: 20px 22px;
  margin-top: 20px;
  font-size:.92rem;
  color: var(--gris-claro);
}
.combo-box strong{ color: var(--acento); }

/* ---------- Promociones ---------- */
.promo-grid{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap: 20px;
  padding: 20px 0 70px;
}
.promo-card{
  background: var(--negro-2);
  border-radius: var(--radio);
  padding: 26px;
  border: 2px solid #262220;
  position:relative;
}
.promo-card .dia{
  display:inline-block;
  background: var(--acento);
  color: var(--negro);
  font-weight:800;
  font-size:.75rem;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius: 999px;
  margin-bottom:14px;
}
.promo-card h3{ font-size:1.35rem; margin-bottom:8px; }
.promo-card p{ color: var(--gris-claro); font-size:.92rem; margin:0 0 16px; }

/* ---------- Ubicación ---------- */
.ubicacion-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  padding: 50px 0 70px;
  align-items:start;
}
.info-card{
  background: var(--negro-2);
  border-radius: var(--radio);
  padding: 30px;
  border: 2px solid #262220;
}
.info-card h3{
  color: var(--acento);
  font-size:1.15rem;
  margin-bottom:14px;
  display:flex; align-items:center; gap:10px;
}
.info-card p, .info-card li{ color: var(--gris-claro); font-size:.95rem; }
.info-card ul{ list-style:none; padding:0; margin:0; }
.info-card li{ display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px dashed #2a2622; }
.info-card li:last-child{ border-bottom:none; }
.info-card li span:last-child{ color:var(--blanco); font-weight:700; }
.mapa-embed{
  width:100%;
  height: 340px;
  border-radius: var(--radio);
  border: 2px solid #262220;
  overflow:hidden;
}
.mapa-embed iframe{ width:100%; height:100%; border:0; }

/* ---------- Testimonios / confianza ---------- */
.confianza{ padding: 56px 0; background: var(--negro-2); border-top:1px solid #262220; border-bottom:1px solid #262220; }
.confianza-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:20px;
}
.confianza-item{ text-align:center; }
.confianza-item .num{
  font-family:'Anton','Bebas Neue',Impact,sans-serif;
  font-size: 2.4rem;
  color: var(--acento);
}
.confianza-item .label{ color: var(--gris-claro); font-size:.85rem; text-transform:uppercase; letter-spacing:.5px; margin-top:6px; }

/* ---------- Síguenos / Reseñas (paso de consideración del embudo) ---------- */
.social-follow{
  padding: 56px 0; text-align:center; background: var(--negro-2);
  border-top:1px solid #262220; border-bottom:1px solid #262220;
}
.social-follow p{ color: var(--gris-claro); max-width:520px; margin:8px auto 0; }
.social-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:24px; }
.social-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 24px; border-radius:999px; border:2px solid #333;
  font-weight:800; font-size:.85rem; text-transform:uppercase; letter-spacing:.5px;
  color: var(--blanco); background:var(--negro); transition:.15s;
}
.social-btn:hover{ border-color: var(--acento); color: var(--acento); }
.social-btn.google{ border-color: var(--acento); color: var(--acento); }
.social-btn.google:hover{ background: var(--acento); color: var(--negro); }

/* ---------- CTA final ---------- */
.cta-final{
  padding: 70px 0;
  text-align:center;
  background: radial-gradient(ellipse at center, rgba(204,0,0,.25), transparent 60%), var(--negro);
}
.cta-final h2{ font-size: clamp(2rem,6vw,3.2rem); margin-bottom:14px; }
.cta-final p{ color: var(--gris-claro); max-width:520px; margin: 0 auto 30px; }

/* ---------- Footer ---------- */
footer.site-footer{
  background: var(--negro);
  border-top: 3px solid var(--rojo);
  padding: 40px 0 26px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 26px;
  margin-bottom: 26px;
}
.footer-grid h4{
  color: var(--acento);
  font-size:.8rem;
  letter-spacing:1px;
  text-transform:uppercase;
  margin: 0 0 14px;
}
.footer-grid p, .footer-grid a{ color: var(--gris-claro); font-size:.9rem; }
.footer-grid ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.footer-grid a:hover{ color: var(--blanco); }
.footer-bottom{
  border-top: 1px solid #262220;
  padding-top: 18px;
  text-align:center;
  font-size:.78rem;
  color:#7a746c;
}

/* ---------- Botón flotante WhatsApp (sticky) ---------- */
.whats-float{
  position: fixed;
  bottom: 0; left:0; right:0;
  z-index: 60;
  background: var(--rojo);
  border-top: 3px solid var(--acento);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 14px 16px;
  font-weight:800;
  font-size: .95rem;
  text-transform:uppercase;
  letter-spacing:.5px;
  color: var(--blanco);
}
.whats-float:hover{ background: var(--rojo-2); }
body{ padding-bottom: 62px; } /* espacio para el botón flotante */

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  nav.main-nav{ display:none; }
  .menu-toggle{ display:inline-flex; align-items:center; }
  .grid-2, .grid-3, .promo-grid, .ubicacion-grid, .footer-grid{ grid-template-columns: 1fr; }
  .confianza-grid{ grid-template-columns: repeat(3,1fr); gap:10px; }
  .confianza-item .num{ font-size:1.7rem; }
  .carta-header h1{ font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .plato{ flex-wrap: wrap; }
  .plato .precio{ font-size:1.05rem; }
  .mapa-embed{ height: 260px; }
}
@media (max-width: 420px){
  .hero{ padding: 56px 0 44px; }
  .btn-lg{ font-size:1rem; padding:16px 24px; width:100%; }
  .hero .cta-row{ flex-direction:column; }
  .hero .cta-row .btn{ width:100%; }
}

/* ---------- Pop-up zona de domicilios ---------- */
.zona-modal{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.72); padding:20px;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.zona-modal.show{ opacity:1; pointer-events:auto; }
.zona-modal-box{
  background:var(--negro-2); border:1px solid #2a2622; border-radius:16px;
  max-width:400px; width:100%; padding:30px 26px; text-align:center;
  box-shadow:0 20px 50px rgba(0,0,0,.6);
  transform:translateY(10px); transition:transform .2s ease;
}
.zona-modal.show .zona-modal-box{ transform:translateY(0); }
.zona-modal-box .icono{ font-size:2.4rem; margin-bottom:10px; }
.zona-modal-box h3{
  font-family:'Anton','Bebas Neue',Impact,sans-serif; color:var(--blanco);
  font-size:1.3rem; letter-spacing:.3px; margin-bottom:10px; text-transform:uppercase;
}
.zona-modal-box p{ color:var(--gris-claro); font-size:.92rem; line-height:1.55; margin-bottom:22px; }
.zona-modal-box p strong{ color:var(--acento); }
.zona-modal-acciones{ display:flex; flex-direction:column; gap:10px; }
.zona-modal-acciones .btn{ width:100%; justify-content:center; }
.zona-cerrar-txt{
  background:none; border:0; color:var(--gris-claro); font-size:.82rem;
  text-decoration:underline; cursor:pointer; padding:6px;
}