/* Carta pública · mundo visual "Capote".
 *
 * Papel crema y azul tinta del local, filetes dorados, serif de alto contraste
 * para los títulos y tipografía del sistema para la interfaz. Las categorías
 * son tarjetas redondeadas con filas; la barra de navegación es vidrio
 * esmerilado y los platos aparecen al entrar en pantalla.
 *
 * Personalización por local: los tokens de :root se pisan en /r/locales.css
 * bajo body[data-slug="<slug>"]. La tinta del local (accentColor) la calcula
 * app.js para que siempre tenga contraste sobre el papel.
 */

/* Tipografías de título, una por mundo visual (ver DESIGN.md). El navegador
   sólo descarga la que el mundo del local realmente usa. Todas con licencia
   OFL, servidas desde el propio servidor. */
@font-face {
  font-family: "Bodoni Moda";
  font-weight: 400 900;
  font-display: swap;
  src: url("/r/fonts/BodoniModa-Variable.ttf") format("truetype");
}

@font-face {
  font-family: "Instrument Serif";
  font-weight: 400;
  font-display: swap;
  src: url("/r/fonts/InstrumentSerif-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Young Serif";
  font-weight: 400;
  font-display: swap;
  src: url("/r/fonts/YoungSerif-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Space Grotesk";
  font-weight: 300 700;
  font-display: swap;
  src: url("/r/fonts/SpaceGrotesk-Variable.ttf") format("truetype");
}

/* De afiche, para los locales que las piden desde su capa (locales.css):
   Anton es compacta y gritona, como Impact; Syne, ancha. */
@font-face {
  font-family: "Anton";
  font-weight: 400;
  font-display: swap;
  src: url("/r/fonts/Anton-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Syne";
  font-weight: 400 800;
  font-display: swap;
  src: url("/r/fonts/Syne-Variable.ttf") format("truetype");
}

:root {
  /* Papel y tintas */
  --papel: #f7f2e8;
  --papel-hondo: #ece3d3;
  --tarjeta: #fffdf8;
  --tinta: #08204f;
  --tinta-suave: #4a5573;
  --oro: #c8a24a;
  --oro-texto: #8a6a21;
  --arena: #efe6d4;
  --carbon: #0b1430;
  --linea: rgba(8, 32, 79, 0.1);

  /* Grano de papel: ruido SVG incrustado, sin archivos ni pedidos extra. */
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.22'/%3E%3C/svg%3E");

  /* Tinta del local: app.js la recalcula sobre el papel. */
  --acento: #04246f;
  --acento-texto: #04246f;
  --acento-relleno: #04246f;
  --acento-sobre: #fffdf8;

  /* Estados y realces que los mundos pueden pisar. */
  --nohay-fondo: rgba(163, 52, 31, 0.13);
  --nohay-texto: #8d2c19;
  --luz: #ffffff;
  --sombra-pastilla: 0 1px 2px rgba(8, 32, 79, 0.08), 0 4px 14px -6px rgba(8, 32, 79, 0.35);

  /* Tipografías. --display-peso acompaña a --display: las fuentes de un solo
     peso piden 400 para que el navegador no las engorde por su cuenta. */
  --display: "Bodoni Moda", "Times New Roman", serif;
  --display-peso: 500;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  /* Radios y profundidad */
  --r-tarjeta: 22px;
  --r-foto: 12px;
  --r-pastilla: 999px;
  --sombra-tarjeta: 0 1px 2px rgba(8, 32, 79, 0.05), 0 10px 30px -18px rgba(8, 32, 79, 0.35);
  --sombra-flotante: 0 8px 28px -10px rgba(8, 32, 79, 0.5);

  --ancho: 1080px;
  --barra: 60px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-underline-offset: 0.2em;
  scrollbar-color: var(--tinta-suave) var(--papel-hondo);
  scroll-behavior: smooth;
}

/* Tokens derivados del mundo. Van en `body` y no en `:root` a propósito: el
   mundo visual cambia --papel, --linea y --oro en el propio `body`, y un token
   que se calcula a partir de otros toma los valores del elemento donde está
   declarado. Declarados en :root se quedaban con los colores claros, y la
   barra del menú salía blanca sobre un mundo oscuro. */
body {
  --vidrio: color-mix(in srgb, var(--papel) 72%, transparent);
  --borde-grupo: 1px solid color-mix(in srgb, var(--linea) 70%, var(--oro) 30%);
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(180deg, var(--papel) 0%, var(--papel) 42%, var(--arena) 100%)
      fixed;
  color: var(--tinta);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  caret-color: var(--acento-texto);
  -webkit-font-smoothing: antialiased;
}

body.tiene-whatsapp {
  padding-bottom: 76px;
}

::selection {
  background: var(--acento-relleno);
  color: var(--acento-sobre);
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button,
input {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 2.5px solid var(--acento-texto);
  outline-offset: 3px;
  border-radius: 8px;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.icono {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Capa de grano sobre todo el fondo, por debajo del contenido. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--grano);
  opacity: 0.5;
  mix-blend-mode: multiply;
}

body > * {
  position: relative;
  z-index: 1;
}

.demo-banner {
  position: relative;
  z-index: 30;
  margin: 0;
  padding: 6px 16px;
  background: var(--carbon);
  color: var(--papel);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  text-align: center;
}

/* ---------- aparición al bajar ---------- */

.revelar {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms cubic-bezier(0.16, 1, 0.3, 1), transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.revelar.visible {
  opacity: 1;
  transform: none;
}

/* ---------- portada ---------- */

.portada {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 22px 20px 18px;
  text-align: center;
  background:
    radial-gradient(120% 78% at 50% -12%, color-mix(in srgb, var(--acento) 17%, transparent), transparent 70%),
    radial-gradient(90% 60% at 50% 108%, color-mix(in srgb, var(--oro) 20%, transparent), transparent 72%),
    transparent;
}

/* Con foto del local, el color lo pone la foto: los dos brillos se apagan para
   no ensuciarla. */
/* Guarda: la decoración del local repetida a lo ancho (data.decoration en
   modo "patrón"). Va de borde a borde, por eso compensa el padding del
   contenedor. Sin decoración cargada no existe: la carta no depende de ella. */
.guarda {
  height: var(--guarda-alto, 64px);
  /* Una ventana sobre el patrón, no el patrón achicado: a 64 px de alto un
     cuadrado entero deja los dibujos de 8 px. */
  background-repeat: repeat;
  background-size: var(--guarda-patron, 260px) auto;
  background-position: center;
  border-block: 1px solid var(--linea);
}

.portada .guarda {
  margin: 22px -20px -18px;
}

.portada.con-foto .guarda {
  margin-bottom: -26px;
}

.pie .guarda {
  justify-self: stretch;
  margin: -30px -20px 14px;
}

@media (min-width: 860px) {
  .guarda {
    height: var(--guarda-alto, 84px);
  }
  /* En escritorio la portada tiene 40px de relleno a los costados y 34px abajo. */
  .portada .guarda,
  .portada.con-foto .guarda {
    margin: 30px -40px -34px;
  }
}

.portada.con-foto {
  background: none;
  padding-bottom: 26px;
}

/* La foto va detrás de todo, apenas desenfocada. Encima, dos velos de papel:
   un halo claro detrás de la marca y un degradado que funde el pie de la
   portada con el fondo de la página. */
.portada-fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.portada-fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 46%;
  transform: scale(1.06);
  filter: blur(3px) saturate(1.06);
}

.portada-fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(74% 46% at 50% 24%, color-mix(in srgb, var(--papel) 86%, transparent), transparent 74%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--papel) 40%, transparent) 0%,
      color-mix(in srgb, var(--papel) 72%, transparent) 44%,
      color-mix(in srgb, var(--papel) 92%, transparent) 76%,
      var(--papel) 100%
    );
}

.portada-inner {
  max-width: var(--ancho);
  margin: 0 auto;
  display: grid;
  justify-items: center;
  gap: 10px;
}

.sello {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--tarjeta);
  box-shadow:
    0 0 0 1px var(--linea),
    0 0 0 5px color-mix(in srgb, var(--oro) 38%, transparent),
    var(--sombra-tarjeta);
}

