/* ==========================================================================
   Püria Coffee & Brunch: la carta
   --------------------------------------------------------------------------
   Marca (manual 99STUDIO, 2026): verde 5743C #4d593b, gris cálido #bbb9b6,
   bases #f6f5f2 y #e1dcd1. Helvetica en caja normal, negrita para la
   jerarquía, el script de la marca como único acento tipográfico. Pensada
   primero para el celular: portada con foto y logo, secciones como control
   segmentado, tarjetas con foto para los platos y filas agrupadas para lo
   que no tiene foto. El cliente cambia color, letra y tamaños desde el
   panel Estilo (variables --color-*, --fuente-*, --tamano-*).
   ========================================================================== */

/* La letra de "COFFEE & BRUNCH" del logo (Trade Gothic Extended, del kit de
   marca): precios, categorías y pestañas. Solo los caracteres latinos. */
@font-face {
  font-family: "Trade Gothic Ext";
  src: url("/assets/fonts/tradegothic-ext.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Trade Gothic Ext";
  src: url("/assets/fonts/tradegothic-ext-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --color-marca: #4d593b;
  --color-texto: #1b1b1a;
  --color-fondo: #f6f5f2;
  --fuente-titulos: Helvetica, "Helvetica Neue", "Inter", Arial, sans-serif;
  --fuente-texto: Helvetica, "Helvetica Neue", "Inter", Arial, sans-serif;
  --tamano-texto: 17px;
  --tamano-titulos: 44px;

  /* paleta fija de la marca (no la toca el panel) */
  --gris: #bbb9b6;
  --base-2: #e1dcd1;
  --blanco: #ffffff;
  --linea: rgba(27, 27, 26, .1);
  --texto-suave: rgba(27, 27, 26, .62);
  --sombra: 0 14px 40px rgba(27, 27, 26, .16);
  --alto-cabecera: 60px;
  --fuente-detalle: "Trade Gothic Ext", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* el verde de marca y su contraste, fijados en la raíz: los usa la portada y
     el tema verde de la carta aunque dentro se inviertan los demás colores */
  --verde-marca: var(--color-marca);
  --sobre-verde: var(--color-sobre-marca, #f6f5f2);
}

/* ---------- Tema verde de la carta (body.tema-verde) ----------
   La carta invertida: fondo verde Püria, textos en crema y el crema como
   acento. Es solo un juego de variables: quitar la clase del <body> devuelve
   la carta clara. Las hojas (ficha, wifi, pedido) siguen siendo claras. */
.tema-verde {
  --color-fondo: var(--verde-marca);
  --color-texto: #f6f5f2;
  --color-marca: #f6f5f2;
  --color-sobre-marca: var(--verde-marca);
  --color-sobre-texto: var(--verde-marca);
  --texto-suave: rgba(246, 245, 242, .72);
  --linea: rgba(246, 245, 242, .2);
  --blanco: rgba(246, 245, 242, .09);
  --base-2: rgba(27, 27, 26, .22);
  --gris: rgba(246, 245, 242, .42);
}
.tema-verde .ficha, .tema-verde .wifi, .tema-verde .pedido {
  --color-fondo: #f6f5f2;
  --color-texto: #1b1b1a;
  --color-marca: var(--verde-marca);
  --color-sobre-marca: var(--sobre-verde);
  --color-sobre-texto: #f6f5f2;
  --texto-suave: rgba(27, 27, 26, .62);
  --linea: rgba(27, 27, 26, .1);
  --blanco: #ffffff;
  --base-2: #e1dcd1;
  --gris: #bbb9b6;
  color: var(--color-texto);
}
.tema-verde .tab--activo { background: #f6f5f2; color: var(--verde-marca); box-shadow: none; }
.tema-verde .tarjeta, .tema-verde .lista { box-shadow: none; }
.tema-verde .seccion-carta:not(:first-child) { border-top-color: var(--linea); }
.tema-verde .pie { background: color-mix(in srgb, var(--verde-marca) 80%, black); color: #f6f5f2; }
.tema-verde .buscar input { background: rgba(246, 245, 242, .12); color: #f6f5f2; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: var(--tamano-texto);
  line-height: 1.5;
  color: var(--color-texto);
  background: var(--color-fondo);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--fuente-titulos); font-weight: 700; line-height: 1.08; margin: 0; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(calc(var(--tamano-titulos) * .7), 6vw, var(--tamano-titulos)); }
h2 { font-size: clamp(1.55em, 3.2vw, 2em); }
h3 { font-size: 1.08em; letter-spacing: -.01em; }
p { margin: 0 0 .8em; }
a { color: var(--color-marca); }
button { font: inherit; }
.contenedor { width: 100%; max-width: 1080px; margin: 0 auto; padding-inline: 20px; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 8px 12px; background: var(--color-marca); color: var(--color-sobre-marca, #fff); border-radius: 8px; }
.saltar:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--color-marca); outline-offset: 3px; }

/* ---------- Iconos de línea (assets/img/iconos.svg e inline) ---------- */
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: -5px; }
.ico--ui { width: 22px; height: 22px; stroke-width: 1.8; vertical-align: middle; }

/* ---------- Botones ---------- */
.btn {
  display: inline-block; padding: 12px 20px; border-radius: 999px;
  background: var(--color-marca); color: var(--color-sobre-marca, #fff);
  font-weight: 600; font-size: .95em; text-decoration: none; border: 1.5px solid var(--color-marca);
  cursor: pointer; line-height: 1.2;
}
.btn--sec { background: transparent; color: var(--color-texto); border-color: var(--linea); }
.btn[hidden] { display: none; }

/* ---------- Cabecera ---------- */
/* Sin backdrop-filter a propósito: un filtro en la cabecera convierte el panel
   de secciones (position: fixed, dentro de la cabecera por contrato de
   menu.js) en un bloque relativo a la cabecera, y se abría con altura cero. */
.cabecera {
  position: sticky; top: 0; z-index: 40;
  background: var(--color-fondo);
  border-bottom: 1px solid var(--linea);
}
.cabecera__fila { min-height: var(--alto-cabecera); gap: 20px; }
.marca { display: inline-flex; align-items: center; color: var(--color-marca); }
.marca__logo, .pie__logo, .portada__logo {
  display: inline-block; background: currentColor;
  -webkit-mask: url("/assets/img/logo-wordmark.svg") no-repeat center / contain;
  mask: url("/assets/img/logo-wordmark.svg") no-repeat center / contain;
}
.marca__logo { width: 92px; height: 38px; }
.nav { order: 10; margin-left: auto; }
.nav a { color: var(--color-texto); font-size: .97em; padding: 6px 0; }
.nav a[hidden] { display: none; }
/* En escritorio el control segmentado de la carta ya es la navegación: los
   enlaces de la cabecera repetían Cafetería, Cocina y Dulce. En el celular
   siguen dentro del panel verde del botón de menú. */
@media (min-width: 821px) {
  .pagina-carta .cabecera .nav { display: none; }
  /* el botón de menú es solo del celular, en todas las páginas */
  .cabecera__acciones .cabecera__menu { display: none; }
}
.cabecera__acciones { order: 20; margin-left: auto; display: flex; align-items: center; gap: 8px; }
.cabecera__buscar, .cabecera__menu {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--linea); background: transparent; color: var(--color-texto); cursor: pointer; padding: 0;
}
.cabecera__buscar[aria-expanded="true"] { background: var(--color-texto); color: var(--color-fondo); border-color: var(--color-texto); }
.idioma {
  height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--linea);
  background: transparent; color: var(--color-texto); font-weight: 600; font-size: .86em; cursor: pointer; white-space: nowrap;
}
/* icono hamburguesa: dos líneas */
.cabecera__menu-icono { position: relative; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.cabecera__menu-icono::before, .cabecera__menu-icono::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.cabecera__menu-icono::before { top: -6px; }
.cabecera__menu-icono::after { top: 6px; }
.cabecera--abierta .cabecera__menu-icono { background: transparent; }
.cabecera--abierta .cabecera__menu-icono::before { transform: translateY(6px) rotate(45deg); }
.cabecera--abierta .cabecera__menu-icono::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 820px) {
  .cabecera__fila { gap: 10px; }
  .marca { flex: 0 0 auto; }
  .cabecera__acciones { margin-left: auto; }
  /* Panel de secciones a pantalla completa (sobre el contrato de menu.js):
     verde de marca, enlaces grandes, un solo gesto para llegar a cada sección */
  .menu-plegable .cabecera__menu { display: inline-flex; padding: 0; border: 1px solid var(--linea); border-radius: 50%; background: transparent; color: var(--color-texto); font: inherit; }
  .menu-plegable .cabecera--abierta .cabecera__menu { border-color: var(--color-texto); color: var(--color-texto); }
  .menu-plegable .nav {
    display: none; position: fixed; left: 0; right: 0; top: var(--alto-cabecera); bottom: 0; z-index: 60;
    flex-direction: column; align-items: stretch; gap: 0; padding: 22px 24px calc(24px + env(safe-area-inset-bottom, 0px));
    background: var(--color-marca); color: var(--color-sobre-marca, #fff); border: 0; box-shadow: none; max-height: none; overflow-y: auto;
  }
  .menu-plegable .cabecera--abierta .nav { display: flex; animation: nav-entra .22s ease-out; }
  .menu-plegable .nav a {
    display: flex; align-items: center; justify-content: space-between; padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, .18);
    color: var(--color-sobre-marca, #fff); font-size: 1.55em; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; white-space: normal;
  }
  .menu-plegable .nav > a:first-child { border-top: 0; }
  .menu-plegable .nav a[hidden] { display: none; }
  .menu-plegable .nav a::after { content: "›"; font-weight: 400; opacity: .55; font-size: 1.1em; }
  .menu-plegable .nav [data-paginas-menu] a { font-size: 1.1em; font-weight: 500; }
  html:has(.cabecera--abierta) { overflow: hidden; }
  @keyframes nav-entra { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .menu-plegable .cabecera--abierta .nav { animation: none; } }

/* ---------- Portada ---------- */
/* En la carta la portada es una franja de foto con el horario del día: la
   marca ya está en la cabecera, no hace falta repetir el logo */
.portada {
  position: relative; isolation: isolate; display: flex; align-items: flex-end;
  min-height: 210px;
  background: var(--verde-marca);
  color: var(--sobre-verde);
}
/* La foto en su capa: media.js le pone el background-image */
.portada__foto { position: absolute; inset: 0; z-index: -2; background: center / cover no-repeat; }
.portada__velo {
  position: absolute; inset: 0; z-index: -1;
  /* dos velos: uno desde la izquierda, para que el texto se lea sobre fotos
     claras, y otro desde abajo hacia el verde de marca */
  background:
    linear-gradient(90deg, rgba(27, 27, 26, .58) 0%, rgba(27, 27, 26, .28) 45%, rgba(27, 27, 26, 0) 78%),
    linear-gradient(180deg, rgba(27, 27, 26, .08) 0%, rgba(27, 27, 26, .1) 35%, color-mix(in srgb, var(--verde-marca) 92%, black) 100%);
}
.portada__contenido { padding-block: 28px 22px; display: grid; gap: 12px; justify-items: start; }
/* Logo en la portada: chico en el celular (la marca ya está arriba), grande en escritorio */
.portada__logo { width: 120px; height: 52px; color: var(--sobre-verde); }
/* Datos del día bajo el logo: texto plano en la letra del logo, sin carteles */
.portada__datos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-family: var(--fuente-detalle); font-size: .8em; font-weight: 700; letter-spacing: .01em; }
.portada__hoy, .portada__mesa { opacity: .92; }
.portada__hoy[hidden], .portada__mesa[hidden], .portada__wifi[hidden] { display: none; }
.portada__wifi {
  display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: inherit;
  font: inherit; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; opacity: .92;
}
.portada__wifi .ico { width: 18px; height: 18px; }
@media (min-width: 821px) {
  .portada { min-height: 380px; }
  .portada__contenido { padding-block: 48px 40px; gap: 16px; }
  .portada__logo { width: 250px; height: 106px; }
  /* Portada partida: bloque verde a la izquierda y la foto a la derecha, sin
     estirarla más allá de su tamaño (una foto de 800 px a todo el ancho de un
     monitor se pixela). El borde izquierdo de la foto se funde con el verde. */
  .portada__foto {
    left: auto; width: min(54%, 820px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
  }
  .portada__velo { background: linear-gradient(180deg, rgba(27, 27, 26, 0) 55%, color-mix(in srgb, var(--verde-marca) 70%, transparent) 100%); }
  .portada__contenido { max-width: 1080px; }
  .portada__claim { max-width: 15ch; }
}

/* ---------- Barra pegajosa: secciones + lupa, categorías, filtros y buscador ----------
   En la carta la cabecera NO es pegajosa (la marca ya se vio): lo que queda
   fijo al bajar es esta barra, que es lo que se usa. */
.pagina-carta .cabecera { position: static; }
/* La barra fija va un punto más oscura que la página y con sombra hacia
   abajo: es lo que la hace leerse como una repisa por la que se cuela la
   carta, y no como un trozo de página que por algún motivo no se mueve.
   Más oscura y no más clara a propósito: en el tema verde el claro es el
   color del texto y de la pestaña activa, y aclarar la barra le quitaría
   fuerza justo a lo que tiene que destacar. Mismo recurso que el pie. */
/* La barra fija va del color de la página MIENTRAS no esté pegada arriba: al
   principio no hay nada pasando por debajo, y oscurecerla ahí la convierte en
   una franja suelta entre dos verdes iguales. En cuanto se pega y la carta se
   le mete debajo, se oscurece un punto y le sale sombra, y entonces sí se lee
   como una repisa. Más oscura y no más clara a propósito: en el tema verde el
   claro es el color del texto y el de la pestaña activa.

   Sin línea abajo: una raya CLARA en el canto inferior es el lenguaje de un
   borde hundido y se pelea con la sombra, que dice justo lo contrario. */
.subnav__tope { height: 1px; margin-bottom: -1px; }
.subnav {
  position: sticky; top: 0; z-index: 30;
  background: var(--color-fondo);
  transition: background-color .18s ease, box-shadow .18s ease;
}
.subnav--pegada {
  background: color-mix(in srgb, var(--color-fondo) 100%, black 14%);
  box-shadow: 0 6px 16px -6px rgba(27, 27, 26, .35);
}
@media (prefers-reduced-motion: reduce) { .subnav { transition: none; } }
.subnav__fila { display: flex; align-items: center; gap: 10px; }
.tabs { flex: 1; display: flex; gap: 2px; margin: 12px 0 12px; padding: 4px; border-radius: 14px; background: var(--base-2); }
.buscar-boton {
  flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--linea); background: transparent; color: var(--color-texto); cursor: pointer; padding: 0;
}
.buscar-boton[aria-expanded="true"] { background: var(--color-texto); color: var(--color-fondo); border-color: var(--color-texto); }
.tab {
  flex: 1; text-align: center; padding: 10px 8px; border-radius: 11px; color: var(--texto-suave); text-decoration: none;
  font-family: var(--fuente-detalle); font-weight: 700; font-size: .8em; white-space: nowrap;
}
.tab--activo { background: var(--blanco); color: var(--color-texto); box-shadow: 0 1px 3px rgba(27, 27, 26, .1); }
/* Segundo nivel del mismo sistema que el control segmentado: misma letra,
   fina en gris y la activa en negrita con el subrayado de marca */
.cats { display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; max-width: 1080px; margin: 0 auto; padding: 0 20px; scroll-padding-inline: 20px; }
.cats::-webkit-scrollbar { display: none; }
.cats:empty { display: none; }
.cat {
  flex: none; padding: 2px 0 12px; color: var(--texto-suave); text-decoration: none; white-space: nowrap;
  font-family: var(--fuente-detalle); font-size: .74em; font-weight: 400; letter-spacing: .01em; border-bottom: 2px solid transparent;
}
.cat--activo { color: var(--color-texto); font-weight: 700; border-color: var(--color-marca); }
.buscar { padding: 12px 0 14px; border-top: 1px solid var(--linea); }
.buscar[hidden] { display: none; }
.buscar input {
  width: 100%; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--linea);
  background: var(--blanco); color: var(--color-texto); font: inherit; font-size: 1em;
}
.buscar input::placeholder { color: var(--texto-suave); }
@media (min-width: 821px) {
  .tabs { flex: none; display: inline-flex; margin-right: 12px; }
  .tab { flex: none; padding: 9px 22px; }
  .buscar-boton { margin-left: auto; }
}

/* ---------- Filtros "apto para mí": iconos redondos con su nombre debajo,
   siempre a mano dentro de la barra pegajosa ---------- */
.filtros { padding: 6px 20px 10px; border-top: 1px solid var(--linea); display: flex; align-items: center; gap: 10px; }
/* flex: 0 1 auto y no 1: la fila ocupa lo que necesita y el botón queda
   pegado al último redondel, no tirado contra el borde en escritorio; en el
   móvil sigue encogiendo y desplazándose porque el shrink sigue en 1 */
.chips { flex: 0 1 auto; min-width: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; }
.chips::-webkit-scrollbar { display: none; }
/* Con el botón de quitar al lado, la fila deja de sangrar por la derecha:
   si no, los redondeles le pasarían por debajo al desplazarse */
.filtros--con-quitar .chips { margin-right: 0; padding-right: 4px; }
.chip {
  flex: none; width: 64px; display: grid; justify-items: center; gap: 4px; padding: 0; border: 0; background: none;
  color: var(--texto-suave); font-size: .66em; line-height: 1.15; text-align: center; cursor: pointer;
}
.chip__circulo {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blanco); border: 1px solid var(--linea); color: var(--color-marca); transition: background-color .15s ease, color .15s ease;
}
.chip .ico { width: 19px; height: 19px; vertical-align: middle; }
/* Quitar filtros: al lado de los redondeles pero FUERA de la fila que
   scrollea, para que no se pueda ir de la pantalla justo cuando hace falta */
.quitar {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 9px;
  border: 1px solid var(--linea); border-radius: 999px; background: var(--blanco);
  color: var(--color-texto); font: inherit; font-size: .76em; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.quitar[hidden] { display: none; }
.quitar__x { font-size: 1.3em; line-height: 1; }
.quitar:hover, .quitar:focus-visible { border-color: var(--color-marca); color: var(--color-marca); }
.chip[aria-pressed="true"] { color: var(--color-texto); font-weight: 600; }
.chip[aria-pressed="true"] .chip__circulo { background: var(--color-marca); border-color: var(--color-marca); color: var(--color-sobre-marca, #fff); }
@media (min-width: 821px) { .chips { margin: 0; padding: 0; gap: 10px; } }

/* ---------- La casa recomienda ----------
   Hasta tres fichas arriba de todo: el lugar donde el local decide qué
   empujar (lo recién horneado, la torta que hay que mover, la promo del
   finde). Deliberadamente sin caja de color ni precio tachado: tiene que
   leerse como un consejo de la casa, no como un cartel de oferta. Lo que
   lo separa del resto es el título y el motivo escrito a mano, nada más. */
.recos { padding-top: 30px; }
.recos__titulo {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  font-family: var(--fuente-detalle); font-weight: 700; font-size: 1.1em; letter-spacing: .005em;
}
.recos__titulo::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .2; }
.recos__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
@media (min-width: 640px) { .recos__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 16px; } }
/* El motivo va ARRIBA del nombre: es lo que justifica que esa ficha esté ahí */
.tarjeta__motivo {
  font-family: var(--fuente-detalle); font-weight: 700; font-size: .72em; line-height: 1.3;
  color: var(--color-marca); text-wrap: balance;
}

/* ---------- La carta ---------- */
.carta { padding-block: 6px 48px; }
.seccion-carta { scroll-margin-top: 192px; padding-top: 34px; }
/* Salto entre secciones (Cafetería → Cocina): aire y una línea fina, para que se note el cambio */
.seccion-carta:not(:first-child) { margin-top: 48px; padding-top: 44px; border-top: 1px solid var(--color-texto); }
.seccion-carta[hidden] { display: none; }
.seccion-carta__titulo { font-size: 1.75em; margin-bottom: 4px; }
.categoria { scroll-margin-top: 192px; padding-top: 30px; }
.categoria[hidden] { display: none; }
/* Los títulos de categoría son divisores: más grandes que el nombre de un plato */
.categoria__titulo { margin-bottom: 14px; font-family: var(--fuente-detalle); font-weight: 700; font-size: 1.1em; letter-spacing: .005em; }

/* Tarjetas con foto (grilla) */
.tarjetas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
@media (min-width: 640px) { .tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 16px; } }
@media (min-width: 981px) { .tarjetas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tarjeta {
  display: flex; flex-direction: column; text-align: left; width: 100%; padding: 0; margin: 0; border: 0; cursor: pointer;
  background: var(--blanco); color: inherit; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(27, 27, 26, .06);
}
.tarjeta:hover .tarjeta__nombre, .tarjeta:focus-visible .tarjeta__nombre { color: var(--color-marca); }
.tarjeta__foto-caja { position: relative; aspect-ratio: 4 / 3; background: var(--base-2); overflow: hidden; }
.tarjeta__foto { display: block; width: 100%; height: 100%; object-fit: cover; }
.tarjeta__foto-caja--vacia::before {
  content: ""; position: absolute; inset: 0; background: var(--gris); opacity: .55;
  -webkit-mask: url("/assets/img/logo-wordmark.svg") no-repeat center / 42%; mask: url("/assets/img/logo-wordmark.svg") no-repeat center / 42%;
}
/* Sello sobre la foto ("Lo más pedido", "Nuevo", "Agotado hoy"). Marca y
   contraste salen del par --color-marca / --color-sobre-marca, así que
   funciona igual en la carta clara y en el tema verde. El de agotado va con
   su propio negro translúcido: no es un reclamo, es un aviso, y tiene que
   leerse sobre cualquier foto sin competir con los otros dos. */
.sello {
  position: absolute; top: 8px; left: 8px; z-index: 1; max-width: calc(100% - 16px);
  padding: 3px 9px; border-radius: 999px;
  font-family: var(--fuente-detalle); font-weight: 700; font-size: .6rem; line-height: 1.4;
  background: var(--color-marca); color: var(--color-sobre-marca, #f6f5f2);
  box-shadow: 0 1px 4px rgba(27, 27, 26, .25);
}
.sello--agotado { background: rgba(27, 27, 26, .82); color: #f6f5f2; }
/* Columna flexible y no rejilla: así el bloque de la opción puede empujarse
   al fondo de la ficha y las líneas finas quedan a la misma altura en toda
   la fila, aunque una descripción ocupe un renglón más que la de al lado. */
.tarjeta__cuerpo { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; }
.tarjeta__nombre { font-weight: 600; font-size: .95em; line-height: 1.25; }
.tarjeta__desc { color: var(--texto-suave); font-size: .82em; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta__meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 2px; }
.tarjeta__precio { font-family: var(--fuente-detalle); font-weight: 700; font-size: .82em; font-variant-numeric: tabular-nums; }
.tarjeta--agotada .tarjeta__foto, .tarjeta--agotada .tarjeta__nombre, .tarjeta--agotada .tarjeta__precio { opacity: .5; }
.tarjeta--agotada .tarjeta__nombre { text-decoration: line-through; }

/* Filas agrupadas (sin foto, o con miniatura) */
.lista { background: var(--blanco); border-radius: 16px; padding: 2px 16px; box-shadow: 0 1px 2px rgba(27, 27, 26, .06); }
.item {
  display: grid; grid-template-columns: 1fr; grid-template-areas: "linea" "desc" "tags";
  gap: 3px 16px; align-content: start; width: 100%; padding: 15px 0; margin: 0;
  border: 0; border-top: 1px solid var(--linea); background: none; color: inherit; text-align: left; cursor: pointer;
}
.item:first-child { border-top: 0; }
.item:hover .item__nombre, .item:focus-visible .item__nombre { color: var(--color-marca); }
.item--foto { grid-template-columns: 1fr 72px; grid-template-areas: "linea foto" "desc foto" "tags foto"; }
.item__foto { grid-area: foto; align-self: start; width: 72px; height: 72px; object-fit: cover; border-radius: 12px; background: var(--base-2); }
.item__linea { grid-area: linea; display: flex; align-items: baseline; gap: 8px; }
.item__nombre { font-weight: 600; }
.item__puntos { flex: 1; min-width: 18px; border-bottom: 2px dotted var(--gris); transform: translateY(-5px); }
.item__desc { grid-area: desc; color: var(--texto-suave); font-size: .93em; line-height: 1.45; }
.item__precio { font-family: var(--fuente-detalle); font-weight: 700; font-size: .82em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.item__tags { grid-area: tags; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 2px; font-size: .86em; color: var(--texto-suave); }
.item__tags:empty { display: none; }
.item[hidden] { display: none; }
.item--agotado .item__nombre, .item--agotado .item__desc, .item--agotado .item__precio, .item--agotado .item__foto { opacity: .5; }
.item--agotado .item__nombre { text-decoration: line-through; }

.tag { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; color: var(--color-marca); }
.tag--texto { color: var(--color-texto); font-weight: 600; }
.tag--nuevo, .tag--popular { color: var(--color-marca); }
.tag--alergeno { color: var(--color-texto); }
/* "Pan sin gluten +$1.500" en la tarjeta: contorno y no relleno, porque no
   es lo que el plato ES sino lo que PUEDE ser. Un celíaco tiene que
   distinguir de un vistazo entre las dos cosas. */
/* La opción se dice con texto y no con píldora: en una tarjeta de 162px una
   píldora de "Pan sin gluten +$1.500" se salía del borde, y encogerla hasta
   que entrara la dejaba ilegible. El texto se parte en dos líneas y se lee.
   Va en el color de marca y en negrita para que no se confunda con la
   descripción del plato. */
/* Nombre y precio en distinta tipografía y separados por una línea fina de
   lo que el plato ES: arriba queda lo que se pide, abajo lo que se le puede
   cambiar. El precio va en la tipografía de los precios y alineado a la
   derecha, igual que en las filas de la carta, para que se lea como un
   precio y no como el final de una frase. */
.tag--opcion {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; width: 100%;
  color: var(--color-marca); white-space: normal;
}
/* El nombre NO encoge (flex 0 0 auto): si encogiera, el precio se quedaría a
   su lado robándole el ancho y "Pan sin gluten" se partiría en tres
   renglones de una palabra. Sin encoger, cuando los dos no caben es el
   precio el que baja de línea, y ahí el margen automático lo manda a la
   derecha. El max-width evita que un nombre muy largo se salga de la ficha. */
.opcion-tag__titulo { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; max-width: 100%; }
.opcion-tag__nombre { font-weight: 600; }
.opcion-tag__precio { flex: 0 0 auto; margin-left: auto; font-family: var(--fuente-detalle); font-weight: 700; font-variant-numeric: tabular-nums; }
/* El dibujo, algo más chico que en la fila de etiquetas y pegado al texto:
   tiene que leerse como parte de la frase, no como un icono suelto */
.tag--opcion .ico { width: 16px; height: 16px; vertical-align: 0; }
.opcion__nombre .ico { width: 17px; height: 17px; vertical-align: -4px; margin-right: 6px; }
/* Siempre en su propia línea: metida en la fila de los iconos se aplastaba
   contra el precio y se partía en cuatro renglones de 20px */
/* La línea fina: en la tarjeta separa la opción del precio y los iconos; en
   la fila de la lista hace lo mismo dentro del bloque de etiquetas */
/* margin-top auto: el bloque se va al fondo de la ficha, así la línea fina y
   el precio de la opción caen a la misma altura en todas las fichas de la
   fila. Sin esto, una descripción de tres renglones bajaba su línea 20px
   respecto a la de al lado. */
.tarjeta__opciones { display: grid; gap: 2px; margin-top: auto; padding-top: 7px; border-top: 1px solid var(--linea); font-size: .84em; line-height: 1.3; }
/* En la ficha el precio del plato va a la IZQUIERDA, así que el de la opción
   también, en la misma columna: dos precios en el mismo sitio se comparan
   solos. El nombre se queda con su línea entera. */
.tarjeta__opciones .opcion-tag__titulo { flex: 1 1 100%; }
.tarjeta__opciones .opcion-tag__precio { margin-left: 0; }
/* En la fila de la lista el precio del plato va a la derecha (nombre ····
   precio), así que el de la opción sigue a la derecha */
.item__tags .tag--opcion { flex-basis: 100%; margin-top: 4px; padding-top: 5px; border-top: 1px solid var(--linea); }

/* Opciones dentro de la ficha: al marcarlas cambia el precio de arriba */
.ficha__opciones { display: grid; gap: 8px; margin-top: 4px; }
.opcion {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--linea); border-radius: 14px; background: transparent; color: inherit;
  font: inherit; font-size: .92em; text-align: left;
}
.opcion__marca {
  flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--gris);
  display: grid; place-items: center; transition: background-color .15s ease, border-color .15s ease;
}
.opcion__marca::after {
  content: ""; width: 10px; height: 6px; margin-top: -2px;
  border-left: 2px solid var(--color-sobre-marca, #fff); border-bottom: 2px solid var(--color-sobre-marca, #fff);
  transform: rotate(-45deg) scale(.5); opacity: 0; transition: opacity .15s ease, transform .15s ease;
}
.opcion__nombre { flex: 1; }
.opcion__precio { font-family: var(--fuente-detalle); font-weight: 700; font-variant-numeric: tabular-nums; }
.opcion[aria-pressed="true"] { border-color: var(--color-marca); }
.opcion[aria-pressed="true"] .opcion__marca { background: var(--color-marca); border-color: var(--color-marca); }
.opcion[aria-pressed="true"] .opcion__marca::after { opacity: 1; transform: rotate(-45deg) scale(1); }
@media (prefers-reduced-motion: reduce) { .opcion__marca, .opcion__marca::after { transition: none; } }
.carta__vacio { padding-block: 30px; color: var(--texto-suave); }
.carta__vacio[hidden] { display: none; }

/* ---------- Ficha (dialog) ---------- */
.ficha {
  border: 0; padding: 0; margin: auto; width: min(100% - 32px, 520px);
  border-radius: 20px; background: var(--blanco); color: var(--color-texto); box-shadow: var(--sombra);
  max-height: min(90vh, 90dvh); overflow: auto;
}
.ficha::backdrop { background: rgba(27, 27, 26, .5); }
.ficha__cab { position: absolute; top: 12px; right: 12px; z-index: 2; }
.ficha__cerrar {
  width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--color-texto);
  font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(27, 27, 26, .18);
}
.ficha__foto { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ficha__cuerpo { padding: 18px 24px 26px; display: grid; gap: 14px; }
/* Sin foto, el botón de cerrar comparte fila con el título: el precio se corre a la izquierda */
.ficha--sin-foto .ficha__cuerpo { padding-top: 22px; }
.ficha--sin-foto .ficha__titulo { padding-right: 52px; }
.ficha__titulo { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.ficha__titulo h2 { font-size: 1.35em; }
.ficha__precio { font-family: var(--fuente-detalle); font-weight: 700; font-size: .9em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ficha__desc { margin: 0; color: var(--texto-suave); }
.ficha__detalle { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--color-fondo); font-size: .95em; line-height: 1.5; }
.ficha__datos { margin: 0; display: grid; gap: 10px; }
.ficha__datos div { border-top: 1px solid var(--linea); padding-top: 9px; }
.ficha__datos dt { font-size: .86em; color: var(--texto-suave); margin-bottom: 2px; }
.ficha__datos dd { margin: 0; }
.ficha__chips { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .95em; }
.ficha__aviso { margin: 0; font-size: .86em; color: var(--texto-suave); }
.ficha__agregar { justify-self: start; }
.ficha__agregar[hidden] { display: none; }
@media (max-width: 640px) {
  .ficha { width: 100%; max-width: none; margin: auto 0 0; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
}
html.ficha-abierta { overflow: hidden; }

.ficha__acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha__acciones .btn { display: inline-flex; align-items: center; gap: 6px; }
.ficha__acciones .ico { width: 18px; height: 18px; }

/* ---------- Chips de la portada: mesa y wifi ---------- */
.estado--mesa::before { display: none; }
.estado--boton { cursor: pointer; font: inherit; font-weight: 600; color: inherit; }
.estado--boton::before { display: none; }
.estado--boton .ico { width: 18px; height: 18px; }

/* ---------- Wifi (dialog) ---------- */
.wifi { border: 0; padding: 0; margin: auto; width: min(100% - 32px, 380px); border-radius: 20px; background: var(--blanco); color: var(--color-texto); box-shadow: var(--sombra); }
.wifi::backdrop { background: rgba(27, 27, 26, .5); }
.wifi__cuerpo { padding: 24px; display: grid; gap: 16px; }
.wifi__cuerpo h2 { font-size: 1.25em; padding-right: 44px; }
.wifi__clave { font-size: 1.3em; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.wifi .ficha__cerrar { box-shadow: none; background: var(--base-2); }
@media (max-width: 640px) { .wifi { width: 100%; max-width: none; margin: auto 0 0; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); } }

/* ---------- Cierre: Instagram ---------- */
.instagram { background: var(--color-marca); color: var(--color-sobre-marca, #fff); padding-block: 48px; }
.instagram__caja { display: grid; gap: 10px; justify-items: start; }
.instagram__titulo { margin: 0; font-size: clamp(1.6em, 4vw, 2.1em); }
.instagram__texto { margin: 0; font-size: 1.05em; opacity: .9; max-width: 44ch; }
.instagram__etiquetas { margin: 2px 0 6px; font-family: var(--fuente-detalle); font-weight: 700; font-size: .85em; display: flex; gap: 14px; flex-wrap: wrap; }
.instagram__etiquetas [hidden] { display: none; }
/* La arroba y el hashtag llevan al perfil y a la etiqueta. Subrayado fino y
   separado: encima de un fondo de color el subrayado de serie pesa mucho. */
.instagram__etiquetas a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.instagram__etiquetas a:hover, .instagram__etiquetas a:focus-visible { text-decoration-color: currentColor; }
/* Un <a> sin href (hashtag que no forma una URL válida) se queda como texto */
.instagram__etiquetas a:not([href]) { text-decoration: none; }

/* Logo que se traza al entrar en pantalla: llena el hueco del cierre sin
   meter otra foto ni otro botón. La clase --anima la pone el JS, así que sin
   JavaScript esto es un logo normal y visible. */
.ig-logo { width: clamp(56px, 12vw, 92px); height: auto; margin-top: 10px; color: inherit; }
.ig-logo__trazo { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ig-logo__punto { fill: currentColor; transform-box: fill-box; transform-origin: center; }
.ig-logo--anima .ig-logo__trazo { stroke-dasharray: 100; stroke-dashoffset: 100; }
.ig-logo--anima .ig-logo__punto { opacity: 0; }
.ig-logo--anima.ig-logo--dibuja .ig-logo__marco { animation: ig-trazo 1s ease forwards; }
.ig-logo--anima.ig-logo--dibuja .ig-logo__lente { animation: ig-trazo .8s ease .45s forwards; }
.ig-logo--anima.ig-logo--dibuja .ig-logo__punto { animation: ig-punto .4s ease 1.05s forwards; }
@keyframes ig-trazo { to { stroke-dashoffset: 0; } }
@keyframes ig-punto { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
/* Quien pide menos movimiento ve el logo ya dibujado, no a medias */
@media (prefers-reduced-motion: reduce) {
  .ig-logo--anima .ig-logo__trazo { stroke-dashoffset: 0; }
  .ig-logo--anima .ig-logo__punto { opacity: 1; }
  .ig-logo--anima.ig-logo--dibuja .ig-logo__marco,
  .ig-logo--anima.ig-logo--dibuja .ig-logo__lente,
  .ig-logo--anima.ig-logo--dibuja .ig-logo__punto { animation: none; }
}
.btn--claro { background: var(--color-fondo); color: var(--color-marca); border-color: var(--color-fondo); }
/* En la carta (tema verde) el cierre NO se da vuelta a crema. Era el único
   bloque claro de una página entera en verde y caía justo antes del pie
   oscuro: verde, crema, verde oscuro, tres golpes en dos centímetros. Se
   queda en el verde de la página y el pie vuelve a ser la única banda oscura
   del final. El botón sí se invierte, o quedaría verde sobre verde. */
.tema-verde .instagram { background: var(--color-fondo); color: var(--color-texto); }
.tema-verde .instagram .btn--claro { background: var(--color-marca); color: var(--color-sobre-marca); border-color: var(--color-marca); }
.pie { padding-block: 28px; background: color-mix(in srgb, var(--color-marca) 100%, black 18%); }

/* ---------- Home ---------- */
.portada--home { min-height: min(62vh, 560px); }
.portada--home .portada__contenido { padding-block: 40px 32px; }
.portada__claim { max-width: 20ch; font-size: clamp(1.5em, 5vw, 2.3em); line-height: 1.08; letter-spacing: -.02em; color: inherit; }
.portada__botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.btn--borde { background: transparent; color: var(--sobre-verde); border-color: rgba(246, 245, 242, .55); }
.seccion__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 22px; }
.seccion__cab h2 { margin: 0; }
.somos__cols { display: grid; gap: 28px; }
.somos__texto { max-width: 58ch; }
.somos__texto p { font-size: 1.05em; line-height: 1.55; }
.datos { margin: 0; display: grid; gap: 14px; align-content: start; }
.datos div { border-top: 1px solid var(--color-texto); padding-top: 10px; }
.datos dt { font-family: var(--fuente-detalle); font-weight: 700; font-size: .84em; margin-bottom: 2px; }
.datos dd { margin: 0; color: var(--texto-suave); }
@media (min-width: 821px) {
  .somos__cols { grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: start; }
  .portada--home { min-height: 480px; }
  .portada--home .portada__contenido { padding-block: 72px 60px; }
}
.destacados .tarjeta { text-decoration: none; color: inherit; }
.local__hoy { font-family: var(--fuente-detalle); font-weight: 700; font-size: .84em; margin: 0 0 4px; }
.local__hoy[hidden] { display: none; }
.local__sub { margin-top: 26px; }
.mapa { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--base-2); display: grid; place-items: center; min-height: 240px; }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mapa__boton { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; border: 0; background: var(--blanco); color: var(--color-texto); font: inherit; font-weight: 600; cursor: pointer; box-shadow: 0 2px 10px rgba(27, 27, 26, .12); }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.galeria figure { margin: 0; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--base-2); }
.galeria img { width: 100%; height: 100%; object-fit: cover; display: block; }
.resenas { background: var(--blanco); }
.resenas__caja { display: grid; gap: 10px; justify-items: start; }
.resenas__caja p { max-width: 46ch; color: var(--texto-suave); }
/* En escritorio, reseñas e Instagram van a dos columnas: título a la
   izquierda, texto y botón a la derecha, alineados con el resto de la página */
@media (min-width: 821px) {
  .resenas__caja, .instagram__caja { grid-template-columns: 1fr 1.3fr; column-gap: 48px; align-items: start; }
  .resenas__caja > h2, .instagram__caja > h2 { grid-column: 1; grid-row: 1 / span 4; margin: 0; }
  .resenas__caja > :not(h2), .instagram__caja > :not(h2) { grid-column: 2; }
  /* En escritorio el logo se va a la columna del título, que es la mitad que
     quedaba vacía; el título deja de estirarse cuatro filas para dejarle sitio */
  .instagram__caja > h2 { grid-row: 1; }
  .instagram__caja > .ig-logo { grid-column: 1; grid-row: 2; align-self: start; margin-top: 4px; }
}

/* ---------- Pedido para llevar (barra fija) ---------- */
.pedido {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
  background: var(--color-texto); color: var(--color-sobre-texto, #fff);
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 30px rgba(27, 27, 26, .2);
}
.pedido[hidden] { display: none; }
.pedido__fila { max-width: 1080px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.pedido__resumen { flex: 1 1 200px; font-size: .95em; }
.pedido__resumen strong { display: block; font-size: .86em; opacity: .7; font-weight: 400; }
.pedido__acciones { display: flex; gap: 8px; }
.pedido__vaciar { background: transparent; border: 1px solid rgba(255, 255, 255, .35); color: inherit; }
.pedido .btn { border-color: transparent; }
body.con-pedido { padding-bottom: 96px; }

/* ---------- Novedades y local ---------- */
.seccion { padding-block: 48px; }
.seccion--suave { background: var(--base-2); }
.seccion h2 { margin-bottom: 22px; }
.news-card { border: 0; background: var(--blanco); }
.local__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; }
.local__caja h3 { margin-bottom: 10px; }
.horario { margin: 14px 0 0; display: grid; gap: 6px; max-width: 360px; }
.horario div { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--linea); padding-top: 6px; }
.horario dt { font-weight: 400; }
.horario dd { margin: 0; font-variant-numeric: tabular-nums; }
/* Los días especiales que vienen, marcados para que no se lean como una fila
   más del horario de siempre */
.horario__especial { color: var(--color-marca); font-weight: 600; }
.horario__especial dd { font-weight: 600; text-align: right; }
.local__acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* ---------- Pie ---------- */
.pie { background: var(--color-marca); color: var(--color-sobre-marca, #fff); padding-block: 40px; }
.pie a { color: inherit; }
.pie__fila { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.pie__logo { width: 124px; height: 52px; }
.pie__texto p { margin: 2px 0 0; opacity: .85; font-size: .95em; }
.pie__nota { font-size: .82em !important; opacity: .65 !important; }

/* ---------- Subpáginas y 404 (contenido de fábrica del kit) ---------- */
.pagina { padding-block: 32px 60px; }
.pagina__volver { color: var(--color-marca); }

/* ---------- Impresión: la carta entera, sin barras ---------- */
@media print {
  .cabecera, .subnav, .filtros, .pedido, .saltar, .portada { display: none !important; }
  .tarjetas { grid-template-columns: repeat(3, 1fr); }
  .tarjeta, .item { break-inside: avoid; box-shadow: none; }
  .seccion-carta, .categoria { padding-top: 12px; }
  a { text-decoration: none; }
}