/* Sistema de diseño, portado del sitio original de Squarespace.

   Los valores NO son estimaciones: la paleta y la escala tipográfica salen del `site.css`
   del original, y las medidas de botones, header y formulario están medidas con computed
   styles sobre el sitio en vivo. Todo el detalle en `docs/relevamiento/README.md`.

   Viene de la v1 (Next + Tailwind) con tres cambios y ninguno de diseño:
     - sin `@import 'tailwindcss'` ni bloque `@theme`
     - sin `@layer`: el orden del archivo es el que manda
     - las familias apuntan a las fuentes autohospedadas, no a next/font

   Si algo acá cambia, tiene que cambiar porque lo dice el relevamiento. */

/* ============================================================================
   Sistema de diseño portado del sitio original de Squarespace.

   Los valores NO son estimaciones: la paleta y la escala tipográfica salen del
   `site.css` del sitio original, y las medidas de botones y header están medidas
   con computed styles sobre el sitio en vivo. Ver `docs/relevamiento/README.md`.

   Si algo acá cambia, tiene que cambiar porque lo dice el relevamiento.
   ============================================================================ */


:root {
  /* Tripletes crudos, para poder modular el alfa igual que el original. */
  /* Las dos familias del original. Autohospedadas en shared/assets/fonts/. */
  --font-heading: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;

  --cream-hsl: 42 35.71% 94.51%;
  --sand-hsl: 33.33 32.14% 89.02%;
  --tan-hsl: 30.73 22.65% 64.51%;
  --umber-hsl: 32.5 16% 29.41%;
  --espresso-hsl: 30 12.5% 18.82%;

  --max-page-width: 2000px;
  --page-padding: 4vw;

  /* Grid del Fluid Engine: 24 columnas en desktop, 8 en mobile, gap 11px. */
  --fe-gap: 11px;
  --fe-cols: 8;
  --fe-row-scale: 0.0215;

  /* Header: NO es sticky en el original (`tweak-fixed-header: false`).
     El alto no está hardcodeado: sale del alto del logo más el padding vertical,
     igual que en el original (`header-logo-height`, `header-vert-padding`).
     A 390px de ancho da 89.78px y a 1440px da 132.92px, que es lo medido. */
  --header-logo-height: 50px;
  --header-vert-padding: 5.1vw;
  --header-height: calc(var(--header-logo-height) + var(--header-vert-padding) * 2);
}

@media (width >= 768px) {
  :root {
    --fe-cols: 24;
    --header-logo-height: 107px;
    --header-vert-padding: 0.9vw;
  }
}

/* ---------------------------------------------------------------------------
   Temas de sección.

   Squarespace pinta cada sección con uno de cuatro temas y de ahí derivan el
   fondo, el color de texto y los botones. El mapeo está portado literal de
   `[data-section-theme="…"]` en `site.css`, no inventado:

     tema    fondo      texto      botón prim.   texto botón
     white   cream      espresso   espresso      cream
     light   sand       espresso   espresso      cream
     dark    umber      cream      tan           espresso
     black   espresso   cream      tan           espresso

   Los componentes no conocen colores: usan `var(--fg)`, `var(--bg)`, etc.
   --------------------------------------------------------------------------- */

[data-theme='white'],
[data-theme='light'] {
  --fg: hsl(var(--espresso-hsl));
  --fg-hsl: var(--espresso-hsl);
  --btn-bg: hsl(var(--espresso-hsl));
  --btn-fg: hsl(var(--cream-hsl));
  --btn-outline: hsl(var(--espresso-hsl));
  --link: hsl(var(--espresso-hsl));
  --rule: hsl(var(--espresso-hsl) / 0.25);
}

[data-theme='white'] {
  --bg: hsl(var(--cream-hsl));
}

[data-theme='light'] {
  --bg: hsl(var(--sand-hsl));
}

[data-theme='dark'],
[data-theme='black'] {
  --fg: hsl(var(--cream-hsl));
  --fg-hsl: var(--cream-hsl);
  --btn-bg: hsl(var(--tan-hsl));
  --btn-fg: hsl(var(--espresso-hsl));
  --btn-outline: hsl(var(--tan-hsl));
  --link: hsl(var(--tan-hsl));
  --rule: hsl(var(--cream-hsl) / 0.4);
}

[data-theme='dark'] {
  --bg: hsl(var(--umber-hsl));
}

[data-theme='black'] {
  --bg: hsl(var(--espresso-hsl));
}

