/* =========================================================
   BlackBull Burguers — CSS ÚNICO (optimizado)
   ========================================================= */

/* =========================
   0) FUENTES PERSONALIZADAS
   ========================= */
@font-face {
  font-family: "BadaBoom Pro";
  src: url("../fonts/BadaBoom Pro BB.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* =========================
   1) TOKENS / DESIGN SYSTEM
   ========================= */
:root{
  --color-bg:#0B0B0B;
  --color-surface:#121212;
  --color-surface-2:#171717;
  --color-border:#262626;
  --color-text:#F2F2F2;
  --color-text-muted:#B3B3B3;
  --color-cheddar:#FFA726;
  --color-dorado:#C6862E;
  --color-cta:#C62828;
  --color-cta-hover:#D93434;
  --color-fresh:#2E7D32;

  --font-display:"BadaBoom Pro","Bebas Neue",system-ui,-apple-system,Sego UI,Roboto,sans-serif;
  --font-body:"BadaBoom Pro","Inter",system-ui,-apple-system,Sego UI,Roboto,sans-serif;
  --font-readable:"BadaBoom Pro","Inter",system-ui,-apple-system,Sego UI,Roboto,sans-serif;

  --fs-base:16px; --lh-base:1.6;

  --sp-8:8px; --sp-12:12px; --sp-16:16px; --sp-24:24px;
  --sp-32:32px; --sp-48:48px; --sp-72:72px;

  --container-max:1200px;
  --gutter-m:24px; --gutter-t:32px; --gutter-d:48px;

  --radius:16px; --radius-2:10px;
  --shadow-elevated:0 10px 30px rgba(0,0,0,.5);

  --dur-fast:.15s; --dur:.25s;
  --outline:3px solid rgba(198,40,40,.65);
}

/* Respeto motion */
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } }

/* =============
   2) BASE/RESET
   ============= */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; font-family:var(--font-body); font-size:var(--fs-base); line-height:var(--lh-base);
  background:var(--color-bg); color:var(--color-text);
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:2px; }
button{ font:inherit; cursor:pointer; }

h1,h2,h3{ 
  font-family:var(--font-display); letter-spacing:.5px; margin:0 0 var(--sp-16); 
  text-shadow: 0 0 3px #fff, 0 0 5px #fff, 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
  padding: 8px 12px 12px 12px;
  transform: translateY(-2px);
  background: #000000;
  border-radius: 6px;
  display: inline-block;
}
h1{ font-size:clamp(2.2rem,4vw,4rem); line-height:1.1; }
h2{ font-size:clamp(1.8rem,3vw,2.8rem); line-height:1.15; }
h3{ font-size:clamp(1.2rem,2vw,1.6rem); }

:focus-visible{ outline:var(--outline); outline-offset:2px; }
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{ position:static; width:auto; height:auto; padding:6px 10px; background:#000; }

.muted{ color:var(--color-text-muted); }

[data-surface]{
  background:linear-gradient(180deg,var(--color-surface),var(--color-surface-2));
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-elevated);
}
[data-elevated]{ box-shadow:var(--shadow-elevated); }

/* ==================
   3) LAYOUT GLOBAL
   ================== */
.container{ max-width:var(--container-max); margin-inline:auto; padding-inline:var(--gutter-m); }
@media (min-width:768px){ .container{ padding-inline:var(--gutter-t); } }
@media (min-width:1024px){ .container{ padding-inline:var(--gutter-d); } }

.section-px{ padding-inline:var(--gutter-m); }
.section-pt{ padding-top:clamp(var(--sp-32),6vw,var(--sp-72)); }
.section-pb{ padding-bottom:clamp(var(--sp-32),6vw,var(--sp-72)); }
@media (min-width:768px){ .section-px{ padding-inline:var(--gutter-t); } }
@media (min-width:1024px){ .section-px{ padding-inline:var(--gutter-d); } }

/* Header / Nav */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(11,11,11,.9); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--color-border); }
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; min-height:64px; gap:var(--sp-16); }
.brand{ display:flex; flex-direction:column; line-height:1; }
.brand__top{ font-family:var(--font-display); font-size:1.8rem; letter-spacing:1px; text-shadow:1px 1px 3px rgba(255,255,255,0.6); }
.brand__bottom{ font-family:var(--font-display); font-size:1.4rem; letter-spacing:3px; color:var(--color-text-muted); text-shadow:1px 1px 3px rgba(255,255,255,0.6); }

@media (min-width:1024px){ 
  .brand__top{ font-size:1.6rem; }
  .brand__bottom{ font-size:1.2rem; }
}

.brand--with-logo{ display:flex; align-items:center; gap:16px; }
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__img{ height:58px; width:auto; display:block; image-rendering:auto; }
@media (min-width:1024px){ .brand__img{ height:56px; } }

.nav-desktop{ display:none; }
.nav-list{ display:flex; gap:var(--sp-24); list-style:none; margin:0; padding:0; }
.nav-list a{ color:var(--color-text-muted); font-weight:600; }
.nav-list a:hover{ color:var(--color-text); text-decoration:none; }
.nav-cta{ display:none; }
.nav-toggle{ display:inline-flex; flex-direction:column; gap:4px; background:transparent; border:1px solid var(--color-border); padding:8px; border-radius:12px; }
.nav-toggle__bar{ width:22px; height:2px; background:var(--color-text); display:block; }
@media (min-width:1024px){ .nav-desktop{display:block;} .nav-cta{display:block;} .nav-toggle{display:none;} }

/* Menú móvil */
.nav-mobile{ border-top:1px solid var(--color-border); background:var(--color-surface); }
.nav-mobile ul{ list-style:none; margin:0; padding:var(--sp-16); display:grid; gap:var(--sp-16); }

/* Hero */
.hero__grid{ display:grid; align-items:center; gap:var(--sp-32); grid-template-columns:1fr; }
.hero__actions{ display:flex; gap:var(--sp-16); flex-wrap:wrap; margin-top:var(--sp-24); }
@media (min-width:1024px){ .hero__grid{ grid-template-columns:1.1fr .9fr; } }

/* Títulos específicos del hero */
.hero .display{
  font-size: clamp(1.6rem, 3vw, 3rem) !important;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.9), 1px 1px 8px rgba(0,0,0,0.6) !important;
  line-height: 1.2 !important;
  padding: 10px 16px 14px 16px !important;
  margin: 6px 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  vertical-align: middle !important;
  transform: translateY(-2px) !important;
  background: #000000 !important;
  border-radius: 8px !important;
}

/* Ajuste del contenedor del hero para mejor centrado */
.hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

/* Marco hero */
.hero__media{
  border:1px solid var(--color-border); border-radius:var(--radius); box-shadow:var(--shadow-elevated);
  overflow:hidden; aspect-ratio:4/3; max-height: clamp(260px,48vh,540px);
}
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.hero__media--contain img{ object-fit:contain; background:linear-gradient(180deg,var(--color-surface),var(--color-surface-2)); }
.hero__media--tight{ aspect-ratio:auto; max-height:none; }
.hero__media--tight img{ width:100%; height:auto; object-fit:contain; background:linear-gradient(180deg,var(--color-surface),var(--color-surface-2)); }

/* Splits / grids */
.split{ display:grid; gap:var(--sp-24); grid-template-columns:1fr; }
.about__card{ padding:var(--sp-24); }
@media (min-width:768px){ .split{ grid-template-columns:1.2fr .8fr; } }

.section-header{ margin-bottom:var(--sp-24); }
.menu-sections{ display:grid; gap:var(--sp-48); }

/* Grid general */
.grid{ display:grid; gap:var(--sp-24); grid-template-columns:1fr; }
@media (min-width:768px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .grid{ grid-template-columns:repeat(3,1fr); } }

/* Footer */
.site-footer{ border-top:1px solid var(--color-border); padding-block:var(--sp-24); color:var(--color-text-muted); }

/* CTA destacados */
.featured-cta{ margin-top:var(--sp-48); }

/* =================
   4) COMPONENTES UI
   ================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px; border-radius:var(--radius-2); border:1px solid transparent;
  font-family:var(--font-display); text-transform:uppercase; font-weight:700; letter-spacing:.5px;
  transition:transform var(--dur-fast) ease, background var(--dur-fast) ease, border-color var(--dur-fast) ease;
  will-change:transform; min-height:44px;
}
.btn:active{ transform:translateY(1px); }
.btn-lg{ padding:14px 20px; }
.btn-primary{ background:var(--color-cta); color:#fff; border-color:transparent; }
.btn-primary:hover{ background:var(--color-cta-hover); text-decoration:none; }
.btn-ghost{ background:rgba(255,255,255,.08); color:var(--color-text); border-color:var(--color-border); }
.btn-ghost:hover{ background:rgba(255,255,255,.15); text-decoration:none; }

/* Cards */
.card{ overflow:hidden; }
.card__media{ position:relative; border-bottom:1px solid var(--color-border); }
.ratio-4x3{ aspect-ratio:4/3; }
.card__img{ width:100%; height:100%; object-fit:contain; border-top-left-radius:var(--radius); border-top-right-radius:var(--radius); }
.card__img--cover{ object-fit:cover!important; }
.card__body{ padding:var(--sp-16); }
.card__title{ 
  font-family:var(--font-display); font-size:clamp(16px,2.5vw,20px); line-height:1.4; letter-spacing:.5px; 
  margin:0 0 6px; overflow-wrap:anywhere; 
  text-shadow: 0 0 3px #fff, 0 0 5px #fff, 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
  padding: 6px 10px 10px 10px;
  transform: translateY(-2px);
  background: #000000;
  border-radius: 6px;
  display: inline-block;
}
.card__desc{ font-family:var(--font-display); color:var(--color-text-muted); margin:0 0 var(--sp-12); font-size:clamp(14px,2vw,16px); line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.card__meta{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-12); }
.price{ 
  color:var(--color-cheddar); font-family:var(--font-display); font-size:1.35rem; letter-spacing:.5px; 
  text-shadow: 0 0 3px #fff, 0 0 5px #fff, 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
  padding: 4px 8px 8px 8px;
  transform: translateY(-2px);
  background: #000000;
  border-radius: 4px;
  display: inline-block;
}

