/* Aldea Termal · "Piedra, nieve y araucaria"
   Referencias: Casa Cook, Hotel Sanders, Hotel June, The Calile.
   Suelo hueso y arena, tinta marrón cálida, verde de marca solo en la acción.
   Cero border-radius, cero sombras. Hanken Grotesk para todo, cuerpo a 20px.
   Audiencia 60+: cuerpo 20px, botones de 64px, contraste por encima de AA, foco visible. */

:root {
  --hueso: #f6f4ef;
  --arena: #e8e3d9;
  --arena-2: #d4cdbf;
  --linea: #cfc7b6;
  --tinta: #332f28;
  --tinta-2: #6b6558;
  --verde: #5a7129;
  --verde-oscuro: #44571d;
  --verde-claro: #eef1e3;
  --whatsapp: #0f7350;
  --whatsapp-oscuro: #0b593d;
  --blanco: #ffffff;

  --display: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --texto: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --ancho: 1280px;
  --cabecera: 5.4rem;
}

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

html {
  font-size: 20px;
  scroll-behavior: smooth;
  scroll-padding-top: var(--cabecera);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--texto);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--hueso);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--verde); color: var(--blanco); }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }

img { max-width: 100%; height: auto; display: block; }
p, ul, h1, h2, h3 { margin: 0; }
ul { padding: 0; list-style: none; }
sup { font-size: 0.6em; line-height: 0; }

a { color: var(--verde-oscuro); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--tinta); }

.ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; stroke-linejoin: miter; }
.ico-chico { width: 0.95em; height: 0.95em; stroke-width: 2.4; }
.ico .relleno { fill: currentColor; stroke: none; }

.ancho { max-width: var(--ancho); margin: 0 auto; padding: 0 3rem; }

.saltar {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--verde); color: var(--blanco); padding: 0.9rem 1.5rem;
  font-weight: 600; text-decoration: none;
}
.saltar:focus { top: 1rem; color: var(--blanco); }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3.2rem; padding: 0.7rem 2.1rem;
  font-family: var(--texto); font-size: 0.9rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.2;
  border: 1px solid transparent; border-radius: 0;
  text-decoration: none; cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.boton-primario { background: var(--verde); border-color: var(--verde); color: var(--blanco); }
.boton-primario:hover { background: var(--verde-oscuro); border-color: var(--verde-oscuro); color: var(--blanco); }
.boton-linea { background: transparent; border-color: var(--linea); color: var(--tinta); }
.boton-linea:hover { background: var(--tinta); border-color: var(--tinta); color: var(--hueso); }

/* ---------- Cabecera ---------- */
.cabecera {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent;
  transition: background-color 250ms ease, border-color 250ms ease;
  border-bottom: 1px solid transparent;
}
.cabecera-int {
  margin: 0 auto; padding: 1rem 2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  min-height: var(--cabecera);
}
.marca { display: block; flex: none; line-height: 0; }
.marca img { height: 2.5rem; width: auto; }
.marca-oscuro { display: none; }

.cabecera.solida { background: var(--hueso); border-bottom-color: var(--linea); }
.cabecera.solida .marca-claro { display: none; }
.cabecera.solida .marca-oscuro { display: block; }

.menu-boton {
  display: none; align-items: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.5rem 1.1rem;
  background: transparent; color: var(--blanco);
  border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 0;
  font-family: var(--texto); font-size: 0.9rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
}
.cabecera.solida .menu-boton { color: var(--tinta); border-color: var(--linea); }

.menu > ul { display: flex; align-items: center; gap: 0.2rem; flex-wrap: nowrap; }
.menu a, .menu summary {
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 3rem; padding: 0.5rem 0.55rem;
  color: var(--blanco); text-decoration: none; white-space: nowrap;
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  border-bottom: 2px solid transparent;
  transition: color 180ms ease, border-color 180ms ease;
}
.cabecera.solida .menu a, .cabecera.solida .menu summary { color: var(--tinta); }
.menu a:hover, .menu summary:hover { border-bottom-color: currentColor; }
.menu .red { padding-inline: 0.6rem; }
.menu .reservar a {
  background: var(--verde); color: var(--blanco); border-bottom: 0;
  padding: 0.75rem 1.5rem; margin-left: 0.6rem;
}
.menu .reservar a:hover { background: var(--verde-oscuro); color: var(--blanco); }
/* La cabecera sólida pinta el menú con tinta, pero este botón es un bloque verde
   macizo: su texto sigue blanco. */
