/* =============================================================================
   site.css — Estilos del sitio de Hotel La Gruta
   Se cargan antes que cualquier script; las capas botánicas se apoyan en el
   orden de apilamiento definido más abajo (buscar "CAPA VEGETAL").
   ============================================================================= */
:root {
  --ink:    #2B2B26;
  --soft:   #55554C;
  /* Dirección "Oliva boutique": traduce el verde saturado del logo real
     (#175916, H119° S60% L22%) a una familia más madura para interfaz —
     mismo hue en el orden de magnitud, saturación bajada y desplazada
     hacia el oliva en vez de solo apagada. Jerarquía: green-deep para
     énfasis/hover fuertes, green para identidad principal, green-lt para
     acento secundario donde el contraste lo permite (ver .room-card-name,
     único uso real — texto grande, 28px, umbral AA 3:1). */
  --green:      #5E723B;
  --green-deep: #303B21;
  --green-lt:   #7E8863;
  /* --gold quedaba idéntico a --green por accidente: una sola variable
     pretendía cubrir "acento cálido" tanto sobre fondos claros como
     oscuros, algo que ningún HEX puede resolver sin sacrificar contraste
     en alguno de los dos lados. Se reemplaza por dos tokens de la misma
     familia terracota (H24°): warm-on-light (4.65:1 sobre --paper) y
     warm-on-dark (4.65:1 sobre --ink), ambos AA para texto normal. */
  --warm-on-light: #A75F2F;
  --warm-on-dark:  #C78457;
  --paper:  #FBFAF6;
  --paper2: #F4F1E9;
  --white:  #FFFFFF;
  --muted:  #9A988C;
  --hair:   rgba(43,43,38,0.1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* Bloqueo de scroll con el menú abierto (ver setMenuOpen() en app.js).
   position:fixed en vez de overflow:hidden a secas: es lo único que
   también frena el rebote de iOS Safari. `top` lo fija JS al scrollY
   exacto de donde estaba el usuario, para poder devolverlo ahí al cerrar
   sin que la página "salte" al inicio. */
body.menu-lock, body.modal-lock { position: fixed; left: 0; right: 0; overflow: hidden; }
img { display: block; max-width: 100%; }
.imgc { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* ── CAPA VEGETAL PERIMETRAL (vines.js) ──
   Va ANCLADA AL DOCUMENTO, no a la ventana: así una rama que bordea un título
   sigue bordeándolo al hacer scroll. Con position:fixed sería un marco estático
   y se perdería la sensación de crecimiento. */
.vines-layer { position: absolute; top: 0; left: 0; z-index: 4; pointer-events: none; }
.vines-layer svg { display: block; }
.vines-layer path { fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ── OCLUSIÓN: la vegetación pasa POR DEBAJO de los bloques de lectura ──
   La capa vegetal vive en z-index 4. Las fotos y el mapa ya estaban por
   encima (.hero, .band, .wc-img, .room-card-media, .loc-map en z-index 6),
   y por eso nunca se veía vegetación cruzándolos. Los bloques de TEXTO, en
   cambio, no declaraban ni z-index ni fondo, así que quedaban por debajo y
   la vegetación les pasaba por encima: párrafos, formularios y llamadas a
   la acción con enredaderas cruzándolos.

   Se resuelve con el mismo mecanismo que ya usaba el proyecto —apilado y
   fondo opaco—, no con desenfoques ni efectos: la vegetación DESAPARECE
   debajo, no se difumina.

   Va sobre los contenedores INTERNOS, no sobre las secciones a sangre. Esa
   es la diferencia entre tapar y enmarcar: los internos llevan ancho máximo,
   así que la vegetación sigue asomando por los márgenes laterales, entre
   bloques y en las esquinas — que es donde se quiere ver.

   El fondo es var(--paper), el mismo del body, así que no se ve ningún
   rectángulo: lo único que cambia es qué tapa a qué. Deliberadamente NO se
   incluyen .gastro-in ni .band-in: esos van sobre foto y su sección ya
   ocluye desde z-index 6; pintarles papel encima rompería la foto.

   `footer` SALIÓ de esta lista a propósito (antes estaba). Elevar la
   sección entera —igual que un bloque de texto— era tratarla como "sección
   a sangre" al revés: tapaba TODO el rectángulo del footer, jardín incluido,
   en vez de sólo su texto. Lo que se protege ahora son sus dos contenedores
   internos (`.ft-top`, `.ft-bottom`, ver más abajo), con el mismo criterio
   de "contenedor interno sí, sección entera no" que ya regía para el resto:
   la vegetación puede cruzar el fondo oscuro del footer —el padding
   superior/inferior, el hueco entre columnas— pero no el texto. */
.statement, .rooms-inner, .rooms-top, .faq-head, .faq-sec details,
.loc-body, .loc-head, .rv-body, .rv-info, .rv-contact,
.exp-intro, .exp-note, .offer-strip, .jardin-sec, .reviews-sec {
  position: relative;
  z-index: 5;
  background: var(--paper);
}
/* `.welcome-grid` SALIÓ de esta lista (mismo motivo que el footer, ver
   arriba): es un collage con .wc-img absolutos y huecos de sobra entre
   ellos, y elevar la grilla ENTERA tapaba esos huecos igual que tapaba
   todo el rectángulo del footer — la vegetación no se notaba nada en la
   sección de bienvenida. Las fotos (`.wc-img`) ya se protegen solas en
   z-index 6; lo único que faltaba proteger es el texto central,
   `.wc-center` (ver su regla más abajo, ahora en z-index 5 en vez de 3). */

/* Orden de apilamiento del sitio:
      fondo → vegetación (z4) → contenido (flujo) → fotos y mapa (z6)
   Las secciones que SON una foto a sangre suben enteras; en las cards sube solo
   el bloque de imagen, para que las ramas puedan cruzar el texto de la card. */
.hero, .band, .gastro { z-index: 6; }
.wc-img, .room-card-media, .loc-map { z-index: 6; }

/* ── PRELOADER ──
   Por encima de todo, incluida .pt (8000): es lo primero que se pinta y lo
   último en desaparecer. #app-shell es todo lo demás (nav, menú, páginas);
   arranca en scale(1.03) mientras el preloader tapa la pantalla, y se asienta
   a scale(1) en el mismo momento en que el overlay se desvanece — el
   "zoom-out" de salida. */
.preloader {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper);
  transition: opacity .7s cubic-bezier(.76,0,.24,1);
}
.preloader.hide { opacity: 0; pointer-events: none; }
/* al reaparecer en cada cambio de página, sin transición: tiene que
   sincronizar con la cortina .pt, que cubre la pantalla de una, no con un
   fundido de por medio (showPreloader() en app.js saca esta clase en el
   frame siguiente, así que el fundido de salida de .hide no se pierde) */
.preloader.instant { transition: none; }
.preloader-mark {
  width: clamp(150px, 20vw, 230px); height: auto;
  opacity: 0; transform: scale(.95);
  animation: preloaderMark .9s ease forwards;
}
@keyframes preloaderMark { to { opacity: 1; transform: scale(1); } }

#app-shell.pre-reveal { transform: scale(1.03); }
#app-shell { transition: transform .7s cubic-bezier(.76,0,.24,1); }

html.no-preload .preloader { display: none; }

/* transition */
.pt { position: fixed; inset: 0; z-index: 8000; background: var(--paper2); transform: scaleY(0); transform-origin: bottom; pointer-events: none; }
.pt.in  { transform: scaleY(1); transition: transform .5s cubic-bezier(.76,0,.24,1); transform-origin: bottom; }
.pt.out { transform: scaleY(0); transition: transform .5s cubic-bezier(.76,0,.24,1); transform-origin: top; }

/* ── BOTÓN FLOTANTE DE WHATSAPP ──
   z-index bajo el menú (400) y el preloader (9000) a propósito: ambos lo
   tapan solos al abrirse, sin lógica extra. */
.wa-float {
  position: fixed; right: 24px; bottom: 24px; z-index: 200;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
  transition: transform .25s ease, box-shadow .25s ease;
}
.wa-float:hover { transform: scale(1.08); box-shadow: 0 8px 26px rgba(0,0,0,.28); }
.wa-float svg { width: 30px; height: 30px; fill: #fff; }
@media (max-width: 900px) {
  .wa-float { width: 52px; height: 52px; right: 16px; bottom: 16px; }
  .wa-float svg { width: 27px; height: 27px; }
}

/* ── NAV ──
   Barra ÚNICA, mismo comportamiento en todos los anchos: scrim de ancho
   completo (gradiente oscuro + blur) sobre foto/hero, o fondo papel
   translúcido vía `nav.dark` sobre contenido claro. Ver el aviso grande
   más abajo, después de `nav.dark`, antes de intentar un diseño distinto
   para desktop — ya se rompió dos veces por eso mismo. */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; padding: 30px 40px;
  background: linear-gradient(to bottom, rgba(15,14,10,.52) 0%, rgba(15,14,10,.22) 65%, rgba(15,14,10,0) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .35s ease;
}
.burger {
  justify-self: start; display: flex; flex-direction: column;
  gap: 6px; cursor: pointer; padding: 6px;
  opacity: 0; animation: fade 1s .4s forwards;
}
.burger span { display: block; width: 28px; height: 1.5px; background: #fff; transition: transform .45s cubic-bezier(.76,0,.24,1), opacity .3s, background .3s; }
.burger.open span:nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity: 0; }
.burger.open span:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }
/* El burger queda por encima del panel del menú (z-index 500 > 400): al
   abrir, sus barras (blancas por defecto) deben verse oscuras sobre el
   panel claro nuevo, sin depender de si nav.dark está activo. */
.burger.open span { background: var(--ink); }
/* Con el menú abierto solo debe quedar visible la "X" (burger), igual que
   la referencia: logo y botón de reservar se ocultan mientras dura. */
/* !important necesario: ambos elementos ya traen una animación de entrada
   (fade forwards) que fija su opacity final en 1 y gana sobre una regla
   normal con la misma especificidad. */
body:has(.menu.open) .nav-logo,
body:has(.menu.open) .nav-book { opacity: 0 !important; pointer-events: none; transition: opacity .25s; }
.nav-logo {
  justify-self: center; text-align: center;
  text-decoration: none;
  opacity: 0; animation: fade 1s .4s forwards;
}
/* El logo es verde sobre transparente; sobre el hero oscuro se fuerza a
   blanco con un filtro (nav.dark lo saca) — mismo criterio de color que ya
   usaba el texto, un solo archivo sirve para los dos fondos.
   Logo agrandado (34px -> 48px): el header gana algo de padding vertical
   para que siga respirando, y .nav-book sube de 11px a 13px — no al mismo
   tamaño del logo (se vería descompensado), sino a un punto medio entre su
   tamaño anterior y la escala del logo nuevo, para que ambos elementos del
   nav se sientan de la misma familia visual. */
.nav-logo-img { height: 48px; width: auto; display: block; margin: 0 auto; filter: brightness(0) invert(1); transition: filter .3s; }
.nav-logo small { display: block; font-size: 9px; letter-spacing: 4px; color: rgba(255,255,255,.7); margin-top: 7px; font-family: 'Jost',sans-serif; }
.nav-book {
  justify-self: end; display: flex; align-items: center; gap: 8px;
  font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase;
  color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.4);
  padding: 13px 28px; transition: all .3s;
  opacity: 0; animation: fade 1s .4s forwards;
}
.nav-book:hover { background: #fff; color: var(--ink); }
/* Sobre contenido claro (tras el hero, o en Ubicación que no tiene hero):
   fondo papel semitransparente con desenfoque, no el scrim oscuro. */
nav.dark {
  background: rgba(251,250,246,.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(43,43,38,.07);
}
nav.dark .burger span { background: var(--ink); }
nav.dark .nav-logo-img { filter: none; }
nav.dark .nav-logo small { color: var(--soft); }
nav.dark .nav-book { color: var(--ink); border-color: var(--hair); }
nav.dark .nav-book:hover { background: var(--ink); color: #fff; }

/* NO REINTRODUCIR el diseño de "chips translúcidos por elemento" en
   desktop (`.nav-logo`/`.nav-book`/`.burger` cada uno con su propio
   `background: rgba(...); backdrop-filter: blur(...)`, nav en sí
   transparente). Se probó DOS VECES — para dejar pasar la vegetación de
   fondo por detrás del nav — y las dos veces rompió el header:
   1) overlap real en mobile (los chips no entraban en el ancho
      disponible, ver Ronda 5 en ARQUITECTURA.md) — se corrigió
      encerrándolo en `@media (min-width:901px)`;
   2) en desktop cada chip es translúcido sobre `backdrop-filter:blur`,
      así que TOMA EL COLOR DE LO QUE HAY DETRÁS: sobre cielo azul se ve
      un botón azulado, sobre follaje uno verdoso — nunca el mismo color
      dos veces, reportado por la tesista como "se rompió" con captura
      del chip de Reservar en azul sobre el hero de Inicio.
   El nav vuelve a ser SIEMPRE el scrim de ancho completo (gradiente
   oscuro con blur sobre hero / papel translúcido vía nav.dark sobre
   contenido claro) en todos los anchos, sin distinción mobile/desktop —
   mismo color predecible en cualquier foto de fondo, cero riesgo de
   overlap porque ya no hay chips individuales compitiendo por espacio.
   Si se quiere que la vegetación se note cruzando el header, hace falta
   un enfoque que no dependa de recortar el fondo del nav (por ejemplo,
   bajar el z-index del nav solo en el tramo donde no hay texto encima, o
   animar la vegetación por detrás con opacidad reducida) — consultar con
   la tesista antes de tocar esto de nuevo. */

/* ── MENU ──
   El LAYOUT base (panel claro, lista centrada, sin la imagen lateral de
   antes) viene del patrón de referencia que trajo la tesista, con la
   identidad propia de La Gruta encima:
   - tipografía: 'Cormorant Garamond' (la misma serif de .hero-title) para
     los links, con el mismo recurso de cursiva al hover que ya usa
     .hero-title em — no una convención nueva, la que el sitio ya tenía;
   - color: acento oliva (--green) en vez del gris neutro del hover
     anterior, y el eyebrow uppercase+letter-spacing de --warm-on-light que
     ya usa .hero-eye sobre el hero;
   - el burger sigue haciendo de botón "X" al abrir (rotación de sus
     barras), así que no hace falta un cierre aparte.

   En mobile es una sola columna centrada, con el mapa (vertical, chico,
   ver .menu-map más abajo) apilado debajo de la lista — antes esa franja
   se quedaba vacía, con la lista de links flotando sola en medio de mucho
   aire sin usar. En desktop (≥901px) pasa a DOS columnas centradas como
   grupo (texto a la izquierda, mapa angosto a la derecha, `justify-
   content:center` con un gap fijo entre ambas) — no pegadas a los bordes
   del panel: el mapa es un acompañante chico, no un segundo bloque que
   reclama la mitad del ancho, así que el vacío alrededor del conjunto se
   lee como aire compuesto, no como espacio muerto. */
.menu { position: fixed; inset: 0; z-index: 400; pointer-events: none; overflow: hidden; }
.menu-panel { position: absolute; inset: 0; background: var(--paper); clip-path: circle(0% at 60px 40px); transition: clip-path .8s cubic-bezier(.76,0,.24,1); }
.menu.open { pointer-events: all; }
.menu.open .menu-panel { clip-path: circle(150% at 60px 40px); }
.menu-inner {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 24px; padding: 120px 40px 60px; opacity: 0;
}
.menu.open .menu-inner { opacity: 1; transition: opacity .5s .3s; }
.menu-col { display: flex; flex-direction: column; align-items: center; }
.menu-col-top { display: flex; flex-direction: column; align-items: center; }
/* Tracking bajado (6px → 4.5px en el eyebrow, 2px → 1.4px en contacto):
   el rastreo tan abierto de la primera versión leía más "cartel" que
   "boutique". Sigue siendo un acento uppercase chico, solo menos gritado. */
.menu-eye { font-family: 'Jost', sans-serif; font-size: 11px; letter-spacing: 4.5px; text-transform: uppercase; color: var(--warm-on-light); }
.menu-links { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 10px; }
.menu-item { overflow: hidden; padding: 3px 0; }
.menu-index { display: none; }
.menu-link {
  /* clamp más contenido (30–44px → 28–40px) y line-height más ceñido
     (1.5 → 1.22): la versión anterior tenía tanto aire entre líneas que
     la lista se leía suelta en vez de como un bloque compuesto. peso
     400 → 500: un poco más de presencia/contraste sin pasar a bold. */
  font-family: 'Cormorant Garamond', serif; font-size: clamp(28px,3.6vw,40px);
  font-weight: 500; color: var(--ink); text-decoration: none;
  display: inline-block; text-align: center; transform: translateY(120%);
  transition: transform .7s cubic-bezier(.33,1,.68,1), color .3s, font-style .3s;
  letter-spacing: .2px; line-height: 1.22;
  /* .menu-item recorta con overflow:hidden para el reveal de entrada
     (máscara del translateY) — sin este padding, el link mide justo su
     contenido en reposo y el translateX de la flecha al hover se sale de
     esa caja y queda cortado por el clip del padre. */
  padding-right: 10px;
}
/* La flechita es un ::after, no texto agregado al link: viaja gratis con
   el mismo transform:translateY del reveal de entrada (es parte de la
   misma caja). Más chica y más pegada que antes (17px/16px → 13px/10px):
   tiene que leerse como un remate discreto, no como un segundo elemento
   compitiendo con el peso de la serif grande. El link entero recicla el
   motivo "▸" que ya usa .nav-book ("▸ Reservar"): misma familia de
   acento, ahora como sufijo en vez de prefijo, y con su propio desliz
   —más corto también— al hover. */
.menu-link::after {
  content: '→'; display: inline-block; font-family: 'Jost', sans-serif;
  font-size: 13px; margin-left: 10px; color: var(--warm-on-light);
  transform: translateX(0); transition: transform .3s ease, color .3s ease;
  vertical-align: middle;
}
.menu-link:hover { color: var(--green); font-style: italic; }
.menu-link:hover::after { color: var(--green); transform: translateX(5px); }
.menu.open .menu-link { transform: translateY(0); }
.menu.open .menu-item:nth-child(1) .menu-link { transition-delay: .35s; }
.menu.open .menu-item:nth-child(2) .menu-link { transition-delay: .42s; }
.menu.open .menu-item:nth-child(3) .menu-link { transition-delay: .49s; }
.menu.open .menu-item:nth-child(4) .menu-link { transition-delay: .56s; }
.menu.open .menu-item:nth-child(5) .menu-link { transition-delay: .63s; }
/* margin-top baja de 28px a 18px: con la lista ya más compacta, el
   contacto se siente parte del mismo bloque en vez de una sección
   aparte pegada abajo. */
.menu-contact { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 18px; }
.menu-contact a { font-family: 'Jost', sans-serif; font-size: 12px; letter-spacing: 1.4px; color: var(--soft); text-decoration: none; text-transform: uppercase; transition: color .2s; }
.menu-contact a:hover { color: var(--warm-on-light); }

/* Mapa de ubicación real (Leaflet, mismas tiles y marcador que Ubicación
   — ver window.initMenuMap en map.js — nunca una imagen ni un iframe de
   Google Maps), interactivo (arrastre + zoom con botones) igual que el
   de Ubicación; solo la rueda del mouse sigue sin hacer zoom, por la
   misma regla de "nunca secuestrar el scroll de la página" que rige
   todos los mapas del sitio.

   VERTICAL a propósito, ya no horizontal: antes solo aparecía en
   desktop, estirado a lo ancho (flex:1) hasta el borde derecho del
   panel; en mobile no aparecía en absoluto y la lista de links quedaba
   flotando en medio de una franja larga de aire vacío. Ahora es una
   ventana angosta y alta en TODOS los anchos, apilada bajo la lista en
   mobile (llena justo esa franja) y a la derecha del texto en desktop —
   el mismo componente, sin duplicar media queries por tamaño. */
/* Más angosto que la ronda anterior (84vw/340px → 62vw/250px): el mapa
   acompaña, no protagoniza — una ventana chica y elegante, no un bloque
   que compite en peso con la lista de links. */
.menu-map {
  display: block; position: relative; width: min(62vw, 250px); margin: 8px auto 0;
  padding: 12px; background: var(--paper2);
  border: 1px solid var(--hair); box-shadow: 0 14px 34px rgba(43,43,38,.12);
}
/* "Marquito" tipo paspartú: un borde de aire color papel (--paper2, un
   tono por debajo de --paper para que se note contra el panel del menú)
   entre el filete y el mapa, más un filete fino en verde oliva pegado al
   mapa mismo — el mismo recurso de "ventana enmarcada" que ya usan las
   fotos del collage de bienvenida, pero sutil: nada de sombra dura ni
   marco grueso. Así el recuadro se lee aunque las tiles de Esri tarden
   en cargar (fondo gris claro casi igual al papel de fondo). */
.menu-map-frame { position: relative; height: min(44vh, 320px); overflow: hidden; border: 1px solid rgba(94,114,59,.4); cursor: grab; }
.menu-map-frame:active { cursor: grabbing; }
#menu-map-canvas { position: absolute; inset: 0; }
/* Arriba, no abajo: con el mapa angosto y vertical la atribución de
   Leaflet (obligatoria por licencia, ver "El mapa" en ARQUITECTURA.md) ya
   no cabe en su rincón inferior derecho sin invadir todo el ancho —en un
   marco ancho y bajo no se notaba, en uno angosto y alto sí— y tapaba
   esta etiqueta si las dos vivían abajo. */
.menu-map-tag { position: absolute; top: 14px; left: 14px; z-index: 401; background: var(--green); color: #fff; padding: 8px 16px; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; }

@media (min-width: 901px) {
  /* justify-content:center (antes space-between): con el mapa ya angosto
     —ya no compite por protagonismo— pegarlo al borde derecho dejaba un
     vacío muerto en el medio del panel en vez de aire compuesto. Centrado
     como grupo, con un gap generoso pero fijo entre las dos columnas, el
     "mucho blanco" queda repartido de forma pareja alrededor del bloque
     en vez de amontonado en una sola franja — es lo que lee como
     editorial/boutique en vez de vacío.
     padding vertical más chico (112px→92px arriba, 56px→48px abajo) para
     que el conjunto se sienta un poco más centrado verticalmente, no
     empujado hacia arriba. align-items:stretch sigue dándole a las dos
     columnas la misma altura completa del panel. */
  .menu-inner {
    flex-direction: row; align-items: stretch; justify-content: center;
    gap: clamp(64px, 9vw, 120px); padding: 92px clamp(40px, 6vw, 96px) 48px;
  }
  .menu-col { align-items: flex-start; text-align: left; flex: 0 0 auto; justify-content: center; }
  .menu-col-top { align-items: flex-start; }
  .menu-links, .menu-eye { align-items: flex-start; text-align: left; }
  .menu-contact { align-items: flex-start; }
  /* Angosto y fijo (antes min(26vw,360px), ahora más chico todavía): el
     mapa acompaña la composición, no la reparte a la mitad. Sigue siendo
     un rectángulo VERTICAL de verdad —alto por el align-self:stretch de
     abajo, angosto por este ancho— nunca una franja horizontal. */
  .menu-map { width: min(19vw, 260px); margin: 0; align-self: stretch; }
  /* Va DESPUÉS de la regla base (misma especificidad — una sola clase —
     así que en el cascade gana la que aparece después en el archivo, no
     alcanza con que esté dentro de un @media más específico): dentro de
     la columna estirada por align-items:stretch, .menu-map ya tiene una
     altura definida (la del panel completo, menos el padding vertical de
     .menu-inner), y el frame la hereda entera en vez de topar en un
     máximo fijo, para que el mapa se sienta alto sin ser ancho. */
  .menu-map-frame { height: 100%; }
}

/* pages */
.page { display: none; }
.page.active { display: block; }

/* ═══ HERO (fullscreen w/ availability bar, exact D'Angleterre) ═══ */
.hero { position: relative; height: 100vh; min-height: 680px; overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media::after { content: ''; position: absolute; inset: 0; background: rgba(30,28,22,.28); }
.hero-caption {
  position: absolute; top: 46%; left: 50%; transform: translate(-50%,-50%);
  z-index: 2; text-align: center; width: 100%;
}
.hero-eye { font-size: 11px; letter-spacing: 6px; text-transform: uppercase; color: #fff; margin-bottom: 14px; opacity: 0; animation: fadeUp .9s .6s forwards; }
.hero-title {
  font-family: 'Cormorant Garamond', serif; font-size: clamp(52px,7vw,104px);
  font-weight: 400; color: #fff; line-height: .95; letter-spacing: 1px;
  overflow: hidden;
}
/* max-width:100% — antes .hl (inline-block sin ancho propio) podía calcular
   su shrink-to-fit por encima del ancho real disponible en ciertos textos
   de una sola línea, provocando overflow horizontal en el hero de Inicio
   a 390px con el copy final v1. No afecta la máscara/animación existente,
   solo evita que el bloque exceda el ancho de .hero-caption. */
.hero-title .hl { overflow: hidden; display: inline-block; max-width: 100%; }
.hw { display: inline-block; transform: translateY(120%); animation: slideUp 1s cubic-bezier(.16,.84,.44,1) forwards; }
.hw:nth-child(1){animation-delay:.5s} .hw:nth-child(2){animation-delay:.65s}
.hero-title em { font-style: italic; }
/* text-shadow leve: único ajuste visual autorizado en el copy final v1,
   para que el subtítulo del hero de Inicio se lea mejor sobre el follaje
   claro de la foto sin agregar caja, blur ni tocar el overlay compartido
   por el resto de heroes (.hero-media::after). */
.hero-sub { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.85); max-width: 480px; margin: 22px auto 0; opacity: 0; animation: fadeUp .9s .85s forwards; text-shadow: 0 1px 4px rgba(0,0,0,.35); }

/* availability bar */
.avail {
  position: absolute; bottom: 46px; left: 50%; transform: translateX(-50%);
  z-index: 3; width: min(92%, 900px);
  display: grid; grid-template-columns: 1fr 1fr 1fr auto;
  background: rgba(255,255,255,.96); box-shadow: 0 20px 60px rgba(0,0,0,.15);
  opacity: 0; animation: fade .9s 1.2s forwards;
}
.avail-f { padding: 20px 26px; border-right: 1px solid var(--hair); display: flex; flex-direction: column; gap: 5px; }
.avail-l { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted); }
.avail-i, .avail-s { background: transparent; border: none; font-family: 'Jost',sans-serif; font-size: 14px; color: var(--ink); outline: none; appearance: none; width: 100%; cursor: pointer; }
.avail-btn { background: var(--ink); color: #fff; border: none; padding: 0 40px; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; cursor: pointer; transition: background .3s; white-space: nowrap; }
.avail-btn:hover { background: var(--green); }
.hero-down {
  position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%);
  z-index: 4; width: 52px; height: 52px; border-radius: 50%;
  background: var(--white); box-shadow: 0 10px 30px rgba(0,0,0,.12);
  display: flex; align-items: center; justify-content: center;
  color: var(--soft); font-size: 18px;
  opacity: 0; animation: fade .9s 1.4s forwards;
}

/* ═══ WELCOME COLLAGE (asymmetric, image 3) ═══ */
.welcome { position: relative; padding: 160px 40px; max-width: 1300px; margin: 0 auto; min-height: 90vh; }
/* Alto de grilla y ancla vertical de .wc-center calibrados juntos: con el
   texto real (párrafo largo), la caja de .wc-center mide ~453px de alto, y
   antes de este ajuste (grilla 720px, top:48%) su borde inferior invadía
   ~82px la foto .wc-4 (que ancla por bottom, así que sube con la grilla).
   Con 860px + top:43% queda ~30px de aire limpio entre ambas, sin tocar
   tamaño ni posición de wc-1/2/3 (anclan por top, ajenas a este cambio). */
.welcome-grid { position: relative; height: 860px; }
.wc-img { position: absolute; overflow: hidden; }
.wc-1 { width: 300px; height: 240px; top: 20px; left: 130px; }
.wc-2 { width: 300px; height: 360px; top: 150px; left: 0; }
.wc-3 { width: 340px; height: 300px; top: 120px; right: 60px; }
.wc-4 { width: 290px; height: 210px; bottom: 20px; left: 300px; }
.wc-center {
  position: absolute; top: 43%; left: 50%; transform: translate(-50%,-50%);
  text-align: center; z-index: 5; background: var(--paper);
  padding: 40px 48px;
}
.wc-script { font-family: 'Dancing Script', cursive; font-size: 40px; color: var(--soft); font-weight: 500; line-height: 1; }
.wc-logo { width: clamp(210px, 20vw, 320px); height: auto; margin: 4px auto 0; display: block; }
.wc-desc { font-size: 15px; line-height: 1.8; color: var(--soft); max-width: 300px; margin: 22px auto 0; }

/* ═══ SPACIOUS STATEMENT ═══ */
/* ── RITMO COMPOSITIVO ──
   El ritmo de Inicio es: hero centrado → welcome asimétrico → statement
   desplazado → habitaciones escalonadas → banda invertida → cierre.
   Todas las secciones desplazadas se apoyan en la MISMA retícula de 12
   columnas de 1240px: la asimetría sale de qué columnas ocupa cada bloque,
   no de márgenes inventados sección por sección. Eso es lo que separa una
   composición editorial de un collage. */
.statement {
  text-align: left;
  padding: 40px 40px 170px;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
/* Columnas 2-9 de 12: aire estrecho a la izquierda, generoso a la derecha.
   Ese vacío asimétrico es además por donde entra la vegetación. */
.statement .eye { grid-column: 2 / span 7; }
.statement h2   { grid-column: 2 / span 8; }
.statement .eye { font-size: 10px; letter-spacing: 5px; text-transform: uppercase; color: var(--warm-on-light); margin-bottom: 28px; }
.statement h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(30px,3.8vw,52px); font-weight: 300; line-height: 1.3; color: var(--ink); }
.statement h2 em { font-style: italic; color: var(--green-deep); }
.statement p { grid-column: 2 / span 8; font-size: 16px; line-height: 1.85; color: var(--soft); max-width: 640px; margin-top: 24px; }

/* ═══ ROOM CARDS (image 2 style) ═══ */
.rooms-sec { background: var(--paper2); padding: 140px 40px; }
.rooms-inner { max-width: 1240px; margin: 0 auto; }
.rooms-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 56px; }
.rooms-count { font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--soft); font-weight: 500; }
.rooms-head-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(32px,4vw,52px); font-weight: 300; color: var(--ink); }
.rooms-head-title em { font-style: italic; color: var(--green-deep); }
/* Desfase vertical entre columnas: rompe la simetría de espejo sin salirse
   de la retícula. Con 6 tarjetas produce un ritmo de ladrillo constante. */
.rooms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 64px; align-items: start; }
.rooms-grid > :nth-child(even) { margin-top: 96px; }
.room-card { background: var(--white); }
.room-card-media { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.room-card-media .imgc { transition: transform .8s cubic-bezier(.16,.84,.44,1); }
.room-card:hover .room-card-media .imgc { transform: scale(1.05); }
.room-card-arrows { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; opacity: 0; transition: opacity .3s; }
.room-card:hover .room-card-arrows { opacity: 1; }
.room-card-arrow { color: #fff; font-size: 24px; text-shadow: 0 1px 8px rgba(0,0,0,.4); cursor: pointer; }
.room-card-body { padding: 40px 32px 44px; text-align: left; }
.room-card-name { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; color: var(--green-lt); margin-bottom: 16px; }
.room-card-desc { font-size: 14px; line-height: 1.7; color: var(--soft); max-width: 380px; margin: 0 0 28px; }
.room-card-actions { display: flex; align-items: center; justify-content: flex-start; gap: 28px; }
.rc-book { background: var(--ink); color: #fff; border: none; padding: 14px 28px; font-family: 'Jost',sans-serif; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: background .3s; text-decoration: none; }
.rc-book:hover { background: var(--green); }
.rc-more { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--warm-on-light); padding-bottom: 4px; transition: color .2s; }
.rc-more:hover { color: var(--green); }

/* Línea de meta de una experiencia (duración · modalidad · precio): mismo
   lenguaje tipográfico que las etiquetas pequeñas del sitio (.rv-cl, .eye),
   entre la descripción y el botón de la tarjeta. */
.room-card-meta { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin: -14px 0 22px; }
.room-card-badge { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--ink); color: #fff; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; padding: 8px 14px; max-width: calc(100% - 28px); }

/* ═══ OPINIONES DE HUÉSPEDES (TripAdvisor + Booking.com, home) ═══
   Mismo lenguaje que .rooms-sec: .eye + h2 arriba, y debajo DOS paneles
   .review-platform en espejo (misma altura de header, misma tarjeta) para
   que ninguna plataforma se sienta "la secundaria" — la sinergia es a
   propósito, no un accidente de que compartan clase. Cada panel es su
   propio carrusel horizontal en miniatura (mismo patrón .reviews-track +
   flecha que ya usaba la versión de una sola plataforma). */
.reviews-sec { background: var(--paper2); padding: 120px 40px; }
.reviews-inner { max-width: 1180px; margin: 0 auto; }
.reviews-top { text-align: center; margin-bottom: 48px; }
.reviews-top .eye { font-size: 10px; letter-spacing: 5px; text-transform: uppercase; color: var(--warm-on-light); margin-bottom: 22px; }

/* Una sola columna siempre (Booking encima de TripAdvisor, en el orden
   del HTML) — pedido explícito: mismo apilado vertical de mobile
   también en desktop, en vez de las dos columnas lado a lado que traía
   antes. .review-platform mantiene min-width:0 aunque ya no comparta
   fila con otro grid item, por si el ancho vuelve a acortarse algún día. */
.reviews-platforms { display: grid; grid-template-columns: minmax(0,1fr); gap: 64px; }
.review-platform { min-width: 0; }

/* Header de cada plataforma: logo a la izquierda, score a la derecha —
   mismo layout para las dos, solo cambia el contenido interno del score
   (estrellas/5 para TripAdvisor, chip "Fantástico"/10 para Booking). */
.review-platform-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--hair); }
.platform-badge { display: flex; align-items: center; gap: 9px; font-family: 'Jost', sans-serif; font-size: 15px; font-weight: 500; letter-spacing: .3px; }
.platform-badge-ta { color: #34a853; }
.platform-badge-ta span { color: var(--ink); }
.platform-badge-bk { color: #003580; }
.platform-badge-bk span { color: var(--ink); }
.platform-score { display: flex; align-items: center; gap: 10px; }
.platform-score strong { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 500; color: var(--ink); }
.platform-score a { font-size: 12px; letter-spacing: .5px; color: var(--soft); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.platform-score a:hover { color: var(--green); }
.platform-tag { background: #003580; color: #fff; font-size: 10px; letter-spacing: .8px; text-transform: uppercase; padding: 4px 9px; }
.reviews-stars { position: relative; display: inline-block; width: 78px; height: 14px; background: repeating-linear-gradient(90deg, var(--hair) 0 14px, transparent 14px 16px); }
.reviews-stars-fill { position: absolute; inset: 0; display: block; background: repeating-linear-gradient(90deg, var(--green) 0 14px, transparent 14px 16px); }

.reviews-track-wrap { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; }
.reviews-track { display: flex; gap: 16px; overflow-x: auto; scroll-behavior: smooth; padding: 4px 4px 12px; scrollbar-width: none; min-width: 0; }
.reviews-track::-webkit-scrollbar { display: none; }
.review-card { flex: 0 0 208px; background: var(--white); border: 1px solid var(--hair); padding: 22px 20px; }
.review-card-stars { display: block; color: var(--green); font-size: 12px; letter-spacing: 2px; margin-bottom: 12px; }
.review-card-flag { display: block; font-size: 11px; letter-spacing: .3px; color: var(--muted); margin-bottom: 12px; }
.review-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.review-card-name { font-family: 'Cormorant Garamond', serif; font-size: 16px; color: var(--ink); }
.review-card-date { font-size: 11px; letter-spacing: .5px; color: var(--muted); white-space: nowrap; }
.review-card-text { font-size: 12.5px; line-height: 1.65; color: var(--soft); }
.reviews-arrow { flex: 0 0 auto; width: 38px; height: 38px; border: 1px solid var(--hair); background: var(--white); color: var(--ink); font-size: 14px; cursor: pointer; transition: background .3s, color .3s; }
.reviews-arrow:hover { background: var(--ink); color: #fff; }
.reviews-more { display: block; text-align: left; margin: 18px 0 0; width: fit-content; }

@media (max-width: 720px) {
  .reviews-sec { padding: 80px 24px; }
  .review-card { flex-basis: 220px; }
  .reviews-arrow { display: none; }
}

/* ═══ OFERTAS DE TEMPORADA (home) ═══
   Borde fino, sin fondo llamativo a propósito: es un aviso, no un banner. */
.offer-strip { padding: 90px 40px; }
.offer-strip-in { max-width: 860px; margin: 0 auto; border: 1px solid var(--hair); padding: 52px 40px; text-align: center; }
.offer-strip-in h3 { font-family: 'Cormorant Garamond', serif; font-size: clamp(24px,2.8vw,34px); font-weight: 400; color: var(--ink); margin-bottom: 16px; }
.offer-strip-in p { font-size: 14px; line-height: 1.7; color: var(--soft); max-width: 480px; margin: 0 auto 28px; }

/* ═══ EXPERIENCIAS ═══
   Reutiliza la retícula de 12 columnas de .statement (misma asimetría, mismo
   vacío por donde entra la vegetación) para la intro, y .rooms-grid/.room-card
   sin cambios para la grilla de tours: son clases ya genéricas, no específicas
   de habitaciones. */
.exp-intro { padding: 100px 40px 70px; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(12, 1fr); }
.exp-intro .eye { grid-column: 2 / span 7; font-size: 10px; letter-spacing: 5px; text-transform: uppercase; color: var(--warm-on-light); margin-bottom: 22px; }
.exp-intro-text { grid-column: 2 / span 8; font-size: 16px; line-height: 1.85; color: var(--soft); max-width: 640px; }

.exp-note { text-align: center; max-width: 680px; margin: 0 auto; padding: 90px 40px 130px; }
.exp-note p { font-size: 13px; line-height: 1.8; color: var(--muted); margin-bottom: 32px; }

/* ═══ EL JARDÍN (home) ═══
   Split imagen/texto: dos fotos superpuestas en un lado, texto en el otro.
   Mismo lenguaje que .statement/.loc-head (eye + h2), pero en dos columnas
   en vez de una retícula de 12, porque aquí el contrapeso es una foto real,
   no aire. */
.jardin-sec { padding: 150px 40px; }
.jardin-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.jardin-media { position: relative; height: 520px; }
.jardin-img { position: absolute; overflow: hidden; }
.jardin-img-1 { width: 76%; height: 68%; top: 0; left: 0; }
.jardin-img-2 { width: 56%; height: 56%; bottom: 0; right: 0; border: 8px solid var(--paper); }
.jardin-text .eye { font-size: 10px; letter-spacing: 5px; text-transform: uppercase; color: var(--warm-on-light); margin-bottom: 22px; }
.jardin-text h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(30px,3.8vw,48px); font-weight: 300; color: var(--ink); line-height: 1.25; margin-bottom: 24px; }
.jardin-text p { font-size: 15px; line-height: 1.85; color: var(--soft); max-width: 440px; }

/* ═══ GASTRONOMÍA (home) ═══
   Mismo esqueleto que .band (foto a sangre + overlay + texto encima), pero
   centrado en vez de desplazado a un costado, y con la fotografía partida en
   dos mitades en vez de una sola: entra el comedor y el plato a la vez, sin
   forzar una sola imagen a cargar dos historias. */
.gastro { position: relative; height: 78vh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.gastro-media { position: absolute; inset: 0; display: flex; }
.gastro-media > div { position: relative; flex: 1; overflow: hidden; }
.gastro::after { content: ''; position: absolute; inset: 0; background: rgba(30,28,22,.35); z-index: 1; }
.gastro-in { position: relative; z-index: 2; text-align: center; max-width: 620px; padding: 0 24px; }
.gastro-in h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(34px,4.5vw,60px); font-weight: 300; color: #fff; line-height: 1.2; margin-bottom: 20px; }
.gastro-in p { font-size: 15px; line-height: 1.8; color: rgba(255,255,255,.85); }
.gastro-note { font-size: 12px; color: rgba(255,255,255,.6); margin-top: 20px; }

/* ═══ PREGUNTAS FRECUENTES (home) ═══
   Acordeón nativo: <details>/<summary>, sin una línea de JS. El marcador
   por defecto del navegador se apaga con list-style + ::marker/
   ::-webkit-details-marker, y el chevron propio gira con el atributo
   [open], que el navegador ya mantiene solo. */
.faq-sec { padding: 140px 40px; max-width: 880px; margin: 0 auto; }
/* margin-bottom baja de 56px a 28px: con el espacio grande, el título
   quedaba flotando como su propia tarjeta separada de la lista en vez de
   leerse como el encabezado del mismo bloque (queja de la tesista, con
   captura). Menos aire + el border-top que ya trae el primer
   .faq-item (ver .faq-item:first-of-type) hacen que esa línea se sienta
   como el cierre natural del título, no como el arranque de un bloque
   aparte. */
.faq-head { margin-bottom: 28px; }
.faq-head .eye { display: block; font-size: 10px; letter-spacing: 5px; text-transform: uppercase; color: var(--warm-on-light); margin-bottom: 18px; }
.faq-head h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(32px,4vw,48px); font-weight: 300; color: var(--ink); }
.faq-item { border-bottom: 1px solid var(--hair); list-style: none; }
.faq-item::marker, .faq-item::-webkit-details-marker { display: none; }
.faq-item:first-of-type { border-top: 1px solid var(--hair); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 0; cursor: pointer; list-style: none; }
.faq-item summary::marker, .faq-item summary::-webkit-details-marker { display: none; }
/* min-width:0 + overflow-wrap: sin esto, un flex item de texto largo
   (".faq-q" es hijo de un summary display:flex) no se encoge por debajo
   de su ancho intrínseco — en una pregunta larga en mobile eso empuja el
   texto a desbordar el padding de .faq-sec y pegarse al borde de la
   pantalla en vez de envolver limpio dentro de la columna. */
.faq-q { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); min-width: 0; overflow-wrap: break-word; }
.faq-chevron { font-size: 15px; color: var(--warm-on-light); transition: transform .3s; flex-shrink: 0; }
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-a { padding: 0 0 30px; font-size: 14px; line-height: 1.8; color: var(--soft); max-width: 680px; overflow-wrap: break-word; }

/* ═══ FULL IMAGE BAND ═══ */
/* Invierte el desplazamiento del statement: allí el texto va a la izquierda,
   aquí a la derecha. Es el latido "invertido" del ritmo, y deja la mitad
   izquierda de la fotografía despejada. */
.band { height: 78vh; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: flex-end; padding-right: 9vw; }
.band::after { content: ''; position: absolute; inset: 0; background: rgba(30,28,22,.35); z-index: 1; }
.band-in { position: relative; z-index: 2; text-align: right; max-width: 620px; }
.band-in h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(34px,4.5vw,64px); font-weight: 300; color: #fff; line-height: 1.2; }
.band-in em { font-style: italic; }
/* CTA de cierre de Inicio: usa el mismo botón sólido que "Reservar" en las
   tarjetas de habitación (.rc-book) en vez de un link fantasma propio — es
   el punto de mayor intención de conversión de la página y no tenía la
   misma jerarquía que su equivalente en el resto del sitio. Solo el
   margen superior es propio de este lugar. */
.band-in .rc-book { margin-top: 28px; }

/* ═══ ROOMS PAGE hero uses same .hero + avail ═══ */
/* room list on rooms page — use same card grid */

/* ═══ LOCATION ═══ */
.loc-map { height: 76vh; position: relative; overflow: hidden; background: var(--paper2); }
#loc-map-canvas { position: absolute; inset: 0; background: var(--paper2); }

/* Leaflet apila sus paneles internos hasta z-index 800. `.loc-map` tiene
   z-index propio, así que esos valores quedan contenidos dentro de ella; pero
   la insignia y el enlace, que son hermanos del mapa, hay que subirlos por
   encima o el mapa se los come. */
.loc-overlay {
  position: absolute; left: 28px; bottom: 28px; z-index: 900;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
}
.loc-directions {
  background: var(--white); color: var(--ink); text-decoration: none;
  padding: 13px 22px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  box-shadow: 0 2px 18px rgba(30,28,22,.12); transition: background .25s, color .25s;
}
.loc-directions:hover { background: var(--green); color: #fff; }

/* Especificidad por encima de `.leaflet-marker-icon { display:block }`. */
.leaflet-marker-icon.loc-marker { display: flex; background: none; border: none; }

/* Controles y atribución, alineados con el resto del sitio. La atribución es
   obligatoria por licencia de OpenStreetMap y CARTO: no se elimina. Mismas
   reglas para el mapa de Ubicación (.loc-map) y la miniatura interactiva
   del menú (.menu-map-frame): son el mismo mapa, deben verse igual. */
.loc-map .leaflet-control-attribution,
.menu-map-frame .leaflet-control-attribution {
  background: rgba(251,250,246,.88); font-family: 'Jost', sans-serif;
  font-size: 10px; color: var(--muted); padding: 4px 8px;
}
.loc-map .leaflet-control-attribution a,
.menu-map-frame .leaflet-control-attribution a { color: var(--soft); }
.loc-map .leaflet-bar a,
.menu-map-frame .leaflet-bar a {
  background: var(--white); color: var(--ink);
  border-bottom-color: var(--hair); width: 34px; height: 34px; line-height: 34px;
}
.loc-map .leaflet-bar a:hover,
.menu-map-frame .leaflet-bar a:hover { background: var(--paper2); color: var(--green); }
.loc-map .leaflet-bar,
.menu-map-frame .leaflet-bar { border: none; box-shadow: 0 2px 18px rgba(30,28,22,.12); }
.loc-marker { display: flex; flex-direction: column; align-items: center; }
.loc-dot { width: 13px; height: 13px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 7px rgba(58,82,54,.18), 0 0 0 18px rgba(58,82,54,.08); animation: pulse 2s infinite; }
.loc-line { width: 1px; height: 44px; background: linear-gradient(to bottom,var(--green),transparent); }
.loc-tag { background: var(--green); color: #fff; padding: 9px 18px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; }
.loc-badge {
  position: relative;
  background: var(--paper); box-shadow: 0 20px 50px rgba(0,0,0,.2);
  padding: 20px 26px; display: flex; align-items: center; gap: 16px; max-width: 280px;
}
.loc-badge-n { font-family: 'Cormorant Garamond', serif; font-size: 52px; font-weight: 400; color: var(--green); line-height: 1; }
.loc-badge-t { font-size: 11px; line-height: 1.5; letter-spacing: .5px; color: var(--ink); text-transform: uppercase; }
.loc-body { padding: 140px 40px; max-width: 880px; margin: 0 auto; }
.loc-head { text-align: left; margin-bottom: 64px; max-width: 620px; }
.loc-head .eye { font-size: 10px; letter-spacing: 5px; text-transform: uppercase; color: var(--warm-on-light); margin-bottom: 18px; }
.loc-head h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(36px,4.5vw,60px); font-weight: 300; color: var(--ink); }
.loc-head h2 em { font-style: italic; color: var(--green-deep); }
.loc-fact { display: flex; gap: 30px; padding: 34px 0; border-bottom: 1px solid var(--hair); }
.loc-fact:first-of-type { border-top: 1px solid var(--hair); }
/* Antes un glifo grande en Cormorant Garamond (número o, más tarde, emoji);
   ahora un ícono de línea. min-width se conserva para que las tres filas
   seguían alineando su columna de texto igual que antes. */
.loc-fact-n { display: flex; align-items: center; min-width: 56px; color: var(--warm-on-light); }
.loc-fact-n svg { width: 26px; height: 26px; }
.loc-fact strong { display: block; font-size: 16px; font-weight: 400; color: var(--ink); margin-bottom: 5px; }
.loc-fact span { font-size: 14px; color: var(--soft); }
.contact-link { color: inherit; text-decoration: none; transition: color .2s, text-decoration-color .2s; }
.contact-link:hover {
  color: var(--green); text-decoration: underline;
  text-decoration-color: var(--warm-on-light); text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.contact-link:focus-visible {
  color: var(--green-deep); text-decoration: underline;
  text-decoration-color: var(--warm-on-light); text-decoration-thickness: 1px; text-underline-offset: 4px;
  outline: 1px solid var(--warm-on-light); outline-offset: 4px;
}
.loc-sub { font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--warm-on-light); margin: 72px 0 28px; }
.loc-dir-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.loc-dir-item { padding: 24px 0 0; border-top: 1px solid var(--hair); }
.loc-dir-t { font-family: 'Cormorant Garamond', serif; font-size: 26px; color: var(--green); display: block; margin-bottom: 8px; }
.loc-dir-item strong { display: block; font-size: 15px; font-weight: 400; color: var(--ink); margin-bottom: 4px; }
.loc-dir-item span:not(.loc-dir-t) { font-size: 13px; line-height: 1.6; color: var(--soft); }
.loc-nearby-list { display: flex; flex-wrap: wrap; gap: 14px 32px; }
.loc-nearby-list span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--soft); }
.loc-nearby-list svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--warm-on-light); }
@media (max-width: 900px) {
  .loc-dir-grid { grid-template-columns: 1fr; gap: 20px; }
  .loc-overlay { left: 16px; bottom: 16px; gap: 10px; }
  .loc-badge { padding: 14px 18px; gap: 12px; max-width: 220px; }
  .loc-directions { padding: 11px 17px; font-size: 10px; }
  .loc-badge-n { font-size: 38px; }
  .loc-badge-t { font-size: 10px; }
}

/* ═══ RESERVAS ═══ */
.rv-body { padding: 150px 40px; max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.3fr; gap: 90px; }
.rv-info h2 { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 300; color: var(--ink); line-height: 1.25; margin-bottom: 28px; }
.rv-info p { font-size: 15px; line-height: 1.8; color: var(--soft); margin-bottom: 32px; }
.rv-contact { display: flex; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid var(--hair); }
.rv-contact:first-of-type { border-top: 1px solid var(--hair); }
.rv-cl { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.rv-cv { font-size: 15px; color: var(--ink); }
.rv-form { position: relative; display: flex; flex-direction: column; }
.rv-required-note {
  position: absolute; top: -28px; right: 0;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--soft);
}
.rv-required-note span, .rv-required { color: var(--warm-on-light); }
.rv-required { margin-left: 3px; }
.rv-row { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.rv-field { padding-top: 26px; border-bottom: 1px solid var(--hair); display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.rv-field label { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--soft); }
.rv-field input, .rv-field select, .rv-field textarea { background: transparent; border: none; font-family: 'Jost',sans-serif; font-size: 15px; color: var(--ink); outline: none; padding: 8px 0 16px; appearance: none; width: 100%; resize: none; }
.rv-submit { margin-top: 40px; background: var(--ink); color: #fff; border: none; padding: 17px 46px; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; cursor: pointer; align-self: flex-start; transition: background .3s; }
.rv-submit:hover { background: var(--green); }

/* footer */
footer { background: var(--ink); padding: 90px 40px 40px; }
/* `footer` ya no se eleva entero por encima de la vegetación (ver la nota
   de OCLUSIÓN más arriba): sólo estos dos bloques de texto lo hacen, para
   que las enredaderas puedan cruzar el fondo oscuro del footer sin pasar
   por encima de una sola letra. */
.ft-top, .ft-bottom { position: relative; z-index: 5; }
.ft-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,.08); max-width: 1300px; margin: 0 auto; }
.ft-logo { display: block; margin-bottom: 14px; }
/* Fondo del footer siempre oscuro (var(--ink)): el logo se fuerza a blanco,
   a diferencia del nav que alterna según el fondo. */
.ft-logo-img { height: 38px; width: auto; filter: brightness(0) invert(1); }
.ft-logo small { display:block; font-size:8px; letter-spacing:4px; color:var(--warm-on-dark); margin-top:4px; font-family:'Jost',sans-serif; }
.ft-col h4 { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--warm-on-dark); margin-bottom: 18px; font-weight: 400; }
.ft-col a, .ft-col p { display: block; font-size: 13px; color: rgba(255,255,255,.5); text-decoration: none; margin-bottom: 10px; line-height: 1.6; }
.ft-col a:hover { color: var(--warm-on-dark); }
.ft-bottom { max-width: 1300px; margin: 0 auto; padding-top: 30px; display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,.25); }