/* Chips */
.chip{
  position:absolute; left:12px; top:12px; background:linear-gradient(180deg,var(--color-dorado),#8B5E1E);
  color:#0b0b0b; font-weight:800; text-transform:uppercase; font-size:.8rem;
  padding:4px 8px; border-radius:999px; border:1px solid rgba(0,0,0,.2);
}
.chip[data-variant="spicy"]{ background:linear-gradient(180deg,#ff7a59,#C62828); color:#fff; }
.chip[data-variant="fresh"]{ background:linear-gradient(180deg,#61d07d,var(--color-fresh)); color:#0b0b0b; }

/* Lightbox (base + pie con título/ingredientes) */
.lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.85); display:grid; place-items:center; padding:24px; z-index:1000; opacity:0; transition:opacity var(--dur) ease; }
.lightbox[hidden]{ display:none!important; pointer-events:none; opacity:0; }
.lightbox[aria-hidden="false"]{ opacity:1; }
.lightbox__figure{
  max-width:min(1100px,92vw); max-height:80vh; margin:0;
  background:linear-gradient(180deg,var(--color-surface),var(--color-surface-2));
  border:1px solid var(--color-border); border-radius:var(--radius); box-shadow:var(--shadow-elevated);
  overflow:hidden; display:flex; flex-direction:column; align-items:center;
}
.lightbox__img{ display:block; width:auto; height:auto; max-width:min(1100px,92vw); max-height:80vh; object-fit:contain; }
.lightbox__cap{ width:100%; padding:10px 14px; border-top:1px solid var(--color-border); display:grid; gap:4px; color:var(--color-text-muted); font-size:.95rem; }
.lightbox__cap-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(14px,2vw,16px); line-height:1.3; color:var(--color-text); text-shadow:1px 1px 3px rgba(255,255,255,0.6); }
.lightbox__cap-desc{ font-family:var(--font-display); font-size:clamp(14px,2vw,16px); line-height:1.5; color:var(--color-text-muted); }
.lightbox__close{ position:absolute; top:18px; right:18px; width:42px; height:42px; border-radius:999px; border:1px solid var(--color-border); background:#111; color:#fff; font-size:28px; display:grid; place-items:center; }
.lightbox__close:hover{ background:#181818; }

/* Mejor visibilidad del pie en móvil */
@media (max-width:767.98px){
  .lightbox__figure{ display:grid; grid-template-rows:1fr auto; max-width:94vw; max-height:88vh; }
  .lightbox__img{ width:100%; height:100%; max-width:94vw; max-height:none; object-fit:contain; }
  .lightbox__cap{ max-height:28vh; overflow:auto; -webkit-overflow-scrolling:touch; }
}
/* Pie visible en escritorio */
@media (min-width:768px){
  .lightbox__figure{ max-width:min(92vw,980px); max-height:90vh; }
  .lightbox__img{ width:100%; height:auto; max-height:75vh; object-fit:contain; }
  .lightbox__cap{ max-height:15vh; overflow:auto; }
}

/* ==========================
   5) PÁGINAS / SECCIONES
   ========================== */

/* Carta: listado sin imagen (Bebidas/Suplementos) */
.menu-list{
  display:grid; gap:var(--sp-16); padding:var(--sp-16);
  border:1px solid var(--color-border); border-radius:var(--radius);
  /* background eliminado para que no opaque los precios */
  box-shadow:var(--shadow-elevated);
}
.menu-list__item{ display:grid; grid-template-columns:1fr auto auto; align-items:baseline; gap:10px; }
.menu-list__info{ min-width:0; }
.menu-list__name{ margin:0; font-family:var(--font-display); letter-spacing:.5px; font-size:0.9rem; text-shadow: 0 0 3px #fff, 0 0 5px #fff, 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; }
.menu-list__desc{ font-family:var(--font-display); margin:4px 0 0; color:var(--color-text-muted); font-size:.9rem; }
.menu-list__price{ color:var(--color-cheddar); font-family:var(--font-display); letter-spacing:.5px; text-shadow: 0 0 3px #fff, 0 0 5px #fff, 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; }
.menu-list__dots{ width:100%; height:1px; border-bottom:1px dotted var(--color-border); margin-inline:8px; }

/* En móvil, nombre + precio en la misma fila; desc debajo */
@media (max-width:480px){
  .menu-list__item{ grid-template-columns:1fr auto; align-items:start; gap:8px; }
  .menu-list__dots{ display:none; }
  .menu-list__price{ white-space:nowrap; font-weight:800; }
  .menu-list__name{ overflow-wrap:anywhere; line-height:1.25; }
  .menu-list__desc{ margin-top:4px; color:var(--color-text-muted); }
}

/* Nosotros: textos e (ex) reels */
.about__text{ font-family:var(--font-display); color:var(--color-text-muted); max-width:70ch; }
.ig-embed{ position:relative; width:100%; max-width:720px; aspect-ratio:4/5; margin:0 auto; border-radius:var(--radius); box-shadow:var(--shadow-elevated); overflow:hidden; }
.ig-embed iframe,.ig-embed blockquote.instagram-media{ width:100%!important; min-width:0!important; margin:0!important; background:transparent; }

/* Nosotros — galería vertical SIN recorte (para fotos antiguas si se reusa) */
.about-gallery{ justify-items:start; align-items:start; gap:var(--sp-24); }
.about-gallery .story-media{ width:clamp(200px,28vw,340px); aspect-ratio:4/5; overflow:hidden; border-radius:var(--radius); background:transparent; }
.about-gallery .story-img{ width:100%; height:100%; object-fit:contain; object-position:center; cursor:zoom-in; }
@media (max-width:480px){ .about-gallery .story-media{ width:46vw; } }

/* Reservas */
.reservations{ display:grid; gap:var(--sp-24); }
@media (min-width:960px){ .reservations{ grid-template-columns:1.1fr .9fr; column-gap:var(--sp-24); } }
.reservations .stack{ display:grid; gap:var(--sp-24); }
.reservations .card,
.reservations .about__card{
  border-radius:16px; border:1px solid #262626; background:linear-gradient(180deg,#111 0%,#151515 100%); box-shadow:0 10px 24px rgba(0,0,0,.35);
  padding:clamp(14px,2.2vw,20px);
}
.form{ display:grid; gap:var(--sp-16); }
.form-grid{ display:grid; gap:var(--sp-16); grid-template-columns:1fr; }
.field{ display:grid; gap:6px; }
.field label{ font-weight:600; color:#ededed; font-size:.95rem; }
.field input,.field select,.field textarea{ width:100%; height:44px; background:#121212; border:1px solid #2a2a2a; border-radius:12px; padding:10px 12px; color:#f2f2f2; }
.field input::placeholder,.field textarea::placeholder{ color:#a3a3a3; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:var(--outline); border-color:#2a2a2a; }
.form-actions{ display:grid; gap:8px; margin-top:4px; }
.reservations .btn{ height:44px; border-radius:12px; }
.small{ font-size:.9rem; }
@media (min-width:768px){
  .form-grid{ grid-template-columns:repeat(3,1fr); }
  .form-grid .field:nth-child(1), .form-grid .field:nth-child(2){ grid-column:span 3; }
  .form-grid .field:nth-child(6){ grid-column:span 3; }
}

/* Mapa embebido (Contacto) */
.map-embed{ margin-top:var(--sp-16); border:1px solid var(--color-border); border-radius:var(--radius); overflow:hidden; height:320px; box-shadow:var(--shadow-elevated); }
.map-embed iframe{ width:100%; height:100%; border:0; display:block; }
.map-embed + .btn{ margin-top:var(--sp-24); display:inline-flex; justify-content:center; align-items:center; }

/* =================
   6) UTILIDADES
   ================= */
.display{ 
  font-family:var(--font-display); letter-spacing:1px; 
  text-shadow: 0 0 3px #fff, 0 0 5px #fff, 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
  padding: 8px 12px 12px 12px;
  transform: translateY(-2px);
  background: #000000;
  border-radius: 6px;
  display: inline-block;
}
.w-full{ width:100%; }
.hide-md{ display:none; }
@media (min-width:768px){ .hide-md{ display:inline; } }

.reveal{ opacity:1; transform:none; }
.js .reveal{ opacity:0; transform:translateY(12px); transition:opacity var(--dur) ease, transform var(--dur) ease; }
.js .reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .js .reveal{ opacity:1!important; transform:none!important; } }

/* Anti-overflow y safe areas extra */
img, video, iframe { max-width:100%; height:auto; }
@supports (padding: max(0px)) {
  body{ padding-left:max(0px, env(safe-area-inset-left)); padding-right:max(0px, env(safe-area-inset-right)); }
}

/* =========================================================
   MOBILE-FIRST · GRIDS DE PRODUCTO (auto-fit) + ajustes
   ========================================================= */

/* Gutter móvil algo menor para facilitar 2×160 + gap en 360px */
@media (max-width:399.98px){ .container{ padding-inline:16px; } .section-px{ padding-inline:16px; } }

/* Grids de productos (home destacados y carta) */
#featured-grid,
.menu-section > .grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:clamp(8px, 2vw, 16px);
}

/* Ultra-pequeños: 1 columna forzada */
@media (max-width:359.98px){
  #featured-grid, .menu-section > .grid{ grid-template-columns:1fr; }
}

/* Imagen vertical 4/5 en cards de producto */
#featured-grid .ratio-4x3, .menu-section > .grid .ratio-4x3{ aspect-ratio:4/5; }
/* En estos grids, se usa “cover” (a sangre) como estaba antes */
#featured-grid .card__img, .menu-section > .grid .card__img{ object-fit:cover; }

/* Destacados: centrar último huérfano en móvil */
#featured-grid{ justify-items:stretch; }
@media (max-width:767.98px){
  #featured-grid.grid > .card:last-child:nth-child(odd){
    grid-column:1/-1; justify-self:center; inline-size:calc((100% - var(--sp-16)) / 2);
  }
}

/* Tablet y Desktop: mantener 2 y 3 columnas como tenías */
@media (min-width:768px) and (max-width:1023.98px){
  .menu-section > .grid, #featured-grid.grid{ grid-template-columns:repeat(2,1fr)!important; }
}
@media (min-width:1024px){
  .menu-section > .grid, #featured-grid.grid{ grid-template-columns:repeat(3,1fr)!important; }
  .menu-section > .grid.is-single{ grid-template-columns:repeat(3,1fr); }
  .menu-section > .grid.is-single > .card{ grid-column:2/span 1; justify-self:center; }
}

/* ===== Nosotros — rejilla de logos (cuadrados + separación con footer) ===== */
.logos-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);  /* 2 columnas para 2 marcas */
  gap:clamp(16px, 3vw, 24px);
  margin-top:clamp(12px, 2vw, 16px);
  margin-bottom:clamp(32px, 6vw, 64px);
  max-width: 600px; /* Limitar ancho máximo para que no se vean muy separados */
  margin-left: auto;
  margin-right: auto;
}
/* En móvil, 1 columna para pantallas pequeñas */
@media (max-width: 480px){
  .logos-grid{
    grid-template-columns:1fr;
    max-width: 300px;
  }
}
.logo-card{
  display:grid; place-items:center;
  padding:clamp(12px, 2.5vw, 20px);
  aspect-ratio:1/1; border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 6px 18px rgba(0,0,0,.35);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.logo-card img{ width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; }
.logo-card:where(:hover, :focus-visible){ transform:translateY(-2px) scale(1.02); border-color:var(--color-cheddar); box-shadow:0 10px 24px rgba(0,0,0,.45); }

/* Nota de “Bebidas” oculta */
.menu-section > h2#bebidas + p.muted{ display:none; }

/* =============
   7) PRINT
   ============= */
@media print{
  @page{ margin:16mm; }
  *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  header,.hero,.about,.contact,footer,.nav-mobile{ display:none!important; }
  #menu{ padding:0; }
  .card{ break-inside:avoid; }
  .price{ color:#000; }
  body{ color:#000; background:#fff; font-size:12pt; }
}

@media (max-width: 767.98px){
  #featured-grid > .card:last-child:nth-child(odd){ display:none; }
}

/* =========================================================
   ANDROID+iOS — 2 productos por fila SIEMPRE en móvil
   ========================================================= */

/* Seguridad anti-overflow global sin alterar el layout real */
html, body { max-width: 100%; overflow-x: hidden; } /* solo por si algún WebView empuja 1px */

/* Ajuste de gutter en móviles ultra-estrechos (320 px) para que quepan 2 columnas */
@media (max-width: 359.98px){
  .section-px { padding-inline: 12px; }
  .container   { padding-inline: 12px; }
}

/* 2 columnas explícitas en móviles (todas las páginas con grid de productos) */
@media (max-width: 1023.98px){
  #featured-grid,
  .menu-section > .grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* sin min-width que rompa línea */
    gap: clamp(8px, 2vw, 16px);
  }
  /* Las cards nunca empujan el grid */
  #featured-grid .card,
  .menu-section > .grid .card{ min-width: 0; }
  /* Imágenes responsivas sin deformación */
  #featured-grid .card__img,
  .menu-section > .grid .card__img{ width: 100%; height: 100%; object-fit: cover; }
  /* Proporción vertical tipo “móvil” */
  #featured-grid .ratio-4x3,
  .menu-section > .grid .ratio-4x3{ aspect-ratio: 4/5; }
}

/* Fallback para WebView que no soporta aspect-ratio (evita fotos gigantes) */
@supports not (aspect-ratio: 1 / 1){
  #featured-grid .ratio-4x3,
  .menu-section > .grid .ratio-4x3{
    position: relative; height: 0; padding-top: 125%; overflow: hidden; /* 4:5 */
  }
  #featured-grid .ratio-4x3 > img,
  .menu-section > .grid .ratio-4x3 > img{
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  }
}

/* =========================================================
   FIT-TO-VIEWPORT (móvil) — todo en 1 pantalla
   ========================================================= */
/* El contenedor de escala lo crea JS; estas reglas solo lo afinan */
#page-fit-root{
  transform-origin: top left;
  will-change: transform;
  backface-visibility: hidden;
}

/* Lightbox móvil más grande */
@media (max-width: 767.98px){
  .lightbox{
    padding: clamp(12px, 4vw, 24px);
    z-index: 9999; /* aseguramos overlay por encima */
  }
  .lightbox__figure{
    width: min(92vw, 600px);
    max-width: 92vw;
  }
  .lightbox__img{
    width: 100%;
    height: auto;
    max-height: 70vh; /* ocupa más alto pero sin tapar */
    object-fit: cover;
    display: block;
  }
  .lightbox__cap{
    font-size: clamp(14px, 2.5vw, 16px);
    line-height: 1.45;
  }
}

/* =========================
   8) TEMA NEON (ROJO) & FONDO PNG
   ========================= */

body.theme-neon{
  /* Paleta noche */
  --color-bg:#07070a;
  --color-surface:#0e0e13;
  --color-surface-2:#13131b;
  --color-border:rgba(255,255,255,.08);
  --color-text:#F6F7FB;
  --color-text-muted:#AEB2C2;

  /* Botón primario */
  --color-cta:#C62828;
  --color-cta-hover:#D93434;

  /* Neón (sin cambios) */
  --neon-pink:#ff2d2d;
  --neon-cyan:#ff6b6b;
  --neon-lime:#c62828;
  --neon-amber:#ffea00;

  /* === Fondo: PNG directo (sin opacidad ni blend) === */
  --graffiti-img:url('/assets/img/backgrounds/background.png');
  --graffiti-opacity:1;          /* antes se atenuaba */
  --graffiti-blend:normal;       /* antes: soft-light */
  --graffiti-sat:1;              /* sin sobre-saturado */
  --graffiti-bright:1;           /* sin aclarar/oscurecer */

  /* Mostaza para textos/acentos de alto contraste */
  --neon-ink:#FFD54A;
  --neon-ink-2:#FFF07A;
  --neon-ink-rgb:255,213,74;
}


/* Fondo: mezcla del PNG + halos rojos suaves */
body.theme-neon{
  background:
    radial-gradient(1200px 800px at 10% 0%, rgba(255,45,45,.07), transparent 60%),
    radial-gradient(1000px 700px at 100% 100%, rgba(198,40,40,.06), transparent 55%),
    var(--color-bg);
  position:relative;
  overflow-x:hidden;
}
body.theme-neon::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    var(--graffiti-img) center/cover no-repeat,
    repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 2px, transparent 2px 8px);
  mix-blend-mode:var(--graffiti-blend);
  opacity:var(--graffiti-opacity);
  filter:saturate(var(--graffiti-sat)) brightness(var(--graffiti-bright)) contrast(1.02);
}
body.theme-neon::after{
  content:""; position:fixed; inset:-2px; z-index:-1; pointer-events:none;
  background:
    radial-gradient(600px 400px at 80% 20%, rgba(255,60,60,.07), transparent 60%),
    radial-gradient(700px 500px at 20% 90%, rgba(217,52,52,.05), transparent 55%);
}

/* Header con glow rojo */
.theme-neon .site-header{
  background:rgba(7,7,10,.85);
  border-bottom-color:rgba(255,255,255,.08);
  box-shadow:0 0 24px rgba(217,52,52,.40);
}
.theme-neon .nav-list a:hover{
  color:#fff; text-shadow:0 0 10px rgba(var(--neon-ink-rgb), .75);
}

/* Marca y titulares con brillo rojo */
.theme-neon .brand__top{ color:var(--neon-ink); letter-spacing:1.5px; }
.theme-neon .brand__bottom{ color:var(--neon-ink); letter-spacing:4px; }
.theme-neon .display,
.theme-neon .brand__top,
.theme-neon .brand__bottom{
  text-shadow:
    0 1px 2px rgba(0,0,0,.75),
    0 0 10px rgba(var(--neon-ink-rgb), .85),
    0 0 28px rgba(var(--neon-ink-rgb), .65),
    0 0 42px rgba(var(--neon-ink-rgb), .45);
  color: var(--neon-ink);
}

/* Subrayado spray en h2 */
.theme-neon .section-header .display{ position:relative; }
.theme-neon .section-header .display::after{
  content:""; position:absolute; left:0; bottom:-8px; width:140px; height:6px;
  background:linear-gradient(90deg, var(--neon-ink), var(--neon-ink-2));
  border-radius:6px;
  filter:blur(1px) drop-shadow(0 0 10px rgba(var(--neon-ink-rgb), .50)) drop-shadow(0 0 12px rgba(255, 234, 0, .45));
}

/* Superficies/cards con halo rojo */
.theme-neon [data-surface]{
  background:linear-gradient(180deg, rgba(20,20,28,.96), rgba(17,17,24,.94));
  border-color:rgba(255,255,255,.07);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.02),
    0 10px 30px rgba(0,0,0,.55),
    0 0 32px rgba(217,52,52,.25);
}
.theme-neon .card:hover,
.theme-neon .logo-card:hover{
  transform:translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05),
    0 8px 24px rgba(0,0,0,.45),
    0 0 18px rgba(255,45,45,.25);
}

/* Marcos de imágenes */
.theme-neon .card__media,
.theme-neon .hero__media{
  border-color:rgba(255,255,255,.08);
  box-shadow:0 0 18px rgba(217,52,52,.35);
}

/* Botones */
.theme-neon .btn-primary{
  background:var(--color-cta); border-color:rgba(217,52,52,.35);
  box-shadow:
    0 0 8px var(--neon-pink),
    0 0 24px rgba(217,52,52,.60),
    inset 0 0 12px rgba(255,255,255,.06);
}
.theme-neon .btn-primary:hover{
  box-shadow:
    0 0 12px var(--neon-pink),
    0 0 36px rgba(217,52,52,.75);
}
.theme-neon .btn-ghost{
  background:rgba(217,52,52,.12);
  border-color:rgba(217,52,52,.35);
  box-shadow:inset 0 0 8px rgba(217,52,52,.15);
}
.theme-neon .btn-ghost:hover{
  background:rgba(217,52,52,.20);
  box-shadow:inset 0 0 12px rgba(217,52,52,.25);
}

/* Lightbox con borde brillante rojo */
.theme-neon .lightbox__figure{
  box-shadow:
    0 10px 30px rgba(0,0,0,.60),
    0 0 24px rgba(217,52,52,.35);
  border-color:rgba(255,255,255,.08);
}

/* Ajuste móvil: baja un poco la fuerza del fondo para legibilidad */
@media (max-width:640px){
  body.theme-neon::before{ opacity:.60; }
}

/* ===== Header: botones más llamativos (neón) ===== */
.site-header .btn-primary.btn-cta{
  background: radial-gradient(120% 120% at 50% 0%, #ff4d4d 0%, #C62828 45%, #8e1717 100%);
  color:#fff;
  border-color: rgba(255,255,255,.08);
  text-shadow: 0 1px 0 rgba(0,0,0,.45);
  box-shadow:
    0 10px 30px rgba(198,40,40,.45),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 -2px 0 rgba(0,0,0,.35) inset;
  letter-spacing: .8px;
}
.site-header .btn-primary.btn-cta:hover{
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    0 14px 36px rgba(217,52,52,.60),
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 -2px 0 rgba(0,0,0,.35) inset;
  text-decoration: none;
}
@media (prefers-reduced-motion:no-preference){
  .btn--glow{ animation: bbPulse 2.2s ease-in-out infinite; }
  @keyframes bbPulse{
    0%,100%{ box-shadow: 0 0 0 rgba(198,40,40,0); }
    50%    { box-shadow: 0 0 28px rgba(217,52,52,.55); }
  }
}

/* Nav links: mayor presencia y subrayado reactivo */
.site-header .nav-list a{
  color:#EDEDED; font-weight:700; position:relative;
}
.site-header .nav-list a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:linear-gradient(90deg, transparent, #FFD54A, transparent);
  opacity:0; transform:scaleX(.6); transition:opacity .2s, transform .2s;
}
.site-header .nav-list a:hover::after,
.site-header .nav-list a[aria-current="page"]::after{
  opacity:1; transform:scaleX(1);
}

/* Nav toggle un pelín más vivo */
.nav-toggle:hover{ border-color:#C62828; box-shadow:0 0 0 2px rgba(198,40,40,.2) inset; }

/* ===== Popup de “BlackBull en CASA” ===== */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  padding:16px; z-index:1000; background:rgba(0,0,0,.8); backdrop-filter:blur(4px) saturate(120%);
}
.modal[open]{ display:flex; }
.modal__dialog{
  width:min(520px,96vw);
  background:linear-gradient(180deg,var(--color-surface),var(--color-surface-2));
  border:1px solid var(--color-border); border-radius:var(--radius); box-shadow:var(--shadow-elevated);
  padding:18px;
}
.modal__title{ font-family:var(--font-display); margin:0 0 6px; }
.modal__desc{ margin:0 0 14px; color:var(--color-text-muted); }
.modal__actions{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:480px){ .modal__actions{ grid-template-columns:1fr 1fr; } }
.modal__close{
  position:absolute; right:22px; top:18px; width:38px; height:38px; border-radius:999px;
  border:1px solid var(--color-border); background:#111; color:#fff; font-size:24px; display:grid; place-items:center;
}
.modal__close:hover{ background:#181818; }

/* ===== Modal centrado y oculto por defecto ===== */
.modal{
  position: fixed;
  inset: 0;
  display: none;                 /* ← oculto */
  place-items: center;           /* centrado */
  padding: 16px;
  z-index: 1000;
  background: rgba(0,0,0,.8);
  backdrop-filter: blur(4px) saturate(120%);
}
.modal[open]{ display: grid; }   /* ← solo visible cuando se abre */

.modal__dialog{
  position: relative;
  width: min(520px, 96vw);
  max-height: 90vh;
  overflow: auto;
  background: linear-gradient(180deg,var(--color-surface,#101010),var(--color-surface-2,#151515));
  border: 1px solid var(--color-border, #262626);
  border-radius: var(--radius, 16px);
  box-shadow: var(--shadow-elevated, 0 20px 50px rgba(0,0,0,.45));
  padding: 18px;
}
.modal__title{ margin:0 0 6px; font-family:var(--font-display,inherit); }
.modal__desc { margin:0 0 14px; color:var(--color-text-muted,#c9c9c9); }
.modal__actions{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:480px){ .modal__actions{ grid-template-columns:1fr 1fr; } }
.modal__close{
  position:absolute; right:22px; top:18px; width:38px; height:38px; border-radius:999px;
  border:1px solid var(--color-border,#262626); background:#111; color:#fff;
  font-size:24px; display:grid; place-items:center;
}
.modal__close:hover{ background:#181818; }

/* ===== Botones neón para plataformas ===== */
.btn--neon{
  border: 1px solid rgba(255,255,255,.08);
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
  letter-spacing: .3px;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn--neon:hover{ transform: translateY(-1px) scale(1.02); filter: brightness(0.80); }

/* Glovo: amarillo neón */
.btn--glovo{
  background: radial-gradient(120% 120% at 50% 0%, #ffe867 0%, #FFD300 45%, #b38f00 100%);
  color: #111;
  box-shadow:
    0 10px 30px rgba(255, 211, 0, .45),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 -2px 0 rgba(0,0,0,.35) inset;
}
@media (prefers-reduced-motion:no-preference){
  .btn--glovo{ animation: glowG 2.4s ease-in-out infinite; }
  @keyframes glowG{ 0%,100%{ box-shadow:0 0 0 rgba(255,211,0,0);} 50%{ box-shadow:0 0 28px rgba(255,211,0,.6);} }
}

/* Uber Eats: verde neón */
.btn--uber{
  background: radial-gradient(120% 120% at 50% 0%, #7ff7b7 0%, #00E676 45%, #008a4f 100%);
  color: #071b0f;
  box-shadow:
    0 10px 30px rgba(0, 230, 118, .45),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 -2px 0 rgba(0,0,0,.35) inset;
}
@media (prefers-reduced-motion:no-preference){
  .btn--uber{ animation: glowU 2.4s ease-in-out infinite; }
  @keyframes glowU{ 0%,100%{ box-shadow:0 0 0 rgba(0,230,118,0);} 50%{ box-shadow:0 0 28px rgba(0,230,118,.6);} }
}

/* ===== Modal centrado y oculto por defecto ===== */
.modal{
  position: fixed;
  inset: 0;
  display: none;                 /* oculto hasta [open] */
  place-items: center;           /* centro exacto */
  padding: 16px;
  z-index: 1000;
  background: rgba(0,0,0,.8);
  backdrop-filter: blur(4px) saturate(120%);
}
.modal[open]{ display: grid; }

.modal__dialog{
  position: relative;
  width: min(520px, 96vw);
  max-height: 90vh;
  overflow: auto;
  background: linear-gradient(180deg,var(--color-surface,#121212),var(--color-surface-2,#171717));
  border: 1px solid var(--color-border,#262626);
  border-radius: var(--radius,16px);
  box-shadow: var(--shadow-elevated,0 20px 50px rgba(0,0,0,.45));
  padding: 18px;
}
.modal__title{ margin:0 0 6px; font-family:var(--font-display,inherit); }
.modal__desc { margin:0 0 14px; color:var(--color-text-muted,#c9c9c9); }
.modal__actions{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:480px){ .modal__actions{ grid-template-columns:1fr 1fr; } }
.modal__close{
  position:absolute; right:22px; top:18px; width:38px; height:38px; border-radius:999px;
  border:1px solid var(--color-border,#262626); background:#111; color:#fff;
  font-size:24px; display:grid; place-items:center;
}
.modal__close:hover{ background:#181818; }

/* ===== Botones neón Glovo / Uber (con más especificidad) ===== */
.btn.btn--neon{
  border: 1px solid rgba(255,255,255,.08);
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
  letter-spacing: .3px;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
  min-height: 44px;
}
.btn.btn--neon:hover{ transform: translateY(-1px) scale(1.02); filter: brightness(1.01); }

.btn.btn--glovo{
  background: radial-gradient(120% 120% at 50% 0%, #ffe867 0%, #FFD300 45%, #b38f00 100%);
  color: #111;
  box-shadow: 0 10px 30px rgba(255,211,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset, 0 -2px 0 rgba(0,0,0,.35) inset;
}
@media (prefers-reduced-motion:no-preference){
  .btn.btn--glovo{ animation: glowG 2.4s ease-in-out infinite; }
  @keyframes glowG{ 0%,100%{ box-shadow:0 0 0 rgba(255,211,0,0);} 50%{ box-shadow:0 0 28px rgba(255,211,0,.6);} }
}

.btn.btn--uber{
  background: radial-gradient(120% 120% at 50% 0%, #7ff7b7 0%, #00E676 45%, #008a4f 100%);
  color: #071b0f;
  box-shadow: 0 10px 30px rgba(0,230,118,.45), 0 0 0 1px rgba(255,255,255,.06) inset, 0 -2px 0 rgba(0,0,0,.35) inset;
}
@media (prefers-reduced-motion:no-preference){
  .btn.btn--uber{ animation: glowU 2.4s ease-in-out infinite; }
  @keyframes glowU{ 0%,100%{ box-shadow:0 0 0 rgba(0,230,118,0);} 50%{ box-shadow:0 0 28px rgba(0,230,118,.6);} }
}

/* ==== MODAL: corrección desktop (centrado real) ==== */
/* Oculto por defecto */
.modal{
  position: fixed;
  inset: 0;
  display: none;
  padding: 16px;
  z-index: 10000; /* por encima del header */
  background: rgba(0,0,0,.8);
  backdrop-filter: blur(4px) saturate(120%);
}
/* Abierto: forzamos Grid para evitar que alguna regla lo convierta en flex */
.modal[open]{ display: grid !important; place-items: center; }

/* Caja del modal */
.modal__dialog{
  position: relative;
  width: min(520px, 96vw);
  max-height: 90vh;
  overflow: auto;
  background: linear-gradient(180deg,var(--color-surface,#121212),var(--color-surface-2,#171717));
  border: 1px solid var(--color-border,#262626);
  border-radius: var(--radius,16px);
  box-shadow: var(--shadow-elevated,0 20px 50px rgba(0,0,0,.45));
  padding: 18px;
}

/* En DESKTOP centramos por posición absoluta para mayor robustez */
@media (min-width: 992px){
  .modal[open]{ display: block !important; } /* overlay ocupa toda la pantalla */
  .modal__dialog{
    position: fixed;       /* relativo a la ventana, no al overlay */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* centro exacto */
    margin: 0;             /* evita empujes */
    width: min(560px, 92vw);
    max-height: 85vh;
  }
}

/* ---- Botones neón (nos aseguramos que NO los pise .btn-primary) ---- */
.btn.btn--neon{
  border: 1px solid rgba(255,255,255,.08);
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
  letter-spacing: .3px;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
  min-height: 44px;
}
.btn.btn--neon:hover{ transform: translateY(-1px) scale(1.02); filter: brightness(1.01); }

.btn.btn--glovo{
  background: radial-gradient(120% 120% at 50% 0%, #ffe867 0%, #FFD300 45%, #b38f00 100%);
  color: #111;
  box-shadow: 0 10px 30px rgba(255,211,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset, 0 -2px 0 rgba(0,0,0,.35) inset;
}
@media (prefers-reduced-motion:no-preference){
  .btn.btn--glovo{ animation: glowG 2.4s ease-in-out infinite; }
  @keyframes glowG{ 0%,100%{ box-shadow:0 0 0 rgba(255,211,0,0);} 50%{ box-shadow:0 0 28px rgba(255,211,0,.6);} }
}

.btn.btn--uber{
  background: radial-gradient(120% 120% at 50% 0%, #7ff7b7 0%, #00E676 45%, #008a4f 100%);
  color: #071b0f;
  box-shadow: 0 10px 30px rgba(0,230,118,.45), 0 0 0 1px rgba(255,255,255,.06) inset, 0 -2px 0 rgba(0,0,0,.35) inset;
}
@media (prefers-reduced-motion:no-preference){
  .btn.btn--uber{ animation: glowU 2.4s ease-in-out infinite; }
  @keyframes glowU{ 0%,100%{ box-shadow:0 0 0 rgba(0,230,118,0);} 50%{ box-shadow:0 0 28px rgba(0,230,118,.6);} }
}

/* ====== 1) MODAL: centrado robusto en desktop/móvil ====== */
.modal{
  position: fixed;
  inset: 0;
  display: none;                 /* oculto por defecto */
  padding: 16px;
  z-index: 10000;
  background: rgba(0,0,0,.8);
  backdrop-filter: blur(4px) saturate(120%);
}
/* Al abrir, forzamos Grid + centrado absoluto, evitando conflictos */
.modal[open]{ 
  display: grid !important; 
  place-items: center !important; 
}
.modal__dialog{
  position: relative !important; /* anulamos cualquier fixed anterior */
  top: auto !important; 
  left: auto !important; 
  transform: none !important; 
  margin: 0;
  width: min(560px, 96vw);
  max-height: 85vh;
  overflow: auto;
  background: linear-gradient(180deg,var(--color-surface,#121212),var(--color-surface-2,#171717));
  border: 1px solid var(--color-border,#262626);
  border-radius: var(--radius,16px);
  box-shadow: var(--shadow-elevated,0 20px 50px rgba(0,0,0,.45));
  padding: 18px;
}

/* ====== 2) CTA del header en ROJO en todas las páginas ====== */
/* Nota: en tus páginas el CTA de escritorio tiene clases "btn btn-cta btn--glow js-delivery-cta"
   (no incluye .btn-primary), por eso salía negro. Lo forzamos aquí a rojo neón.  */
.site-header .nav-cta .btn-cta{
  background: radial-gradient(120% 120% at 50% 0%, #ff4d4d 0%, #C62828 45%, #8e1717 100%);
  color:#fff;
  border-color: rgba(255,255,255,.06);
  text-shadow: 0 1px 0 rgba(0,0,0,.45);
  box-shadow:
    0 10px 30px rgba(198,40,40,.45),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 -2px 0 rgba(0,0,0,.35) inset;
  letter-spacing: .8px;
}
.site-header .nav-cta .btn-cta:hover{
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    0 14px 36px rgba(217,52,52,.60),
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 -2px 0 rgba(0,0,0,.35) inset;
  text-decoration: none;
}
/* Pulso suave rojo si el botón ya lleva la clase btn--glow */
@media (prefers-reduced-motion:no-preference){
  .site-header .nav-cta .btn-cta.btn--glow{ animation: bbPulse 2.2s ease-in-out infinite; }
  @keyframes bbPulse{
    0%,100%{ box-shadow: 0 0 0 rgba(198,40,40,0); }
    50%    { box-shadow: 0 0 28px rgba(217,52,52,.55); }
  }
}

/* ====== 3) Glovo/Uber del pop-up siguen en amarillo/verde neón ====== */
.btn.btn--neon{ border:1px solid rgba(255,255,255,.08); text-shadow:0 1px 0 rgba(0,0,0,.35); letter-spacing:.3px; transition:transform .15s, box-shadow .2s, filter .2s; min-height:44px; }
.btn.btn--neon:hover{ transform:translateY(-1px) scale(1.02); filter:brightness(1.01); }
.btn.btn--glovo{
  background: radial-gradient(120% 120% at 50% 0%, #ffe867 0%, #FFD300 45%, #b38f00 100%);
  color:#111;
  box-shadow: 0 10px 30px rgba(255,211,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset, 0 -2px 0 rgba(0,0,0,.35) inset;
}
.btn.btn--uber{
  background: radial-gradient(120% 120% at 50% 0%, #7ff7b7 0%, #00E676 45%, #008a4f 100%);
  color:#071b0f;
  box-shadow: 0 10px 30px rgba(0,230,118,.45), 0 0 0 1px rgba(255,255,255,.06) inset, 0 -2px 0 rgba(0,0,0,.35) inset;
}

/* Borde de enfoque visible cuando el modal recibe el foco */
.modal__dialog:focus { outline: 2px solid rgba(255,255,255,.25); outline-offset: 2px; }

/* ===== Redes sociales (Nosotros) ===== */
.social-section{ padding: 32px 0; }
.social-section .section-title{ margin: 0 0 8px; }
.social-section .section-lead{ font-family:var(--font-display); margin: 0 0 20px; color: var(--color-text-muted,#c9c9c9); }

.social-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 640px){
  .social-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.social-card{
  display:flex; align-items:center; gap:12px;
  padding: 14px 16px;
  border-radius: var(--radius,16px);
  color:#fff; text-decoration:none;
  border:1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, #141414, #101010);
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .25s ease, filter .25s ease;
  min-height: 56px;
}
.social-card .ico{ display:grid; place-items:center; width:44px; height:44px; border-radius:12px; color:#fff; }
.social-card .label{ font-weight:700; letter-spacing:.2px; }

.social-card:hover{
  transform: translateY(-1px) scale(1.02);
  filter: brightness(1.01);
}

/* Instagram: gradiente clásico + glow */
.social-card.ig{
  background: radial-gradient(120% 120% at 0% 0%, #f58529 0%, #dd2a7b 40%, #8134af 70%, #515bd4 100%);
  box-shadow: 0 12px 34px rgba(221,42,123,.45);
}
.social-card.ig .ico{ background: rgba(255,255,255,.12); }

/* TikTok: aqua + fucsia con brillo */
.social-card.tt{
  background: radial-gradient(120% 120% at 100% 0%, #69C9D0 0%, #111 45%, #EE1D52 100%);
  box-shadow: 0 12px 34px rgba(238,29,82,.45), 0 6px 18px rgba(105,201,208,.25);
}
.social-card.tt .ico{ background: rgba(255,255,255,.12); }

/* ===== Redes Sociales: look BlackBull (oscuro + rojo neón) ===== */
.social-section{ padding: 32px 0; }
.social-section .section-title{ margin: 0 0 8px; }
.social-section .section-lead{ margin: 0 0 20px; color: var(--color-text-muted,#c9c9c9); }

.social-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 640px){
  .social-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Base on-brand */
.social-section .social-card{
  --accent: #D93434;                 /* rojo BlackBull */
  position: relative;
  display:flex; align-items:center; gap:16px;  /* Aumentado gap */
  padding: 20px 24px;                          /* Aumentado padding */
  min-height: 72px;                            /* Aumentado altura mínima */
  border-radius: var(--radius,16px);
  color:#fff; text-decoration:none;
  border:1px solid rgba(255,255,255,.06);
  background: #000000;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .25s ease, filter .25s ease;
}

/* Barrita de acento izquierda */
.social-section .social-card::before{
  content:"";
  position:absolute; left:-1px; top:-1px; bottom:-1px; width:6px;
  border-radius: 16px 0 0 16px;
  background: linear-gradient(180deg, rgba(217,52,52,.95), rgba(217,52,52,.55));
  box-shadow: 0 0 20px rgba(217,52,52,.45);
}

/* Glow al hover/focus */
.social-section .social-card:hover,
.social-section .social-card:focus-visible{
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 14px 36px rgba(217,52,52,.45), 0 10px 28px rgba(0,0,0,.25);
  filter: brightness(1.03);
  outline: none;
}

/* Icono en cápsula con tinte rojo suave */
.social-section .social-card .ico{
  display:grid; place-items:center;
  width:56px; height:56px; border-radius:14px;  /* Aumentado tamaño del icono */
  color:#fff;
  background: linear-gradient(180deg, rgba(217,52,52,.22), rgba(217,52,52,.10));
  box-shadow: 0 0 0 1px rgba(217,52,52,.30) inset;
}
.social-section .social-card .ico svg{
  width: 32px; height: 32px;  /* SVG más grande */
}
.social-section .social-card .label{ 
  font-weight:700; 
  letter-spacing:.2px; 
  font-size: 1.1rem;  /* Aumentado tamaño de fuente */
}

/* Específicos por red (mantenemos el mismo rojo para cohesión del sitio) */
.social-section .social-card.ig{ --accent:#D93434; }
.social-section .social-card.tt{ --accent:#D93434; }

/* (Opcional) Pulso muy sutil si quieres vida extra */
@media (prefers-reduced-motion:no-preference){
  .social-section .social-card{
    animation: bbSocialPulse 3s ease-in-out infinite;
  }
  @keyframes bbSocialPulse{
    0%,100%{ box-shadow: 0 10px 28px rgba(0,0,0,.25); }
    50%{ box-shadow: 0 14px 36px rgba(217,52,52,.28), 0 10px 28px rgba(0,0,0,.25); }
  }
}

/* Aseguramos contraste en alto brillo */
@media (prefers-contrast: more){
  .social-section .social-card{ border-color: rgba(255,255,255,.18); }
  .social-section .social-card .ico{ box-shadow: 0 0 0 1px rgba(217,52,52,.45) inset; }
}

/* Alineación y ritmos de la sección de redes */
.social-section{ margin-top: var(--sp-24); }
.social-section .section-title{ margin-bottom: 8px; }
.social-section .section-lead{ margin-bottom: 14px; }

/* Reservas: resaltar sólo el número de teléfono */
.callout-phone .call-number{
  font-weight: 800;                 /* negrita */
  font-size: clamp(20px, 3.2vw, 28px); /* un poco más grande, responsivo */
  letter-spacing: .5px;             /* leve separación para legibilidad */
}
/* Mantener el PNG 100% opaco también en móvil */
@media (max-width:640px){
  body.theme-neon::before{ opacity:1 !important; }
}


/* === Overrides para mejorar contraste: botones mostaza/negro (solo en theme-neon) === */
.theme-neon .btn-primary{
  background: radial-gradient(120% 120% at 50% 0%, #ffe867 0%, #FFD54A 45%, #8f6a00 100%);
  color:#0b0b0b;
  border-color: rgba(255,213,74,.35);
  box-shadow:
    0 0 8px rgba(255,213,74,.75),
    0 0 24px rgba(255,213,74,.55),
    inset 0 0 12px rgba(255,255,255,.06);
}
.theme-neon .btn-primary:hover{
  background: radial-gradient(120% 120% at 50% 0%, #fff07a 0%, #FFD54A 45%, #7a5a00 100%);
  box-shadow:
    0 0 12px rgba(255,213,74,.85),
    0 0 36px rgba(255,213,74,.65);
  text-decoration: none;
}
.theme-neon .btn-ghost{
  color:#fff;
  border-color: rgba(255,213,74,.45);
  box-shadow: inset 0 0 8px rgba(255,213,74,.12);
}
.theme-neon .btn-ghost:hover{
  background: rgba(255,213,74,.10);
  box-shadow: inset 0 0 12px rgba(255,213,74,.22);
}

/* CTA del header en mostaza */
.site-header .btn-primary.btn-cta,
.site-header .nav-cta .btn-cta{
  background: radial-gradient(120% 120% at 50% 0%, #fff07a 0%, #FFD54A 45%, #8f6a00 100%);
  color:#0b0b0b;
  border-color: rgba(255,213,74,.35);
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
  box-shadow:
    0 10px 30px rgba(255,213,74,.45),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 -2px 0 rgba(0,0,0,.35) inset;
  letter-spacing: .8px;
}
.site-header .btn-primary.btn-cta:hover,
.site-header .nav-cta .btn-cta:hover{
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    0 14px 36px rgba(255,213,74,.60),
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 -2px 0 rgba(0,0,0,.35) inset;
  text-decoration: none;
}


/* Legibilidad extra en títulos dentro de tarjetas/banners oscuros */
.theme-neon .card__title,
.theme-neon h1, .theme-neon h2, .theme-neon h3{
  text-shadow: 0 1px 1px rgba(0,0,0,.85);
}

/* =========================================================
   MODE: NO-NEON — Mustard text + black shadow-panels
   Non-disruptive override: no cambia layout ni el fondo.
   Cargar DESPUÉS de css/site.css
   ========================================================= */

/* Tokens */
:root{
  --mustard:#FFD54A;
  --ink:#111111;
  --panel:rgba(0,0,0,.85);
  --panel-soft:rgba(0,0,0,.65);
}

/* 1) Desactivar brillos neón y usar mostaza */
.theme-neon .brand__top,
.theme-neon .brand__bottom,
.theme-neon .display,
.theme-neon h1, .theme-neon h2, .theme-neon h3{
  color:var(--mustard);
  text-shadow: 0 2px 0 #000, 0 0 8px rgba(0,0,0,.55);
  -webkit-text-stroke: 0 transparent;
}

/* Quitar spray/halo previo bajo títulos si existía */
.theme-neon .section-header .display::after{ display:none; }

/* 2) Panel negro detrás de los titulares (no afecta al flujo) */
.theme-neon .display,
.theme-neon h1, .theme-neon h2, .theme-neon h3{
  position:relative; z-index:0;
}
.theme-neon .display::before,
.theme-neon h1::before, .theme-neon h2::before, .theme-neon h3::before{
  content:""; position:absolute; inset:-10px -14px; z-index:-1;
  background:var(--panel); border-radius:10px;
  box-shadow: 0 14px 36px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.04);
}

/* 3) Copys: claros y con sombra negra sutil */
.theme-neon p, .theme-neon li, .theme-neon small{
  color:#F2E7BE;
  text-shadow: 0 1px 0 rgba(0,0,0,.7);
}
/* Si quieres TODO el texto en mostaza, descomenta: */
/* .theme-neon p, .theme-neon li, .theme-neon small{ color:var(--mustard); } */

/* 4) Botones en negro con texto mostaza (sin cambiar tamaños) */
.theme-neon .btn-primary, .site-header .btn-cta{
  background: #111; color: var(--mustard);
  border:1px solid rgba(255,213,74,.45);
  box-shadow: 0 10px 22px rgba(0,0,0,.6), 0 0 10px rgba(0,0,0,.35);
  text-shadow: 0 1px 0 rgba(0,0,0,.8);
}
.theme-neon .btn-primary:hover, .site-header .btn-cta:hover{
  filter:brightness(1.01);
  transform: translateY(-1px);
}

/* 5) Cards un poco más oscuras para que mande el texto */
.theme-neon [data-surface], .card{
  background: #000000;
  border-color: rgba(255,255,255,.06);
  box-shadow: 0 12px 30px rgba(0,0,0,.7);
}
.theme-neon .card__title{ color:var(--mustard); text-shadow:0 1px 0 rgba(0,0,0,.8); }
.theme-neon .card__desc{ color:#F2E7BE; }

/* 6) Navbar hover: sin glow neón */
.theme-neon .nav-list a:hover{ text-shadow:none; }

/* Utilidad: panel negro para cualquier bloque de texto */
.text-panel{ position:relative; z-index:0; }
.text-panel::before{
  content:""; position:absolute; inset:-8px -12px; z-index:-1;
  background:var(--panel); border-radius:8px;
  box-shadow: 0 12px 30px rgba(0,0,0,.7);
}

/* =========================================================
   MODE: NO-NEON — Mustard text + black shadow-panels
   (base)
   ========================================================= */
:root{
  --mustard:#FFD54A;
  --ink:#111111;
  --panel:rgba(0,0,0,.85);
  --panel-soft:rgba(0,0,0,.65);
}

.theme-neon .brand__top,
.theme-neon .brand__bottom,
.theme-neon .display,
.theme-neon h1, .theme-neon h2, .theme-neon h3{
  color:var(--mustard);
  text-shadow: 0 2px 0 #000, 0 0 8px rgba(0,0,0,.55);
  -webkit-text-stroke: 0 transparent;
}
.theme-neon .section-header .display::after{ display:none; }

.theme-neon .display,
.theme-neon h1, .theme-neon h2, .theme-neon h3{ position:relative; z-index:0; }
.theme-neon .display::before,
.theme-neon h1::before, .theme-neon h2::before, .theme-neon h3::before{
  content:""; position:absolute; inset:-10px -14px; z-index:-1;
  background:var(--panel); border-radius:10px;
  box-shadow: 0 14px 36px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.04);
}

/* Excepción: los h3 del menú list NO deben tener fondo negro */
.theme-neon .menu-list__name::before{
  display: none !important;
}

.theme-neon p, .theme-neon li, .theme-neon small{
  color:#F2E7BE;
  text-shadow: 0 1px 0 rgba(0,0,0,.7);
}

.theme-neon .btn-primary, .site-header .btn-cta{
  background: #111; color: var(--mustard);
  border:1px solid rgba(255,213,74,.45);
  box-shadow: 0 10px 22px rgba(0,0,0,.6), 0 0 10px rgba(0,0,0,.35);
  text-shadow: 0 1px 0 rgba(0,0,0,.8);
}
.theme-neon .btn-primary:hover, .site-header .btn-cta:hover{
  filter:brightness(1.01); transform: translateY(-1px);
}

.theme-neon [data-surface], .card{
  background: #000000;
  border-color: rgba(255,255,255,.06);
  box-shadow: 0 12px 30px rgba(0,0,0,.7);
}

/* Excepción: los elementos del menú list NO deben tener fondo negro */
.theme-neon .menu-list__item{
  background: transparent !important;
  box-shadow: none !important;
}

.theme-neon .card__title{ color:var(--mustard); text-shadow:0 1px 0 rgba(0,0,0,.8); }
.theme-neon .card__desc{ color:#F2E7BE; }

.theme-neon .nav-list a:hover{ text-shadow:none; }

.text-panel{ position:relative; z-index:0; }
.text-panel::before{
  content:""; position:absolute; inset:-8px -12px; z-index:-1;
  background:var(--panel); border-radius:8px;
  box-shadow: 0 12px 30px rgba(0,0,0,.7);
}

/* =========================================================
   PATCH: Que los paneles NO tapen el inicio del texto
   + boost de legibilidad en cuerpo
   ========================================================= */
.theme-neon .display,
.theme-neon h1, .theme-neon h2, .theme-neon h3{ z-index:1; }
.theme-neon .display::before,
.theme-neon h1::before, .theme-neon h2::before, .theme-neon h3::before{
  pointer-events:none;
  inset: -10px -14px -2px -14px; /* recorta por abajo para no invadir el párrafo */
}

/* El siguiente bloque queda por encima del panel del título (sin moverlo) */
.theme-neon h1 + *, .theme-neon h2 + *, .theme-neon h3 + *, .theme-neon .display + *{
  position:relative; z-index:2;
}

/* Legibilidad fuerte en texto normal (cuerpo/listas/pequeños) */
.theme-neon p, .theme-neon li, .theme-neon small{
  color:#F2E7BE;
  text-shadow: 0 1px 1px rgba(0,0,0,.9);
}

/* Banda suave automática SOLO en el primer párrafo tras cada título */
.theme-neon h1 + p::before, .theme-neon h2 + p::before,
.theme-neon h3 + p::before, .theme-neon .display + p::before{
  content:""; position:absolute; inset:-4px -8px; z-index:-1;
  background: var(--panel-soft);
  border-radius:8px;
  box-shadow: 0 10px 24px rgba(0,0,0,.6);
}
.theme-neon h1 + p, .theme-neon h2 + p, .theme-neon h3 + p, .theme-neon .display + p{
  position:relative;
}

/* Listas, cards, etc., también por encima de cualquier panel de título anterior */
.theme-neon ul, .theme-neon ol, .theme-neon [data-surface], .theme-neon .card{
  position:relative; z-index:2;
}

/* =========================================================
   FOOTER — legible, sin neón (mostaza/negro)
   ========================================================= */
.site-footer{
  background: #000000;
  color:#EDE5C8;
  text-shadow:0 1px 0 rgba(0,0,0,.85);
  border-top:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  /* mantiene padding/márgenes existentes */
}
.site-footer .line{
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  opacity:.9;
}
.site-footer .brand__top,
.site-footer h2, .site-footer .h2, .site-footer .h3{
  color:#FFD54A; /* mostaza */
  text-shadow:0 1px 0 rgba(0,0,0,.85);
}
.site-footer a{
  color:#F5EBCB;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.site-footer a:hover{
  color:#FFD54A;
  border-color: rgba(255,213,74,.45);
}
.site-footer a:focus-visible{
  outline:3px solid rgba(255,213,74,.55);
  outline-offset:2px;
  border-color: transparent;
}
.site-footer .links{ gap:12px 18px; } /* solo visual; mantiene layout flex */
.site-footer .links a{ display:inline-flex; align-items:center; gap:8px; }
.site-footer .links svg{ width:18px; height:18px; fill:#EDE5C8; opacity:.95; }
.site-footer .links a:hover svg{ fill:#FFD54A; }

/* Bloques/columnas dentro del footer como cards suaves (legibilidad) */
.site-footer [data-surface], .site-footer .card{
  background: #000000;
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  box-shadow: 0 8px 20px rgba(0,0,0,.55);
}
.site-footer small, .site-footer .legal{ color:#D9D0AE; opacity:.95; }

/* ========= CARTA: acordeones (details/summary) ========= */
.menu-accordion{
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  background:linear-gradient(180deg,var(--color-surface),var(--color-surface-2));
  box-shadow:var(--shadow-elevated);
  overflow:hidden;
}
.menu-accordion + .menu-accordion{ margin-top: var(--sp-24); }

/* Cabecera clicable */
.menu-accordion__summary{
  list-style:none;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 16px; cursor:pointer;
}
.menu-accordion__summary::-webkit-details-marker{ display:none; }
.menu-accordion__summary h2{ margin:0; }
.menu-accordion__summary::after{
  content:"▾"; font-size:20px; line-height:1; opacity:.8; transform:rotate(-90deg);
  transition: transform .2s ease;
}
.menu-accordion[open] .menu-accordion__summary::after{ transform:rotate(0deg); }

/* Contenido */
.menu-accordion__content{ padding:12px 12px 16px; }

/* ===== Mapeos para NO romper tus reglas existentes ===== */
/* Antes: .menu-section > .grid …  →  Ahora: dentro del acordeón */
.menu-accordion .menu-accordion__content > .grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:clamp(8px, 2vw, 16px);
}

/* MÓVIL: 2 productos por fila siempre */
@media (max-width: 767px){
  .menu-accordion .menu-accordion__content > .grid{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: clamp(10px, 3vw, 16px);
  }
}

/* Tablet/desktop (conserva 2 y 3 columnas) */
@media (min-width:768px) and (max-width:1023.98px){
  .menu-accordion .menu-accordion__content > .grid{ grid-template-columns:repeat(2,1fr)!important; }
}
@media (min-width:1024px){
  .menu-accordion .menu-accordion__content > .grid{ grid-template-columns:repeat(3,1fr)!important; }
  .menu-accordion .menu-accordion__content > .grid.is-single{ grid-template-columns:repeat(3,1fr); }
  .menu-accordion .menu-accordion__content > .grid.is-single > .card{ grid-column:2/span 1; justify-self:center; }
}
/* Proporciones e imágenes como ya tenías */
.menu-accordion .menu-accordion__content .ratio-4x3{ aspect-ratio:4/5; }
.menu-accordion .menu-accordion__content .card__img{ object-fit:cover; }

/* Listas (Bebidas/Suplementos) no cambian su layout */
.menu-accordion .menu-list{ margin-top:8px; }

/* Ocultar nota de “Bebidas” como antes (usamos data-id puesto desde JS) */
.menu-accordion[data-id="bebidas"] .menu-accordion__content > p.muted{ display:none; }

/* Accesibilidad foco */
.menu-accordion__summary:focus-visible{
  outline:var(--outline); outline-offset:2px;
}

/* ===========================
   CARTA → Acordeón
   Quitar el recuadro negro extra en los títulos del summary
   =========================== */

/* Limpia el panel ::before en los encabezados del acordeón */
.menu-accordion__summary .display::before,
.menu-accordion__summary h1::before,
.menu-accordion__summary h2::before,
.menu-accordion__summary h3::before{
  content:none !important;
  display:none !important;
}

/* Evita stacking innecesario heredado de los títulos globales */
.menu-accordion__summary .display,
.menu-accordion__summary h1,
.menu-accordion__summary h2,
.menu-accordion__summary h3{
  position:static;           /* sin z-index especial */
  z-index:auto;
  /* Mantén legibilidad con una sombra ligera, sin panel */
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
}

/* (Opcional) Si algún tema aplica padding negativo por el panel, lo neutralizamos aquí */
.menu-accordion__summary .display,
.menu-accordion__summary h2{ margin:0; }

/* ================================
   CARTA — Ajustes de espaciado
   ================================ */

/* 1) Juntar un poco el acordeón (entre secciones) */
:root{
  --acc-gap: 14px;          /* separación entre secciones en desktop */
  --acc-gap-m: 10px;        /* separación en móvil */
  --acc-pad-y: 10px;        /* padding vertical del summary */
  --acc-pad-x: 14px;        /* padding horizontal del summary/inner */
  --acc-content-pad-y: 10px; /* padding vertical del contenido */
}

/* separación vertical entre bloques <details> consecutivos */
.menu-accordion + .menu-accordion{ margin-top: var(--acc-gap); }
@media (max-width: 640px){
  .menu-accordion + .menu-accordion{ margin-top: var(--acc-gap-m); }
}

/* compactar levemente la cabecera y el contenido del acordeón */
.menu-accordion__summary{
  padding: var(--acc-pad-y) var(--acc-pad-x);
}
.menu-accordion__content{
  padding: var(--acc-content-pad-y) var(--acc-pad-x) calc(var(--acc-content-pad-y) + 4px);
}

/* 2) Separar “Suplementos” del footer */
.menu-accordion[data-id="suplementos"]{
  margin-bottom: clamp(48px, 8vw, 120px);
}

/* (opcional) si cambiasen los nombres en el futuro, asegura margen al último */
.menu-accordion:last-of-type{
  margin-bottom: clamp(40px, 6vw, 96px);
}

/* ================================
   CARTA — Espaciado compacto v2
   ================================ */
:root{
  --acc-gap: 8px;           /* separación entre secciones (antes 14px) */
  --acc-gap-m: 6px;         /* en móvil (antes 10px) */
  --acc-pad-y: 8px;         /* padding vertical del summary (antes 10px) */
  --acc-pad-x: 12px;        /* padding horizontal del summary/inner (antes 14px) */
  --acc-content-pad-y: 8px; /* padding vertical del contenido (antes 10px) */
}

/* aplica los valores anteriores */
.menu-accordion + .menu-accordion{ margin-top: var(--acc-gap); }
@media (max-width: 640px){
  .menu-accordion + .menu-accordion{ margin-top: var(--acc-gap-m); }
}
.menu-accordion__summary{
  padding: var(--acc-pad-y) var(--acc-pad-x);
}
.menu-accordion__content{
  padding: var(--acc-content-pad-y) var(--acc-pad-x) calc(var(--acc-content-pad-y) + 2px);
}

/* separación extra del último bloque (Suplementos) respecto al footer */
.menu-accordion[data-id="suplementos"]{
  margin-bottom: clamp(56px, 8vw, 120px);
}
/* por si el nombre cambiara en el futuro, garantizamos margen al último */
.menu-accordion:last-of-type{
  margin-bottom: clamp(48px, 7vw, 104px);
}

/* =========================================================
   NOSOTROS — Rediseño enfocado en legibilidad y coherencia
   (scoped a .page-about para no tocar otras páginas)
   ========================================================= */

/* --------- 1) Hero / título + texto principal --------- */
.page-about .section-header { margin-bottom: clamp(16px, 4vw, 28px); }

.page-about .section-header .display{
  position:relative; z-index:1;
  color: #FFD54A;            /* mostaza coherente con el resto */
  text-shadow: 0 1px 0 rgba(0,0,0,.85), 0 0 12px rgba(0,0,0,.35);
  letter-spacing: .02em;
}
/* Panel negro detrás del título sin invadir el párrafo siguiente */
.page-about .section-header .display::before{
  content:""; position:absolute; inset:-10px -14px -4px -14px; z-index:-1;
  background: #000000;
  border-radius:12px;
  box-shadow: 0 14px 36px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.04);
  pointer-events:none;
}

/* Cuerpo del texto principal en panel suave (mejor lectura) */
.page-about .about__text{
  margin-top: clamp(8px, 2vw, 12px);
  background: #000000;
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  padding: clamp(12px, 2.5vw, 18px);
  box-shadow: 0 10px 24px rgba(0,0,0,.55);
}
.page-about .about__text p{
  color:#F2E7BE;
  text-shadow: 0 1px 0 rgba(0,0,0,.75);
  margin: 0;
}

/* --------- 2) Redes sociales (cards limpias) --------- */
.page-about .social-section{
  margin-top: clamp(18px, 5vw, 28px);
  background: #000000;
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  padding: clamp(12px, 3vw, 16px);
  box-shadow: 0 10px 24px rgba(0,0,0,.55);
}
.page-about .social-section .section-title,
.theme-neon .page-about .social-section .section-title{
  margin: 0 0 8px 0;
  color: #FFD54A !important;            /* mismo color mostaza que "Nuestras marcas" */
  text-shadow: 0 1px 0 rgba(0,0,0,.85), 0 0 12px rgba(0,0,0,.35) !important; /* mismo efecto */
  font-family: var(--font-display) !important; /* misma tipografía */
  font-size: clamp(1.8rem,3vw,2.8rem) !important; /* mismo tamaño que h2 */
  letter-spacing: .02em !important; /* mismo espaciado */
  position: relative !important;
  z-index: 1 !important;
  padding: 8px 12px 12px 12px !important; /* mismo padding */
  background: #000000 !important; /* fondo negro sin transparencia */
  border-radius: 6px !important; /* mismo radio */
  display: inline-block !important; /* mismo display */
  transform: translateY(-2px) !important; /* mismo ajuste */
  -webkit-text-stroke: 0 transparent !important; /* quitar stroke */
}

/* Panel negro sólido del título REDES SOCIALES */
.theme-neon .page-about .social-section .section-title::before{
  background: #000000 !important;
  opacity: 1 !important;
}
.page-about .social-section .section-lead{
  color:#DCD2AD; margin:0 0 12px 0;
}

.page-about .social-grid{
  display:grid; gap: clamp(8px, 2vw, 12px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.page-about .social-card{
  display:flex; align-items:center; gap:10px;
  background: #000000; border:1px solid rgba(255,255,255,.06);
  border-radius:10px; padding:10px 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.45);
  color:#EDE5C8;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s;
}
.page-about .social-card .ico{ opacity:.95; }
.page-about .social-card .label{ font-weight:700; }
.page-about .social-card:hover{
  transform: translateY(-1px);
  border-color: rgba(255,213,74,.35);
  box-shadow: 0 10px 22px rgba(0,0,0,.55);
}

/* --------- 3) Nuestras marcas (cards coherentes) --------- */
.page-about .logos-grid{
  margin-top: clamp(18px, 5vw, 28px);
  display:grid; gap: clamp(10px, 2.5vw, 16px);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.page-about .logo-card{
  display:grid; place-items:center;
  background: #000000;
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding: clamp(12px, 3vw, 18px);
  box-shadow: 0 10px 24px rgba(0,0,0,.55);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s;
  min-height: 220px;
}
.page-about .logo-card img{
  max-width: 280px; width:100%;
  max-height: 180px; object-fit: contain;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.6));
}
.page-about .logo-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,213,74,.35);
  box-shadow: 0 14px 28px rgba(0,0,0,.6), 0 0 12px rgba(255,213,74,.18);
}

/* --------- 4) Ajustes de separación vertical coherentes --------- */
.page-about .social-section + .reveal,
.page-about .about__text + .social-section{ margin-top: clamp(18px, 5vw, 28px); }

/* --------- 5) Mobile tune --------- */
@media (max-width: 640px){
  .page-about .section-header .display::before{ inset:-8px -10px -2px -10px; }
  .page-about .about__text{ padding: 10px 12px; }
}

/* ===== Delivery Modal — FIX botón de cierre ===== */
/* Asegura centrado del modal por si hay otras reglas previas */
.modal[open]{ display:grid !important; place-items:center !important; }

/* El diálogo crea el contexto (por si se usa absolute en otros hijos) */
.modal__dialog{ position:relative; }

/* La X va fija a la ventana, por encima del contenido del modal */
.modal__close{
  position: fixed; /* antes absolute dentro del dialog */
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: 44px; height: 44px;
  z-index: 10020;          /* > modal (10000) y > contenido */
  border-radius: 999px;
  background: rgba(0,0,0,.75);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  display: grid; place-items: center;
  font-size: 28px; line-height: 1;
  pointer-events: auto;
  cursor: pointer;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.modal__close:hover{ background: rgba(0,0,0,.9); }
@media (max-width:640px){
  .modal__close{ width:40px; height:40px; top:10px; right:10px; font-size:26px; }
}

/* ============================
   DELIVERY MODAL — FIX DESKTOP
   1) Centro vertical seguro en PC
   2) Cerrar paneles negros detrás de títulos dentro del modal
   3) La X vuelve a anclarse al cuadro (no a la ventana)
   ============================ */

/* 1) Centro vertical con respiro superior/inferior (evita que quede alto) */
@media (min-width: 768px){
  .modal{
    display: grid !important;
    place-items: center !important;
    /* margen interno para que nunca “toque” arriba aunque haya barras/zoom */
    padding: clamp(24px, 6vh, 64px) clamp(16px, 3vw, 32px) !important;
  }
}

/* El cuadro del modal crea el contexto de posicionamiento */
.modal__dialog{
  position: relative;
  z-index: 10001; /* por encima del overlay */
  width: min(92vw, 620px); /* mantiene tamaño actual, con tope en desktop */
}

/* 2) Sin paneles negros extra detrás de los títulos dentro del modal */
.modal .display::before,
.modal h1::before, .modal h2::before, .modal h3::before{
  content: none !important;
  display: none !important;
}
.modal .display,
.modal h1, .modal h2, .modal h3{
  position: static;           /* elimina z-index heredado */
  text-shadow: 0 1px 0 rgba(0,0,0,.75); /* sombra ligera solo para legibilidad */
}

/* 3) Botón de cierre anclado al cuadro (si antes lo pusimos fixed, lo anulamos) */
.modal__close{
  position: absolute !important;  /* vuelve a vivir dentro del modal */
  top: 10px;
  right: 10px;
  z-index: 10002;                 /* por encima del contenido del modal */
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: rgba(0,0,0,.75);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  cursor: pointer;
}
.modal__close:hover{ background: rgba(0,0,0,.9); }
@media (max-width:640px){
  .modal__close{ width:40px; height:40px; font-size:26px; }
}

/* ============================
   DELIVERY MODAL — FIXES PC + UI
   ============================ */

/* A) Robustez: si el JS pone aria-hidden="true", el modal se oculta sí o sí */
.modal[aria-hidden="true"]{ display:none !important; }

/* B) Centrado seguro en escritorio (evita que quede demasiado arriba) */
@media (min-width: 768px){
  .modal[open]{
    display:grid !important;
    place-items:center !important;
    padding: clamp(24px, 6vh, 72px) clamp(16px, 3vw, 32px) !important; /* respiro vertical */
  }
  .modal__dialog{
    position:relative;       /* contexto para la X */
    width: min(92vw, 620px);
    margin: 0;               /* anula cualquier margen heredado */
    top: auto; left: auto; transform: none; /* evita offsets antiguos */
  }
}

/* C) Quitar los paneles/fondos negros de textos dentro del modal */
.modal .display::before,
.modal h1::before, .modal h2::before, .modal h3::before,
.modal h1 + p::before, .modal h2 + p::before, .modal h3 + p::before,
.modal .modal__desc::before{
  content: none !important;
  display: none !important;
}
.modal .display, .modal h1, .modal h2, .modal h3{
  position: static;              /* sin z-index extra */
}
.modal .modal__desc{
  background: transparent !important; /* sin fondos añadidos */
  color:#EDE5BE;                       /* legible sobre el panel del modal */
  text-shadow: 0 1px 0 rgba(0,0,0,.7);
}

/* D) La X dentro del cuadro, siempre por encima del contenido */
.modal__close{
  position: absolute !important;
  top: 10px; right: 10px;
  z-index: 10002;            /* > contenido del modal */
  width: 44px; height: 44px;
  display: grid; place-items:center;
  border-radius: 999px;
  background: rgba(0,0,0,.75);
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
  cursor:pointer; pointer-events:auto;
}
.modal__close:hover{ background: rgba(0,0,0,.9); }
@media (max-width:640px){ .modal__close{ width:40px; height:40px; } }

/* =========================================================
   GLOBAL SCALE — Buttons & Typography (safe override)
   Applies site-wide; does not alter layout or positioning.
   ========================================================= */

/* 1) Base font sizing — gentle uplift */
html{ font-size: 17px; } /* +1px base para que todo el texto suba un punto */

/* Headings (más grandes pero controlados) */
.display{ font-size: clamp(36px, 6vw, 56px) !important; line-height:1.1; }
.h1{ font-size: clamp(34px, 5.2vw, 52px) !important; }
.h2{ font-size: clamp(28px, 4.6vw, 44px) !important; }
.h3{ font-size: clamp(22px, 3.8vw, 34px) !important; }
.lead{ font-size: clamp(17px, 2.4vw, 19px) !important; }

/* Nav links ligeramente mayores */
.nav-list a{ font-size: 1rem; }

/* 2) Botones — tipografía, padding y altura mínima mayores */
.btn{
  font-size: clamp(1rem, 1.25vw, 1.12rem) !important;
  padding: clamp(.92rem, 2.2vw, 1.08rem) clamp(1.15rem, 3.2vw, 1.35rem) !important;
  min-height: 50px !important;  /* target táctil cómodo */
  border-radius: 14px;
  line-height: 1.05;
}
.btn svg, .btn i{ width:1.15em; height:1.15em; }

.btn-primary, .btn-ghost, .btn-cta, .btn--glow, .btn--neon{ min-height:50px !important; }

/* CTA del header */
.site-header .btn-cta{
  font-size: clamp(1rem, 1.25vw, 1.12rem) !important;
  padding: .85rem 1.25rem !important;
  min-height: 50px !important;
  border-radius: 14px;
}

/* Botones en formularios (reservas/contacto) */
.reservations .btn, .form-actions .btn{
  height: auto !important;
  min-height: 50px !important;
  font-size: clamp(1rem, 1.25vw, 1.12rem) !important;
  padding: .9rem 1.2rem !important;
}

/* Botones dentro de modales/lightbox */
.modal .btn, .lightbox .btn{
  font-size: clamp(1rem, 1.25vw, 1.12rem) !important;
  min-height: 50px !important;
  padding: .9rem 1.25rem !important;
}

/* Enlaces de teléfono/WhatsApp con tamaño de botón */
a.call-number, a.whatsapp, .btn-phone{
  font-size: clamp(1rem, 1.25vw, 1.12rem) !important;
  padding: .9rem 1.2rem !important;
  min-height: 50px !important;
}

/* 3) Botón del menú móvil (hamburguesa) más grande */
.nav-toggle{
  width: 56px; height: 56px;
  padding: 10px; border-radius: 14px;
}
.nav-toggle__bar{ width: 26px; height: 2.5px; }

/* 4) Menú móvil: enlaces con mayor área táctil */
@media (max-width: 900px){
  .nav-list a{ padding-block: 12px; font-size: 1.06rem; }
}

/* =========================================================
  HEADER & BRAND TITLE — tamaño de letras ↑↑ (más grande aún)
  ========================================================= */

/* Header un pelín más alto para dar respiro a las letras */
.site-header{
  padding-block: clamp(14px, 3vw, 22px) !important;
}

/* 1) Marca (izquierda del header) */
.site-header .brand__top{
  font-size: clamp(28px, 3.6vw, 38px) !important; /* ↑↑ “BLACKBULL” */
  line-height: 1.05;
}
.site-header .brand__bottom{
  font-size: clamp(14px, 2vw, 18px) !important; /* ↑↑ “BURGUERS/BURGUER” */
  letter-spacing: 6px;
}

/* 2) Navegación del header */
.site-header .nav-list a{
  font-size: clamp(1.15rem, 2vw, 1.35rem) !important; /* ↑↑ enlaces: Carta, Nosotros… */
  padding-inline: clamp(14px, 2.5vw, 20px) !important;   /* más respiración sin desbordar */
  line-height: 1.18;
}

/* 3) Título grande de marca en secciones/hero (si aparece el logotipo en grande) */
.hero .brand__top,
.page-home .brand__top{
  font-size: clamp(56px, 10vw, 110px) !important;  /* BLACKBULL */
  line-height: 1.02;
}
.hero .brand__bottom,
.page-home .brand__bottom{
  font-size: clamp(26px, 6vw, 52px) !important; /* BURGUER / BURGUERS */
  letter-spacing: 7px;
}

/* 4) En móvil: menú más grande y espacioso */
@media (max-width: 767px){
  .site-header .nav-list a{ 
    font-size: 1.35rem !important; 
    padding-block: 16px !important;
    line-height: 1.2;
  }
  /* Menú móvil desplegable con enlaces más grandes */
  .nav-mobile ul{
    padding: var(--sp-24);
    gap: var(--sp-24);
  }
  .nav-mobile a{
    font-size: 1.4rem !important;
    padding: 14px 0 !important;
    font-weight: 700;
  }
}

/* =========================================================
  CTAs HOME — Ver carta / Cómo llegar / Explorar toda la carta
  ========================================================= */

/* Hero: ambos botones más grandes (incluye .btn-lg) */
.hero__actions .btn,
.hero__actions .btn.btn-lg{
  font-size: clamp(1.25rem, 4vw, 1.65rem) !important;
  padding: clamp(1.25rem, 4vw, 1.55rem) clamp(1.65rem, 5vw, 2.4rem) !important;
  min-height: 70px !important;      /* tap target más grande */
  border-radius: 22px;
  line-height: 1.05;
  white-space: nowrap;
  /* Mismo ancho y texto centrado */
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0; /* Permite que flex funcione correctamente */
}

/* Espaciado entre los dos botones del hero (por si tu tema lo deja muy justo) */
.hero__actions{ gap: clamp(18px, 4vw, 28px); }

/* “Explorar toda la carta” debajo de destacados */
.featured-cta .btn{
  font-size: clamp(1.25rem, 4vw, 1.65rem) !important;
  padding: clamp(1.25rem, 4vw, 1.55rem) clamp(1.65rem, 5vw, 2.4rem) !important;
  min-height: 70px !important;
  border-radius: 22px;
  line-height: 1.05;
}

/* Ajuste fino en móviles: evita desbordar */
@media (max-width: 480px){
  .hero__actions .btn,
  .featured-cta .btn{
   font-size: clamp(1.15rem, 7vw, 1.32rem) !important;
   min-height: 60px !important;
   padding: 1.15rem 1.65rem !important;
   white-space: normal;
   /* Mantener mismo ancho y centrado en móvil */
   flex: 1;
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
  }
}
/* =========================================================
  CTA "CONÓCENOS" — subir tamaño igual que otros botones
  (detecta el href hacia nosotros / conocenos / #nosotros)
  ========================================================= */
a.btn[href*="nosotros"],
a.btn[href*="conocenos"],
a.btn[href*="#nosotros"],
.home-about .btn,
.about__cta .btn{
  font-size: clamp(1.25rem, 4vw, 1.65rem) !important;
  padding: clamp(1.25rem, 4vw, 1.55rem) clamp(1.65rem, 5vw, 2.4rem) !important;
  min-height: 70px !important;
  border-radius: 22px;
  line-height: 1.05;
  white-space: nowrap;
}

/* Ajuste fino en móviles para evitar desbordes */
@media (max-width: 480px){
  a.btn[href*="nosotros"],
  a.btn[href*="conocenos"],
  a.btn[href*="#nosotros"],
  .home-about .btn,
  .about__cta .btn{
   font-size: clamp(1.15rem, 7vw, 1.32rem) !important;
   min-height: 60px !important;
   padding: 1.15rem 1.65rem !important;
   white-space: normal;
  }
}

/* Hero video: mismas reglas que la imagen original */
.hero__media video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Variante “tight” (la que usas en el index): como la imagen .hero__media--tight img */
.hero__media--tight video{
  width: 100%;
  height: auto;
  object-fit: contain;
  background: linear-gradient(180deg, var(--color-surface), var(--color-surface-2));
}

/* ===== Brand con logo: tamaño y alineación finos ===== */
.brand--with-logo{ display:flex; align-items:center; gap:12px; } /* ya lo tienes, reforzamos */
.brand__text{ display:flex; flex-direction:column; line-height:1; } /* ya lo tienes */

.brand__img{
  height: clamp(22px, 2.6vw, 34px);   /* tamaño adecuado según viewport */
  width: auto;
  flex: 0 0 auto;
  object-fit: contain;
  image-rendering: auto;
}
/* En desktop grande, un pelín más si lo deseas */
@media (min-width: 1280px){
  .brand__img{ height: 36px; }
}

/* =========================================
   HEADER — Logo a la izquierda del texto
   ========================================= */

/* El enlace de marca se comporta como fila (logo + texto) */
.site-header .brand{
  display: inline-flex !important;      /* fuerza fila aunque antes fuese block/column */
  flex-direction: row !important;
  align-items: center !important;
  gap: clamp(8px, 1.4vw, 12px);
  white-space: nowrap;                   /* evita que BLACKBULL/BURGERS bajen bajo el logo */
}

/* Tamaño del logo y comportamiento */
.site-header .brand .brand__img{
  height: clamp(65px, 8vw, 80px);     /* Mucho más grande */
  width: auto;
  flex: 0 0 auto;
  display: block;
  object-fit: contain;
}

/* El bloque de texto queda en columna (BLACKBULL / BURGERS) */
.site-header .brand .brand__text,
.site-header .brand .brand__wrap{       /* cubre ambos nombres si usaste wrap o text */
  display: flex;
  flex-direction: column;
  line-height: 1;
}

/* Tamaños del texto de marca (coherentes) */
.site-header .brand__top{
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.05;
}
.site-header .brand__bottom{
  font-size: clamp(14px, 1.8vw, 18px);
  letter-spacing: 5px;
}

/* Ajuste micro para móviles estrechos */
@media (max-width: 380px){
  .site-header .brand .brand__img{ height: 55px; }
  .site-header .brand{ gap: 8px; }
}

/* ===================================================
   MÓVILES: BOTONES MÁS GRANDES Y MARCA MÁS GRANDE
   =================================================== */

/* Marca del header más grande en móvil */
@media (max-width: 767px){
  .site-header .brand .brand__img{
    height: 70px !important;  /* Logo más grande solo en móviles */
  }
  .site-header .brand__top{
    font-size: 2.4rem !important;  /* Un poco más grande */
    line-height: 1.05;
  }
  .site-header .brand__bottom{
    font-size: 1.3rem !important;  /* Un poco más grande */
    letter-spacing: 4px;
  }
}

/* Navegación móvil más grande */
@media (max-width: 767px){
  /* Menú móvil desplegable con enlaces más grandes */
  .nav-mobile ul{
    padding: var(--sp-24);
    gap: var(--sp-24);
  }
  .nav-mobile a{
    font-size: 1.5rem !important;  /* Un poco más grande */
    padding: 16px 0 !important;    /* Un poco más de padding */
    font-weight: 700;
  }
  
  /* Hamburger más grande */
  .nav-toggle{
    width: 56px !important;        /* Un poco más grande */
    height: 56px !important;
    padding: 14px !important;      /* Un poco más de padding */
    border-radius: 16px !important;
  }
  .nav-toggle__bar{
    width: 30px !important;        /* Un poco más ancho */
    height: 3px !important;
  }
  
  /* Botones principales del index MÁS GRANDES */
  .hero__actions .btn,
  .featured-cta .btn,
  .about .btn,
  a.btn[href*="nosotros"],
  a.btn[href*="conocenos"]{
    font-size: 1.5rem !important;     /* Un poco más grande */
    padding: 1.5rem 2.2rem !important; /* Un poco más de padding */
    min-height: 80px !important;       /* Un poco más alto */
    border-radius: 20px;
    line-height: 1.05;
  }
  
  /* Títulos principales más grandes en móviles */
  h1{
    font-size: clamp(2.4rem, 4.2vw, 4.2rem) !important; /* Un poco más grande */
  }
  h2{
    font-size: clamp(2rem, 3.2vw, 3rem) !important; /* Un poco más grande */
  }
  .display{
    font-size: clamp(2.4rem, 4.2vw, 4.2rem) !important; /* Para títulos .display */
  }
  .card__title{
    font-size: clamp(18px, 2.8vw, 22px) !important; /* Un poco más grande */
  }
  .section-title{
    font-size: clamp(1.3rem, 2.2vw, 2rem) !important; /* Para títulos de sección */
    text-shadow: 0 0 3px #fff, 0 0 5px #fff, 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff !important;
  }
  
  /* Botones de redes sociales: VERTICALES (uno encima del otro) */
  .social-grid{
    grid-template-columns: 1fr !important; /* Una sola columna en móvil */
    gap: 20px;
  }
  
  /* Botones de redes sociales más grandes en móvil */
  .social-section .social-card{
    padding: 24px 28px !important;
    min-height: 84px !important;
    gap: 20px !important;
  }
  
  .social-section .social-card .ico{
    width: 60px !important;
    height: 60px !important;
    border-radius: 16px !important;
  }
  
  .social-section .social-card .ico svg{
    width: 36px !important;
    height: 36px !important;
  }
  
  .social-section .social-card .label{
    font-size: 1.3rem !important;
  }
}

/* ===== PÁGINA DE MENÚ - SIN FONDOS NEGROS ===== */
.page-menu h1,
.page-menu h2,
.page-menu h3,
.page-menu .display,
.page-menu .card__title,
.page-menu .price {
  background: none !important;
  transform: none !important;
  padding: 0 !important;
  display: revert !important;
  border-radius: 0 !important;
}

/* ===== TÍTULO "CARTA" - CENTRADO CON FONDO NEGRO ===== */
.page-menu .section-header .display {
  background: #000000 !important;
  padding: 8px 16px 12px 16px !important;
  transform: translateY(-6px) !important;
  border-radius: 6px !important;
  display: inline-block !important;
}

/* ===== PÁGINA DE MENÚ - SIN EFECTOS NEON ===== */
.page-menu .price,
.page-menu .lightbox__cap-title {
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Quitar efectos neon específicos del theme-neon en página de menú */
.page-menu.theme-neon .price,
.page-menu.theme-neon .lightbox__cap-title {
  text-shadow: none !important;
  color: var(--color-cheddar) !important;
}

.page-menu.theme-neon .lightbox__cap-title {
  color: var(--color-text) !important;
}

/* ===== QUITAR TODOS LOS EFECTOS NEON DE TÍTULOS ===== */
h1, h2, h3, .display, .card__title, .price,
.menu-list__name, .menu-list__price, .lightbox__cap-title {
  text-shadow: none !important;
}

/* Quitar efectos neon específicos del hero */
.hero .display {
  text-shadow: none !important;
}

/* Quitar efectos neon de brand */
.brand__top, .brand__bottom {
  text-shadow: none !important;
}

/* ===== QUITAR EFECTOS NEON EN MÓVILES ===== */
@media (max-width: 768px) {
  h1, h2, h3, .display, .card__title, .price,
  .menu-list__name, .menu-list__price, .lightbox__cap-title,
  .hero .display, .brand__top, .brand__bottom {
    text-shadow: none !important;
  }
}

@media (max-width: 480px) {
  h1, h2, h3, .display, .card__title, .price,
  .menu-list__name, .menu-list__price, .lightbox__cap-title,
  .hero .display, .brand__top, .brand__bottom {
    text-shadow: none !important;
  }
}

/* ===== TÍTULO "pero tu ❤ hamburguesa" MÁS GRANDE EN MÓVILES ===== */
@media (max-width: 768px) {
  .hero .display:nth-child(1),
  .hero .display:nth-child(2) {
    font-size: clamp(2rem, 5vw, 3.5rem) !important;
  }
}

@media (max-width: 480px) {
  .hero .display:nth-child(1),
  .hero .display:nth-child(2) {
    font-size: clamp(2.2rem, 6vw, 4rem) !important;
  }
}

/* ===== CORRECCIÓN FINAL: TODOS LOS FONDOS TRANSPARENTES A NEGRO SÓLIDO ===== */
/* Aplicar negro sólido a todas las cajas de contenido */
.card, [data-surface], .about__card,
.social-card, .menu-list, .menu-accordion,
.reservations .card, .reservations .about__card {
  background: #000000 !important;
}

/* Incluir también elementos específicos */
.social-section .social-card,
.page-about .social-card,
.page-about .logo-card,
.site-footer [data-surface],
.site-footer .card {
  background: #000000 !important;
}

/* Fondos negros para contenedores de texto específicos - separados */

/* Sección DESTACADOS - Recuadro para el título */
.section-header .display {
  background: #000000 !important;
  padding: 16px 20px !important;
  border-radius: var(--radius) !important;
  margin: 0 0 8px 0 !important;
  display: inline-block !important;
}

/* Sección DESTACADOS - Recuadro para el subtítulo */
.section-header .muted {
  background: #000000 !important;
  padding: 12px 16px !important;
  border-radius: var(--radius) !important;
  margin: 8px 0 24px 0 !important;
  display: inline-block !important;
}

/* Sección QUIENES SOMOS - Recuadro para el título */
.about.section-pt .split > div .display {
  background: #000000 !important;
  padding: 16px 20px !important;
  border-radius: var(--radius) !important;
  margin: 0 0 16px 0 !important;
  display: inline-block !important;
}

/* Sección QUIENES SOMOS - Recuadro para el párrafo */
.about.section-pt .split > div p {
  background: #000000 !important;
  padding: 20px !important;
  border-radius: var(--radius) !important;
  margin: 16px 0 !important;
  display: block !important;
}

/* Sección REDES SOCIALES - Recuadro para el título */
.social-section .section-title {
  background: transparent !important;
  padding: 16px 20px !important;
  border-radius: var(--radius) !important;
  margin: 0 0 8px 0 !important;
  display: inline-block !important;
}

/* Sección REDES SOCIALES - Recuadro para el subtítulo */
.social-section .section-lead {
  background: transparent !important;
  padding: 12px 16px !important;
  border-radius: var(--radius) !important;
  margin: 8px 0 20px 0 !important;
  display: inline-block !important;
}

/* Ajustar márgenes para que no se desplacen */
.section-header .display {
  margin-left: -8px !important;
  position: relative !important;
}

.social-section .section-title {
  margin-left: 0 !important;
  position: relative !important;
}

@media (max-width: 768px) {
  .section-header .display {
    margin-left: -6px !important;
  }
  
  .social-section .section-title {
    margin-left: 0 !important;
  }
}

/* ===== PATCH: un solo panel opaco en títulos (sin doble fondo) ===== */

/* 1) Hacer opaco el panel de los títulos (el ::before usa --panel) */
:root,
.theme-neon { --panel: #000000 !important; } /* antes era rgba(...) */

/* 2) Eliminar el fondo negro directo de los títulos/textos-rotulados */
:where(h1,h2,h3,.display,.card__title,.price){ 
  background: transparent !important;
}

/* 3) Anular fondos negros específicos que se metían con !important */
.hero .display{ background: transparent !important; }                   /* venía con fondo #000 en el hero */  /* :contentReference[oaicite:4]{index=4} */
.page-menu .section-header .display{ background: transparent !important; } /* “CARTA” */
.section-header .display{ background: transparent !important; }
.page-about .social-section .section-title{ background: transparent !important; } /* redes */
/* (Si hay más títulos “especiales” con fondo, añade su selector aquí) */

/* Nota: el panel tras el título lo crea esta regla existente:
   .theme-neon h1::before, h2::before, h3::before, .display::before { background: var(--panel); }
   al poner --panel:#000 ya tapa completamente el fondo.  */ /* :contentReference[oaicite:5]{index=5} */