/* ============================================================
   SAVEGRE MOUNTAIN HOTEL, NATURAL RESERVE & SPA
   Hoja de estilos principal — rediseño orientado a conversión

   Paleta de marca extraída del CSS de producción de savegre.com.
   Regla de oro: el bronce (--c-bronze) se usa ÚNICAMENTE para
   acciones de reserva. Ningún otro elemento compite con él.

   Índice
   01. Tokens
   02. Reset y base
   03. Utilidades de layout
   04. Botones
   05. Barra superior y header
   06. Navegación móvil
   07. Hero
   08. Widget de reservas (markup de Orbe)
   09. Barra de confianza
   10. Reserva directa
   11. Encabezados de sección
   12. Habitaciones
   13. Amenidades
   14. Paquetes
   15. Experiencias
   16. Tours
   17. Reserva forestal
   18. Spa y menú de precios
   19. Gastronomía
   20. Blog
   21. Galería y lightbox
   22. Reseñas
   23. Banda CTA
   24. Footer
   25. Acciones flotantes
   26. Prosa (políticas)
   27. Animaciones
   28. Responsive
   29. Accesibilidad
   ============================================================ */

/* ============================================================
   00. FUENTES — alojadas por nosotros
   ------------------------------------------------------------
   Antes venían de fonts.googleapis.com y fonts.gstatic.com, y esas
   dos peticiones transmitían la IP del visitante a Google en cada
   una de las 37 páginas. Sin tercero no hay consentimiento que
   pedir, y de paso desaparece un origen externo del camino crítico.

   Son los MISMOS ficheros que servía Google —el subconjunto latin de
   cada familia, peso y estilo—, así que las métricas no cambian y el
   texto no se recoloca.

   font-display: swap — el texto se lee con la fuente de respaldo
   mientras llega la definitiva, en vez de quedarse invisible.

   tools-verificar-fuentes.py comprueba glifo a glifo que estos
   ficheros traen los 25 caracteres no ASCII que el sitio publica.
   ============================================================ */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-600-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/poppins-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/poppins-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/poppins-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/poppins-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/poppins-700-normal.woff2') format('woff2');
}

/* ============================================================
   01. TOKENS
   ============================================================ */
:root {
  /* Marca */
  --c-forest:      #21443D;
  --c-forest-700:  #1A3630;
  --c-forest-900:  #11252C;
  --c-bronze:      #BB7A36;
  /* El bronce de marca da 3,53:1 sobre blanco: cumple para texto grande
     (≥24 px, o ≥18,7 px en negrita) pero NO para cuerpo ni enlaces.
     Estas dos variantes conservan el tono exacto —mismo H y S— y sólo
     bajan la luminosidad.
       --c-bronze-txt   texto pequeño y enlaces   5,15:1 sobre blanco
       --c-bronze-btn   fondo con texto blanco    4,53:1
     El color de marca NO cambia: sigue usándose en display, iconos,
     bordes y cifras grandes. */
  --c-bronze-txt:  #96622B;
  --c-bronze-btn:  #A26A2F;
  --c-bronze-600:  #A0662A;
  --c-bronze-200:  #F0C88A;
  --c-bronze-300:  #E0AC6B;
  --c-olive:       #9EA45E;

  /* Fondos */
  --c-cream:       #E6DFCC;
  --c-sand:        #F4F0E6;
  --c-paper:       #FBF9F4;
  --c-white:       #FFFFFF;

  /* Texto */
  --c-ink:         #16241F;
  --c-ink-soft:    #5B655F;
  --c-ink-faint:   #707872;   /* era #8A928C: 3,20:1, no llegaba */
  --c-line:        rgba(33, 68, 61, 0.14);
  --c-line-strong: rgba(33, 68, 61, 0.28);

  /* Estado */
  --c-error:       #B3402B;
  --c-error-soft:  #E9A899;   /* error legible sobre foto/oscuro */
  --c-whatsapp:    #25D366;
  --c-overlay:     rgba(17, 37, 44, 0.46);

  /* El visor. El fondo es casi opaco a propósito: la foto es lo que se
     mira y la página de detrás sólo distrae. Los dos tonos de botón son
     blanco sobre ese fondo, al 14 % y al 26 %. */
  --c-visor-fondo:       rgba(11, 24, 29, 0.965);
  --c-visor-boton:       rgba(255, 255, 255, 0.14);
  --c-visor-boton-alto:  rgba(255, 255, 255, 0.26);
  --c-visor-borde:       rgba(255, 255, 255, 0.38);

  /* Tipografía */
  --f-sans:  'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --f-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  --t-display: clamp(2.1rem, 5vw, 3.7rem);
  --t-h1:      clamp(2rem, 4.8vw, 3.2rem);
  --t-h2:      clamp(1.6rem, 3.4vw, 2.5rem);
  --t-h3:      clamp(1.15rem, 2vw, 1.45rem);
  --t-lede:    clamp(1rem, 1.5vw, 1.15rem);

  /* Layout */
  --topbar-h:    38px;
  --header-h:    76px;
  --shell-h:     76px;   /* alto real del bloque fijo; en escritorio suma la topbar */
  --container:   1240px;
  --container-narrow: 860px;
  --gutter:      1.25rem;

  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-pill: 999px;

  --sh-sm:   0 2px 10px rgba(17, 37, 44, 0.07);
  --sh-md:   0 8px 30px rgba(17, 37, 44, 0.10);
  --sh-lg:   0 18px 50px rgba(17, 37, 44, 0.16);
  --sh-dock: 0 20px 60px rgba(17, 37, 44, 0.22);

  --ease:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:   0.28s;
}

/* ============================================================
   02. RESET Y BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  /* 100 %, no 16px. Fijar la raíz en píxeles anula la preferencia de
     tamaño de texto del navegador, y con ella todo el trabajo de usar
     rem: quien configuró texto grande seguía recibiendo 16. WCAG 1.4.4. */
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--shell-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--f-sans);
  font-weight: 400;
  color: var(--c-ink);
  background: var(--c-white);
  line-height: 1.7;
  overflow-x: hidden;
  overflow-x: clip;   /* clip no crea contenedor de scroll: Safari pierde toques en elementos fijos con hidden */
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--c-forest); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--c-bronze-txt); }

ul, ol { list-style: none; }
address { font-style: normal; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 { line-height: 1.18; font-weight: 600; letter-spacing: -0.015em; }

::selection { background: var(--c-bronze); color: var(--c-white); }

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

/* Oculto a la vista, presente para el lector de pantalla. Nunca
   display:none — eso lo sacaría del árbol de accesibilidad, que es
   justo el defecto corregido en .booking-error. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0);            /* respaldo para navegadores viejos */
  clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: 1rem; z-index: 3000;
  background: var(--c-bronze-btn); color: var(--c-white);
  padding: 0.75rem 1.25rem; border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-size: 0.85rem; font-weight: 600;
}
.skip-link:focus { top: 0; color: var(--c-white); }

/* ============================================================
   03. UTILIDADES DE LAYOUT
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow { max-width: var(--container-narrow); }

.section        { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section-tight  { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section-cream  { background: var(--c-sand); }
.section-paper  { background: var(--c-paper); }
.section-forest { background: var(--c-forest); color: var(--c-white); }
.section-dark   { background: var(--c-forest-900); color: var(--c-white); }

.eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-bronze-txt);
  margin-bottom: 0.85rem;
}
.eyebrow--onDark { color: var(--c-bronze-300); }

.lede { font-size: var(--t-lede); color: var(--c-ink-soft); line-height: 1.75; }
.lede--onDark { color: rgba(230, 223, 204, 0.82); }

.rule {
  width: 54px; height: 3px;
  background: var(--c-bronze);
  border-radius: 2px;
  margin: 1.1rem 0;
}
.rule--center { margin-inline: auto; }

/* ============================================================
   04. BOTONES
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.8rem 1.7rem;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg    { flex: none; }

/* --- LA acción de reserva. Bronce, y sólo aquí. --- */
.btn-book {
  background: var(--c-bronze-btn);
  border-color: var(--c-bronze-btn);
  color: var(--c-white);
  box-shadow: 0 6px 20px rgba(187, 122, 54, 0.34);
}
.btn-book:hover {
  background: var(--c-bronze-600);
  border-color: var(--c-bronze-600);
  color: var(--c-white);
  box-shadow: 0 10px 28px rgba(187, 122, 54, 0.45);
}

/* --- Secundarios --- */
.btn-forest { background: var(--c-forest); border-color: var(--c-forest); color: var(--c-white); }
.btn-forest:hover { background: var(--c-forest-900); border-color: var(--c-forest-900); color: var(--c-white); }

.btn-outline { background: transparent; border-color: var(--c-line-strong); color: var(--c-forest); }
.btn-outline:hover { background: var(--c-forest); border-color: var(--c-forest); color: var(--c-white); }

.btn-ghost { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.6); color: var(--c-white); backdrop-filter: blur(6px); }
.btn-ghost:hover { background: var(--c-white); border-color: var(--c-white); color: var(--c-forest); }

.btn-light { background: var(--c-white); border-color: var(--c-white); color: var(--c-forest); }
.btn-light:hover { background: var(--c-cream); border-color: var(--c-cream); color: var(--c-forest-900); }

.btn-whatsapp { background: var(--c-whatsapp); border-color: var(--c-whatsapp); color: var(--c-white); }
.btn-whatsapp:hover { background: #1da851; border-color: #1da851; color: var(--c-white); }

/* --- Tamaños --- */
.btn-lg    { padding: 1rem 2.2rem; font-size: 0.98rem; }
.btn-sm    { padding: 0.55rem 1.15rem; font-size: 0.8rem; }
.btn-block { width: 100%; }

/* Enlace con flecha */
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--c-forest);
}
.link-arrow::after {
  content: '→';
  transition: transform var(--dur) var(--ease);
}
.link-arrow:hover::after { transform: translateX(5px); }
.link-arrow--onDark { color: var(--c-bronze-300); }
.link-arrow--onDark:hover { color: var(--c-white); }

/* ============================================================
   05. BARRA SUPERIOR Y HEADER
   ============================================================ */
.site-shell { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; }

/* Sobre el héroe la cabecera es transparente y el menú va en blanco. Sin
   velo, su contraste depende de qué fotografía haya detrás — es decir,
   no está garantizado, y con fotos nuevas puede empeorar sin que nadie
   lo note. Este degradado asegura el mínimo pase lo que pase.
   No aplica cuando la cabecera es sólida: ahí ya hay fondo blanco. */
.site-shell:not(.scrolled):not(.solid)::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(17, 37, 44, 0.55), rgba(17, 37, 44, 0));
  pointer-events: none;
}

.topbar {
  height: var(--topbar-h);
  background: var(--c-forest-900);
  color: rgba(230, 223, 204, 0.72);
  font-size: 0.78rem;
  display: none;
}
.topbar-inner { display: flex; align-items: center; justify-content: space-between; height: var(--topbar-h); gap: 1rem; }
.topbar-contact { display: flex; align-items: center; }
.topbar-contact a { padding: 0 1.15rem; border-right: 1px solid rgba(230,223,204,0.16); }
.topbar-contact a:first-child { padding-left: 0; }
.topbar-contact a:last-child { border-right: none; }
.topbar-contact a { color: inherit; display: inline-flex; align-items: center; gap: 0.4rem; }
.topbar-contact a:hover { color: var(--c-bronze-300); }
.topbar-note { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--c-bronze-300); font-weight: 500; }