.sello img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sello-inicial {
  display: grid;
  place-items: center;
  background: var(--acento-relleno);
  color: var(--acento-sobre);
  font-family: var(--display);
  font-weight: var(--display-peso);
  font-size: 38px;
  line-height: 1;
}

.local-nombre {
  font-family: var(--display);
  font-weight: var(--display-peso);
  font-size: clamp(38px, 11.5vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.local-logotipo {
  line-height: 0;
}

.local-logotipo img {
  display: block;
  width: min(300px, 76vw);
  height: auto;
}

.local-sub {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oro-texto);
}

.filete {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(300px, 74%);
  color: var(--oro);
}

.filete::before,
.filete::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.65;
}

.filete i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.local-frase {
  max-width: 34ch;
  font-family: var(--display);
  font-size: clamp(18px, 4.8vw, 26px);
  line-height: 1.22;
  text-wrap: pretty;
}

.local-nota {
  max-width: 54ch;
  font-size: 14.5px;
  color: var(--tinta-suave);
}

.portada-datos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  font-size: 14px;
  color: var(--tinta-suave);
}

.portada-datos span,
.portada-datos a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  text-decoration: none;
}

.portada-datos a:hover {
  text-decoration: underline;
}

.portada-datos .icono {
  width: 17px;
  height: 17px;
  color: var(--acento-texto);
}

