/* Carta Pura Vida — móvil primero.
   Paleta: azul atún (tinta), blanco sal (fondo), amarillo sol (solo horizonte y categoría activa). */
:root {
  --atun: #123B5C;
  --atun-claro: #2A5677;
  --sal: #F6F8F7;
  --blanco: #FFFFFF;
  --sol: #F2B33D;
  --marisma: #56656A;
  --linea: #DDE4E2;

  --fuente-texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-titulo: "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", sans-serif-condensed, system-ui, sans-serif;

  --gutter: 1rem;
  --alto-nav: 3.75rem;
  --ancho: 40rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--sal);
  color: var(--atun);
  font: 400 1rem/1.5 var(--fuente-texto);
  overflow-x: hidden;
}

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--atun);
  outline-offset: 2px;
  border-radius: 4px;
}

.saltar {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 10;
  padding: .75rem 1rem;
  background: var(--blanco);
  color: var(--atun);
  font-weight: 600;
}
.saltar:focus { top: .5rem; }

/* ── Cabecera: el azul del atún y una raya de horizonte ───────────────── */
.cabecera {
  background: var(--atun);
  color: var(--blanco);
  padding: calc(1.75rem + env(safe-area-inset-top)) var(--gutter) 1.25rem;
  border-bottom: 6px solid var(--sol);
}
.cabecera > * {
  max-width: var(--ancho);
  margin-inline: auto;
}
.cabecera__nombre {
  min-height: 1em;
  font-family: var(--fuente-titulo);
  font-stretch: condensed;
  font-weight: 700;
  font-size: clamp(2.75rem, 14vw, 3.75rem);
  line-height: .95;
  letter-spacing: -.01em;
}
.cabecera__iva {
  min-height: 1.5em;
  margin-top: .5rem;
  font-size: .9375rem;
  color: #D6E2EA;
}
.cabecera__alergias {
  min-height: 1.5em;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--blanco);
}

/* ── Pestañas de categoría, fijas arriba ──────────────────────────────── */
.categorias {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--sal);
  border-bottom: 1px solid var(--linea);
}
.categorias__lista {
  display: flex;
  gap: .5rem;
  max-width: var(--ancho);
  min-height: var(--alto-nav);
  margin-inline: auto;
  padding: .5rem var(--gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-padding-inline: var(--gutter);
}
.categorias__lista::-webkit-scrollbar { display: none; }

.categorias__enlace {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem; /* 44 px */
  padding: 0 1rem;
  border: 1.5px solid var(--atun);
  border-radius: 999px;
  color: var(--atun);
  background: var(--blanco);
  font-weight: 600;
  font-size: .9375rem;
  white-space: nowrap;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.categorias__enlace[aria-current="true"] {
  background: var(--atun);
  color: var(--blanco);
  box-shadow: inset 0 -4px 0 var(--sol);
}

/* ── Carta ────────────────────────────────────────────────────────────── */
.carta {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 0 var(--gutter) calc(6rem + env(safe-area-inset-bottom)); /* deja sitio al botón flotante */
}
.carta:focus { outline: none; }

.seccion {
  scroll-margin-top: calc(var(--alto-nav) + .5rem);
  padding-top: 2.25rem;
}
.seccion__titulo {
  font-family: var(--fuente-titulo);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.1;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--atun);
}

.plato {
  padding: .875rem 0;
  border-bottom: 1px solid var(--linea);
}
.plato__linea {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
}
.plato__nombre {
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: .01em;
  overflow-wrap: anywhere;
}
/* Puntos guía entre nombre y precio, como en una carta impresa */
.plato__guia {
  flex: 1 1 1.5rem;
  min-width: 1.5rem;
  margin-bottom: .4em;
  border-bottom: 2px dotted #9AAAB3;
}
.precio {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.plato__precios {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .25rem 1.25rem;
  margin-top: .25rem;
}
.precio__par {
  display: inline-flex;
  align-items: baseline;
  gap: .375rem;
  white-space: nowrap;
}
.precio__etiqueta {
  font-size: .875rem;
  color: var(--marisma);
}
.plato__desc {
  margin-top: .25rem;
  max-width: 34rem;
  color: var(--marisma);
  font-size: .9375rem;
}

/* ── Estados: cargando, vacío, error ──────────────────────────────────── */
.carta__esqueleto {
  display: grid;
  gap: 1.25rem;
  padding-top: 2.25rem;
}
.carta__esqueleto span {
  display: block;
  height: 1.25rem;
  border-radius: 4px;
  background: var(--linea);
}
.carta__esqueleto span:first-child { width: 55%; height: 2rem; }
.carta__esqueleto span:nth-child(odd) { width: 80%; }

.estado {
  padding-top: 2.5rem;
  font-size: 1.0625rem;
}
.boton,
.estado__boton {
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--atun);
  color: var(--blanco);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.estado__boton { margin-top: 1rem; }

/* ── Alérgenos: icono + texto, nunca solo color ───────────────────────── */
.icono {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.alergenos {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin-top: .5rem;
}
.alergeno {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .125rem .625rem .125rem .125rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--blanco);
  font-size: .875rem;
  line-height: 1.4;
}
.alergeno__marca {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--color, var(--marisma));
  color: var(--tinta-icono, var(--blanco));
}
.alergeno__marca .icono { width: 1rem; height: 1rem; stroke-width: 2.25; }
.sin-alergenos {
  margin-top: .375rem;
  font-size: .875rem;
  color: var(--marisma);
}

/* ── Filtro «No quiero…» ──────────────────────────────────────────────── */
.filtro-abrir {
  position: fixed;
  right: max(var(--gutter), env(safe-area-inset-right));
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 3rem;
  padding: 0 1.25rem 0 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--atun);
  color: var(--blanco);
  font: inherit;
  font-weight: 650;
  box-shadow: 0 6px 18px rgba(18, 59, 92, .35);
  cursor: pointer;
}
.filtro-abrir[hidden] { display: none; }
.filtro-abrir__n {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 .375rem;
  border-radius: 999px;
  background: var(--sol);
  color: var(--atun);
  font-size: .875rem;
  font-weight: 700;
}
.filtro-abrir__n[hidden] { display: none; }

