/* 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;
}
/* ==== PALETA: INICIO ====
 *
 * LA PALETA ES SU LOGOTIPO, MEDIDA.
 *
 * No viene de una guía de marca, porque no hay: viene del propio logotipo, que se
 * analizó píxel a píxel. El archivo es una imagen plana (no tiene transparencia) y
 * esto es lo que hay dentro:
 *
 *     negro    #000000   90,2 % del archivo   → el fondo
 *     blanco   #FFFFFF    4,6 %               → el nombre y el dibujo
 *     dorado   #D2B241    2,3 %               → el bol, los palillos y el filete
 *
 * Así que el menú se construye con esos tres y con nada más. Su web usa otros
 * colores —turquesa, azul eléctrico y un verde lima para los botones— y no se han
 * usado: son los de fábrica de la plantilla con la que está hecha, no su marca.
 *
 * Los contrastes anotados están medidos sobre --fondo y --fondo-claro, los dos
 * fondos reales del menú, y cumplen el 4.5:1 que pide la WCAG AA para texto
 * pequeño. --acento es el dorado de marca; para texto menudo está --acento-texto,
 * una variante más clara que sí pasa, y --acento-fondo es el relleno de los
 * botones, que tiene que aguantar --acento-tinta encima.
 */
:root {
  --fondo: #000000;             /* el negro medido en el logotipo, tal cual */
  --fondo-claro: #171614;       /* tarjetas: un pelo por encima del fondo */
  --fondo-hueso: #201E1A;       /* superficies en reposo: píldoras, botones suaves */
  --fondo-hueso-vivo: #2B2823;  /* esas mismas superficies, al pasar por encima */
  --fondo-velado: rgba(10, 10, 10, .93);   /* cabecera pegajosa, translúcida */

  --tinta: #F6F3ED;             /* texto principal (17,8:1 sobre el fondo) */
  --tinta-suave: #BDB6AA;       /* texto secundario (9,4:1) */
  --tinta-clara: #FFFFFF;       /* texto sobre fondos oscuros: portada y pie */
  --tinta-clara-suave: #EAE3D6; /* ese mismo texto, en segundo plano */

  --acento: #D2B241;            /* el dorado del logotipo: precios, filetes, foco */
  --acento-vivo: #E4C85E;       /* el acento al pasar por encima */
  --acento-texto: #E0C55F;      /* acento legible en texto pequeño (10,2:1) */
  --acento-fondo: #D2B241;      /* relleno de botón bajo --acento-tinta */
  --acento-fondo-vivo: #E4C85E;
  --acento-tinta: #17150E;      /* texto sobre --acento-fondo (8,6:1) */

  --profundo: #000000;          /* fondo más oscuro: huecos de foto, pie */
  --borde-fuerte: #6E6555;
  --apagado: #7A7367;           /* elementos desactivados */

  --aviso-fondo: #23201A;       /* recuadro de «esto está por confirmar» */
  --aviso-borde: #6B5A2A;
  --aviso-texto: #EBD9A0;

  /* El verde de WhatsApp, que se reconoce de un vistazo, con texto oscuro encima
     para que pase el contraste. Es el único color que no es suyo, y está porque el
     botón tiene que parecer de WhatsApp. */
  --whatsapp: #25D366;
  --whatsapp-vivo: #1FBF5B;
  --whatsapp-tinta: #0A1A11;

  --linea: rgba(246, 243, 237, .14);
  --linea-clara: rgba(246, 243, 237, .18);   /* separadores sobre fondo oscuro */
  --sombra: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45);
  --sombra-alta: 0 12px 40px rgba(0,0,0,.6);

  --radio: 14px;
  --ancho: 1180px;
  /* Montserrat es la tipografía que ya usa su web, y es la que mejor acompaña a un
     logotipo de letras limpias y mayúsculas. Se usa para todo: aquí una serif no
     pega con el dibujo. La fuente serif que traía la plantilla se ha quitado, porque
     no se usa y pesaba. */
  --fuente-titulo: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-texto: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-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: dark;
}
/* ==== 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;
  /* Dos degradados, no uno. El de arriba abajo ya estaba; el de izquierda a derecha
     está porque el texto va alineado a la izquierda y la fotografía de portada tiene
     comida clara justo ahí: medido con la vista, el nombre en dorado sobre el mango
     de la foto no se leía. Así el lado del texto queda oscuro y la foto respira a la
     derecha. */
  background:
    linear-gradient(90deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.62) 42%, rgba(0,0,0,.18) 100%),
    linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.22) 40%, rgba(0,0,0,.72) 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:
    radial-gradient(circle at 50% 42%, rgba(210,178,65,.14) 0%, rgba(210,178,65,0) 62%),
    linear-gradient(135deg, var(--fondo-hueso) 0%, var(--fondo) 70%);
}
/* El hueco de «todavía no hay fotografía».
 *
 * Antes era un recuadro de línea discontinua. Con una tarjeta suelta eso se
 * entiende, pero la sección de bebidas son veinticuatro seguidas y parecía que el
 * menú se había quedado a medias: lo dijo la revisión con visión, y tenía razón.
 * Ahora es una pieza lisa con un filete dorado fino, que se lee como una decisión y
 * no como un olvido. Sigue sin haber foto que no corresponda, que es lo importante:
 * las fotos que hay son de platos y no se pueden poner en una bebida. */
.tarjeta__marco--pendiente::after {
  content: ''; position: absolute; inset: 30% 40%;
  border: 1px solid rgba(210,178,65,.38); border-radius: 999px;
}
.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); 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); }
.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; }
  }
}