/* ============================================================================
   MARIANITA · PROPUESTA B — "La casa"
   ----------------------------------------------------------------------------
   La otra manera de mirarlo: en vez de un escaparate oscuro, la web como el
   mantel de papel donde se apoya la carta. Fondo cálido, tinta, tipografía de
   imprenta, y el color puesto por SU arte, que aquí sí puede gritar.

   La estructura no sigue el orden de un folleto, sigue el orden de las
   preguntas de quien entra con hambre: ¿está abierto? ¿dónde? ¿qué es esto?

   Sin librerías, sin tipografías externas, sin peticiones a terceros.
   ========================================================================== */

/* ── 1. TOKENS ──────────────────────────────────────────────────────────── */
:root {
  --papel:      #f8f3e8;
  --papel-2:    #f1e9d9;
  --papel-3:    #e6dac4;
  --tinta:      #191410;
  --tinta-2:    #56493d;
  --tinta-3:    #8a7c6c;

  --oro:        #a9740d;
  --oro-texto:  #8a5e08;
  --oro-vivo:   #e0a32b;
  --terracota:  #bc3f2b;
  --verde:      #2c6a4a;

  --linea:      rgba(25, 20, 16, .13);
  --linea-2:    rgba(25, 20, 16, .07);

  --display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
             "Hoefler Text", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;

  --ancho:   1140px;
  --margen:  clamp(22px, 5vw, 54px);
  --seccion: clamp(74px, 11vh, 132px);

  /* --sal sale disparada: a la décima parte del tiempo ya ha hecho la mitad del
     recorrido. Es lo que se quiere en un botón —que responda al dedo al
     instante— pero no en una entrada: por muy larga que se declare la
     transición, el gesto que ve el ojo se acaba en un tercio del tiempo.
     --entra reparte el movimiento a lo largo de todo el recorrido: el 90 % del
     camino cae en el 63 % del tiempo, no en el 33 %. */
  --sal:   cubic-bezier(.16, 1, .3, 1);
  --entra: cubic-bezier(.12, .3, .4, 1);
  --suave: cubic-bezier(.4, 0, .2, 1);

  /* Ornamento: filete que remata en rombo */
  --rombo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='8'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23a9740d' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23a9740d' stop-opacity='.9'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='3.6' width='23' height='.9' fill='url(%23g)'/%3E%3Crect x='27' y='1.2' width='5.6' height='5.6' fill='%23a9740d' transform='rotate(45 29.8 4)'/%3E%3C/svg%3E");

  color-scheme: light;
}

/* ── 2. BASE ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: clamp(16.5px, 1.02vw, 18px);
  line-height: 1.62;
  letter-spacing: -.008em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Grano de papel: lo que separa una web de una hoja impresa */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 4;
  pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--oro-vivo); color: var(--tinta); }
:focus-visible { outline: 2.5px solid var(--terracota); outline-offset: 3px; border-radius: 2px; }

/* ── 3. UTILIDADES ──────────────────────────────────────────────────────── */
.contenedor {
  width: 100%; max-width: var(--ancho);
  margin-inline: auto; padding-inline: var(--margen);
  position: relative; z-index: 2;
}
.seccion { padding-block: var(--seccion); position: relative; }
.seccion--tinta { background: var(--tinta); color: var(--papel); }
.seccion--crema { background: var(--papel-2); }

.solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.saltar {
  position: absolute; top: -100px; left: var(--margen); z-index: 220;
  padding: 12px 22px; border-radius: 2px; background: var(--tinta); color: var(--papel);
  font-weight: 600; transition: top .2s var(--suave);
}
.saltar:focus { top: 16px; }

/* ── 4. TIPOGRAFÍA ──────────────────────────────────────────────────────── */
.etiqueta {
  display: flex; align-items: center; gap: .8em;
  font-size: clamp(11px, .74vw, 12.5px); font-weight: 650;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--oro-texto); margin: 0 0 clamp(18px, 2.2vw, 26px);
}
.etiqueta::before { content: ""; width: 36px; height: 8px; flex: none;
  background: var(--rombo) no-repeat center / contain; }
/* El filete se traza al entrar la sección, de izquierda a derecha, y el rombo
   aparece al final como el remate de un trazo. Con clip-path y no con scaleX:
   escalarlo aplastaría el rombo. */
.revelar .etiqueta::before { clip-path: inset(0 100% 0 0); }
.revelar.visible .etiqueta::before { clip-path: inset(0 0 0 0);
  transition: clip-path 1.05s var(--entra) .15s; }
.seccion--tinta .etiqueta { color: var(--oro-vivo); }
.seccion--tinta .etiqueta::before { filter: brightness(1.7) saturate(1.2); }

h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 400; letter-spacing: -.02em; line-height: 1.04; }
.titulo-l { font-size: clamp(2.2rem, 5.2vw, 4rem); line-height: 1.06; }
.titulo-m { font-size: clamp(1.55rem, 2.5vw, 2.1rem); }