.cabecera.solida .menu .reservar a { color: var(--blanco); }

/* Brillo que barre el fondo del botón, sin parar. El barrido no aclara con blanco
   —eso hundía el contraste del texto a 2,6:1— sino que apoya el botón en un verde
   más oscuro y deja pasar una banda que sube hasta el verde de marca. Así el punto
   más claro del barrido es exactamente el color normal del botón. La banda es muy
   ancha y la vuelta lenta: se ve pasar la luz, no un destello. El texto blanco se
   mantiene entre 7,1:1 y 5,5:1. Va como imagen de fondo, siempre por debajo del
   texto, y el botón no cambia de tamaño ni mueve nada del menú. */
@media (prefers-reduced-motion: no-preference) {
  .menu .reservar a {
    background-color: #4b5e22;
    background-image: linear-gradient(100deg,
      rgba(90, 113, 41, 0) 16%,
      rgba(90, 113, 41, 1) 50%,
      rgba(90, 113, 41, 0) 84%);
    background-size: 280% 100%;
    background-repeat: no-repeat;
    animation: brillo 4s linear infinite;
  }
  /* Al pasar el mouse manda el estado sólido: se corta el barrido. */
  .menu .reservar a:hover,
  .menu .reservar a:focus-visible {
    background-image: none;
    background-color: var(--verde-oscuro);
    animation: none;
  }
  @keyframes brillo {
    from { background-position: 210% 0; }
    to { background-position: -110% 0; }
  }
}

@media (min-width: 1341px) { .menu .red { display: none; } }

.desplegable { position: relative; }
.desplegable details ul {
  position: absolute; left: 0; top: 100%; min-width: 15rem;
  background: var(--hueso); border: 1px solid var(--linea); padding: 0.3rem; z-index: 60;
}
.desplegable details ul a { color: var(--tinta) !important; width: 100%; border-bottom: 0; }
.desplegable details ul a:hover { background: var(--arena); }

/* ---------- Portada ---------- */
.portada {
  position: relative; isolation: isolate;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end;
  color: var(--blanco);
  overflow: hidden;
}
.portada-foto {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: center 38%;
}
.portada::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* La foto es de nieve y llega a 235 de luminancia donde va el texto, así que el velo
     trabaja en dos capas: una desde abajo y otra desde la izquierda, y deja limpia
     la esquina superior derecha, que es donde se ven el pueblo y las piletas. */
  /* El peso está en el 45% izquierdo, donde vive el texto. De ahí a la derecha cae rápido
     y la aldea queda limpia. Arriba y abajo solo lo justo para el menú y los botones. */
  background:
    linear-gradient(to bottom, rgba(29, 38, 14, 0.36) 0%, rgba(29, 38, 14, 0.1) 14%, rgba(29, 38, 14, 0) 22%),
    linear-gradient(to right, rgba(29, 38, 14, 0.82) 0%, rgba(29, 38, 14, 0.78) 32%, rgba(29, 38, 14, 0.68) 48%, rgba(29, 38, 14, 0.3) 58%, rgba(29, 38, 14, 0.08) 67%, rgba(29, 38, 14, 0) 75%),
    linear-gradient(to top, rgba(29, 38, 14, 0.44) 0%, rgba(29, 38, 14, 0.32) 26%, rgba(29, 38, 14, 0.18) 48%, rgba(29, 38, 14, 0.06) 66%, rgba(29, 38, 14, 0) 78%);
}
.portada-int {
  width: 100%; max-width: var(--ancho); margin: 0 auto;
  padding: 0 3rem 5.5rem;
}
.portada h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 5rem); line-height: 1.02; letter-spacing: -0.03em;
  max-width: 20ch; text-wrap: balance;
}
.portada-lugar {
  margin-bottom: 1.3rem;
  font-size: 0.95rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
}
.portada-acciones { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
/* Excepción al piso de 18px: etiquetas cortas, en versal, sobre bloque macizo de alto contraste.
   Se saca la altura mínima y manda el relleno, que es lo que inflaba la caja. */
.portada-acciones .boton {
  min-height: 0; padding: 0.45rem 1rem;
  font-size: 0.8rem; letter-spacing: 0.06em;
}

.llamado {
  margin-top: 2.2rem; max-width: 46ch;
  font-size: 1.2rem; font-weight: 500; line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
  text-wrap: balance;
}
.llamado b { font-weight: 700; color: var(--blanco); }

@media (prefers-reduced-motion: no-preference) {
  .portada-int > * { animation: sube 900ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  .portada h1 { animation-delay: 120ms; }
  .llamado { animation-delay: 240ms; }
  .portada-acciones { animation-delay: 340ms; }
  @keyframes sube { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
}

/* ---------- Títulos y texto ---------- */
.titulo {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.06; letter-spacing: -0.03em;
  color: var(--tinta); text-wrap: balance;
}
.titulo-centro { text-align: center; }

.entrada {
  margin-top: 1.4rem; padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--linea);
  font-size: 1.25rem; line-height: 1.45; color: var(--tinta-2);
}
.rotulo {
  margin-top: 2rem;
  font-size: 0.9rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tinta);
}

h3 {
  font-size: 0.95rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tinta);
}