.site-header {
  height: var(--header-h);
  background: transparent;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-shell.scrolled .site-header { background: var(--c-white); box-shadow: 0 2px 24px rgba(17, 37, 44, 0.13); }

/* Páginas internas: header sólido desde el inicio */
.site-shell.solid .site-header { background: var(--c-white); box-shadow: 0 2px 24px rgba(17, 37, 44, 0.10); }

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h); gap: 1rem;
}

.logo { flex: none; }
.logo img { height: 48px; width: auto; transition: filter var(--dur) var(--ease); }
/* El logo original es oscuro: sobre el hero transparente lo pasamos a blanco */
.site-shell:not(.scrolled):not(.solid) .logo img { filter: brightness(0) invert(1); }

.main-nav { display: none; }
.nav-list { display: flex; align-items: center; gap: 0; }
.nav-link {
  position: relative;
  display: block;
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.92);
  transition: color var(--dur) var(--ease);
}
.site-shell.scrolled .nav-link,
.site-shell.solid .nav-link { color: var(--c-ink); }

.nav-link::after {
  content: '';
  position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.15rem;
  height: 2px; background: var(--c-bronze);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link:hover { color: var(--c-bronze-txt); }
.nav-link[aria-current="page"] { color: var(--c-bronze-txt); }

.header-actions { display: flex; align-items: center; gap: 0.6rem; }

/* Selector de idioma */
.lang-toggle {
  display: flex; align-items: center; gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--r-pill);
}
.site-shell.scrolled .lang-toggle,
.site-shell.solid .lang-toggle { border-color: var(--c-line-strong); }

/* El selector dejó de ser <button> y pasó a <span> + <a> reales, para
   funcionar sin JavaScript. Lo añadido aquí es sólo lo necesario para
   que un <a> se vea exactamente igual que se veía el <button>:
   quitar el subrayado y el color de enlace heredados. Ningún espaciado,
   tamaño ni color nuevo. */
.lang-btn {
  background: none; border: none; cursor: pointer;
  text-decoration: none;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.site-shell.scrolled .lang-btn,
.site-shell.solid .lang-btn { color: var(--c-ink-soft); }
.lang-btn:hover:not(.active) { color: var(--c-bronze-txt); }
.lang-btn.active { background: var(--c-forest); color: var(--c-white) !important; }

.header-book { display: none; }

/* A 375 px el grupo idioma + hamburguesa medía 197 px y se salía de la pantalla. */
@media (max-width: 400px) {
  .header-inner { gap: 0.5rem; }
  .logo img { height: 40px; }
  .header-actions { gap: 0.4rem; }
  .lang-btn { padding: 3px 7px; }
}
@media (max-width: 340px) {
  .logo img { height: 34px; }
  .lang-btn { padding: 3px 4px; font-size: 0.65rem; }
}

/* Hamburguesa */
.hamburger {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 9px 8px;
  background: none; border: none; cursor: pointer;
  border-radius: var(--r-sm);
  touch-action: manipulation;   /* sin espera de doble toque: un toque = un clic */
  -webkit-transform: translateZ(0);   /* capa propia: Safari no pierde la zona táctil tras el scroll */
  -webkit-tap-highlight-color: transparent;
}
.hamburger span {
  display: block; height: 2px; border-radius: 2px;
  background: var(--c-white);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-shell.scrolled .hamburger span,
.site-shell.solid .hamburger span { background: var(--c-ink); }
.hamburger.open span { background: var(--c-ink); }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   06. NAVEGACIÓN MÓVIL
   ============================================================ */
.nav-backdrop {
  position: fixed; inset: 0;
  background: rgba(17, 37, 44, 0.55);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
  z-index: 999;
}
.nav-backdrop.show { opacity: 1; visibility: visible; }

.main-nav.open {
  display: block;
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(86vw, 340px);
  background: var(--c-white);
  box-shadow: var(--sh-lg);
  padding: calc(var(--shell-h) + 1.5rem) 1.5rem 2rem;
  overflow-y: auto;
  z-index: 1001;
  animation: slideIn var(--dur) var(--ease);
}
.main-nav.open .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
.main-nav.open .nav-link {
  color: var(--c-ink);
  padding: 0.95rem 0.25rem;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--c-line);
}
.main-nav.open .nav-link::after { display: none; }
.main-nav.open .nav-book { display: block; margin-top: 1.5rem; }
.nav-book { display: none; }

.nav-drawer-contact { display: none; }
.main-nav.open .nav-drawer-contact {
  display: block;
  margin-top: 1.75rem; padding-top: 1.5rem;
  border-top: 1px solid var(--c-line);
  font-size: 0.85rem; color: var(--c-ink-soft);
}
.nav-drawer-contact a { display: block; margin-bottom: 0.4rem; color: var(--c-ink-soft); }
.nav-drawer-contact a:hover { color: var(--c-bronze-txt); }

@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* ============================================================
   07. HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  background: var(--c-forest-900);
  isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* EL VELO DEL HERO ESTÁ CALIBRADO CONTRA BLANCO PURO. NO LO BAJES.
   ------------------------------------------------------------------
   Todo el texto del hero es blanco y va sobre una fotografía. Calibrar
   contra las fotos actuales sería inútil: la primera foto nueva y clara
   rompe el contraste sin que nadie se entere. Así que el suelo se fija
   contra el peor fondo posible, #FFFFFF. Si pasa sobre blanco, pasa
   sobre cualquier fotografía que exista o llegue a existir.

   La capa PLANA es la que manda, porque el degradado vale cero en la
   franja central —justo donde están la insignia y el subtítulo—. Medido
   sobre blanco, con texto blanco encima:

     plana 0.52  →  3.37:1   ← lo que había: la insignia daba 4.01 y el
     plana 0.60  →  4.29:1      subtítulo 3.96, los dos por debajo de 4.5
     plana 0.62  →  4.56:1   ← mínimo que cumple
     plana 0.64  →  4.86:1   ← elegido, con margen

   El degradado se conserva y suma por encima: arriba llega a 0.74
   (≈6.7:1) y abajo a 0.79 (≈7.9:1), que es donde van la barra y la
   navegación.

   Bajar 0.64 rompe WCAG 1.4.3 en la portada y en las nueve páginas con
   hero. Si hay que aclarar la foto, se aclara la foto o se le pone
   sombra al texto — el suelo de contraste no se mueve. */
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: rgba(17, 37, 44, 0.64);
  background-image:
    linear-gradient(to bottom, rgba(17,37,44,0.28) 0%, rgba(17,37,44,0) 40%, rgba(17,37,44,0.42) 100%);
}

.hero-content {
  position: relative;
  color: var(--c-white);
  text-align: center;
  padding-top: calc(var(--shell-h) + 2.5rem);
  padding-bottom: 4.5rem;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-pill);
  padding: 0.4rem 1.1rem;
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em;
  margin-bottom: 1.5rem;
}

.hero-title {
  font-size: var(--t-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
  max-width: 18ch;
  margin: 0 auto 1.1rem;
  text-shadow: 0 2px 6px rgba(0,0,0,0.45), 0 6px 34px rgba(0,0,0,0.4);
}
.hero-title em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--c-bronze-200);
}
.hero-sub {
  font-size: clamp(1rem, 1.9vw, 1.2rem);
  font-weight: 300;
  max-width: 620px;
  margin-inline: auto;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 2px 6px rgba(0,0,0,0.5), 0 4px 20px rgba(0,0,0,0.35);
  text-wrap: pretty;

  /* Misma construcción que .hero-badge —desenfoque, borde de 1 px y
     radio— para que se lean como la misma familia. Pero el TINTE es
     oscuro, no claro: sobre una fotografía, un velo blanco sube la
     luminosidad del fondo y REDUCE el contraste con el texto blanco.
     El objetivo aquí es legibilidad, así que el velo tiene que ir en la
     dirección contraria.

     El 0,65 no es estético sino calculado: es la opacidad a la que el
     texto blanco mantiene 5,04:1 incluso si detrás hubiera un punto
     BLANCO PURO. Y lo garantiza el color de fondo por sí solo, sin
     depender de que el navegador soporte backdrop-filter. Así el
     contraste deja de depender de qué fotografía se ponga mañana. */
  display: inline-block;
  background: rgba(17, 37, 44, 0.65);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-lg);
  padding: 0.85rem 1.5rem;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; margin-top: 2rem; }

.hero-scroll {
  position: absolute; left: 50%; bottom: 1.5rem;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.hero-scroll::after {
  content: ''; width: 1px; height: 34px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.7), transparent);
  animation: scrollHint 2.2s var(--ease) infinite;
}
@keyframes scrollHint { 0%,100% { opacity: 0.25; transform: scaleY(0.55); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }

/* --- Hero compacto de páginas internas --- */
.page-hero {
  position: relative;
  min-height: clamp(420px, 56vh, 580px);
  display: flex; align-items: flex-end;
  background: var(--c-forest-900);
  isolation: isolate;
  margin-bottom: 0;
}
.page-hero .hero-media { z-index: -2; }
.page-hero::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  /* 0.64, por la misma razón y el mismo cálculo que .hero::after: ver el
     comentario largo de ahí arriba. Estas nueve páginas llevan el título
     sobre la foto y el mismo suelo se les aplica. */
  background: rgba(17, 37, 44, 0.64);
  background-image:
    linear-gradient(to bottom, rgba(17,37,44,0.3) 0%, rgba(17,37,44,0) 45%, rgba(17,37,44,0.4) 100%);
}
.page-hero-content {
  position: relative;
  color: var(--c-white);
  padding-top: calc(var(--shell-h) + 2.5rem);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
  width: 100%;
}
.page-hero-title {
  font-size: var(--t-h1);
  font-weight: 700;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin-bottom: 0.6rem;
  text-shadow: 0 2px 6px rgba(0,0,0,0.45), 0 6px 30px rgba(0,0,0,0.35);
}
.page-hero-sub {
  font-size: var(--t-lede);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.95);
  max-width: 620px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
  text-wrap: pretty;
}

/* La aclaración bajo el subtítulo del héroe. LLEVA SU PROPIO FONDO y no
   se conforma con el velo de la sección, y eso está medido: con sólo el
   velo de 0,64, el texto crema cae a 3,67:1 sobre una zona blanca de la
   fotografía —por debajo de 4,5— y sube a 13,59:1 sobre una oscura. Una
   frase que el hotel necesita que se lea no puede depender de qué toque
   detrás. Con el 78 % propio, el peor caso es 9,46:1.

   Es `inline-block` a propósito: la caja abraza al texto en vez de
   cruzar la pantalla, así se lee como una nota y no como otro párrafo. */
.page-hero-nota {
  display: inline-block;
  margin: 0.9rem 0 0;
  padding: 0.55rem 0.95rem;
  border-radius: var(--r-sm);
  background: rgba(17, 37, 44, 0.78);
  color: var(--c-cream);
  font-size: 0.88rem;
  line-height: 1.45;
  max-width: 52ch;
}

