/* Los Más Carbones — estilos del sitio público. Mobile-first, identidad fuego/carbón. */
:root{
  --carbon:#141210; --carbon2:#1f1a16; --carbon3:#2a231d;
  --fuego:#ff6a1f; --fuego-d:#e2551a; --brasa:#d62828; --oro:#f6b21b;
  /* Oscurecidos para TEXTO sobre fondo claro: el naranja/oro brillante mide
     ~2-3:1 ahí (falla el mínimo AA de 4.5:1). --oro-texto se usa solo en la
     sección de reseñas (fondo claro); --oro se conserva para fondos oscuros. */
  --oro-texto:#8f5f08;
  --crema:#f6efe4; --crema2:#efe6d6; --papel:#fffdf9;
  --texto:#26211c; --gris:#6f665b; --linea:#e6ddcd;
  --sombra:0 10px 30px rgba(20,18,16,.12);
  --radio:14px;
  --ancho:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--texto); background:var(--crema); line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--fuego-d)}
h1,h2,h3,h4{font-family:'Barlow Condensed',Impact,sans-serif; line-height:1.05; margin:0; text-transform:uppercase; letter-spacing:.5px}

.contenedor{width:100%; max-width:var(--ancho); margin:0 auto; padding:0 1.1rem}

/* ── Nav ──────────────────────────────────────────────── */
.demo-banner{background:#2b2620;color:#f2ece1;text-align:center;font-size:.85rem;
  line-height:1.4;padding:.4rem .9rem;letter-spacing:.01em}
@media (min-width:640px){.demo-banner{font-size:.92rem}}
.nav{position:sticky; top:0; z-index:50; background:rgba(20,18,16,.96); backdrop-filter:blur(6px); border-bottom:2px solid var(--carbon3)}
.nav-inner{max-width:var(--ancho); margin:0 auto; padding:.5rem 1.1rem; display:flex; align-items:center; gap:1rem}
.nav-marca{display:flex; align-items:center; gap:.55rem; text-decoration:none; color:var(--crema)}
.nav-emblema{width:42px; height:42px; display:block; flex:none}
.nav-emblema svg{width:100%; height:100%}
.nav-nombre{font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.05rem; line-height:.92; text-transform:uppercase; color:var(--crema)}
.nav-nombre b{color:var(--oro); font-weight:800; font-size:1.18rem}
.nav-links{display:none; margin-left:auto; gap:1.1rem}
.nav-links a{color:var(--crema); text-decoration:none; font-weight:600; font-size:.95rem; opacity:.85}
.nav-links a:hover{opacity:1; color:var(--oro)}
/* Antes background:var(--fuego) — blanco sobre naranja medía 2.86:1, bajo el
   mínimo AA. --brasa (ya en la paleta) da ~5:1 y se sigue leyendo "fuego". */