@media (min-width: 860px) {
  .portada {
    padding: 40px 40px 34px;
  }
  .sello {
    width: 98px;
    height: 98px;
  }
  .local-logotipo img {
    width: 380px;
  }
}

/* ---------- selector de cartas ---------- */

/* Control segmentado: una pastilla con las cartas del local; la elegida se
   levanta como una tarjeta. */
.cartas {
  display: flex;
  gap: 4px;
  max-width: 100%;
  margin-top: 8px;
  padding: 4px;
  border: 1px solid var(--linea);
  border-radius: var(--r-pastilla);
  background: color-mix(in srgb, var(--papel-hondo) 70%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow-x: auto;
  scrollbar-width: none;
}
.cartas::-webkit-scrollbar {
  display: none;
}

.carta-opcion {
  flex: 1 0 auto;
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-pastilla);
  background: transparent;
  color: var(--tinta-suave);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 220ms cubic-bezier(0.16, 1, 0.3, 1), color 220ms ease, box-shadow 220ms ease;
}

.carta-opcion:hover {
  color: var(--tinta);
}

.carta-opcion[aria-pressed="true"] {
  background: var(--tarjeta);
  color: var(--acento-texto);
  box-shadow: var(--sombra-pastilla);
}

/* ---------- barra de vidrio ---------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--vidrio);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid var(--linea);
}

.barra-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 9px 12px;
  min-height: var(--barra);
}

.buscador {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  /* El filete va como sombra interior y no como borde: con borde, el botón que
     abre la búsqueda (adentro, inset 0) quedaba en 42 px. Se ve igual. */
  border: 0;
  box-shadow: inset 0 0 0 1px var(--linea);
  border-radius: var(--r-pastilla);
  background: color-mix(in srgb, var(--tarjeta) 78%, transparent);
  overflow: hidden;
  transition: width 280ms cubic-bezier(0.16, 1, 0.3, 1), flex-basis 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.buscador .icono {
  flex: none;
  margin: 0 8px 0 12px;
  color: var(--tinta-suave);
}

.buscador input {
  width: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 16px;
}

.buscador input::placeholder {
  color: var(--tinta-suave);
}

.buscador input::-webkit-search-cancel-button {
  display: none;
}

/* El botón cubre la pastilla cerrada y la abre al tocarla. */
.abrir-busqueda {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
}

.cerrar-busqueda {
  flex: none;
  display: none;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-right: 3px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tinta-suave);
}

.barra.buscando .buscador {
  flex: 1 1 auto;
  width: auto;
}

.barra.buscando .buscador input {
  width: 100%;
}

.barra.buscando .abrir-busqueda {
  display: none;
}

.barra.buscando .cerrar-busqueda {
  display: grid;
}

.barra.buscando .pestanas {
  display: none;
}

.pestanas {
  display: flex;
  gap: 7px;
  flex: 1;
  min-width: 0;
  padding: 3px 2px;
  margin-block: -1px;
  overflow-x: auto;
  scrollbar-width: none;
  /* Las pestañas se acomodan enteras al desplazarse y los dos bordes se
     desvanecen, así ninguna queda cortada contra el buscador. */
  scroll-snap-type: x proximity;
  scroll-padding-inline: 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 26px), transparent);
}
.pestanas::-webkit-scrollbar {
  display: none;
}

