/* ─────────────────────────────────────────────────────────────
   Voy Volando · Santa Fe, Granada

   Los colores NO viven aquí. Están en /css/theme.css, que genera
   src/services/theme-store.js desde data/theme.json + data/themes/<id>.json
   y que el <link> de cada página carga ANTES que esta hoja.

   No reintroduzcas aquí un :root de color "por si acaso": mientras esta hoja
   no defina ningún color, un theme.css que falte deja la página obviamente
   rota, que es el fallo que se quiere. Con valores de respaldo, el fallo sería
   silencioso y publicaría la paleta vieja.
   ───────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* The HTML `hidden` attribute is UA-origin `display: none`, so any author
   rule that sets `display` on the same element (grid/flex layouts, mostly)
   silently wins the cascade and the element stays visible. Force it back. */
[hidden] { display: none !important; }

:root {
  /* Dirección "Correo Aéreo" (docs/marca/): americana vintage de aviación y
     correo postal. Alfa Slab One para titulares y precios, Barlow Condensed
     en mayúsculas para rótulos y botones, Barlow para el texto corrido. Es la
     misma tipografía que la carta impresa. */
  --display: 'Alfa Slab One', Rockwell, Georgia, serif;
  --heading: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Barlow', 'Segoe UI', sans-serif;

  /* Radios: un único valor de redondeo para botones, tarjetas y campos de
     formulario (preferencia de marca). Los sellos circulares conservan su
     propio radio al 50%, aparte. Las cuatro variables comparten valor para
     no tocar las ~40 reglas que las usan; cambiar de dirección gráfica
     vuelve a ser cambiar estas cinco líneas. */
  --radius-sm: 10px;
  --radius: 10px;
  --radius-lg: 10px;
  --radius-pill: 10px;
  --radius-round: 50%;     /* sellos y botones-icono circulares */

  /* Sombra dura de la marca: sin blur, desplazada, en oro. Es el gesto de
     serigrafía de la carta impresa, no una sombra de profundidad. */
  --shadow-hard: 4px 4px 0 var(--gold);
}

/* Banda "par avion": el separador del sistema, el mismo que en carta y flyer.
   Sustituye al ornamento decorativo y a los filetes de 1px entre secciones. */
.airmail-rule {
  height: 6px;
  background: repeating-linear-gradient(
    45deg,
    var(--tomato) 0 10px,
    var(--paper) 10px 20px,
    var(--navy) 20px 30px,
    var(--paper) 30px 40px
  );
}

body { transition: background 0.25s ease, color 0.25s ease; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

/* Visible focus (WCAG 2.4.7) */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--tomato); outline-offset: 3px; }
:target { scroll-margin-top: 90px; }

/* Skip link (WCAG 2.4.1) */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--ink); color: var(--paper);
  padding: 0.7rem 1.2rem; font-size: 0.9rem;
  /* Al recibir el foco se ancla a la esquina superior izquierda del viewport:
     solo se redondea el vértice que queda suelto. */
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

.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;
}

/* ── Utility typography ── */
.eyebrow {
  display: block;
  font-family: var(--heading);
  font-size: 0.95rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--tomato);
  margin-bottom: 1rem;
}
.section-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.8rem, 4.2vw, 2.8rem);
  line-height: 1.15;
  letter-spacing: 0;
  margin-bottom: 1.2rem;
}
.section-intro { color: var(--ink-soft); max-width: 56ch; }

/* .ornament (un ◆ entre dos filetes) se retiró con la dirección "Correo
   Aéreo": era decoración sin significado. Su papel lo hace .airmail-rule. */

/* ── Header / nav ── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: 1100px; margin: 0 auto;
  padding: 0.9rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  position: relative;
}
.header-right { display: flex; align-items: center; gap: 0.7rem; }
/* El logo es la mascota piloto del original. Margen libre alrededor igual a
   la altura del casco, y nunca sobre rojo (docs/marca/prompt-canva-carta.md). */
.brand {
  display: flex; align-items: center; gap: 0.6rem;
  color: var(--ink); text-decoration: none;
}
.brand-logo { width: 52px; height: 52px; object-fit: contain; flex: none; }
.brand-name {
  font-family: var(--heading); font-weight: 700;
  font-size: 1.35rem; letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1;
}

.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill); cursor: pointer;
  min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center;
  color: var(--ink);
}
.nav-toggle svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.theme-toggle {
  background: none; border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill); cursor: pointer;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--tomato); color: var(--tomato); }
.theme-toggle svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
}

.site-nav ul {
  display: flex; align-items: center; gap: 1.8rem; list-style: none;
}
.site-nav a {
  color: var(--ink-soft); text-decoration: none;
  font-family: var(--heading); font-size: 1rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.6rem 0;
}
.site-nav a:hover { color: var(--tomato); }
.site-nav .nav-cta {
  color: var(--on-tomato); background: var(--tomato-btn);
  padding: 0.6rem 1.2rem; border-radius: var(--radius-pill);
}
.site-nav .nav-cta:hover { background: var(--tomato-btn-hover); color: var(--on-tomato); }
.site-nav a[aria-current="page"] { color: var(--tomato); }
.site-nav .nav-cta[aria-current="page"] { color: var(--on-tomato); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px;
  padding: 0.8rem 1.8rem;
  border-radius: var(--radius-pill);
  font-family: var(--heading); font-size: 1.05rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; border: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.btn-primary {
  background: var(--tomato-btn); color: var(--on-tomato);
  box-shadow: var(--shadow-hard);
}
.btn-primary:hover { background: var(--tomato-btn-hover); }
/* La sombra dura no se difumina al pasar el ratón: el botón se desplaza hacia
   ella, como un sello que se presiona. */
.btn-primary:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--gold); }
.btn-outline {
  background: transparent; color: var(--ink);
  border: 2px solid var(--ink);
}
.btn-outline:hover { background: var(--ink); color: var(--paper); }