/* ---------------------------------------------------------------------------
   Escala tipográfica.

   Es la fórmula de Squarespace copiada literal, con `V` = el valor del token.
   Reproduce el tamaño exacto en todo el rango de viewport: verificado en h1,
   que da 67.84px @1440w y 46.384px @390w/844h — clavado contra lo medido.

   Ojo con la rama mobile: depende de `100vh`, no de `100vw`. Es raro, pero es
   lo que hace el original, y cambiarlo por `vw` desalinea todos los headings.
   --------------------------------------------------------------------------- */

:root {
  /* Valores de la escala de Squarespace. */
  --v-h1: 4;
  --v-h2: 2.8;
  --v-h3: 2.2;
  --v-h4: 1.6;
  --v-large: 1.4;
  --v-normal: 1;
  --v-small: 0.9;

  /* Tamaños resueltos. La rama mobile depende de `100vh`, no de `100vw`: es raro,
     pero es lo que hace el original, y cambiarlo por `vw` desalinea todo. */
  --fs-h1: calc((var(--v-h1) - 1) * 0.012 * min(100vh, 900px) + 1rem);
  --fs-h2: calc((var(--v-h2) - 1) * 0.012 * min(100vh, 900px) + 1rem);
  --fs-h3: calc((var(--v-h3) - 1) * 0.012 * min(100vh, 900px) + 1rem);
  --fs-h4: calc((var(--v-h4) - 1) * 0.012 * min(100vh, 900px) + 1rem);
  --fs-large: calc((var(--v-large) - 1) * 0.012 * min(100vh, 900px) + 1rem);
  --fs-small: calc((var(--v-small) - 1) * 0.012 * min(100vh, 900px) + 1rem);

  /* El `line-height` de los headings NO es 1.2em plano: Squarespace lo aprieta a
     medida que el título crece, con esta fórmula (está en `site.css`):

         line-height: calc(1.2em * (1 + (1 - V) / 25))

     Para el h1 (V=4) da 1.056em → 71.64px a 1440px de ancho, que es lo medido en el
     original. Con 1.2em plano daban 81.4px y todos los títulos de dos líneas quedaban
     10px más altos, corriendo hacia abajo todo lo que seguía. */
  --lh-h1: calc(1.2em * (1 + (1 - var(--v-h1)) / 25));
  --lh-h2: calc(1.2em * (1 + (1 - var(--v-h2)) / 25));
  --lh-h3: calc(1.2em * (1 + (1 - var(--v-h3)) / 25));
  --lh-h4: calc(1.2em * (1 + (1 - var(--v-h4)) / 25));
}

@media (width >= 768px) {
  :root {
    --fs-h1: min(
      calc((var(--v-h1) - 1) * 1.2vw + 1rem),
      max(calc((var(--v-h1) - 1) * 0.012 * var(--max-page-width) + 1rem), calc(var(--v-h1) * 1rem))
    );
    --fs-h2: min(
      calc((var(--v-h2) - 1) * 1.2vw + 1rem),
      max(calc((var(--v-h2) - 1) * 0.012 * var(--max-page-width) + 1rem), calc(var(--v-h2) * 1rem))
    );
    --fs-h3: min(
      calc((var(--v-h3) - 1) * 1.2vw + 1rem),
      max(calc((var(--v-h3) - 1) * 0.012 * var(--max-page-width) + 1rem), calc(var(--v-h3) * 1rem))
    );
    --fs-h4: min(
      calc((var(--v-h4) - 1) * 1.2vw + 1rem),
      max(calc((var(--v-h4) - 1) * 0.012 * var(--max-page-width) + 1rem), calc(var(--v-h4) * 1rem))
    );
    --fs-large: min(
      calc((var(--v-large) - 1) * 1.2vw + 1rem),
      max(
        calc((var(--v-large) - 1) * 0.012 * var(--max-page-width) + 1rem),
        calc(var(--v-large) * 1rem)
      )
    );
    --fs-small: min(
      calc((var(--v-small) - 1) * 1.2vw + 1rem),
      max(
        calc((var(--v-small) - 1) * 0.012 * var(--max-page-width) + 1rem),
        calc(var(--v-small) * 1rem)
      )
    );
  }
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
}
h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}
h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}
h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
}
h5,
h6 {
  font-size: 1rem;
  line-height: 1.2em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: -0.02em;
  /* Sin `text-wrap: balance` a propósito: el original no lo usa y balancear cambia
     dónde cortan los títulos. El h1 de la home, por ejemplo, pasa de "Explore the
     Heart of Wine / Country" a "Explore the Heart / of Wine Country". */
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  /* Unitless a propósito. Con `1.5em` el body computa 24px y los hijos heredan ESE
     valor fijo, así que el texto chico (14.27px) también quedaba en 24px en lugar de
     21.4px. En un grid donde las filas crecen con el contenido eso corre todo lo que
     sigue: el párrafo de "Who we are" quedaba 10px más alto y arrastraba la sección. */
  line-height: 1.5;
  letter-spacing: 0;
  background-color: hsl(var(--cream-hsl));
  color: hsl(var(--espresso-hsl));
  -webkit-font-smoothing: antialiased;
}