.pestana {
  flex: none;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 15px;
  border: 1px solid var(--linea);
  border-radius: var(--r-pastilla);
  background: color-mix(in srgb, var(--tarjeta) 70%, transparent);
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

/* Área de toque de 44 px sin cambiar cómo se ven: las pastillas miden 38 y las
   solapas de carta 42, y el mínimo para el dedo es 44. Una capa invisible
   agranda sólo la zona que responde al toque. */
.pestana,
.carta-opcion {
  position: relative;
}
.pestana::after,
.carta-opcion::after {
  content: "";
  position: absolute;
  inset: -3px 0;
}
.carta-opcion::after {
  inset: -1px 0;
}

.pestana[aria-current="true"] {
  background: var(--acento-relleno);
  border-color: var(--acento-relleno);
  color: var(--acento-sobre);
}

/* ---------- dibujos de las categorías (public/r/dibujos.js) ----------
   Si alguna categoría tiene dibujo, la barra cambia: cada categoría es un
   dibujo con el nombre abajo, todas del mismo ancho. La elegida se marca con
   una raya de la tinta del local debajo, no con una pastilla llena: el dibujo
   tiene que seguir viéndose. */
.dibujo {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* La barra con dibujos es más alta: lo que se acomoda debajo de ella (el
   salto a una sección) tiene que saberlo. */
body.con-dibujos {
  --barra: 100px;
}

.barra.con-dibujos .pestanas {
  gap: 2px;
  padding-block: 2px;
}

.barra.con-dibujos .pestana {
  flex-direction: column;
  justify-content: flex-start;
  gap: 5px;
  width: 104px;
  height: auto;
  min-height: 72px;
  padding: 7px 5px 8px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--tinta);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: normal;
}

.barra.con-dibujos .pestana::after {
  inset: 0;
}

.pestana-dibujo {
  flex: none;
  width: 34px;
  height: 34px;
  color: var(--acento-texto);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pestana-nombre {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-width: 100%;
  /* Renglón con aire: con menos, el recorte de las dos líneas se come las
     tildes de las mayúsculas (BODEGÓN quedaba BODEGON). */
  line-height: 1.3;
  padding-top: 1px;
  /* Una palabra más larga que la pestaña se parte en vez de pisar a la vecina. */
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Sin dibujo, en una barra con dibujos: el nombre solo, centrado en el mismo alto. */
.barra.con-dibujos .pestana:not(:has(.pestana-dibujo)) {
  justify-content: center;
}

.barra.con-dibujos .pestana[aria-current="true"] {
  background: color-mix(in srgb, var(--acento-texto) 10%, transparent);
  color: var(--tinta);
  box-shadow: inset 0 -3px 0 var(--acento-texto);
}

.barra.con-dibujos .pestana[aria-current="true"] .pestana-dibujo {
  transform: translateY(-1px) scale(1.06);
}

@media (hover: hover) {
  .barra.con-dibujos .pestana:hover .pestana-dibujo {
    transform: translateY(-2px);
  }
}

.categoria-dibujo {
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--acento-texto);
  align-self: center;
}

@media (prefers-reduced-motion: reduce) {
  .pestana-dibujo {
    transition: none;
  }
}

@media (min-width: 860px) {
  .barra-inner {
    padding: 10px 40px;
  }
  /* El buscador cede ancho cuando las pestañas lo necesitan: si no, la
     primera quedaba cortada contra él aunque sobrara lugar en la barra. */
  .buscador,
  .barra.buscando .buscador {
    flex: 0 1 264px;
    width: auto;
    min-width: 132px;
  }
  .buscador input {
    width: 100%;
  }
  .abrir-busqueda,
  .barra.buscando .cerrar-busqueda {
    display: none;
  }
  .barra.buscando .pestanas {
    display: flex;
  }
  /* En escritorio las pestañas se acomodan en varias líneas en vez de
     esconderse hacia el costado: hay lugar de sobra hacia abajo y así ninguna
     queda cortada ni hay que adivinar que la tira se desplaza. */
  .pestanas {
    flex-wrap: wrap;
    row-gap: 7px;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ---------- carta ---------- */

.carta {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 16px 14px 32px;
  display: grid;
  gap: 26px;
}

@media (min-width: 860px) {
  .carta {
    padding: 34px 40px 48px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    align-items: start;
  }
  /* La presentación de la carta va de lado a lado, arriba de las dos columnas. */
  .carta-descripcion {
    grid-column: 1 / -1;
    padding-bottom: 0;
  }
  /* En escritorio las pestañas con dibujo son más angostas: entran en un renglón. */
  .barra.con-dibujos .pestana {
    width: 92px;
  }
}

.categoria {
  scroll-margin-top: calc(var(--barra) + 10px);
}

.categoria-cabeza {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 0 6px 10px;
}

.categoria-cabeza h2 {
  font-family: var(--display);
  font-weight: var(--display-peso);
  font-size: clamp(24px, 6vw, 30px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.categoria-cabeza h2:focus {
  outline: none;
}

.categoria-cuenta {
  margin-left: auto;
  font-size: 13px;
  color: var(--tinta-suave);
  white-space: nowrap;
}

/* La voz del local: presentación de la carta y de cada sección. Texto de
   lectura, a lo sumo 60 caracteres por renglón para que no canse. */
.carta-descripcion,
.categoria-descripcion {
  max-width: 60ch;
  margin: 0;
  color: var(--tinta-suave);
  text-wrap: pretty;
}
.carta-descripcion {
  padding: 4px 6px 22px;
  font-size: 15.5px;
  line-height: 1.55;
}
.categoria-descripcion {
  padding: 0 6px 14px;
  margin-top: -4px;
  font-size: 14.5px;
  line-height: 1.5;
}

/* Dónde quedó el comensal al volver a la pestaña. */
.solapa {
  position: absolute;
  right: 6px;
  bottom: calc(100% + 2px);
  padding: 3px 11px;
  border-radius: var(--r-pastilla);
  background: var(--acento-relleno);
  color: var(--acento-sobre);
  font-size: 12.5px;
  font-weight: 600;
}

.grupo {
  background: var(--tarjeta);
  border: var(--borde-grupo);
  border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-tarjeta);
  overflow: hidden;
}

.plato + .plato {
  border-top: 1px solid var(--linea);
}

.plato-fila {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 62px;
  padding: 11px 14px;
  border: 0;
  background: transparent;
  text-align: left;
  color: inherit;
  transition: background 160ms ease;
}

button.plato-fila:hover {
  background: color-mix(in srgb, var(--papel-hondo) 45%, transparent);
}

/* Cuando la categoría tiene fotos, todas sus filas reservan la miniatura y el
   texto queda alineado. */
.grupo.con-fotos .plato-fila {
  grid-template-columns: 58px minmax(0, 1fr) auto auto;
}

.plato-foto {
  width: 58px;
  height: 58px;
  border-radius: var(--r-foto);
  object-fit: cover;
  background: var(--papel-hondo);
}

/* Plato sin foto en una categoría con fotos: casillero liso con el punto del
   filete, para que la columna siga alineada sin simular una imagen. Fuera de
   esas categorías no ocupa lugar. */
.grupo.con-fotos .plato-foto-vacia {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: var(--r-foto);
  background: color-mix(in srgb, var(--papel-hondo) 55%, transparent);
  color: var(--oro);
}

.grupo.con-fotos .plato-foto-vacia::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.8;
}

.plato-texto {
  min-width: 0;
}

.plato-nombre {
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.006em;
}

.plato-resumen {
  margin-top: 2px;
  font-size: 14px;
  color: var(--tinta-suave);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.plato.abierto .plato-resumen {
  display: none;
}

.plato-precio {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

/* Sin precio publicado: la columna desaparece en vez de mostrar un cero. */
.plato-precio.sin-precio {
  display: none;
}

.plato-chevron {
  width: 17px;
  height: 17px;
  color: var(--tinta-suave);
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.plato.abierto .plato-chevron {
  transform: rotate(180deg);
}

.plato.no-disponible .plato-nombre,
.plato.no-disponible .plato-precio {
  color: var(--tinta-suave);
}

.plato.no-disponible .plato-foto {
  opacity: 0.5;
}

.etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  height: 21px;
  padding: 0 9px;
  border-radius: var(--r-pastilla);
  background: color-mix(in srgb, var(--acento) 12%, transparent);
  color: var(--acento-texto);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.etiqueta-nohay {
  background: var(--nohay-fondo);
  color: var(--nohay-texto);
}

/* Detalle desplegable */
.plato-detalle {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.plato.abierto .plato-detalle {
  grid-template-rows: 1fr;
}

.plato-detalle-cuerpo {
  overflow: hidden;
  min-height: 0;
}

.plato-detalle-contenido {
  display: grid;
  gap: 12px;
  padding: 0 16px 18px;
}

.detalle-foto {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--r-foto);
  background: var(--papel-hondo);
}

.detalle-descripcion {
  font-size: 15.5px;
  max-width: 62ch;
}

.detalle-lleva {
  font-size: 14px;
  color: var(--tinta-suave);
  max-width: 62ch;
}

.detalle-bloque {
  border-top: 1px solid var(--linea);
  padding-top: 10px;
}

.detalle-titulo {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oro-texto);
}

.detalle-lista {
  display: grid;
  gap: 4px;
  margin-top: 6px;
  font-size: 15px;
}

.detalle-lista li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.detalle-lista .precio {
  font-weight: 600;
  white-space: nowrap;
}

.carta.compacta .plato-fila {
  min-height: 54px;
  padding-top: 9px;
  padding-bottom: 9px;
}
.carta.compacta .plato-resumen {
  display: none;
}

/* ---------- banda de descanso ---------- */

/* Corta la lista larga con el color de la marca: azul tinta, sello de agua y
   filetes dorados. */
.banda {
  grid-column: 1 / -1;
  position: relative;
  overflow: hidden;
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 40px 24px;
  border-radius: var(--r-tarjeta);
  background:
    radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--acento-relleno) 82%, var(--luz) 18%), var(--carbon)),
    var(--carbon);
  color: var(--luz); /* igual que el pie: el papel es oscuro en nocturno */
  text-align: center;
  box-shadow: var(--sombra-tarjeta);
}

.banda::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grano);
  opacity: 0.35;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.banda-sello {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  opacity: 0.92;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--oro) 45%, transparent);
}