/* La miga va en blanco PLENO, el mismo color que el título del héroe.
   Con rgba(255,255,255,0.62) se atenuaba a sí misma sobre un velo que ya
   está calibrado para que el título pase por los pelos, y fallaba AA en 6
   de las 9 páginas de sección: 3,37:1 en /tours/ con el 80 % de su caja por
   debajo de 4,5.
   Peor todavía: `.breadcrumb span` alcanzaba también al NOMBRE DE LA PÁGINA,
   no sólo al separador. Ese elemento quedaba en 0,62 × 0,5 = 0,31 de alfa y
   medía entre 1,94:1 y 2,63:1, con el 100 % de su caja por debajo, en las
   nueve. La regla se acota al separador, que es el único decorativo. */
.breadcrumb { font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-white); margin-bottom: 0.9rem; }
.breadcrumb a { color: inherit; }
/* El hover y el foco, por el mismo motivo que el color normal: el bronce
   sobre el velo del héroe daba 2,87:1 en /tours/ y el aro de foco 1,66:1,
   por debajo del 3:1 que pide 1.4.11. Los dos pasan a blanco, que ya está
   medido en 5,85:1 en el peor de los nueve héroes y no depende de la foto.
   El subrayado mantiene la señal de «esto es un enlace» ahora que el color
   del hover coincide con el del reposo. */
.breadcrumb a:hover { color: var(--c-white); text-decoration: underline; }
.breadcrumb a:focus-visible { outline-color: var(--c-white); }
.breadcrumb span[aria-hidden="true"] { margin: 0 0.45rem; opacity: 0.5; }

/* ============================================================
   08. BUSCADOR DE DISPONIBILIDAD (markup de Orbe)

   Va integrado en el hero, sobre la fotografía: etiquetas en
   versalitas blancas y campos blancos, al estilo del tema que
   sirve de referencia. Se estiliza el markup original sin
   alterarlo: .form-body / .frm-row / .resformcol / .field /
   .gui-input / .field-icon / .field.select / .arrow / .edades /
   .button-reserva
   ============================================================ */
.hero-booking {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: clamp(1.75rem, 4vw, 2.75rem) auto 0;
  text-align: left;
}

/* -- Rejilla: `display:contents` alinea los .resformcol de
      distintas .frm-row en una sola línea sin tocar el HTML -- */
.hero-booking .form-body { display: grid; gap: 0.85rem; }
.hero-booking .frm-row   { display: contents; }
.hero-booking .clearfix  { display: none; }
.hero-booking .resformcol,
.hero-booking .colm { float: none !important; width: auto !important; min-width: 0; }

.hero-booking .field-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-white);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  margin-bottom: 0.4rem;
}
.hero-booking .field-label:empty { display: none; }

.hero-booking .field { position: relative; display: block; }

.hero-booking .gui-input,
.hero-booking select {
  width: 100%;
  height: 56px;
  padding: 0 1rem;
  background: var(--c-white);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--c-ink);
  appearance: none;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(17, 37, 44, 0.14);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hero-booking .prepend-icon .gui-input { padding-left: 2.9rem; }
.hero-booking .gui-input::placeholder { color: var(--c-ink-faint); font-weight: 500; letter-spacing: 0.04em; }

.hero-booking .gui-input:focus-visible,
.hero-booking select:focus-visible {
  /* El aro translúcido de antes daba menos de 3:1 contra el campo
     blanco: bonito, pero invisible para quien navega con teclado. Se
     mantiene como refuerzo y el indicador real es el outline. */
  outline: 3px solid var(--c-bronze-btn);
  outline-offset: 2px;
  border-color: var(--c-bronze-btn);
  box-shadow: 0 0 0 4px rgba(162, 106, 47, 0.28);
}
.hero-booking .gui-input:focus,
.hero-booking select:focus {
  border-color: var(--c-bronze-btn);
}
.hero-booking .gui-input.invalid { border-color: var(--c-error); box-shadow: 0 0 0 4px rgba(179, 64, 43, 0.3); }

/* Icono de calendario: sustituye a Font Awesome con SVG en CSS,
   así el markup original (<i class="fa fa-calendar">) se conserva. */
.hero-booking .field-icon {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 2.9rem;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.hero-booking .field-icon .fa {
  width: 18px; height: 18px;
  background-color: var(--c-bronze-btn);
  -webkit-mask: var(--icon-cal) center / contain no-repeat;
          mask: var(--icon-cal) center / contain no-repeat;
}
:root {
  --icon-cal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Flecha del <select> (reemplaza el <i class="arrow">) */
.hero-booking .field.select { position: relative; }
.hero-booking .field.select .arrow {
  position: absolute; right: 1rem; top: 50%;
  width: 13px; height: 13px;
  transform: translateY(-50%);
  background-color: var(--c-ink-faint);
  -webkit-mask: var(--icon-chevron) center / contain no-repeat;
          mask: var(--icon-chevron) center / contain no-repeat;
  pointer-events: none;
}

/* Edades de menores (oculto por defecto en el markup original) */
.hero-booking .edades {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 0.85rem;
}
.hero-booking .edades > div { flex: 1 1 140px; }
.hero-booking .labelChild { display: block; }

/* Botón del motor de reservas */
.hero-booking .button-reserva {
  width: 100%;
  height: 56px;
  padding: 0 1.9rem;
  background: var(--c-bronze-btn);
  border: none;
  border-radius: var(--r-pill);
  color: var(--c-white);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(187, 122, 54, 0.42);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hero-booking .button-reserva:hover {
  background: var(--c-bronze-600);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(187, 122, 54, 0.5);
}
.hero-booking .button-reserva:active { transform: translateY(0); }

.booking-error {
  grid-column: 1 / -1;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--c-error-soft);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
/* NO display:none. Un elemento oculto así no existe en el árbol de
   accesibilidad, y un role="alert" que aparece y recibe su texto en el
   mismo instante no se anuncia de forma fiable: la región viva tiene que
   estar YA presente cuando cambia su contenido.
   Verificado: con display:none el elemento daba enArbol=false.
   Se reserva el alto en vez de ocultarlo, y así tampoco salta el layout
   cuando aparece el mensaje. */
.booking-error:empty {
  min-height: 1.2em;
  margin: 0;
  padding: 0;
}

.booking-alt {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.35rem 0.9rem;
  margin-top: 1.1rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  text-align: center;
}
.booking-alt a { color: var(--c-white); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.booking-alt a:hover { color: var(--c-bronze-200); }

/* .booking-alt nació para el héroe: blanco con sombra sobre fotografía.
   Se reutilizó en dos bloques de fondo claro —la portada y las ocho
   páginas internas— donde el blanco sobre crema daba 1,05:1. No era
   poco contraste: el enlace era literalmente invisible. */
.booking-alt--claro {
  color: var(--c-ink-soft);
  text-shadow: none;
}
.booking-alt--claro a { color: var(--c-forest); }
.booking-alt--claro a:hover { color: var(--c-bronze-txt); }

/* ============================================================
   09. BARRA DE CONFIANZA
   ============================================================ */
.trust-strip { padding: 2rem 0 0; }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 0.75rem;
}
.trust-item {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.8rem; font-weight: 500; line-height: 1.35;
  color: var(--c-ink-soft);
}
.trust-item svg { flex: none; width: 22px; height: 22px; color: var(--c-bronze); }
.trust-item strong { display: block; color: var(--c-ink); font-weight: 600; }

/* ============================================================
   10. RESERVA DIRECTA
   ============================================================ */
.direct-grid { display: grid; gap: 1.25rem; }
.direct-card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 1.75rem 1.5rem;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.direct-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--c-bronze); }
.direct-icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: rgba(187, 122, 54, 0.12);
  color: var(--c-bronze);
  margin-bottom: 1rem;
}
.direct-icon svg { width: 24px; height: 24px; }
.direct-card h3 { font-size: 1rem; margin-bottom: 0.4rem; color: var(--c-forest); }
.direct-card p  { font-size: 0.87rem; color: var(--c-ink-soft); line-height: 1.65; }

/* ============================================================
   11. ENCABEZADOS DE SECCIÓN
   ============================================================ */
.section-head { max-width: 640px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: var(--t-h2); color: var(--c-forest); text-wrap: balance; }
.section-head p  { margin-top: 0.85rem; font-size: var(--t-lede); color: var(--c-ink-soft); text-wrap: pretty; }
.section-head--onDark h2 { color: var(--c-white); }
.section-head--onDark p  { color: rgba(230, 223, 204, 0.82); }

/* ============================================================
   12. HABITACIONES
   ============================================================ */
.rooms-grid { display: grid; gap: 1.75rem; }

.room-card {
  display: flex; flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.room-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--c-line-strong); }

.room-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.room-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.room-card:hover .room-media img { transform: scale(1.07); }

.room-tag {
  position: absolute; top: 0.9rem; left: 0.9rem;
  background: var(--c-bronze-btn); color: var(--c-white);
  padding: 0.28rem 0.85rem;
  border-radius: var(--r-pill);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}

.room-body { display: flex; flex-direction: column; flex: 1; padding: 1.75rem 1.5rem 1.5rem; text-align: center; }
.room-name { font-size: var(--t-h3); color: var(--c-forest); margin-bottom: 0.6rem; }
.room-desc { font-size: 0.87rem; color: var(--c-ink-soft); line-height: 1.7; margin-bottom: 1.35rem; }

/* Características: una por fila, separadas por filete */
.room-specs { margin-bottom: 1.5rem; border-top: 1px solid var(--c-line); }
.room-specs li {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.68rem 0.25rem;
  border-bottom: 1px solid var(--c-line);
  font-size: 0.83rem;
  color: var(--c-ink-soft);
}
.spec-ico { flex: none; width: 19px; height: 19px; color: var(--c-bronze); }

.room-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.35rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.28rem 0.7rem;
  background: var(--c-sand);
  border-radius: var(--r-pill);
  font-size: 0.73rem; font-weight: 500;
  color: var(--c-forest);
}
.chip svg { width: 13px; height: 13px; }

.room-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: auto; justify-content: center; }
.room-actions .btn { flex: 1 1 130px; }

/* --- Detalle de habitación (página interna) --- */
.room-detail { display: grid; gap: 2rem; align-items: start; }
.room-detail + .room-detail { margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--c-line); }

.room-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
.room-gallery figure { margin: 0; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 3/2; }
.room-gallery figure:first-child { grid-column: 1 / -1; aspect-ratio: 16/9; }
.room-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.room-gallery figure:hover img { transform: scale(1.05); }

.room-detail-body h2 { font-size: var(--t-h2); color: var(--c-forest); margin-bottom: 0.35rem; }
.room-detail-body .lede { margin-bottom: 1.5rem; }
/* El CTA cierra la ficha: va DESPUÉS de la tira, no dentro de la
   columna de texto, donde quedaba por encima de ella. La tira pertenece
   a la descripción de la habitación; el botón cierra el bloque. Su
   `order: 4` lo mantiene el último pase lo que pase, igual que el 3 de
   la tira. */
.room-detail-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.room-detail > .room-detail-cta { grid-column: 1 / -1; order: 4; margin-top: 1.5rem; }

/* ============================================================
   13. AMENIDADES
   ============================================================ */