/* ── Sello circular ──
   El recurso de marca que hace de cifra, de número y de distintivo. Es lo
   único que conserva radio en todo el sistema. Ligeramente girado, como uno
   estampado a mano. */
.stamp {
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center;
  width: 8rem; height: 8rem;
  border: 3px solid currentColor; border-radius: var(--radius-round);
  color: var(--tomato); text-align: center; line-height: 1;
  transform: rotate(-8deg);
  flex: none;
}
.stamp-top, .stamp-bot {
  font-family: var(--heading); font-weight: 700;
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
}
.stamp-mid { font-family: var(--display); font-size: 1.9rem; }
/* El sello está pensado para cifras: Alfa Slab One es demasiado ancha para una
   palabra y se sale del círculo. Los sellos de texto van en condensed. */
.stamp-word .stamp-mid {
  font-family: var(--heading); font-weight: 700;
  font-size: 1.1rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.stamp-sm { width: 3.2rem; height: 3.2rem; border-width: 2px; }
.stamp-sm .stamp-mid { font-size: 1.3rem; }
.stamp-lg { width: 10rem; height: 10rem; }
.stamp-lg .stamp-mid { font-size: 3rem; }

/* ── Hero ──
   Banda de azul piloto a sangre y rejilla asimétrica: el texto a la izquierda
   y la mascota con su sello a la derecha. Antes era un bloque centrado sobre
   fondo liso, sin marca ni producto — el arranque intercambiable de cualquier
   plantilla. */
.hero {
  background: var(--navy);
  color: var(--on-navy);
  padding: clamp(3rem, 7vw, 5.5rem) 1.5rem clamp(3rem, 6vw, 4.5rem);
}
.hero-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.hero-mark {
  display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
}
.hero-logo { width: min(260px, 100%); height: auto; }
/* Sobre azul el rojo de marca no llega a 3:1; el oro da 7,8:1 (ver la tabla
   de docs/marca/tokens-web.md). Aquí el sello va en oro. */
.hero .stamp { color: var(--gold); }
/* El texto del hero vive sobre azul: el acento rojo no se lee ahí. */
.hero .eyebrow { color: var(--gold); }
.hero .hero-sub, .hero .hero-since { color: color-mix(in srgb, var(--on-navy) 80%, var(--navy)); }
.hero .btn-outline { color: var(--on-navy); border-color: var(--on-navy); }
.hero .btn-outline:hover { background: var(--on-navy); color: var(--navy); }
.hero-text { text-align: left; }
.hero h1 {
  font-family: var(--display);
  font-weight: 400;
  /* Alfa Slab One pesa mucho más que la serif anterior: al tamaño de antes el
     titular ocupaba tres líneas y se comía el hero entero. */
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: 0;
  margin-bottom: 1.4rem;
}
/* Sin italic: Alfa Slab One no tiene cursiva, así que el navegador sintetizaba
   una oblicua deformada. El énfasis lo lleva el color — en oro, porque el hero
   va sobre azul y ahí el rojo de marca se queda en 1,9:1. */
.hero h1 em { font-style: normal; color: var(--gold); }
.hero-sub {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--ink-soft);
  max-width: 46ch; margin: 0 0 2.2rem;
}
.hero-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; }
.actions-row { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }
.hero-since {
  margin-top: 3rem;
  font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-soft);
}

/* ── Sections ── */
.section { padding: clamp(3.5rem, 8vw, 6rem) 1.5rem; }
.section-alt { background: var(--paper-2); }

/* Banda de azul a sangre. Redefinir los tokens dentro del bloque invierte
   todo lo que hay dentro de una vez, sin duplicar una regla por componente. */
.section-navy {
  --paper: var(--navy);
  --paper-2: var(--navy);
  --ink: var(--on-navy);
  --ink-soft: color-mix(in srgb, var(--on-navy) 78%, var(--navy));
  --tomato: var(--gold);          /* sobre azul, 7,8:1; el rojo no llega a 3:1 */
  --line: color-mix(in srgb, var(--on-navy) 25%, transparent);
  --line-strong: color-mix(in srgb, var(--on-navy) 55%, transparent);
  background: var(--navy);
  color: var(--on-navy);
}

/* Galería a sangre completa: rompe el ancho de columna que repiten todas las
   demás secciones. */
.section-flush { padding-left: 0; padding-right: 0; }
.section-flush .gallery-head { padding: 0 1.5rem; }
.section-flush .gallery-grid { max-width: none; padding: 0; gap: 2px; }
.container { max-width: 1100px; margin: 0 auto; }
.container-narrow { max-width: 760px; margin: 0 auto; }

/* ── Story ── */
.story-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.story-text p { color: var(--ink-soft); margin-bottom: 1rem; }
/* La capitular se retiró: era un gesto de "plantilla editorial" que no está
   en el sistema de marca ni en la carta impresa. */
.story-card {
  border: 2px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hard);
  padding: clamp(1.8rem, 4vw, 3rem);
  text-align: center;
  background: var(--paper);
}
.story-card .stamp { margin-bottom: 0.4rem; }
.story-card .big-label {
  font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: 0.6rem;
}
.story-card hr { border: none; border-top: 1px solid var(--line); margin: 1.5rem 0; }
.story-card address { font-style: normal; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.7; }
.story-card address strong { color: var(--ink); font-weight: 700; }