.lista li { position: relative; padding-left: 1.6rem; margin-top: 0.7rem; }
.lista li::before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 0.4rem; height: 0.4rem; background: var(--verde);
}
.lista li ul { margin-top: 0.35rem; }
.lista li li::before { background: var(--arena-2); }

.nota {
  display: flex; align-items: center; gap: 0.7rem;
  margin-top: 2rem; padding: 1.1rem 1.3rem;
  background: var(--verde-claro);
  font-weight: 600; color: var(--verde-oscuro);
}

.junto { white-space: nowrap; }
.solo-movil { display: none; }

/* ---------- Piezas: foto a sangre + columna de texto ---------- */
.bloque { padding: 6rem 0; }
.bloque-arena { background: var(--arena); }

.pieza {
  display: grid; grid-template-columns: 1fr 1fr; align-items: start;
}
/* La foto queda fija a la altura de la pantalla mientras el texto scrollea al lado,
   así los controles del carrusel están siempre junto a la imagen que cambian. */
.pieza-foto {
  grid-column: 1; grid-row: 1;
  position: sticky; top: var(--cabecera);
  height: calc(100vh - var(--cabecera)); height: calc(100svh - var(--cabecera));
  display: flex; flex-direction: column;
}
.pieza-foto .carrusel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.pieza-texto { grid-column: 2; grid-row: 1; padding: 5rem 3.5rem 5rem 4.5rem; max-width: 42rem; }
.pieza-invertida .pieza-foto { grid-column: 2; }
.pieza-invertida .pieza-texto { grid-column: 1; padding: 5rem 4.5rem 5rem 3.5rem; justify-self: end; }

.pieza-texto > p + p { margin-top: 1rem; }
.pieza-texto h3 { margin-top: 1.8rem; }
.pieza-texto .lista + h3 { margin-top: 1.8rem; }
.pieza-texto .lista + p { margin-top: 1.4rem; }

/* ---------- Carrusel ---------- */
.carrusel-marco { overflow: hidden; background: var(--arena); flex: 1; min-height: 0; }
.carrusel-pista {
  display: flex; margin: 0; height: 100%;
  transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
  touch-action: pan-y;
}
.carrusel-pista li { flex: 0 0 100%; min-width: 0; display: flex; }
.carrusel-pista img { width: 100%; height: 100%; object-fit: cover; }
.carrusel-arrastrando .carrusel-pista { transition: none; }

.carrusel-mandos {
  display: flex; align-items: center; gap: 2rem; flex: none;
  padding: 1.1rem 3rem;
}
/* Siempre a la izquierda: a la derecha chocan con el botón flotante de WhatsApp. */
.pieza-invertida .carrusel-mandos { justify-content: flex-start; }
.paso {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.5rem 0.2rem;
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  font-family: var(--texto); font-size: 0.9rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta);
  transition: border-color 180ms ease;
}
.paso:hover { border-bottom-color: var(--tinta); }
.carrusel-contador {
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tinta-2); font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ---------- Galería ---------- */
.galeria-encabezado {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  padding-bottom: 1.6rem; border-bottom: 1px solid var(--linea); margin-bottom: 2.5rem;
}
.grilla-fotos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
}
.grilla-fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--arena); }

.galeria-pie {
  display: grid; grid-template-columns: 3fr 2fr; gap: 3rem; align-items: center;
  margin-top: 3rem;
}
.video { background: var(--arena); }
.video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.sellos { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; }
.sellos img { height: 3.2rem; width: auto; }
.sellos a { line-height: 0; }