.amenities {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-paper);
}
.amenities-toggle {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem;
  background: none; border: none; cursor: pointer;
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-forest);
  text-align: left;
}
.amenities-toggle::after {
  content: ''; flex: none;
  width: 14px; height: 14px;
  background-color: var(--c-bronze-btn);
  -webkit-mask: var(--icon-chevron) center / contain no-repeat;
          mask: var(--icon-chevron) center / contain no-repeat;
  transition: transform var(--dur) var(--ease);
}
.amenities-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

.amenities-panel { display: none; padding: 0 1.25rem 1.35rem; }
.amenities-panel.open { display: block; }
.amenities-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.5rem 1.25rem;
}
.amenities-list li {
  display: flex; align-items: flex-start; gap: 0.5rem;
  font-size: 0.82rem; color: var(--c-ink-soft); line-height: 1.5;
}
.am-ico {
  flex: none;
  width: 17px; height: 17px;
  margin-top: 0.15rem;
  color: var(--c-bronze);
}

/* ============================================================
   14. PAQUETES
   ============================================================ */
.packages-grid { display: grid; gap: 1.5rem; }

.package-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.package-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.package-card--featured { border-color: var(--c-bronze); border-width: 2px; }

.package-media { aspect-ratio: 16 / 9; overflow: hidden; }
.package-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.package-card:hover .package-media img { transform: scale(1.06); }

.package-flag {
  position: absolute; top: 1rem; right: 1rem;
  background: var(--c-forest-900); color: var(--c-bronze-300);
  padding: 0.3rem 0.9rem; border-radius: var(--r-pill);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}

.package-body { display: flex; flex-direction: column; flex: 1; padding: 1.75rem 1.5rem; }
.package-kicker { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-bronze-txt); margin-bottom: 0.5rem; }
.package-name { font-size: var(--t-h3); color: var(--c-forest); margin-bottom: 0.6rem; }
.package-desc { font-size: 0.87rem; color: var(--c-ink-soft); margin-bottom: 1.25rem; }

.package-includes { margin-bottom: 1.5rem; }
.package-includes li {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-size: 0.85rem; color: var(--c-ink-soft);
  padding: 0.4rem 0;
  border-bottom: 1px dashed var(--c-line);
}
.package-includes li:last-child { border-bottom: none; }
.package-includes li::before { content: '✓'; flex: none; color: var(--c-bronze); font-weight: 700; }

.package-foot { display: flex; align-items: center; justify-content: flex-start; gap: 1rem; flex-wrap: wrap; margin-top: auto; }
.package-consulta { font-size: 0.88rem; color: var(--c-ink-soft); margin: 0 0 0.9rem; }
.package-consulta a { color: var(--c-forest); }

/* La SEGUNDA foto de cada opción del Tour de Manzanas, dentro del cuerpo
   de la tarjeta y no encima de ella: así el botón queda abajo del todo,
   donde .package-foot { margin-top: auto } alinea los dos entre sí. Las
   dos fotos por opción están repartidas por plano —cerrado = la
   actividad, abierto = el sitio donde uno se queda—, de modo que la
   diferencia entre las modalidades también se ve. */
.package-media--cierre { border-radius: var(--r-md); margin-bottom: 1.25rem; }

/* La nota que vale para las DOS opciones: va debajo de la rejilla, una
   sola vez, y no dentro de cada tarjeta. */
.manz-nota-comun { max-width: 62ch; margin: 1.5rem auto 0; text-align: center; }

.package-extras {
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--c-line);
  font-size: 0.78rem; color: var(--c-ink-faint);
}
.package-extras strong { color: var(--c-ink-soft); }

/* ============================================================
   15. EXPERIENCIAS
   ============================================================ */
.exp-grid { display: grid; gap: 1.5rem; }

/* EL TEXTO NO VA ENCIMA DE LA FOTO.
   Estuvo así desde el 8 de agosto y no cumplía AA: sobre la fotografía de
   Gastronomía el título quedaba en 2,38:1 con el 36 % de su caja por debajo
   de 4,5. Llevarlo a 4,5 con velo habría exigido oscurecer tanto la imagen
   que dejaría de verse: se pagaba con las cuatro fotografías para arreglar un
   problema de texto. Y cualquier velo calibrado sobre estas cuatro fotos se
   rompe en cuanto se cambie una.
   Arriba la foto, limpia. Abajo el texto sobre color sólido, donde el
   contraste es un cálculo y no una medición que depende del encuadre. */
.exp-card {
  display: flex; flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-forest-900);
}
.exp-media { overflow: hidden; }
.exp-media img {
  display: block; width: 100%; height: auto;
  /* 3/2 en TODOS los anchos, no sólo en escritorio. Con 4/3 en móvil la
     foto pasaría de 360 a 320 px justo en 1024 y devolvería el salto de
     maqueta que este cambio venía a quitar. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.exp-card:hover .exp-media img { transform: scale(1.06); }

/* flex:1 para que el bloque de texto absorba la diferencia: las tarjetas de
   una fila miden lo mismo aunque una descripción ocupe tres líneas y otra
   dos. */
.exp-body {
  flex: 1;
  padding: 1.85rem 1.6rem;
  background: var(--c-forest-900);
  color: var(--c-cream);
}
.exp-name { font-size: var(--t-h3); margin-bottom: 0.5rem; color: var(--c-cream); }
.exp-desc { font-size: 0.87rem; color: var(--c-cream); line-height: 1.65; margin-bottom: 1.15rem; }

/* ============================================================
   16. TOURS
   ============================================================ */
.tours-grid { display: grid; gap: 1.5rem; }

.tour-card {
  display: flex; flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tour-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.tour-media { aspect-ratio: 16 / 10; overflow: hidden; }
.tour-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.tour-card:hover .tour-media img { transform: scale(1.07); }

.tour-body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem; }
.tour-name { font-size: 1.1rem; color: var(--c-forest); margin-bottom: 0.5rem; }
.tour-desc { font-size: 0.87rem; color: var(--c-ink-soft); line-height: 1.68; flex: 1; }
.tour-meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-top: 1.1rem; padding-top: 1rem;
  border-top: 1px solid var(--c-line);
}


/* Banda destacada del Tour del Día */
.feature-band { display: grid; gap: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--c-forest); color: var(--c-white); }
.feature-band-media { min-height: 260px; }
.feature-band-media img { width: 100%; height: 100%; object-fit: cover; }
.feature-band-body { padding: clamp(1.75rem, 4vw, 3rem); }
.feature-band-body h3 { font-size: var(--t-h2); margin-bottom: 0.85rem; }
.feature-band-body .package-includes li { color: rgba(230, 223, 204, 0.85); border-bottom-color: rgba(255,255,255,0.12); }
.feature-band-body .package-includes li::before { color: var(--c-bronze-300); }

/* ============================================================
   17. RESERVA FORESTAL
   ============================================================ */
.stat-band { display: grid; gap: 1.5rem; text-align: center; }
.stat { padding: 1.25rem 0.5rem; }
.stat-num {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 700; letter-spacing: -0.03em;
  color: var(--c-bronze);
  line-height: 1;
}
.stat-label { margin-top: 0.6rem; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-soft); }
.section-forest .stat-label, .section-dark .stat-label { color: rgba(230, 223, 204, 0.72); }

.split { display: grid; gap: 2rem; align-items: center; }
.split-media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-body h2 { font-size: var(--t-h2); color: var(--c-forest); margin-bottom: 0.9rem; }
.split-body p { color: var(--c-ink-soft); margin-bottom: 1rem; }
.section-forest .split-body h2, .section-dark .split-body h2 { color: var(--c-white); }

/* La única tira de fotos del sitio que se mueve sola. Dos imágenes
   superpuestas, cambia cuál está activa; JS decide el ritmo y respeta
   prefers-reduced-motion apagando el intervalo, no solo el fundido.

   Cuadrado y no 4:3: el gráfico de donación es un cuadrado de verdad
   (1200×1200, sin recorte posible sin perder el sello «$1» o el
   logotipo de arriba), así que el cuadro cambia de proporción para
   los dos —la de las tazas se recorta al centro por CSS, sin tocar
   el archivo, y ya se comprobó que ese recorte deja los tres vasos
   completos. */
.cafe-carrusel { position: relative; aspect-ratio: 1 / 1; }
.cafe-carrusel-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}
.cafe-carrusel-img.is-activa { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .cafe-carrusel-img { transition: none; }
}

.cafe-carrusel-pausa {
  position: absolute; right: 0.75rem; bottom: 0.75rem; z-index: 1;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  padding: 0;
  border: none; border-radius: 50%;
  background: rgba(20, 30, 26, 0.55);
  color: var(--c-white);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.cafe-carrusel-pausa:hover { background: rgba(20, 30, 26, 0.8); }
.cafe-carrusel-pausa:focus-visible { outline: 3px solid var(--c-bronze-btn); outline-offset: 2px; }
.cafe-carrusel-pausa svg { width: 16px; height: 16px; }
.cafe-carrusel-pausa[hidden] { display: none; }
.section-forest .split-body p, .section-dark .split-body p { color: rgba(230, 223, 204, 0.82); }

/* Mismo lenguaje visual que .blog-notice: fondo tenue y borde
   discontinuo color bronce, para un aviso que no es un error ni una
   advertencia, sólo información que conviene no perderse. Genérico
   —no lleva el nombre de una página— porque lo usan Tours y
   Gastronomía, y cualquier página nueva que necesite lo mismo.
   Va DESPUÉS de «.split-body p»: las dos reglas empatan en
   especificidad (una clase + un elemento), y un .aviso-info dentro
   de un .split-body —como en Gastronomía— necesita ganar por orden
   de aparición, no solo por especificidad. */
.aviso-info {
  display: flex; align-items: flex-start; gap: 0.75rem;
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  background: rgba(187, 122, 54, 0.10);
  border: 1px dashed var(--c-bronze);
  border-radius: var(--r-md);
  font-size: 0.87rem; color: var(--c-ink-soft);
}
.aviso-info svg { flex: none; width: 22px; height: 22px; color: var(--c-bronze); margin-top: 1px; }
.aviso-info p { margin: 0; }

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-forest-900);
  box-shadow: var(--sh-lg);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ============================================================
   18. SPA Y MENÚ DE TRATAMIENTOS
   ------------------------------------------------------------
   Sin precios, y no por olvido: el hotel pidió publicar el menú
   del spa con los nombres y las duraciones y sin los montos.
   Las reglas .menu-price y .spa-package .amount se retiraron en
   el Bloque 1 de la Etapa 9. No devolverlas sin una decisión.
   ============================================================ */
.spa-grid { display: grid; gap: 1.25rem; }
.spa-card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.spa-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
/* 3/2 en TODOS los anchos, no sólo en escritorio. Con 4/3 abajo y 3/2
   arriba la foto pasaba de 360 a 320 px justo en 1024: un salto de 40 px.
   La proporción unificada es lo que lo evita. */
.spa-card-media { aspect-ratio: 3 / 2; overflow: hidden; }
.spa-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.spa-card:hover .spa-card-media img { transform: scale(1.06); }
.spa-card-body { padding: 1.35rem; }
.spa-card-body h3 { font-size: 1.05rem; color: var(--c-forest); margin-bottom: 0.4rem; }
.spa-card-body p { font-size: 0.86rem; color: var(--c-ink-soft); line-height: 1.65; }