/* reveal */
.rv-el { opacity: 0; transform: translateY(30px); transition: opacity 1s, transform 1s cubic-bezier(.16,.84,.44,1); }
.rv-el.on { opacity: 1; transform: none; }   /* `none`, no translateY(0): así la card deja de ser stacking context y su foto puede subir sobre la vegetación */

/* ── Revelado de texto al hacer scroll (títulos por palabra, párrafos en bloque) ──
   [data-reveal="words"] llega con su texto normal en el HTML; app.js lo
   envuelve palabra por palabra en tiempo de ejecución (.rw exterior con
   overflow:hidden de máscara, .rw-in interior es el que se traslada), igual
   truco que .hero-title .hl/.hw pero disparado por scroll en vez de por
   carga de página — por eso el <h1> del hero queda fuera de este sistema. */
.rw { display: inline-block; overflow: hidden; }
.rw-in { display: inline-block; transform: translateY(110%); opacity: 0; transition: transform .7s cubic-bezier(.16,.84,.44,1), opacity .7s cubic-bezier(.16,.84,.44,1); }
.rw-in.on { transform: translateY(0); opacity: 1; }

[data-reveal="fade"] { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1); }
[data-reveal="fade"].on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rw-in { opacity: 1; transform: none; transition: none; }
  [data-reveal="fade"] { opacity: 1; transform: none; transition: none; }
  .preloader, .preloader-mark, #app-shell { animation: none !important; transition: none !important; }
}