/* ---------- Tarifas y convenios ---------- */
/* Tarifas y Convenios: uno debajo del otro. Adentro, encabezado angosto a la
   izquierda y el contenido en columnas a la derecha. */
/* Tarifas y Convenios: uno debajo del otro. Adentro, el encabezado es una banda
   a todo el ancho y el listado baja en columnas, para no dejar media sección vacía. */
.apartado + .apartado {
  margin-top: 4.5rem; padding-top: 4.5rem;
  border-top: 1px solid var(--arena-2);
}
.apartado-cabeza {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.9rem 2.5rem;
  padding-bottom: 1.5rem; border-bottom: 1px solid var(--arena-2); margin-bottom: 2rem;
}
.apartado-cabeza .titulo { margin-bottom: 0; }
.apartado-cabeza .temporada { margin-top: 0; }
.apartado-cabeza .entrada { margin-top: 0; padding-bottom: 0; border-bottom: 0; }
.apartado-cuerpo .rotulo { margin-top: 0; margin-bottom: 0.4rem; }
/* Dos columnas y no tres: son condiciones que hay que leer, no una lista para escanear. */
.lista-condiciones { columns: 2; column-gap: 4rem; }
.lista-condiciones > li { break-inside: avoid; }
.lista-convenios { columns: 3; column-gap: 3rem; }
.lista-convenios li { break-inside: avoid; margin-top: 0; margin-bottom: 0.85rem; }
.temporada {
  display: inline-block; margin-top: 1.2rem;
  padding: 0.5rem 1rem;
  background: var(--verde); color: var(--blanco);
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.bloque-arena .entrada { border-bottom-color: var(--arena-2); }

/* ---------- Contacto ---------- */
.vias {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.5rem;
  margin-top: 3.5rem;
}
.via { border-top: 2px solid var(--tinta); padding-top: 1.8rem; }
.via h3 {
  font-family: var(--display); font-weight: 700; font-size: 1.7rem;
  letter-spacing: -0.025em; line-height: 1.15;
}
.telefonos { margin-top: 0.8rem; font-size: 1.1rem; }
.telefonos + .telefonos { margin-top: 0.5rem; }
.telefonos a { font-weight: 600; white-space: nowrap; display: inline-block; padding: 0.3rem 0.1rem; }
.via .boton { margin-top: 1.6rem; }
.redes { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.7rem; }
.redes a { display: inline-flex; align-items: flex-start; gap: 0.55rem; width: fit-content; padding: 0.35rem 0; font-weight: 600; }
.redes .ico { margin-top: 0.18em; }
.direccion { margin-top: 0.7rem; font-size: 1.1rem; font-weight: 600; }

/* Sección propia entre Convenios y Contacto. Sin margen ni padding propios:
   el corte lo da el mapa a sangre, no el aire. */
.donde {
  display: grid; grid-template-columns: 6fr 6fr; align-items: center;
  background: var(--hueso);
}
.mapa { background: var(--arena); }
/* Imagen fija en lugar del mapa incrustado: así no se publicita a los vecinos
   y la página no arrastra el peso ni las cookies del embed. */
.mapa-vista { display: block; position: relative; line-height: 0; text-decoration: none; }
.mapa-vista img { width: 100%; height: 100%; min-height: 34rem; object-fit: cover; }
.mapa-credito {
  position: absolute; right: 0; bottom: 0;
  background: rgba(246, 244, 239, 0.88); color: var(--tinta-2);
  font-size: 0.7rem; font-weight: 600; line-height: 1.6; padding: 0.2rem 0.6rem;
}
.donde-texto { padding: 3rem 3rem 3rem 4rem; max-width: 38rem; }
.donde-texto h3 {
  font-family: var(--display); font-weight: 700; font-size: 1.7rem;
  letter-spacing: -0.025em; line-height: 1.15;
}
.donde-texto .rotulo { margin-top: 1.6rem; }
.donde-texto p + p { margin-top: 0.8rem; }
.donde-enlaces { display: flex; gap: 0.8rem; margin-top: 1.8rem; }
.donde-enlaces .boton { flex: 1 1 0; padding-inline: 1.2rem; white-space: nowrap; }

/* ---------- Pie ---------- */
/* Cierre: Contacto y el pie son una sola sección y entran en una pantalla.
   El pie va en fila, no apilado, que es lo que lo hacía largo. */
#contacto {
  position: relative; isolation: isolate;
  padding: 3.5rem 0 2.5rem;
}
#contacto::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(../img/fondo-montanas-escritorio.jpg) center bottom / 100% auto no-repeat;
  mix-blend-mode: multiply;
}
/* Grilla de tres y no flex: con 1fr auto 1fr el crédito queda centrado de verdad,
   sin depender de cuánto miden el logo y el sello de los costados. */