/* Menú de servicios */
.menu-block + .menu-block { margin-top: 2.5rem; }
.menu-block-title {
  display: flex; align-items: center; gap: 1rem;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c-bronze-txt);
  margin-bottom: 1.25rem;
}
.menu-block-title::after { content: ''; flex: 1; height: 1px; background: var(--c-line); }

.menu-list li {
  display: flex; align-items: baseline; gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px dashed var(--c-line);
}
.menu-list li:last-child { border-bottom: none; }
/* La duración ocupa el lugar que tenía el precio. Se alinea a la
   derecha para que la columna se lea de un vistazo, pero sin puntos
   guía: sin precio al final no hay a dónde llevar el ojo. */
.menu-dur { flex: none; margin-left: auto; padding-left: 1rem; font-size: 0.86rem; color: var(--c-ink-soft); white-space: nowrap; }
.menu-dur span { color: var(--c-ink-faint); }

.menu-name { font-size: 0.92rem; font-weight: 500; color: var(--c-ink); }

/* Paquetes del spa */
.spa-packages { display: grid; gap: 1.25rem; }
.spa-package {
  display: flex; flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-bronze);
  border-radius: var(--r-md);
  padding: 1.5rem;
}
.spa-package h4 { font-size: 1.02rem; color: var(--c-forest); margin-bottom: 0.2rem; }
.spa-package .dur { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-faint); margin-bottom: 0.85rem; }
.spa-package ul { flex: 1; margin-bottom: 1.1rem; }
.spa-package li { font-size: 0.85rem; color: var(--c-ink-soft); padding: 0.2rem 0 0.2rem 1rem; position: relative; }
.spa-package li::before { content: '·'; position: absolute; left: 0.25rem; color: var(--c-bronze); font-weight: 700; }

.spa-contact {
  margin-top: 2rem; padding: 1.25rem 1.5rem;
  background: var(--c-sand);
  border-radius: var(--r-md);
  font-size: 0.86rem; color: var(--c-ink-soft);
  text-align: center;
}
.spa-contact strong { color: var(--c-forest); }

/* ============================================================
   19. GASTRONOMÍA
   ============================================================ */
.venue { display: grid; gap: 2rem; align-items: center; }
.venue + .venue { margin-top: clamp(3rem, 6vw, 5rem); }
/* La tira de fotos de Gastronomía vive ENTRE los dos .venue, no dentro
   de uno de ellos: es de los dos (Las Bromelias y Los Robles), así que
   no le pertenece a ninguno más que al otro. Mismo espaciado que entre
   dos .venue seguidos, para que no se note la costura. */
.venue + .tira, .tira + .venue { margin-top: clamp(3rem, 6vw, 5rem); }
.venue-media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; }
.venue-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.venue-media:hover img { transform: scale(1.04); }
.venue-body h2 { font-size: var(--t-h2); color: var(--c-forest); margin-bottom: 0.85rem; }
.venue-body p { color: var(--c-ink-soft); margin-bottom: 1rem; }

.dish-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.dish-grid figure { margin: 0; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 1; }
.dish-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
/* La foto nueva de los carros safari de /tours/ (17/09/2026) es
   vertical (1600x2400): con el recorte centrado por defecto, la
   ventana cuadrada subía demasiado y los vehículos —que ocupan la
   mitad inferior del encuadre original— quedaban cortados por abajo.
   No se toca el archivo —sigue siendo la misma foto en su proporción
   nativa (R3)—: se le dice al recorte que ancle la base, donde están
   los vehículos completos. La segunda figura (el roble) no se toca. */
.dish-grid figure:first-child img { object-position: bottom; }
.dish-grid figure:hover img { transform: scale(1.07); }

/* ------------------------------------------------------------
   EL VISOR
   ------------------------------------------------------------
   <dialog> NATIVO abierto con showModal(). El atrapado de foco, el
   cierre con Escape y la devolución del foco al elemento que lo abrió
   los da el navegador; no se reimplementan.

   NO ES UNA PRESENTACIÓN: no avanza solo, no hay temporizador, y no da
   la vuelta en bucle —en la primera foto «anterior» está apagado y en
   la última «siguiente»—, porque con 21 fotos volver al principio sin
   avisar desorienta.

   El fondo es oscuro y los mandos van encima. Los contrastes están
   medidos, no estimados: ver el informe del 31/08/2026. */
.visor {
  width: 100%; max-width: 100%;
  height: 100%; max-height: 100%;
  margin: 0; padding: 0;
  border: 0;
  background: var(--c-visor-fondo);
  color: var(--c-white);

  /* TRES FILAS, y esto es lo que arregla el fallo de las verticales.
     Los mandos ya no se superponen a la foto: tienen su propia fila y
     el lienzo se queda con lo que sobra. Antes iban en `position:
     absolute` encima de la imagen y tapaban su parte baja. */
  /* SÓLO CUANDO ESTÁ ABIERTO. Sin el [open], este `display: grid` pisa el
     `display: none` que el navegador da a un <dialog> cerrado, y el visor se
     dibujaba dentro de la página: una banda oscura con su ✕, encima de las
     preguntas frecuentes de /habitaciones/ y /gastronomia/, que son las dos
     únicas páginas con tira y por tanto con visor. */
  overflow: hidden;              /* nunca hay que desplazarse dentro */
}

.visor[open] {
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.visor::backdrop { background: var(--c-visor-fondo); }

.visor-cabecera {
  display: flex; justify-content: flex-end;
  padding: 0.75rem;
}
.visor-barra {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem;
  padding: 0.75rem 0.75rem 1rem;
}

.visor-lienzo {
  /* `min-height: 0` es imprescindible. Sin él una fila `1fr` no encoge
     por debajo del tamaño de su contenido, el lienzo crece con la foto
     y el `max-height: 100%` de la imagen no tiene contra qué resolver:
     un porcentaje contra un alto indefinido se ignora. Ése era el
     motivo de que una vertical se saliera por abajo. */
  min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;                 /* fijo a propósito: el `sizes` sale de aquí */
  overflow: hidden;
}
.visor-img {
  /* Limitado por LAS DOS dimensiones. Con el alto del lienzo ya
     definido, `max-height: 100%` resuelve y la imagen queda en el
     rectángulo mayor con su proporción que cabe entero: para una
     apaisada manda el ancho, para una vertical manda el alto.
     `object-fit: contain` no hace falta mientras el ancho y el alto
     sean `auto` —la proporción se conserva sola— pero se deja escrito
     para que la intención aguante si alguien fija una de las dos. */
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
  border-radius: var(--r-md);
}

.visor-contador {
  margin: 0;
  min-width: 4.5rem;
  text-align: center;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: var(--c-white);
}

.visor-btn {
  width: 48px; height: 48px;
  flex: 0 0 auto;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid var(--c-visor-borde);
  border-radius: 50%;
  background: var(--c-visor-boton);
  color: var(--c-white);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.visor-btn:hover:not([disabled]) { background: var(--c-visor-boton-alto); }
/* El aro lleva un halo oscuro DETRÁS. Medido sobre blanco puro el
   bronze-200 solo da 1,57:1; el halo lo deja entre 10,1 y 11,6:1 contra
   blanco, negro y gris medio. El navegador pinta el outline por encima
   del box-shadow, así que el aro claro queda enmarcado en oscuro. */
.visor-btn:focus-visible {
  outline: 3px solid var(--c-bronze-200);
  outline-offset: 3px;
  box-shadow: 0 0 0 9px rgba(11, 24, 29, 0.95);
}
.visor-btn[disabled] { opacity: 0.3; cursor: default; }
.visor-btn svg { width: 22px; height: 22px; }

/* El fondo no se desplaza mientras el visor está abierto. Con
   `overflow: hidden` sobre <html> la posición se conserva exacta: no
   hace falta el truco de `position: fixed`, que la pierde y obliga a
   restaurarla a mano. */
html:has(.visor[open]) { overflow: hidden; }

/* ------------------------------------------------------------
   TIRA DESLIZABLE
   ------------------------------------------------------------
   NO ES UN CARRUSEL. Nada gira solo: no hay autoplay, ni
   temporizador, ni transición automática. La tira es scroll
   nativo con imán; las flechas se limitan a empujar ese mismo
   scroll. El visitante manda siempre.

   SIN JAVASCRIPT FUNCIONA IGUAL. Las fotos están en el HTML, la
   pista se arrastra con el dedo, con la rueda y con el teclado
   —lleva tabindex="0", así que Chrome y Safari también la
   enfocan—, y las flechas, que son lo único que necesita JS, no
   llegan a aparecer: nacen con hidden y sólo el script lo quita.

   LA ALTURA MANDA, NO LA ANCHURA. Cada foto conserva su
   proporción nativa y ocupa el ancho que le toque: una 3:2 mide
   una vez y media la altura, una 2:3 dos tercios. Así entran
   apaisadas y verticales en la misma tira sin recortar ninguna,
   que es la regla de las fotos de este sitio. Los `sizes` de
   tools_fotos_uso.py salen de estas tres alturas. */
.tira { position: relative; }

.tira-pista {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;   /* no arrastra la página detrás */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 2px 2px 0.75rem;         /* aire para que el anillo de foco no se corte */
}
.tira-pista:focus-visible {
  outline: 3px solid var(--c-bronze-btn);
  outline-offset: 2px;
  border-radius: var(--r-md);
}

.tira-item {
  flex: 0 0 auto;
  margin: 0;
  scroll-snap-align: start;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-forest-900);  /* mientras carga, no un hueco blanco */
}
.tira-enlace { display: block; border-radius: var(--r-md); }
.tira-enlace:focus-visible { outline: 3px solid var(--c-bronze-btn); outline-offset: 2px; }
.tira-item img {
  display: block;
  height: 200px;
  width: auto;
  transition: transform 0.7s var(--ease);
}
.tira-item:hover img { transform: scale(1.05); }

/* Las flechas. Nacen con hidden en el HTML; el script lo quita.
   44x44 es el objetivo cómodo del pulgar, muy por encima del
   mínimo de 24x24. */
.tira-flechas {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.5rem;
}
.tira-flechas[hidden] { display: none; }

.tira-flecha {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid var(--c-line-strong);
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-forest);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tira-flecha:hover:not([disabled]) { background: var(--c-forest); color: var(--c-white); }
.tira-flecha:focus-visible {
  outline: 3px solid var(--c-bronze-btn);
  outline-offset: 2px;
}
.tira-flecha[disabled] { opacity: 0.35; cursor: default; }
.tira-flecha svg { width: 20px; height: 20px; }

/* En la ficha de habitación la tira ocupa las dos columnas de la
   rejilla. Escrito como `.room-detail .tira` a propósito: es la forma
   que entiende el detector de elementos anchos de
   tools-verificar-rejillas.py, así que la ficha sigue contando como
   una fila completa y no hace falta declararle una excepción. */
/* `order: 3` no es decorativo. La ficha invertida coloca su galería
   con `.room-detail--reverse .room-gallery { order: 2 }`, y ese truco
   sólo funciona mientras la ficha tenga DOS hijos: al aparecer un
   tercero sin orden propio, la tira se metía entre el cuerpo y la
   galería y la Junior Suite se partía en tres filas. Con la tira
   siempre al final, un cuarto hijo tampoco podría romperlo. */
.room-detail .tira { grid-column: 1 / -1; margin-top: 0.5rem; order: 3; }
.rooms-galeria { margin-top: clamp(2.5rem, 5vw, 4rem); text-align: center; }

@media (min-width: 768px) { .tira-item img { height: 240px; } }
@media (min-width: 1024px) { .tira-item img { height: 280px; } }

/* ============================================================
   20. BLOG
   ============================================================ */
.blog-grid { display: grid; gap: 1.75rem; }

.post-card {
  display: flex; flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.post-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.post-media { aspect-ratio: 16 / 10; overflow: hidden; }
.post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.post-card:hover .post-media img { transform: scale(1.06); }

.post-body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem; }
.post-meta { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-bronze-txt); margin-bottom: 0.6rem; }
.post-title { font-size: 1.08rem; color: var(--c-forest); margin-bottom: 0.6rem; text-wrap: balance; }
.post-excerpt { font-size: 0.87rem; color: var(--c-ink-soft); line-height: 1.7; flex: 1; margin-bottom: 1.2rem; }