/* El original no tiene ninguna animación de scroll ni de sección
   (`tweak-global-animations-enabled: false`). Se respeta: nada de reveals.
   Lo único que se anima son los hovers, y se cortan si el visitante pidió
   menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

:focus-visible {
  outline: 2px solid var(--btn-outline, currentColor);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Botones. Medidas tomadas con computed styles del original.
   --------------------------------------------------------------------------- */

/* Clases de tamaño, para cuando el nivel semántico y el tamaño visual no coinciden.
   El original mete dos `h1` en la home y salta de `h1` a `h4` en /stay; acá esos
   títulos son `h2` con la clase del tamaño que les corresponde: idéntico en pantalla,
   sin agujeros en la jerarquía.

   Van en la capa `components` a propósito: las capas ganan por orden, no por
   especificidad, así que `.t-h1` sobre un `<h2>` le gana al `h2` de la capa `base`
   sin depender del orden dentro del archivo ni pelear con el reset de Tailwind. */
.t-h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
}
.t-h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}
.t-h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}
.t-h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
}
.t-large {
  font-size: var(--fs-large);
}
.t-small {
  font-size: var(--fs-small);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 300px;
  border: 0 solid transparent;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.375;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  padding-inline: 2rem;
  padding-block: 1.15625rem; /* 18.5px → 59px de alto en mobile */
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  transition: opacity 0.15s ease;
  cursor: pointer;
}

@media (width >= 768px) {
  .btn {
    padding-block: 1.4375rem; /* 23px → 68px de alto en desktop */
  }
}

.btn:hover {
  opacity: 0.85;
}

/* Variante outline: la usa "WHATSAPP/PHONE" en contacto. */
.btn--outline {
  background-color: transparent;
  color: var(--btn-outline);
  border-width: 1px;
  border-color: var(--btn-outline);
  padding-block: 1.2rem;
}

.btn--outline:hover {
  background-color: var(--btn-outline);
  color: var(--bg);
  opacity: 1;
}

/* El submit del formulario es más bajo que un botón de bloque. */
.btn--submit {
  padding-block: 1.2rem;
}

/* --- Bloques de texto -----------------------------------------------------
   El ritmo vertical del rich text de Squarespace, medido en el original:
   16px entre párrafos y 32px cuando hay un heading de por medio. No es un
   detalle estético: en un grid donde las filas crecen con el contenido, 8px
   de más en un bloque corren todo lo que sigue y el diff se vuelve ruido. */
.rich > * + * {
  margin-top: 1rem;
}

/* El rich text del original va con `white-space: pre-wrap`, y no es un detalle inocuo:
   preserva los espacios que el editor dejó escritos. El rótulo de la home dice "SHOP "
   con un espacio al final, y como está centrado, ese espacio lo corre unos píxeles a la
   izquierda. Lo mismo con el doble espacio en "queso pecorino y  pan" del menú. */
.rich,
.rich h1,
.rich h2,
.rich h3,
.rich h4,
.rich p {
  white-space: pre-wrap;
}

.rich > * + :is(h1, h2, h3, h4, h5, h6),
.rich > :is(h1, h2, h3, h4, h5, h6) + * {
  margin-top: 2rem;
}

/* --- Formulario ------------------------------------------------------------
   Medidas del original: fondo transparente, borde de 1px del color de texto
   del tema (en contacto es cream, NO el tan que parece a baja resolución),
   radio 23.84px y padding 8px 15px, que dan 42px de alto. */
/* Medidas del formulario original, campo por campo (a 1440px):
     etiqueta   28px  (24px de línea + 4px de padding abajo)
     input      42px  (padding 8px 15px, radio 23.84px)
     textarea  100px  (alto fijo, no derivado de `rows`)
     entre campos      20px
     entre nombre/apellido  10px
   El formulario completo mide 505.8px. Importa al píxel porque comparte fila del grid
   con la foto de la derecha: si el formulario crece, la foto crece con él. */
.field-group {
  margin-bottom: 20px;
}

.field-label {
  display: block;
  padding-bottom: 4px;
  line-height: 1.5;
}

/* Etiquetas de los campos que van dentro del grupo "Name". En el original miden 27.4px
   (21.4 de línea + 2 de padding + 4 de margen arriba), no 25.4. */
.field-label--sub {
  margin-top: 4px;
  padding-bottom: 2px;
}

.field-required {
  opacity: 0.7;
}