/* Marca y sello fiscal juntos a la izquierda, crédito del estudio a la derecha. */
.pie {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.5rem 2rem;
  margin-top: 3rem; padding-top: 2.5rem;
  border-top: 1px solid var(--linea);
  color: var(--tinta-2);
}
.pie-logo { height: 5.5rem; width: auto; }
.pie-marca { display: flex; align-items: center; gap: 1.6rem; }
/* Única pastilla del sitio, pedida por el dueño: el fondo hueso tapa las rayas
   del dibujo de montañas para que el crédito se lea limpio. */
.pie-credito {
  text-align: center;
  background: var(--hueso);
  padding: 0.35rem 1rem;
  border-radius: 999px;
  font-size: 0.75rem; letter-spacing: normal; text-transform: none;
}
/* Sin subrayado en reposo, pero vuelve al pasar el mouse o al recibir foco:
   si no, deja de parecer un enlace. */
.pie-credito a { text-decoration: none; }
.pie-credito a:hover, .pie-credito a:focus-visible { text-decoration: underline; }
.pie a:not(.boton) { color: var(--tinta-2); }
.pie a:not(.boton):hover { color: var(--tinta); }
/* Sello de la asociación de hoteleros, entre la marca y el sello fiscal. El PNG
   viene sin fondo, así que se apoya sobre el dibujo de montañas sin recortarlo. */
.pie-hoteleros { display: block; height: 3.6rem; width: auto; }
.afip { display: block; line-height: 0; }
.pie p { margin: 0; }
.afip img { height: 3.4rem; width: auto; }

/* ---------- WhatsApp flotante ---------- */
.whatsapp-flotante {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 40;
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 3.2rem; padding: 0.7rem 1.3rem;
  background: var(--whatsapp); color: var(--blanco); text-decoration: none;
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  transition: background-color 180ms ease;
}
.whatsapp-flotante:hover { background: var(--whatsapp-oscuro); color: var(--blanco); }
.whatsapp-flotante .ico { width: 1.5em; height: 1.5em; }
/* En escritorio la foto es pegajosa y sus controles viven abajo a la derecha de la pantalla:
   el flotante los taparía. Ahí ya están el menú y el botón grande de Contacto. */
@media (min-width: 1081px) { .whatsapp-flotante { display: none; } }

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
  html { font-size: 19px; }
  .ancho, .cabecera-int, .portada-int { padding-left: 2rem; padding-right: 2rem; }
  .pieza, .donde { grid-template-columns: 1fr; }
  .pieza-foto, .pieza-invertida .pieza-foto {
    grid-column: 1; grid-row: 1;
    position: static; height: auto;
  }
  .carrusel-pista img { aspect-ratio: 4 / 3; height: auto; }
  .pieza-texto, .pieza-invertida .pieza-texto {
    grid-column: 1; grid-row: 2; justify-self: stretch;
    padding: 3rem 2rem 4.5rem; max-width: none;
  }
  .carrusel-mandos, .pieza-invertida .carrusel-mandos { padding: 1.1rem 2rem; justify-content: flex-start; }
  .carrusel-marco { min-height: 0; }
  .carrusel-pista img { min-height: 0; aspect-ratio: 4 / 3; height: auto; }
  .donde > .mapa { grid-row: 1; }
  .donde-texto { grid-row: 2; padding: 3rem 2rem 0; max-width: none; }
  .galeria-pie { grid-template-columns: 1fr; gap: 2.5rem; }
  /* Tres columnas no entran sin partir los usuarios de las redes. */
  .vias { grid-template-columns: 1fr; gap: 2.5rem; }
  .pie { flex-direction: column; text-align: center; gap: 1.5rem; }
  .apartado + .apartado { margin-top: 3.5rem; padding-top: 3.5rem; }
  .lista-condiciones, .lista-convenios { columns: 2; }
  .mapa-vista img { min-height: 26rem; }

  /* Cuanto más angosto el recorte, más nieve queda detrás del título: el velo sube. */
  .portada::after {
    /* En pantalla angosta no hay "derecha limpia" que cuidar: el velo va desde abajo. */
    background:
      linear-gradient(to bottom, rgba(29, 38, 14, 0.42) 0%, rgba(29, 38, 14, 0.12) 18%, rgba(29, 38, 14, 0) 28%),
      linear-gradient(to top, rgba(29, 38, 14, 0.88) 0%, rgba(29, 38, 14, 0.84) 30%, rgba(29, 38, 14, 0.74) 52%, rgba(29, 38, 14, 0.56) 70%, rgba(29, 38, 14, 0.3) 85%, rgba(29, 38, 14, 0.08) 96%);
  }
}