/* ── Menu (printed-menu style) ── */
.menu-frame {
  border: 2px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hard);
  background: var(--paper);
  padding: clamp(1.6rem, 5vw, 3.5rem);
}
.menu-header { text-align: center; margin-bottom: 2.2rem; }
.menu-frame .airmail-rule { margin: 1.4rem 0; }

.allergen-filters {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
  margin: 0 0 2rem;
}
.allergen-filters-label {
  width: 100%; text-align: center;
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 0.4rem;
}
.chip {
  font-family: var(--heading); font-size: 0.95rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  min-height: 40px; padding: 0.45rem 1.1rem;
  background: transparent; color: var(--ink-soft);
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  cursor: pointer; transition: all 0.2s;
}
.chip:hover { color: var(--ink); border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--tomato-btn); border-color: var(--tomato-btn); color: var(--on-tomato); }

/* Multi-size price lines are long: let them wrap (nbsp inside each size keeps
   the breaks at the "·" separators) instead of overflowing. Used in the modal. */
.menu-price--multi { white-space: normal; }
.menu-alerg {
  font-size: 0.8rem; color: var(--ink-soft); letter-spacing: 0.02em;
}
.menu-alerg strong { font-weight: 700; color: var(--ink); }
.menu-empty { text-align: center; color: var(--ink-soft); padding: 2rem 0; }

/* Category groups */
.menu-cat-group + .menu-cat-group { margin-top: 2.6rem; }
.menu-category-title {
  font-family: var(--heading); font-weight: 700;
  font-size: 1.15rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tomato); margin-bottom: 1.2rem;
}

/* Card grid: 3 (desktop) / 2 (tablet) / 1 (mobile) */
.menu-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
@media (max-width: 860px) { .menu-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .menu-grid { grid-template-columns: 1fr; } }

