/* 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 ====
 *
 * La carta de 100% Chonero no tiene fondos lisos: sus páginas son degradaciones
 * de verde muy oscuro con hojas ilustradas. Esos degradados no se copian —la
 * copia pediría los archivos del diseñador—: se reconstruyen con los TONOS
 * ANCLA medidos en los extremos de la carta, que son los del brief del cliente:
 * #082018, #102018 y #185830 (verdes), #e0d8c8 (crema) y #d0d0c8 (hueso).
 *
 * Los contrastes anotados están medidos sobre los dos fondos reales del menú
 * (--fondo y --fondo-claro) y cumplen el 4,5:1 de la WCAG AA para texto pequeño.
 * --acento es la crema de la marca: sirve para precios grandes y filetes;
 * --acento-texto es la variante hueso para texto menudo, y --acento-fondo es el
 * relleno de los botones, que aguanta --acento-tinta (verde muy oscuro) encima.
 */
:root {
  --fondo: #0B2015;             /* fondo de la página */
  --fondo-claro: #102018;       /* tarjetas y superficies elevadas */
  --fondo-hueso: #163022;       /* superficies en reposo: píldoras, botones suaves */
  --fondo-hueso-vivo: #1D3B2A;  /* esas mismas superficies, al pasar por encima */
  --fondo-velado: rgba(11, 32, 21, .92);  /* cabecera pegajosa, translúcida */
  --fondo-tarjeta-alto: #142C1E;         /* extremo claro del degradado de tarjeta */
  --fondo-pie-alto: #0A1E14;             /* extremo claro del degradado del pie */
  --degradado-marca: linear-gradient(158deg, #185830 0%, #102018 54%, #082018 100%);
  /* Velos y realces: los mismos tonos ancla, con transparencia. Van aquí para que
     la regla de «todo color vive en PALETA» sea verdad también para los degradados. */
  --verde-halo: rgba(24, 88, 48, .52);
  --verde-halo-suave: rgba(24, 88, 48, .30);
  --verde-halo-bajo: rgba(24, 88, 48, .35);
  --verde-filete: rgba(24, 88, 48, .90);
  --velo-portada-alto: rgba(8, 32, 24, .70);
  --velo-portada-medio: rgba(8, 32, 24, .55);
  --velo-portada-bajo: rgba(8, 32, 24, .90);
  --velo-panel: rgba(8, 32, 24, .90);
  --velo-panel-alto: rgba(8, 32, 24, .94);
  --velo-tarjeta: rgba(8, 32, 24, .55);
  --crema-linea: rgba(247, 241, 228, .50);
  --crema-velo: rgba(247, 241, 228, .14);
  --profundo-velo: rgba(4, 16, 11, .66);
  --degradado-pagina:
    radial-gradient(1100px 740px at 10% -10%, var(--verde-halo), transparent 62%),
    radial-gradient(880px 620px at 104% 6%, var(--verde-halo-suave), transparent 58%),
    linear-gradient(172deg, var(--fondo-tarjeta-alto) 0%, var(--fondo) 46%, var(--profundo) 100%);

  --tinta: #F0E8D8;             /* texto principal */
  --tinta-suave: #C9C4B4;       /* texto secundario */
  --tinta-clara: #F7F1E4;       /* texto sobre fondos oscuros: portada y pie */
  --tinta-clara-suave: #E0D8C8; /* ese mismo texto, en segundo plano */

  --acento: #E0D8C8;            /* marca: precios grandes, filetes, foco */
  --acento-vivo: #F0E8D8;       /* el acento al pasar por encima */
  --acento-texto: #D0D0C8;      /* acento legible en texto pequeño */
  --acento-fondo: #E0D8C8;      /* relleno de botón bajo --acento-tinta */
  --acento-fondo-vivo: #F0EADB;
  --acento-tinta: #0B2015;      /* texto sobre --acento-fondo */

  --profundo: #082018;          /* fondo oscuro: pie, marcadores, huecos de foto */
  --borde-fuerte: #4E6B55;
  --apagado: #7E8B7C;           /* elementos desactivados */

  --aviso-fondo: #33280F;       /* recuadro de «esto está por confirmar» */
  --aviso-borde: #7A6224;
  --aviso-texto: #F2DCA4;

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

  --linea: rgba(224, 216, 200, .16);
  --linea-clara: rgba(224, 216, 200, .24);   /* separadores sobre fondo oscuro */
  --sombra: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 28px rgba(0, 0, 0, .32);
  --sombra-alta: 0 16px 44px rgba(0, 0, 0, .55);
  --sombra-navegacion: 0 6px 18px -14px rgba(0, 0, 0, .8);

  --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 ==== */

/* ==== ESCALA TIPOGRÁFICA: INICIO ====
 *
 * Seis peldaños, con saltos que el ojo distingue. Los tamaños de letra salen de
 * aquí y de ningún otro sitio.
 */
: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 */
}
/* ==== ESCALA TIPOGRÁFICA: FIN ==== */

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

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

body {
  margin: 0;
  background: var(--degradado-pagina);
  background-color: var(--fondo);
  background-attachment: fixed;
  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(--acento-fondo); color: var(--acento-tinta); 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;
  margin: 0; padding: 0;
}

/* ── 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;
}
/* El logotipo es de tres partes y se usa entero, tal como lo entregó el cliente:
   personaje, «100% CHONERO» y «Restaurante y Cafetería». */
.cabecera__marca { display: inline-flex; align-items: center; text-decoration: none; }
.cabecera__logo { height: 48px; width: auto; }
.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(--borde-fuerte); color: var(--tinta); }
.boton--linea:hover { background: var(--fondo-hueso-vivo); border-color: var(--acento); }
.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); }
.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: es lo que garantiza
   que el texto de encima se lea. */
