/* 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.
 *
 * DE DÓNDE SALE ESTA PALETA
 *
 * Del propio PDF de la carta, no de una idea sobre el restaurante. El archivo
 * pinta su texto y sus filetes con un solo color de marca —RGB 0 · 0,3059 ·
 * 0,4784— que es el azul profundo de abajo, y todo lo demás es papel blanco y
 * tinta casi negra. Ese azul cubre de sobra el 4,5:1 (8,4:1 sobre el papel), así
 * que sirve tal cual para precios, títulos y botones, y no hace falta inventar
 * una variante más oscura para el texto menudo. El papel del menú se ha
 * entibiado un punto para que la página no deslumbre en el móvil, y el verde del
 * botón de WhatsApp es el único color que no viene de la carta: lo pone la marca
 * de WhatsApp, no el restaurante.
 */
:root {
  --fondo: #FBF8F3;             /* papel del menú */
  --fondo-claro: #FFFFFF;       /* tarjetas y superficies elevadas */
  --fondo-hueso: #EFE7D9;       /* superficies en reposo: píldoras, botones suaves */
  --fondo-hueso-vivo: #E5DAC7;  /* esas mismas superficies, al pasar por encima */
  --fondo-velado: rgba(251, 248, 243, .94);  /* cabecera pegajosa, translúcida */

  --tinta: #14181C;             /* texto principal (16,8:1) */
  --tinta-suave: #4E5358;       /* texto secundario (7,3:1) */
  --tinta-clara: #F6F2EA;       /* texto sobre fondos oscuros: portada y pie (13,3:1) */
  --tinta-clara-suave: #DDE3E6; /* ese mismo texto, en segundo plano (11,5:1) */

  --acento: #004E7A;            /* marca de la carta: precios grandes, filetes, foco */
  --acento-vivo: #00608F;       /* el acento al pasar por encima */
  --acento-texto: #004E7A;      /* el mismo azul en texto pequeño (8,4:1) */
  --acento-fondo: #004E7A;      /* relleno de botón bajo --acento-tinta */
  --acento-fondo-vivo: #00608F;
  --acento-tinta: #F4FAFF;      /* texto sobre --acento-fondo (8,4:1) */

  --profundo: #062A3F;          /* fondo oscuro: pie, velos, huecos de foto */
  --borde-fuerte: #8E9AA2;
  --apagado: #A9AFB2;           /* elementos desactivados */

  --aviso-fondo: #FBF0D8;       /* recuadro de «esto está por confirmar» */
  --aviso-borde: #E4CD9E;
  --aviso-texto: #6A4A12;       /* (7,1:1 sobre --aviso-fondo) */

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

  --linea: rgba(20, 24, 28, .14);
  --linea-clara: rgba(221, 227, 230, .22);   /* separadores sobre fondo oscuro */
  --sombra: 0 1px 2px rgba(20,24,28,.05), 0 8px 24px rgba(20,24,28,.08);
  --sombra-alta: 0 12px 40px rgba(6,42,63,.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 siete líneas.
 */
:root {
  --t-1: .8125rem;    /* 13 px */
  --t-2: .9375rem;    /* 15 px */
  --t-3: 1.0625rem;   /* 17 px */
  --t-4: 1.25rem;     /* 20 px */
  --t-5: 1.5rem;      /* 24 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: es lo que garantiza que el texto de encima se lea. */
.portada__velo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,17,16,.55) 0%, rgba(18,17,16,.35) 45%, rgba(18,17,16,.78) 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;
}
/* El peso del corte, o la aclaración de que el precio es el de la porción extra.
   Va en versalitas para no competir con el nombre del plato. */
.tarjeta__detalle {
  margin: 0; font-family: var(--fuente-titulo); font-weight: 600;
  font-size: var(--t-1); letter-spacing: .12em; text-transform: uppercase;
  color: var(--acento-texto);
}
.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__nota { margin: 2rem 0 0; max-width: 62ch; }
.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); transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
@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; 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(--linea); 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); }
.linea-carrito__quitar { background: none; border: 0; color: var(--tinta-suave); font-size: var(--t-1); text-decoration: underline; padding: 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(--linea); 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(--linea); 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(--linea); 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; 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; border-radius: 18px 18px 0 0; transform: translateY(102%); transition: transform .3s cubic-bezier(.22,.61,.36,1); }
  .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-5); 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); }

/* ── Selector de tamaño o de medida ────────────────────────────────
   La pizza se pide en personal, mediana o familiar, y el vino por copa o por
   botella. Cada opción lleva su precio, así que no hay que adivinar cuánto sube
   cambiar de tamaño. La opción elegida se marca con el azul de la carta y se
   anuncia con aria-pressed, que es lo que lee quien no ve el color. */
.variantes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.variantes__opcion {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: 44px; padding: 8px 16px; border-radius: 10px;
  border: 1px solid var(--borde-fuerte); background: var(--fondo-hueso);
  color: var(--tinta); text-align: left; font-family: var(--fuente-titulo);
  font-size: var(--t-2); transition: background .18s, border-color .18s, color .18s;
}
.variantes__opcion:hover { background: var(--fondo-hueso-vivo); }
.variantes__opcion[aria-pressed="true"] {
  background: var(--acento-fondo); border-color: var(--acento-fondo);
  color: var(--acento-tinta);
}
.variantes__nombre { font-weight: 600; line-height: 1.2; }
.variantes__precio { font-size: var(--t-1); opacity: .85; }
.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 {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 120%);
  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); }

@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. */
@supports (max-height: 100dvh) {
  @media (max-width: 859px) {
    .panel { max-height: 92dvh; }
    .ficha { max-height: 92dvh; }
  }
}