/* ==========================================================================
   Resurrección Glamping y Cabaña — estilos
   Dirección: DESIGN.md. Orden: fuentes · tokens · imágenes · base · utilidades
   · componentes · secciones · motion reducido.
   ========================================================================== */

/* ---------- Fuentes auto-hospedadas (licencia OFL en fonts/) ---------- */

@font-face {
  font-family: "Tenor Sans";
  src: url("../fonts/tenor-sans-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* Respaldos con métricas ajustadas: mientras carga la fuente real, Arial
   ocupa el mismo ancho y alto de línea, así el swap no mueve el layout.
   Valores medidos en Chrome contra Arial (ancho de un párrafo en español,
   ascendente y descendente de la fuente real). */
@font-face {
  font-family: "Tenor Sans respaldo";
  src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Roboto");
  size-adjust: 107.19%;
  ascent-override: 85.83%;
  descent-override: 23.32%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Hanken Grotesk respaldo";
  src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Roboto");
  size-adjust: 98.91%;
  ascent-override: 101.1%;
  descent-override: 30.63%;
  line-gap-override: 0%;
}

/* ---------- Tokens ---------- */

:root {
  /* Paleta (DESIGN.md §2) */
  --crema: #F4EFE6;
  --arena: #E8DFD1;
  --topo: #B9AC9B;
  --cafe: #6E5D4C;
  --tinta: #2B241E;
  --noche: #151210;
  --linea: rgb(110 93 76 / 0.35);
  --linea-oscura: rgb(185 172 155 / 0.3);

  /* Acento único: achiote. Solo en tres lugares: el sol del divisor, el
     anillo de foco y el subrayado de enlaces. Nunca sobre una foto de la
     cabaña ni junto a ella: se confunde con la madera (#BE5E2B).
     Sobre noche no alcanza 3:1 para el foco; ahí el foco es crema. */
  --acento: #A9442B;
  --foco-claro: var(--acento);
  --foco-oscuro: var(--crema);

  /* Tipografía */
  --f-titular: "Tenor Sans", "Tenor Sans respaldo", Arial, sans-serif;
  --f-texto: "Hanken Grotesk", "Hanken Grotesk respaldo", Arial, sans-serif;

  --t-h1: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
  --t-h2: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  --t-h3: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  --t-texto: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --t-etiqueta: 0.8125rem;
  --t-nota: 0.875rem;

  /* Espacio y retícula */
  --margen: clamp(1.25rem, 4vw, 3.5rem);
  --ancho-max: 82.5rem;
  --seccion: clamp(4rem, 2.5rem + 5vw, 7.5rem);
  --alto-barra: 4.5rem;
  /* Separación entre una etiqueta y su título: la misma que hay entre la
     marca y el titular de la portada (gap + margen superior del titular). */
  --espacio-portada: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  --margen-titular-portada: clamp(0.5rem, 1vw, 1rem);
  --separacion-etiqueta: calc(var(--espacio-portada) + var(--margen-titular-portada));

  /* Motion (house-style) */
  --curva-espacial: cubic-bezier(0.22, 1, 0.36, 1);
  --curva-color: cubic-bezier(0.4, 0, 0.2, 1);
  /* Vaivén ambiental (alternate): simétrica, sin rebote en los extremos. */
  --curva-vaiven: cubic-bezier(0.45, 0, 0.55, 1);
}

/* ---------- Imágenes de ambiente ----------
   Rutas de las fotos que van como fondo. Las fotos de alojamientos y
   galerías van en el HTML como <img> (alt + loading="lazy").
   Con JS, las de secciones lejanas solo se piden cuando la sección se acerca
   a la pantalla (main.js añade .esta-cerca); sin JS cargan normalmente. */
:root {
  /* Portada del inicio — díptico aéreo, fotos iluminadas (DESIGN.md §10.9).
     Domo: Glamping/IMG-20250626-WA0016. Cabaña: Cabana/IMG-20250626-WA0023.
     4:3. En celular (< 700 px) la de 800; la grande desde 1600 px o en
     pantallas de alta densidad. Si cambian, actualizar el preload de index.html. */
  --img-portada-domo-movil: url("../img/Imagenes-General/portada-aerea-domo-luz-800.webp");
  --img-portada-domo: url("../img/Imagenes-General/portada-aerea-domo-luz-1200.webp");
  --img-portada-domo-grande: url("../img/Imagenes-General/portada-aerea-domo-luz-2400.webp");
  --img-portada-cabana-movil: url("../img/Imagenes-General/portada-aerea-cabana-luz-800.webp");
  --img-portada-cabana: url("../img/Imagenes-General/portada-aerea-cabana-luz-1200.webp");
  --img-portada-cabana-grande: url("../img/Imagenes-General/portada-aerea-cabana-luz-2400.webp");

  /* Cabeceras de páginas interiores, proporción 2.4:1 (DESIGN.md §10.4).
     La grande desde 1300 px o en pantallas de alta densidad. */
  /* Quiénes somos — Glamping/WA0070: la malla catamarán y las montañas. */
  --img-cab-quienes: url("../img/Imagenes-General/cabecera-quienes-1280.webp");
  --img-cab-quienes-grande: url("../img/Imagenes-General/cabecera-quienes-2400.webp");
  /* Glamping — Glamping/WA0016: aérea del domo entre el bosque, iluminada. */
  --img-cab-glamping: url("../img/Imagenes-General/cabecera-glamping-1280.webp");
  --img-cab-glamping-grande: url("../img/Imagenes-General/cabecera-glamping-2400.webp");
  /* Cabaña — Cabana/IMG-20250626-WA0023: aérea de la cabaña entre el bosque,
     iluminada con la misma curva que la del glamping. */
  --img-cab-cabana: url("../img/Imagenes-General/cabecera-cabana-1280.webp");
  --img-cab-cabana-grande: url("../img/Imagenes-General/cabecera-cabana-2400.webp");
  /* Planes — Glamping/WA0078: el círculo de la fogata. */
  --img-cab-planes: url("../img/Imagenes-General/cabecera-planes-1280.webp");
  --img-cab-planes-grande: url("../img/Imagenes-General/cabecera-planes-2400.webp");
  /* Reseñas — Glamping/IMG-20240722-WA0022: huésped en la malla viendo el
     atardecer. Origen de 1200 px: no hay versión grande. */
  --img-cab-resenas: url("../img/Imagenes-General/cabecera-resenas-1200.webp");
  /* Ubicación — Cabana/WA0026: aérea lejana del bosque, iluminada. */
  --img-cab-ubicacion: url("../img/Imagenes-General/cabecera-ubicacion-1280.webp");
  --img-cab-ubicacion-grande: url("../img/Imagenes-General/cabecera-ubicacion-2400.webp");
  /* Contacto — Glamping/WA0090: la terraza del glamping con el valle. */
  --img-cab-contacto: url("../img/Imagenes-General/cabecera-contacto-1280.webp");
  --img-cab-contacto-grande: url("../img/Imagenes-General/cabecera-contacto-2400.webp");
  /* Reservar — Cabana/WA0075: habitación de la cabaña. */
  --img-cab-reservar: url("../img/Imagenes-General/cabecera-reservar-1280.webp");
  --img-cab-reservar-grande: url("../img/Imagenes-General/cabecera-reservar-2400.webp");


}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--t-texto);
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--f-titular);
  font-weight: 400;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

