/* Hoja de estilos del menú digital.
 *
 * Los colores NO se escriben sueltos por el archivo: todos salen del bloque
 * «PALETA» de abajo. Para adaptar el menú a otro restaurante se cambian esos
 * valores y nada más, porque los nombres son de papel y no de color: --fondo es
 * el fondo de la página tanto si el menú es crema como si es negro.
 *
 * Las tipografías se alojan en el propio sitio (assets/fuentes), así que la
 * página no hace ninguna petición a servidores externos. */

/* ── Tipografías de marca, alojadas en el propio sitio ───────────── */
@font-face {
  font-family: 'Montserrat';
  src: url('assets/fuentes/montserrat-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Lisu Bosa';
  src: url('assets/fuentes/lisu-bosa-400.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Lisu Bosa';
  src: url('assets/fuentes/lisu-bosa-500.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Lisu Bosa';
  src: url('assets/fuentes/lisu-bosa-600.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}

/* ==== PALETA: INICIO ====
 *
 * Lo único que hay que tocar por cliente. Los contrastes anotados están medidos
 * sobre --fondo y --fondo-claro, que son los dos fondos reales del menú, y
 * cumplen el 4.5:1 que pide la WCAG AA para texto pequeño.
 *
 * Ojo con --acento: es el color de marca y suele quedarse corto para texto
 * menudo. Para eso está --acento-texto, una variante que sí pasa. Y
 * --acento-fondo es el relleno de los botones, que tiene que aguantar
 * --acento-tinta encima.
 */
:root {
  /* LOS COLORES SON LOS DE SU CARTA: papel claro, tinta negra y el burdeós de la
     contraportada. Medidos sobre las páginas del PDF: el interior es un gris muy
     claro (#E8E8E8) con texto negro, y la portada es burdeós (#681010–#881010)
     con filetes dorados. El dorado no entra en la paleta porque solo se usa en
     filetes finos y aquí no hay filetes: menos colores, no más. */
  --fondo: #EFECE6;             /* fondo de la página: el papel de su carta */
  --fondo-claro: #F8F6F2;       /* tarjetas y superficies elevadas */
  --fondo-hueso: #E5E1D8;       /* superficies en reposo: píldoras, botones suaves */
  --fondo-hueso-vivo: #DBD6CA;  /* esas mismas superficies, al pasar por encima */
  --fondo-velado: rgba(239, 236, 230, .93);  /* cabecera pegajosa, translúcida */

  --tinta: #201D1B;             /* texto principal (14,2:1) */
  --tinta-suave: #56504A;       /* texto secundario (6,7:1) */
  --tinta-clara: #FCF7EE;       /* texto sobre fondos oscuros: portada y pie */
  --tinta-clara-suave: #EADFD2; /* ese mismo texto, en segundo plano */

  /* El burdeós de su contraportada. Uno solo para todo —precio grande, filete y
     relleno de botón— para no llenar la hoja de rojos parecidos: pasa el 9,3:1
     sobre el papel, así que no hace falta una variante para texto menudo. */
  --acento: #79130E;            /* marca: precios, filetes, foco (9,3:1) */
  --acento-vivo: #98261C;       /* el acento al pasar por encima (6,8:1) */
  --acento-texto: #79130E;      /* el acento en texto pequeño: es el mismo */
  --acento-fondo: #79130E;      /* relleno de botón bajo --acento-tinta */
  --acento-fondo-vivo: #98261C;
  --acento-tinta: #FFF6EC;      /* texto sobre --acento-fondo (10,3:1) */

  --profundo: #2A2422;          /* fondo oscuro: pie, marcadores, huecos de foto */
  --borde-fuerte: #A2937F;
  /* Los desplegables y los botones pequeños del reparto no tienen otra pista que
     su borde: con el filete de --linea (1,3:1) no se distinguían del fondo y la
     WCAG 1.4.11 pide 3:1. Este es neutro, así que no suma color a la paleta. */
  --borde-control: #8A7A66;
  --apagado: #A9A29A;           /* elementos desactivados */

  --aviso-fondo: #F6EFE2;       /* recuadro de «esto está por confirmar» */
  --aviso-borde: #D8CDBB;
  --aviso-texto: #5C5147;       /* 6,5:1 sobre el papel */

  --whatsapp: #1F7A4D;
  --whatsapp-vivo: #17603C;
  --whatsapp-tinta: #F1FBF4;

  --linea: rgba(32, 29, 27, .14);
  --linea-clara: rgba(252, 247, 238, .22);   /* separadores sobre fondo oscuro */
  --sombra: 0 1px 2px rgba(32,29,27,.06), 0 8px 24px rgba(32,29,27,.08);
  --sombra-alta: 0 12px 40px rgba(32,29,27,.22);

  --radio: 14px;
  --ancho: 1180px;
  --fuente-titulo: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-texto: 'Lisu Bosa', Georgia, 'Times New Roman', serif;

  /* Le dice al navegador si los controles nativos (barras, desplegables) van en
     claro o en oscuro. Va a juego con el fondo, no se deja al azar. */
  color-scheme: light;
}
/* ==== PALETA: FIN ==== */

/* ==== ESCALA TIPOGRÁFICA: INICIO ====
 *
 * A · Limpieza
 *
 * Los tamaños de letra salen de aquí y de ningún otro sitio. Antes había once
 * valores sueltos por la hoja (.78rem, .82rem, .84rem, .85rem, .88rem, .9rem,
 * .92rem, .93rem, .95rem, .98rem, 1.05rem…), que en pantalla son 12, 13, 14, 15,
 * 16 y 17 px: siete medidas que el ojo no distingue entre sí. Eso es lo que hace
 * que una interfaz parezca improvisada, y se arregla teniendo una escala y
 * usándola. Cambiar de escala es cambiar estas seis líneas.
 *
 * Eran siete: la de 24 px la usaba un solo sitio, el nombre de la ficha, y el
 * contrato admite seis. Bajó a 20 px, que sigue siendo un título y no deja el
 * séptimo escalón suelto en la hoja.
 */
:root {
  --t-1: .8125rem;    /* 13 px */
  --t-2: .9375rem;    /* 15 px */
  --t-3: 1.0625rem;   /* 17 px */
  --t-4: 1.25rem;     /* 20 px */
  --t-6: 1.8125rem;   /* 29 px */
  --t-7: 3.375rem;    /* 54 px */
}
/* ==== ESCALA TIPOGRÁFICA: FIN ==== */

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

html { scroll-behavior: smooth; scroll-padding-top: 7rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: var(--t-3);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }

.salto-contenido {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--tinta); color: var(--fondo); padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radio) 0; text-decoration: none;
}
.salto-contenido:focus { left: 0; }

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

.envoltura { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: 1.25rem; }
.oculto-visual {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── Cabecera ────────────────────────────────────────────────────── */
.cabecera {
  position: sticky; top: 0; z-index: 60;
  background: var(--fondo-velado);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--linea);
}
.cabecera__interior {
  display: flex; align-items: center; gap: 1rem;
  min-height: 4.5rem; padding-block: 8px;
}
/* Un logotipo compacto a 30 px queda pequeño: se le da más alto para igualar su
   presencia a la del nombre escrito. */
.cabecera__logo { height: 40px; width: auto; }
.cabecera__nombre {
  font-family: var(--fuente-titulo); font-weight: 700; font-size: var(--t-3);
  letter-spacing: .01em; margin: 0; line-height: 1.1;
}
/* El nombre hace de marca mientras no haya logotipo; cuando lo haya, estas dos
   reglas se quedan sin uso y mandan .cabecera__logo y .pie__logo. */
.pie__nombre {
  font-family: var(--fuente-titulo); font-weight: 700; font-size: var(--t-3);
  color: var(--tinta-clara); display: block; margin-bottom: 1rem;
}
.cabecera__bajada {
  margin: 0; font-size: var(--t-1); letter-spacing: .14em; text-transform: uppercase;
  color: var(--acento-texto); font-family: var(--fuente-titulo); font-weight: 600;
}
.cabecera__acciones { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.boton {
  border: 1px solid transparent; border-radius: 999px;
  font-family: var(--fuente-titulo); font-weight: 600; font-size: var(--t-2);
  padding: 12px 20px; display: inline-flex; align-items: center; gap: .5rem;
  transition: background-color .18s, color .18s, border-color .18s, transform .18s;
}
.boton--principal { background: var(--acento-fondo); color: var(--acento-tinta); }
.boton--principal:hover { background: var(--acento-fondo-vivo); }
.boton--linea { background: transparent; border-color: var(--linea); color: var(--tinta); }
.boton--linea:hover { background: var(--fondo-hueso); border-color: var(--borde-fuerte); }
.boton--fantasma { background: transparent; color: var(--acento-texto); padding-inline: .5rem; }
.boton--fantasma:hover { color: var(--acento-vivo); text-decoration: underline; }
.boton:active { transform: translateY(1px); }

.carrito-boton { position: relative; }
.carrito-boton__cuenta {
  min-width: 1.5rem; height: 1.5rem; padding: 0 4px;
  background: var(--acento-fondo); color: var(--acento-tinta);
  border-radius: 999px; font-size: var(--t-1); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--fuente-titulo);
}

/* ── Portada ─────────────────────────────────────────────────────── */
.portada { position: relative; overflow: hidden; background: var(--profundo); }
/* Vale igual para la fotografía y para el vídeo: el cartel del vídeo es la
   propia fotografía, así que el encuadre no cambia al empezar la reproducción. */
.portada__foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 45%;
  background: var(--profundo);
}
/* El velo va sobre la fotografía, así que siempre es oscuro, tanto en un menú
   claro como en uno oscuro. No GARANTIZA el contraste por sí solo: eso depende de
   lo que haya debajo. Por eso está medido en el peor caso, que es un trozo BLANCO
   de fotografía justo detrás del texto, y no en el caso bonito: con estos tres
   tramos, un blanco puro deja el párrafo pequeño en 4,6:1 (pide 4,5) y el
   titular en 5,7:1. Sobre la foto real, que es madera oscura, sobra margen
   (10:1 o más). Los números salen de mezclar la tinta del velo con #FFFFFF y se
   pueden repetir con cualquier calculadora de contraste. */
.portada__velo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,17,16,.70) 0%, rgba(18,17,16,.66) 45%, rgba(18,17,16,.88) 100%);
}
.portada__interior {
  position: relative; color: var(--tinta-clara); padding-block: 5.5rem 4rem;
  max-width: 44rem;
}
.portada__etiqueta {
  font-family: var(--fuente-titulo); font-weight: 600; font-size: var(--t-1);
  letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-clara-suave); margin: 0 0 16px;
}
.portada__titulo {
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: clamp(var(--t-6), 6vw, var(--t-7)); line-height: 1.05; margin: 0 0 1rem;
}
.portada__texto { margin: 0 0 24px; font-size: var(--t-3); color: var(--tinta-clara-suave); max-width: 34rem; }
/* El logotipo en la portada. Va en tinta clara porque el fondo es la fotografía
   con el velo oscuro: medido, la tinta oscura no es fiable sobre las zonas claras
   de la foto. El alt va vacío a propósito, porque el nombre lo da el h1 de abajo. */