.filtro {
  width: 100%;
  max-width: var(--ancho);
  max-height: 90dvh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: 1.25rem 1.25rem 0 0;
  background: var(--sal);
  color: var(--atun);
}
.filtro::backdrop { background: rgba(10, 30, 46, .55); }
.filtro__cuerpo { padding: 1.5rem var(--gutter) calc(1rem + env(safe-area-inset-bottom)); }
.filtro__titulo {
  font-family: var(--fuente-titulo);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.1;
}
.filtro__ayuda { margin-top: .25rem; color: var(--marisma); }
.filtro__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: .5rem;
  margin-top: 1rem;
}
.filtro__opcion {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  min-height: 3rem;
  padding: .375rem .625rem .375rem .375rem;
  border: 1.5px solid var(--linea);
  border-radius: .75rem;
  background: var(--blanco);
  color: var(--atun);
  font: inherit;
  font-size: .9375rem;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}
.filtro__opcion .alergeno__marca { width: 2rem; height: 2rem; }
.filtro__opcion .alergeno__marca .icono { width: 1.25rem; height: 1.25rem; }
.filtro__opcion[aria-pressed="true"] {
  border-color: var(--atun);
  background: var(--atun);
  color: var(--blanco);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.filtro__aviso { margin-top: 1rem; font-weight: 600; }
.filtro__acciones {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
}
.boton--secundario {
  background: transparent;
  color: var(--atun);
  box-shadow: inset 0 0 0 1.5px var(--atun);
}

.filtro-estado {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .75rem;
  max-width: var(--ancho);
  margin: 1rem auto 0;
  margin-inline: max(var(--gutter), calc((100% - var(--ancho)) / 2));
  padding: .75rem 1rem;
  background: var(--blanco);
  border: 1.5px solid var(--atun);
  border-radius: .75rem;
  font-size: .9375rem;
}
.filtro-estado[hidden] { display: none; }
.enlace-boton {
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--atun);
  font: inherit;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ── Distintivos: picante y no disponible ─────────────────────────────── */
.distintivos {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin-top: .375rem;
}
.distintivo {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  min-height: 1.75rem;
  padding: 0 .625rem;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 650;
}
.distintivo .icono { width: 1.125rem; height: 1.125rem; }
.distintivo--picante {
  background: #FCE8E6;
  color: #A3201A;
}
.distintivo--agotado {
  background: var(--atun);
  color: var(--blanco);
}
/* Agotado: se ve tachado y apagado, pero sigue en la carta */
.plato--agotado .plato__nombre,
.plato--agotado .precio {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  color: var(--marisma);
}

/* ── Selector de idioma (solo si hay traducciones) ────────────────────── */
.cabecera { position: relative; }
.idioma {
  position: absolute;
  top: calc(.75rem + env(safe-area-inset-top));
  right: var(--gutter);
}
.idioma[hidden] { display: none; }
.idioma__select {
  min-height: 2.75rem;
  padding: 0 2rem 0 .875rem;
  border: 1.5px solid rgba(255, 255, 255, .6);
  border-radius: 999px;
  background: var(--atun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") no-repeat right .75rem center / .75rem;
  color: var(--blanco);
  font: inherit;
  font-weight: 600;
  appearance: none;
  cursor: pointer;
}
.idioma__select:focus-visible { outline-color: var(--sol); }
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Con selector visible, el nombre baja para no chocar con él */
.cabecera:has(.idioma:not([hidden])) { padding-top: calc(4rem + env(safe-area-inset-top)); }

/* ── Sin conexión: carta guardada ─────────────────────────────────────── */
.aviso-offline {
  max-width: var(--ancho);
  margin: 1rem auto 0;
  margin-inline: max(var(--gutter), calc((100% - var(--ancho)) / 2));
  padding: .75rem 1rem;
  border-radius: .75rem;
  background: var(--atun);
  color: var(--blanco);
  font-size: .9375rem;
}
.aviso-offline[hidden] { display: none; }

/* ── Aviso de traducción automática (idiomas distintos del español) ───── */
.aviso-traduccion {
  max-width: var(--ancho);
  margin: 1rem auto 0;
  margin-inline: max(var(--gutter), calc((100% - var(--ancho)) / 2));
  padding: .75rem 1rem;
  border-left: 4px solid var(--atun);
  background: var(--blanco);
  font-size: .9375rem;
}
.aviso-traduccion[hidden] { display: none; }

/* ── «Ver foto» y visor a pantalla completa ───────────────────────────── */
.plato__ver {
  display: flex;
  justify-content: flex-end;
  margin-top: .375rem;
}
.ver-foto {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: 0 1rem 0 .875rem;
  border: 0;
  border-radius: 999px;
  background: var(--atun);
  color: var(--blanco);
  font: inherit;
  font-weight: 650;
  font-size: .9375rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ver-foto .icono { width: 1.25rem; height: 1.25rem; }
.ver-foto:active { transform: scale(.97); }
.plato--agotado .ver-foto { background: var(--marisma); }

.visor {
  position: fixed;
  inset: 0;
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--atun);
  color: var(--blanco);
}
.visor[open] { display: flex; flex-direction: column; }
.visor::backdrop { background: var(--atun); }
.visor__barra {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: calc(.75rem + env(safe-area-inset-top)) var(--gutter) .75rem;
  border-bottom: 4px solid var(--sol);
}
.visor__titulo {
  flex: 1;
  font-size: 1.125rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.visor__cerrar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border: 1.5px solid rgba(255, 255, 255, .6);
  border-radius: 50%;
  background: transparent;
  color: var(--blanco);
  cursor: pointer;
}
.visor__cerrar:focus-visible, .visor__escena:focus-visible { outline-color: var(--sol); }
.visor__escena {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 1rem;
  overflow: hidden; /* al girar, las esquinas de la imagen no deben desbordar */
  touch-action: none; /* dentro del visor, el dedo gira la imagen */
  cursor: grab;
  user-select: none;
}
.visor__escena:active { cursor: grabbing; }
.visor__imagen {
  width: min(88vw, 60vh, 28rem);
  height: auto;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .35));
}
.visor__girar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-size: .9375rem;
  color: #D6E2EA;
}
.visor__girar .icono { width: 1.25rem; height: 1.25rem; }
.visor__pie {
  padding: 1rem var(--gutter) calc(1.25rem + env(safe-area-inset-bottom));
  text-align: center;
}
.visor__precio {
  font-size: 1.375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.visor__nota {
  margin-top: .375rem;
  font-size: .875rem;
  color: #D6E2EA;
}
html:has(.visor[open]) { overflow: hidden; } /* sin scroll de fondo con el visor abierto */

/* Visor: modelo 3D y foto real */
.visor__escena:not(.visor__escena--girable) { cursor: auto; }
.visor__modelo {
  width: 100%;
  height: 100%;
  min-height: 16rem;
  background: transparent;
  --poster-color: transparent;
}
.visor__ar {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--sol);
  color: var(--atun);
  font: inherit;
  font-weight: 700;
}
.visor__progreso { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: rgba(255, 255, 255, .15); }
.visor__progreso-barra { display: block; height: 100%; background: var(--sol); transform-origin: left; transform: scaleX(0); transition: transform .2s; }
.visor [hidden] { display: none !important; }

