/* 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 SALEN ESTOS COLORES
 *
 * El cliente no tiene manual de marca, así que se midieron sobre su propia
 * carta: la portada del PDF es una fotografía con el naranja #F87800 como color
 * dominante, papel casi blanco (#F8F8F8) y un marrón muy oscuro (#302810), y las
 * páginas interiores son blanco y negro. De ahí sale un naranja de marca y un
 * marrón cálido. El naranja puro de la carta se queda en 2,57:1 sobre este fondo
 * y no vale para nada que se lea, así que --acento es una versión oscurecida que
 * pasa el 3:1 de los precios grandes y --acento-texto otra que pasa el 4,5:1 del
 * texto menudo. Las cifras de cada línea son las que da `revision/contraste.js`,
 * no una impresión a ojo.
 *
 * 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 {
  --fondo: #FCF7F0;             /* fondo de la página */
  --fondo-claro: #FFFFFF;       /* tarjetas y superficies elevadas */
  --fondo-hueso: #F6EDE1;       /* superficies en reposo: píldoras, botones suaves */
  --fondo-hueso-vivo: #EDE0CE;  /* esas mismas superficies, al pasar por encima */
  --fondo-velado: rgba(252, 247, 240, .93);  /* cabecera pegajosa, translúcida */

  --tinta: #221A12;             /* texto principal (16,1:1) */
  --tinta-suave: #5C4A3A;       /* texto secundario (7,9:1) */
  --tinta-clara: #FFF7EC;       /* texto sobre fondos oscuros: portada y pie (13,0:1) */
  --tinta-clara-suave: #F2E2CE; /* ese mismo texto, en segundo plano (10,9:1) */

  --acento: #DD6400;            /* marca: precios grandes, filetes, foco (3,3:1) */
  --acento-vivo: #A94B00;       /* el acento al pasar por encima (5,3:1) */
  --acento-texto: #99400A;      /* acento legible en texto pequeño (6,4:1) */
  --acento-fondo: #AE4F00;      /* relleno de botón bajo --acento-tinta (5,1:1) */
  --acento-fondo-vivo: #984600;
  --acento-tinta: #FFF7EC;      /* texto sobre --acento-fondo (5,1:1) */

  --profundo: #3A2A18;          /* fondo oscuro: pie, marcadores, huecos de foto */
  --borde-fuerte: #A08A70;      /* 3,1:1: bordes que hay que ver */
  --apagado: #9B8E7E;           /* elementos desactivados: no exigen contraste */

  --aviso-fondo: #FDF0DC;       /* recuadro de «esto está por confirmar» */
  --aviso-borde: #E8CE9E;
  --aviso-texto: #6A4113;       /* 7,9:1 sobre --aviso-fondo */

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

  --linea: rgba(34, 26, 18, .14);
  --linea-clara: rgba(242, 226, 206, .22);   /* separadores sobre fondo oscuro */
  --sombra: 0 1px 2px rgba(34,26,18,.06), 0 8px 24px rgba(34,26,18,.08);
  --sombra-alta: 0 12px 40px rgba(34,26,18,.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; }

/* El atributo `hidden` tiene que ganar siempre.
 *
 * El navegador oculta [hidden] con `display: none`, pero cualquier `display` puesto
 * en una clase lo anula —y los botones, las listas de datos y las píldoras de este
 * menú lo llevan—, así que un elemento que el código da por oculto se seguía viendo:
 * el botón «Escribir por WhatsApp» aparecía en un menú que todavía no tiene número
 * de teléfono. Una regla, y deja de pasar. */
[hidden] { display: none !important; }

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

/* Un botón apagado tiene que VERSE apagado.
 *
 * El plato que la carta no valora lleva el botón de añadir desactivado, y sin esta
 * regla salía idéntico al de al lado —naranja, con su sombra— así que parecía que se
 * podía pulsar y no hacía nada. Se distinguen por color y por forma (borde
 * discontinuo), no solo por color: quien no distingue el tono también lo nota.
 * El contraste del texto sobre este fondo es 7,3:1, y los controles desactivados
 * están exentos de la exigencia de contraste de todos modos (WCAG 1.4.3). */
.boton:disabled, .boton[aria-disabled="true"] {
  background: var(--fondo-hueso); color: var(--tinta-suave);
  border: 2px dashed var(--apagado); cursor: not-allowed; box-shadow: none;
}
.boton:disabled:hover, .boton[aria-disabled="true"]:hover { background: var(--fondo-hueso); }

.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;
}
.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; }
/* El aviso de las fotos de banco: discreto, pero se lee (7,3:1 sobre el pie). */
.pie__fotos {
  margin: 8px 0 0; font-size: var(--t-1); line-height: 1.45;
  color: var(--tinta-clara-suave); max-width: 62ch;   /* por debajo de 75 caracteres por línea */
}
.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);
  /* Cerrado, además de estar fuera de la pantalla, no se puede tabular dentro. */
  visibility: hidden;
}
.panel[data-abierto="true"] { visibility: visible; }
@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;
  visibility: hidden;
}
.ficha[data-abierto="true"] { visibility: visible; }
@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); }
/* La nota de que la foto no es del restaurante. Tinta suave y cuerpo pequeño:
   tiene que verse, no gritar. */
.ficha__ilustrativa {
  margin: 12px 0 0; padding: 8px 10px; border-radius: 8px;
  background: var(--fondo-hueso); color: var(--tinta-suave);
  font-size: var(--t-1); line-height: 1.45;
}
.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 ──────────────────────────────────────────────── */
/* El aviso se guarda por debajo del borde de la ventana.
   Antes se apartaba con `translate(-50%, 120%)` y una franja de la píldora naranja
   se quedaba asomando en el centro de la pantalla en todas las vistas: se veía un
   trozo de algo que no era nada. Con `calc(100% + 2rem)` se aparta entero —su
   altura más el margen que tiene debajo— y además se apaga con opacidad, para que
   no cuente ni para quien navega con lector de pantalla ni para las capturas. */
.aviso-flotante {
  position: fixed; left: 50%; bottom: 1.5rem;
  transform: translate(-50%, calc(100% + 2rem));
  opacity: 0; visibility: hidden;
  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, opacity .2s, visibility .2s;
  max-width: 92vw; text-align: center;
}
.aviso-flotante[data-visible="true"] {
  transform: translate(-50%, 0); opacity: 1; visibility: visible;
}

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