/* =====================================================================
   THE GRILL HUT · menú QR
   =====================================================================
   La línea gráfica es la del menú digital de thegrillhutbahamas.com:
   franja roja con el logo blanco, botonera de círculos carbón, fondo
   carbón, títulos «- STARTERS -» en ámbar y tarjetas con borde crema.
   Nada de esta hoja se comparte con otro menú.
   ===================================================================== */

:root{
  --rojo:#7C151B;          /* la botonera */
  --rojo-alto:#8F1A21;     /* la franja del logo, un punto más clara */
  --carbon:#182128;        /* el fondo */
  --carbon-2:#1D2327;      /* tarjetas destacadas */
  --circulo:#131A20;       /* el círculo de cada icono */
  --crema:#FFF0DD;         /* nombres y bordes */
  --ambar:#F7A923;         /* títulos y precios */
  --texto:#FFFFFF;
  --texto-2:#C9CDD1;
  --pie:#F7F7F7;
  --radio:10px;
  --ancho:1000px;
  --header:0px;            /* lo mide menu.js */
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html,body{ margin:0; padding:0; }
body{
  background:var(--carbon);
  color:var(--texto);
  font-family:'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

/* ── HEADER ─────────────────────────────────────────────────────────── */
.gh-header{
  position:sticky; top:0; z-index:50;
  background:var(--rojo);
  box-shadow:0 0 10px rgba(0,0,0,.5);
}
.gh-top{
  background:var(--rojo-alto);
  display:flex; justify-content:center; align-items:center;
  padding:8px 16px;
}
.gh-logo img{ height:56px; width:auto; }
.gh-lang{
  position:absolute; top:18px; right:16px;
  display:flex; gap:4px; font-size:12px; font-weight:600;
}
.gh-lang a{ text-decoration:none; padding:4px 7px; border-radius:4px; opacity:.75; }
.gh-lang a.on{ background:rgba(0,0,0,.25); opacity:1; }

.gh-cats{ position:relative; }
.gh-track{
  display:flex; justify-content:space-around; gap:4px;
  max-width:var(--ancho); margin:0 auto;
  padding:10px 12px 9px;
  overflow-x:auto; scroll-snap-type:x proximity;
  scrollbar-width:none;
}
.gh-track::-webkit-scrollbar{ display:none; }
.nav-cat{
  flex:0 0 auto; min-width:76px;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  text-decoration:none; scroll-snap-align:center;
  -webkit-tap-highlight-color:transparent;
}
.nav-cat .ic{
  width:50px; height:50px; border-radius:50%;
  background:var(--circulo);
  display:grid; place-items:center;
  border:2px solid transparent;
  transition:border-color .2s, transform .2s;
}
.nav-cat .ic img{ width:30px; height:30px; }
.nav-cat .lb{
  font-size:11px; font-weight:500; letter-spacing:.3px;
  text-transform:uppercase; white-space:nowrap;
}
.nav-cat:hover .ic{ transform:translateY(-2px); }
.nav-cat.on .ic{ border-color:var(--ambar); }
.nav-cat.on .lb{ color:var(--ambar); }

.gh-arrow{
  position:absolute; top:0; bottom:0; width:28px; z-index:2;
  border:0; padding:0; cursor:pointer;
  color:#fff; font-size:15px;
  background:linear-gradient(90deg, var(--rojo) 55%, transparent);
}
.gh-arrow.prev{ left:0; }
.gh-arrow.next{ right:0; background:linear-gradient(270deg, var(--rojo) 55%, transparent); }

/* ── SECCIONES ──────────────────────────────────────────────────────── */
.menu{ max-width:var(--ancho); margin:0 auto; padding:8px 16px 48px; }
.sec{ padding-top:34px; scroll-margin-top:calc(var(--header) + 4px); }
.sub{ scroll-margin-top:calc(var(--header) + 4px); }

.sec-t{
  margin:0 0 22px;
  text-align:center;
  color:var(--ambar);
  font-size:28px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase;
}
.sec-t img{ margin:0 auto; max-height:70px; width:auto; }
.sec-nota{
  margin:-14px 0 22px; text-align:center;
  color:var(--crema); font-size:12px; font-weight:600;
  letter-spacing:1.5px; text-transform:uppercase;
}
.sec-foto{ width:100%; max-height:260px; object-fit:cover; border-radius:var(--radio); margin:0 0 20px; }

/* ── TARJETAS ───────────────────────────────────────────────────────── */
.cards{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:20px;
}
.card{
  border:2px solid var(--crema);
  border-radius:var(--radio);
  padding:20px 20px 18px;
  display:flex; gap:16px;
}
.cards > .card:only-child{ grid-column:1 / -1; }
.card.destacado{ background:var(--carbon-2); border-color:var(--ambar); }
.card-txt{ flex:1; min-width:0; display:flex; flex-direction:column; }
.card h3{
  margin:0 0 10px;
  color:var(--crema);
  font-size:21px; font-weight:700; line-height:1.15;
  text-transform:uppercase;
}
.card h3 small{ font-size:12px; font-weight:700; text-transform:none; white-space:nowrap; }
.card .nota{ margin:-4px 0 8px; color:var(--ambar); font-size:12px; font-weight:600; }
.card .desc{ margin:0 0 12px; font-size:12.5px; color:var(--texto); }
.card .precio{
  margin:auto 0 0; padding-top:4px;
  color:var(--ambar); font-size:22px; font-weight:700;
}
.card-foto{
  width:150px; height:150px; flex-shrink:0;
  object-fit:cover; border-radius:var(--radio);
}

/* Dos tamaños: Small · Souvenir Cup */
.precios{ margin:auto 0 0; padding-top:4px; display:flex; gap:22px; }
.precios div{ display:flex; flex-direction:column; }
.precios dt{ font-size:10px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--texto-2); }
.precios dd{ margin:0; color:var(--ambar); font-size:21px; font-weight:700; }

/* «Choose from:» · «Add:» */
.opts{ margin:0 0 12px; font-size:12.5px; }
.opts-t{ margin:0 0 4px; font-weight:700; }
.opts ul{ margin:0; padding:0; list-style:none; }
.opts li{ display:flex; justify-content:space-between; gap:12px; padding:2px 0; }
.opts:not(.con-precio) ul{ display:flex; flex-wrap:wrap; gap:6px; }
.opts:not(.con-precio) li{
  padding:3px 10px; border:1px solid rgba(255,240,221,.35); border-radius:20px;
}
.opts li small{ color:var(--texto-2); }
.opts li b{ color:var(--ambar); font-weight:700; white-space:nowrap; }

.nuevo{
  display:inline-block; vertical-align:middle;
  margin-left:4px; padding:2px 7px; border-radius:4px;
  background:var(--ambar); color:var(--carbon);
  font-size:10px; font-style:normal; font-weight:800; letter-spacing:1px;
  text-transform:uppercase;
}

/* ── LISTAS ─────────────────────────────────────────────────────────── */
.marco{
  border:2px solid var(--crema); border-radius:var(--radio);
  padding:10px 22px;
}
.lista{ margin:0; padding:0; list-style:none; }
.row{
  display:grid; grid-template-columns:1fr auto; column-gap:16px;
  padding:11px 0;
  border-bottom:1px solid rgba(255,240,221,.14);
}
.row:last-child{ border-bottom:0; }
.row-l{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.row .n{ color:var(--crema); font-size:15px; font-weight:700; text-transform:uppercase; }
.row .n small{ font-size:11px; font-weight:600; text-transform:none; }
.row .nota{ color:var(--ambar); font-size:12px; font-weight:600; }
.row .desc{ font-size:12.5px; }
.row-p{ display:flex; gap:18px; align-items:baseline; }
.row-p span{ color:var(--ambar); font-size:16px; font-weight:700; white-space:nowrap; min-width:64px; text-align:right; }
.row-o{ grid-column:1 / -1; margin-top:8px; }
.row-o .opts{ margin:0; }
.row.cab{ padding:4px 0 0; border-bottom:0; }
.row.cab .row-p span{ color:var(--texto-2); font-size:10px; font-weight:600; letter-spacing:1px; text-transform:uppercase; }
/* En listas de una columna los nombres de bebida no van en mayúsculas
   si son marcas (Sands, Bud Light): se respeta lo escrito. */
.sub .row .n{ text-transform:none; font-weight:600; font-size:14.5px; }

/* Sublistas: Bahamian · International · Tap · Bucket */
.subs{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:20px;
}
.sub{
  border:2px solid var(--crema); border-radius:var(--radio);
  padding:16px 20px 8px;
}
.sub-t{
  margin:0 0 4px; color:var(--ambar);
  font-size:16px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
}
.sub-nota{ margin:0 0 6px; font-size:12px; color:var(--texto-2); }
.sec-titulo + .subs{ margin-top:0; }

/* ── PIE LEGAL ──────────────────────────────────────────────────────── */
.legal{
  background:var(--pie); color:#000;
  padding:14px 16px;
}
.legal p{
  max-width:var(--ancho); margin:0 auto;
  text-align:center; font-size:12px; font-weight:500; line-height:1.5;
}

/* ── MÓVIL ──────────────────────────────────────────────────────────── */
@media (max-width:767px){
  .gh-top{ padding:6px 16px; }
  .gh-logo img{ height:44px; }
  .gh-lang{ top:14px; }
  .gh-track{ justify-content:flex-start; padding:8px 28px 7px; gap:2px; }
  .nav-cat{ min-width:72px; }
  .nav-cat .ic{ width:44px; height:44px; }
  .nav-cat .ic img{ width:26px; height:26px; }
  .nav-cat .lb{ font-size:10px; }

  .sec{ padding-top:28px; }
  .sec-t{ font-size:24px; margin-bottom:18px; }
  .cards, .subs{ grid-template-columns:1fr; gap:14px; }
  .card{ padding:16px 16px 14px; }
  .card h3{ font-size:18px; }
  .card-foto{ width:110px; height:110px; }
  .card .precio{ font-size:20px; }
  .marco{ padding:6px 16px; }
  .sub{ padding:14px 16px 6px; }
  .legal p{ font-size:10px; }
}
@media (max-width:380px){
  .card.con-foto{ flex-direction:column-reverse; }
  .card.con-foto .card-foto{ width:100%; height:170px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .nav-cat .ic{ transition:none; }
}