/* ==========================================================================
   Nàvola Restaurant — hoja de estilo
   Colores y tipografía según el manual de identidad (2017, pág. 13).
   Los únicos colores autorizados del logotipo son rojo 485 C, amarillo 7409 C
   y negro. El rojo #D00403 que aparece en el video de señalización NO es el de
   marca y no se usa aquí.
   ========================================================================== */

:root {
  --rojo: #E2231A;          /* Pantone 485 C */
  --rojo-hondo: #B31A13;
  --amarillo: #F6B221;      /* Pantone 7409 C */
  --negro: #1C1C1B;
  --crema: #FBF7F1;
  --crema-honda: #F2E9DC;
  --blanco: #fff;
  --tinta: #2A2A28;
  --tinta-suave: #6B6963;

  --display: "Fira Sans Condensed", "Fira Sans", system-ui, sans-serif;
  --texto: "Fira Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --ancho: 1320px;
  /* La cabecera y el índice del menú son pegajosos y varias reglas dependen de
     su altura (el salto de ancla, el panel móvil, el margen de scroll de cada
     sección). Vive aquí una vez: en el teléfono la cabecera encoge y todo lo
     demás encoge con ella. */
  --alto-cabecera: 78px;
  --alto-indice: 62px;
  --radio: 18px;
  --sombra-plato: drop-shadow(0 22px 22px rgba(28, 28, 27, .26));
  /* Sombra de contacto: corta y pegada al plato. La difusa y alta que había
     antes leía como «recorte flotando» y no como «platillo en la mesa». */
  --sombra-recorte: drop-shadow(0 4px 4px rgba(28, 28, 27, .2));
  --sombra-tarjeta: 0 2px 4px rgba(28,28,27,.05), 0 12px 28px rgba(28,28,27,.09);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-cabecera) + var(--alto-indice) + 8px);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  /* El gris translúcido de Android sobre el rojo de marca se ve sucio. */
  -webkit-tap-highlight-color: rgba(226, 35, 26, .14);
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.005em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 7.2vw, 5.1rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.3rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.72rem); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: 20px; }

.salta-al-contenido {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--negro); color: #fff; padding: 12px 20px; border-radius: 0 0 10px 0;
}
.salta-al-contenido:focus { left: 0; }

:where(a, button, input, summary):focus-visible {
  outline: 3px solid var(--amarillo);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --- textura de garabatos del fondo rojo de marca ------------------------- */
.garabatos { position: relative; isolation: isolate; }
.garabatos::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: url("../img/textura-garabatos.webp");
  background-size: 430px;
  opacity: .16;
  pointer-events: none;
}
.garabatos--peques::before { background-image: url("../img/textura-garabatos-peques.webp"); opacity: .2; }

/* --- botones -------------------------------------------------------------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--display); font-weight: 700; font-size: 1.06rem;
  letter-spacing: .012em;
  padding: 15px 30px; border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform .16s ease, background-color .16s ease, color .16s ease, border-color .16s ease;
}
.boton:hover { transform: translateY(-2px); }
.boton--amarillo { background: var(--amarillo); color: var(--negro); }
.boton--amarillo:hover { background: #ffc341; }
.boton--rojo { background: var(--rojo); color: #fff; }
.boton--rojo:hover { background: var(--rojo-hondo); }
.boton--negro { background: var(--negro); color: #fff; }
.boton--linea-blanca { border-color: rgba(255,255,255,.75); color: #fff; }
.boton--linea-blanca:hover { background: #fff; color: var(--rojo); border-color: #fff; }
.boton--linea { border-color: rgba(28,28,27,.28); color: var(--tinta); }
.boton--linea:hover { border-color: var(--negro); background: var(--negro); color: #fff; }

/* --- encabezado ----------------------------------------------------------- */
.cabecera {
  position: sticky; top: 0; z-index: 60;
  background: var(--rojo);
  border-bottom: 3px solid var(--negro);
  transition: transform .26s ease;
}
/* En el teléfono la cabecera se aparta al bajar y vuelve al subir: en una carta
   de 147 platillos, 58 px fijos de cromo son media tarjeta. El índice ocupa su
   lugar pegado arriba mientras tanto (ver `sitio.js`). */