.post-card--wide { grid-column: 1 / -1; }

.blog-notice {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: rgba(187, 122, 54, 0.10);
  border: 1px dashed var(--c-bronze);
  border-radius: var(--r-md);
  font-size: 0.84rem; color: var(--c-ink-soft);
  margin-bottom: 2.5rem;
}
.blog-notice svg { flex: none; width: 20px; height: 20px; color: var(--c-bronze); margin-top: 1px; }

/* ============================================================
   21. GALERÍA Y LIGHTBOX
   ============================================================ */
.gallery-filters {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
  margin-bottom: 2rem;
}
.filter-btn {
  padding: 0.5rem 1.15rem;
  background: transparent;
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-ink-soft);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.filter-btn:hover { border-color: var(--c-forest); color: var(--c-forest); }
.filter-btn.active { background: var(--c-forest); border-color: var(--c-forest); color: var(--c-white); }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
}
.gallery-item {
  position: relative;
  margin: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  cursor: zoom-in;
  background: var(--c-sand);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.gallery-item::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(17, 37, 44, 0.35);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.gallery-item:hover img { transform: scale(1.07); }
.gallery-item:hover::after { opacity: 1; }
.gallery-item.hide { display: none; }
.gallery-item--tall { grid-row: span 2; aspect-ratio: 3 / 4; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 2000;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(10, 20, 17, 0.94);
  padding: 1rem;
}
.lightbox.open { display: flex; animation: fadeIn 0.25s var(--ease); }
.lightbox img { max-width: 100%; max-height: 86vh; border-radius: var(--r-sm); }
.lightbox-caption {
  position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.8); font-size: 0.82rem; text-align: center;
}
.lightbox-btn {
  position: absolute;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  color: var(--c-white);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.lightbox-btn:hover { background: rgba(255, 255, 255, 0.25); }
.lightbox-close { top: 1.25rem; right: 1.25rem; }
.lightbox-prev  { left: 1rem;  top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 1rem; top: 50%; transform: translateY(-50%); }

/* ============================================================
   22. RESEÑAS
   ============================================================ */
.reviews-grid { display: grid; gap: 1.5rem; }

.review-card {
  position: relative;
  background: var(--c-white);
  border-radius: var(--r-md);
  padding: 2.25rem 1.6rem 1.6rem;
  box-shadow: var(--sh-sm);
  border: 1px solid var(--c-line);
}
.review-card::before {
  content: '”';
  position: absolute; top: -0.35rem; left: 1.4rem;
  font-family: var(--f-serif);
  font-size: 4.5rem; line-height: 1;
  color: var(--c-bronze);
  opacity: 0.35;
}
.review-stars { color: var(--c-bronze-txt); font-size: 0.9rem; letter-spacing: 0.1em; margin-bottom: 0.6rem; }
.review-title { font-size: 0.98rem; color: var(--c-forest); margin-bottom: 0.5rem; }
.review-text  { font-size: 0.88rem; color: var(--c-ink-soft); line-height: 1.75; }
.review-author {
  display: flex; align-items: center; gap: 0.6rem;
  margin-top: 1.15rem; padding-top: 1rem;
  border-top: 1px solid var(--c-line);
  font-size: 0.82rem; font-weight: 600; color: var(--c-ink);
}
.review-author .avatar {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--c-forest); color: var(--c-white);
  font-size: 0.8rem; font-weight: 700;
}
.review-author small { display: block; font-weight: 400; color: var(--c-ink-faint); font-size: 0.75rem; }

/* Resumen de valoración */
.rating-summary {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.3rem; text-align: center;
  padding: 2rem 1.5rem;
  background: var(--c-forest);
  color: var(--c-white);
  border-radius: var(--r-md);
}
.rating-summary img { height: 40px; width: auto; margin-bottom: 0.6rem; filter: brightness(0) invert(1); }
.rating-score { font-size: 2.6rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.rating-count { font-size: 0.8rem; color: rgba(230, 223, 204, 0.7); }

/* Certificaciones */

/* Banner de sostenibilidad del Home, entre reseñas y preguntas
   frecuentes. Toda la tarjeta es el enlace —aria-label propio en el
   <a>, así que la foto es decorativa (alt="") y el párrafo no repite
   la descripción del enlace por partida doble para quien usa lector
   de pantalla. */
.sost-banner {
  display: grid;
  grid-template-columns: 1fr;
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--sh-lg);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.sost-banner:hover, .sost-banner:focus-visible { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); }
.sost-banner:focus-visible { outline: 3px solid var(--c-bronze-btn); outline-offset: 3px; }
.sost-banner:hover .link-arrow::after { transform: translateX(5px); }

.sost-banner-media { aspect-ratio: 16 / 9; overflow: hidden; }
.sost-banner-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.sost-banner:hover .sost-banner-media img { transform: scale(1.06); }

.sost-banner-body {
  position: relative;
  background: var(--c-forest);
  color: var(--c-white);
  padding: clamp(1.75rem, 4vw, 3rem);
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem;
}
.sost-banner-body h2 { color: var(--c-white); font-size: var(--t-h2); margin: 0.3rem 0 0.5rem; }
.sost-banner-body .lede--onDark { margin-bottom: 0.75rem; }

/* El ícono y su pulso: la única otra cosa del sitio que se mueve
   sola, aparte del carrusel del café —pedido explícito de Andy para
   que el banner llame la atención—. Un anillo que crece y se
   desvanece, pequeño y lento a propósito: no es una alarma. Se apaga
   entera bajo prefers-reduced-motion, no sólo se reduce.

   DENTRO de la tarjeta, no a caballo del borde: .sost-banner lleva
   overflow:hidden para recortar la foto y las esquinas redondeadas, y
   un top negativo aquí quedaba cortado por ese mismo overflow. */
.sost-banner-icono {
  position: absolute; top: clamp(1.25rem, 3vw, 1.75rem); right: clamp(1.75rem, 4vw, 3rem);
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: var(--c-bronze-btn);
  color: var(--c-white);
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
  animation: sost-pulso 2.6s ease-in-out infinite;
}
.sost-banner-icono svg { width: 28px; height: 28px; }
@keyframes sost-pulso {
  0%, 100% { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28), 0 0 0 0 rgba(162, 106, 47, 0.55); }
  50%      { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28), 0 0 0 12px rgba(162, 106, 47, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .sost-banner-icono { animation: none; }
}

@media (min-width: 768px) {
  .sost-banner { grid-template-columns: 1fr 1fr; }
  .sost-banner-media { aspect-ratio: auto; }
}

/* ============================================================
   23. BANDA CTA
   ============================================================ */
.cta-band {
  position: relative;
  padding: clamp(3.5rem, 8vw, 6rem) 0;
  background: var(--c-forest-900);
  color: var(--c-white);
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}
.cta-band img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.32;
}
.cta-band::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right, rgba(17,37,44,0.86), rgba(17,37,44,0.62));
}
.cta-band h2 { font-size: var(--t-h2); margin-bottom: 0.85rem; text-wrap: balance; }
.cta-band p { font-size: var(--t-lede); color: rgba(230, 223, 204, 0.85); max-width: 560px; margin: 0 auto 2rem; text-wrap: pretty; }
.cta-band-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; }
.cta-band-note { margin-top: 1.5rem; font-size: 0.8rem; color: rgba(230, 223, 204, 0.6); }

/* ---- Misión y visión: mismo patrón de foto + velo que .cta-band, con
   un marco en bronce alrededor de las dos columnas. */
.mv-band {
  position: relative;
  padding: clamp(3.5rem, 8vw, 6rem) 0;
  background: var(--c-forest-900);
  color: var(--c-white);
  isolation: isolate;
  overflow: hidden;
}
.mv-band img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.28;
}
.mv-band::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(17,37,44,0.88), rgba(33,68,61,0.82));
}
.mv-frame {
  border: 1px solid rgba(187, 122, 54, 0.55);
  border-radius: var(--r-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
}
.mv-grid { display: grid; gap: 2.5rem; }
.mv-col h3 {
  font-size: var(--t-h2);
  font-weight: 700;
  color: var(--c-bronze-300);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
}
.mv-col p { color: rgba(230, 223, 204, 0.85); line-height: 1.7; text-wrap: pretty; }
@media (min-width: 768px) {
  .mv-grid { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
}

/* ============================================================
   24. FOOTER
   ============================================================ */
.site-footer { background: var(--c-forest-900); color: rgba(230, 223, 204, 0.66); padding-top: clamp(3rem, 6vw, 4.5rem); }
.footer-grid { display: grid; gap: 2.25rem; padding-bottom: 2.75rem; }

.footer-logo { height: 54px; width: auto; margin-bottom: 1rem; filter: brightness(0) invert(1); opacity: 0.92; }
.footer-tagline { font-size: 0.87rem; color: rgba(230, 223, 204, 0.6); max-width: 280px; line-height: 1.7; }

.footer-heading {
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-bronze-300);
  margin-bottom: 1rem;
}
.footer-list li + li { margin-top: 0.55rem; }
.footer-list a { font-size: 0.87rem; color: rgba(230, 223, 204, 0.62); }
.footer-list a:hover { color: var(--c-bronze-300); }

.footer-contact p { font-size: 0.87rem; margin-bottom: 0.5rem; line-height: 1.6; }
.footer-contact a { color: rgba(230, 223, 204, 0.62); }
.footer-contact a:hover { color: var(--c-bronze-300); }

.footer-certs { display: flex; gap: 0.9rem; align-items: center; margin-top: 1.35rem; }
.footer-certs img { height: 54px; width: auto; }

.social-links { display: flex; gap: 0.6rem; margin-top: 1.1rem; }
.social-links a {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  color: rgba(230, 223, 204, 0.7);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.social-links a:hover { background: var(--c-bronze-btn); color: var(--c-white); transform: translateY(-2px); }

.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem;
  padding: 1.35rem 0;
  border-top: 1px solid rgba(230, 223, 204, 0.12);
  font-size: 0.78rem;
  /* 0.60 y no 0.42: medido sobre el fondo real del pie —rgb(17,37,44)—,
     0.42 daba 3.25:1 y este texto mide 12,5 px, así que WCAG AA exige 4.5.
     0.55 llega justo a 4.57 y 0.60 deja 5.17, que es margen suficiente sin
     perder el tono apagado que el pie quiere. */
  color: rgba(230, 223, 204, 0.60);
}
.footer-bottom a { color: rgba(230, 223, 204, 0.75); }   /* 7.28:1 */
.footer-bottom a:hover { color: var(--c-bronze-300); }

/* ============================================================
   25. ACCIONES FLOTANTES
   ============================================================ */
/* Barra inferior fija en móvil — el CTA nunca se pierde */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 900;
  display: flex; gap: 0.6rem;
  padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -6px 24px rgba(17, 37, 44, 0.10);
}
.mobile-bar .btn { flex: 1; padding-inline: 0.75rem; }
.mobile-bar .btn-whatsapp { flex: 0 0 54px; }
.mobile-bar .btn-whatsapp span { display: none; }