.menu-card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius); overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.menu-card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-hard); }
.menu-card-media { position: relative; aspect-ratio: 4 / 3; background: var(--paper-2); }
.menu-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.menu-card-badge {
  position: absolute; top: 0.7rem; left: 0.7rem;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  /* #fff literal a propósito: el fondo es el tagColor que el panel elige por
     plato, un color arbitrario que ningún token puede predecir. El contrato es
     "blanco sobre fondo arbitrario" y se garantiza validando el contraste del
     tagColor en el panel, no tokenizando esto. */
  color: #fff; padding: 0.3rem 0.75rem; border-radius: var(--radius-pill);
  box-shadow: 0 1px 5px rgb(var(--shadow-rgb) / 0.28);
}
.menu-card-body { padding: 1rem 1.1rem 0.4rem; flex: 1; display: flex; flex-direction: column; }
.menu-card-name {
  font-family: var(--display); font-weight: 400; font-size: 1.2rem;
  line-height: 1.2; margin-bottom: 0.4rem;
}
.menu-card-desc {
  color: var(--ink-soft); font-size: 0.9rem; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.menu-card-more {
  align-self: flex-start; margin-top: 0.55rem; padding: 0;
  background: none; border: none; cursor: pointer;
  font-family: var(--body); font-weight: 700; font-size: 0.85rem;
  color: var(--tomato); text-decoration: underline; text-underline-offset: 2px;
}
.menu-card-more:hover { color: var(--tomato-dark); }
.menu-card-foot {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem; padding: 0.7rem 1.1rem 1.1rem;
}
.menu-card-price { font-family: var(--display); font-weight: 400; font-size: 1.05rem; }
.menu-card-foot .btn-add-item { min-height: 40px; padding: 0.5rem 1.4rem; font-size: 0.85rem; }

/* ── Carta sin fotos ──
   Mientras los platos no tengan foto subida, la tarjeta deja de reservar el
   hueco 4/3 (que es lo que la estiraba hasta ~410px en móvil) y se lee como una
   fila: texto a la izquierda, precio a la derecha. En 360px el marco de la
   carta y la sección dejan ~260px útiles, así que partirlos en dos columnas
   dejaría 83px de texto y trocearía nombres y descripciones — de ahí que aquí
   la fila ocupe el ancho entero y las columnas no lleguen hasta 720px.
   Lo activa renderMenu() poniendo .menu-cards--flat en #menu-cards. */
.menu-cards--flat .menu-grid { grid-template-columns: 1fr; gap: 0.8rem; }
@media (min-width: 720px) { .menu-cards--flat .menu-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .menu-cards--flat .menu-grid { grid-template-columns: repeat(3, 1fr); } }

.menu-card--flat { flex-direction: row; align-items: stretch; gap: 0.6rem; }
.menu-card--flat .menu-card-body { padding: 0.75rem 0 0.75rem 0.95rem; justify-content: center; }
/* La columna de texto de la fila es estrecha (~150px en un móvil de 390px):
   al tamaño de tarjeta con foto, nombres de dos palabras como "Cuatro quesos"
   partían en dos líneas y estiraban toda la fila. */
.menu-card--flat .menu-card-name { font-size: 1.05rem; margin-bottom: 0.25rem; }
.menu-card--flat .menu-card-desc { font-size: 0.85rem; line-height: 1.4; }
.menu-card--flat .menu-card-more { margin-top: 0.35rem; font-size: 0.8rem; }
/* Sin foto sobra alto: la descripción más larga son 94 caracteres, así que cabe
   entera y el modal deja de hacer falta solo para leerla. */
.menu-card--flat .menu-card-desc { -webkit-line-clamp: none; display: block; overflow: visible; }
.menu-card--flat .menu-card-foot {
  flex-direction: column; align-items: flex-end; justify-content: center;
  gap: 0.35rem; margin-top: 0; padding: 0.75rem 0.95rem 0.75rem 0;
  text-align: right; flex: none;
}
.menu-card--flat .menu-card-price { white-space: nowrap; }
/* El tag vuelve al flujo, junto al nombre: sin foto no hay nada sobre lo que
   superponerlo. Hereda el color de fondo que el panel fija por plato. */
.menu-card-badge--inline {
  position: static; display: inline-block; vertical-align: 0.18em;
  margin-left: 0.45rem; box-shadow: none;
}
.menu-detail-tags { margin-top: 0.5rem; }

/* Plegado de categorías largas. Cuántos platos se ven lo decide COLLAPSE_TO en
   main.js, que marca los sobrantes; aquí solo se ocultan, así que el número no
   vive duplicado en las dos hojas. */
.menu-cat-group.is-collapsed .menu-card--overflow { display: none; }
.menu-cat-toggle {
  display: block; margin: 0.9rem auto 0; padding: 0.5rem 1.3rem;
  min-height: 40px; cursor: pointer;
  background: transparent; color: var(--tomato);
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  font-family: var(--heading); font-size: 0.9rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.menu-cat-toggle:hover { background: var(--tomato-btn); border-color: var(--tomato-btn); color: var(--on-tomato); }

/* ── Atajos por categoría ──
   Una sola línea deslizable en móvil; las máscaras de los extremos son las que
   dicen que hay más categorías fuera de vista. Deliberadamente NO reutiliza
   .chip: los chips de alérgenos filtran y estos anclan, y compartir clase
   ataría el día que uno de los dos cambie de aspecto. Tampoco es sticky: la
   cabecera ya lo es y en un móvil de 640px dos barras fijas se comen el
   viewport. */
.menu-jump { margin: 0 0 1.4rem; }
.menu-jump-label {
  display: block; font-family: var(--heading); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 0.4rem;
}
.menu-jump-track {
  display: flex; gap: 0.5rem; overflow-x: auto;
  scroll-snap-type: x proximity; scroll-padding-inline: 1.2rem;
  scrollbar-width: none; padding-bottom: 0.2rem;
  /* En una máscara solo cuenta el canal alfa, no el tono: currentColor es
     siempre opaco y evita clavar un color literal en esta hoja. */
  mask-image: linear-gradient(90deg, transparent 0, currentColor 1.2rem,
                              currentColor calc(100% - 1.2rem), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, currentColor 1.2rem,
                              currentColor calc(100% - 1.2rem), transparent 100%);
}
.menu-jump-track::-webkit-scrollbar { display: none; }
.jump-link {
  scroll-snap-align: start; white-space: nowrap; flex: none;
  font-family: var(--heading); font-size: 0.9rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  padding: 0.4rem 0.9rem; border: 1px solid var(--line);
  border-radius: var(--radius-pill); color: var(--ink-soft);
}
.jump-link:hover { color: var(--ink); border-color: var(--ink); }
/* Desde aquí las categorías caben en una línea: sin overflow, una máscara
   difuminando los bordes mentiría sobre que hay más contenido al lado. */
@media (min-width: 900px) {
  .menu-jump-track {
    flex-wrap: wrap; overflow: visible;
    mask-image: none; -webkit-mask-image: none;
  }
}

/* "Ver más" detail modal (reuses .modal skeleton) */
.menu-detail { position: relative; }
/* Doble clase: .modal-close se define más abajo y ganaría por orden de cascada. */
.menu-detail .menu-detail-close {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2;
  width: 2.2rem; height: 2.2rem; padding: 0; margin: 0; border-radius: var(--radius-round);
  /* #fff literal a propósito: encima va un velo oscuro sobre la foto del plato,
     no una superficie del tema. */
  background: rgb(var(--scrim-rgb) / 0.5); color: #fff;
}
.menu-detail .menu-detail-close:hover { background: rgb(var(--scrim-rgb) / 0.72); color: #fff; }
/* Sin foto no hay velo oscuro debajo del aspa: sale del absolute y se apoya en
   una superficie del tema, para no quedar flotando sobre el título. Va después
   de la regla de arriba a propósito — misma especificidad, gana el orden. */
.menu-detail--flat .menu-detail-close {
  position: static; float: right; margin: 0 0 0.3rem 0.6rem;
  background: var(--paper-2); color: var(--ink);
}
.menu-detail--flat .menu-detail-close:hover { background: var(--line); color: var(--ink); }
.menu-detail-media {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden;
  background: var(--paper-2);
  /* Tope de alto: en pantallas apaisadas o bajas la foto no debe empujar el
     precio y el botón "Pedir" fuera de la vista. width:100% fija el ancho para
     que el tope recorte solo el alto (si no, aspect-ratio encoge ambos). */
  width: 100%; max-height: 42vh; max-height: 42dvh;
}
.menu-detail-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.menu-detail-desc { color: var(--ink-soft); line-height: 1.55; }
.menu-detail-price { font-family: var(--display); font-weight: 400; font-size: 1.25rem; }
.menu-detail-actions .btn { width: 100%; }

/* Menu as PDF */
.menu-pdf { text-align: center; padding: 1.5rem 0 0.5rem; }
.menu-pdf p { color: var(--ink-soft); margin-bottom: 1.4rem; }
/* "both" mode: the PDF link sits under the cards, set off by a divider */
.menu-pdf--inline { margin-top: 2.6rem; padding-top: 2rem; border-top: 1px dashed var(--line); }

/* ── Monthly special ── */
.monthly-special-box {
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  outline: 1px solid var(--line); outline-offset: 5px;
  background: var(--paper);
  padding: clamp(1.6rem, 4vw, 2.8rem);
}
.monthly-special-stamp {
  width: clamp(96px, 14vw, 130px); height: clamp(96px, 14vw, 130px);
  border: 2px solid var(--tomato); border-radius: var(--radius-round);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--tomato); text-align: center;
  transform: rotate(-8deg);
  font-family: var(--display);
}
.monthly-special-stamp .st-top { font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; font-family: var(--body); font-weight: 700; }
.monthly-special-stamp .st-mid { font-size: 1.7rem; font-weight: 400; line-height: 1.1; }
.monthly-special-text h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 0.6rem; }
.monthly-special-text .ms-badge {
  display: inline-block; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tomato); border: 1px solid currentColor;
  padding: 0.25rem 0.7rem; border-radius: var(--radius-pill); margin-bottom: 0.8rem;
}
.monthly-special-text p { color: var(--ink-soft); margin-bottom: 1.2rem; max-width: 58ch; }

