/* ───────────────────────────────────────────────────────────────────────────
   base.css — maqueta mínima compartida por index / carta / menu.

   No pretende ser el diseño final de nadie: es lo justo para que la web nueva
   se vea decente el día 1 y para que las CLASES DEL CONTRATO con la Suite
   (article.dish, .price, section.menusec, .dgroup, .dishes) existan y tengan
   estilo desde el principio. Encima de esto se monta el diseño del cliente.

   ⚠ Los NOMBRES de clase del bloque "Carta" son contrato, no decoración:
     los leen gen-carta-json.mjs y js/carta-en-vivo.js. Renombrarlos rompe el
     hilo con la Suite (ver el comentario de cabecera de gen-carta-json.mjs).
   ─────────────────────────────────────────────────────────────────────────── */

:root{
  --fondo:#F6F1E9;
  --papel:#FFFDF9;
  --tinta:#1F1B18;
  --suave:#6B625A;
  --acento:#B8452E;      /* llamadas a la acción, chips */
  --oro:#A8842E;         /* precios y detalles */
  --linea:rgba(31,27,24,.14);
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ancho:980px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--fondo);color:var(--tinta);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}

.envoltorio{max-width:var(--ancho);margin:0 auto;padding:0 20px;}

/* ── Cabecera ───────────────────────────────────────────────────────────── */
header.sitio{
  position:sticky;top:0;z-index:20;background:rgba(246,241,233,.94);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--linea);
}
header.sitio .envoltorio{display:flex;align-items:center;gap:16px;height:64px;}
header.sitio .logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;}
header.sitio .logo img{width:32px;height:32px;}
header.sitio nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;}
header.sitio nav a{
  text-decoration:none;font-size:14px;font-weight:600;padding:8px 14px;border-radius:999px;
}
header.sitio nav a[aria-current="page"]{background:var(--acento);color:#fff;}

/* ── Portada ────────────────────────────────────────────────────────────── */
.hero{padding:64px 0 48px;text-align:center;}
.hero .sobre{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--acento);}
.hero h1{
  font-family:var(--serif);font-weight:600;margin:12px 0 0;
  font-size:clamp(36px,7vw,64px);line-height:1.04;
}
.hero p{margin:16px auto 0;max-width:56ch;color:var(--suave);}