body { padding-bottom: 76px; }

/* ============================================================
   26. PROSA (POLÍTICAS)
   ============================================================ */
.prose h2 { font-size: var(--t-h3); color: var(--c-forest); margin: 2.25rem 0 0.85rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1rem; color: var(--c-forest); margin: 1.5rem 0 0.5rem; }
.prose p, .prose li { font-size: 0.92rem; color: var(--c-ink-soft); line-height: 1.8; }
.prose p { margin-bottom: 1rem; }
.prose ul { margin: 0 0 1.25rem; }
.prose ul li { position: relative; padding-left: 1.25rem; margin-bottom: 0.45rem; }
.prose ul li::before { content: ''; position: absolute; left: 0; top: 0.75rem; width: 5px; height: 5px; border-radius: 50%; background: var(--c-bronze); }
.prose strong { color: var(--c-ink); font-weight: 600; }


/* ============================================================
   27. ANIMACIONES
   ============================================================ */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* El contenido es visible por defecto: la animación sólo se activa
   cuando el JS marca <html class="js-reveal">. Si el JS falla, la
   página se ve igualmente. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js-reveal .reveal.visible { opacity: 1; transform: none; }
.js-reveal .reveal:nth-child(2) { transition-delay: 0.08s; }
.js-reveal .reveal:nth-child(3) { transition-delay: 0.16s; }
.js-reveal .reveal:nth-child(4) { transition-delay: 0.24s; }

/* ============================================================
   28. RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
  /* Con el buscador apilado, el hero debe crecer con su contenido
     en vez de forzar la altura de la ventana. */
  .hero { min-height: auto; }
  .hero-content { padding-bottom: 3.25rem; }
  .hero-badge { font-size: 0.72rem; padding: 0.35rem 0.95rem; }
  .page-hero { min-height: auto; }
  .page-hero-content { padding-bottom: 2.5rem; }
}

@media (min-width: 600px) {
  /* auto-fit y no un 4 fijo: al retirarse «Mejor precio garantizado»
     quedaron tres, y con repeat(4,1fr) se apelotonan a la izquierda
     dejando una columna vacía. Mismo caso que .stat-band. */
  .trust-grid   { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .spa-grid     { grid-template-columns: repeat(2, 1fr); }
  /* auto-fit, no un 3 fijo: al retirarse la cifra sin fuente del río
     quedaron dos, y con repeat(3,1fr) se apelotonaban a la izquierda
     dejando una columna vacía. Así la banda vale para las que haya. */
  .stat-band    { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
  .mobile-bar .btn-whatsapp { flex: 0 0 auto; }
  .mobile-bar .btn-whatsapp span { display: inline; }
}

@media (min-width: 768px) {
  .rooms-grid    { grid-template-columns: repeat(2, 1fr); }
  /* grid-auto-rows: 1fr iguala las DOS filas, no sólo las tarjetas de
     una misma fila. Sin esto, en inglés a 1024 px «Tours» y «Forest
     Reserve» van a tres líneas y su fila mide 526 px mientras la de
     abajo mide 503: un escalón de 23 px en el bloque 2x2. */
  .exp-grid      { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; }
  .tours-grid    { grid-template-columns: repeat(2, 1fr); }
  .sost-fotos-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid     { grid-template-columns: repeat(2, 1fr); }
  .packages-grid { grid-template-columns: repeat(2, 1fr); }
  .direct-grid   { grid-template-columns: repeat(2, 1fr); }
  .reviews-grid  { grid-template-columns: repeat(2, 1fr); }
  .footer-grid   { grid-template-columns: repeat(2, 1fr); }
  .spa-packages  { grid-template-columns: repeat(2, 1fr); }
  .feature-band  { grid-template-columns: 1fr 1.15fr; }

  .split, .venue, .room-detail { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .venue--reverse .venue-media { order: 2; }
  .split--reverse .split-media { order: 2; }

  .hero-booking .form-body { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .hero-booking .frm-row:last-of-type { display: block; grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  :root { --shell-h: calc(var(--header-h) + var(--topbar-h)); }
  .topbar { display: block; }
  .main-nav  { display: flex; align-items: center; }
  .hamburger { display: none; }
  .header-book { display: inline-flex; }
  .mobile-bar { display: none; }
  body { padding-bottom: 0; }

  .rooms-grid    { grid-template-columns: repeat(3, 1fr); }
  /* DOS columnas, no tres: las tarjetas son cuatro y con tres queda una
     sola en la segunda fila. */
  .exp-grid      { grid-template-columns: repeat(2, 1fr); }
  .tours-grid    { grid-template-columns: repeat(3, 1fr); }
  /* TRES columnas a propósito: son seis fotos, y con tres queda una
     rejilla pareja de dos filas en vez de una fila larga y una suelta. */
  .sost-fotos-grid { grid-template-columns: repeat(3, 1fr); }
  /* DOS columnas: con tres, los 8 artículos del índice dejan la última
     fila a 2 de 3, y el bloque de «artículos relacionados» —que son
     siempre dos— deja un tercio vacío en los ocho artículos. */
  .blog-grid     { grid-template-columns: repeat(2, 1fr); }
  .direct-grid   { grid-template-columns: repeat(4, 1fr); }
  .reviews-grid  { grid-template-columns: repeat(3, 1fr); }
  .footer-grid   { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
  /* DOS columnas, no tres: las tarjetas de servicio son cuatro y con
     tres queda una sola en la segunda fila. Mismo caso que .exp-grid. */
  .spa-grid      { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; }

  .gallery-grid  { grid-template-columns: repeat(4, 1fr); }
  .spa-packages  { grid-template-columns: repeat(4, 1fr); }

  .room-detail  { grid-template-columns: 1.1fr 1fr; gap: 3.5rem; }
  .room-detail--reverse .room-gallery { order: 2; }

  /* Buscador en una sola línea: llegada · salida · huéspedes · buscar */
  .hero-booking .form-body {
    grid-template-columns: 1fr 1fr 0.85fr auto;
    align-items: end;
    gap: 0.85rem;
  }
  .hero-booking .frm-row:last-of-type { display: contents; }
  .hero-booking .button-reserva { width: auto; min-width: 200px; }
}

/* ============================================================
   29. ACCESIBILIDAD
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .tira-pista { scroll-behavior: auto; }
  .tira-item img, .tira-item:hover img { transition: none; transform: none; }
  .visor, .visor::backdrop, .visor-btn { transition: none; animation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .js-reveal .reveal { opacity: 1; transform: none; }
}





/* ============================================================
   FAQ · PÁGINA DEDICADA
   ============================================================ */
.faq-pagina .faq-envoltura { display: grid; gap: 2rem; }

/* La columna del acordeón se contiene a 820 px. Sin esto las filas se
   estiraban hasta los bordes del viewport y la pregunta quedaba a un
   palmo de su propio «+». */
.faq-columna { max-width: 820px; width: 100%; }

/* --- Índice --- */
.faq-indice { align-self: start; }
.faq-indice-t {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--c-ink-faint);
  margin: 0 0 0.75rem;
}
.faq-indice ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.5rem; overflow-x: auto; }
.faq-indice a {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-white);
  font-size: 0.82rem; font-weight: 500; white-space: nowrap;
  color: var(--c-ink);
}
.faq-indice a:hover { border-color: var(--c-bronze-btn); color: var(--c-bronze-txt); }
.faq-indice a[aria-current="true"] {
  background: var(--c-forest); border-color: var(--c-forest); color: var(--c-cream);
}
.faq-ico-mini { width: 16px; height: 16px; flex: none; color: var(--c-bronze-txt); }
.faq-indice a[aria-current="true"] .faq-ico-mini { color: var(--c-bronze-300); }

/* --- Buscador --- */
.faq-buscador { position: relative; margin-bottom: 1.5rem; }
.faq-buscador input {
  width: 100%;
  padding: 0.8rem 1rem;
  font: inherit; font-size: 0.95rem;
  color: var(--c-ink);
  background: var(--c-white);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
}
.faq-buscador input::placeholder { color: var(--c-ink-faint); }
.faq-cuenta-total {
  margin: 0.5rem 0 0 1rem;
  font-size: 0.78rem; color: var(--c-ink-soft);
}
.faq-vacio {
  margin: 0 0 1.5rem; padding: 1rem 1.15rem;
  background: var(--c-sand); border-radius: var(--r-md);
  color: var(--c-ink-soft);
}

/* --- Tarjeta de sección --- */
.faq-tarjeta {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-bronze-btn);
  border-radius: var(--r-md);
  padding: 1.35rem 1.5rem 0.6rem;
  margin-bottom: 1.75rem;
  scroll-margin-top: calc(var(--shell-h) + 1.5rem);
}
.faq-tarjeta-h {
  display: flex; align-items: center; gap: 0.7rem;
  margin: 0 0 0.9rem;
  font-size: 1.2rem; line-height: 1.25;
}
.faq-ico { width: 26px; height: 26px; flex: none; color: var(--c-bronze-txt); }
.faq-tarjeta-n { flex: 1 1 auto; }
.faq-cuenta {
  flex: none;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  background: var(--c-sand);
  border-radius: var(--r-pill);
  padding: 0.25rem 0.7rem;
}

/* --- La fila --- */
.faq-tarjeta .faq-lista { margin: 0; }
.faq-tarjeta .faq-lista details { border-bottom: 1px solid var(--c-line); padding: 0; }
.faq-tarjeta .faq-lista details:last-child { border-bottom: 0; }
.faq-tarjeta .faq-lista summary {
  padding: 0.9rem 0.75rem;
  margin: 0 -0.75rem;
  border-radius: var(--r-sm);
  align-items: center;
}
.faq-tarjeta .faq-lista summary:hover { background: var(--c-cream); }
/* El «+» en círculo; al abrir gira y se convierte en «×». */
.faq-tarjeta .faq-lista summary::after {
  content: "+";
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--c-sand);
  color: var(--c-bronze-txt);
  font-size: 1.05rem; line-height: 1;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.faq-tarjeta .faq-lista details[open] summary::after {
  content: "+";                 /* el mismo signo, girado: no salta */
  transform: rotate(45deg);
  background: var(--c-bronze-btn);
  color: var(--c-white);
}
.faq-tarjeta .faq-lista details[open] { border-left: 3px solid var(--c-bronze-btn); }
.faq-tarjeta .faq-lista details[open] summary { margin-left: -0.75rem; padding-left: 0.9rem; }
.faq-tarjeta .faq-lista details[open] .faq-r { padding: 0.2rem 1rem 1.1rem 0.9rem; }

@media (min-width: 1040px) {
  .faq-pagina .faq-envoltura { grid-template-columns: 240px minmax(0, 1fr); gap: 3rem; }
  /* El índice acompaña el scroll en escritorio; en móvil es una fila de
     chips y no tiene sentido fijarlo. */
  .faq-indice { position: sticky; top: calc(var(--shell-h) + 1.5rem); }
  .faq-indice ul { flex-direction: column; gap: 0.3rem; overflow: visible; }
  /* white-space: normal ANULA el nowrap de la regla base. Con la
     columna fija en 240px, «Quetzales y observación de aves» —la
     etiqueta más larga— no entra en una sola línea: medido, su
     contenido pesa 241px contra una caja de 240px, un desborde de
     apenas 1px en este render, pero al filo así de justo cualquier
     diferencia real de fuente lo empuja bastante más allá del borde
     de la píldora, como se vio en producción. Dejar que envuelva a
     una segunda línea es la solución que no depende de que ninguna
     etiqueta futura, en ningún idioma, quepa siempre en 240px. */
  .faq-indice a { width: 100%; white-space: normal; text-align: left; }
}

/* ============================================================
   FAQ
   <details> nativo: el contenido vive en el HTML y lo colapsa el
   navegador. Un rastreador de IA no ejecuta JavaScript, así que una
   respuesta inyectada en cliente, para él, no existe.
   ============================================================ */
.faq-lista { margin: 0 0 2.5rem; }
.faq-lista details {
  border-bottom: 1px solid var(--c-line);
  padding: 0.95rem 0;
}
.faq-lista summary {
  cursor: pointer;
  font-weight: 600;
  line-height: 1.45;
  list-style: none;
  display: flex; justify-content: space-between; gap: 1rem;
  /* El outline del foco necesita aire: sin esto se pega al texto y en
     una lista de 34 cuesta ver dónde estás. */
  border-radius: var(--r-sm);
  padding: 0.15rem 0.2rem;
}
.faq-lista summary::-webkit-details-marker { display: none; }
.faq-lista summary::after {
  content: "+";
  flex: none;
  color: var(--c-bronze-txt);
  font-weight: 400; font-size: 1.4rem; line-height: 1;
}
.faq-lista details[open] summary::after { content: "\2212"; }
.faq-r { padding: 0.7rem 0.2rem 0.15rem; max-width: 68ch; }
.faq-r p { margin: 0 0 0.6rem; color: var(--c-ink-soft); line-height: 1.65; }
.faq-r p:last-child { margin-bottom: 0; }
.faq-r a { color: var(--c-bronze-txt); }

/* Página dedicada: los títulos de sección separan los ocho temas. */
.faq-lista + h2 { margin-top: 0.5rem; }
.faq-bloque-h { font-size: var(--t-h3); margin: 0 0 1.25rem; }
.faq-mas { margin: 0; }

/* ============================================================
   POSTRE RECOMENDADO
   El sello es HTML y CSS, no una imagen: así es texto de verdad —lo
   indexa un buscador y lo lee un lector de pantalla—, se traduce con el
   resto y no añade una descarga.
   ============================================================ */
.recomendado {
  display: grid;
  gap: 1.75rem;
  align-items: center;
  background: var(--c-sand);
  border-radius: var(--r-lg);
  padding: 1.25rem;
}
.recomendado-media {
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  /* Filete bronce: separa la foto del fondo arena sin encerrarla. */
  box-shadow: 0 0 0 3px var(--c-bronze-btn), var(--sh-md);
}
.recomendado-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recomendado-body { padding: 0 0.5rem 0.75rem; }

.recomendado-sello {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin: 0 0 0.9rem;
  padding: 0.4rem 1rem 0.4rem 0.5rem;
  background: var(--c-cream);
  border: 1px solid var(--c-bronze-200);
  border-radius: var(--r-pill);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-forest);
}
.recomendado-sello svg {
  flex: none; width: 26px; height: 26px;
  padding: 3px;
  fill: var(--c-bronze-btn);
  border: 2px solid var(--c-bronze-btn);
  border-radius: 50%;
}
.recomendado-body h2 { margin: 0 0 0.6rem; }

/* Nombre del plato bajo cada foto de la galería. El alt describe lo que
   se ve —para quien no puede verla—; la leyenda dice CÓMO SE LLAMA, que
   es lo que busca alguien que ya lo probó o lo vio en el menú. */
.gallery-item--plato { aspect-ratio: auto; cursor: default; }
.gallery-item--plato img { aspect-ratio: 3 / 2; cursor: zoom-in; }
.gallery-item--plato figcaption {
  padding: 0.5rem 0.25rem 0.1rem;
  font-size: 0.82rem; font-weight: 600;
  color: var(--c-ink);
}
.recomendado-lede { font-size: var(--t-lede); line-height: 1.6; margin-bottom: 1.1rem; }

@media (min-width: 900px) {
  .recomendado { grid-template-columns: 1.05fr 1fr; gap: 2.5rem; padding: 1.5rem; }
  .recomendado-body { padding: 0 1rem 0 0; }
}

/* ============================================================
   ARTÍCULO DEL BLOG
   Medidas en rem a propósito: quien tenga configurado texto grande
   en su sistema lo recibe sin que haya que detectar nada.
   ============================================================ */
.art-migas {
  padding: calc(var(--shell-h) + 1.25rem) 0 0;
  font-size: 0.82rem; color: var(--c-ink-soft);
}
@media (min-width: 1024px) { .art-migas { padding-top: calc(var(--shell-h) + var(--topbar-h) + 1.25rem); } }
.art-migas a { color: var(--c-ink-soft); }
.art-migas [aria-current] { color: var(--c-ink); }

.art-hero { margin: 1rem 0 0; }
.art-hero img { width: 100%; height: clamp(220px, 42vw, 520px); object-fit: cover; display: block; }
/* El crédito del fotógrafo, cuando la foto lo lleva. Va como texto y no sólo
   quemado en la imagen: `object-fit: cover` recorta por arriba y por abajo, y
   una marca de agua al 80 % de la altura desaparece a partir de tablet. */
.art-hero-credito {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--c-ink-faint);
  text-align: right;
}