/* The stamp sits in the first column on its own; with a photo it moves on top
   of it, so the box keeps the same two-column shape either way. */
.ms-visual { position: relative; display: flex; align-items: center; justify-content: center; }
/* Natural ratio, no crop: the owner uploads whatever the promo graphic is
   (square, portrait, a flyer with text at the top) and cropping it to a fixed
   box beheaded the wording. The card grid does crop, but there consistency
   between cells matters more. */
.ms-photo {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.monthly-special-box.has-image { grid-template-columns: minmax(0, 0.95fr) 1fr; }
.has-image .monthly-special-stamp {
  position: absolute; right: -14px; bottom: -14px;
  width: clamp(76px, 10vw, 104px); height: clamp(76px, 10vw, 104px);
  background: var(--paper);
}

/* ── Legal pages (aviso legal, privacidad) ──
   Páginas sueltas, sin nav ni JS: el modo oscuro les llega igual porque el
   tema vive en un @media prefers-color-scheme, no en el toggle. */
.legal-header { border-bottom: 1px solid var(--line); padding: 1.1rem 0; }
.legal-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.legal-back { font-size: 0.86rem; color: var(--ink-soft); }
.legal-back:hover { color: var(--tomato); }
.legal-prose h1 { margin-bottom: 2rem; }
.legal-prose h2 {
  font-family: var(--display); font-weight: 400;
  font-size: 1.25rem; margin: 2.2rem 0 0.7rem;
}
.legal-prose p, .legal-prose li { color: var(--ink-soft); margin-bottom: 0.9rem; }
.legal-prose ul { padding-left: 1.2rem; }
.legal-prose a { color: var(--tomato); text-decoration: underline; }
.legal-prose code {
  font-size: 0.88em; background: var(--paper-2);
  padding: 0.1rem 0.35rem; border-radius: var(--radius-sm);
}
.legal-lead {
  border-left: 3px solid var(--tomato);
  padding: 0.2rem 0 0.2rem 1rem; margin-bottom: 2rem;
}
.legal-data {
  display: grid; grid-template-columns: minmax(140px, auto) 1fr;
  gap: 0.45rem 1.2rem; margin: 1.2rem 0 1.8rem;
}
.legal-data dt { font-weight: 700; font-size: 0.9rem; }
.legal-data dd { color: var(--ink-soft); font-size: 0.95rem; }
.legal-updated { font-size: 0.82rem; margin-top: 2.5rem; font-style: italic; }

@media (max-width: 520px) {
  .legal-data { grid-template-columns: 1fr; gap: 0.1rem 0; }
  .legal-data dd { margin-bottom: 0.7rem; }
}

/* ── Offers ── */
.offers-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem; margin-top: 2.5rem;
}
.offer {
  display: flex; flex-direction: column;
  border: 1px solid var(--line-strong); background: var(--paper);
  border-radius: var(--radius); overflow: hidden;
}
.offer-media { aspect-ratio: 4 / 3; overflow: hidden; }
.offer-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.5s ease;
}
.offer:hover .offer-media img { transform: scale(1.04); }
.offer-body { padding: 1.2rem 1.3rem 1.4rem; }
.offer-body h3 {
  font-family: var(--display); font-weight: 400;
  font-size: 1.25rem; margin-bottom: 0.4rem;
}
.offer-body p { color: var(--ink-soft); font-size: 0.92rem; margin: 0; }

/* ── Services ── */
.services-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2rem; margin-top: 2.5rem;
}
.service { padding-top: 0.4rem; }
.service .stamp { margin-bottom: 0.9rem; }
.service .num {
  font-family: var(--display);
  color: var(--tomato); font-size: 1rem;
}
.service h3 { font-family: var(--display); font-weight: 400; font-size: 1.3rem; margin: 0.3rem 0 0.5rem; }
.service p { color: var(--ink-soft); font-size: 0.95rem; }
.service a { color: var(--tomato); font-weight: 700; }

/* ── Gallery ── */
.gallery-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem; margin-top: 2.5rem;
}
.gallery-cell {
  aspect-ratio: 1; overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.gallery-cell:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; min-height: 260px; }
