/* 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 ====
 *
 * Colores de Vera Pizza Italiana. Este restaurante no tiene manual de marca, así
 * que la paleta está sacada de su propio material:
 *
 *   · el cartel (materiales/cartel/DSC09729, 31 y 32): el rojo #C85956 del fondo
 *     y la crema #FEDA8F de las letras, medidos sobre los píxeles con color de la
 *     fotografía. El rojo de marca #C24B49 y la crema #FFE7A7 son esas mismas
 *     tintas, ajustadas para que se lean en pantalla;
 *   · la carta (materiales/carta/MENU PIZZERIA FINAL.pdf): su diseño es negro
 *     casi puro con la tipografía en claro, y de ahí sale el fondo #14120F.
 *
 * Los contrastes anotados están medidos sobre --fondo y --fondo-claro, los dos
 * fondos reales del menú, y cumplen el 4.5:1 de la WCAG AA para texto pequeño.
 */
:root {
  --fondo: #14120F;             /* negro cálido, del diseño de la carta */
  --fondo-claro: #1D1A17;       /* tarjetas y superficies elevadas */
  --fondo-hueso: #262220;       /* superficies en reposo: píldoras, botones suaves */
  --fondo-hueso-vivo: #322D29;  /* esas mismas superficies, al pasar por encima */
  --fondo-velado: rgba(20, 18, 15, .93);  /* cabecera pegajosa, translúcida */

  --tinta: #F4ECDD;             /* texto principal (14,6:1) */
  --tinta-suave: #BEB2A0;       /* texto secundario (8,9:1 en el fondo, 7,5:1 en la tarjeta) */
  --tinta-clara: #FFF8EC;       /* texto sobre fondos oscuros: portada y pie */
  --tinta-clara-suave: #FFE7A7; /* la crema del cartel, en segundo plano */

  --acento: #C24B49;            /* el rojo del cartel: precios grandes, filetes, foco */
  --acento-vivo: #D65C58;       /* el acento al pasar por encima */
  --acento-texto: #DC7069;      /* rojo aclarado para texto pequeño (5,4:1 sobre la tarjeta) */
  --acento-fondo: #A83B39;      /* relleno de botón bajo --acento-tinta (5,9:1) */
  --acento-fondo-vivo: #BE4543;
  --acento-tinta: #FFF7EC;      /* texto sobre --acento-fondo */

  --profundo: #0C0B09;          /* fondo oscuro: pie, marcadores, huecos de foto */
  --borde-fuerte: #6B6257;
  --apagado: #4A443C;           /* elementos desactivados (9,1:1 con su tinta) */

  --aviso-fondo: #3A2A15;       /* recuadro de «esto está por confirmar» */
  --aviso-borde: #6B4E22;
  --aviso-texto: #F6D9A0;       /* 10,1:1 sobre --aviso-fondo */

  --whatsapp: #1F7A4D;
  --whatsapp-vivo: #268F5B;
  --whatsapp-tinta: #F1FBF4;    /* 5,0:1 sobre --whatsapp */

  --linea: rgba(255, 231, 167, .16);
  --linea-clara: rgba(255, 231, 167, .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;
  --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: dark;
}
/* ==== PALETA: 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: 17px;
  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: .6rem;
}
/* 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: 1.05rem;
  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: 1.15rem;
  color: var(--tinta-clara); display: block; margin-bottom: 1rem;
}
.cabecera__bajada {
  margin: 0; font-size: .8rem; 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: .6rem; }

.boton {
  border: 1px solid transparent; border-radius: 999px;
  font-family: var(--fuente-titulo); font-weight: 600; font-size: .92rem;
  padding: .7rem 1.15rem; 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 .35rem;
  background: var(--acento-fondo); color: var(--acento-tinta);
  border-radius: 999px; font-size: .78rem; 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: .78rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-clara-suave); margin: 0 0 .9rem;
}
.portada__titulo {
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: clamp(2.1rem, 6vw, 3.4rem); line-height: 1.05; margin: 0 0 1rem;
}
.portada__texto { margin: 0 0 1.6rem; font-size: 1.05rem; 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 1.2rem; }
.portada__marca img { height: 74px; width: auto; }
.portada__datos {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 1.4rem 0 0;
  padding: 0; list-style: none; font-size: .95rem; color: var(--tinta-clara-suave);
}
.portada__datos li { display: flex; align-items: center; gap: .5rem; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: .7rem; }
.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: .7rem 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: .88rem;
  color: var(--tinta-suave); background: var(--fondo-hueso);
  border: 1px solid transparent; border-radius: 999px; padding: .5rem .95rem;
  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: 1.6rem; padding-bottom: .8rem; border-bottom: 2px solid var(--linea);
}
.seccion__titulo {
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: clamp(1.3rem, 3.4vw, 1.8rem); margin: 0; letter-spacing: .01em;
}
.seccion__meta {
  font-size: .85rem; 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: .8rem 1rem; font-size: .9rem; color: var(--aviso-texto);
  margin: 0 0 1.4rem; max-width: 60rem;
}
.aviso-revision strong { font-family: var(--fuente-titulo); }

/* ── Rejilla de tarjetas ─────────────────────────────────────────── */
.rejilla {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.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: .95rem;
  padding: .3rem .65rem; border-radius: 999px;
}
.tarjeta__cuerpo { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.tarjeta__nombre {
  font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.06rem;
  margin: 0; line-height: 1.25;
}
.tarjeta__nombre-en {
  display: block; font-family: var(--fuente-texto); font-weight: 400;
  font-size: .85rem; color: var(--tinta-suave); margin-top: .15rem;
}
.tarjeta__ingredientes {
  margin: 0; font-size: .92rem; 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: .6rem; padding-top: .4rem; }
.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: .82rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--acento-texto);
  margin: 2rem 0 .9rem;
}
.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: .95rem;
}
.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: 1rem; margin: 0 0 .7rem; color: var(--tinta-clara); }
.pie__texto { margin: 0 0 .5rem; }
.pie__lista { list-style: none; margin: 0; padding: 0; }
.pie__lista li { margin-bottom: .45rem; }
.pie__legal {
  margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid var(--linea-clara);
  font-size: .84rem; color: var(--tinta-clara-suave); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
}
.ilustrativo { font-size: .84rem; 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: .8rem; padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--linea); background: var(--fondo-claro);
}
.panel__titulo { font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.1rem; 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: 1.2rem; }
.panel__cerrar:hover { background: var(--fondo-hueso); }
.panel__cuerpo { overflow-y: auto; padding: 1.1rem 1.2rem; flex: 1; }
.panel__pie { border-top: 1px solid var(--linea); padding: 1rem 1.2rem 1.2rem; background: var(--fondo-claro); }

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