.portada__marca { margin: 0 0 20px; }
.portada__marca img { height: 74px; width: auto; }
.portada__datos {
  display: flex; flex-wrap: wrap; gap: .5rem 24px; margin: 24px 0 0;
  padding: 0; list-style: none; font-size: var(--t-2); color: var(--tinta-clara-suave);
}
.portada__datos li { display: flex; align-items: center; gap: .5rem; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.portada .boton--linea { border-color: rgba(255,248,238,.5); color: var(--tinta-clara); }
.portada .boton--linea:hover { background: rgba(255,248,238,.14); border-color: var(--tinta-clara); }

/* ── Navegación de categorías ────────────────────────────────────── */
.navegacion {
  position: sticky; top: 4.5rem; z-index: 50;
  background: var(--fondo); border-bottom: 1px solid var(--linea);
  box-shadow: 0 6px 18px -14px rgba(18,17,16,.5);
}
.navegacion__lista {
  display: flex; gap: .5rem; margin: 0; padding: 12px 0;
  list-style: none; overflow-x: auto; scrollbar-width: none;
}
.navegacion__lista::-webkit-scrollbar { display: none; }
.navegacion__enlace {
  display: inline-block; white-space: nowrap; text-decoration: none;
  font-family: var(--fuente-titulo); font-weight: 600; font-size: var(--t-2);
  color: var(--tinta-suave); background: var(--fondo-hueso);
  border: 1px solid transparent; border-radius: 999px; padding: .5rem 16px;
  transition: background-color .18s, color .18s;
}
.navegacion__enlace:hover { background: var(--fondo-hueso-vivo); color: var(--tinta); }
.navegacion__enlace[aria-current="true"] { background: var(--acento-fondo); color: var(--acento-tinta); }

/* ── Secciones ───────────────────────────────────────────────────── */
.seccion { padding-block: 3rem 1rem; }
.seccion__cabecera {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 24px; padding-bottom: 12px; border-bottom: 2px solid var(--linea);
}
.seccion__titulo {
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: clamp(var(--t-4), 3.4vw, var(--t-6)); margin: 0; letter-spacing: .01em;
}
.seccion__meta {
  font-size: var(--t-1); color: var(--tinta-suave); margin: 0;
  font-family: var(--fuente-titulo); font-weight: 600;
}
.aviso-revision {
  background: var(--aviso-fondo); border: 1px solid var(--aviso-borde);
  border-left: 4px solid var(--acento);
  border-radius: 10px; padding: 12px 1rem; font-size: var(--t-2); color: var(--aviso-texto);
  margin: 0 0 24px; max-width: 60rem;
}
.aviso-revision strong { font-family: var(--fuente-titulo); }
/* El párrafo que envuelve el botón de «Ver N más». */
.seccion__ver-mas { margin-top: 20px; }

/* ── Rejilla de tarjetas ─────────────────────────────────────────── */
.rejilla {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
/* La segunda rejilla de una sección, la que aparece al pulsar «Ver más». */
.rejilla--continuacion { margin-top: 24px; }
.tarjeta {
  background: var(--fondo-claro); border: 1px solid var(--linea);
  border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra);
  display: flex; flex-direction: column;
  transition: box-shadow .22s, transform .22s;
}
.tarjeta:hover { box-shadow: var(--sombra-alta); transform: translateY(-2px); }
.tarjeta__marco {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--profundo);
}
.tarjeta__foto { width: 100%; height: 100%; object-fit: cover; }
.tarjeta__velo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,17,16,0) 45%, rgba(18,17,16,.45) 100%);
  pointer-events: none;
}
/* El precio va en píldora de acento con tinta clara: sobre una fotografía no se
   puede garantizar ningún fondo, así que el color se trae puesto. */