body[data-cabecera="oculta"] .cabecera { transform: translateY(-100%); }
.cabecera__barra {
  display: flex; align-items: center; gap: 22px;
  min-height: var(--alto-cabecera);
}
.marca { flex: 0 0 auto; }
.marca img { width: 138px; height: auto; }
.navegacion { margin-left: auto; display: flex; align-items: center; gap: 30px; }
.navegacion a {
  font-family: var(--display); font-weight: 600; font-size: 1.06rem;
  color: #fff; text-decoration: none; padding: 6px 0;
  border-bottom: 3px solid transparent;
}
.navegacion a:hover, .navegacion a[aria-current="page"] { border-bottom-color: var(--amarillo); }
.cabecera .boton { padding: 11px 22px; font-size: .98rem; }

.hamburguesa {
  margin-left: auto; display: none; width: 46px; height: 46px;
  background: none; border: 2px solid rgba(255,255,255,.6); border-radius: 12px;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px; cursor: pointer;
}
.hamburguesa span { display: block; width: 20px; height: 2.5px; background: #fff; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.menu-movil {
  position: fixed; inset: var(--alto-cabecera) 0 0; z-index: 55;
  background: var(--rojo); padding: 32px 22px 40px;
  display: none; flex-direction: column; gap: 6px; overflow-y: auto;
}
.menu-movil[data-abierto] { display: flex; }
.menu-movil a {
  font-family: var(--display); font-weight: 700; font-size: 1.7rem; color: #fff;
  text-decoration: none; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.22);
}
.menu-movil .boton { margin-top: 22px; font-size: 1.1rem; }
.menu-movil__pie { margin-top: auto; padding-top: 26px; color: rgba(255,255,255,.85); font-size: .92rem; }

/* --- portada -------------------------------------------------------------- */
.portada {
  background: var(--rojo); color: #fff;
  padding-block: clamp(46px, 7vw, 80px) clamp(60px, 8vw, 104px);
  overflow: hidden;
}
.portada__reja {
  display: grid; grid-template-columns: 1.06fr .94fr; gap: 34px; align-items: center;
}
.antetitulo {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .15em; font-size: .84rem; margin: 0 0 18px;
  display: inline-flex; align-items: center; gap: 11px;
}
.antetitulo::before { content: ""; width: 34px; height: 3px; background: var(--amarillo); }
.portada h1 { text-transform: uppercase; font-size: clamp(2.3rem, 5.4vw, 4rem); }
.portada h1 em { font-style: normal; color: var(--amarillo); }
.portada__entrada { font-size: clamp(1.06rem, 1.5vw, 1.2rem); max-width: 30em; margin: 22px 0 30px; color: rgba(255,255,255,.94); }
.portada__acciones { display: flex; flex-wrap: wrap; gap: 13px; }
.portada__nota { margin-top: 26px; font-size: .88rem; color: rgba(255,255,255,.78); display: flex; align-items: center; gap: 10px; }
.portada__nota::before { content: ""; width: 26px; height: 2px; background: var(--amarillo); flex: 0 0 auto; }

.portada__escena { position: relative; display: grid; place-items: center; min-height: 380px; }
.portada__plato { filter: var(--sombra-plato); animation: flota 7s ease-in-out infinite; }
.portada__plato img { width: min(100%, 680px); }
.portada__satelite { position: absolute; filter: drop-shadow(0 16px 18px rgba(28,28,27,.3)); }
.portada__satelite img { width: clamp(150px, 19vw, 240px); }
.portada__satelite--a { top: 2%; right: 1%; animation: flota 8s ease-in-out infinite .9s; }
.portada__satelite--b { bottom: 1%; left: 0; animation: flota 9s ease-in-out infinite 1.7s; }
.portada__rana { position: absolute; right: -16px; bottom: -34px; width: clamp(104px, 13vw, 152px); z-index: 2; filter: drop-shadow(0 12px 16px rgba(28,28,27,.32)); }

@keyframes flota { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }

/* --- cintillo de cifras --------------------------------------------------- */
.cintillo { background: var(--amarillo); border-block: 3px solid var(--negro); }
.cintillo__reja {
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding-block: 14px;
}
.cintillo__dato {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  padding: 8px 14px; color: var(--negro); text-decoration: none;
  font-family: var(--display); font-weight: 600; font-size: 1.02rem; text-align: center;
}
.cintillo__dato + .cintillo__dato { border-left: 2px solid rgba(28,28,27,.16); }
.cintillo__dato:hover span { text-decoration: underline; }
.cintillo svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* --- secciones ------------------------------------------------------------ */
.seccion { padding-block: clamp(58px, 7.5vw, 104px); }
.seccion--crema { background: var(--crema); }
.seccion--blanca { background: var(--blanco); }
.seccion--negra { background: var(--negro); color: var(--crema); }
.seccion--roja { background: var(--rojo); color: #fff; }

.seccion__encabezado { max-width: 44rem; margin-bottom: clamp(34px, 4vw, 54px); }
.seccion__encabezado .antetitulo { color: var(--rojo); }
.seccion--negra .seccion__encabezado .antetitulo,
.seccion--roja .seccion__encabezado .antetitulo { color: var(--amarillo); }
.seccion__entrada { font-size: 1.1rem; color: var(--tinta-suave); margin-top: 16px; }
.seccion--negra .seccion__entrada { color: rgba(251,247,241,.76); }
.seccion--roja .seccion__entrada { color: rgba(255,255,255,.88); }

/* --- rejilla de categorías ------------------------------------------------ */
/* `minmax(310px, …)` no se encoge: en una pantalla de 320 px la columna mide
   310 y, con el relleno del contenedor, se sale cinco píxeles. `min()` deja
   que la columna baje hasta el ancho disponible cuando no cabe. */
.categorias { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); gap: 22px; }
.categoria {
  position: relative; display: flex; flex-direction: column;
  background: var(--blanco); border: 2px solid var(--crema-honda); border-radius: var(--radio);
  padding: 92px 24px 24px; text-decoration: none; color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: var(--sombra-tarjeta);
}
.categoria:hover { transform: translateY(-6px); border-color: var(--rojo); box-shadow: 0 18px 40px rgba(28,28,27,.16); }
/* Los recortes ya vienen normalizados en un cuadro: el platillo ocupa lo mismo
   en todas las tarjetas aunque un rollo de sushi mida 4:1 y una pizza 1:1. */
.categoria__plato {
  position: absolute; top: -18px; right: 8px;
  width: 190px; height: 119px; object-fit: contain;
  filter: drop-shadow(0 7px 7px rgba(28,28,27,.18));
  transition: transform .25s ease;
}
.categoria:hover .categoria__plato { transform: scale(1.06) rotate(-3deg); }
.categoria__conteo {
  font-family: var(--display); font-weight: 700; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .13em; color: var(--rojo);
}
.categoria h3 { margin: 8px 0 8px; }
.categoria p { font-size: .95rem; color: var(--tinta-suave); }
.categoria__flecha { margin-top: auto; padding-top: 16px; font-family: var(--display); font-weight: 700; color: var(--rojo); }

/* --- bloque partido ------------------------------------------------------- */
.partido { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.partido__figura img { border-radius: var(--radio); width: 100%; }
.partido__figura--cartel img { border: 2px solid var(--crema-honda); }
.partido--invertido .partido__figura { order: 2; }

/* --- pa' los peques ------------------------------------------------------- */
.peques__reja { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 60px); align-items: center; }
.ranas { display: flex; justify-content: center; align-items: flex-end; gap: clamp(4px, 1.4vw, 18px); }
.ranas img { height: clamp(108px, 16vw, 208px); width: auto; filter: drop-shadow(0 14px 14px rgba(28,28,27,.3)); }
.ranas img:nth-child(1) { animation: saluda 5s ease-in-out infinite; }
.ranas img:nth-child(3) { animation: saluda 6s ease-in-out infinite .8s; }
@keyframes saluda { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(-2.5deg); } }

.lista-peques { list-style: none; margin: 26px 0 30px; padding: 0; display: grid; gap: 2px; }
.lista-peques li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  padding: 13px 0; border-bottom: 1px dashed rgba(255,255,255,.34);
}
.lista-peques b { font-family: var(--display); font-weight: 600; font-size: 1.1rem; }
.lista-peques span { font-family: var(--display); font-weight: 700; color: var(--amarillo); white-space: nowrap; }

/* --- galería de postres --------------------------------------------------- */
.galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 16px; }
.galeria figure { margin: 0; border-radius: var(--radio); overflow: hidden; position: relative; background: #000; }
/* La toma trae el postre abajo a la izquierda y la taza de café detrás: un
   recorte centrado dejaba media rebanada fuera y la taza entera dentro. */
.galeria img { width: 100%; height: 100%; object-fit: cover; object-position: 26% 72%;
  aspect-ratio: 5/4; transition: transform .4s ease; }
.galeria figure:hover img { transform: scale(1.05); }
.galeria figcaption {
  position: absolute; inset: auto 0 0; padding: 30px 16px 14px;
  background: linear-gradient(transparent, rgba(0,0,0,.82));
  font-family: var(--display); font-weight: 600; color: #fff; font-size: 1rem;
}

/* --- las tres marcas ------------------------------------------------------ */
.marcas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 20px; }
.marca-tarjeta {
  border: 2px solid rgba(251,247,241,.16); border-radius: var(--radio);
  padding: 32px 26px; display: flex; flex-direction: column; gap: 16px;
}
.marca-tarjeta img { height: 62px; width: auto; object-fit: contain; object-position: left; }
.marca-tarjeta p { font-size: .96rem; color: rgba(251,247,241,.74); }