.entradilla {
  font-size: clamp(1.05rem, 1.36vw, 1.22rem); line-height: 1.62;
  color: var(--tinta-2); max-width: 54ch; margin: clamp(18px, 2.2vw, 26px) 0 0;
}
.seccion--tinta .entradilla { color: #cdc0ac; }

/* ── 5. BOTONES ─────────────────────────────────────────────────────────── */
.botones { display: flex; flex-wrap: wrap; gap: 11px; margin-top: clamp(26px, 3.2vw, 38px); }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 54px; padding: 0 30px;
  border: 1.5px solid transparent; border-radius: 999px;
  background: var(--tinta); color: var(--papel);
  font-size: 1rem; font-weight: 560; cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(25,20,16,.16), 0 8px 22px -10px rgba(25,20,16,.5);
  transition: transform .5s var(--sal), box-shadow .5s var(--sal), background-color .3s var(--suave);
}
.boton:hover { transform: translateY(-2px); box-shadow: 0 2px 5px rgba(25,20,16,.18), 0 16px 34px -12px rgba(25,20,16,.55); }
.boton:active { transform: translateY(0); }
.boton--fantasma { background: transparent; color: var(--tinta); border-color: var(--linea); box-shadow: none; }
.boton--fantasma:hover { border-color: var(--tinta); box-shadow: none; }
.seccion--tinta .boton { background: var(--oro-vivo); color: #2a1d05; }
.seccion--tinta .boton--fantasma { background: transparent; color: var(--papel); border-color: rgba(248,243,232,.3); }
.boton svg { width: 18px; height: 18px; flex: none; }

/* ── 6. NAVEGACIÓN ──────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 110; height: 68px;
  display: flex; align-items: center; border-bottom: 1px solid transparent;
  transition: background-color .45s var(--suave), border-color .45s var(--suave);
}
.nav.pegada {
  background: rgba(248, 243, 232, .86);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom-color: var(--linea-2);
}
.nav__caja { width: 100%; max-width: var(--ancho); margin-inline: auto;
  padding-inline: var(--margen); display: flex; align-items: center; gap: 18px; }
/* La marca: su emblema y, al lado, el nombre en cursiva de imprenta.
   El emblema ya trae sus colores; el nombre se queda en tinta. */
.nav__marca { --marca: 1.55rem; --emblema: 34px;
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--display); font-style: italic; font-size: var(--marca);
  letter-spacing: -.015em; margin-right: auto;
  transition: color .3s var(--suave), font-size .45s var(--suave); }
.nav__marca img { width: var(--emblema); height: var(--emblema); flex: none;
  transition: transform .55s var(--sal), width .45s var(--suave), height .45s var(--suave); }
.nav__marca:hover { color: var(--oro); }
.nav__marca:hover img { transform: rotate(-8deg) scale(1.06); }
/* Al despegarse de la portada la marca cede sitio al contenido, sin irse */
.nav.pegada .nav__marca { --marca: 1.42rem; --emblema: 30px; }
@media (max-width: 520px) {
  .nav__marca { --marca: 1.35rem; --emblema: 30px; gap: 9px; }
  .nav.pegada .nav__marca { --marca: 1.24rem; --emblema: 27px; }
}

.nav__enlaces { display: flex; align-items: center; gap: 2px; }
.nav__enlace { padding: 9px 15px; border-radius: 999px; font-size: .93rem; color: var(--tinta-2);
  transition: color .25s var(--suave), background-color .25s var(--suave); }
.nav__enlace:hover { color: var(--tinta); background: rgba(25,20,16,.055); }

.nav__acciones { display: flex; align-items: center; gap: 9px; }

.idioma { position: relative; }
.idioma__boton { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 15px;
  background: transparent; border: 1.5px solid var(--linea); border-radius: 999px; cursor: pointer;
  font-size: .85rem; font-weight: 650; letter-spacing: .04em; color: var(--tinta-2);
  transition: border-color .25s var(--suave), color .25s var(--suave); }
.idioma__boton:hover { border-color: var(--tinta); color: var(--tinta); }
.idioma__boton svg { width: 15px; height: 15px; }
.idioma__lista {
  position: absolute; top: calc(100% + 9px); right: 0; min-width: 168px; padding: 7px;
  background: rgba(253, 250, 244, .98);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--linea); border-radius: 12px;
  box-shadow: 0 18px 40px -14px rgba(25,20,16,.3);
  display: grid; gap: 2px; opacity: 0; visibility: hidden;
  transform: translateY(-6px) scale(.97); transform-origin: top right;
  transition: opacity .24s var(--suave), transform .32s var(--sal), visibility .24s;
}
.idioma.abierto .idioma__lista { opacity: 1; visibility: visible; transform: none; }
.idioma__opcion { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 11px 13px; border: 0; border-radius: 8px; background: transparent;
  cursor: pointer; text-align: left; font-size: .93rem; color: var(--tinta-2);
  transition: background-color .2s var(--suave), color .2s var(--suave); }
.idioma__opcion:hover { background: rgba(25,20,16,.06); color: var(--tinta); }
.idioma__opcion[aria-current="true"] { color: var(--oro-texto); font-weight: 700; }

.nav__llamar .boton { min-height: 40px; padding: 0 20px; font-size: .9rem; }

.hamburguesa { display: none; width: 44px; height: 40px; align-items: center; justify-content: center;
  background: transparent; border: 1.5px solid var(--linea); border-radius: 999px; cursor: pointer; }
.hamburguesa span { display: block; width: 17px; height: 1.6px; background: var(--tinta); position: relative; }
.hamburguesa span::before, .hamburguesa span::after { content: ""; position: absolute; left: 0;
  width: 17px; height: 1.6px; background: var(--tinta); transition: transform .4s var(--sal); }
.hamburguesa span::before { top: -5.5px; }
.hamburguesa span::after { top: 5.5px; }
.menu-abierto .hamburguesa span { background: transparent; }
.menu-abierto .hamburguesa span::before { transform: translateY(5.5px) rotate(45deg); }
.menu-abierto .hamburguesa span::after { transform: translateY(-5.5px) rotate(-45deg); }

.panel { position: fixed; inset: 68px 0 0; z-index: 109; background: var(--papel);
  padding: 30px var(--margen) 44px; display: grid; align-content: start;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .3s var(--suave), transform .42s var(--sal), visibility .3s; overflow-y: auto; }
.menu-abierto .panel { opacity: 1; visibility: visible; transform: none; }
.panel a { font-family: var(--display); padding: 19px 2px; font-size: 1.7rem; letter-spacing: -.02em;
  border-bottom: 1px solid var(--linea-2); transition: color .25s var(--suave), padding-left .35s var(--sal); }
.panel a:hover { color: var(--oro); padding-left: 10px; }
.panel .boton { margin-top: 26px; font-family: var(--sans); }