.portada__velo {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--velo-portada-alto) 0%, var(--velo-portada-medio) 45%, var(--velo-portada-bajo) 100%),
    radial-gradient(700px 420px at 20% 30%, var(--verde-halo-bajo), transparent 70%);
}
.portada__interior {
  position: relative; color: var(--tinta-clara); margin-block: 3.5rem 3rem;
  padding: 32px; max-width: 42rem; border-radius: 20px;
  /* Sobre la fotografía no se puede garantizar ningún fondo: el texto viaja con
     su propio panel oscuro, así el contraste se mide contra el panel y no contra
     lo que haya debajo. */
  background: linear-gradient(180deg, var(--velo-panel) 0%, var(--velo-panel-alto) 100%);
  box-shadow: var(--sombra-alta);
}
/* El logotipo en la portada, entero y sobre el velo oscuro. */
.portada__marca { margin: 0 0 20px; }
.portada__marca img { height: clamp(76px, 12vw, 116px); width: auto; }
.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__texto { margin: 0 0 24px; font-size: var(--t-3); color: var(--tinta-clara-suave); max-width: 34rem; }
.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: var(--crema-linea); color: var(--tinta-clara); }
.portada .boton--linea:hover { background: var(--crema-velo); 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: var(--sombra-navegacion);
}
.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 var(--linea); border-radius: 999px; padding: .5rem 16px;
  min-height: 2.75rem; display: inline-flex; align-items: center;
  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); border-color: var(--acento-fondo); }

/* ── 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);
  position: relative;
}
/* El filete de marca: un degradado propio hecho con los verdes y la crema de la
   carta. No reproduce el de ninguna página. */
.seccion__cabecera::after {
  content: ''; position: absolute; left: 0; bottom: -2px;
  width: min(220px, 40%); height: 2px;
  background: linear-gradient(90deg, var(--acento) 0%, var(--verde-filete) 45%, transparent 100%);
}
.seccion__foto {
  width: 96px; height: 64px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--linea); flex: none;
}
.seccion__cabecera { align-items: center; }
.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;
}
/* Las condiciones de venta de la carta («incluyen café», «solo domingos»…). */
.seccion__nota {
  background: var(--fondo-hueso);
  border: 1px solid var(--linea); border-left: 4px solid var(--acento);
  border-radius: 10px; padding: 12px 16px; font-size: var(--t-2);
  color: var(--tinta-suave); margin: 0 0 24px; max-width: 34rem;
}
.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); }
.seccion__ver-mas { margin-top: 20px; }