.linea-carrito {
  display: grid; grid-template-columns: 1fr auto; gap: .3rem .8rem;
  padding: .85rem 0; border-bottom: 1px solid var(--linea);
}
.linea-carrito__nombre { font-family: var(--fuente-titulo); font-weight: 600; font-size: .98rem; margin: 0; }
.linea-carrito__unitario { font-size: .84rem; color: var(--tinta-suave); margin: .1rem 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: .1rem; border: 1px solid var(--linea); border-radius: 999px; overflow: hidden; }
.cantidad button { border: 0; background: transparent; width: 2rem; height: 2rem; font-size: 1.05rem; 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: .92rem; }
.linea-carrito__quitar { background: none; border: 0; color: var(--tinta-suave); font-size: .82rem; text-decoration: underline; padding: 0; }
.linea-carrito__quitar:hover { color: var(--acento-texto); }

.subtotal { display: flex; align-items: baseline; gap: 1rem; margin-bottom: .9rem; }
.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: 1.35rem; color: var(--acento); }
.subtotal__nota { font-size: .78rem; color: var(--tinta-suave); margin: 0 0 .9rem; }

.dividir { border: 1px solid var(--linea); border-radius: 12px; padding: .9rem 1rem; margin-bottom: 1rem; background: var(--fondo); }
.dividir__cabecera { display: flex; align-items: center; gap: .6rem; }
.dividir__titulo { font-family: var(--fuente-titulo); font-weight: 600; font-size: .95rem; margin: 0; }
.dividir__modos { display: flex; gap: .4rem; margin: .7rem 0 0; }
.dividir__modo { border: 1px solid var(--linea); background: var(--fondo-claro); border-radius: 999px; padding: .35rem .8rem; font-family: var(--fuente-titulo); font-weight: 600; font-size: .82rem; }
.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: .35rem; margin-top: .8rem; }
.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: .85rem; }
.dividir__persona[aria-pressed="true"] { background: var(--acento-fondo); color: var(--acento-tinta); border-color: var(--acento-fondo); }
.dividir__resultado { margin: .8rem 0 0; font-size: .92rem; }
.dividir__resultado strong { font-family: var(--fuente-titulo); color: var(--acento-texto); font-size: 1.05rem; }
.dividir__asignacion { margin-top: .8rem; 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: .4rem .5rem;
  border: 1px solid var(--linea); border-radius: 8px; background: var(--fondo-claro); max-width: 100%;
}
.dividir__tabla { list-style: none; margin: .7rem 0 0; padding: 0; font-size: .9rem; }
.dividir__tabla li { display: flex; gap: .6rem; 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: .78rem; color: var(--tinta-suave); margin: .6rem 0 0; }

.acciones-carrito { display: grid; gap: .6rem; }
.boton--whatsapp { background: var(--whatsapp); color: var(--whatsapp-tinta); width: 100%; justify-content: center; padding-block: .9rem; font-size: 1rem; }
.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: .85rem; 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: 1.25rem; line-height: 1;
}
.ficha__cuerpo { padding: 1.3rem 1.4rem; overflow-y: auto; }
.ficha__nombre { font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.5rem; margin: 0 0 .2rem; line-height: 1.2; }
.ficha__nombre-en { font-size: .95rem; color: var(--tinta-suave); margin: 0 0 .9rem; }
.ficha__precio { font-family: var(--fuente-titulo); font-weight: 700; color: var(--acento); font-size: 1.3rem; margin: 0 0 1rem; }
.ficha__seccion { margin: 0 0 .4rem; font-family: var(--fuente-titulo); font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--acento-texto); }
.ficha__ingredientes { margin: 0 0 .8rem; }
.ficha__ingredientes-en { margin: 0 0 1.2rem; color: var(--tinta-suave); font-size: .93rem; }
.ficha__pendiente { margin: 0 0 1.2rem; font-size: .9rem; color: var(--aviso-texto); background: var(--aviso-fondo); border-radius: 8px; padding: .6rem .8rem; }
.ficha__pie { display: flex; align-items: center; gap: .8rem; 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: .7rem 1.2rem;
  border-radius: 999px; font-family: var(--fuente-titulo); font-weight: 600; font-size: .9rem;
  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: 3.6rem 3rem; }
  .seccion { padding-block: 2.2rem .8rem; }
  .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; }
  }
}