@keyframes fade { to { opacity: 1; } }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { to { transform: translateY(0); } }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 7px rgba(169,143,95,.2),0 0 0 18px rgba(169,143,95,.08)} 50%{box-shadow:0 0 0 12px rgba(169,143,95,.12),0 0 0 26px rgba(169,143,95,.04)} }

@media (max-width: 900px) {
  /* .welcome traía min-height:90vh de la maqueta desktop (necesario ahí
     porque .wc-center flota position:absolute sobre la grilla de fotos de
     860px) y nunca se desactivaba en mobile: con las fotos apiladas
     (mucho más bajas que 90vh) el navegador igual forzaba la sección a
     medir 90vh, dejando un bloque de aire vacío entero debajo del texto
     antes de la siguiente sección. En mobile la altura la da el
     contenido apilado, no un mínimo pensado para el collage flotante. */
  .welcome { min-height: 0; }
  .welcome-grid { height: auto; display: flex; flex-direction: column; gap: 16px; }
  .wc-img { position: relative; width: 100% !important; height: 240px !important; inset: auto !important; }
  /* En desktop .wc-center es una tarjeta chica flotando sobre las fotos:
     shrink-to-fit + padding:40px 48px (mucho horizontal, poco texto). En
     mobile pasa a un bloque de ancho completo dentro de .welcome-grid
     (flex-direction:column, align-items:stretch por defecto) — ese mismo
     padding le comía 96px de ancho al párrafo (48px por lado), y sumado
     al max-width:300px de .wc-desc (calibrado para la tarjeta angosta de
     desktop) lo aplastaba a ~214px: el texto envolvía en líneas cortas y
     el bloque salía mucho más alto de lo necesario. Se reduce el padding
     y se libera el ancho máximo del párrafo para que use el espacio real
     disponible (el de .welcome, ya con su propio padding de 24px). */
  .wc-center { position: relative; transform: none; top: auto; left: auto; margin: 20px 0; padding: 32px 24px; }
  .wc-desc { max-width: none; }
  .rooms-grid, .rv-body, .rv-row { grid-template-columns: 1fr; gap: 32px; }
  /* En una sola columna el desfase y los desplazamientos no aportan ritmo,
     solo desalinean. Se desactivan. */
  .rooms-grid > :nth-child(even) { margin-top: 0; }
  .statement { grid-template-columns: 1fr; padding-bottom: 110px; text-align: center; }
  .statement .eye, .statement h2, .statement p { grid-column: 1; max-width: none; }
  .exp-intro { grid-template-columns: 1fr; text-align: center; padding: 70px 24px 40px; }
  .exp-intro .eye, .exp-intro-text { grid-column: 1; max-width: none; }
  .jardin-sec { padding: 90px 24px; }
  .jardin-grid { grid-template-columns: 1fr; gap: 48px; text-align: center; }
  .jardin-media { height: 340px; }
  .jardin-text p { max-width: none; margin: 0 auto; }
  .gastro-media { flex-direction: column; }
  .faq-sec { padding: 90px 28px; }
  .faq-head { text-align: center; }
  .faq-a { max-width: none; }
  .band { justify-content: center; padding-right: 0; }
  .band-in { text-align: center; max-width: none; }
  .loc-head { text-align: center; max-width: none; }
  .avail { grid-template-columns: 1fr 1fr; }
  .ft-top { grid-template-columns: 1fr; }
  .offer-strip-in { padding: 40px 24px; }
  /* deja aire abajo del pie de página para que el botón flotante de WhatsApp
     no tape el último bloque de contacto/enlaces en pantallas chicas — va
     acá (después de la regla base de footer más arriba en el archivo) para
     que la cascada la respete: dentro de un @media que aparece ANTES perdía
     contra esa regla sin condición. */
  footer { padding-bottom: 110px; }
  /* Las flechas del carrusel de fotos dependían de :hover, que en touch no
     existe de forma confiable — sin esto, en móvil nadie las ve ni las usa. */
  .room-card-arrows { opacity: 1; }
}