/* Sin palabras solas en la última línea, también fuera de los párrafos. */
li,
dd,
th,
td,
summary,
figcaption,
blockquote {
  text-wrap: pretty;
}

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

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--foco-claro);
  outline-offset: 3px;
}

.fondo-oscuro :focus-visible {
  outline-color: var(--foco-oscuro);
}

/* Secciones con fotos de madera rojiza (la cabaña): el achiote se confunde
   con la madera, así que ahí el foco va en tinta (DESIGN.md, Acento). */
.sin-acento {
  --foco-claro: var(--tinta);
}

/* ---------- Utilidades ---------- */

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

.saltar {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--f-titular);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-200%);
}

.saltar:focus-visible {
  transform: none;
}

.etiqueta {
  font-family: var(--f-titular);
  font-size: var(--t-etiqueta);
  line-height: 1.4;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cafe);
}

/* ==========================================================================
   CABECERA DEL SITIO Y MENÚ (compartida por todas las páginas)
   Dos variantes:
   · .cabecera--sobre-foto: en la portada del inicio, encima de la foto,
     texto crema, sin fondo (la foto ya lleva su velo).
   · por defecto: páginas interiores, fondo crema, fija arriba.
   Escritorio (≥ 1100 px): enlaces visibles y desplegable CSS en
   «Alojamientos». Menos de 1100 px: logo, Reservar y menú <details>.
   Todo funciona sin JS; main.js solo sincroniza aria-expanded y cierra
   con Esc.
   ========================================================================== */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--crema);
  color: var(--tinta);
  border-bottom: 1px solid var(--linea);
}

.cabecera--sobre-foto {
  position: absolute;
  left: 0;
  right: 0;
  background: transparent;
  color: var(--crema);
  border-bottom-color: rgb(244 239 230 / 0.22);
}

.cabecera__interior {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  max-width: var(--ancho-max);
  min-height: var(--alto-barra);
  margin: 0 auto;
  padding: 0 var(--margen);
}

.cabecera__logo {
  flex: none;
  display: block;
  margin-right: auto;
  transition: opacity 200ms var(--curva-color);
}

.cabecera__logo img {
  width: clamp(5.5rem, 4.5rem + 3vw, 7.75rem);
  height: auto;
}

.cabecera__logo:hover {
  opacity: 0.8;
}

.cabecera__reservar {
  flex: none;
  min-height: 44px;
  padding: 0.75rem 1.25rem;
}

/* ---------- Menú de escritorio ---------- */

.menu__lista {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__enlace {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: 400 var(--t-nota) / 1 var(--f-texto);
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

/* Subrayado que crece desde la izquierda (house-style). La página activa
   lo lleva fijo, en el color del texto. */
.menu__enlace::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.65rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms var(--curva-espacial);
}

.menu__enlace:hover::after,
.menu__enlace[aria-current]::after {
  transform: scaleX(1);
}

.menu__enlace:active {
  transform: scale(0.94);
}

/* Flecha del desplegable: dos líneas de 1 px, no un ícono de librería. */
.menu__flecha {
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 180ms var(--curva-espacial);
}

.menu__grupo {
  position: relative;
}

/* Cerrado: visibility hidden (no recibe foco). Se abre con el mouse o al
   enfocar el disparador, así el teclado entra con Tab. */
.menu__sub {
  position: absolute;
  top: 100%;
  left: -1.25rem;
  z-index: 10;
  min-width: 11rem;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  background: var(--crema);
  border: 1px solid var(--linea);
  color: var(--tinta);
  visibility: hidden;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 120ms var(--curva-color),
    transform 120ms var(--curva-espacial),
    visibility 0s linear 120ms;
}

.menu__grupo:hover .menu__sub,
.menu__grupo:focus-within .menu__sub,
.menu__grupo.esta-abierto .menu__sub {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition:
    opacity 180ms var(--curva-color),
    transform 180ms var(--curva-espacial),
    visibility 0s linear 0s;
}

.menu__grupo:hover .menu__flecha,
.menu__grupo:focus-within .menu__flecha,
.menu__grupo.esta-abierto .menu__flecha {
  transform: translateY(1px) rotate(225deg);
}

/* Esc cierra el desplegable aunque el foco siga en el disparador. */
.menu__grupo.esta-cerrado-teclado .menu__sub {
  visibility: hidden;
  opacity: 0;
}

.menu__sub a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.25rem;
  font-size: var(--t-nota);
  text-decoration: none;
  transition: background-color 200ms var(--curva-color);
}

.menu__sub a:hover {
  background-color: var(--arena);
}

.menu__sub a[aria-current] {
  text-decoration: underline 1px;
  text-underline-offset: 0.35em;
}

/* ---------- Menú del celular (<details>, sin JS) ---------- */

.menu-movil {
  display: none;
}

.menu-movil__boton {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid currentColor;
  list-style: none;
  cursor: pointer;
  transition: background-color 200ms var(--curva-color);
}

.menu-movil__boton::-webkit-details-marker {
  display: none;
}

.menu-movil__boton:active {
  transform: scale(0.94);
}

.menu-movil__boton svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
}

.menu-movil__cerrar,
.menu-movil[open] .menu-movil__abrir {
  display: none;
}

.menu-movil[open] .menu-movil__cerrar {
  display: block;
}

/* El panel cuelga de la cabecera (que está posicionada) a todo el ancho. */
.menu-movil__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100svh - var(--alto-barra));
  overflow-y: auto;
  padding: 0.5rem var(--margen) 2rem;
  background: var(--crema);
  color: var(--tinta);
  border-bottom: 1px solid var(--linea);
}

.menu-movil__lista,
.menu-movil__sub {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-movil__lista > li {
  border-bottom: 1px solid var(--linea);
}

.menu-movil__lista a,
.menu-movil__grupo {
  display: flex;
  align-items: center;
  min-height: 52px;
  font-size: 1.0625rem;
  text-decoration: none;
}

.menu-movil__grupo {
  min-height: 44px;
  padding-top: 0.75rem;
  font-family: var(--f-titular);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cafe);
}

.menu-movil__sub a {
  padding-left: 1.25rem;
  min-height: 48px;
}

.menu-movil__lista a[aria-current] {
  text-decoration: underline 1px;
  text-underline-offset: 0.35em;
}

@media (max-width: 1099px) {
  .menu {
    display: none;
  }

  .menu-movil {
    display: block;
  }

  .cabecera__interior {
    gap: 0.75rem;
  }

  .cabecera__reservar {
    padding: 0.6rem 0.9rem;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
  }
}

/* ==========================================================================
   PORTADA DEL INICIO — díptico aéreo: domo | cabaña
   Fotos iluminadas con curva de tono (DESIGN.md §10.9); velo plano al 18 %.
   En celular, apiladas. Zoom lento continuo (house-style).
   ========================================================================== */