.banda-sello img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banda-texto {
  font-family: var(--display);
  font-size: clamp(22px, 5.5vw, 30px);
  line-height: 1.2;
  max-width: 22ch;
  text-wrap: balance;
}

.banda-pie {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--oro) 80%, var(--luz));
}

.banda-pie::before,
.banda-pie::after {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

/* ---------- avisos ---------- */

.aviso {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 56px 20px;
  text-align: center;
}

.aviso-titulo {
  font-family: var(--display);
  font-weight: var(--display-peso);
  font-size: 26px;
  line-height: 1.1;
}

.aviso p {
  max-width: 40ch;
  color: var(--tinta-suave);
}

.boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--r-pastilla);
  background: var(--acento-relleno);
  color: var(--acento-sobre);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--sombra-tarjeta);
}

/* ---------- datos del local ---------- */

.datos {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 4px 14px 32px;
  display: grid;
  gap: 16px;
}

.datos-tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-tarjeta);
  padding: 18px;
  display: grid;
  gap: 12px;
}

.datos h2 {
  font-family: var(--display);
  font-weight: var(--display-peso);
  font-size: 24px;
}

.datos-lista {
  display: grid;
}

.datos-lista a,
.datos-lista .dato {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 46px;
  font-size: 15.5px;
  text-decoration: none;
}