/* --- visítanos ------------------------------------------------------------ */
.visita { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(28px, 4.5vw, 56px); align-items: start; }

/* Un hijo que no se parte —una fila de botones con `white-space: nowrap`—
   empuja la pista de la reja hasta su ancho mínimo, y como el ítem trae
   `min-width: auto` la pista se lleva a la página entera fuera de la pantalla.
   `min-width: 0` corta esa vía en las cuatro rejas de dos columnas. */
.visita > *, .partido > *, .portada__reja > *, .peques__reja > * { min-width: 0; }
.ficha {
  background: var(--blanco); border: 2px solid var(--crema-honda); border-radius: var(--radio);
  padding: clamp(26px, 3.4vw, 38px); box-shadow: var(--sombra-tarjeta);
}
.datos { list-style: none; margin: 24px 0 26px; padding: 0; display: grid; gap: 20px; }
.datos li { display: flex; gap: 15px; align-items: flex-start; }
.datos svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--rojo); margin-top: 3px; }
.datos strong { display: block; font-family: var(--display); font-size: .78rem; text-transform: uppercase; letter-spacing: .13em; color: var(--tinta-suave); font-weight: 700; }
.datos a, .datos span:last-child { color: var(--tinta); text-decoration: none; }
.datos a:hover { color: var(--rojo); }

/* --- llamado final -------------------------------------------------------- */
.cierre { background: var(--rojo); color: #fff; text-align: center; padding-block: clamp(56px, 7vw, 96px); overflow: hidden; }
.cierre h2 { text-transform: uppercase; max-width: 16em; margin-inline: auto; }
.cierre__acciones { display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; margin-top: 30px; }
.cierre__familia { margin: 34px auto 0; width: min(100%, 640px); filter: drop-shadow(0 16px 20px rgba(28,28,27,.3)); }

/* --- pie ------------------------------------------------------------------ */
.pie { background: var(--negro); color: rgba(251,247,241,.72); padding-block: 62px 28px; font-size: .94rem; }
.pie__reja { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; }
.pie h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; color: var(--amarillo); margin-bottom: 16px; }
.pie img { width: 150px; margin-bottom: 18px; }
.pie__enlaces { display: grid; gap: 0; }
.pie__enlaces a { text-decoration: none; padding-block: 11px; }
.pie__enlaces a:hover { color: var(--amarillo); }

/* Área de toque de 44 px sin alterar el renglón: el rectángulo vive en un
   pseudo-elemento, así el texto conserva su altura y su ritmo. Los renglones
   de contacto miden 18 px de alto y los del pie 23; con el dedo eso es un
   blanco que se falla. */
.datos a, .nota-menu a { position: relative; }
.datos a::after, .nota-menu a::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: 50%; height: 44px; transform: translateY(-50%);
}
.pie__abajo {
  margin-top: 46px; padding-top: 22px; border-top: 1px solid rgba(251,247,241,.14);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: .84rem; color: rgba(251,247,241,.5);
}

/* ==========================================================================
   Página de menú
   ========================================================================== */
/* La carta empieza donde se ve la comida. Antes el encabezado rojo, el titular
   gigante, el párrafo y el buscador se llevaban la pantalla entera y del primer
   platillo sólo asomaba el borde superior de la tarjeta. */
.menu-portada { background: var(--rojo); color: #fff; padding-block: clamp(22px, 3vw, 34px); }
.menu-portada h1 { text-transform: uppercase; font-size: clamp(2rem, 4.4vw, 3.1rem); }
.menu-portada p { margin-top: 8px; color: rgba(255,255,255,.88); font-size: .96rem; }
.menu-portada__reja {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px 40px; flex-wrap: wrap;
}

.buscador { position: relative; flex: 1 1 300px; max-width: 420px; }
.buscador input {
  width: 100%; font-family: var(--texto); font-size: 1.02rem;
  padding: 15px 18px 15px 48px; border-radius: 999px; border: 2px solid transparent;
  background: #fff; color: var(--tinta);
}
.buscador input::placeholder { color: #9a968e; }
.buscador svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--rojo); }