.portada-inicio {
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background-color: var(--noche);
  color: var(--crema);
  isolation: isolate;
}

.portada-inicio__fotos {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgb(244 239 230 / 0.45);
}

/* Cada mitad recorta; la foto vive en ::before, que es lo que escala. */
.portada-inicio__foto {
  overflow: hidden;
  background-color: var(--cafe);
}

.portada-inicio__foto::before {
  content: "";
  display: block;
  height: 100%;
  background: var(--foto) var(--encuadre, center) / cover no-repeat;
  animation: portada-zoom 24s var(--curva-vaiven) infinite alternate;
}

.portada-inicio__foto--domo {
  --foto: var(--img-portada-domo);
  --encuadre: 52% 55%;
}

.portada-inicio__foto--cabana {
  --foto: var(--img-portada-cabana);
  --encuadre: 42% 50%;
}

@media (min-width: 1600px), (min-width: 700px) and (min-resolution: 1.5dppx) {
  .portada-inicio__foto--domo {
    --foto: var(--img-portada-domo-grande);
  }

  .portada-inicio__foto--cabana {
    --foto: var(--img-portada-cabana-grande);
  }
}

@media (max-width: 699px) {
  .portada-inicio__foto--domo {
    --foto: var(--img-portada-domo-movil);
  }

  .portada-inicio__foto--cabana {
    --foto: var(--img-portada-cabana-movil);
  }

  .portada-inicio__fotos {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
}

/* Velo plano, nunca degradado. */
.portada-inicio::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(21 18 16 / 0.18);
}

/* Video de fondo (futuro): solo desde 900 px y sin «reducir movimiento».
   Cuando exista, reemplaza el díptico. */
.portada-inicio__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms var(--curva-color);
}

.portada-inicio__video.esta-reproduciendo {
  opacity: 1;
}

@media (max-width: 899px) {
  .portada-inicio__video {
    display: none;
  }
}

/* Logo y lema al centro. Entrada escalonada SOLO con transform: logo y
   luego lema suben 8 px; la opacidad es 1 desde el primer cuadro. */
.portada-inicio__contenido {
  align-self: center;
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  width: 100%;
  max-width: 64rem;
  padding: calc(var(--alto-barra) + 2rem) var(--margen) 4rem;
  text-align: center;
}

.portada-inicio__logo {
  width: clamp(15rem, 10rem + 18vw, 27rem);
  height: auto;
  animation: entrada-sube 700ms var(--curva-espacial) both;
}

.portada-inicio__lema {
  max-width: 100%;
  margin-right: -0.3em; /* compensa el espaciado final para centrar */
  font-size: clamp(0.9375rem, 0.8rem + 0.55vw, 1.25rem);
  line-height: 1.6;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  animation: entrada-sube 700ms var(--curva-espacial) 100ms both;
}

@keyframes entrada-sube {
  from { transform: translateY(8px); }
  to { transform: none; }
}

@keyframes portada-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

/* Las anclas aterrizan debajo de la cabecera fija. */
main [id] {
  scroll-margin-top: var(--alto-barra);
}

/* ==========================================================================
   INICIO · PANTALLA 2 — dos entradas
   Anchos 1.22 a 1 (Glamping el ancho), la cabaña desfasada hacia abajo, sin
   bordes cerrados. Cada entrada es un solo enlace. En celular se apilan.
   ========================================================================== */

.entradas {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 4vw, 4rem);
  row-gap: 3rem;
  align-items: start;
  /* Más angosta que el resto: la pantalla 2 cabe en un alto de pantalla. */
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(3rem, 5vw, 4rem) var(--margen) clamp(3rem, 5vw, 4.5rem);
}

.entradas__titulo {
  grid-column: 1 / -1;
  margin-bottom: clamp(0rem, 1vw, 1rem);
}

.entrada {
  display: grid;
  gap: 1.25rem;
  color: var(--tinta);
  text-decoration: none;
}

.entrada--cabana {
  margin-top: clamp(0rem, 5vw, 3.5rem);
}

.entrada__foto {
  display: block;
  overflow: hidden;
  background-color: var(--topo);
}

.entrada__foto img {
  width: 100%;
  height: auto;
  transition: transform 300ms var(--curva-espacial);
}

.entrada--glamping .entrada__foto img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* La cabaña: 683 px de origen; nunca se estira por encima de su tamaño. */
.entrada--cabana .entrada__foto {
  max-width: 35rem;
}

.entrada--cabana .entrada__foto img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.entrada__pie {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.375rem 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linea);
}

.entrada__dato {
  grid-column: 1 / -1;
  font-size: var(--t-nota);
  color: var(--cafe);
}

.entrada__nombre {
  font-size: var(--t-h2);
  line-height: 1.05;
}

.entrada__ver {
  position: relative;
  padding-bottom: 0.25rem;
  font-family: var(--f-titular);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.entrada__ver::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.24em;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.35);
  transform-origin: left;
  transition: transform 250ms var(--curva-espacial);
}

.entrada:hover .entrada__ver::after,
.entrada:focus-visible .entrada__ver::after {
  transform: scaleX(1);
}

@media (hover: hover) and (pointer: fine) {
  .entrada:hover .entrada__foto img {
    transform: scale(1.03);
  }
}

.entrada:active {
  transform: scale(0.98);
  transition: transform 120ms var(--curva-espacial);
}

.entrada:focus-visible {
  outline-offset: 6px;
}

/* La cabaña es una foto de madera: ahí el foco va en tinta. */
.entrada--cabana {
  --foco-claro: var(--tinta);
}

@media (max-width: 899px) {
  .entradas {
    grid-template-columns: minmax(0, 1fr);
  }

  .entrada--cabana {
    margin-top: 0;
  }

  .entrada--cabana .entrada__foto {
    max-width: none;
  }
}

/* ==========================================================================
   COMPONENTES COMUNES
   ========================================================================== */

/* Foto de ambiente: fondo con la proporción final ya fijada. El color topo
   se ve mientras carga, así la composición no se mueve. */
.foto-fondo {
  background-color: var(--topo);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Botones. Sin sombra (el brief manda sobre house-style): el hover cambia el
   tono del fondo y desplaza; :active presiona. */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.875rem 1.75rem;
  border: 1px solid var(--tinta);
  border-radius: 0;
  background: transparent;
  color: var(--tinta);
  font-family: var(--f-titular);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 220ms var(--curva-espacial),
    background-color 220ms var(--curva-color),
    border-color 220ms var(--curva-color),
    color 220ms var(--curva-color);
}

/* Botón sólido (llamado principal). En claros: tinta; en oscuros: crema.
   Hover: el fondo cambia de tono y sube 2 px (sin sombra). */
.boton--solido {
  border-color: var(--tinta);
  background-color: var(--tinta);
  color: var(--crema);
}

.boton--solido:hover {
  border-color: var(--cafe);
  background-color: var(--cafe);
}

.fondo-oscuro .boton--solido {
  border-color: var(--crema);
  background-color: var(--crema);
  color: var(--tinta);
}

.fondo-oscuro .boton--solido:hover {
  border-color: var(--arena);
  background-color: var(--arena);
}