.datos-lista a:hover {
  text-decoration: underline;
}

.datos-lista .icono {
  color: var(--acento-texto);
}

.horarios {
  display: grid;
  font-size: 15px;
}

.horarios div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 4px 0;
}

.horarios dt {
  color: var(--tinta-suave);
}

.horarios dd {
  font-weight: 600;
}

.horarios-nota {
  font-size: 13.5px;
  color: var(--tinta-suave);
}

@media (min-width: 860px) {
  .datos {
    padding: 4px 40px 44px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

/* ---------- WhatsApp y pie ---------- */

.whatsapp {
  position: fixed;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 25;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 16px;
  white-space: nowrap;
  border-radius: var(--r-pastilla);
  background: color-mix(in srgb, var(--acento-relleno) 94%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: var(--acento-sobre);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--sombra-flotante);
}

.pie {
  background: var(--carbon);
  /* --luz y no --papel: el fondo es --carbon, oscuro en los cuatro mundos,
     pero el papel es oscuro en nocturno y el texto desaparecía. --luz es clara
     en todos. */
  color: color-mix(in srgb, var(--luz) 84%, transparent);
  padding: 30px 20px calc(34px + env(safe-area-inset-bottom));
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 10px;
}

.pie-filete {
  width: 34px;
  height: 1px;
  background: var(--oro);
  opacity: 0.85;
}

.pie p {
  font-size: 13px;
}

.pie .firma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--r-pastilla);
  font-size: 12.5px;
  color: inherit;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 160ms ease, background 160ms ease;
}