/* ── 7. PORTADA ─────────────────────────────────────────────────────────── */
.hero { padding: 118px 0 0; text-align: center; position: relative; }
.hero::before {
  content: ""; position: absolute; inset: 0 0 40% 0; z-index: 0; pointer-events: none;
  background: radial-gradient(46rem 26rem at 50% 0%, rgba(224,163,43,.16), transparent 70%);
}
/* El logotipo de la casa, recortado sobre fondo transparente.
   Va suelto sobre el papel, sin caja ni marco: es la marca, no una imagen.
   La sombra es la justa para que no parezca pegado con celo. */
.hero__logotipo { width: min(80%, 460px); margin: 0 auto clamp(20px, 2.6vw, 30px); }
.hero__logotipo img {
  width: 100%;
  filter: drop-shadow(0 6px 14px rgba(25, 20, 16, .22));
}
.hero h1 { font-size: clamp(1.5rem, 2.7vw, 2.2rem); line-height: 1.2; max-width: 18ch; margin-inline: auto; }
.hero__texto { margin-inline: auto; max-width: 44ch; }
.hero .botones { justify-content: center; }

/* El estado del local, arriba y grande: es la primera pregunta de todo el mundo */
.estado {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 18px 9px 14px; border-radius: 999px;
  font-size: .92rem; font-weight: 620; border: 1.5px solid var(--linea);
  background: rgba(255,255,255,.5);
}
.estado__punto { width: 8px; height: 8px; border-radius: 50%; flex: none; position: relative; }
.estado--abierto { color: #1f6b47; border-color: rgba(44,106,74,.4); background: rgba(44,106,74,.09); }
.estado--abierto .estado__punto { background: #2c6a4a; box-shadow: 0 0 0 4px rgba(44,106,74,.16); }
/* El local está abierto: que se note que el dato es de ahora mismo y no una
   frase escrita hace un año. Una onda cada dos segundos y medio, sin estridencia. */
.estado--abierto .estado__punto::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: #2c6a4a; animation: latido 2.6s var(--suave) infinite;
}
@keyframes latido {
  0%   { transform: scale(1); opacity: .45; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
.estado--cerrado { color: var(--tinta-3); }
.estado--cerrado .estado__punto { background: var(--tinta-3); }
.hero .estado { margin-bottom: clamp(20px, 2.4vw, 28px); }

/* Banda de arte a sangre.
   La imagen se enseña ENTERA, a su proporción: nunca se recorta y nunca se le
   corta la cara a nadie. En móvil entra un encuadre más cerrado, hecho aparte. */
.banda {
  margin-top: clamp(40px, 5.6vw, 70px);
  position: relative; overflow: hidden;
  border-top: 1px solid var(--linea-2); border-bottom: 1px solid var(--linea-2);
}
.banda img { width: 100%; height: auto; display: block; }
/* Los bordes se funden con el papel. El degradado radial está centrado arriba
   a propósito: deja intacta la cara, que va en el centro, y disuelve las
   esquinas superiores, donde asomaban los remates de la cinta. */
.banda::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(46% 62% at 2% 0%, var(--papel) 0 34%, transparent 78%),
    radial-gradient(46% 62% at 98% 0%, var(--papel) 0 34%, transparent 78%),
    linear-gradient(var(--papel), transparent 8%, transparent 95%, var(--papel)),
    linear-gradient(90deg, var(--papel), transparent 6%, transparent 94%, var(--papel));
}
@media (max-width: 700px) {
  /* El encuadre de móvil ya no lleva cinta: basta con fundir los bordes */
  .banda::after { background:
    linear-gradient(var(--papel), transparent 6%, transparent 94%, var(--papel)),
    linear-gradient(90deg, var(--papel), transparent 5%, transparent 95%, var(--papel)); }
}

/* ── 8. BARRA FIJA EN MÓVIL ─────────────────────────────────────────────── */
.barra {
  position: fixed; inset: auto 0 0 0; z-index: 105; display: none;
  grid-template-columns: repeat(3, 1fr);
  background: rgba(248,243,232,.94);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-top: 1px solid var(--linea);
  padding-bottom: env(safe-area-inset-bottom);
}
.barra a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 62px; font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tinta-2);
}
.barra a + a { border-left: 1px solid var(--linea-2); }
.barra svg { width: 19px; height: 19px; color: var(--oro); }
.barra a:active { background: rgba(25,20,16,.05); }

/* ── 9. LA CASA ─────────────────────────────────────────────────────────── */
.casa__rejilla { display: grid; gap: clamp(40px, 5.4vw, 76px); grid-template-columns: 1.2fr .8fr; align-items: start; }
.casa p { color: var(--tinta-2); font-size: clamp(1.04rem, 1.3vw, 1.18rem); line-height: 1.68; max-width: 52ch; }
.casa p + p { margin-top: 1.1em; }
.casa__primera::first-letter { float: left; font-family: var(--display); font-size: 3.8em;
  line-height: .8; padding: .05em .1em 0 0; color: var(--oro); }
/* Los tres datos entran de uno en uno, y la línea de arriba se dibuja como si
   la trazaran con regla. El contenedor renuncia al gesto genérico de .revelar:
   aquí el movimiento lo ponen los hijos, no la caja. */
.datos { display: grid; position: relative; }
.datos.revelar { opacity: 1; transform: none; }
.datos::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1.5px;
  background: var(--tinta); transform: scaleX(0); transform-origin: left; }
.datos.visible::before { transform: scaleX(1); transition: transform 1.15s var(--entra); }
.dato { padding: 22px 2px; border-bottom: 1px solid var(--linea);
  opacity: 0; transform: translateY(26px); }
.datos.visible .dato { opacity: 1; transform: none;
  transition: opacity .9s var(--entra), transform 1.1s var(--entra);
  transition-delay: calc(.22s + var(--i, 0) * .17s); }