@media (hover: hover) and (pointer: fine) {
  .boton--solido:hover {
    transform: translateY(-2px);
  }
}

.boton--contorno:hover {
  background-color: var(--arena);
  border-color: var(--cafe);
}

@media (hover: hover) and (pointer: fine) {
  .boton--contorno:hover {
    transform: translateY(-1px);
  }
}

.boton:active {
  transform: scale(0.94);
  transition-duration: 120ms;
}

/* Enlace de texto: subrayado fino que, al pasar el mouse, se vuelve achiote
   y crece desde la izquierda (house-style). Para mapa y WhatsApp. */
.enlace {
  position: relative;
  display: inline-block;
  padding-block: 0.25rem;
  color: inherit;
  text-decoration: underline 1px;
  text-underline-offset: 0.3em;
}

.enlace::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms var(--curva-espacial);
}

.enlace:hover::after {
  transform: scaleX(1);
}

.enlace:active {
  transform: scale(0.94);
}

/* Dato que el cliente todavía no ha entregado: subrayado punteado. */
.dato--pendiente {
  color: var(--cafe);
  text-decoration: underline dotted 1px;
  text-decoration-color: var(--cafe);
  text-underline-offset: 0.3em;
}

/* En fondo noche el café no alcanza contraste: arena (15:1). */
.fondo-oscuro .dato--pendiente {
  color: var(--arena);
  text-decoration-color: var(--topo);
}

/* Línea de datos (capacidad, tarifa): sin cajas, una línea arriba. */
.datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.5rem 2rem;
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linea);
}

.datos__item {
  display: grid;
  gap: 0.375rem;
}

.datos dt {
  font-family: var(--f-titular);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cafe);
}

.datos dd {
  margin: 0;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Marcador de foto pendiente: bloque del color de la paleta con el nombre
   del archivo esperado. Ya tiene la proporción final de la foto. */
.foto-fondo--pendiente {
  position: relative;
  background-color: var(--arena);
}

.fondo-oscuro .foto-fondo--pendiente {
  background-color: var(--cafe);
}

.foto-fondo--pendiente::after {
  content: attr(data-archivo);
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.875rem;
  font-family: var(--f-texto);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--tinta);
  overflow-wrap: anywhere;
}

.fondo-oscuro .foto-fondo--pendiente::after {
  color: var(--crema);
}

/* ==========================================================================
   GALERÍA DESPLEGABLE (alojamientos)
   ========================================================================== */

.galeria__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--topo);
}

/* ---------- Galería desplegable ----------
   EXCEPCIÓN NOMBRADA (DESIGN.md §7): el hueco anima grid-template-rows de
   0fr a 1fr. Es la única propiedad de layout animada del sitio; max-height
   recortaría fotos de alturas distintas. Las fotos entran con opacity y
   transform. Sin html.js la galería está abierta. */
.galeria {
  display: grid;
  grid-template-rows: 1fr;
}

.galeria__interior {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  min-height: 0;
  overflow: hidden;
}

.galeria__foto {
  margin: 0;
}

.js .galeria {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows 320ms var(--curva-espacial),
    visibility 0s linear 320ms;
}

.js .galeria.esta-abierta {
  grid-template-rows: 1fr;
  visibility: visible;
  transition:
    grid-template-rows 320ms var(--curva-espacial),
    visibility 0s linear 0s;
}

/* Plegada y en reposo: el interior no se organiza, así las fotos con
   loading="lazy" no se piden hasta abrir (la distancia al viewport no basta
   porque el hueco está justo debajo del botón). Durante el cierre se
   mantiene visible para que la animación termine. */
.js .galeria:not(.esta-abierta):not(.esta-cerrando) .galeria__interior {
  content-visibility: hidden;
}

.js .galeria__foto {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 200ms var(--curva-color),
    transform 200ms var(--curva-espacial);
}

.js .galeria.esta-abierta .galeria__foto {
  opacity: 1;
  transform: none;
  transition:
    opacity 320ms var(--curva-color) calc(var(--i, 0) * 50ms),
    transform 320ms var(--curva-espacial) calc(var(--i, 0) * 50ms);
}

/* Las fotos salen de un interior que no se organizaba (content-visibility):
   no tienen estilo previo desde el cual animar, así que se les da uno. */
@starting-style {
  .js .galeria.esta-abierta .galeria__foto {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* ==========================================================================
   LISTAS DE PRECIOS Y SERVICIOS (planes)
   ========================================================================== */

/* Listas de precios: el monto es el marcador, alineado a la derecha. */
.precios,
.servicios {
  margin: 0;
  padding: 0;
  list-style: none;
}

.precios__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--linea-oscura);
}

.precios__item:last-child {
  border-bottom: 1px solid var(--linea-oscura);
}

.precios__item--destacado {
  padding-bottom: 1.25rem;
}

.precios__item--destacado .precios__nombre {
  font-family: var(--f-titular);
  font-size: 1.25rem;
}

.precios__detalle {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--f-texto);
  font-size: var(--t-nota);
  color: var(--topo);
}

.precios__valor,
.servicio__valor{
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.servicio {
  padding: 1.5rem 0;
  border-top: 1px solid var(--linea-oscura);
}

.servicio:last-child {
  padding-bottom: 0;
}

.servicio__cabeza {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
}

.servicio__nombre {
  margin: 0;
  font-family: var(--f-titular);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3;
}

.servicio__valor {
  margin: 0;
}

.servicio__duracion {
  margin-top: 0.25rem;
  font-size: var(--t-nota);
  letter-spacing: 0.02em;
  color: var(--topo);
}

.servicio__detalle {
  max-width: 40rem;
  margin-top: 0.75rem;
  color: var(--arena);
}

/* Trío: anchos desiguales (el del medio, el más ancho) y desfase vertical;
   sin bordes cerrados, solo una línea arriba del texto. */

/* ==========================================================================
   PLANES ALIADOS
   Lista editorial: nombre, descripción y precio en columnas desiguales,
   separadas por una línea arriba. Sin cajas ni fotos.
   ========================================================================== */

.aliados {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: var(--seccion) var(--margen) 0;
}

.aliados__cabecera {
  max-width: 44rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.aliados__cabecera .etiqueta {
  margin-bottom: var(--separacion-etiqueta);
}

.aliados__titulo {
  margin-bottom: 1.5rem;
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: -0.005em;
}

.aliados__intro {
  max-width: 42ch;
}

.aliados__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--linea);
}

.aliado {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
  column-gap: clamp(1.5rem, 4vw, 4rem);
  row-gap: 0.75rem;
  align-items: start;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-top: 1px solid var(--linea);
}

/* Escritorio: nombre | descripción + descargo | precio. */
.aliado__nombre {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-size: var(--t-h3);
  line-height: 1.2;
}

.aliado__cuerpo {
  grid-column: 2;
  grid-row: 1;
}

.aliado__descargo {
  grid-column: 2;
  grid-row: 2;
}

