/* ═══════════════════════════════════════════════════════════════════
   Adkantú Restaurant · Coñaripe
   Demo de presentación — primera de la tanda T2 (gastronomía)

   La paleta sale del lugar: la madera oscura del comedor, la harina del
   mantel, el cobre de la olla, el merkén, el verde de la nalca y el
   azul apagado del Calafquén al atardecer. Nada de rojo-y-negro de
   pizzería ni de dorado de restaurant de hotel.

   La decisión de diseño que se tomó a conciencia: el sitio entero es el
   comedor de noche —fondo oscuro, luz cálida— y la sección de la carta
   se da vuelta a papel claro. Es la carta impresa puesta sobre la mesa.
   Vale el salto de contraste porque separa de un golpe lo que se mira
   (el lugar) de lo que se lee (la comida).
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* superficie — el comedor */
  --comedor:      #171310;   /* madera de lenga en sombra: el fondo */
  --brasero:      #0F0C0A;   /* el mismo comedor, un tono más adentro */
  --mesa:         #221C16;   /* tarjetas y bloques */

  /* tinta sobre el comedor */
  --harina:       #F0E7D9;   /* blanco cálido de mantel */
  --vapor:        #A69884;   /* texto secundario: el vapor de las termas */

  /* acentos */
  --cobre:        #CE7C3C;   /* la olla de cobre — acento principal */
  --merken:       #B8402A;   /* merkén ahumado — llamados a la acción */
  --calafquen:    #4A7B7C;   /* el lago al atardecer — sólo gráfico */
  --nalca:        #7A874F;   /* verde húmedo del bosque valdiviano */

  /* la carta, en papel */
  --papel:        #EDE4D3;
  --papel-hondo:  #E2D7C2;
  --tinta:        #1E1913;
  --tinta-suave:  #5A5044;
  --cobre-hondo:  #8A4A1C;   /* el mismo cobre, legible sobre papel */

  /* tipografía
     Petrona (Eduardo Rodríguez Tunni) y Chivo Mono (Omnibus-Type) son
     tipos rioplatenses: la misma escuela editorial que el sur. Hanken
     Grotesk carga el texto largo sin sonar a interfaz de aplicación. */
  --display: "Petrona", "Georgia", serif;
  --cuerpo:  "Hanken Grotesk", "Segoe UI", sans-serif;
  --dato:    "Chivo Mono", ui-monospace, "Consolas", monospace;

  /* medidas */
  --ancho: 1180px;
  --radio: 4px;                /* casi recto: esto es papel, no una app */
  --borde: 1px solid color-mix(in srgb, var(--harina) 14%, transparent);
}

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

/* Declarado a mano: sin esto, cualquier regla con display le gana al
   atributo hidden y el cartel de "abierto ahora" aparece siempre. */
[hidden]{ display:none !important; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  /* Sin esto el navegador dibuja los controles nativos en claro sobre una
     página oscura: la barra de scroll queda blanca, y el selector de fecha
     y el desplegable de la hora salen con fondo blanco y letra clara,
     ilegibles. Es una línea y arregla el formulario entero. */
  color-scheme:dark;
}

body{
  margin:0;
  background:var(--comedor);
  color:var(--harina);
  font-family:var(--cuerpo);
  font-size:clamp(1rem, .96rem + .22vw, 1.09rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* El <meta> lleva viewport-fit=cover, así que en un iPhone el contenido
     pasa por debajo de la muesca y de la barra de gestos. Esto lo devuelve
     adentro; en cualquier otro equipo los valores son cero. */
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
  padding-bottom:env(safe-area-inset-bottom);
}

/* La cabecera queda fija arriba: sin este margen, al tocar un enlace del
   menú el título de la sección aterriza tapado por la propia cabecera. */
:target,
.seccion[id],
.portada[id]{ scroll-margin-top:5.5rem; }

/* Quita el retardo de 300 ms que el navegador móvil deja esperando un
   segundo toque para hacer zoom. El zoom con dos dedos sigue disponible. */
a, button, input, select, textarea, label{ touch-action:manipulation; }

img,svg{ max-width:100%; }

a{ color:var(--cobre); }

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

.saltar{
  position:absolute; left:-9999px; top:0; z-index:50;
  background:var(--cobre); color:var(--brasero);
  padding:.7rem 1.2rem; font-weight:600; text-decoration:none;
}
.saltar:focus{ left:.5rem; top:.5rem; }

.caja{ width:min(100% - 2.5rem, var(--ancho)); margin-inline:auto; }
.caja--angosta{ width:min(100% - 2.5rem, 720px); }
.caja--doble{ display:grid; gap:3rem; }
@media (min-width:900px){
  .caja--doble{ grid-template-columns:1.05fr .95fr; gap:4.5rem; align-items:start; }
}

.ojo{
  font-family:var(--dato);
  font-size:.7rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--cobre);
  margin:0 0 1rem;
}
.ojo--claro{ color:var(--cobre); }