/* ── Rejilla de tarjetas ─────────────────────────────────────────── */
.rejilla {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.rejilla--continuacion { margin-top: 24px; }
.tarjeta {
  background: linear-gradient(180deg, var(--fondo-tarjeta-alto) 0%, var(--fondo-claro) 100%);
  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, transparent 45%, var(--velo-tarjeta) 100%);
  pointer-events: none;
}
/* El precio va en píldora de crema con tinta oscura: 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__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;
}
/* Las notas de la carta que son condición de venta, no adorno. */
.tarjeta__nota {
  margin: 0; font-size: var(--t-1); color: var(--acento-texto);
}
.tarjeta__pendiente {
  margin: 0; font-size: var(--t-1); color: var(--aviso-texto);
  background: var(--aviso-fondo); border-radius: 6px; padding: 4px 8px;
  align-self: flex-start;
}
.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 ──────────────────────── */
.tarjeta__marco--pendiente {
  background: var(--degradado-marca);
  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: linear-gradient(180deg, var(--fondo-pie-alto) 0%, var(--profundo) 100%);
  color: var(--tinta-clara-suave);
  padding-block: 3rem 2rem; font-size: var(--t-2);
  border-top: 1px solid var(--linea);
}
.pie a { color: var(--tinta-clara); }
.pie__rejilla { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pie__logo { height: 104px; width: auto; margin-bottom: 16px; }
.pie__cierre {
  font-family: var(--fuente-titulo); font-weight: 600; font-size: var(--t-3);
  color: var(--tinta-clara); margin: 0; max-width: 20rem;
}
.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__lista--locales li { font-size: var(--t-2); line-height: 1.45; }
.pie__lista--locales strong { font-family: var(--fuente-titulo); color: var(--tinta-clara); }
.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; align-items: center; justify-content: space-between;
}
/* La línea de crédito del pie: el texto y el logotipo del estudio, uno al lado del
   otro y centrados entre sí. */
.pie__credito { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.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); margin: 0; max-width: 40rem; }

/* ── Carrito ─────────────────────────────────────────────────────── */
.panel-fondo {
  position: fixed; inset: 0; z-index: 90; background: var(--profundo-velo);
  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); visibility: hidden;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), visibility .3s;
}
.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: var(--fondo-hueso); border: 1px solid var(--linea); border-radius: 999px; width: 2.75rem; height: 2.75rem; line-height: 1; font-size: var(--t-4); padding: 0; color: var(--tinta); }
.panel__cerrar:hover { background: var(--fondo-hueso-vivo); }
.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: 2.75rem; height: 2.75rem; font-size: var(--t-3); line-height: 1; color: var(--tinta); }
.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); }
.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); color: var(--tinta); }
.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.75rem; height: 2.75rem; 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); color: var(--tinta); }
.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. */
.dividir__asignacion select {
  font: inherit; color: var(--tinta); padding: 8px .5rem;
  border: 1px solid var(--linea); border-radius: 8px; background: var(--fondo-hueso); 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); color: var(--acento-tinta); 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%); visibility: hidden; transition: transform .3s cubic-bezier(.22,.61,.36,1), visibility .3s; }
  .ficha[data-abierto="true"] { transform: translateY(0); visibility: visible; }
}
.ficha__marco { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--profundo); flex: none; }
.ficha__foto { width: 100%; height: 100%; object-fit: cover; }
.ficha__marco--pendiente { background: var(--degradado-marca); }
.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. */
.ficha__cerrar {
  position: absolute; top: .8rem; right: .8rem; width: 2.75rem; height: 2.75rem;
  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__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__nota { margin: 0 0 16px; font-size: var(--t-2); color: var(--acento-texto); }
.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) {
  .cabecera__logo { height: 40px; }
  .pie__logo { height: 84px; }
}

@media (max-width: 700px) {
  .portada__interior { padding-block: 3.5rem 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; }
  }
}