.aliado__precio {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.aliado__cuerpo {
  max-width: 40ch;
}

.aliado__descargo {
  max-width: 46ch;
  font-size: var(--t-nota);
  line-height: 1.5;
  color: var(--cafe);
}

.aliado__precio {
  margin: 0;
  color: var(--cafe);
  font-size: var(--t-nota);
  line-height: 1.5;
}

.aliado__valor {
  display: block;
  margin-bottom: 0.125rem;
  font-size: var(--t-texto);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}

.aliado__tarifas {
  display: grid;
  gap: 0.875rem;
}

.aliado__tarifas dt {
  font-family: var(--f-titular);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.aliado__tarifas dd {
  margin: 0.25rem 0 0;
}

.aliados__contacto {
  margin-top: 2rem;
  max-width: 60ch;
}

/* Tableta: nombre arriba; debajo, descripción + descargo | precio. */
@media (max-width: 899px) {
  .aliado {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .aliado__nombre {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .aliado__cuerpo {
    grid-column: 1;
    grid-row: 2;
  }

  .aliado__descargo {
    grid-column: 1;
    grid-row: 3;
  }

  .aliado__precio {
    grid-column: 2;
    grid-row: 2 / span 2;
    text-align: right;
  }
}

/* Celular: una columna en orden de lectura; el descargo al final. */
@media (max-width: 599px) {
  .aliado {
    grid-template-columns: minmax(0, 1fr);
  }

  .aliado__nombre,
  .aliado__cuerpo,
  .aliado__precio,
  .aliado__descargo {
    grid-column: 1;
    grid-row: auto;
    text-align: left;
  }

  .aliado__tarifas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   PIE DE PÁGINA (compartido por todas las páginas)
   ========================================================================== */

.pie {
  padding-inline: var(--margen);
  background: var(--noche);
  color: var(--topo);
}

.pie__interior {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem 3rem;
  align-items: end;
  max-width: calc(var(--ancho-max) - 2 * var(--margen));
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 4.5rem) 0 2.5rem;
  font-size: var(--t-nota);
}

.pie__logo {
  display: block;
  width: fit-content;
  transition: opacity 200ms var(--curva-color);
}

.pie__logo:hover {
  opacity: 0.8;
}

.pie__logo img {
  width: clamp(8rem, 6rem + 6vw, 11rem);
  height: auto;
}

.pie__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin: 0;
}

.pie__datos dt {
  margin-bottom: 0.25rem;
  font-family: var(--f-titular);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.pie__datos dd {
  margin: 0;
  color: var(--crema);
}

.pie__legal {
  grid-column: 1 / -1;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linea-oscura);
}

@media (max-width: 599px) {
  .pie__interior {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

/* ==========================================================================
   WHATSAPP FLOTANTE (compartido): texto visible, esquinas rectas, sin sombra.
   Hover: sube 2 px y cambia de tono (botón principal de house-style).
   ========================================================================== */

.whatsapp-flotante {
  position: fixed;
  right: calc(var(--margen) * 0.6);
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.75rem 1.15rem;
  border: 1px solid var(--crema);
  background: var(--noche);
  color: var(--crema);
  font-family: var(--f-titular);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    transform 220ms var(--curva-espacial),
    background-color 220ms var(--curva-color);
}

/* Espacio al final del pie para que el botón no tape la línea legal. */
.pie {
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
}

.whatsapp-flotante svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: round;
}

.whatsapp-flotante:hover {
  background-color: var(--tinta);
}

@media (hover: hover) and (pointer: fine) {
  .whatsapp-flotante:hover {
    transform: translateY(-2px);
  }
}

.whatsapp-flotante:active {
  transform: scale(0.94);
  transition-duration: 120ms;
}

.whatsapp-flotante:focus-visible {
  outline-color: var(--acento);
}

/* ==========================================================================
   PÁGINAS INTERIORES — componentes compartidos
   ========================================================================== */

/* ---------- Cabecera de página: título grande sobre una foto ancha ----------
   La foto vive en una variable de :root (imágenes de ambiente). Velo plano
   al 28 % para que el título se lea; debajo, ya sobre crema, la frase. */
.cabecera-pagina {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(16rem, 12rem + 18vw, 30rem);
  overflow: hidden;
  background: var(--cafe) var(--foto) var(--encuadre, center) / cover no-repeat;
  color: var(--crema);
  isolation: isolate;
}

.cabecera-pagina::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(21 18 16 / 0.28);
}

.cabecera-pagina__interior {
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 3rem var(--margen) clamp(2rem, 4vw, 3.5rem);
}

.cabecera-pagina__titulo {
  font-size: var(--t-h1);
  line-height: 1.02;
  letter-spacing: -0.01em;
}

/* Variante contenida: para una foto de poca resolución (la fachada de la
   cabaña, 683 px de origen). Nunca pasa de 1.5 veces su ancho nativo. */
.cabecera-pagina--contenida {
  max-width: min(64rem, calc(100% - 2 * var(--margen)));
  margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
  aspect-ratio: 16 / 9;
  min-height: 0;
}

/* Reseñas: la foto mide 1200 px de origen; la cabecera nunca la estira. */
.cabecera-pagina--contenida.cabecera-pagina--resenas {
  max-width: min(75rem, calc(100% - 2 * var(--margen)));
  aspect-ratio: 2.4;
}

.cabecera-pagina--contenida .cabecera-pagina__interior {
  padding-inline: clamp(1.25rem, 3vw, 2.5rem);
}

.frase-pagina {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: clamp(1.75rem, 3vw, 2.5rem) var(--margen) 0;
}

.frase-pagina p {
  max-width: 40ch;
  font-family: var(--f-titular);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  line-height: 1.35;
}

/* Fotos de cabecera por página (rutas en :root). */
.cabecera-pagina--quienes { --foto: var(--img-cab-quienes); --encuadre: 50% 30%; }
.cabecera-pagina--glamping { --foto: var(--img-cab-glamping); }
.cabecera-pagina--cabana { --foto: var(--img-cab-cabana); }
.cabecera-pagina--planes { --foto: var(--img-cab-planes); }
.cabecera-pagina--resenas { --foto: var(--img-cab-resenas); --encuadre: 50% 60%; }
.cabecera-pagina--ubicacion { --foto: var(--img-cab-ubicacion); }
.cabecera-pagina--contacto { --foto: var(--img-cab-contacto); }
.cabecera-pagina--reservar { --foto: var(--img-cab-reservar); }

@media (min-width: 1300px), (min-width: 700px) and (min-resolution: 1.5dppx) {
  .cabecera-pagina--quienes { --foto: var(--img-cab-quienes-grande); }
  .cabecera-pagina--glamping { --foto: var(--img-cab-glamping-grande); }
  .cabecera-pagina--cabana { --foto: var(--img-cab-cabana-grande); }
  .cabecera-pagina--planes { --foto: var(--img-cab-planes-grande); }
  .cabecera-pagina--ubicacion { --foto: var(--img-cab-ubicacion-grande); }
  .cabecera-pagina--contacto { --foto: var(--img-cab-contacto-grande); }
  .cabecera-pagina--reservar { --foto: var(--img-cab-reservar-grande); }
}

/* Una página que termina en una sección (sin cierre oscuro) deja aire
   antes del pie. */
main > .seccion:last-child {
  padding-bottom: var(--seccion);
}

/* ---------- Sección genérica ---------- */
.seccion {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: var(--seccion) var(--margen) 0;
}

.seccion__cabeza {
  max-width: 44rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.seccion__cabeza .etiqueta {
  margin-bottom: var(--separacion-etiqueta);
}

.seccion__titulo {
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: -0.005em;
}

.seccion__intro {
  max-width: 44ch;
  margin-top: 1.25rem;
}

.prosa {
  display: grid;
  gap: 1.25rem;
  max-width: 62ch;
}

/* ---------- Descripción de alojamiento: texto + foto ---------- */
.descripcion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: 2.5rem;
  align-items: center;
}

.descripcion__foto {
  margin: 0;
}

.descripcion__foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background-color: var(--topo);
}

.descripcion .datos {
  max-width: 28rem;
  margin-top: 2rem;
}

@media (max-width: 899px) {
  .descripcion {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Qué incluye: lista completa, líneas finas, dos columnas ---------- */
.incluye {
  columns: 2;
  column-gap: clamp(2rem, 5vw, 5rem);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linea);
}

.incluye li {
  break-inside: avoid;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--linea);
}

.incluye__detalle {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--t-nota);
  color: var(--cafe);
}

@media (max-width: 699px) {
  .incluye {
    columns: 1;
  }
}

/* ---------- Tabla de tarifas ---------- */
.tabla-scroll {
  overflow-x: auto;
}

.tarifas {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.tarifas caption {
  padding-bottom: 1rem;
  text-align: left;
  font-size: var(--t-nota);
  color: var(--cafe);
}

.tarifas th,
.tarifas td {
  padding: 1.1rem 1.5rem 1.1rem 0;
  border-top: 1px solid var(--linea);
  text-align: left;
  vertical-align: top;
}

.tarifas tbody tr:last-child > * {
  border-bottom: 1px solid var(--linea);
}

.tarifas thead th {
  font-family: var(--f-titular);
  font-size: var(--t-etiqueta);
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cafe);
  border-top: 0;
}

.tarifas tbody th {
  font-weight: 500;
}

.tarifas__precio {
  font-family: var(--f-titular);
  font-size: 1.375rem;
  white-space: nowrap;
}

/* Celular: cada fila de la tabla se apila (días, precio, descuentos) para
   no obligar a deslizar de lado. Las etiquetas salen de data-etiqueta. */
@media (max-width: 599px) {
  .tarifas {
    min-width: 0;
  }

  .tarifas thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .tarifas tr {
    display: grid;
    gap: 0.5rem;
    padding: 1.1rem 0;
    border-top: 1px solid var(--linea);
  }

  .tarifas tbody tr:last-child {
    border-bottom: 1px solid var(--linea);
  }

  .tarifas th,
  .tarifas td,
  .tarifas tbody tr:last-child > * {
    padding: 0;
    border: 0;
  }

  .tarifas td[data-etiqueta]::before {
    content: attr(data-etiqueta);
    display: block;
    margin-bottom: 0.2rem;
    font-family: var(--f-titular);
    font-size: var(--t-etiqueta);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--cafe);
  }
}