.gallery-cell img { width: 100%; height: 100%; object-fit: cover; }
.gallery-empty { color: var(--ink-soft); text-align: center; padding: 2.5rem 1rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); margin-top: 2.5rem; }

/* ── Reviews ── */
.reviews-head { display: flex; align-items: baseline; gap: 1.2rem; flex-wrap: wrap; margin: 2rem 0; }
.reviews-head .score { font-family: var(--display); font-weight: 400; font-size: 3rem; line-height: 1; }
.reviews-head .stars { color: var(--tomato); font-size: 1.1rem; letter-spacing: 0.1em; }
.reviews-head .total { color: var(--ink-soft); font-size: 0.88rem; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.review {
  border: 1px solid var(--line); background: var(--paper);
  border-radius: var(--radius);
  padding: 1.4rem;
}
.review .review-head { display: flex; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.7rem; }
.review .review-name { font-weight: 700; font-size: 0.92rem; }
.review .review-date { color: var(--ink-soft); font-size: 0.78rem; }
.review .review-stars { color: var(--tomato); font-size: 0.85rem; white-space: nowrap; }
.review .review-text { color: var(--ink-soft); font-size: 0.92rem; }

/* ── FAQ ── */
.faq-list { margin-top: 2rem; }
.faq-list details {
  border-top: 1px solid var(--line);
  padding: 1rem 0;
}
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary {
  font-family: var(--display); font-weight: 400; font-size: 1.1rem;
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  min-height: 44px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; color: var(--tomato); font-size: 1.4rem; }
.faq-list details[open] summary::after { content: '–'; }
.faq-list details p { color: var(--ink-soft); padding-top: 0.5rem; max-width: 62ch; }

/* ── Contact ── */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
/* Grid items default to a content-based min-width, so an unbreakable
   string (e.g. the email address) can force this track wider than the
   viewport at narrow widths. min-width: 0 lets it shrink to the track
   size; overflow-wrap below then wraps the long string instead of
   pushing the layout out. */
.contact-grid > * { min-width: 0; }
.info-item { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.info-item dt {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-soft);
  min-width: 90px; padding-top: 0.2rem;
}
.info-item dd { font-size: 1rem; overflow-wrap: anywhere; }
/* Hours come from the panel as one field with a line per block of days. */
#hours-value { white-space: pre-line; }
.info-item a { color: var(--ink); text-decoration-color: var(--tomato); }
.info-item a:hover { color: var(--tomato); }

.contact-form { display: grid; gap: 1.1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: grid; gap: 0.35rem; }
.field label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem; min-height: 48px;
  resize: vertical;
}
.field textarea { min-height: 120px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--tomato); outline-offset: 1px;
}
.form-note { font-size: 0.82rem; color: var(--ink-soft); }

/* ── Online ordering: cart FAB, drawer, item modal ──
   Reuses .field/.btn from the contact form and .chip's radius language;
   all injected at runtime by cart.js (index.html only loads the script).
   MOBILE-FIRST block: base rules target phones; @media (min-width: 861px)
   scales up. The rest of this sheet is desktop-first (max-width) — the two
   strategies don't collide because this block's selectors are self-contained. */
body.cart-scroll-lock { overflow: hidden; }

.cart-fab {
  position: fixed; z-index: 150;
  right: calc(1rem + env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  width: 56px; height: 56px; border-radius: var(--radius-round);
  background: var(--tomato-btn); color: var(--on-tomato); border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; cursor: pointer;
  box-shadow: 0 6px 20px rgb(var(--shadow-rgb) / 0.25);
  transition: background 0.2s, transform 0.2s;
}
.cart-fab:hover { background: var(--tomato-btn-hover); transform: translateY(-2px); }
.cart-fab-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: var(--radius-pill); background: var(--ink); color: var(--paper);
  font-family: var(--body); font-size: 0.72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--paper);
}

/* Generic overlay/modal (also used by the item-customization modal) */
.modal-overlay, .cart-drawer-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgb(var(--scrim-rgb) / 0.55);
  display: none; align-items: flex-end; justify-content: center;
  padding: 0;
}
.modal-overlay.open, .cart-drawer-overlay.open { display: flex; }
.modal {
  background: var(--paper); border: 1px solid var(--line-strong);
  width: 100%; max-height: 92vh; max-height: 92dvh;
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem clamp(0.9rem, 4vw, 1.4rem); border-bottom: 1px solid var(--line);
}
.modal-title { font-family: var(--display); font-weight: 400; font-size: 1.2rem; }
.modal-close {
  background: none; border: none; color: var(--ink-soft); cursor: pointer;
  font-size: 1.6rem; line-height: 1; padding: 0.6rem;
  margin: -0.6rem; display: inline-flex; align-items: center; justify-content: center;
}
.modal-close:hover { color: var(--tomato); }
.modal-body {
  padding: 1.2rem clamp(0.9rem, 4vw, 1.4rem); overflow-y: auto; display: grid; gap: 1.1rem;
  overscroll-behavior: contain;
  /* align-content:start → las filas conservan su alto de contenido y el body
     desborda (y scrollea) en vez de aplastar el texto cuando un hijo rígido
     (imagen con aspect-ratio) no cede. min-height:0 permite encoger como
     flex item dentro de .modal, que tiene overflow:hidden. */
  align-content: start; min-height: 0;
}
.modal-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1.1rem clamp(0.9rem, 4vw, 1.4rem); border-top: 1px solid var(--line);
}
.modal-footer .btn { flex: 1 1 auto; }
.cart-modal-price { font-family: var(--display); font-weight: 400; font-size: 1.2rem; }
.cart-modal-desc { color: var(--ink-soft); font-size: 0.92rem; }