.botones{margin-top:28px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.boton{
  display:inline-block;padding:13px 24px;border-radius:999px;text-decoration:none;
  font-weight:600;font-size:15px;border:1px solid var(--linea);background:var(--papel);
}
.boton.primario{background:var(--acento);border-color:var(--acento);color:#fff;}
/* Verde y glifo oscuro de WhatsApp: los de la marca, no inventados. */
.boton.wa{background:#25D366;border-color:#25D366;color:#0C2912;}

section.bloque{padding:44px 0;border-top:1px solid var(--linea);}
section.bloque h2{font-family:var(--serif);font-weight:600;font-size:clamp(24px,4vw,34px);margin:0 0 8px;}
.rejilla{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:22px;}
.tarjeta{background:var(--papel);border:1px solid var(--linea);border-radius:14px;padding:20px;}
.tarjeta h3{margin:0 0 6px;font-family:var(--serif);font-weight:600;font-size:20px;}
.tarjeta p{margin:0;color:var(--suave);font-size:15px;}

/* ── Carta (CONTRATO con la Suite: no renombrar estas clases) ───────────── */
section.menusec, section.drinks{padding:40px 0;border-top:1px solid var(--linea);}
section.menusec h2, section.drinks h2{
  font-family:var(--serif);font-weight:600;font-size:clamp(24px,4vw,34px);margin:0 0 4px;
}
section.menusec .intro, section.drinks .intro{color:var(--suave);margin:0 0 18px;}

.dishes{display:grid;gap:2px;}
article.dish{
  background:var(--papel);border:1px solid var(--linea);border-radius:12px;
  padding:14px 16px;margin-bottom:10px;
}
article.dish .row{display:flex;align-items:baseline;gap:10px;}
article.dish h3, article.dish h4{
  margin:0;font-family:var(--serif);font-weight:600;font-size:19px;line-height:1.25;
}
article.dish .dots{flex:1;border-bottom:1px dotted var(--linea);transform:translateY(-4px);}
article.dish .price{font-weight:700;color:var(--oro);white-space:nowrap;}
article.dish p{margin:6px 0 0;color:var(--suave);font-size:14.5px;}
/* Chip de plato. `Agotado hoy` lo pinta js/carta-en-vivo.js con esta misma
   clase: si la quitas, los agotados llegan de la Suite y no se ven. */
article.dish .flag{
  display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;
  background:var(--acento);color:#fff;font-family:var(--sans);
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle;
}
/* Un plato agotado: la Suite manda, y esto es lo que se ve cuando manda. */
article.dish.agotado h3, article.dish.agotado h4,
article.dish.agotado .price{text-decoration:line-through;opacity:.55;}
article.dish .thumb img{border-radius:10px;margin-top:10px;}

.dgroup{margin-bottom:26px;}
.dgroup h3{
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--acento);margin:0 0 10px;
}

/* ── Número de plato y alérgenos (fuera del contrato: no los lee la Suite) ─
   span.num va FUERA del h3 para que el nombre quede limpio; ul.alerg es una
   lista, no un <p>, para que gen-carta-json.mjs no la tome por descripción. */
article.dish .num{
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.06em;
  color:var(--acento);min-width:2.1em;align-self:center;opacity:.9;
}
article.dish .alerg{
  list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0;
}
/* Cada alérgeno es un botón redondo con su icono (assets/alergenos.svg), en el
   color de la leyenda de la carta impresa. Al pulsar (aria-expanded=true) se
   estira en pastilla y muestra el nombre; lo alterna js/carta.js. */
article.dish .alg{
  display:inline-flex;align-items:center;height:30px;padding:0 5px;border:0;border-radius:999px;
  background:var(--al,#777);color:#fff;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.04em;
  cursor:pointer;line-height:1;transition:padding .25s ease;
}
article.dish .alg svg{width:20px;height:20px;flex:none;}
article.dish .alg span{
  max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
  transition:max-width .3s ease,opacity .2s ease,margin .3s ease;
}
article.dish .alg[aria-expanded="true"]{padding:0 11px 0 5px;}
article.dish .alg[aria-expanded="true"] span{max-width:16ch;opacity:1;margin-left:6px;}
article.dish .alg:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.alg[data-al="g"]{--al:#C8552E}.alg[data-al="c"]{--al:#2E8BC9}.alg[data-al="m"]{--al:#5AAFD6}
.alg[data-al="p"]{--al:#1F3F8F}.alg[data-al="f"]{--al:#6B2E3A}.alg[data-al="a"]{--al:#4C9A3C}
.alg[data-al="l"]{--al:#C9971F}.alg[data-al="s"]{--al:#2F8F5B}.alg[data-al="k"]{--al:#8B5A2B}
.alg[data-al="t"]{--al:#A88C33}.alg[data-al="z"]{--al:#8C8266}.alg[data-al="d"]{--al:#5A3A2E}
.alg[data-al="x"]{--al:#6B2D8F}.alg[data-al="h"]{--al:#D9822B}
/* Índice de secciones bajo el título de la carta. */
.indice{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.indice a{
  font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.04em;
  padding:6px 12px;border-radius:999px;border:1px solid var(--linea);color:var(--tinta);text-decoration:none;
}
.indice a:hover{border-color:var(--acento);color:var(--acento);}
section.menusec, section.drinks{scroll-margin-top:84px;}

/* ── Menú del día ───────────────────────────────────────────────────────── */
.precio-menu{font-family:var(--serif);font-size:clamp(40px,9vw,72px);font-weight:600;line-height:1;}
.precio-menu sup{font-size:.42em;vertical-align:super;}

/* ── Pie ────────────────────────────────────────────────────────────────── */
footer.sitio{
  border-top:1px solid var(--linea);padding:34px 0 46px;color:var(--suave);font-size:14px;
}
footer.sitio a{color:var(--tinta);}
footer.sitio .legal{margin-top:14px;font-size:12.5px;opacity:.75;}

@media (max-width:520px){
  header.sitio .envoltorio{height:auto;padding-top:10px;padding-bottom:10px;flex-wrap:wrap;}
  header.sitio nav{margin-left:0;width:100%;}
}