.tarifas__desc {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-nota);
}

.notas {
  display: grid;
  gap: 0.4rem;
  max-width: 60ch;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-nota);
  color: var(--cafe);
}

/* ---------- Acordeón «Para tener en cuenta» (<details>, sin JS) ---------- */
.acordeon {
  max-width: 52rem;
  border-top: 1px solid var(--linea);
}

.acordeon details {
  border-bottom: 1px solid var(--linea);
}

.acordeon summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 56px;
  padding: 1rem 0;
  font-family: var(--f-titular);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  list-style: none;
  cursor: pointer;
  transition: color 200ms var(--curva-color);
}

.acordeon summary::-webkit-details-marker {
  display: none;
}

.acordeon summary:hover {
  color: var(--cafe);
}

/* Marcador + / − en texto (sin íconos ni degradados). */
.acordeon summary::after {
  content: "+";
  flex: none;
  width: 1ch;
  font-family: var(--f-texto);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  text-align: center;
}

.acordeon details[open] summary::after {
  content: "−";
}

.acordeon__respuesta {
  display: grid;
  gap: 0.75rem;
  max-width: 62ch;
  padding: 0 0 1.5rem;
}

/* ---------- Galería en collage ----------
   Retícula de 12 columnas con piezas de anchos distintos en un ciclo de 5
   (7·5 / 4·5·3). Las primeras van a la vista; el resto, en la galería
   desplegable (excepción nombrada 0fr → 1fr). */
.collage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(11rem, 6rem + 14vw, 20rem);
  gap: clamp(0.5rem, 1.2vw, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.collage > li {
  min-width: 0;
}

.collage > li:nth-child(5n + 1) { grid-column: span 7; }
.collage > li:nth-child(5n + 2) { grid-column: span 5; }
.collage > li:nth-child(5n + 3) { grid-column: span 4; }
.collage > li:nth-child(5n + 4) { grid-column: span 5; }
.collage > li:nth-child(5n + 5) { grid-column: span 3; }

/* Cuando un grupo no completa el ciclo de 5, las filas se reparten para
   llenar las 12 columnas (sin huecos al final). */
@media (min-width: 700px) {
  .collage > li:only-child { grid-column: span 12; }
  .collage:has(> li:nth-child(3):last-child) > li:nth-child(1) { grid-column: span 5; }
  .collage:has(> li:nth-child(3):last-child) > li:nth-child(2) { grid-column: span 4; }
  .collage:has(> li:nth-child(3):last-child) > li:nth-child(3) { grid-column: span 3; }
  .collage:has(> li:nth-child(4):last-child) > li:nth-child(3) { grid-column: span 5; }
  .collage:has(> li:nth-child(4):last-child) > li:nth-child(4) { grid-column: span 7; }
}

.collage figure {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background-color: var(--topo);
}

.collage img,
.collage__ampliar {
  display: block;
  width: 100%;
  height: 100%;
}

.collage img {
  object-fit: cover;
  transition: transform 300ms var(--curva-espacial);
}

/* Botón que main.js pone alrededor de cada foto para ampliarla. */
.collage__ampliar {
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.collage__ampliar:focus-visible {
  outline-offset: -4px;
}

@media (hover: hover) and (pointer: fine) {
  .collage__ampliar:hover img {
    transform: scale(1.03);
  }
}

.collage + .galeria .collage {
  margin-top: clamp(0.5rem, 1.2vw, 1rem);
}

.galeria-pie {
  margin-top: 2rem;
}

@media (max-width: 699px) {
  .collage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(9rem, 40vw, 14rem);
  }

  .collage > li:nth-child(n) {
    grid-column: span 1;
  }

  .collage > li:nth-child(3n + 1),
  .collage > li:last-child:nth-child(3n + 2) {
    grid-column: span 2;
  }
}

/* ---------- Visor de fotos (<dialog>, lo crea main.js) ---------- */
.visor {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--noche);
  color: var(--crema);
  opacity: 1;
  transition: opacity 200ms var(--curva-color);
}