.pie .firma:hover,
.pie .firma:focus-visible {
  opacity: 1;
  background: color-mix(in srgb, var(--luz) 12%, transparent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pie .firma img {
  width: 13px;
  height: auto;
  filter: invert(1) brightness(1.5);
}

/* ---------- pedido (ROADMAP.md, fases 1 y 2) ----------
   El carrito usa los mismos tokens que la carta: se adapta solo a cada mundo y
   a la tinta del local. */

body.tiene-pedido {
  padding-bottom: 84px;
}

/* Papel dorado y no la tinta del local: mezclada con el papel, una tinta
   oscura da un gris que parece deshabilitado. */
.pedido-aviso {
  max-width: calc(var(--ancho) - 28px);
  margin: 14px 14px 0;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--oro) 55%, transparent);
  background: color-mix(in srgb, var(--oro) 14%, var(--tarjeta));
  color: var(--tinta);
  font-size: 15px;
  line-height: 1.4;
}

.pedido-aviso.pedido-aviso-no {
  border-color: color-mix(in srgb, var(--nohay-texto) 30%, transparent);
  background: var(--nohay-fondo);
  color: var(--nohay-texto);
}

@media (min-width: 860px) {
  .pedido-aviso {
    margin: 18px auto 0;
    max-width: calc(var(--ancho) - 80px);
  }
}

.pedido-controles {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--linea);
  padding-top: 12px;
}

.pedido-grupo {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 2px;
  min-width: 0;
}

.pedido-grupo legend {
  padding: 0;
  margin-bottom: 4px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oro-texto);
}

.pedido-eleccion {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 15px;
  cursor: pointer;
}

.pedido-eleccion input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--acento-relleno);
}

.pedido-eleccion-nombre {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pedido-eleccion .precio,
.pedido-linea .precio {
  font-weight: 600;
  white-space: nowrap;
}

.pedido-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.pedido-cantidad {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--linea);
  border-radius: var(--r-pastilla);
  background: var(--papel);
}

.pedido-paso {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--r-pastilla);
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--acento-texto);
}

.pedido-paso:disabled {
  color: var(--tinta-suave);
  opacity: 0.45;
  cursor: default;
}

.pedido-cantidad-numero {
  min-width: 2ch;
  text-align: center;
  font-weight: 600;
}

.pedido-agregar {
  flex: 1 1 180px;
  justify-content: center;
}

.pedido-hecho:empty {
  display: none;
}

.pedido-hecho,
.pedido-nohay {
  font-size: 14px;
  color: var(--tinta-suave);
}

.pedido-nohay {
  border-top: 1px solid var(--linea);
  padding-top: 10px;
  color: var(--nohay-texto);
}

/* La barra de abajo: mismo vidrio con la tinta del local que la pastilla de
   WhatsApp, a lo ancho en el celular. */
.pedido-flotante {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 520px;
  min-height: 54px;
  margin: 0 auto;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-pastilla);
  background: color-mix(in srgb, var(--acento-relleno) 96%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: var(--acento-sobre);
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  box-shadow: var(--sombra-flotante);
}

.pedido-flotante-cuenta {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  border-radius: var(--r-pastilla);
  background: var(--acento-sobre);
  color: var(--acento-relleno);
  font-size: 14px;
}

.pedido-flotante-total {
  margin-left: auto;
  white-space: nowrap;
}

/* La hoja del pedido: sube desde abajo en el celular, centrada en escritorio. */
.pedido-hoja {
  width: 100%;
  max-width: 560px;
  max-height: min(88vh, 88dvh);
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: 24px 24px 0 0;
  background: var(--tarjeta);
  color: var(--tinta);
  box-shadow: var(--sombra-flotante);
  overflow: hidden;
}