.indice {
  position: sticky; top: var(--alto-cabecera); z-index: 40;
  background: var(--crema); border-bottom: 2px solid var(--crema-honda);
  transition: top .26s ease;
}
body[data-cabecera="oculta"] .indice { top: 0; }
.indice__pista { display: flex; gap: 8px; overflow-x: auto; padding: 13px 20px; scrollbar-width: none; }
.indice__pista::-webkit-scrollbar { display: none; }
.indice a {
  flex: 0 0 auto; font-family: var(--display); font-weight: 600; font-size: .95rem;
  text-decoration: none; padding: 8px 17px; border-radius: 999px;
  border: 2px solid var(--crema-honda); color: var(--tinta); white-space: nowrap;
}
.indice a:hover { border-color: var(--rojo); color: var(--rojo); }
.indice a.activo { background: var(--negro); border-color: var(--negro); color: #fff; }

.seccion-menu {
  padding-block: clamp(34px, 4vw, 54px);
  scroll-margin-top: calc(var(--alto-cabecera) + var(--alto-indice) + 8px);
}
.seccion-menu:nth-child(even) { background: var(--blanco); }
.seccion-menu__titulo { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.seccion-menu__titulo h2 { text-transform: uppercase; }
.seccion-menu__conteo { font-family: var(--display); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .13em; color: var(--rojo); }
.seccion-menu > .contenedor > p { color: var(--tinta-suave); margin-bottom: 30px; }

.platillos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(352px, 100%), 1fr)); gap: 14px; }
.platillo {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px;
  padding: 18px 20px; border-radius: 14px; border: 2px solid var(--crema-honda); background: var(--crema);
  align-content: start;
}
.platillo--con-foto { grid-template-columns: 144px 1fr auto; align-items: start; }
.platillo .lupa { grid-row: span 3; align-self: center; }
.platillo__foto { width: 144px; height: 90px; object-fit: contain; filter: var(--sombra-recorte); }

/* --- la foto se abre ------------------------------------------------------
   El aumento vive aparte de pedir: esto sólo enseña el platillo. */
.lupa { position: relative; display: block; line-height: 0; border-radius: 12px; }
.lupa__marca {
  position: absolute; right: 2px; bottom: 2px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(28,28,27,.62); color: #fff;
  opacity: .82; transition: opacity .18s ease, transform .18s ease;
}
.lupa__marca svg { width: 16px; height: 16px; }
.lupa:hover .lupa__marca { opacity: 1; transform: scale(1.08); }
.lupa:hover img { transform: scale(1.03); }
.lupa img { transition: transform .22s ease; }
.galeria .lupa { border-radius: 0; }
.galeria .lupa__marca { right: 12px; bottom: 12px; }
.platillo h3 { font-size: 1.12rem; font-weight: 700; line-height: 1.24; }
.platillo__precio { font-family: var(--display); font-weight: 800; font-size: 1.18rem; color: var(--rojo); white-space: nowrap; }
.platillo__desc { grid-column: 1 / -1; font-size: .93rem; color: var(--tinta-suave); margin: 0; }
.platillo--con-foto .platillo__desc { grid-column: 2 / -1; }
.platillo__opciones { grid-column: 1 / -1; margin-top: 8px; font-size: .88rem; }
.platillo--con-foto .platillo__opciones { grid-column: 2 / -1; }
.platillo__opciones summary { cursor: pointer; font-family: var(--display); font-weight: 600; color: var(--rojo); }
.platillo__opciones ul { margin: 10px 0 0; padding-left: 18px; color: var(--tinta-suave); display: grid; gap: 5px; }
.platillo__opciones b { color: var(--tinta); font-weight: 600; }

.sin-resultados { padding: 52px 0; text-align: center; color: var(--tinta-suave); }
.sin-resultados[hidden] { display: none; }

.nota-menu { background: var(--crema-honda); padding-block: 30px; font-size: .9rem; color: var(--tinta-suave); }

/* ==========================================================================
   Nosotros
   ========================================================================== */
.retrato { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 18px; margin-top: 12px; }
.retrato figure { margin: 0; text-align: center; }
.retrato figure { display: flex; flex-direction: column; }
.retrato img { height: 230px; width: auto; max-width: 100%; margin: 0 auto auto;
  object-fit: contain; object-position: bottom; filter: drop-shadow(0 12px 14px rgba(28,28,27,.22)); }
.retrato figcaption { margin-top: 18px; font-family: var(--display); font-weight: 700; font-size: 1.1rem; }
.retrato small { display: block; margin-top: 2px; color: var(--tinta-suave); font-family: var(--texto); font-weight: 400; font-size: .88rem; }
/* sobre el rojo, el gris de apoyo no se lee */
.seccion--roja .retrato small { color: rgba(255,255,255,.82); }