.visor::backdrop {
  background: rgb(21 18 16 / 0.92);
}

.visor[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.visor.esta-cerrando {
  opacity: 0;
  transition-duration: 150ms;
}

@starting-style {
  .visor[open] {
    opacity: 0;
  }
}

.visor__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--margen);
}

.visor__cuenta {
  font-size: var(--t-nota);
  font-variant-numeric: tabular-nums;
  color: var(--topo);
}

.visor__figura {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  gap: 0.75rem;
  min-height: 0;
  margin: 0;
  padding: 0 var(--margen);
}

.visor__img {
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  object-fit: contain;
  transform: scale(1);
  transition: transform 200ms var(--curva-espacial);
}

@starting-style {
  .visor[open] .visor__img {
    transform: scale(0.98);
  }
}

.visor__pie {
  max-width: 60ch;
  font-size: var(--t-nota);
  text-align: center;
  color: var(--arena);
}

.visor__nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 1rem var(--margen) 1.5rem;
}

.visor .boton {
  border-color: rgb(244 239 230 / 0.6);
  color: var(--crema);
}

.visor .boton:hover {
  background-color: rgb(244 239 230 / 0.12);
  border-color: var(--crema);
}

.visor :focus-visible {
  outline-color: var(--crema);
}

/* ---------- Cierre de página con Reservar ---------- */
.cierre {
  margin-top: var(--seccion);
  background: var(--noche);
  color: var(--crema);
}

.cierre__interior {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem 3rem;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: clamp(3.5rem, 7vw, 6rem) var(--margen);
}

.cierre__titulo {
  font-size: var(--t-h2);
  line-height: 1.1;
}

.cierre__texto {
  max-width: 46ch;
  margin-top: 1rem;
  color: var(--arena);
}

@media (max-width: 699px) {
  .cierre__interior {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

/* Cierre y pie son ambos noche: una línea los separa. */
main:has(> .cierre:last-child) + .pie .pie__interior {
  border-top: 1px solid var(--linea-oscura);
}

/* ---------- Paquetes de decoración: escalera ----------
   Cada paquete suma al anterior: anchos crecientes (1 · 1.12 · 1.3), la
   escalera sube hacia el más completo, que lleva fondo arena. Sin bordes
   cerrados: una línea arriba. El precio es el marcador. */
.paquetes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1.3fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: end;
  margin: 0;
  padding: 0;
  list-style: none;
}

.paquete {
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: 1.5rem clamp(1.25rem, 2.5vw, 2rem) 2rem;
  border-top: 1px solid var(--tinta);
}

.paquete:nth-child(1) { margin-bottom: clamp(0rem, 6vw, 5rem); }
.paquete:nth-child(2) { margin-bottom: clamp(0rem, 3vw, 2.5rem); }

.paquete--destacado {
  background: var(--arena);
}

.paquete__nombre {
  font-family: var(--f-titular);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cafe);
}

.paquete__precio {
  font-family: var(--f-titular);
  font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.paquete__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.paquete__lista li {
  padding: 0.55rem 0;
  border-top: 1px solid var(--linea);
}

.paquete__opcion {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--t-nota);
  color: var(--cafe);
}

.nota-plan {
  margin-top: 1.5rem;
  font-size: var(--t-nota);
  color: var(--cafe);
}

@media (max-width: 899px) {
  .paquetes {
    grid-template-columns: minmax(0, 1fr);
  }

  .paquete:nth-child(n) {
    margin-bottom: 0;
  }
}

/* Bloque con foto al lado (decoración, spa, fogata, río). */
.plan {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: 2rem;
  align-items: start;
}

.plan--invertido .plan__foto {
  order: -1;
}

.plan__foto {
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: var(--topo);
}

.plan__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 899px) {
  .plan {
    grid-template-columns: minmax(0, 1fr);
  }

  .plan--invertido .plan__foto {
    order: 0;
  }
}

/* En páginas claras, las listas de precios usan líneas de café. */
.seccion .precios__item,
.seccion .servicio {
  border-top-color: var(--linea);
}

.seccion .precios__item:last-child {
  border-bottom-color: var(--linea);
}

.seccion .precios__detalle,
.seccion .servicio__duracion {
  color: var(--cafe);
}

.seccion .servicio__detalle {
  color: var(--tinta);
}

/* ---------- Franja de datos (Quiénes somos) ---------- */
/* Seis datos en una retícula de 3 × 2 (nunca uno solo en una fila). */
.franja {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}

.franja li {
  padding: 1.1rem clamp(1rem, 2vw, 1.75rem);
  font-family: var(--f-titular);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  white-space: nowrap;
}

.franja li:not(:nth-child(3n + 1)) {
  border-left: 1px solid var(--linea);
}

.franja li:nth-child(3n + 1) {
  padding-left: 0;
}

.franja li:nth-child(-n + 3) {
  border-bottom: 1px solid var(--linea);
}

@media (max-width: 699px) {
  .franja {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .franja li,
  .franja li:nth-child(n) {
    padding: 0.9rem 0.75rem 0.9rem 0;
    border-left: 0;
    border-bottom: 1px solid var(--linea);
    white-space: normal;
  }

  .franja li:nth-child(even) {
    padding-left: 0.75rem;
    border-left: 1px solid var(--linea);
  }

  .franja li:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

.aclaracion {
  max-width: 46ch;
  margin-top: 2rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--tinta);
  font-family: var(--f-titular);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.4;
}

.franja + .prosa {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* ---------- Reseñas (manuales, de Airbnb) ---------- */
.resenas {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 5vw, 5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.resenas > li:nth-child(even) {
  margin-top: clamp(0rem, 6vw, 5rem);
}

.resena {
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--tinta);
}

.resena blockquote {
  margin: 0;
  font-family: var(--f-titular);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.45;
}

.resena figcaption {
  margin-top: 1.25rem;
  font-size: var(--t-nota);
  color: var(--cafe);
}

.resena__nombre {
  font-weight: 500;
  color: var(--tinta);
}

@media (max-width: 799px) {
  .resenas {
    grid-template-columns: minmax(0, 1fr);
  }

  .resenas > li:nth-child(even) {
    margin-top: 0;
  }
}

/* ---------- Lista de datos con etiqueta (acceso, contacto) ---------- */
.ficha {
  max-width: 52rem;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linea);
}

.ficha__fila {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: 0.5rem 2rem;
  align-items: baseline;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--linea);
}

.ficha dt {
  font-family: var(--f-titular);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cafe);
}

.ficha dd {
  margin: 0;
  max-width: 56ch;
}

@media (max-width: 599px) {
  .ficha__fila {
    grid-template-columns: minmax(0, 1fr);
  }
}

.accion {
  margin-top: 2.5rem;
}

/* Dato pendiente con forma de botón: NO es un enlace (no hay URL todavía). */
.boton-pendiente {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0.875rem 1.5rem;
  border: 1px dashed var(--cafe);
  color: var(--cafe);
  font-family: var(--f-titular);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---------- Formulario de reservar ---------- */
.reserva {
  display: grid;
  gap: 2rem;
  max-width: 44rem;
}

.campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.campos legend {
  margin-bottom: 0.75rem;
  padding: 0;
  font-family: var(--f-titular);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cafe);
}