.cart-modal-sizes, .cart-modal-mods { border: none; display: grid; gap: 0.5rem; }
.cart-modal-sizes legend, .cart-modal-mods legend, .cart-fulfillment legend, .cart-payment legend {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); padding: 0 0 0.4rem; margin: 0;
}
.cart-modal-invalid legend { color: var(--tomato); }
.field.cart-modal-invalid label { color: var(--tomato); }
.cart-radio {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.94rem; cursor: pointer; min-height: 44px;
}
.cart-radio input { width: 18px; height: 18px; accent-color: var(--tomato-btn); flex-shrink: 0; }
.cart-radio input:disabled + * { opacity: 0.5; }
.cart-radio:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }

.cart-modal-qty-row, .cart-total-row, .cart-subtotal-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.cart-total-row { font-family: var(--display); font-weight: 400; font-size: 1.15rem; padding-top: 0.4rem; }
.cart-qty { display: flex; align-items: center; gap: 0.7rem; }
.cart-qty-btn {
  width: 44px; height: 44px; border-radius: var(--radius-round);
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.cart-qty-btn:hover { border-color: var(--tomato); color: var(--tomato); }
.cart-qty-val { min-width: 1.4rem; text-align: center; font-weight: 700; }

/* Drawer */
.cart-drawer {
  background: var(--paper); width: 100%; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; border-left: none;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.cart-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem clamp(0.9rem, 4vw, 1.4rem); border-bottom: 1px solid var(--line);
}
.cart-drawer-header h2 { font-family: var(--display); font-weight: 400; font-size: 1.3rem; }
.cart-drawer-body {
  padding: 1.2rem clamp(0.9rem, 4vw, 1.4rem); overflow-y: auto; flex: 1;
  overscroll-behavior: contain;
}
.cart-drawer-footer {
  border-top: 1px solid var(--line-strong); background: var(--paper);
  display: grid; gap: 0.6rem;
  padding: 0.9rem clamp(0.9rem, 4vw, 1.4rem) calc(0.9rem + env(safe-area-inset-bottom, 0px));
}
.cart-empty { color: var(--ink-soft); text-align: center; padding: 2.5rem 0; }

.cart-lines { list-style: none; display: grid; gap: 1rem; }
.cart-line { padding-bottom: 1rem; border-bottom: 1px dashed var(--line); }
.cart-line-main { display: flex; justify-content: space-between; gap: 0.8rem; font-weight: 700; flex-wrap: wrap; }
.cart-line-name { overflow-wrap: anywhere; }
.cart-line-mods, .cart-line-notes { font-size: 0.86rem; color: var(--ink-soft); margin-top: 0.2rem; }
.cart-line-warning { font-size: 0.82rem; font-weight: 700; color: var(--tomato); margin-top: 0.3rem; }
.cart-line-blocked .cart-line-name { color: var(--tomato); }
.cart-line-actions {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 0.6rem;
}
.cart-line-remove {
  background: none; border: none; color: var(--ink-soft);
  font-size: 0.82rem; text-decoration: underline; cursor: pointer;
  padding: 0.6rem 0.3rem; margin: -0.6rem -0.3rem;
}
.cart-line-remove:hover { color: var(--tomato); }

.cart-subtotal-row {
  margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line-strong);
  font-weight: 700;
}

.cart-checkout { display: grid; gap: 1.1rem; margin-top: 1.6rem; }
.cart-fulfillment, .cart-payment { border: none; display: grid; gap: 0.3rem; padding: 0; }
.cart-delivery-fields { display: grid; gap: 1.1rem; }
.cart-delivery-note { font-size: 0.86rem; color: var(--ink-soft); }
.cart-address-wrap { position: relative; }
.cart-address-suggestions {
  position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + 2px);
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  list-style: none; max-height: 240px; overflow-y: auto;
  box-shadow: 0 6px 20px rgb(var(--shadow-rgb) / 0.15);
}
.cart-address-suggestions li {
  padding: 0.7rem 0.9rem; font-size: 0.9rem; cursor: pointer; min-height: 44px; display: flex; align-items: center;
}
.cart-address-suggestions li:hover { background: var(--paper-2); color: var(--tomato); }
.cart-banner {
  font-size: 0.9rem; font-weight: 700; padding: 0.8rem 1rem;
  border-radius: var(--radius); border: 1px solid currentColor;
}
.cart-banner-closed { color: var(--tomato); background: color-mix(in srgb, var(--tomato) 10%, transparent); }
.cart-error { color: var(--tomato); font-size: 0.88rem; font-weight: 700; }
.cart-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.cart-cancel-notice { font-size: 0.82rem; color: var(--ink-soft); }

@media (min-width: 861px) {
  .cart-fab { width: 60px; height: 60px; right: 1.2rem; bottom: 1.2rem; }
  .modal-overlay { align-items: center; padding: 1rem; }
  .modal { max-width: 480px; max-height: 88vh; max-height: 88dvh; border-radius: var(--radius-lg); }
  .cart-drawer-overlay { justify-content: flex-end; }
  .cart-drawer { max-width: 420px; border-left: 1px solid var(--line-strong); }
}