.paleta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 16px; margin-top: 10px; }
.muestra { border-radius: var(--radio); overflow: hidden; border: 2px solid var(--crema-honda); background: #fff; }
.muestra__color { height: 96px; }
.muestra__pie { padding: 14px 16px; font-size: .86rem; }
.muestra__pie b { display: block; font-family: var(--display); font-size: 1.02rem; }
.muestra__pie span { color: var(--tinta-suave); font-variant-numeric: tabular-nums; }


/* ==========================================================================
   Visor de fotos
   El recorte de la carta enseña qué es el platillo; esto enseña cómo se ve.
   Es un <dialog>: la tecla Escape, el foco y la capa de fondo los pone el
   navegador, y lo que no hace —bloquear el desplazamiento y devolverlo donde
   estaba— lo hace `sitio.js`.
   ========================================================================== */
.visor {
  width: min(100vw, 1400px); max-width: 100vw;
  height: 100dvh; max-height: 100dvh;
  margin: 0; padding: 0; border: 0; background: transparent;
  overflow: hidden;
}
.visor::backdrop { background: rgba(16,16,15,.92); }
.visor[open] { display: grid; grid-template-rows: 1fr auto; place-items: center; }
.visor__marco {
  grid-row: 1; width: 100%; height: 100%;
  display: grid; place-items: center; padding: clamp(12px, 3vw, 40px);
  /* el navegador conserva su propio acercamiento con dos dedos */
  touch-action: pinch-zoom;
}
.visor__foto {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
  border-radius: 10px; cursor: zoom-in;
}
/* Acercar con un toque. La foto crece de verdad —no con transform— para que
   el marco pueda desplazarse: un acercamiento que no se puede recorrer sólo
   sirve para tapar la mitad del platillo. El acercamiento de dos dedos del
   navegador sigue funcionando encima de este. */
.visor[data-acercado] .visor__marco { overflow: auto; place-items: start; padding: 0; }
.visor[data-acercado] .visor__foto {
  cursor: zoom-out; max-width: none; max-height: none;
  width: 190%; height: auto; border-radius: 0;
}
.visor__pie {
  grid-row: 2; margin: 0 0 max(16px, env(safe-area-inset-bottom)); padding: 0 20px;
  font-family: var(--display); font-weight: 600; font-size: 1.18rem;
  color: #fff; text-align: center; text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.visor__cerrar {
  position: fixed; top: 14px; right: 14px; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(255,255,255,.4); background: rgba(28,28,27,.72); color: #fff;
  display: grid; place-items: center;
}
.visor__cerrar:hover { background: var(--rojo); border-color: var(--rojo); }
.visor__cerrar svg { width: 22px; height: 22px; }

/* ==========================================================================
   Adaptación a pantallas chicas
   ========================================================================== */
@media (max-width: 980px) {
  .portada__reja, .partido, .peques__reja, .visita { grid-template-columns: 1fr; }
  .partido--invertido .partido__figura { order: 0; }
  .portada__escena { min-height: 300px; margin-top: 18px; }
  .pie__reja { grid-template-columns: 1fr 1fr; }
  .pie__marca { grid-column: 1 / -1; }
}

/* ==========================================================================
   Teléfono
   No es la versión de escritorio encogida. Tres cosas cambian de forma:
   la cabecera (más baja y se aparta al bajar), las tarjetas de categoría (de
   fichas altas a renglones), y la escala tipográfica (el cuerpo baja a 15.5 px
   con interlineado más corto, que es lo que hace que un texto se lea caro en
   una pantalla de 390 px en vez de suelto).
   Los destinos táctiles se quedan en 44 px aunque el texto encoja.
   ========================================================================== */
@media (max-width: 820px) {
  :root { --alto-cabecera: 58px; --alto-indice: 50px; --radio: 16px; }

  .navegacion, .cabecera .boton { display: none; }
  .hamburguesa { display: flex; width: 44px; height: 44px; border-radius: 13px; }
  .marca img { width: 104px; }
  .contenedor { padding-inline: max(18px, env(safe-area-inset-left)); }

  /* La trama de garabatos a 430 px se ve como manchas; a 250 px vuelve a ser
     un patrón. */
  .garabatos::before { background-size: 250px; opacity: .13; }

  body { font-size: 15.5px; line-height: 1.55; }
  h1 { font-size: clamp(2rem, 8.4vw, 2.6rem); }
  h2 { font-size: clamp(1.62rem, 6.4vw, 2.1rem); }
  h3 { font-size: 1.16rem; }
  .antetitulo { font-size: .76rem; letter-spacing: .13em; margin-bottom: 13px; }
  .antetitulo::before { width: 24px; }
  .seccion { padding-block: clamp(40px, 9vw, 58px); }
  .seccion__encabezado { margin-bottom: 26px; }
  .seccion__entrada { font-size: 1rem; margin-top: 12px; }

  .boton { padding: 13px 22px; font-size: 1rem; }

  /* --- portada --- */
  .portada { padding-block: 30px 40px; }
  .portada h1 { font-size: clamp(2.05rem, 8.6vw, 2.7rem); }
  .portada__entrada { font-size: 1.02rem; margin: 14px 0 22px; }
  .portada__acciones { gap: 10px; }
  .portada__nota { margin-top: 18px; font-size: .84rem; }
  .portada__escena { min-height: 0; margin-top: 4px; }
  .portada__plato img { width: min(94%, 420px); }
  .portada__satelite img { width: clamp(96px, 26vw, 120px); }
  .portada__satelite--a { top: 4%; right: -2%; }
  .portada__satelite--b { bottom: 6%; left: -4%; }
  .portada__rana { right: -10px; bottom: -14px; width: 92px; }

  /* --- cintillo de contacto --- */
  .cintillo__reja { grid-template-columns: 1fr; padding-block: 6px; }
  .cintillo__dato {
    justify-content: flex-start; gap: 12px; text-align: left;
    padding: 11px 4px; font-size: .95rem; min-height: 44px;
  }
  .cintillo__dato + .cintillo__dato {
    border-left: 0; border-top: 1px solid rgba(28,28,27,.18);
  }

  /* --- categorías: renglones, no fichas ---
     Nueve fichas de 530 px eran 4 800 px de scroll para leer nueve nombres.
     En renglón cada sección cuesta 96 px y la foto sigue siendo la que manda. */
  .categorias { gap: 10px; }
  .categoria {
    flex-direction: row; align-items: center; gap: 14px;
    padding: 12px 40px 12px 12px; border-radius: 16px;
  }
  .categoria:hover { transform: none; }
  .categoria__plato {
    position: static; width: 106px; height: 66px; flex: 0 0 auto;
    filter: drop-shadow(0 4px 4px rgba(28,28,27,.16));
  }
  .categoria:hover .categoria__plato { transform: none; }
  .categoria__texto { min-width: 0; }
  .categoria__conteo { font-size: .7rem; letter-spacing: .12em; }
  .categoria h3 { margin: 2px 0 0; font-size: 1.12rem; }
  .categoria p {
    margin: 3px 0 0; font-size: .86rem; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .categoria__flecha { display: none; }
  .categoria::after {
    content: ""; position: absolute; right: 18px; top: 50%;
    width: 9px; height: 9px; margin-top: -5px;
    border-right: 2.5px solid var(--rojo); border-top: 2.5px solid var(--rojo);
    transform: rotate(45deg);
  }

  /* --- pa' los peques --- */
  .lista-peques { margin: 20px 0 24px; }
  .lista-peques li { padding: 11px 0; }
  .lista-peques b { font-size: 1.02rem; }
  .ranas img { height: clamp(96px, 23vw, 132px); }

  /* --- galería y marcas --- */
  .galeria { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .galeria figcaption { padding: 22px 12px 10px; font-size: .88rem; }
  .marca-tarjeta { padding: 24px 20px; }
  .marca-tarjeta img { height: 48px; }

  /* --- visítanos / cierre / pie --- */
  .ficha { padding: 22px 20px; }
  .datos { gap: 16px; margin: 20px 0 22px; }
  .cierre { padding-block: 44px 34px; }
  .cierre__familia { margin-top: 24px; }
  .pie { padding-block: 44px 20px; }
  .pie__abajo { margin-top: 30px; }

  /* --- panel de navegación --- */
  .menu-movil { padding: 20px 20px calc(26px + env(safe-area-inset-bottom)); }
  .menu-movil a { font-size: 1.32rem; padding: 15px 2px; }
  .menu-movil .boton { margin-top: 16px; }
  .menu-movil__pie { padding-top: 20px; font-size: .88rem; }
  .menu-movil__acciones { display: flex; gap: 10px; margin-top: 14px; }
  .menu-movil__acciones a {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--display); font-weight: 600; font-size: .98rem;
    padding: 12px 8px; border: 2px solid rgba(255,255,255,.55); border-radius: 999px;
    text-decoration: none; color: #fff; min-height: 46px;
  }
  .menu-movil__acciones svg { width: 18px; height: 18px; }

  /* ==================== página de menú ==================== */
  .menu-portada { padding-block: 18px 20px; }
  .menu-portada h1 { font-size: 1.86rem; }
  .menu-portada p { font-size: .88rem; margin-top: 5px; }
  .menu-portada__reja { gap: 14px; }
  .buscador { flex: 1 1 100%; max-width: none; }
  /* 16 px reales: por debajo, iOS hace zoom al enfocar el campo. */
  .buscador input { font-size: 16px; padding: 12px 16px 12px 44px; }
  .buscador svg { left: 16px; width: 18px; height: 18px; }

  .indice__pista { padding: 8px 16px; gap: 7px; }
  /* 44 px de alto: era 38 y el índice es lo primero que se toca. */
  .indice a { font-size: .88rem; padding: 10px 14px; border-width: 1.5px; }
  /* El área de toque de los renglones de contacto mide 44 px; con 20 px
     de separación se montaba sobre el renglón vecino. */
  .datos { gap: 26px; }

  .seccion-menu { padding-block: 26px; }
  .seccion-menu__titulo { gap: 10px; margin-bottom: 4px; }
  .seccion-menu__conteo { font-size: .72rem; }
  .seccion-menu > .contenedor > p { font-size: .92rem; margin-bottom: 18px; }

  .platillos { grid-template-columns: 1fr; gap: 10px; }
  .platillo { padding: 13px 15px; border-radius: 15px; gap: 3px 13px; }
  .platillo--con-foto { grid-template-columns: 104px 1fr auto; }
  .platillo__foto { width: 104px; height: 65px; }
  .platillo h3 { font-size: 1.03rem; line-height: 1.2; }
  .platillo__precio { font-size: 1.06rem; }
  .platillo__desc { font-size: .87rem; line-height: 1.45; margin-top: 2px; }
  .platillo__opciones { font-size: .84rem; margin-top: 6px; }
  .platillo__opciones summary { min-height: 30px; display: flex; align-items: center; }
  .lupa__marca { width: 26px; height: 26px; right: 0; bottom: 0; }
  .lupa__marca svg { width: 14px; height: 14px; }
  .nota-menu { padding-block: 22px; font-size: .85rem; }

  /* ==================== nosotros ==================== */
  .retrato { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .retrato img { height: 150px; }
  .retrato figcaption { margin-top: 12px; font-size: 1rem; }
  .paleta { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .muestra__color { height: 64px; }
  .muestra__pie { padding: 10px 11px; font-size: .78rem; }
  .muestra__pie b { font-size: .94rem; }

  /* El globo del chatbot flota abajo a la derecha y tapaba el último renglón
     de cada página. */
  .pie__abajo, .nota-menu .contenedor { padding-bottom: 46px; }
}

@media (max-width: 560px) {
  .pie__reja { grid-template-columns: 1fr; gap: 28px; }
  /* Dos botones a ancho completo, uno encima del otro, se leen como un
     formulario. En fila ocupan la mitad del alto y siguen midiendo 48 px. */
  .portada__acciones, .cierre__acciones { flex-wrap: nowrap; gap: 9px; }
  .portada__acciones .boton, .cierre__acciones .boton {
    flex: 1 1 0; min-width: 0; padding-inline: 10px; font-size: .96rem;
    white-space: nowrap;
  }
  .galeria { grid-template-columns: 1fr 1fr; }
  .marcas { grid-template-columns: 1fr; }
}

/* Pantallas muy angostas (SE, Mini): el índice y las tarjetas aprietan más. */
@media (max-width: 380px) {
  .contenedor { padding-inline: 15px; }
  /* Los dos botones en fila (regla de 560 px) no se parten a propósito, y su
     ancho mínimo es la suma de los dos rótulos: 342 px. Como la caja que los
     contiene es un ítem de reja, la pista crece hasta ahí y por debajo de
     357 px de pantalla —SE de primera generación, plegables cerrados— la
     página entera se sale y aparece el barrido horizontal. Aquí se apilan. */
  .portada__acciones, .cierre__acciones { flex-wrap: wrap; }
  .portada__acciones .boton, .cierre__acciones .boton {
    flex: 1 1 100%; white-space: normal;
  }
  .marca img { width: 94px; }
  .platillo--con-foto { grid-template-columns: 88px 1fr auto; }
  .platillo__foto { width: 88px; height: 55px; }
  .categoria__plato { width: 92px; height: 58px; }
  .menu-portada h1 { font-size: 1.68rem; }
}