/* ── Galería del visor: flechas, miniaturas y contador (spec 004) ─────── */
.visor__escena { position: relative; grid-template-rows: minmax(0, 1fr); }
.visor__imagen--foto {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: .5rem;
}
.visor__flecha {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-top: -1.5rem;
  border: 0;
  border-radius: 50%;
  background: rgba(18, 59, 92, .75);
  color: var(--blanco);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .6);
  cursor: pointer;
}
.visor__flecha--ant { left: .5rem; }
.visor__flecha--sig { right: .5rem; }
.visor__flecha:focus-visible { outline-color: var(--sol); }
.visor__miniaturas {
  display: flex;
  justify-content: safe center;
  gap: .5rem;
  padding: .75rem var(--gutter) 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.visor__miniaturas::-webkit-scrollbar { display: none; }
.visor__mini {
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: .5rem;
  background: var(--atun-claro);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25);
  opacity: .7;
  cursor: pointer;
}
.visor__mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
.visor__mini[aria-current="true"] { opacity: 1; outline: 3px solid var(--sol); outline-offset: 2px; }
.visor__mini:focus-visible { outline-color: var(--sol); }
.visor__mini-3d {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--sol);
  font-weight: 800;
  font-size: 1.125rem;
}
.visor__contador { font-size: .875rem; color: #D6E2EA; margin-bottom: .25rem; }

/* ── Tablet (≥ 48rem): más ancho y productos a dos columnas ───────────── */
@media (min-width: 48rem) {
  :root { --gutter: 1.5rem; --ancho: 60rem; }
  .cabecera__nombre { font-size: 4.25rem; }
  .platos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.5rem;
  }
  .filtro {
    max-width: 40rem;
    margin: auto;
    border-radius: 1.25rem;
  }
  .visor__barra, .visor__pie { padding-inline: max(var(--gutter), calc((100% - 60rem) / 2)); }
  .visor__titulo { font-size: 1.375rem; }
  .visor__imagen:not(.visor__imagen--foto) { width: min(60vh, 32rem); }
  .ver-foto:hover { background: var(--atun-claro); }
  .visor__flecha--ant { left: 1.5rem; }
  .visor__flecha--sig { right: 1.5rem; }
  .visor__mini { width: 4.5rem; height: 4.5rem; }
}