.art { padding: 2rem 0 3rem; }
.art h1 { font-size: var(--t-h1); line-height: 1.12; margin: 0 0 0.6rem; }
.art-meta { font-size: 0.85rem; color: var(--c-ink-faint); margin: 0 0 1.5rem; }
.art-lede { font-size: var(--t-lede); line-height: 1.6; color: var(--c-ink); margin: 0 0 1rem; }
.art p { line-height: 1.65; margin: 0 0 1rem; }
.art h2 { font-size: var(--t-h3); margin: 2.25rem 0 0.75rem; }
.art .container-narrow { max-width: 68ch; }

/* Ficha de datos: <dl> de verdad, que es como los lectores de pantalla
   la anuncian y como los modelos la extraen sin ambigüedad. */
.art-ficha {
  display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.25rem;
  margin: 1.75rem 0; padding: 1.25rem 1.4rem;
  background: var(--c-sand); border-radius: var(--r-md);
  border-left: 4px solid var(--c-bronze);
  font-size: 0.95rem;
}
.art-ficha-t {
  grid-column: 1 / -1; margin-bottom: 0.35rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--c-bronze-txt);
}
.art-ficha dt { font-weight: 600; color: var(--c-ink-soft); }
.art-ficha dd { margin: 0; }

/* FAQ con <details> nativo: el contenido vive en el HTML y lo colapsa el
   navegador. Nada que dependa de JavaScript. */
.art-faq details {
  border-bottom: 1px solid var(--c-line); padding: 0.9rem 0;
}
.art-faq summary {
  cursor: pointer; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem;
}
.art-faq summary::-webkit-details-marker { display: none; }
.art-faq summary::after { content: "+"; color: var(--c-bronze); font-weight: 400; font-size: 1.3rem; line-height: 1; }
.art-faq details[open] summary::after { content: "\2212"; }
.art-faq details p { margin: 0.7rem 0 0; color: var(--c-ink-soft); }

.art-cta {
  margin: 2.5rem 0 0; padding: 1.6rem; text-align: center;
  background: var(--c-forest); border-radius: var(--r-md); color: var(--c-cream);
}
.art-cta-t { margin: 0 0 1rem; font-size: 1.05rem; color: var(--c-cream); }

.art-rel-h { font-size: var(--t-h3); margin: 0 0 1.5rem; }
.blog-grid--dos { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.art-volver { margin: 1.75rem 0 0; }

/* Tabla de especies. Envuelta en un contenedor con scroll propio para
   que en móvil se desplace ella y no la página entera. */
.art-tabla-env { overflow-x: auto; margin: 1.5rem 0; -webkit-overflow-scrolling: touch; }
.art-tabla { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 34rem; }
.art-tabla th, .art-tabla td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--c-line); }
.art-tabla thead th { background: var(--c-sand); font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--c-ink-soft); }
.art-tabla tbody th { font-weight: 600; }
.art-tabla em { color: var(--c-ink-soft); }


/* Alto contraste del sistema. NO exime de cumplir en el estado por
   defecto —WCAG AA se evalúa sobre la página normal— pero refuerza a
   quien lo ha pedido explícitamente. */
@media (prefers-contrast: more) {
  :root {
    --c-ink-soft:  #3A4440;
    --c-ink-faint: #4A544E;
    --c-line:        rgba(33, 68, 61, 0.45);
    --c-line-strong: rgba(33, 68, 61, 0.70);
  }
  .btn, .card, .post-card, .package-card { border: 1px solid var(--c-line-strong); }
  :focus-visible { outline-width: 4px; }
}

@media print {
  .site-shell, .mobile-bar, .booking-dock, .cta-band { display: none !important; }
  body { padding-bottom: 0; }
}

p.nota-tour {
  font-size: 0.86rem;
  color: var(--c-ink-soft);
  margin: 0.9rem 0 1.2rem;
}

/* ============================================================
   30. SOSTENIBILIDAD
   ============================================================ */
.sost-intro { display: flex; align-items: center; gap: 2.5rem; flex-wrap: wrap; }
.sost-intro-text { flex: 1 1 320px; }
.sost-intro-text p { color: var(--c-ink-soft); line-height: 1.75; margin-bottom: 1rem; }
.sost-intro-text p:last-child { margin-bottom: 0; }
.sost-logo { flex: none; width: 120px; height: 120px; }

.sost-lista { display: grid; gap: 0.25rem 2.5rem; max-width: 920px; margin-inline: auto; }
.sost-lista li {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.85rem 0;
  border-bottom: 1px dashed var(--c-line);
}
.sost-lista li:last-child { border-bottom: none; }
.sost-lista svg { flex: none; width: 20px; height: 20px; margin-top: 0.15rem; color: var(--c-forest); }
.sost-lista span { font-size: 0.92rem; color: var(--c-ink); line-height: 1.6; }

.sost-fotos-grid { display: grid; gap: 1.25rem; }
.sost-foto { border-radius: var(--r-md); overflow: hidden; }
.sost-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sost-foto figcaption {
  padding: 0.6rem 0.1rem 0;
  font-size: 0.82rem; line-height: 1.4; color: var(--c-ink-soft);
}

@media (min-width: 768px) {
  .sost-lista { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
}