/* ── marcador de dato de ejemplo ─────────────────────────────────
   Todo lo que lleva .ej es relleno. Se ve a simple vista para poder
   decir en la reunión "esto se completa con sus datos reales", y se
   borra junto con la clase cuando el dato llega.                    */
.ej{
  position:relative;
  outline:1px dashed color-mix(in srgb, var(--cobre) 50%, transparent);
  outline-offset:12px;
  border-radius:2px;
}
.ej::after{
  content:"ejemplo";
  position:absolute; top:-12px; right:-12px;
  transform:translateY(-100%);
  font-family:var(--dato); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cobre);
  background:var(--comedor);
  padding:0 .45rem;
  pointer-events:none;
}
.ej--inline{
  display:inline; outline-offset:3px; color:var(--cobre);
  font-weight:600;
}
.ej--inline::after{ content:none; }

/* Sobre la banda de papel el marcador cambia de fondo y de tono, si no
   el rótulo "ejemplo" queda flotando sobre un rectángulo oscuro. */
.carta .ej{ outline-color:color-mix(in srgb, var(--cobre-hondo) 55%, transparent); }
.carta .ej::after{ color:var(--cobre-hondo); background:var(--papel); }

/* ── banda de propuesta ──────────────────────────────────────────── */
.propuesta{
  background:var(--merken);
  color:#FBF1E6;
}
.propuesta__cinta{
  width:min(100% - 2.5rem, var(--ancho));
  margin-inline:auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.2rem;
  padding:.75rem 0;
}
.propuesta__marca{
  font-family:var(--dato); font-size:.66rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  border:1px solid color-mix(in srgb, #FBF1E6 45%, transparent);
  padding:.22rem .55rem;
}
.propuesta__txt{ margin:0; font-size:.88rem; flex:1 1 20rem; }
.propuesta__txt code{ font-family:var(--dato); font-size:.92em; }
.propuesta__link{
  color:#FBF1E6; font-weight:600; font-size:.86rem;
  text-underline-offset:4px;
}

/* ── cabecera ────────────────────────────────────────────────────── */
.cabecera{
  position:sticky; top:0; z-index:30;
  background:color-mix(in srgb, var(--comedor) 92%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:var(--borde);
}
.cabecera__caja{
  width:min(100% - 2.5rem, var(--ancho)); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:.7rem 0;
}
.marca{
  display:flex; align-items:center; gap:.7rem;
  color:var(--harina); text-decoration:none;
}
.marca__icono{ width:30px; height:30px; color:var(--cobre); flex:none; }
.marca__txt{
  display:flex; flex-direction:column; line-height:1.1;
  font-family:var(--display); font-weight:600; font-size:1.22rem;
  letter-spacing:-.01em;
}
.marca__txt small{
  font-family:var(--dato); font-weight:400; font-size:.6rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--vapor);
  margin-top:.18rem;
}
.nav{ display:flex; align-items:center; gap:.2rem; }
.nav a{
  color:var(--vapor); text-decoration:none;
  font-size:.88rem; font-weight:500;
  padding:.55rem .7rem; border-radius:var(--radio);
  transition:color .2s ease, background-color .2s ease;
}
.nav a:hover{ color:var(--harina); background:color-mix(in srgb, var(--harina) 7%, transparent); }
.nav a[aria-current="true"]{ color:var(--cobre); }
.nav__cta{
  color:var(--harina) !important;
  border:1px solid var(--cobre);
  margin-left:.4rem;
}
.nav__cta:hover{ background:var(--cobre) !important; color:var(--brasero) !important; }

/* ── botones ─────────────────────────────────────────────────────── */
.boton{
  display:inline-block; text-decoration:none;
  font-family:var(--cuerpo); font-size:.95rem; font-weight:600;
  padding:.85rem 1.5rem; border-radius:var(--radio);
  border:1px solid transparent; cursor:pointer;
  transition:transform .18s ease, background-color .2s ease, border-color .2s ease;
}
.boton:hover{ transform:translateY(-2px); }
.boton--merken{ background:var(--merken); color:#FBF1E6; }
.boton--merken:hover{ background:#C9482F; }
.boton--cobre{ background:var(--cobre); color:var(--brasero); }
.boton--cobre:hover{ background:#DC8A48; }
.boton--linea{ border-color:color-mix(in srgb, var(--harina) 32%, transparent); color:var(--harina); }
.boton--linea:hover{ border-color:var(--harina); }
.boton--linea-claro{ border-color:color-mix(in srgb, var(--harina) 40%, transparent); color:var(--harina); }
.boton--linea-claro:hover{ border-color:var(--harina); }

/* ── portada ─────────────────────────────────────────────────────── */
.portada{
  position:relative;
  padding:clamp(3.5rem,9vw,7rem) 0 clamp(9rem,16vw,13rem);
  overflow:hidden;
}
.portada__caja{
  width:min(100% - 2.5rem, var(--ancho)); margin-inline:auto;
  position:relative; z-index:3;
}

/* La foto del comedor detrás de todo. Van dos veladuras encima: una
   vertical, que la hunde arriba y abajo, y una radial pegada a la
   izquierda, que es donde cae el título. Sin la radial el titular se
   lee sobre una ventana iluminada y se pierde la primera línea. */
.portada__fondo{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.portada__fondo img{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 38%;
  opacity:.34; filter:saturate(.72) contrast(1.04);
}
.portada__fondo::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 8% 42%, var(--comedor) 20%, transparent 74%),
    linear-gradient(180deg,
      var(--comedor) 0%,
      color-mix(in srgb, var(--comedor) 62%, transparent) 42%,
      var(--comedor) 94%);
}

/* Las brasas. El canvas ocupa toda la portada y no atrapa el cursor. */
.brasas{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%;
  pointer-events:none;
}

.portada__lienzo{ display:grid; gap:clamp(2.2rem,5vw,3rem); align-items:center; }
@media (min-width:980px){
  .portada__lienzo{
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:clamp(2.5rem,4vw,4rem);
  }
  /* En dos columnas el título llena su propia columna, así que suelta el
     corte de 16ch — pero también tiene que bajar de tamaño: los 5rem del
     ancho completo dejaban «decir» solo en un renglón. */
  .portada__lienzo .portada__titulo{
    max-width:none;
    font-size:clamp(2.4rem, 1rem + 2.7vw, 3.6rem);
  }
}

/* Composición de portada: la foto alta a la derecha y la chica montada
   sobre su esquina. Todo en porcentajes, así que encoge sola. */
.portada__fotos{ position:relative; max-width:460px; margin-inline:auto; width:100%; }
.portada__fotos .foto{
  margin:0; overflow:hidden;
  border-radius:var(--radio);
  border:1px solid color-mix(in srgb, var(--harina) 15%, transparent);
  background:var(--mesa);
  box-shadow:0 26px 60px -22px rgba(0,0,0,.8);
  /* Lo mueve main.js con el cursor. Si no corre, vale cero y no pasa nada. */
  transform:translate3d(calc(var(--dx,0) * 1px), calc(var(--dy,0) * 1px), 0);
  transition:transform .5s cubic-bezier(.22,.8,.3,1);
}
.portada__fotos .foto img{ display:block; width:100%; height:100%; object-fit:cover; }
.foto--alta{ width:78%; margin-left:auto !important; aspect-ratio:4/5; }
.foto--chica{
  position:absolute; left:0; bottom:0;
  width:44%; aspect-ratio:1/1;
  /* El aire que separa las dos fotos es el propio fondo del comedor. */
  outline:5px solid var(--comedor);
}
.portada__pie{
  width:54%; margin:1rem 0 0 auto;
  text-align:right;
  font-family:var(--dato); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--vapor);
}
/* En el teléfono la foto chica sale de encima de la otra y se pone al
   lado: montada, su pie de foto le quedaba escrito encima. */
@media (max-width:560px){
  .portada__fotos{
    max-width:420px;
    display:grid; grid-template-columns:1.2fr .8fr; gap:.55rem;
    align-items:end;
  }
  .foto--alta{ width:100%; margin-inline:0 !important; aspect-ratio:3/4; }
  .foto--chica{ position:static; width:100%; aspect-ratio:1/1; outline:0; }
  .portada__pie{ grid-column:1 / -1; width:100%; text-align:left; margin:.15rem 0 0; }
}

.portada__titulo{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(2.5rem, 1.4rem + 4.6vw, 5rem);
  line-height:1.02;
  letter-spacing:-.022em;
  margin:0 0 1.4rem;
  max-width:16ch;
}
.portada__titulo em{
  font-style:italic; font-weight:500;
  color:var(--cobre);
}
.portada__bajada{
  color:var(--vapor);
  font-size:clamp(1.02rem,.98rem + .3vw,1.18rem);
  max-width:50ch; margin:0 0 2.2rem;
}
.portada__acciones{ display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:3.2rem; }

.credenciales{
  display:flex; flex-wrap:wrap; gap:1.6rem 3rem;
  margin:0; padding-top:2rem;
  border-top:var(--borde);
  max-width:52rem;
}
.credenciales__item dt{
  font-family:var(--dato); font-size:.64rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--vapor); margin-bottom:.35rem;
}
.credenciales__item dd{
  margin:0; display:flex; align-items:baseline; gap:.55rem;
}
.credenciales__item strong{
  font-family:var(--display); font-size:1.6rem; font-weight:600;
  line-height:1;
}
.credenciales__item span{ font-size:.82rem; color:var(--vapor); }

/* horizonte grabado */
.horizonte{
  position:absolute; inset:auto 0 0 0; z-index:1;
  height:clamp(140px,22vw,230px);
  pointer-events:none;
}
.horizonte svg{ width:100%; height:100%; display:block; }
.horizonte__lejos{ fill:color-mix(in srgb, var(--harina) 6%, transparent); }
.horizonte__volcan{ fill:color-mix(in srgb, var(--harina) 10%, transparent); }
.horizonte__nieve{ fill:color-mix(in srgb, var(--harina) 22%, transparent); }
.horizonte__fumarola,
.horizonte__vapor path{
  fill:none;
  stroke:color-mix(in srgb, var(--harina) 16%, transparent);
  stroke-width:1.6; stroke-linecap:round;
}
.horizonte__agua{ fill:color-mix(in srgb, var(--calafquen) 26%, transparent); }
.horizonte__olas path{
  fill:none;
  stroke:color-mix(in srgb, var(--harina) 15%, transparent);
  stroke-width:1.4; stroke-linecap:round;
}

/* ── secciones ───────────────────────────────────────────────────── */
.seccion{ padding:clamp(3.5rem,8vw,6.5rem) 0; }
.titular{ max-width:60ch; margin:0 auto clamp(2.5rem,5vw,3.5rem); text-align:center; }
.titular--izq{ margin-inline:0; text-align:left; }
.titular h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.75rem,1.3rem + 2vw,2.75rem);
  line-height:1.12; letter-spacing:-.018em;
  margin:0 0 1rem;
}
.titular__bajada{ color:var(--vapor); margin:0; }