.tarjeta__precio-flotante {
  position: absolute; right: .7rem; bottom: .7rem;
  background: var(--acento-fondo); color: var(--acento-tinta);
  font-family: var(--fuente-titulo); font-weight: 700; font-size: var(--t-2);
  padding: 4px 12px; border-radius: 999px;
}
.tarjeta__cuerpo { padding: 1rem 16px 20px; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.tarjeta__nombre {
  font-family: var(--fuente-titulo); font-weight: 700; font-size: var(--t-3);
  margin: 0; line-height: 1.25;
}
.tarjeta__nombre-en {
  display: block; font-family: var(--fuente-texto); font-weight: 400;
  font-size: var(--t-1); color: var(--tinta-suave); margin-top: 4px;
}
.tarjeta__ingredientes {
  margin: 0; font-size: var(--t-2); color: var(--tinta-suave);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tarjeta__pie { margin-top: auto; display: flex; align-items: center; gap: 8px; padding-top: 8px; }
.tarjeta__pie .boton { flex: 1; justify-content: center; }

/* ── Hueco de fotografía y títulos de grupo ──────────────────────── */
/* Los platos que todavía no tienen fotografía usan las mismas tarjetas, pero el
   marco reserva el sitio exacto que ocupará la imagen. El hueco no depende de
   ningún archivo del cliente: es un marco discreto dibujado con CSS. Si tienen
   emblema, se puede poner de fondo con url('assets/img/logo/...'). */
.tarjeta__marco--pendiente {
  background: linear-gradient(135deg, var(--fondo-hueso) 0%, var(--fondo) 70%);
  box-shadow: inset 0 0 0 1px var(--linea);
}
.tarjeta__marco--pendiente::after {
  content: ''; position: absolute; inset: 34% 38%;
  border: 2px dashed var(--apagado); border-radius: 10px;
}
.grupo-lista__titulo {
  font-family: var(--fuente-titulo); font-weight: 600; font-size: var(--t-1);
  letter-spacing: .16em; text-transform: uppercase; color: var(--acento-texto);
  margin: 2rem 0 16px;
}
.grupo-lista__titulo:first-child { margin-top: 0; }

/* ── Pie ─────────────────────────────────────────────────────────── */
.pie {
  margin-top: 3rem; background: var(--profundo); color: var(--tinta-clara-suave);
  padding-block: 3rem 2rem; font-size: var(--t-2);
}
.pie a { color: var(--tinta-clara); }
.pie__rejilla { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pie__logo { height: 38px; width: auto; margin-bottom: 1rem; }
.pie__titulo { font-family: var(--fuente-titulo); font-weight: 700; font-size: var(--t-2); margin: 0 0 12px; color: var(--tinta-clara); }
/* Los enlaces de contacto del pie son de los pocos que se pulsan con el dedo en
   esta página (llamar, escribir por WhatsApp). Medidos daban 15 px de alto, por
   debajo del mínimo de la WCAG; con 44 px se pulsan sin apuntar. */
.pie__texto { margin: 0 0 .5rem; }
.pie__texto a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.pie__lista { list-style: none; margin: 0; padding: 0; }
.pie__lista li { margin-bottom: 8px; }
.pie__legal {
  margin-top: 2.5rem; padding-top: 24px; border-top: 1px solid var(--linea-clara);
  font-size: var(--t-1); color: var(--tinta-clara-suave); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
}
/* La línea de crédito del pie: el texto y el logotipo del estudio, uno al lado del
   otro y centrados entre sí. El logotipo va en su versión clara porque la tinta
   oscura de la marca sobre un pie oscuro da 1,06:1, o sea invisible. */
.pie__credito { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* El logotipo lleva dentro el icono de WhatsApp y el número, y esas dos cosas son
   el 25,5 % de su alto. A 28 px los dígitos medían 7 px: no se leían. A 52 px
   miden 13 px, que es el tamaño de letra pequeño de este menú. */
.pie__credito-enlace { display: inline-flex; align-items: center; border-radius: 6px; }
.pie__credito-logo { height: 52px; width: auto; }

.ilustrativo { font-size: var(--t-1); color: var(--tinta-clara-suave); }

/* ── Carrito ─────────────────────────────────────────────────────── */
.panel-fondo {
  position: fixed; inset: 0; z-index: 90; background: rgba(18,17,16,.5);
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.panel-fondo[data-abierto="true"] { opacity: 1; visibility: visible; }

.panel {
  position: fixed; z-index: 100; background: var(--fondo); display: flex; flex-direction: column;
  box-shadow: var(--sombra-alta);
  /* Cerrado se va fuera de la pantalla, pero seguiría en el árbol de accesibilidad
     y sus botones se alcanzarían con el tabulador. `visibility: hidden` los retira,
     y se aplica con retardo al cerrar para no cortar la animación de salida. */
  visibility: hidden; transition: transform .3s cubic-bezier(.22,.61,.36,1), visibility 0s .3s;
}
.panel[data-abierto="true"] { visibility: visible; transition: transform .3s cubic-bezier(.22,.61,.36,1), visibility 0s 0s; }
@media (min-width: 860px) {
  .panel { top: 0; right: 0; height: 100%; width: min(430px, 94vw); transform: translateX(102%); }
  .panel[data-abierto="true"] { transform: translateX(0); }
}
@media (max-width: 859px) {
  .panel { left: 0; right: 0; bottom: 0; max-height: 92vh; max-height: 92dvh; border-radius: 18px 18px 0 0; transform: translateY(102%); }
  .panel[data-abierto="true"] { transform: translateY(0); }
}
.panel__cabecera {
  display: flex; align-items: center; gap: 12px; padding: 1rem 20px;
  border-bottom: 1px solid var(--linea); background: var(--fondo-claro);
}
.panel__titulo { font-family: var(--fuente-titulo); font-weight: 700; font-size: var(--t-3); margin: 0; }
.panel__cerrar { margin-left: auto; background: none; border: 1px solid var(--linea); border-radius: 999px; width: 2.2rem; height: 2.2rem; line-height: 1; font-size: var(--t-4); padding: 0; }
.panel__cerrar:hover { background: var(--fondo-hueso); }
.panel__cuerpo { overflow-y: auto; padding: 16px 20px; flex: 1; }
.panel__pie { border-top: 1px solid var(--linea); padding: 1rem 20px 20px; background: var(--fondo-claro); }

.carrito-vacio { text-align: center; color: var(--tinta-suave); padding: 2.5rem 1rem; }
.carrito-vacio p { margin: 0 0 8px; }

.linea-carrito {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
  padding: 12px 0; border-bottom: 1px solid var(--linea);
}
.linea-carrito__nombre { font-family: var(--fuente-titulo); font-weight: 600; font-size: var(--t-2); margin: 0; }
.linea-carrito__unitario { font-size: var(--t-1); color: var(--tinta-suave); margin: 4px 0 0; }
.linea-carrito__importe { font-family: var(--fuente-titulo); font-weight: 700; color: var(--acento-texto); text-align: right; }
.cantidad { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--borde-control); border-radius: 999px; overflow: hidden; }
.cantidad button { border: 0; background: transparent; width: 2rem; height: 2rem; font-size: var(--t-3); line-height: 1; }
.cantidad button:hover { background: var(--fondo-hueso); }
.cantidad__valor { min-width: 1.6rem; text-align: center; font-family: var(--fuente-titulo); font-weight: 600; font-size: var(--t-2); }
/* Llevaba relleno cero: 13 px de letra daban una zona pulsable de 21 px, por
   debajo del mínimo de 24 que pide la WCAG 2.2. Con 4 px arriba y abajo pasa. */
.linea-carrito__quitar { background: none; border: 0; color: var(--tinta-suave); font-size: var(--t-1); text-decoration: underline; padding: 4px 0; }
.linea-carrito__quitar:hover { color: var(--acento-texto); }
/* El contador de cantidad y el botón de quitar, uno al lado del otro. */
.linea-carrito__acciones { display: flex; align-items: center; gap: 12px; }

.subtotal { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 16px; }
.subtotal__etiqueta { font-family: var(--fuente-titulo); font-weight: 600; }
.subtotal__valor { margin-left: auto; font-family: var(--fuente-titulo); font-weight: 700; font-size: var(--t-4); color: var(--acento); }
.subtotal__nota { font-size: var(--t-1); color: var(--tinta-suave); margin: 0 0 16px; }

.dividir { border: 1px solid var(--linea); border-radius: 12px; padding: 16px 1rem; margin-bottom: 1rem; background: var(--fondo); }
.dividir__cabecera { display: flex; align-items: center; gap: 8px; }
.dividir__titulo { font-family: var(--fuente-titulo); font-weight: 600; font-size: var(--t-2); margin: 0; }
.dividir__modos { display: flex; gap: 8px; margin: 12px 0 0; }
.dividir__modo { border: 1px solid var(--borde-control); background: var(--fondo-claro); border-radius: 999px; padding: 4px 12px; font-family: var(--fuente-titulo); font-weight: 600; font-size: var(--t-1); }
.dividir__modo[aria-pressed="true"] { background: var(--acento-fondo); color: var(--acento-tinta); border-color: var(--acento-fondo); }
.dividir__personas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.dividir__persona { width: 2.1rem; height: 2.1rem; border-radius: 999px; border: 1px solid var(--borde-control); background: var(--fondo-claro); font-family: var(--fuente-titulo); font-weight: 600; font-size: var(--t-1); }
.dividir__persona[aria-pressed="true"] { background: var(--acento-fondo); color: var(--acento-tinta); border-color: var(--acento-fondo); }
.dividir__resultado { margin: 12px 0 0; font-size: var(--t-2); }
.dividir__resultado strong { font-family: var(--fuente-titulo); color: var(--acento-texto); font-size: var(--t-3); }
.dividir__asignacion { margin-top: 12px; display: grid; gap: .5rem; }
/* El color del desplegable se declara a mano: si no, el navegador pone su tinta
   por defecto y en un menú oscuro el texto queda invisible sobre el fondo. */
.dividir__asignacion select {
  font: inherit; color: var(--tinta); padding: 8px .5rem;
  border: 1px solid var(--borde-control); border-radius: 8px; background: var(--fondo-claro); max-width: 100%;
}
.dividir__asignacion-fila { display: flex; align-items: center; gap: .5rem; justify-content: space-between; }
.dividir__asignacion-nombre { font-size: var(--t-2); }
.dividir__tabla { list-style: none; margin: 12px 0 0; padding: 0; font-size: var(--t-2); }
.dividir__tabla li { display: flex; gap: 8px; padding: .25rem 0; border-bottom: 1px dotted var(--linea); }
.dividir__tabla span:last-child { margin-left: auto; font-family: var(--fuente-titulo); font-weight: 600; }
.dividir__aviso { font-size: var(--t-1); color: var(--tinta-suave); margin: 8px 0 0; }

.acciones-carrito { display: grid; gap: 8px; }
.boton--whatsapp { background: var(--whatsapp); color: var(--whatsapp-tinta); width: 100%; justify-content: center; padding-block: 16px; font-size: var(--t-2); }
.boton--whatsapp:hover { background: var(--whatsapp-vivo); }
.boton--whatsapp:disabled { background: var(--apagado); cursor: not-allowed; }
.boton--texto { background: none; border: 0; color: var(--tinta-suave); font-size: var(--t-1); text-decoration: underline; justify-self: center; }
.boton--texto:hover { color: var(--acento-texto); }

/* ── Ficha de producto ───────────────────────────────────────────── */
.ficha {
  position: fixed; z-index: 110; background: var(--fondo-claro); box-shadow: var(--sombra-alta);
  display: flex; flex-direction: column; overflow: hidden;
}
@media (min-width: 860px) {
  .ficha { top: 50%; left: 50%; transform: translate(-50%, -46%); width: min(560px, 92vw); max-height: 88vh; max-height: 88dvh; border-radius: 18px; opacity: 0; visibility: hidden; transition: opacity .22s, transform .22s, visibility .22s; }
  .ficha[data-abierto="true"] { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
}
@media (max-width: 859px) {
  .ficha { left: 0; right: 0; bottom: 0; max-height: 92vh; max-height: 92dvh; border-radius: 18px 18px 0 0; transform: translateY(102%); visibility: hidden; transition: transform .3s cubic-bezier(.22,.61,.36,1), visibility 0s .3s; }
  .ficha[data-abierto="true"] { transform: translateY(0); }
}
.ficha__marco { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--profundo); flex: none; }
.ficha__foto { width: 100%; height: 100%; object-fit: cover; }
/* El mismo hueco que en las tarjetas, para la ficha de un plato sin fotografía. */
.ficha__marco--pendiente {
  background: linear-gradient(135deg, var(--fondo-hueso) 0%, var(--fondo) 70%);
}
.ficha__marco--pendiente::after {
  content: ''; position: absolute; inset: 30% 38%;
  border: 2px dashed var(--apagado); border-radius: 10px;
}
/* La cruz va sobre la fotografía, así que lleva su propio fondo y su propia
   tinta: no puede heredar la del cuerpo, que en un menú oscuro sería clara. */
.ficha__cerrar {
  position: absolute; top: .8rem; right: .8rem; width: 2.4rem; height: 2.4rem;
  border-radius: 999px; border: 0; background: var(--fondo-claro); color: var(--tinta);
  font-size: var(--t-4); line-height: 1; padding: 0;
}
.ficha__cuerpo { padding: 20px 24px; overflow-y: auto; }
.ficha__nombre { font-family: var(--fuente-titulo); font-weight: 700; font-size: var(--t-4); margin: 0 0 4px; line-height: 1.2; }
.ficha__nombre-en { font-size: var(--t-2); color: var(--tinta-suave); margin: 0 0 16px; }
.ficha__precio { font-family: var(--fuente-titulo); font-weight: 700; color: var(--acento); font-size: var(--t-4); margin: 0 0 1rem; }
.ficha__seccion { margin: 0 0 8px; font-family: var(--fuente-titulo); font-weight: 600; font-size: var(--t-1); letter-spacing: .14em; text-transform: uppercase; color: var(--acento-texto); }
.ficha__ingredientes { margin: 0 0 12px; }
.ficha__ingredientes-en { margin: 0 0 20px; color: var(--tinta-suave); font-size: var(--t-2); }
.ficha__pendiente { margin: 0 0 20px; font-size: var(--t-2); color: var(--aviso-texto); background: var(--aviso-fondo); border-radius: 8px; padding: 8px 12px; }
.ficha__pie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ficha__pie .boton--principal { flex: 1; justify-content: center; }

/* ── Aviso flotante ──────────────────────────────────────────────── */
.aviso-flotante {
  /* Escondido se va HACIA ABAJO por su propia altura MÁS el margen inferior: un
     120% de su altura no bastaba, porque el aviso de una línea mide 44 px y le
     quedaban 15 px visibles como una pastilla roja asomando por el borde. */
  position: fixed; left: 50%; bottom: 1.5rem;
  transform: translate(-50%, calc(100% + 1.5rem));
  background: var(--acento-fondo); color: var(--acento-tinta); padding: 12px 20px;
  border-radius: 999px; font-family: var(--fuente-titulo); font-weight: 600; font-size: var(--t-2);
  z-index: 130; box-shadow: var(--sombra-alta); transition: transform .25s;
  max-width: 92vw; text-align: center;
}
.aviso-flotante[data-visible="true"] { transform: translate(-50%, 0); }
/* Con la ficha o el pedido abiertos, el aviso se sube: si no, al añadir un plato
   desde el pedido se pone encima del botón de WhatsApp, que es justo el siguiente
   que se va a pulsar. Los dos paneles van antes que el aviso en el documento, así
   que basta con el selector de hermanos. */
.panel[data-abierto="true"] ~ .aviso-flotante,
.ficha[data-abierto="true"] ~ .aviso-flotante { bottom: 12rem; }

@media (max-width: 480px) {
  /* A este ancho no caben el logotipo, el nombre y la bajada: la bajada es lo
     menos importante, así que se retira. */
  .cabecera__bajada { display: none; }
  .cabecera__logo { height: 34px; }
}

@media (max-width: 700px) {
  .portada__interior { padding-block: 56px 3rem; }
  .seccion { padding-block: 32px 12px; }
  .tarjeta__marco { aspect-ratio: 3 / 2; }
}

/* En Safari de iOS la altura de la ventana incluye la barra de herramientas, así
   que 92vh puede quedar por debajo del borde visible. dvh sigue al área real, y
   se declara DOS VECES en cada regla: la primera línea la entiende cualquier
   navegador y la segunda solo los que saben qué es dvh, que la sobrescriben. Antes
   iba dentro de un @supports con una regla base en vh, y así quedaba un vh real
   en la hoja. */