/* Nombre y apellido quedan en dos columnas SIEMPRE, también a 390px. Apilarlos en
   mobile suma ~80px y corre la foto que comparte fila del grid. */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.field {
  /* `block` y no el `inline-block` por defecto: como elemento en línea, el textarea
     arrastra el hueco del descendente de su línea y suma ~7px invisibles debajo. */
  display: block;
  width: 100%;
  height: 42px;
  background-color: transparent;
  color: var(--fg);
  border: 1px solid var(--fg);
  border-radius: 23.84px;
  padding: 8px 15px;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
}

.field:focus {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

.field--textarea {
  height: 100px;
  resize: vertical;
}

.field-error {
  color: var(--fg);
  opacity: 0.9;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Grid del "Fluid Engine".

   Squarespace posiciona cada bloque con un `grid-area` distinto por breakpoint
   sobre un grid de 8 columnas (mobile) o 24 (desktop), más una columna de
   gutter a cada lado. Las medidas están verificadas contra el sitio en vivo:

     @1440×900  →  26 tracks: 46.59px + 24 × 44.66px + 46.59px, gap 11px
                   alto de fila base 28.47px
     @390×844   →  10 tracks: 12.39px + 8 × 33.27px + 12.39px, gap 11px
                   alto de fila base 24px

   Las filas son `minmax(base, auto)`: crecen si el contenido no entra, que es
   como el original consigue que un h1 largo empuje la sección.
   --------------------------------------------------------------------------- */

.fe-grid {
  --fe-container: min(var(--max-page-width), calc(100vw - var(--page-padding) * 2));
  display: grid;
  position: relative;
  row-gap: var(--fe-gap);
  column-gap: var(--fe-gap);
  /* Mobile: gutter de 6vw, 8 columnas. */
  grid-template-columns:
    minmax(calc(6vw - var(--fe-gap)), 1fr)
    repeat(8, minmax(0, calc((var(--max-page-width) - var(--fe-gap) * 7) / 8)))
    minmax(calc(6vw - var(--fe-gap)), 1fr);
  grid-template-rows: repeat(var(--fe-rows-mobile, 1), minmax(24px, auto));
  overflow-x: clip;
}

@media (width >= 768px) {
  .fe-grid {
    grid-template-columns:
      minmax(calc(var(--page-padding) - var(--fe-gap)), 1fr)
      repeat(24, minmax(0, calc((var(--fe-container) - var(--fe-gap) * 23) / 24)))
      minmax(calc(var(--page-padding) - var(--fe-gap)), 1fr);
    grid-template-rows: repeat(
      var(--fe-rows-desktop, 1),
      minmax(calc(var(--fe-container) * var(--fe-row-scale)), auto)
    );
  }
}

/* Secciones a sangre (la galería de /stay): sin gap y gutter completo, para
   que las imágenes se toquen y lleguen al borde. */
.fe-grid--bleed {
  --fe-gap: 0px;
  grid-template-columns:
    minmax(6vw, 1fr)
    repeat(8, minmax(0, 1fr))
    minmax(6vw, 1fr);
}

@media (width >= 768px) {
  .fe-grid--bleed {
    grid-template-columns:
      minmax(var(--page-padding), 1fr)
      repeat(24, minmax(0, calc(var(--fe-container) / 24)))
      minmax(var(--page-padding), 1fr);
  }
}

/* Una celda. `--ga-*` son los `grid-area` y `--va-*` la alineación vertical, ambos
   relevados del original y distintos entre mobile y desktop. */
.fe-cell {
  grid-area: var(--ga-m);
  display: flex;
  flex-direction: column;
  justify-content: var(--va-m, flex-start);
  min-width: 0;
}

@media (width >= 768px) {
  .fe-cell {
    grid-area: var(--ga-d, var(--ga-m));
    justify-content: var(--va-d, var(--va-m, flex-start));
  }
}

/* ============================================================================
   El menú del restaurante y las fotos de los platos.

   Único bloque del sitio que NO replica al original a propósito. El original
   apila las tres fotos de platos superpuestas y recortadas por el borde de la
   grilla; acá van en fila, alineadas y con el radio de las tarjetas de la home.
   Y las pestañas del menú, que en el original cambian de golpe, hacen un
   crossfade. Está anotado en docs/DIFERENCIAS.md.
   ============================================================================ */

.menu-tabs {
  width: 100%;
}

.menu-tabs__list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 48px;
}

/* El subrayado de la pestaña activa es un elemento propio que se DESPLAZA, en vez
   de un `text-decoration` que aparece en una pestaña y desaparece en otra. Se
   mueve con `transform`, que no dispara layout: la fila de pestañas no se mueve
   ni un píxel mientras el subrayado viaja. */
.menu-tabs__ind {
  position: absolute;
  bottom: -7px;
  left: 0;
  width: 1px;
  height: 1px;
  background-color: currentColor;
  transform-origin: left center;
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sin JavaScript no hay nada que medir, así que el indicador no existe y el
   subrayado lo pone la clase de la pestaña activa, como antes. */
.menu-tabs:not([data-enhanced]) .menu-tabs__ind {
  display: none;
}

.menu-tabs__panels {
  display: grid;
  /* `start` y no el `stretch` por defecto del grid: con los cuatro paneles en la
     misma celda, `stretch` los estira TODOS al alto del contenedor, y entonces medir
     el panel activo para fijar ese mismo alto devuelve el alto que ya tenía. El
     síntoma era un bloque clavado en 644px con 140px de hueco abajo. */
  align-items: start;
}

.menu-tabs[data-enhanced] .menu-tabs__panels {
  overflow: hidden;
  transition: height 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Con JS los cuatro paneles se apilan en la MISMA celda del grid, y el alto del
   contenedor lo fija el JS midiendo el panel activo, con transición.
   
   La alternativa era dejar el apilado sin alto explícito: ahí el bloque mide
   siempre lo que el panel MÁS alto, y como "Niños" tiene un plato y "Principales"
   cuatro, la pestaña corta quedaba con 370px de hueco muerto abajo. Animar el alto
   mueve el footer, sí, pero de forma legible en 280ms — que es cómo se comporta
   cualquier acordeón — en vez de dejar un agujero permanente.

   `visibility: hidden` y no `opacity: 0` a secas: lo primero saca el panel del
   árbol de accesibilidad, lo segundo lo deja navegable por lector de pantalla. */
.menu-tabs[data-enhanced] .menu-tabs__panels > [role='tabpanel'] {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 220ms ease, transform 220ms ease, visibility 220ms;
}

.menu-tabs[data-enhanced] .menu-tabs__panels > [role='tabpanel'][data-active] {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Los platos entran escalonados, pero SÓLO al cambiar de pestaña: el escalonado
   sale de una variable que pone el JS por índice. */
.menu-tabs[data-enhanced] [role='tabpanel'][data-active] li {
  animation: dish-in 320ms cubic-bezier(0.2, 0, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

@keyframes dish-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* La foto de un plato: caja igual para las tres, en fila, sin superponerse. */
.dish {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 20px;
}

/* Quien pidió menos movimiento no lo recibe. No es un detalle: para alguien con
   trastorno vestibular una animación de entrada es un síntoma, no un adorno. */
@media (prefers-reduced-motion: reduce) {
  .menu-tabs__ind,
  .menu-tabs[data-enhanced] .menu-tabs__panels {
    transition-duration: 1ms;
  }
  .menu-tabs[data-enhanced] .menu-tabs__panels > [role='tabpanel'] {
    transition: opacity 1ms linear, visibility 1ms;
    transform: none;
  }
  .menu-tabs[data-enhanced] [role='tabpanel'][data-active] li {
    animation: none;
  }
}

/* ============================================================================
   El footer.

   Rediseñado: ya no replica al original en ninguna de las cinco páginas, y por eso
   tampoco usa el grid del Fluid Engine. Calcar `grid-area` de 24 columnas sólo se
   justifica cuando hay posiciones relevadas que respetar; acá no hay ninguna, y un
   layout propio es lo que permite que el mismo markup se reordene entre breakpoints
   sin duplicar áreas.

   Qué se arregló del original: no tenía NINGÚN dato de contacto —ni teléfono, ni
   WhatsApp, ni mail— y la dirección colgaba debajo de "Seguinos", como si fuera una
   red social.

   El alto importa: `shared/tools/compare.mjs` descuenta el footer para medir la
   fidelidad del contenido, y usa un alto por breakpoint. Si este bloque cambia de
   alto, hay que actualizar `FOOTER_HEIGHT.replica` ahí.
   ============================================================================ */

.site-footer {
  background-color: var(--bg);
  color: var(--fg);
}

.site-footer__cols {
  display: grid;
  gap: 2rem var(--fe-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 2.5rem var(--page-padding);
}

/* La línea legal: separada por una regla del mismo color que el resto de las reglas
   del sitio, no por un cambio de fondo. Un footer con dos tonos de beige se ve como
   un error de render. */
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  align-items: baseline;
  padding: 1rem var(--page-padding);
  border-top: 1px solid hsl(var(--espresso-hsl) / 0.14);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  opacity: 0.75;
}

/* --- las columnas de información --- */

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}

/* La marca ocupa las dos columnas en mobile: el logo no entra a la mitad del ancho
   de un teléfono sin quedar ilegible. */
.footer-col--brand {
  grid-column: 1 / -1;
  gap: 1rem;
}

.footer-logo {
  width: auto;
  height: 62px;
  max-width: 100%;
}

.footer-address {
  display: flex;
  flex-direction: column;
  font-style: normal;
  line-height: var(--lh-small);
  font-size: var(--fs-small);
}

.footer-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* El heading no aporta color propio: es una etiqueta, no un título de sección. */
  opacity: 0.65;
}

.footer-col--social {
  grid-column: 1 / -1;
}

.footer-col--social .footer-list {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.footer-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  min-width: 0;
}

/* Los enlaces del footer: subrayado al pasar y no al revés. En el original están todos
   subrayados de entrada, y una columna de cinco items subrayados se lee como un bloque
   de texto tachado más que como una lista. */
.footer-link {
  text-decoration: none;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
  transition: opacity 140ms ease;
}

.footer-link:hover,
.footer-link:focus-visible {
  text-decoration: underline;
}

/* El mail es largo y no puede desbordar la columna en un teléfono. */
.footer-link--mail {
  overflow-wrap: anywhere;
}

/* "Cómo llegar" lleva una flecha que se corre al pasar: es la única acción del bloque
   de la marca y conviene que se lea como acción. */
.footer-link--arrow::after {
  content: ' →';
  display: inline-block;
  transition: transform 160ms ease;
}

.footer-link--arrow:hover::after,
.footer-link--arrow:focus-visible::after {
  transform: translateX(3px);
}

/* --- desktop ---------------------------------------------------------------------
   El breakpoint es 900px y no los 768px del resto del sitio: entre 768 y 900 las cuatro
   columnas dejan la del mail en ~120px y el mail se parte en cuatro líneas. */
@media (width >= 900px) {
  .site-footer__cols {
    /* La marca más ancha que las tres columnas de links, y "Contacto" más ancha que
       las otras dos porque lleva el mail, que es la cadena más larga del footer. */
    grid-template-columns: 1.7fr 1fr 1.4fr 1fr;
    gap: var(--fe-gap);
    align-items: start;
  }

  /* Las dos columnas que en mobile ocupan el ancho entero vuelven a ser una columna
     cada una. Sin resetear ésta, "Seguinos" seguía spanneando 1/-1 y se caía a una
     fila nueva arrancando en la primera columna, debajo de la marca. */
  .site-footer__cols > .footer-col--brand,
  .site-footer__cols > .footer-col--social {
    grid-column: auto;
  }

  .footer-col--social .footer-list {
    /* En una columna propia y angosta, las dos redes van una debajo de la otra. */
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-link,
  .footer-link--arrow::after {
    transition: none;
  }
  .footer-link--arrow:hover::after {
    transform: none;
  }
}


/* ============================================================================
   Cabañas: las tarjetas de /quedate/ y la página de cada una con su calendario.

   No están en el relevamiento: el original tenía una sola barra de búsqueda de
   Hostaway. El calendario del motor es por listing y admite uno por página, así que
   cada cabaña tiene su página y /quedate/ elige entre ellas. Ver docs/DIFERENCIAS.md.
   ============================================================================ */

.cabins-wrap,
.cabin-book {
  margin-inline: auto;
  padding-inline: var(--page-padding);
}
.cabins-wrap {
  max-width: var(--max-page-width);
}
.cabins-wrap > h2 {
  margin-bottom: 2rem;
}

.cabin-cards {
  display: grid;
  gap: var(--fe-gap);
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (width >= 600px) {
  .cabin-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (width >= 1200px) {
  .cabin-cards { grid-template-columns: repeat(5, 1fr); }
}

.cabin-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.cabin-card .slides__stage {
  aspect-ratio: 4 / 5;
  border-radius: 20px;   /* el de las tarjetas de la home */
  margin-bottom: 0.4rem;
}
/* El nombre es el link, y su `::after` cubre el texto de la tarjeta entero: el «Ver
   disponibilidad» se toca igual que antes, sin ser un segundo link al mismo lugar. */
.cabin-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.cabin-card__name a {
  text-decoration: none;
  color: inherit;
}
.cabin-card__name a::after {
  content: '';
  position: absolute;
  inset: 0;
}
.cabin-card__body:hover .cabin-card__cta {
  text-decoration-thickness: 2px;
}
/* Ahora es un `h3` (bajo el «Reservá nuestras cabañas»); se ve como el `span` que era. */
.cabin-card__name {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: inherit;
  letter-spacing: inherit;
}
.cabin-card__cta {
  font-size: var(--fs-small);
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

.cabin-hero {
  max-width: var(--max-page-width);
  margin-inline: auto;
  padding-inline: var(--page-padding);
  min-height: 34vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1rem;
}
.cabin-hero__back {
  font-size: var(--fs-small);
  text-decoration: none;
}
.cabin-hero__back:hover {
  opacity: 0.7;
}

/* La galería y la reserva, en la misma sección. Debajo de 1200px, una debajo de la otra;
   desde ahí, la galería a la izquierda y la reserva en una columna fija a la derecha, que
   acompaña al scroll (el header no es fijo, así que basta con un margen arriba).
   El ancho de la columna lo manda el widget: arriba de 992px de ventana pinta el mes
   con un ancho fijo de 428px (308 del mes + 60 de padding por lado) y no se achica con
   su contenedor. Pisar su padding exigiría apuntar a sus clases internas, que cambian
   con cada versión de Hostaway; es más sano darle el lugar. */
.cabin-book {
  max-width: var(--max-page-width);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}
@media (width >= 1200px) {
  .cabin-book {
    grid-template-columns: minmax(0, 1fr) 480px;
    gap: 3rem;
    align-items: start;
  }
  .cabin-book .cabin-cal {
    position: sticky;
    top: 2rem;
  }
}
.cabin-cal {
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.75rem 1.5rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: 20px;
}
/* El widget pinta su propio alto; esto sólo reserva algo mientras carga, para que el
   footer no salte cuando aparece. */
#hostaway-calendar-widget {
  min-height: 420px;
}
@media (width > 992px) {
  #hostaway-calendar-widget {
    width: 428px;
    margin-inline: auto;
  }
}

/* El aviso de la seña antes del checkout (lo abre site.js). `showModal` lo pone en el
   top layer y lo centra con `margin: auto`, que el reset global pisa: sin devolverlo
   queda pegado arriba a la izquierda. Las variables de color las hereda igual de la
   sección. */
.booking-notice {
  margin: auto;
  width: min(32rem, calc(100vw - 2 * var(--page-padding)));
  max-width: none;
  padding: 2rem;
  border: 0;
  border-radius: 20px;
  background: #fff;
  color: hsl(var(--espresso-hsl));
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.3);
  text-align: center;
}
.booking-notice::backdrop {
  background: rgb(0 0 0 / 0.6);
}
.booking-notice h2 {
  margin-bottom: 1.25rem;
  letter-spacing: 0.08em;
}
.booking-notice p + p {
  margin-top: 0.75rem;
}
.booking-notice a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}
.booking-notice form {
  margin-top: 1.75rem;
}
@media (width < 600px) {
  .booking-notice { padding: 1.5rem; }
  .booking-notice .btn { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Fotos de las cabañas (`data-slides`): un componente, dos presentaciones.

   La base es CSS puro y anda sin JavaScript: una pista horizontal con scroll-snap, una
   foto por pantalla, que se desliza con el dedo. Todo lo demás (flechas, puntos,
   contador, miniaturas) sale en el HTML pero escondido hasta que site.js marca el
   bloque con `data-enhanced`.

   La tarjeta replica la galería del motor de Hostaway, medida con computed styles
   sobre reservations.rincondelmalbec.com: flechas de 32px, puntos de 6px cada 11px en
   una ventana de 55px, la misma curva. La página de la cabaña usa la misma familia,
   más grande y siempre visible.
   --------------------------------------------------------------------------- */

.slides__stage {
  position: relative;
  overflow: hidden;
  /* Sin esto Safari no recorta la pista que scrollea por el `border-radius`. */
  isolation: isolate;
}
.slides__track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.slides__track::-webkit-scrollbar {
  display: none;
}
/* `scroll-snap-stop` no está en el de Hostaway: sin él, un deslizamiento rápido con el
   dedo se saltea tres fotos, y en una tarjeta de diez eso es perder la mitad. */
.slides__slide {
  position: relative;
  display: block;
  flex: 0 0 100%;
  min-width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.slides:not([data-enhanced]) .slides__arrow,
.slides:not([data-enhanced]) .slides__dots,
.slides:not([data-enhanced]) .slides__count,
.slides:not([data-enhanced]) .slides__thumbs {
  display: none;
}

/* --- flechas --- */
.slides__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgb(0 0 0 / 0.08);
  background: rgb(255 255 255 / 0.9);
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.18);
  color: #222;
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease,
    visibility 0s;
}
.slides__arrow svg {
  width: auto;
  height: 10px;
}
.slides__arrow--prev { left: 12px; }
.slides__arrow--next { right: 12px; }
.slides__arrow:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.06);
}
/* En la primera foto no hay «anterior» y en la última no hay «siguiente». `visibility`
   y no sólo opacidad: un botón invisible no puede quedar en el orden de tabulación.
   El `visibility` llega 0.4s tarde a propósito: debajo de la flecha está el link de la
   foto, y sin la demora el segundo clic de un doble clic en «siguiente» sobre la última
   foto atraviesa la flecha y abre la cabaña. */
.slides__arrow[data-off] {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s, 0s, 0s, 0.4s;
}

/* En la tarjeta, como en Hostaway, aparecen al pasar el mouse (o al llegarles con el
   teclado), y no existen por debajo de 62rem: en un teléfono la foto se desliza. */
[data-slides='card'] .slides__arrow {
  opacity: 0;
}
.cabin-card:hover .slides__arrow:not([data-off]),
.cabin-card:focus-within .slides__arrow:not([data-off]) {
  opacity: 1;
}
@media (width < 62rem) {
  [data-slides='card'] .slides__arrow { display: none; }
}

/* --- puntos (sólo la tarjeta) ---
   Una ventana de cinco puntos que se corre cuando la foto activa pasa del tercero; el
   corrimiento lo calcula site.js. La sombra no está en Hostaway: sin ella, un punto
   blanco sobre una pared encalada no se ve. */
.slides__dots {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 2;
  max-width: 55px;
  padding: 12px 0;
  overflow: hidden;
  transform: translateX(-50%);
  pointer-events: none;
}
.slides__dots-strip {
  display: flex;
  transition: transform 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.slides__dot {
  flex: none;
  width: 6px;
  height: 6px;
  margin: 0 2.5px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.6;
  box-shadow: 0 0 2px rgb(0 0 0 / 0.35);
  transition: opacity 0.2s ease;
}
.slides__dot[data-on] {
  opacity: 1;
}

/* --- la galería de la página de cada cabaña ---
   El escenario es 3:2, pero no más alto que la ventana menos el lugar de las
   miniaturas: a 1440 de ancho, 3:2 a todo el ancho mediría 880px y la tira quedaría
   abajo del pliegue. */
.cabin-gallery {
  min-width: 0;
}
[data-slides='page'] {
  width: min(100%, calc((100svh - 11rem) * 1.5));
  margin-inline: auto;
}
[data-slides='page'] .slides__stage {
  aspect-ratio: 3 / 2;
  border-radius: 20px;
  background-color: hsl(var(--sand-hsl));
}
[data-slides='page']:focus-visible {
  outline: none;
}
[data-slides='page']:focus-visible .slides__stage {
  outline: 2px solid var(--btn-outline);
  outline-offset: 3px;
}
[data-slides='page'] .slides__arrow {
  width: 44px;
  height: 44px;
}
[data-slides='page'] .slides__arrow svg {
  height: 14px;
}
[data-slides='page'] .slides__arrow--prev { left: 16px; }
[data-slides='page'] .slides__arrow--next { right: 16px; }

/* El contador es de la familia de las flechas (blanco, borde y sombra): uno oscuro
   desaparecía sobre las fotos de atardecer y de interiores. */
.slides__count {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  padding: 0.15em 0.8em;
  border-radius: 300px;
  border: 1px solid rgb(0 0 0 / 0.08);
  background: rgb(255 255 255 / 0.9);
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.18);
  color: #222;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* La tira de miniaturas scrollea sola: la marcada se centra moviendo la tira, nunca la
   página. El padding deja lugar al contorno de la marcada, que si no lo corta el
   `overflow`. */
.slides__thumbs {
  position: relative;
  display: flex;
  gap: 8px;
  margin: 8px -5px 0;   /* el padding no corre la primera miniatura del borde de la foto */
  padding: 5px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.slides__thumbs::-webkit-scrollbar {
  display: none;
}
.slides__thumb {
  position: relative;
  flex: none;
  width: 96px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background-color: hsl(var(--sand-hsl));
  cursor: pointer;
  opacity: 0.55;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: opacity 0.2s ease, outline-color 0.2s ease;
}
.slides__thumb:hover {
  opacity: 1;
}
.slides__thumb[aria-current='true'] {
  opacity: 1;
  outline-color: hsl(var(--espresso-hsl));
}
.slides__thumb:focus-visible {
  outline-color: hsl(var(--tan-hsl));
}

@media (width < 768px) {
  [data-slides='page'] .slides__stage { border-radius: 14px; }
  [data-slides='page'] .slides__arrow { width: 38px; height: 38px; }
  [data-slides='page'] .slides__arrow svg { height: 12px; }
  [data-slides='page'] .slides__arrow--prev { left: 10px; }
  [data-slides='page'] .slides__arrow--next { right: 10px; }
  .slides__count { right: 10px; bottom: 10px; }
  .slides__thumb { width: 64px; height: 44px; border-radius: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .slides__track,
  .slides__thumbs { scroll-behavior: auto; }
  .slides__arrow,
  .slides__dots-strip,
  .slides__dot,
  .slides__thumb { transition: none; }
  .slides__arrow:hover { transform: translateY(-50%); }
}