/* ═══ MODAL "VER MÁS" DE HABITACIÓN ═══
   z-index 500: por encima del botón de WhatsApp (200) y del menú (400) —
   si algún día se abre uno encima del otro, el modal gana —, por debajo
   del preloader (9000, que solo se ve un instante en cada carga). La
   entrada/salida es opacity con la imagen en scale (evita el "salto" de
   display:none a flex): por eso [hidden] no basta solo, hace falta la
   clase .on con un frame de por medio (requestAnimationFrame en el JS)
   para que la transición sí se anime al abrir. */
.room-modal { position: fixed; inset: 0; z-index: 500; opacity: 0; transition: opacity .3s ease; }
.room-modal.on { opacity: 1; }
.room-modal[hidden] { display: none; }
.room-modal-backdrop { position: absolute; inset: 0; background: rgba(30,28,22,.55); }
.room-modal-panel {
  position: relative; margin: 5vh auto; width: min(92%, 880px); max-height: 90vh; overflow-y: auto;
  background: var(--white); display: grid; grid-template-columns: 1.1fr 1fr;
  transform: scale(.97); transition: transform .3s ease;
}
.room-modal.on .room-modal-panel { transform: scale(1); }
.room-modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 2; width: 36px; height: 36px;
  background: var(--white); border: 1px solid var(--hair); color: var(--ink); font-size: 14px; cursor: pointer;
}
.room-modal-close:hover { background: var(--ink); color: #fff; }
.room-modal-media { position: relative; aspect-ratio: 4/5; overflow: hidden; }
.room-modal-img { width: 100%; height: 100%; object-fit: cover; }
.room-modal-arrows { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
.room-modal-arrow { width: 38px; height: 38px; border: none; background: rgba(255,255,255,.85); color: var(--ink); font-size: 15px; cursor: pointer; }
.room-modal-arrow:hover { background: #fff; }
.room-modal-dots { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 7px; }
.room-modal-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); }
.room-modal-dot.on { background: #fff; }
.room-modal-body { padding: 48px 40px; display: flex; flex-direction: column; }
.room-modal-name { font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 400; color: var(--green-lt); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 18px; }
.room-modal-desc { font-size: 14px; line-height: 1.8; color: var(--soft); margin-bottom: 28px; }
.room-modal-amenities { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 36px; }
.room-modal-amenities span { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .3px; color: var(--soft); }
.room-modal-amenities svg { width: 18px; height: 18px; color: var(--warm-on-light); }
.room-modal-actions { margin-top: auto; }
.room-modal-book { display: inline-block; }
@media (max-width: 720px) {
  .room-modal-panel { grid-template-columns: 1fr; margin: 0; width: 100%; max-height: 100vh; min-height: 100vh; }
  .room-modal-media { aspect-ratio: 4/3; }
  .room-modal-body { padding: 32px 24px 40px; }
}