/* Reparte las líneas de los títulos para que no quede una palabra sola
   colgando en el último renglón. El navegador que no lo entienda lo
   ignora y el título se ve como siempre. */
.titular h2,
.cita p,
.hablemos__titulo{ text-wrap:balance; }

/* ── la casa ─────────────────────────────────────────────────────── */
.casa{ background:var(--brasero); }
.casa__texto p{ margin:0 0 1.15rem; }
.casa__entrada{
  font-family:var(--display);
  font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);
  line-height:1.45;
  color:var(--harina);
}
.casa__texto p:not(.casa__entrada){ color:var(--vapor); }

.cita{
  margin:2.8rem 0 0; padding:1.6rem 0 0;
  border-top:2px solid var(--cobre);
}
.cita p{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.3rem,1.1rem + .9vw,1.75rem);
  line-height:1.25; margin:0 0 .7rem;
}
.cita cite{
  font-style:normal; font-size:.9rem; color:var(--vapor);
  display:block; max-width:46ch;
}

/* ── la carta: la banda de papel ─────────────────────────────────── */
.carta{
  background:var(--papel);
  color:var(--tinta);
}
.carta .ojo{ color:var(--cobre-hondo); }
.carta .titular__bajada{ color:var(--tinta-suave); }

.carta__pieza{ display:grid; gap:clamp(2.5rem,5vw,3.5rem); }