.nav-cta{margin-left:auto; background:var(--brasa); color:#fff; text-decoration:none; font-weight:700; padding:.5rem 1.1rem; border-radius:999px; font-size:.95rem; white-space:nowrap}
.nav-links + .nav-cta{margin-left:0}
.nav-cta:hover{background:#b31f1f}
@media(min-width:860px){ .nav-links{display:flex} }

/* ── Botones ──────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; gap:.5rem; font-weight:700; text-decoration:none; padding:.85rem 1.5rem; border-radius:999px; font-size:1.02rem; border:2px solid transparent; cursor:pointer; transition:transform .06s ease}
.btn:active{transform:scale(.97)}
.btn svg{width:20px;height:20px}
/* Antes #25a35a — blanco encima medía 3.25:1, bajo el mínimo AA de 4.5:1. */
.btn-wa{background:#16753d; color:#fff}
.btn-wa:hover{background:#125f32}
.btn-linea{background:transparent; border-color:currentColor; color:var(--carbon)}
.hero .btn-linea{color:var(--crema)}
.btn-linea:hover{background:rgba(0,0,0,.06)}

/* ── Hero ─────────────────────────────────────────────── */
.hero{background-size:cover; background-position:center; color:var(--crema); text-align:center}
.hero-inner{max-width:760px; margin:0 auto; padding:4.5rem 1.2rem 4rem}
.hero-kicker{color:var(--oro); font-weight:600; letter-spacing:1.5px; text-transform:uppercase; font-size:.82rem; margin:0 0 .8rem}
.hero-titulo{font-size:clamp(2.8rem,11vw,5rem); font-weight:800; color:#fff; text-shadow:0 3px 20px rgba(0,0,0,.5)}
.hero-sub{font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-size:clamp(1.1rem,4vw,1.5rem); color:var(--oro); margin:.4rem 0 1rem; letter-spacing:.5px}
.hero-texto{font-size:1.05rem; opacity:.94; max-width:560px; margin:0 auto 1.8rem}
.hero-ctas{display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center}

/* ── Secciones ────────────────────────────────────────── */
.seccion{padding:3.2rem 0}
.seccion:nth-of-type(even){background:var(--papel)}
.titulo{font-size:clamp(1.9rem,6vw,2.6rem); font-weight:800; color:var(--carbon); position:relative; display:inline-block}
.titulo::after{content:""; display:block; width:64px; height:5px; background:linear-gradient(90deg,var(--fuego),var(--oro)); border-radius:3px; margin-top:.5rem}
.intro{color:var(--gris); font-size:1.05rem; margin:.9rem 0 1.8rem; max-width:640px}

/* ── Menú ─────────────────────────────────────────────── */
.menu-cat{font-size:1.4rem; color:var(--brasa); margin:2rem 0 1rem; letter-spacing:1px}
.menu-cat::before{content:"🔥 "}
/* align-items:start: sin esto, las tarjetas sin foto (.sin-img) se estiraban
   a la altura de su vecina más alta con foto, dejando ~250-300px de espacio
   vacío que se leía como una imagen rota en vez de una decisión de diseño. */
.menu-grid{display:grid; grid-template-columns:1fr; gap:1rem; align-items:start}
@media(min-width:620px){ .menu-grid{grid-template-columns:1fr 1fr} }
@media(min-width:960px){ .menu-grid{grid-template-columns:1fr 1fr 1fr} }
.platillo{background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--sombra)}
.seccion:nth-of-type(even) .platillo{background:#fff}
.platillo-img{aspect-ratio:4/3; overflow:hidden; background:var(--crema2)}
.platillo-img img{width:100%; height:100%; object-fit:cover}
.platillo-txt{padding:.9rem 1rem 1.1rem}
.platillo h4{font-size:1.35rem; color:var(--carbon); margin-bottom:.25rem}
.platillo p{margin:0; color:var(--gris); font-size:.95rem}
.platillo.sin-img{border-left:5px solid var(--fuego)}
.menu-nota{margin-top:1.8rem; background:var(--carbon); color:var(--crema); padding:1rem 1.2rem; border-radius:var(--radio); font-weight:500}
.menu-nota a{color:var(--oro); font-weight:700; text-decoration:none; white-space:nowrap}

/* ── Taquizas ─────────────────────────────────────────── */
.taquizas{background:var(--carbon) !important; color:var(--crema)}
.taquizas .titulo{color:#fff}
.taquizas-grid{display:grid; grid-template-columns:1fr; gap:1.6rem; align-items:center}
@media(min-width:820px){ .taquizas-grid{grid-template-columns:1fr 1fr} }
.taquizas-img{border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra)}
.taquizas-img img{width:100%; aspect-ratio:4/3; object-fit:cover}
.taquizas-txt p{color:#e9dfce; font-size:1.06rem; margin:1rem 0 1.5rem}

/* ── Galería ──────────────────────────────────────────── */
.galeria-grid{display:grid; grid-template-columns:1fr 1fr; gap:.7rem}
@media(min-width:720px){ .galeria-grid{grid-template-columns:1fr 1fr 1fr} }
.gal-item{position:relative; margin:0; border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra)}
.gal-item img{width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform .4s ease}
.gal-item:hover img{transform:scale(1.05)}
.gal-item figcaption{position:absolute; left:0; right:0; bottom:0; background:linear-gradient(180deg,transparent,rgba(20,18,16,.85)); color:#fff; font-size:.85rem; font-weight:600; padding:1.4rem .7rem .6rem}

/* ── Reseñas ──────────────────────────────────────────── */
.resenas-grid{display:grid; grid-template-columns:1fr; gap:1rem}
@media(min-width:720px){ .resenas-grid{grid-template-columns:1fr 1fr} }
.resena{margin:0; background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio); padding:1.3rem 1.4rem; box-shadow:var(--sombra)}
.seccion:nth-of-type(even) .resena{background:#fff}
.estrellas{color:var(--oro-texto); font-size:1.1rem; letter-spacing:2px; margin-bottom:.5rem}
.resena p{margin:0 0 .8rem; font-size:1.02rem}
.resena cite{font-style:normal; font-weight:700; color:var(--carbon)}

/* ── Ubicación ────────────────────────────────────────── */
.ubicacion-grid{display:grid; grid-template-columns:1fr; gap:1.6rem}
@media(min-width:820px){ .ubicacion-grid{grid-template-columns:1fr 1fr} }
.ubicacion-info .dir{font-weight:600; margin:1rem 0}
.ubicacion-info .btn{margin-bottom:1.2rem}
.horario{width:100%; border-collapse:collapse; margin-top:.5rem}
.horario th,.horario td{text-align:left; padding:.5rem .3rem; border-bottom:1px solid var(--linea); font-weight:500}
.horario th{color:var(--carbon); font-weight:600}
.horario td{text-align:right; color:var(--gris)}
.horario tr.cerrado td{color:var(--brasa); font-weight:600}
.ubicacion-mapa{border-radius:var(--radio); overflow:hidden; min-height:300px; box-shadow:var(--sombra)}
.ubicacion-mapa iframe{display:block; width:100%; height:100%; min-height:300px}

/* ── Contacto ─────────────────────────────────────────── */
.contacto{background:var(--carbon2) !important; color:var(--crema); text-align:center}
.contacto .titulo{color:#fff}
.contacto .titulo::after{margin-left:auto;margin-right:auto}
.contacto-inner{display:flex; flex-direction:column; align-items:center}
.contacto .intro{color:#e9dfce; text-align:center}
.contacto-ctas{display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-bottom:1.5rem}
.contacto .btn-linea{color:var(--crema)}

/* ── Redes ────────────────────────────────────────────── */
.redes{display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center}
.red-ico{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:999px; border:1.5px solid rgba(255,255,255,.25); color:var(--crema); transition:.15s}
.red-ico:hover{background:var(--fuego); border-color:var(--fuego); color:#fff}
.redes-footer .red-ico{color:var(--crema)}

/* ── WhatsApp flotante ────────────────────────────────── */
.wa-float{position:fixed; right:16px; bottom:16px; z-index:60; display:inline-flex; align-items:center; gap:.5rem; background:#16753d; color:#fff; text-decoration:none; padding:.7rem .95rem; border-radius:999px; font-weight:700; box-shadow:0 8px 22px rgba(0,0,0,.3)}
.wa-float svg{width:26px; height:26px}
.wa-float span{display:none}
.wa-float:hover{background:#1e8c4c}
@media(min-width:560px){ .wa-float span{display:inline} }

/* ── Footer ───────────────────────────────────────────── */
.site-footer{background:var(--carbon); color:var(--crema); padding:2.2rem 1.1rem 2.6rem}
.footer-inner{max-width:var(--ancho); margin:0 auto; text-align:center; display:flex; flex-direction:column; gap:1.1rem; align-items:center}
.footer-credito{margin:0; font-size:.86rem; color:#c9bda9}
.footer-credito a{color:var(--oro); text-decoration:none}
.footer-credito a:hover{text-decoration:underline}
.footer-credito strong{color:var(--crema)}

/* padding para que el nav sticky no tape el ancla */
section[id]{scroll-margin-top:70px}

/* ── Video de la galería (sin autoplay, se carga solo si lo tocan) ───── */
.gal-video{margin:0 0 1.1rem; border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra); background:#000}
.gal-video video{display:block; width:100%; height:auto; max-height:70vh; background:#000}