.campo {
  display: grid;
  align-content: start;
  gap: 0.5rem;
}

.campo label {
  font-size: var(--t-nota);
  font-weight: 500;
}

.campo input {
  min-height: 48px;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--cafe);
  border-radius: 0;
  background: var(--crema);
  color: var(--tinta);
  font: inherit;
}

.campo input:focus-visible {
  outline-offset: 1px;
}

.campo__ayuda {
  font-size: var(--t-nota);
  color: var(--cafe);
}

.campos .opciones,
.campos__fila {
  grid-column: 1 / -1;
}

.opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

.opcion {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  cursor: pointer;
}

.opcion input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--tinta);
}

.reserva__aviso {
  max-width: 50ch;
  padding-left: 1.25rem;
  border-left: 1px solid var(--tinta);
}

.reserva__error {
  color: var(--acento);
  font-weight: 500;
}

/* Sin JS el formulario no puede armar el mensaje: se oculta el botón de
   enviar y se muestra el enlace directo (o el dato pendiente). */
.reserva__sin-js {
  display: none;
}

html:not(.js) .reserva__sin-js {
  display: block;
}

html:not(.js) .reserva__enviar {
  display: none;
}

@media (max-width: 599px) {
  .campos {
    grid-template-columns: 1fr;
  }
}

.campo textarea {
  min-height: 6rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--cafe);
  border-radius: 0;
  background: var(--crema);
  color: var(--tinta);
  font: inherit;
  resize: vertical;
}

.campo__opcional {
  font-weight: 400;
  color: var(--cafe);
}

.reserva__acepto {
  align-items: flex-start;
  font-size: var(--t-nota);
}

.reserva__acepto input {
  flex: none;
  margin-top: 0.2rem;
}

/* Campo trampa para robots: fuera de la vista. */
.reserva__trampa {
  position: absolute;
  left: -100vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.reserva__enviar:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* ---------- Calendario de disponibilidad (lo dibuja main.js) ----------
   Papel y líneas finas, como el resto del sitio: sin cajas redondeadas ni
   acento. Ocupada = arena y tachada; la estadía elegida = tinta. */
.calendario {
  grid-column: 1 / -1;
}

.calendario__barra {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.calendario__paso {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--cafe);
  background: var(--crema);
  color: var(--tinta);
  font: 400 1.5rem / 1 var(--f-texto);
  cursor: pointer;
  transition: background-color 200ms var(--curva-color);
}

.calendario__paso:hover:not(:disabled) {
  background-color: var(--arena);
}

.calendario__paso:disabled {
  opacity: 0.35;
  cursor: default;
}

.calendario__meses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2rem clamp(1.5rem, 4vw, 3rem);
}

.calendario__titulo {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: 0.5rem;
  font-family: var(--f-titular);
  font-size: 1.125rem;
}

.calendario__rejilla {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.calendario__semana {
  padding-bottom: 0.35rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  color: var(--cafe);
}

.dia {
  min-height: 44px;
  padding: 0;
  border: 1px solid transparent;
  background: none;
  color: var(--tinta);
  font: 500 var(--t-nota) / 1 var(--f-texto);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 150ms var(--curva-color), border-color 150ms var(--curva-color);
}

.dia:hover:not([aria-disabled]) {
  border-color: var(--tinta);
}

.dia[aria-disabled] {
  cursor: not-allowed;
}

.dia--pasado {
  color: var(--topo);
}

.dia--ocupada {
  background-color: var(--arena);
  color: var(--cafe);
  text-decoration: line-through 1px;
}

.dia--rango {
  background-color: var(--topo);
}

.dia--llegada,
.dia--salida {
  background-color: var(--tinta);
  color: var(--crema);
  text-decoration: none;
}

.dia:focus-visible {
  outline-offset: 1px;
}

.calendario__leyenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: var(--t-nota);
  color: var(--cafe);
}

.calendario__muestra {
  display: inline-block;
  width: 1rem;
  height: 1rem;
}

.calendario__muestra + .calendario__muestra,
.calendario__leyenda .calendario__muestra:not(:first-child) {
  margin-left: 1rem;
}

.calendario__muestra--ocupada {
  background-color: var(--arena);
  border: 1px solid var(--topo);
}

.calendario__muestra--elegida {
  background-color: var(--tinta);
}

.calendario__estado {
  min-height: 1.5em;
  font-size: var(--t-texto);
  color: var(--tinta);
}

/* ---------- Último paso: enviar por WhatsApp ---------- */
.reserva-lista {
  display: grid;
  justify-items: start;
  gap: 1rem;
  max-width: 44rem;
  padding: clamp(1.5rem, 4vw, 2.5rem) 0;
  border-top: 1px solid var(--tinta);
}

.reserva[hidden],
.campo[hidden],
.reserva-lista[hidden] {
  display: none;
}

.reserva-lista {
  scroll-margin-top: calc(var(--alto-barra) + 1.5rem);
}

.reserva-lista:focus {
  outline: none;
}

.reserva-lista__titulo {
  font-size: var(--t-h3);
  line-height: 1.2;
}

.reserva-lista__texto {
  max-width: 50ch;
}

.reserva-lista__resumen {
  font-weight: 500;
}

.reserva-lista__volver {
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--t-nota);
  cursor: pointer;
}

/* ==========================================================================
   MOTION REDUCIDO — el sitio queda quieto y completo
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .portada-inicio__foto::before,
  .portada-inicio__logo,
  .portada-inicio__lema {
    animation: none;
  }

  .entrada:hover .entrada__foto img,
  .entrada:active {
    transform: none;
  }

  .entrada__ver::after {
    transition: none;
  }

  .collage__ampliar:hover img,
  .visor__img {
    transform: none;
  }

  @starting-style {
    .visor[open] .visor__img {
      transform: none;
    }
  }

  .portada-inicio__video {
    display: none;
  }

  .menu__enlace:active,
  .menu-movil__boton:active {
    transform: none;
  }

  .menu__enlace::after,
  .menu__flecha,
  .enlace::after {
    transition: none;
  }

  /* El desplegable aparece sin desplazarse; conserva el fundido. */
  .menu__sub,
  .menu__grupo:hover .menu__sub,
  .menu__grupo:focus-within .menu__sub,
  .menu__grupo.esta-abierto .menu__sub {
    transform: none;
  }

  .enlace:active {
    transform: none;
  }

  .boton:hover,
  .boton:active,
  .boton--solido:hover,
  .whatsapp-flotante:hover,
  .whatsapp-flotante:active {
    transform: none;
  }

  /* Galería: abre y cierra de golpe; las fotos solo hacen un fundido corto. */
  .js .galeria,
  .js .galeria.esta-abierta {
    transition: none;
  }

  .js .galeria__foto,
  .js .galeria.esta-abierta .galeria__foto {
    transform: none;
    transition: opacity 150ms var(--curva-color);
  }

  @starting-style {
    .js .galeria.esta-abierta .galeria__foto {
      transform: none;
    }
  }
}