/* Sin esto la página entera se desplaza de lado en el teléfono. Un hijo
   de grid no baja de su ancho intrínseco —min-width vale auto—, así que
   el min-width:660px del dibujo estira la columna hasta 660 px en vez de
   deslizarse dentro de su marco. El min-width:0 le devuelve el permiso
   de encogerse y recién ahí el overflow-x:auto del lienzo hace su pega. */
.carta__pieza > *{ min-width:0; }

/* el corte del valle */
.corte{ margin:0; min-width:0; }
.corte__pista{
  display:none;
  font-family:var(--dato); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--tinta-suave);
  margin:0 0 .6rem;
}
.corte__lienzo{
  border:1px solid color-mix(in srgb, var(--tinta) 22%, transparent);
  background:var(--papel);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.corte__lienzo svg{ display:block; width:100%; min-width:660px; }

.corte__volcan{ fill:color-mix(in srgb, var(--tinta) 9%, transparent); }
.corte__nieve{ fill:var(--papel); }
.corte__agua{ fill:color-mix(in srgb, var(--calafquen) 24%, transparent); }
.corte__olas path{
  fill:none; stroke:color-mix(in srgb, var(--tinta) 30%, transparent);
  stroke-width:1.3; stroke-linecap:round;
}
.corte__tierra{ fill:color-mix(in srgb, var(--tinta) 7%, transparent); }
.corte__suelo{
  fill:none; stroke:var(--tinta); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.corte__arena{ fill:color-mix(in srgb, var(--tinta) 55%, transparent); }
.corte__pueblo path{ fill:none; stroke:var(--tinta); stroke-width:1.5; stroke-linejoin:round; }
.corte__surcos path,
.corte__cerco path{
  fill:none; stroke:color-mix(in srgb, var(--tinta) 62%, transparent);
  stroke-width:1.5; stroke-linecap:round;
}
.corte__bosque path{ fill:none; stroke:var(--nalca); stroke-width:1.5; stroke-linejoin:round; }
.corte__pozon ellipse{
  fill:color-mix(in srgb, var(--calafquen) 32%, transparent);
  stroke:color-mix(in srgb, var(--tinta) 45%, transparent); stroke-width:1.2;
}
.corte__vapor path{
  fill:none; stroke:color-mix(in srgb, var(--tinta) 34%, transparent);
  stroke-width:1.4; stroke-linecap:round;
}

.corte__pin line{ stroke:color-mix(in srgb, var(--tinta) 38%, transparent); stroke-width:1.2; stroke-dasharray:3 4; }
.corte__pin circle{ fill:var(--cobre-hondo); }
.corte__pin--tenue circle{ fill:color-mix(in srgb, var(--tinta) 45%, transparent); }
.corte__num{
  fill:var(--papel); font-family:var(--dato); font-size:10px; font-weight:500;
  text-anchor:middle;
}
.corte__rot{
  fill:var(--tinta-suave); font-family:var(--dato); font-size:11px;
  letter-spacing:.12em; text-anchor:middle;
}
.corte__casa line{ stroke:var(--cobre-hondo); stroke-width:1.4; }
.corte__casa path,
.corte__casa rect{ fill:none; stroke:var(--cobre-hondo); stroke-width:1.8; stroke-linejoin:round; }
.corte__casa-rot{
  fill:var(--cobre-hondo); font-family:var(--display); font-size:17px; font-weight:700;
  letter-spacing:.06em; text-anchor:middle;
}
.corte__casa-sub{
  fill:var(--tinta-suave); font-family:var(--dato); font-size:10px;
  letter-spacing:.16em; text-anchor:middle;
}
.corte__borde{
  fill:color-mix(in srgb, var(--tinta) 48%, transparent);
  font-family:var(--dato); font-size:10px; letter-spacing:.16em;
}
.corte__borde--der{ text-anchor:end; }

/* la carta escrita */
.menu{
  display:grid; gap:2.2rem 3rem;
}
@media (min-width:780px){ .menu{ grid-template-columns:1fr 1fr; } }
.menu__grupo{ break-inside:avoid; }
.menu__titulo{
  font-family:var(--dato); font-size:.68rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--cobre-hondo);
  margin:0 0 1rem; padding-bottom:.5rem;
  border-bottom:1px solid color-mix(in srgb, var(--tinta) 20%, transparent);
}
.menu__lista{ list-style:none; margin:0; padding:0; display:grid; gap:1.1rem; }
.menu__lista li{ display:grid; grid-template-columns:1.65rem 1fr; gap:.75rem; }
.menu__origen{
  width:1.45rem; height:1.45rem; margin-top:.18rem;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--cobre-hondo); color:var(--papel);
  font-family:var(--dato); font-size:.68rem; font-weight:500;
}
.menu__plato{
  font-family:var(--display); font-weight:600; font-size:1.06rem;
  line-height:1.3; margin:0 0 .18rem;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem .7rem;
}
.menu__precio{
  font-family:var(--dato); font-size:.86rem; font-weight:400;
  color:var(--cobre-hondo); margin-left:auto;
}
.menu__nota{ margin:0; font-size:.88rem; line-height:1.5; color:var(--tinta-suave); }