.dato__valor { font-family: var(--display); font-style: italic;
  font-size: clamp(1.42rem, 2.1vw, 1.85rem); letter-spacing: -.02em; }
.dato__etiqueta { font-size: .85rem; color: var(--tinta-3); margin-top: 3px; }

/* ── 10. LA COCINA EXPLICADA ────────────────────────────────────────────── */
.cocina__cabecera { max-width: 58ch; margin-bottom: clamp(38px, 4.6vw, 60px); }
.cocina__pista { margin-top: 12px; font-size: .9rem; color: var(--tinta-3); }
/* «En la carta hay más de lo que se come en Ecuador». Cierra la lista de los
   doce platos, que es justo donde el lector que busca comida colombiana o
   venezolana se iba dando por hecho que esto no era para él. */
.cocina__tambien {
  margin: clamp(26px, 3.2vw, 38px) 0 0;
  font-size: 1.02rem; line-height: 1.6; color: var(--tinta-2);
  max-width: 58ch;
}
.platos { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(34px, 5vw, 70px); }
.plato {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  padding: 22px 0; border-bottom: 1px solid var(--linea);
  position: relative;
}
/* Un rescoldo dorado bajo el cursor. Las coordenadas las pone app.js; sin
   ellas se queda centrado y apagado, que es como se ve en un móvil. */
.plato::before {
  content: ""; position: absolute; inset: -6px -14px; z-index: 0;
  pointer-events: none; opacity: 0; border-radius: 10px;
  background: radial-gradient(16rem 9rem at var(--mx, 50%) var(--my, 50%),
              rgba(224,163,43,.22), transparent 70%);
  transition: opacity .5s var(--suave);
}
.plato:hover::before { opacity: 1; }
.plato > * { position: relative; z-index: 1; }
.plato__num { font-family: var(--display); font-style: italic; font-size: 1.05rem;
  color: var(--oro); padding-top: .15em; min-width: 1.6em;
  transition: color .3s var(--suave); }
.plato:hover .plato__num { color: var(--oro-vivo); }

/* ── Fotos de los platos ──────────────────────────────────────────────────
   La miniatura ocupa el sitio del número. Mientras no estén todas, los platos
   que aún no tienen foto enseñan su número dentro de un recuadro del mismo
   tamaño: así la columna no baila de una fila a otra. */
.platos { --marca: 128px; }
.platos--con-fotos .plato { grid-template-columns: var(--marca) 1fr; gap: 22px; }
/* La miniatura es un botón: se puede ampliar en el mismo visor que usan la
   carta y la galería. El botón no pinta nada, solo reserva el hueco y recoge
   la pulsación; lo que se ve sigue siendo la <img> de dentro. */
.plato__lupa {
  display: block; width: var(--marca); height: var(--marca);
  padding: 0; border: 0; background: none; border-radius: 3px; cursor: zoom-in;
}
.plato__foto {
  display: block; width: 100%; height: 100%; border-radius: 3px; object-fit: cover;
  background: var(--papel-3);
  box-shadow: 0 1px 3px rgba(25,20,16,.16), 0 12px 26px -12px rgba(25,20,16,.45);
  transition: transform .6s var(--sal), box-shadow .6s var(--sal);
}
.plato:hover .plato__foto {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 3px 6px rgba(25,20,16,.18), 0 22px 40px -14px rgba(25,20,16,.55);
}
/* El plato sin foto no finge tener una: ni recuadro esperando a llenarse ni
   número suelto. Sólo el hueco, que conserva el ancho de la miniatura para que
   los títulos de unas filas y otras caigan a la misma altura: sin eso la lista
   se ve escalonada. */
.plato__hueco { display: block; width: var(--marca); height: 1px; }
/* Con la foto grande el texto necesita aire: una sola columna a partir de aquí,
   que además deja las fotos más grandes todavía. */
@media (min-width: 861px) and (max-width: 1180px) {
  .platos--con-fotos { grid-template-columns: 1fr; }
}
@media (max-width: 860px) { .platos { --marca: 104px; } }
.plato__nombre { font-family: var(--display); font-size: clamp(1.22rem, 1.6vw, 1.42rem); letter-spacing: -.015em; }
.plato__desc { margin: 6px 0 0; font-size: .96rem; color: var(--tinta-2); line-height: 1.56; }
/* Centrado, para que no baile con la tira de fotos que tiene justo encima */
.cocina__pie { margin-top: clamp(26px, 3.2vw, 38px); text-align: center; }

/* ── La tira que lleva a la galería ───────────────────────────────────────
   Un botón que dice «Los platos» no enseña nada; unas fotos sí, y el atractivo
   de esa página son justamente las fotos. Va al final de la sección de cocina y
   al final de la carta, que son los dos sitios donde quien está leyendo ya está
   pensando en comer. Todo el bloque es un solo enlace.

   Las fotos reposan ligeramente giradas, como si estuvieran puestas sobre la
   mesa, y se enderezan al pasar por encima. El giro es fijo por posición, no al
   azar: así no baila cada vez que se repinta la página. */