@media (max-height: 520px) {
  .modal-header, .cart-drawer-header { padding-top: 0.7rem; padding-bottom: 0.7rem; }
  .modal-footer, .cart-drawer-footer { padding-top: 0.6rem; padding-bottom: 0.6rem; }
  .modal { max-height: 100vh; max-height: 100dvh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}

/* ── Order confirmation page (pedido.html) ── */
.order-code {
  font-family: var(--display); font-weight: 400; text-align: center;
  font-size: clamp(2.2rem, 6vw, 3.2rem); letter-spacing: 0.02em;
}
.order-status-line { text-align: center; font-weight: 700; font-size: 1.15rem; margin: 0.6rem 0 1.2rem; }
.order-status-pending { color: var(--ink-soft); }
.order-status-active { color: var(--tomato); }
.order-status-done { color: var(--ink); }
.order-status-muted { color: var(--ink-soft); opacity: 0.75; }
.order-meta { text-align: center; color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 1.8rem; }
.order-items { list-style: none; display: grid; gap: 1rem; }
.order-item { padding-bottom: 1rem; border-bottom: 1px dashed var(--line); }
.order-item-main { display: flex; justify-content: space-between; gap: 0.8rem; font-weight: 700; flex-wrap: wrap; }
.order-item-main .order-item-name { overflow-wrap: anywhere; }
.order-item-mods, .order-item-notes { font-size: 0.86rem; color: var(--ink-soft); margin-top: 0.2rem; }
.order-total-row { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line-strong); }
.order-cancel { margin-top: 1.4rem; text-align: center; display: grid; gap: 0.6rem; }
.order-cancel-countdown { font-size: 0.82rem; color: var(--ink-soft); }
.order-cancel-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Carta estática (/carta/) ──
   La portada pinta la carta en el navegador; /carta/ la sirve ya escrita en el
   HTML para que Google la indexe. Sin tarjetas ni fotos: es una lista legible
   que no depende de JavaScript. */
.carta-group { margin-top: 3rem; }
.carta-group .section-title { text-align: left; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.carta-list {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 2.5rem;
}
.carta-item { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.carta-item-name { font-family: var(--display); font-size: 1.05rem; font-weight: 600; margin: 0; }
.carta-item-desc { font-size: 0.92rem; color: var(--ink-soft); margin: 0.25rem 0 0; }
.carta-item-price { font-size: 0.92rem; margin: 0.35rem 0 0; color: var(--tomato); }
.carta-item-alerg { font-size: 0.82rem; color: var(--ink-soft); margin: 0.35rem 0 0; }

@media (max-width: 720px) {
  .carta-list { grid-template-columns: 1fr; gap: 0; }
}

/* ── Footer ── */
.site-footer {
  border-top: 1px solid var(--line-strong);
  background: var(--paper-2);
  padding: 2.5rem 1.5rem;
}
.footer-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  gap: 1.5rem; flex-wrap: wrap;
}
.footer-brand {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--heading); font-weight: 700;
  font-size: 1.2rem; letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.footer-brand img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.footer-inner p, .footer-inner a { font-size: 0.86rem; color: var(--ink-soft); }
.footer-inner a { text-decoration-color: var(--tomato); }
.footer-inner a:hover { color: var(--tomato); }

/* ── Subtle reveals (IntersectionObserver) ── */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }

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

/* ── Responsive ── */
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line-strong);
    border-radius: 0 0 var(--radius) var(--radius);
    display: none;
  }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem 1rem 1rem; }
  .site-nav a { display: block; padding: 0.9rem 0.5rem; font-size: 0.95rem; }
  .site-nav .nav-cta { text-align: center; margin-top: 0.5rem; }

  .story-grid, .contact-grid { grid-template-columns: 1fr; }
  /* El hero apila y se centra: en móvil la rejilla asimétrica no cabe, y la
     mascota pasa delante para que la marca sea lo primero que se ve. */
  .hero-inner { grid-template-columns: 1fr; }
  .hero-mark { order: -1; flex-direction: row; justify-content: center; gap: 1rem; }
  .hero-logo { width: min(150px, 40vw); }
  .hero-text { text-align: center; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .services-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .reviews-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-cell:first-child { grid-column: span 2; grid-row: span 1; min-height: 200px; }
  .monthly-special-box { grid-template-columns: 1fr; text-align: center; }
  .monthly-special-stamp { margin: 0 auto; }
  .monthly-special-box.has-image { grid-template-columns: 1fr; }
  .offers-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .offers-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .menu-line { flex-wrap: wrap; }
  .menu-dots { min-width: 1rem; }
  .hero-actions .btn, .actions-row .btn { width: 100%; }
}

/* ── Banner de cookies (js/consent.js; solo en el build estático) ──
   Aceptar y Rechazar llevan el mismo estilo a propósito: la AEPD pide que
   rechazar no cueste más que aceptar, ni en clics ni en protagonismo. */
.cookie-banner {
  position: fixed; z-index: 250;
  left: calc(1rem + env(safe-area-inset-left, 0px));
  right: calc(1rem + env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  max-width: 34rem; margin: 0 auto;
  padding: 1.1rem 1.25rem;
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgb(var(--shadow-rgb) / 0.25);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-title { font-family: var(--heading); font-weight: 700; font-size: 1.15rem; margin: 0 0 0.35rem; }
.cookie-banner-text { font-size: 0.95rem; color: var(--ink-soft); margin: 0 0 0.9rem; }
.cookie-banner-text a { color: var(--ink); }
.cookie-banner-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.cookie-banner-actions .btn { flex: 1 1 8rem; min-height: 44px; padding: 0.6rem 1rem; font-size: 0.95rem; }