.carta__pie{
  margin:clamp(2.5rem,5vw,3.5rem) auto 0;
  max-width:58ch; text-align:center;
  font-size:.92rem; color:var(--tinta-suave);
}

/* ── horario ─────────────────────────────────────────────────────── */
.semana{
  background:var(--mesa);
  border:var(--borde);
  border-radius:var(--radio);
  padding:clamp(1.4rem,3vw,2.2rem);
}
.semana__lista{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.semana__dia{
  display:grid;
  grid-template-columns:6.5rem 1fr auto;
  align-items:center; gap:1rem;
}
.semana__nom{ font-weight:600; font-size:.92rem; }
.semana__barra{
  position:relative; height:10px; border-radius:5px;
  background:color-mix(in srgb, var(--harina) 8%, transparent);
  overflow:hidden;
}
/* La pista completa es el día de 08:00 a 24:00. La franja marca la
   ventana abierta, así que jueves y viernes se ven un poco más largos
   sin que haya que leer los números. */
.semana__barra i{
  position:absolute; top:0; bottom:0;
  left:var(--desde); width:calc(var(--hasta) - var(--desde));
  background:linear-gradient(90deg, var(--cobre), var(--merken));
  border-radius:5px;
}
.semana__dia--largo .semana__barra i{
  background:linear-gradient(90deg, var(--cobre), #D0512F);
}
.semana__hora{
  font-family:var(--dato); font-size:.8rem; color:var(--vapor);
  white-space:nowrap;
}
.semana__nota{
  margin:1.5rem 0 0; padding-top:1.2rem;
  border-top:var(--borde);
  font-size:.88rem; color:var(--vapor);
}

.ahora{
  margin:1.6rem auto 0; max-width:44rem; text-align:center;
  font-family:var(--dato); font-size:.82rem; letter-spacing:.04em;
  color:var(--vapor);
}
.ahora b{ color:var(--nalca); font-weight:500; }
.ahora b.ahora--cerrado{ color:var(--cobre); }

/* ── dónde estamos ───────────────────────────────────────────────── */
.llegar{ background:var(--brasero); }
.distancias{ list-style:none; margin:0 0 1.8rem; padding:0; display:grid; gap:.1rem; }
.distancias li{
  display:grid; grid-template-columns:4.8rem 1fr; gap:1.2rem;
  align-items:baseline;
  padding:.85rem 0;
  border-bottom:var(--borde);
}
.distancias li:first-child{ border-top:var(--borde); }
.distancias__km{
  font-family:var(--dato); font-size:.88rem; font-weight:500;
  color:var(--cobre); text-align:right;
}
.distancias p{ margin:0; font-size:.94rem; color:var(--vapor); }
.distancias b{ color:var(--harina); font-weight:600; }
.llegar__nota{ font-size:.9rem; color:var(--vapor); margin:0; }

/* Las dos fotos de cómo reconocer el lugar. Van a la par apenas hay
   ancho: las dos son verticales y una encima de otra estiran la columna
   al doble de alto que el texto que tienen al lado. */
.fotos-llegar{ display:grid; gap:1.2rem; }
@media (min-width:480px){
  .fotos-llegar{ grid-template-columns:1fr 1fr; }
}

/* ── reservar mesa ───────────────────────────────────────────────── */
.form{
  display:grid; gap:1.1rem 1.4rem;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  background:var(--mesa);
  border:var(--borde); border-radius:var(--radio);
  padding:clamp(1.4rem,3vw,2.2rem);
}
.campo{ display:flex; flex-direction:column; gap:.4rem; }
.campo--ancho{ grid-column:1 / -1; }
.campo label{
  font-family:var(--dato); font-size:.66rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--vapor);
}
.campo__opc{ text-transform:none; letter-spacing:.02em; }
.campo input,
.campo select,
.campo textarea{
  font-family:var(--cuerpo); font-size:.98rem;
  color:var(--harina);
  background:var(--comedor);
  border:1px solid color-mix(in srgb, var(--harina) 18%, transparent);
  border-radius:var(--radio);
  padding:.72rem .85rem;
  width:100%;
  /* 44 px de alto mínimo: es lo que un dedo acierta sin pelear. */
  min-height:44px;
}
.campo textarea{ resize:vertical; line-height:1.5; }
.campo input::placeholder,
.campo textarea::placeholder{ color:color-mix(in srgb, var(--vapor) 70%, transparent); }
.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible{ border-color:var(--cobre); }

.form__pie{
  grid-column:1 / -1;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem; padding-top:.6rem;
  border-top:var(--borde);
}
.form__resumen{ margin:0; font-size:.88rem; color:var(--vapor); flex:1 1 16rem; }

.contacto{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  background:color-mix(in srgb, var(--harina) 12%, transparent);
  border:var(--borde); border-radius:var(--radio);
  overflow:hidden;
  margin-top:2.5rem;
}
.contacto__item{
  background:var(--comedor);
  display:flex; flex-direction:column; gap:.25rem;
  padding:1.1rem 1.2rem;
  text-decoration:none; color:var(--harina);
  min-height:44px;
}
a.contacto__item:hover{ background:var(--mesa); }
.contacto__item span{
  font-family:var(--dato); font-size:.62rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--vapor);
}
.contacto__item strong{ font-size:.95rem; font-weight:600; }
.contacto__aviso{
  margin:1rem 0 0; font-size:.83rem; color:var(--vapor);
  max-width:60ch;
}