.tira {
  display: block; text-decoration: none; color: inherit; text-align: center;
  /* Aire de sobra por arriba: pegada a la última fila de platos parecería otra
     fila más, y lo que es es el remate de la sección. */
  margin-top: clamp(44px, 5.4vw, 72px);
}
.tira__fotos {
  display: flex; justify-content: center; align-items: center;
  gap: clamp(10px, 1.5vw, 22px); padding: 6px 0 10px;
}
.tira__foto {
  width: clamp(104px, 13vw, 170px); aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 3px; background: var(--papel-3);
  box-shadow: 0 1px 3px rgba(25,20,16,.16), 0 12px 26px -12px rgba(25,20,16,.45);
  transform: rotate(var(--giro, 0deg));
  transition: transform .7s var(--sal), box-shadow .7s var(--sal);
}
.tira__foto:nth-child(1) { --giro: -3deg; }
.tira__foto:nth-child(2) { --giro: 1.8deg; }
.tira__foto:nth-child(3) { --giro: -1.2deg; }
.tira__foto:nth-child(4) { --giro: 2.4deg; }
.tira__foto:nth-child(5) { --giro: -2deg; }
.tira:hover .tira__foto, .tira:focus-visible .tira__foto {
  transform: rotate(0deg) translateY(-7px);
  box-shadow: 0 3px 7px rgba(25,20,16,.2), 0 24px 44px -16px rgba(25,20,16,.55);
}
.tira__texto { display: block; margin-top: clamp(14px, 1.8vw, 22px); }
.tira__titulo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-size: clamp(1.24rem, 2vw, 1.58rem);
  letter-spacing: -.015em; color: var(--tinta);
}
.tira__titulo svg { width: 19px; height: 19px; color: var(--oro-vivo);
  transition: transform .5s var(--sal); }
.tira:hover .tira__titulo svg { transform: translateX(5px); }
.tira__pie { display: block; margin-top: 3px; font-size: .9rem; color: var(--tinta-3); }
/* En móvil sólo caben tres sin encogerlas hasta que no se vea el plato */
@media (max-width: 620px) { .tira__foto:nth-child(n+4) { display: none; } }