/* ---------- Menú móvil ---------- */
@media (max-width: 1340px) {
  .cabecera-int { flex-wrap: wrap; }
  .menu-boton { display: inline-flex; }
  .menu { display: none; width: 100%; }
  .menu.abierto { display: block; }
  .cabecera.abierta { background: var(--hueso); border-bottom-color: var(--linea); }
  .cabecera.abierta .marca-claro { display: none; }
  .cabecera.abierta .marca-oscuro { display: block; }
  .cabecera.abierta .menu-boton { color: var(--tinta); border-color: var(--linea); }
  .menu > ul { flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem 0 1rem; }
  .menu a, .menu summary {
    width: 100%; padding: 0.9rem 0; font-size: 1rem;
    color: var(--tinta) !important; border-bottom: 1px solid var(--arena);
  }
  .desplegable details ul { position: static; border: 0; background: var(--arena); padding: 0 0 0 1.5rem; }
  .menu .reservar a { margin: 0.8rem 0 0; justify-content: center; padding: 0.9rem 1.5rem; }
  .menu .red { justify-content: flex-start; }
  .menu .red::after { content: "Facebook"; letter-spacing: 0.1em; }
  .menu .red-ig::after { content: "Instagram"; }
}

/* ---------- Celular ---------- */
@media (max-width: 620px) {
  html { font-size: 18px; }
  :root { --cabecera: 4.6rem; }
  .ancho, .cabecera-int, .portada-int { padding-left: 1.25rem; padding-right: 1.25rem; }
  .marca img { height: 2.3rem; }
  .bloque { padding: 4rem 0; }

  .portada { min-height: 92vh; min-height: 92svh; }
  .portada-int { padding-bottom: 3.5rem; }
  .portada h1 { font-size: 2.3rem; max-width: none; }
  .portada-acciones { gap: 0.6rem; }
  .portada-acciones .boton { width: 100%; min-height: 3rem; font-size: 0.9rem; }
  .llamado + .portada-acciones { margin-top: 1.4rem; }
  .portada-lugar { margin-bottom: 1rem; }
  .llamado { margin-top: 1.8rem; font-size: 1.05rem; max-width: none; }

  .pieza-texto, .pieza-invertida .pieza-texto { padding: 2.5rem 1.25rem 3.5rem; }
  .carrusel-mandos, .pieza-invertida .carrusel-mandos { padding: 1rem 1.25rem; gap: 1rem; justify-content: space-between; }
  .paso span { display: none; }
  .paso { border: 1px solid var(--linea); padding: 0.5rem 1.4rem; min-width: 4.5rem; justify-content: center; }
  .paso .ico { width: 1.5em; height: 1.5em; }

  .solo-escritorio { display: none; }
  .solo-movil { display: inline; }

  .lista-condiciones, .lista-convenios { columns: 1; }

  .grilla-fotos { grid-template-columns: 1fr 1fr; gap: 0.35rem; }
  .galeria-encabezado .boton { width: 100%; }
  .sellos { gap: 1.5rem; }
  .sellos img { height: 2.6rem; }

  .vias { grid-template-columns: 1fr; gap: 2.5rem; }
  .via .boton { width: 100%; }
  .telefonos { font-size: 1rem; }
  .donde-texto { padding: 2.5rem 1.25rem 0; }
  .donde-enlaces { flex-wrap: wrap; }
  .donde-enlaces .boton { flex: 1 1 100%; }
  .mapa-vista img { min-height: 20rem; }

  .pie { gap: 1.2rem; }
  .pie-marca { flex-direction: column; gap: 1.2rem; }
  .pie-logo { height: 5rem; }
  #contacto::before { background-size: 190% auto; }

  .whatsapp-flotante { right: 1rem; bottom: 1rem; padding: 0.8rem 1rem; }
  .whatsapp-flotante span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .carrusel-pista { transition: none; }
}