/* ── la propuesta ────────────────────────────────────────────────── */
.hablemos{
  background:var(--brasero);
  border-top:1px solid color-mix(in srgb, var(--cobre) 30%, transparent);
}
.hablemos__titulo{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.85rem,1.3rem + 2.4vw,3rem);
  line-height:1.08; letter-spacing:-.02em;
  margin:0 0 clamp(2rem,4vw,3rem); max-width:20ch;
}
.hablemos__rejilla{
  display:grid; gap:2rem 3rem;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  margin-bottom:clamp(2.2rem,4vw,3rem);
}
.hablemos__rejilla h3{
  font-family:var(--dato); font-size:.68rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--cobre); margin:0 0 .7rem;
}
.hablemos__rejilla p{ margin:0; font-size:.94rem; color:var(--vapor); }
.hablemos__rejilla strong{ color:var(--harina); font-weight:600; }
.hablemos__acciones{ display:flex; flex-wrap:wrap; gap:.8rem; }

/* ── pie ─────────────────────────────────────────────────────────── */
.pie{ background:var(--comedor); border-top:var(--borde); padding:2.5rem 0; }
.caja--pie{ display:grid; gap:.7rem; }
.pie__marca{ margin:0; font-family:var(--display); font-weight:600; font-size:1.05rem; }
.pie__nota{ margin:0; font-size:.83rem; color:var(--vapor); max-width:70ch; }

/* ── postales ─────────────────────────────────────────────────────
   Un solo marco para toda foto que va acompañada de su pie, en la casa
   y en cómo llegar. Cinco maneras distintas de mostrar una foto es lo
   que hace que un sitio se vea armado por partes.                    */
.postal{ margin:0; }
.postal img{
  display:block; width:100%; height:auto;
  border-radius:var(--radio);
  border:1px solid color-mix(in srgb, var(--harina) 14%, transparent);
  background:var(--mesa);
}
/* Para las verticales que si no estiran la columna al doble del texto. */
.postal--recorte img{ aspect-ratio:4/3; object-fit:cover; object-position:50% 58%; }
.postal figcaption{
  margin-top:.7rem;
  font-size:.86rem; line-height:1.5; color:var(--vapor);
}
.postal figcaption b{ color:var(--harina); font-weight:600; }