/* ── 11. LA CARTA ───────────────────────────────────────────────────────── */
.carta__rejilla { display: grid; gap: clamp(40px, 5.4vw, 72px); grid-template-columns: .88fr 1.12fr; align-items: center; }
.hojas { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
.hoja {
  border-radius: 2px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 2px rgba(25,20,16,.16), 0 18px 38px -16px rgba(25,20,16,.42);
  transition: transform .8s var(--sal), box-shadow .8s var(--sal);
  clip-path: inset(0 0 100% 0);
}
.visible .hoja { clip-path: inset(0 0 0 0); transition: clip-path 1.4s var(--entra), transform .8s var(--sal), box-shadow .8s var(--sal); }
.visible .hoja:nth-child(2) { transition-delay: .22s; }
.hoja:nth-child(1) { transform: rotate(-1.6deg); }
.hoja:nth-child(2) { transform: rotate(1.4deg); }
.hoja:hover { transform: rotate(0) translateY(-7px) scale(1.02); box-shadow: 0 3px 6px rgba(25,20,16,.18), 0 30px 56px -20px rgba(25,20,16,.5); }
.hoja img { width: 100%; }

.aviso {
  margin-top: 26px; padding: 0 0 0 16px; border-left: 2px solid var(--oro);
  font-size: .9rem; color: var(--tinta-3); line-height: 1.55;
}
.aviso svg { display: none; }

/* ── 12. CELEBRACIONES ──────────────────────────────────────────────────── */
.banquetes { position: relative; overflow: hidden; }
.banquetes__fondo { position: absolute; inset: -5%; z-index: 0;
  background-size: cover; background-position: center 60%; opacity: .3; filter: saturate(1.3) blur(9px); }
.banquetes::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, var(--tinta) 0%, rgba(25,20,16,.76) 28%, rgba(25,20,16,.78) 72%, var(--tinta) 100%); }
.banquetes .contenedor { z-index: 2; }
.banquetes__caja { max-width: 56ch; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
.pastilla { padding: 9px 17px; border: 1px solid rgba(248,243,232,.26); border-radius: 999px;
  font-size: .89rem; color: #cdc0ac; }
.pastilla--aforo { border-color: var(--oro-vivo); color: var(--oro-vivo); }

/* ── 13. DOMICILIO ──────────────────────────────────────────────────────── */
.domicilio__caja { display: grid; gap: clamp(24px, 3.2vw, 44px); grid-template-columns: 1fr auto;
  align-items: center; padding: clamp(28px, 3.4vw, 44px) 0;
  border-top: 1.5px solid var(--tinta); border-bottom: 1.5px solid var(--tinta); }
.domicilio__acciones { display: flex; flex-wrap: wrap; gap: 11px; }

/* ── 14. DÓNDE ESTAMOS ──────────────────────────────────────────────────── */
.visita__rejilla { display: grid; gap: clamp(32px, 4vw, 56px); grid-template-columns: repeat(3, 1fr); }
.visita__bloque h3 { font-family: var(--sans); font-size: .74rem; font-weight: 650;
  letter-spacing: .19em; text-transform: uppercase; color: var(--tinta-3);
  margin-bottom: 18px; padding-bottom: 11px; border-bottom: 1px solid var(--linea); }
.visita__bloque p, .visita__bloque a { color: var(--tinta-2); margin: 0; }
.visita__bloque a { transition: color .25s var(--suave); }
.visita__bloque a:hover { color: var(--oro); }
.direccion { font-family: var(--display); font-size: clamp(1.22rem, 1.55vw, 1.4rem);
  line-height: 1.42; color: var(--tinta) !important; }

.horario { display: grid; }
.horario__fila { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0;
  border-bottom: 1px solid var(--linea-2); font-size: .95rem; color: var(--tinta-2); }
.horario__fila:last-child { border-bottom: 0; }
.horario__fila.es-hoy { color: var(--tinta); font-weight: 680; }
.horario__horas { font-variant-numeric: tabular-nums; }
.horario__fila.cerrado .horario__horas { color: var(--tinta-3); }
.visita__bloque .estado { margin-bottom: 16px; }

.contacto-lista { display: grid; gap: 13px; }
.contacto-lista a { display: inline-flex; align-items: center; gap: 10px; font-size: 1.03rem; }
.contacto-lista svg { width: 17px; height: 17px; color: var(--oro); flex: none; }

/* ── 15. RESEÑAS ────────────────────────────────────────────────────────── */
.resena { text-align: center; }
.resena__caja { max-width: 580px; margin-inline: auto; }
.estrellas { display: flex; justify-content: center; gap: 6px; margin-bottom: 20px; }
.estrellas svg { width: 20px; height: 20px; color: var(--oro-vivo); }
.resena .botones { justify-content: center; }
.resena .entradilla { margin-inline: auto; }

/* ── 16. PIE ────────────────────────────────────────────────────────────── */
.pie { background: var(--tinta); color: var(--papel); padding-block: clamp(50px, 6vw, 80px) 34px; }
.pie__gracias { font-family: var(--display); font-style: italic;
  font-size: clamp(1.8rem, 3.4vw, 2.8rem); color: var(--oro-vivo);
  letter-spacing: -.02em; margin-bottom: clamp(32px, 4vw, 48px); }
.pie__rejilla { display: grid; gap: 34px; grid-template-columns: 1.4fr 1fr 1fr; align-items: start; }
.pie__marca { font-family: var(--display); font-style: italic; font-size: 1.55rem; margin-bottom: 10px; }
.pie p { margin: 0; color: #9b8f7d; font-size: .95rem; line-height: 1.6; }
.pie a { color: #cdc0ac; }
.pie h4 { margin: 0 0 14px; font-size: .74rem; font-weight: 650; letter-spacing: .19em;
  text-transform: uppercase; color: #9b8f7d; font-family: var(--sans); }
.pie__enlaces { display: grid; gap: 10px; }
.pie__enlaces a { font-size: .95rem; transition: color .25s var(--suave); }
.pie__enlaces a:hover { color: var(--oro-vivo); }
.redes { display: flex; gap: 10px; }
.redes a { width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid rgba(248,243,232,.2); border-radius: 50%; color: #cdc0ac;
  transition: color .28s var(--suave), border-color .28s var(--suave), transform .5s var(--sal); }
.redes a:hover { color: var(--oro-vivo); border-color: var(--oro-vivo); transform: translateY(-3px); }
.redes svg { width: 18px; height: 18px; }
.pie__abajo { margin-top: clamp(36px, 4.2vw, 54px); padding-top: 24px;
  border-top: 1px solid rgba(248,243,232,.16); display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: space-between; font-size: .85rem; color: #9b8f7d; }

/* ── 17. PÁGINA DE LA CARTA ─────────────────────────────────────────────── */
.pag { padding-top: 122px; }
.pag__cabecera { text-align: center; max-width: 56ch; margin: 0 auto clamp(38px, 4.6vw, 58px); }
.pag__cabecera .etiqueta { justify-content: center; }
.pag__cabecera .entradilla { margin-inline: auto; }

.paginas-carta { display: grid; gap: clamp(20px, 2.6vw, 32px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); align-items: start; }
.pagina-carta { position: relative; width: 100%; display: block; padding: 0; border: 0;
  border-radius: 2px; overflow: hidden; background: #fff; cursor: zoom-in;
  box-shadow: 0 1px 3px rgba(25,20,16,.18), 0 20px 44px -18px rgba(25,20,16,.44);
  transition: transform .6s var(--sal), box-shadow .6s var(--sal); }
.pagina-carta:hover { transform: translateY(-5px); box-shadow: 0 3px 8px rgba(25,20,16,.2), 0 32px 62px -20px rgba(25,20,16,.5); }
.pagina-carta img { width: 100%; }
.pagina-carta__pie { position: absolute; inset: auto 0 0; padding: 32px 18px 14px;
  background: linear-gradient(transparent, rgba(20,15,10,.8));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: .89rem; color: #f8f3e8; }
.pagina-carta__lupa { display: inline-flex; align-items: center; gap: 7px; color: var(--oro-vivo); font-weight: 650; }
.pagina-carta__lupa svg { width: 16px; height: 16px; }

/* ── GALERÍA DE PLATOS ──────────────────────────────────────────────────
   Mosaico de proporción fija: las fotos vienen con encuadres muy distintos
   y así la retícula queda ordenada. La foto entera se ve al ampliarla. */
.galeria {
  display: grid; gap: clamp(12px, 1.6vw, 20px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  /* "dense" rellena los huecos que dejan las piezas grandes con la primera
     foto pequeña que quepa, en vez de dejar el agujero abierto. */
  grid-auto-flow: dense;
}
.foto {
  position: relative; display: block; width: 100%; padding: 0; border: 0;
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px;
  background: var(--papel-3); cursor: zoom-in;
  box-shadow: 0 1px 3px rgba(25,20,16,.16), 0 14px 30px -14px rgba(25,20,16,.42);
  transition: transform .6s var(--sal), box-shadow .6s var(--sal);
}
.foto img { width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--sal); }

/* ── Ritmo del mosaico ──────────────────────────────────────────────────
   Doce fotos todas iguales son una hoja de contactos, no una carta. Estas
   dos variantes rompen la cuadrícula sin descuadrarla: la proporción de
   cada hueco es exactamente la de las filas y columnas que ocupa, así que
   las alturas siguen cuadrando entre sí.
     · --alta   una columna de ancho, dos filas de alto → vertical (2/3).
       Es lo que salva las fotos verticales, que antes el mosaico partía
       por la mitad para meterlas en un hueco apaisado.
     · --grande dos columnas por dos filas → la misma proporción apaisada,
       al doble de tamaño.
   Por debajo de dos columnas no hay sitio para nada de esto y todas vuelven
   a ser iguales. */
/* La proporción vertical vale SIEMPRE, también en el móvil de una sola
   columna: si ahí se forzara el hueco apaisado, la foto volvería a partirse
   por la mitad, que es justo lo que esto viene a arreglar. Lo que sí depende
   del ancho es ocupar más de una celda. */
.foto--alta { aspect-ratio: 2 / 3; }
@media (min-width: 561px) { .foto--alta { grid-row: span 2; } }
@media (min-width: 861px) { .foto--grande { grid-column: span 2; grid-row: span 2; } }
.foto:hover { transform: translateY(-4px); box-shadow: 0 3px 7px rgba(25,20,16,.2), 0 26px 46px -16px rgba(25,20,16,.5); }
.foto:hover img { transform: scale(1.05); }
.foto__pie {
  position: absolute; inset: auto 0 0; padding: 30px 14px 12px;
  background: linear-gradient(transparent, rgba(20,15,10,.82));
  color: #f8f3e8; font-size: .92rem; font-family: var(--display);
  text-align: left; letter-spacing: -.01em;
}
/* La foto destacada manda: si el pie fuera igual que el de las pequeñas, la
   jerarquía se quedaría a medias. */
.foto--grande .foto__pie { font-size: 1.16rem; padding: 42px 20px 16px; }

/* La cascada de entrada, como en los platos de la portada */
.foto.revelar.visible { transition-delay: calc(min(var(--i, 0), 7) * .075s); }

.vacio { text-align: center; padding: clamp(54px, 9vw, 108px) 0; }
.vacio h1 { margin-bottom: 14px; }

.visor { position: fixed; inset: 0; z-index: 300; background: rgba(18, 13, 8, .95);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: grid; place-items: center; padding: 62px 12px 12px;
  opacity: 0; visibility: hidden; transition: opacity .35s var(--suave), visibility .35s; overflow: auto; }
.visor.abierto { opacity: 1; visibility: visible; }
.visor img { max-width: 100%; border-radius: 2px; transform: scale(.97);
  transition: transform .55s var(--sal); box-shadow: 0 26px 70px -24px #000; }
/* Las fotos de la galería se ajustan también de alto: sin esto una foto vertical
   se sale de la pantalla y hay que arrastrar para verla entera, que es justo lo
   contrario de lo que uno espera al ampliar. La clase la pone app.js y **solo**
   para las fotos: las hojas de la carta siguen abriéndose a lo ancho, porque ahí
   lo que se quiere es leer los precios, no ver la hoja de lejos. El padding del
   visor es 62 px arriba y 12 abajo: de ahí el descuento. */
.visor--ajustado img { max-height: calc(100dvh - 88px); object-fit: contain; }
.visor.abierto img { transform: none; }
.visor__cerrar { position: fixed; top: 15px; right: 15px; z-index: 2; width: 48px; height: 48px;
  display: grid; place-items: center; border: 1px solid rgba(248,243,232,.3); border-radius: 50%;
  background: rgba(248,243,232,.12); cursor: pointer; color: #f8f3e8;
  transition: background-color .25s var(--suave), transform .45s var(--sal); }
.visor__cerrar:hover { background: rgba(248,243,232,.22); transform: rotate(90deg); }
.visor__cerrar svg { width: 19px; height: 19px; }

/* ── 18. PÁGINA DE ENLACES (NFC) ────────────────────────────────────────── */
.hub { min-height: 100svh; display: grid; align-content: center; padding: 50px 0 44px; }
.hub__caja { max-width: 450px; margin-inline: auto; width: 100%; text-align: center; }
.hub__logotipo { width: min(78%, 320px); margin: 0 auto 10px; }
.hub__sub { color: var(--tinta-3); font-size: .82rem; margin: 0 0 30px;
  letter-spacing: .18em; text-transform: uppercase; }
.hub__enlaces { display: grid; gap: 10px; text-align: left; }
.hub__enlace { display: flex; align-items: center; gap: 15px; min-height: 64px; padding: 0 22px;
  border: 1.5px solid var(--linea); border-radius: 999px; background: rgba(255,255,255,.45);
  font-size: 1.02rem; font-weight: 540;
  transition: transform .45s var(--sal), border-color .3s var(--suave), background-color .3s var(--suave); }
.hub__enlace:hover { transform: translateY(-2px); border-color: var(--tinta); }
.hub__enlace svg { width: 20px; height: 20px; color: var(--oro); flex: none; }
.hub__enlace--principal { background: var(--tinta); color: var(--papel); border-color: var(--tinta); font-weight: 620; }
.hub__enlace--principal svg { color: var(--oro-vivo); }
.hub__enlace--principal:hover { background: #2c231d; }
.hub__flecha { margin-left: auto; opacity: .38; }
.hub .redes { justify-content: center; margin-top: 28px; }
.hub .redes a { border-color: var(--linea); color: var(--tinta-2); }
.hub .redes a:hover { color: var(--oro); border-color: var(--oro); }

/* ── 19. WIFI Y LEGAL ───────────────────────────────────────────────────── */
.wifi-caja { max-width: 420px; margin-inline: auto; text-align: center; }
.wifi-campo { margin-top: 22px; text-align: left; }
.wifi-campo span { display: block; font-size: .74rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tinta-3); margin-bottom: 8px; }
.wifi-campo strong { display: block; font-size: 1.32rem; font-weight: 620; letter-spacing: .02em;
  padding: 16px 18px; border: 1.5px solid var(--linea); border-radius: 6px;
  background: rgba(255,255,255,.6); word-break: break-all;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; }

.texto-legal { max-width: 70ch; }
.texto-legal h2 { font-size: clamp(1.25rem, 1.8vw, 1.55rem); margin: clamp(34px, 4vw, 48px) 0 12px; }
.texto-legal p { color: var(--tinta-2); margin: 0 0 12px; }
.texto-legal dl { display: grid; gap: 10px; margin: 0; }
.texto-legal dt { font-size: .74rem; letter-spacing: .17em; text-transform: uppercase; color: var(--tinta-3); }
.texto-legal dd { margin: 0 0 10px; color: var(--tinta-2); }
.pendiente { color: var(--oro); font-style: italic; }

/* ── 20. MOVIMIENTO ─────────────────────────────────────────────────────── */
/* La ventana por la que asoma cada palabra.
   Los titulares van con line-height 1.04, más apretado que el alto natural de
   la fuente, así que la cola de las letras que bajan —la g de «Google», la j,
   la y— se salía de la caja y el overflow se la comía por abajo. Medido: la g
   baja 8,03 px de la baseline y solo había 5,64 px. Se le da una cola de aire
   por debajo y se recupera con un margen negativo, para que la palabra siga
   ocupando exactamente lo mismo y no se descuadre ningún título.
   El desplazamiento de partida incluye esa cola: si no, el texto asomaría por
   el borde de abajo mientras espera a entrar. */
.palabra { --cola: .16em;
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: var(--cola); margin-bottom: calc(var(--cola) * -1); }
.palabra > i { display: inline-block; font-style: inherit;
  transform: translateY(calc(106% + var(--cola)));
  transition: transform 1.2s var(--entra); }
.visible .palabra > i, .cargada .palabra > i { transform: none; }
/* Escalonado más marcado: si las palabras salen casi a la vez, el titular
   aparece de golpe y no se lee como una frase que se va formando. */
.palabra:nth-child(1) > i { transition-delay: .03s; }
.palabra:nth-child(2) > i { transition-delay: .12s; }
.palabra:nth-child(3) > i { transition-delay: .21s; }
.palabra:nth-child(4) > i { transition-delay: .30s; }
.palabra:nth-child(5) > i { transition-delay: .39s; }
.palabra:nth-child(6) > i { transition-delay: .48s; }
.palabra:nth-child(n+7) > i { transition-delay: .55s; }

/* 40 px, no 18: con 18 el gesto existe sobre el papel pero el ojo no lo pilla,
   por muy larga que sea la transición. La distancia es lo que se ve. */
.revelar { opacity: 0; transform: translateY(40px); }
.revelar.visible { opacity: 1; transform: none;
  transition: opacity 1s var(--entra), transform 1.25s var(--entra); }
.revelar.visible[data-retardo="1"] { transition-delay: .14s; }
.revelar.visible[data-retardo="2"] { transition-delay: .28s; }
.revelar.visible[data-retardo="3"] { transition-delay: .42s; }

/* Los platos van en cascada por su posición en la lista. Acotado a 7 para que
   el último no se haga esperar cuando entra solo, al final del scroll. */
.plato.revelar.visible { transition-delay: calc(min(var(--i, 0), 7) * .085s); }

.entrada { opacity: 0; transform: translateY(30px); }
.cargada .entrada { opacity: 1; transform: none;
  transition: opacity 1.05s var(--entra), transform 1.3s var(--entra); }
.cargada .entrada[data-retardo="1"] { transition-delay: .18s; }
.cargada .entrada[data-retardo="2"] { transition-delay: .34s; }
.cargada .entrada[data-retardo="3"] { transition-delay: .5s; }
.cargada .entrada[data-retardo="4"] { transition-delay: .66s; }

.cargada .hero__logotipo { animation: posarse 1.5s var(--sal) .1s both; }
@keyframes posarse {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
/* La banda no entra como los demás bloques: se abre desde el centro, como un
   telón. Anula el gesto genérico de .revelar, que aquí no pega. */
.banda.revelar { opacity: 1; transform: none; clip-path: inset(50% 0 50% 0); }
.banda.revelar.visible { clip-path: inset(0 0 0 0); transition: clip-path 1.5s var(--entra); }

/* El zoom de entrada, y el reposo del que parte el parallax.
   En pantalla ancha la imagen se queda un pelo más grande que su marco: esos
   pocos píxeles de holgura son los que puede recorrer sin descubrir papel. */
.banda img { --reposo: 1; transform: scale(1.08); transition: transform 2.4s var(--sal); }
.cargada .banda img { transform: scale(var(--reposo)); }
@media (min-width: 701px) {
  /* 1.075 deja ~20 px de holgura por arriba y por abajo, y el parallax recorre
     14: sobran 6 px de margen para que nunca asome el papel por el canto. */
  .banda img { --reposo: 1.075; transform: scale(1.14); }
}

/* ── 21. PANTALLAS ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .casa__rejilla, .carta__rejilla { grid-template-columns: 1fr; }
  .visita__rejilla, .pie__rejilla { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  html { scroll-padding-top: 78px; }
  .nav__enlaces, .nav__llamar { display: none; }
  .hamburguesa { display: inline-flex; }
  .barra { display: grid; }
  body { padding-bottom: 62px; }
  .platos { grid-template-columns: 1fr; }
  .domicilio__caja { grid-template-columns: 1fr; }
  .visita__rejilla { grid-template-columns: 1fr; }
  .hero { padding-top: 104px; }
}

@media (max-width: 620px) {
  .pie__rejilla { grid-template-columns: 1fr; }
  .hojas { grid-template-columns: 1fr; }
  .hoja:nth-child(1), .hoja:nth-child(2) { transform: none; }
  .boton { width: 100%; }
  .botones { flex-direction: column; }
  .pie__abajo { flex-direction: column; gap: 8px; }
}

/* ── 22. PREFERENCIAS ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .revelar, .entrada, .dato { opacity: 1 !important; transform: none !important; }
  .palabra > i { transform: none !important; }
  .hoja, .banda.revelar, .etiqueta::before { clip-path: none !important; }
  .datos::before { transform: none !important; }
  .banda img { transform: none !important; translate: none !important; }
  .tira__foto { transform: none !important; }
}

@media (prefers-contrast: more) {
  :root { --tinta-3: #4a4038; --linea: rgba(25,20,16,.3); }
}

/* ── 23. IMPRESIÓN ──────────────────────────────────────────────────────── */
@media print {
  body::after, .nav, .panel, .barra, .visor, .saltar, .banda { display: none !important; }
  .seccion--tinta, .pie, .banquetes { background: #fff !important; color: #000 !important; }
  .revelar, .entrada, .dato { opacity: 1 !important; transform: none !important; }
  .palabra > i { transform: none !important; }
  .hoja, .banda.revelar, .etiqueta::before { clip-path: none !important; }
  .datos::before { transform: none !important; }
  .seccion { padding-block: 22px; }
}