/* ── Ordenador / tablet apaisada (≥ 64rem): categorías en columna lateral ─ */
@media (min-width: 64rem) {
  :root { --lateral: 15rem; --ancho: 64rem; }
  body {
    display: grid;
    grid-template-columns: 1fr var(--lateral) minmax(0, var(--ancho)) 1fr;
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: 2.5rem;
    min-height: 100dvh;
  }
  .cabecera { grid-column: 1 / -1; padding-inline: 2rem; }
  .cabecera > * { max-width: calc(var(--lateral) + var(--ancho) + 2.5rem); }
  .categorias {
    grid-column: 2;
    grid-row: 2 / -1;
    align-self: start;
    position: sticky;
    top: 0;
    border-bottom: 0;
    background: transparent;
  }
  .categorias__lista {
    flex-direction: column;
    gap: .25rem;
    min-height: 0;
    max-height: 100dvh;
    padding: 2.25rem .25rem 2rem 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .categorias__enlace {
    display: flex;
    min-height: 2.5rem;
    padding: .375rem 1rem;
    border: 0;
    border-radius: .625rem;
    background: transparent;
    white-space: normal;
    line-height: 1.25;
  }
  .categorias__enlace:hover { background: var(--blanco); }
  .categorias__enlace[aria-current="true"] { box-shadow: inset 4px 0 0 var(--sol); }
  .aviso-offline, .aviso-traduccion, .filtro-estado, .carta { grid-column: 3; }
  .aviso-offline, .aviso-traduccion, .filtro-estado { max-width: none; margin-inline: 0; }
  .carta { width: 100%; max-width: none; padding-inline: 0; }
  .seccion { scroll-margin-top: 1rem; }
  .filtro-abrir { right: 2rem; bottom: 2rem; }
}

/* ── «Mi pedido» (spec 006): botón Añadir, botón flotante y lista ──────── */
.plato__ver { gap: .5rem; flex-wrap: wrap; }
.anadir {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-height: 2.75rem;
  padding: 0 1rem 0 .75rem;
  border: 1.5px solid var(--atun);
  border-radius: 999px;
  background: var(--blanco);
  color: var(--atun);
  font: inherit;
  font-weight: 650;
  font-size: .9375rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.anadir .icono { width: 1.25rem; height: 1.25rem; stroke-width: 2.5; }
.anadir:active { transform: scale(.97); }

.pedido-abrir {
  position: fixed;
  left: max(var(--gutter), env(safe-area-inset-left));
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 3rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--sol);
  color: var(--atun);
  font: inherit;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(18, 59, 92, .35);
  cursor: pointer;
}
.pedido-abrir[hidden] { display: none; }
.pedido-abrir__n {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 .375rem;
  border-radius: 999px;
  background: var(--atun);
  color: var(--blanco);
  font-size: .875rem;
}
.pedido-aviso {
  position: fixed;
  left: 50%;
  bottom: calc(4.75rem + env(safe-area-inset-bottom));
  z-index: 7;
  max-width: calc(100% - 2 * var(--gutter));
  padding: .5rem 1rem;
  border-radius: 999px;
  background: var(--atun);
  color: var(--blanco);
  font-size: .9375rem;
  font-weight: 600;
  transform: translate(-50%, .5rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.pedido-aviso--visible { opacity: 1; transform: translate(-50%, 0); }

.pedido {
  width: 100%;
  max-width: 32rem;
  max-height: 90dvh;
  margin: auto auto 0;
  padding: 0 0 calc(1rem + env(safe-area-inset-bottom));
  border: 0;
  border-radius: 1.25rem 1.25rem 0 0;
  background: var(--sal);
  color: var(--atun);
}
.pedido::backdrop { background: rgba(10, 30, 46, .55); }
.pedido__barra {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem var(--gutter) .75rem;
  background: var(--sal);
  border-bottom: 4px solid var(--sol);
}
.pedido__titulo {
  flex: 1;
  font-family: var(--fuente-titulo);
  font-stretch: condensed;
  font-size: 1.75rem;
  line-height: 1.1;
}
.pedido .visor__cerrar { border-color: var(--atun); color: var(--atun); }
.pedido__ayuda, .pedido__vacio { padding: .75rem var(--gutter) 0; color: var(--marisma); font-size: .9375rem; }
.pedido__lineas { padding: .5rem var(--gutter); }
.linea {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  padding: .625rem 0;
  border-bottom: 1px solid var(--linea);
}
.linea__cantidad { font-size: 1.375rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.linea__nombre { font-size: 1.0625rem; font-weight: 650; overflow-wrap: anywhere; }
.linea__estado { display: block; font-size: .8125rem; font-weight: 600; color: #A3201A; }
.linea--no .linea__cantidad, .linea--no .linea__nombre { color: var(--marisma); text-decoration: line-through; }
.linea--no .linea__estado { text-decoration: none; }
.linea__botones { display: flex; gap: .375rem; }
.linea__boton {
  width: 2.75rem;
  height: 2.75rem;
  border: 1.5px solid var(--atun);
  border-radius: 50%;
  background: var(--blanco);
  color: var(--atun);
  font: 700 1.25rem/1 var(--fuente-texto);
  cursor: pointer;
}
.pedido__vaciar { margin: .5rem var(--gutter) 0; }
.pedido [hidden] { display: none !important; }
html:has(.pedido[open]) { overflow: hidden; }
@media (min-width: 48rem) {
  .pedido { margin: auto; border-radius: 1.25rem; }
  .pedido-abrir { left: auto; right: calc(2rem + 10rem); }
}
@media (min-width: 64rem) {
  .pedido-abrir { right: calc(2rem + 10.5rem); bottom: 2rem; }
}
/* Móviles muy estrechos: «Mi pedido» solo con icono y número para no tapar «Alérgenos» */
@media (max-width: 24rem) {
  .pedido-abrir { padding: 0 .75rem; }
  .pedido-abrir__texto { display: none; }
}

/* ── Asistente de comida (spec 007) ───────────────────────────────────── */
.asistente-abrir {
  position: fixed;
  right: max(var(--gutter), env(safe-area-inset-right));
  bottom: calc(4.75rem + env(safe-area-inset-bottom));
  z-index: 6;
  display: inline-grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 3px solid var(--sol);
  border-radius: 50%;
  background: var(--atun);
  color: var(--blanco);
  box-shadow: 0 6px 18px rgba(18, 59, 92, .35);
  cursor: pointer;
}
.asistente-abrir[hidden] { display: none; }
.asistente-abrir .icono { width: 1.75rem; height: 1.75rem; }
.asistente-globo {
  position: fixed;
  right: max(var(--gutter), env(safe-area-inset-right));
  bottom: calc(9rem + env(safe-area-inset-bottom));
  z-index: 6;
  display: flex;
  align-items: flex-start;
  gap: .25rem;
  max-width: min(18rem, calc(100% - 2 * var(--gutter)));
  padding: .75rem .5rem .75rem 1rem;
  border-radius: 1rem 1rem .25rem 1rem;
  background: var(--blanco);
  color: var(--atun);
  font-weight: 650;
  box-shadow: 0 8px 24px rgba(18, 59, 92, .25);
}
.asistente-globo[hidden] { display: none; }
.asistente-globo__cerrar {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: -.5rem 0;
  border: 0;
  background: none;
  color: var(--marisma);
  cursor: pointer;
}
.asistente-globo__cerrar .icono { width: 1.125rem; height: 1.125rem; }
@media (prefers-reduced-motion: no-preference) {
  .asistente-globo:not([hidden]) { animation: globo .3s ease-out; }
  @keyframes globo { from { opacity: 0; transform: translateY(.5rem); } }
}

.asistente {
  position: fixed;
  inset: 0;
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--sal);
  color: var(--atun);
}
.asistente[open] { display: flex; flex-direction: column; }
.asistente::backdrop { background: rgba(10, 30, 46, .55); }
.asistente__barra {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: calc(.75rem + env(safe-area-inset-top)) var(--gutter) .75rem;
  background: var(--atun);
  color: var(--blanco);
  border-bottom: 4px solid var(--sol);
}
.asistente__logo { width: 2rem; height: 2rem; color: var(--sol); }
.asistente__cabecera { flex: 1; min-width: 0; }
.asistente__titulo { font-size: 1.125rem; line-height: 1.2; }
.asistente__sub { font-size: .875rem; color: #D6E2EA; }
.asistente .visor__cerrar:focus-visible { outline-color: var(--sol); }
.asistente__chat { position: relative; flex: 1; overflow-y: auto; padding: 1rem var(--gutter); display: flex; flex-direction: column; gap: .75rem; scroll-padding-top: 1rem; }
.msj { display: grid; gap: .5rem; max-width: 100%; padding: .75rem 1rem; border-radius: 1rem; font-size: .9375rem; }
.msj--bot { align-self: stretch; background: var(--blanco); border-top-left-radius: .25rem; box-shadow: inset 0 0 0 1px var(--linea); }
.msj--cliente { align-self: flex-end; max-width: 85%; background: var(--atun); color: var(--blanco); border-top-right-radius: .25rem; scroll-margin-top: 1rem; }
.msj__resumen { font-weight: 700; }
.msj__aviso { padding: .5rem .75rem; border-left: 4px solid var(--sol); background: var(--sal); }
.msj__alergias { font-size: .8125rem; color: var(--marisma); }
.res-grupo { display: grid; gap: .5rem; }
.res-grupo__titulo { font-size: 1rem; padding-bottom: .25rem; border-bottom: 2px solid var(--atun); }
.res-lista { display: grid; gap: .5rem; }
.res { display: grid; gap: .375rem; padding: .75rem; border: 1px solid var(--linea); border-radius: .75rem; background: var(--blanco); }
.res--agotado .res__nombre { text-decoration: line-through; color: var(--marisma); }
.res__cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.res__nombre { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.res__precio { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .9375rem; }
.res__cat { font-size: .8125rem; color: var(--marisma); }
.res__alergenos { display: flex; flex-wrap: wrap; gap: .25rem; }
.res__sin { font-size: .8125rem; color: var(--marisma); }
.res__acciones { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.res__ver {
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--atun);
  color: var(--blanco);
  font: inherit;
  font-weight: 650;
  font-size: .9375rem;
  cursor: pointer;
}
.res-grupo__mas {
  justify-self: start;
  min-height: 2.75rem;
  padding: 0 .25rem;
  border: 0;
  background: none;
  color: var(--atun);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.asistente__pie { border-top: 1px solid var(--linea); background: var(--sal); padding: .5rem 0 calc(.75rem + env(safe-area-inset-bottom)); }
.asistente__sugerencias { display: flex; gap: .5rem; padding: 0 var(--gutter) .5rem; overflow-x: auto; scrollbar-width: none; }
.asistente__sugerencias::-webkit-scrollbar { display: none; }
.sugerencia {
  flex: none;
  min-height: 2.5rem;
  padding: 0 .875rem;
  border: 1.5px solid var(--atun);
  border-radius: 999px;
  background: var(--blanco);
  color: var(--atun);
  font: inherit;
  font-size: .875rem;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}
.asistente__form { display: flex; gap: .5rem; padding: 0 var(--gutter); }
.asistente__texto {
  flex: 1;
  min-width: 0;
  min-height: 3rem;
  padding: 0 1rem;
  border: 1.5px solid #8A9AA2;
  border-radius: 999px;
  background: var(--blanco);
  color: var(--atun);
  font: inherit;
  font-size: 1rem; /* 16 px: iOS no hace zoom al escribir */
}
.asistente__texto:focus { border-color: var(--atun); outline: none; box-shadow: 0 0 0 2px var(--atun); }
.asistente__enviar {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 50%;
  background: var(--atun);
  color: var(--blanco);
  cursor: pointer;
}
html:has(.asistente[open]) { overflow: hidden; }

/* «Ver en la carta»: el plato se resalta un momento */
.plato--resaltado { animation: resaltar 2.4s ease-out; border-radius: .5rem; }
@keyframes resaltar { 0%, 40% { background: #FFF1CC; box-shadow: 0 0 0 .5rem #FFF1CC; } 100% { background: transparent; box-shadow: 0 0 0 .5rem transparent; } }
.plato:focus { outline: none; }

@media (min-width: 48rem) {
  .asistente {
    inset: auto 1.5rem 1.5rem auto;
    width: min(28rem, calc(100% - 3rem));
    height: min(44rem, calc(100dvh - 3rem));
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(18, 59, 92, .35);
  }
  .asistente-abrir:hover { background: var(--atun-claro); }
  .sugerencia:hover { background: var(--sal); }
}
@media (min-width: 64rem) {
  .asistente-abrir { right: 2rem; bottom: 5.75rem; }
  .asistente-globo { right: 2rem; bottom: 10rem; }
}