/* ── la casa: texto y fotos ──────────────────────────────────────── */
.casa__reja{ display:grid; gap:2.5rem; }
@media (min-width:900px){
  .casa__reja{ grid-template-columns:1fr .8fr; gap:4rem; align-items:start; }
}
.casa__fotos{ display:grid; gap:1.6rem; align-content:start; }

/* ── bandas de scroll ─────────────────────────────────────────────
   Foto a todo el ancho con una frase encima. La imagen se monta un
   30 % más alta que el marco y main.js la corre dentro de ese sobrante
   a medida que pasa el scroll: el parallax es eso y nada más.

   El sobrante está repartido arriba y abajo a propósito. Así, si el
   script no corre o si el visitante pidió menos movimiento, la foto
   queda centrada y el recorte igual calza — no aparece nunca una
   franja vacía, que es la forma clásica en que esto se ve roto.    */
.banda{
  position:relative;
  min-height:clamp(300px, 42vw, 460px);
  display:grid; align-items:end;
  overflow:hidden;
  background:var(--brasero);
  isolation:isolate;
}
.banda--alta{ min-height:clamp(340px, 48vw, 540px); }
.banda__foto{ position:absolute; inset:0; z-index:0; }
.banda__foto img{
  position:absolute; left:0; top:-15%;
  width:100%; height:130%;
  object-fit:cover; object-position:50% 50%;
  transform:translate3d(0, calc(var(--corrida, 0) * 1px), 0);
}
.banda::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--comedor) 72%, transparent) 0%,
    color-mix(in srgb, var(--comedor) 28%, transparent) 38%,
    color-mix(in srgb, var(--comedor) 94%, transparent) 100%);
}
.banda__txt{
  position:relative; z-index:2;
  width:min(100% - 2.5rem, var(--ancho)); margin-inline:auto;
  padding-bottom:clamp(1.8rem,4vw,3rem);
}
.banda__frase{
  margin:0; max-width:24ch;
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.3rem,1.05rem + 1.3vw,2.05rem);
  line-height:1.22; letter-spacing:-.015em;
  text-wrap:balance;
  text-shadow:0 2px 26px rgba(0,0,0,.55);
}

/* ── el mosaico de platos ─────────────────────────────────────────
   Va dentro de la banda de papel: la sombra es de tinta, no de harina,
   o se ve un halo gris alrededor de cada foto.                      */
.mosaico{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill, minmax(148px,1fr));
}
@media (min-width:640px){
  .mosaico{ grid-template-columns:repeat(auto-fill, minmax(196px,1fr)); }
}
.plato{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:3/4;
  border-radius:var(--radio);
  background:var(--tinta);
  text-decoration:none;
  box-shadow:0 12px 26px -18px rgba(30,25,19,.85);
}
.plato img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.8,.3,1), filter .4s ease;
}
.plato:hover img,
.plato:focus-visible img{ transform:scale(1.06); filter:saturate(1.07); }
.plato__nom{
  position:absolute; inset:auto 0 0 0;
  padding:1.7rem .8rem .7rem;
  font-family:var(--dato); font-size:.66rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  color:#F7EFE3;
  background:linear-gradient(180deg, transparent, rgba(18,14,10,.88));
}
.carta__pie small{
  display:block; margin-top:.6rem;
  font-size:.82rem; color:color-mix(in srgb, var(--tinta-suave) 85%, transparent);
}

/* ── visor de fotos ──────────────────────────────────────────────── */
.visor{
  border:0; padding:0; background:transparent; color:var(--harina);
  max-width:min(100% - 2rem, 980px);
  max-height:calc(100dvh - 2rem);
  overflow:visible;
}
.visor::backdrop{ background:rgba(9,7,5,.9); }
.visor__cuerpo{ margin:0; }
.visor__cuerpo img{
  display:block; margin-inline:auto;
  max-width:100%; max-height:calc(100dvh - 9rem);
  border-radius:var(--radio);
  background:var(--mesa);
}
.visor__cuerpo figcaption{
  margin-top:.9rem; text-align:center;
  font-size:.9rem; color:var(--vapor);
  max-width:52ch; margin-inline:auto;
}
.visor__cerrar,
.visor__flechas button{
  position:fixed;
  display:grid; place-items:center;
  width:46px; height:46px;
  border:1px solid color-mix(in srgb, var(--harina) 25%, transparent);
  border-radius:50%;
  background:color-mix(in srgb, var(--comedor) 85%, transparent);
  color:var(--harina);
  font-size:1.6rem; line-height:1; cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease;
}
.visor__cerrar:hover,
.visor__flechas button:hover{ background:var(--cobre); color:var(--brasero); border-color:var(--cobre); }
.visor__cerrar{ top:1rem; right:1rem; font-size:1.8rem; }
.visor__flechas button{ top:50%; transform:translateY(-50%); font-size:2rem; }
.visor__flechas button[data-paso="-1"]{ left:1rem; }
.visor__flechas button[data-paso="1"]{ right:1rem; }

/* ── el logo en el pie ───────────────────────────────────────────── */
.pie__logo{
  width:66px; height:66px; border-radius:50%;
  object-fit:cover;
  border:1px solid color-mix(in srgb, var(--harina) 18%, transparent);
  margin-bottom:.3rem;
}