.pedido-hoja::backdrop {
  background: rgba(8, 20, 48, 0.45);
}

.pedido-hoja-marco {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: min(88vh, 88dvh);
}

@media (min-width: 640px) {
  .pedido-hoja {
    margin: auto;
    border-radius: var(--r-tarjeta);
  }
}

.pedido-hoja-cabeza {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 20px;
  border-bottom: 1px solid var(--linea);
}

.pedido-hoja-cabeza h2 {
  font-family: var(--display);
  font-weight: var(--display-peso);
  font-size: 26px;
  line-height: 1.1;
}

.pedido-mesa {
  padding: 3px 11px;
  border-radius: var(--r-pastilla);
  background: color-mix(in srgb, var(--oro) 22%, var(--tarjeta));
  color: var(--tinta);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.pedido-cerrar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 0;
  border-radius: var(--r-pastilla);
  background: transparent;
  color: var(--tinta-suave);
}

.pedido-hoja-cuerpo {
  display: grid;
  gap: 14px;
  padding: 14px 20px 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pedido-lineas {
  display: grid;
}

.pedido-linea {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "texto precio"
    "cantidad cantidad";
  align-items: center;
  gap: 6px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linea);
}

.pedido-linea .pedido-linea-texto {
  grid-area: texto;
}

.pedido-linea .pedido-cantidad {
  grid-area: cantidad;
  justify-self: start;
}

.pedido-linea .precio {
  grid-area: precio;
}

.pedido-lineas-resumen .pedido-linea {
  grid-template-areas: "texto precio";
}

@media (min-width: 420px) {
  .pedido-linea {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "texto cantidad precio";
  }
}

.pedido-linea-texto {
  display: grid;
  min-width: 0;
}

.pedido-linea-nombre {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.pedido-linea-detalle {
  font-size: 13.5px;
  color: var(--tinta-suave);
}

.pedido-form {
  display: grid;
  gap: 14px;
}

.pedido-campo {
  display: grid;
  gap: 6px;
}

.pedido-campo label {
  font-size: 14px;
  font-weight: 600;
}

.pedido-campo input,
.pedido-campo textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--tinta) 22%, transparent);
  border-radius: 14px;
  background: var(--papel);
  color: var(--tinta);
  font: inherit;
  font-size: 16px; /* 16 px: iOS no hace zoom al tocar el campo */
  resize: vertical;
}

.pedido-total {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 700;
}

.pedido-enviar {
  justify-content: center;
  width: 100%;
  min-height: 52px;
  font-size: 16px;
}

.pedido-enviar:disabled {
  opacity: 0.55;
  cursor: default;
}

.pedido-nota-chica,
.pedido-vacio,
.pedido-anterior {
  font-size: 14px;
  color: var(--tinta-suave);
}

.pedido-enlace {
  justify-self: center;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--acento-texto);
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pedido-anterior .pedido-enlace {
  min-height: 32px;
  padding: 0 4px;
}

.pedido-mensaje {
  padding: 0 20px 14px;
  font-size: 14.5px;
}

.pedido-mensaje:empty {
  display: none;
}

.pedido-mensaje.es-error {
  color: var(--nohay-texto);
  font-weight: 600;
}

.pedido-estado {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--oro) 55%, transparent);
  background: color-mix(in srgb, var(--oro) 14%, var(--tarjeta));
  font-size: 17px;
  font-weight: 600;
}

.pedido-estado-rechazado,
.pedido-estado-vencido {
  border-color: transparent;
  background: var(--nohay-fondo);
  color: var(--nohay-texto);
}

/* ---------- carga ---------- */

.carga {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 40px 16px;
  display: grid;
  gap: 14px;
  justify-items: center;
}

.carga-sello {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: var(--papel-hondo);
}

.carga-linea {
  width: min(320px, 80%);
  height: 18px;
  border-radius: 9px;
  background: var(--papel-hondo);
}

.carga-grupo {
  width: 100%;
  max-width: 560px;
  height: 220px;
  margin-top: 10px;
  border-radius: var(--r-tarjeta);
  background: var(--papel-hondo);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
  .revelar {
    opacity: 1;
    transform: none;
  }
}