/* ── movimiento ──────────────────────────────────────────────────
   Dos mecanismos distintos, y la diferencia importa:

   · La PORTADA entra con @keyframes al cargar. No pasa por el
     IntersectionObserver a propósito. Un observer que no dispare —
     por la razón que sea— dejaría el primer pantallazo en blanco, y
     ese es el único error que un sitio comercial no puede cometer.
   · De la portada hacia abajo sí manda el observer, porque ahí el
     disparo depende del scroll de verdad.

   No entra GSAP: acá no hay pin, ni scrub, ni una línea de tiempo que
   orqueste varias cosas a la vez. Son fundidos y desplazamientos, y
   eso lo hace @keyframes por 0 KB.

   Los estados ocultos cuelgan de .js: si el script del <head> no
   corre, la página se ve entera, sólo que quieta.                  */

@keyframes entrar{
  from{ opacity:0; transform:translateY(20px); }
  to  { opacity:1; transform:none; }
}

/* Sin clase intermedia y sin JavaScript: la animación arranca sola en
   cuanto el navegador aplica esta hoja. Nada de requestAnimationFrame
   acá — Chrome no lo corre en pestañas de fondo, y este enlace se abre
   desde WhatsApp: se toca, se abre en otra pestaña, y una portada que
   dependiera de rAF quedaría en blanco hasta que la miren. */
.js .portada__titulo,
.js .portada__bajada,
.js .portada__acciones,
.js .credenciales{
  animation:entrar .78s cubic-bezier(.22,.8,.3,1) both;
}
.js .portada__titulo   { animation-delay:.04s; }
.js .portada__bajada   { animation-delay:.16s; }
.js .portada__acciones { animation-delay:.26s; }
.js .credenciales      { animation-delay:.36s; }

.js .revelar{ opacity:0; transform:translateY(22px); }
.js .revelar.visible{
  opacity:1; transform:none;
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.8,.3,1);
}
.js .revelar.visible.retardo-1{ transition-delay:.08s; }
.js .revelar.visible.retardo-2{ transition-delay:.16s; }
.js .revelar.visible.retardo-3{ transition-delay:.24s; }

@media (prefers-reduced-motion: reduce){
  /* Se apaga lo que se mueve solo. Los fundidos y los hover se dejan:
     apagarlos deja el sitio con cara de muerto — y en Windows esta
     preferencia viene activada de fábrica en muchas máquinas. */
  html{ scroll-behavior:auto; }
  .js .revelar{ transform:none; }
  .js .revelar.visible{ transition-duration:.3s; }
  .js .portada__titulo,
  .js .portada__bajada,
  .js .portada__acciones,
  .js .credenciales{ animation-duration:.3s; animation-delay:0s; }
  .boton:hover{ transform:none; }

  /* Las brasas no se dibujan y el parallax no se engancha: main.js lee
     esta misma preferencia y ni siquiera arranca. Acá se anula lo que
     quedó escrito en la hoja, que es la corrida de las bandas y el
     seguimiento del cursor en la portada. El zoom del hover en los
     platos se deja: es un hover, no algo que se mueva solo. */
  .banda__foto img,
  .portada__fotos .foto{ transform:none !important; }
}

/* ── móvil ───────────────────────────────────────────────────────── */
@media (max-width:640px){
  /* La cabecera pasa a dos filas y el menú se desliza de lado. Esconder
     todo salvo el botón de reserva deja a la gente sin manera de llegar
     a la carta desde un teléfono, que es donde se abre este enlace. */
  .cabecera__caja{ flex-wrap:wrap; gap:.3rem; padding:.6rem 0 .1rem; }
  .marca{ flex:1 1 auto; }
  .nav{
    flex:1 0 100%;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-inline:-1.25rem;
    padding:.1rem 1.25rem .5rem;
  }
  .nav::-webkit-scrollbar{ display:none; }
  .nav a{ flex:none; white-space:nowrap; padding:.7rem .8rem; }
  .nav__cta{ margin-left:.2rem; }

  .corte__pista{ display:block; }
  .credenciales{ gap:1.3rem 2rem; }
  .semana__dia{ grid-template-columns:5.2rem 1fr; row-gap:.2rem; }
  .semana__hora{ grid-column:2; font-size:.76rem; }
  .distancias li{ grid-template-columns:4.2rem 1fr; gap:.9rem; }

  .ej{ outline-offset:7px; }
  .ej::after{ top:-7px; right:-7px; }

  /* Las flechas del visor se van abajo: al costado quedan justo donde
     el pulgar arrastra para pasar de foto. */
  .visor__flechas button{ top:auto; bottom:1rem; transform:none; width:52px; height:52px; }
  .visor__flechas button[data-paso="-1"]{ left:1.2rem; }
  .visor__flechas button[data-paso="1"]{ right:1.2rem; }
  .visor__cerrar{ top:.7rem; right:.7rem; }
  .visor__cuerpo img{ max-height:calc(100dvh - 11rem); }
}