/* ==========================================================================
   styles-elite.css - v5.1 Sticky Header & Preloader Refinements
   Autor: Arquitecto de Sistemas Digitales (ASD) - IA bajo Directiva Omega & Gemini
   Descripción: Implementa header (banner + navbar) fijo (sticky),
                mantiene preloader, navbar estático visualmente, revierte color
                footer a cálido, mejora estética banner, animaciones footer.
   Compatible con HTML v5.0+ y JS v5.0+. (Tema Oscuro Permanente).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables Globales y Configuración Base (v5.1)
   -------------------------------------------------------------------------- */
:root {
  /* --- Paleta de Colores Principal (Oscura Rústica) --- */
  --color-primary: #e8d9c4; /* Crema principal (textos claros, títulos) */
  --color-secondary: #d4a96a; /* Ocre/Dorado Rústico (acentos, botones primarios) */
  --color-accent: #f3e9d6; /* Crema más claro (enlaces, detalles sutiles) */
  --color-accent-darker: #e0daca; /* Variante oscura de crema */
  --color-background: #2c1f1e; /* Marrón muy oscuro (fondo principal) */
  --color-background-light: #3a2a28; /* Marrón claro (secciones bg-light, footer) */
  --color-background-section-alt: #332523; /* Marrón intermedio (secciones bg-alt) */
  --color-background-dark: #251a19; /* Marrón aún más oscuro */
  --color-border: #5c4d4b; /* Borde sutil (general) */
  --color-border-darker: #7a6d6b; /* Borde más oscuro */

  /* --- Colores Funcionales --- */
  --color-offer: #66bb6a; /* Verde oferta */
  --color-offer-highlight: #81c784; /* Verde más brillante (hover oferta) */
  --color-offer-text: #1a1110; /* Texto sobre fondo verde */
  --color-whatsapp: #25D366; /* Verde WhatsApp */
  --color-focus-ring: rgba(212, 169, 106, 0.7); /* Anillo foco Ocre con opacidad */
  --color-error: #f1948a; /* Rojo claro para errores */
  --color-success: var(--color-offer); /* Verde para éxito */

  /* --- Colores de Texto --- */
  --color-text-body: #d9cfbe; /* Texto principal (sobre fondo oscuro) */
  --color-text-headings: var(--color-primary); /* Títulos (sobre fondo oscuro) */
  --color-text-muted: #a89d91; /* Texto secundario/apagado */
  --color-text-accent: var(--color-secondary); /* Texto con acento ocre */
  --color-text-light: #1a1110; /* Texto oscuro (para fondos claros como botones) */
  --color-link: var(--color-accent); /* Color de enlace por defecto */
  --color-link-hover: #ffffff; /* Color de enlace al pasar el cursor */

  /* --- Colores Específicos de Componentes --- */
  /* Header Container (Sticky) */
  --color-header-container-background: rgba(44, 31, 30, 0.92); /* Fondo header consistente con backdrop */
  /* Header (Navbar) */
  --color-header-background: transparent; /* Header individual es transparente dentro del container */
  --color-header-border: rgba(92, 77, 75, 0.3);    /* Borde header consistente */
  /* Banner */
  --color-banner-top-bg: color-mix(in srgb, var(--color-secondary) 90%, var(--color-background));
  --color-banner-top-text: var(--color-text-light);
  /* Navbar */
  --color-navbar-link-highlight-bg: var(--color-offer);
  --color-navbar-link-highlight-text: var(--color-offer-text);
  --color-navbar-link-highlight-hover-bg: var(--color-offer-highlight);
  --color-navbar-link-highlight-hover-text: var(--color-offer-text);
  --color-navbar-link-active-bg: rgba(var(--color-secondary-rgb), 0.1);
  /* Footer */
  --color-background-footer: var(--color-background-light);
  --color-footer-border-top: var(--color-border);
  --color-text-footer: var(--color-text-body);
  --color-footer-title: var(--color-primary);
  --color-link-footer: var(--color-secondary);
  --color-link-footer-hover: var(--color-primary);
  --color-background-footer-bottom: rgba(var(--color-background-rgb), 0.6);
  /* Preloader */
  --color-preloader-bg: var(--color-background);
  --color-preloader-icon: var(--color-secondary);
  /* Overlays */
  --color-overlay-navbar: rgba(10, 8, 8, 0.75);
  --color-lightbox-bg: rgba(10, 8, 8, 0.97);

  /* --- RGB (para rgba) --- */
  --color-primary-rgb: 232, 217, 196;
  --color-secondary-rgb: 212, 169, 106;
  --color-offer-rgb: 102, 187, 106;
  --color-background-light-rgb: 58, 42, 40;
  --color-background-rgb: 44, 31, 30;
  --color-background-dark-rgb: 37, 26, 25;
  --color-overlay-navbar-rgb: 10, 8, 8;
  --color-border-rgb: 92, 77, 75;

  /* --- Tipografía --- */
  --font-primary: 'Lora', serif;
  --font-secondary: 'Montserrat', sans-serif;
  --font-base-size: 16px;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 700;
  --line-height-base: 1.7;
  --line-height-headings: 1.3;
  --letter-spacing-headings: 0.5px;

  /* --- Espaciado Fluido (Clamp) --- */
  --spacing-xxs: clamp(0.25rem, 0.8vw, 0.35rem);
  --spacing-xs: clamp(0.5rem, 1.5vw, 0.75rem);
  --spacing-sm: clamp(0.8rem, 2.5vw, 1.1rem);
  --spacing-md: clamp(1.2rem, 4vw, 1.75rem);
  --spacing-lg: clamp(1.8rem, 6vw, 2.75rem);
  --spacing-xl: clamp(2.5rem, 9vw, 4.5rem);
  --spacing-xxl: clamp(3.5rem, 12vw, 6rem);

  /* --- Layout --- */
  --container-max-width: 1280px;
  --container-padding: var(--spacing-md);
  --section-padding-vertical: var(--spacing-xl);

  /* --- Navbar --- */
  --navbar-height-desktop: 75px;
  --navbar-height-mobile: 65px;
  --navbar-link-padding-horizontal: var(--spacing-md);
  --navbar-mobile-menu-width: min(90vw, 350px);

  /* --- Z-Index (Jerarquía de capas) --- */
  --z-index-back: -1;
  --z-index-base: 1;
  --z-index-content-overlay: 10;
  --z-index-promo-banner-top: 990; /* Relativo dentro de header-container */
  --z-index-header-container: 1000; /* Contenedor principal fijo */
  --z-index-header: 1; /* Header dentro del container, z-index relativo */
  --z-index-navbar-overlay: 1010;
  --z-index-navbar-panel: 1020;
  --z-index-navbar-toggle: 1030;
  --z-index-floating-button: 1100;
  --z-index-lightbox: 2000;
  --z-index-preloader: 9999;

  /* --- Bordes y Sombras --- */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-pill: 50px;
  --border-width: 1px;
  --border-width-thick: 2px;
  --shadow-color-rgb: 10, 8, 8;
  --shadow-soft: 0 4px 8px rgba(var(--shadow-color-rgb), 0.15);
  --shadow-medium: 0 8px 16px rgba(var(--shadow-color-rgb), 0.18);
  --shadow-strong: 0 12px 24px rgba(var(--shadow-color-rgb), 0.22);
  --shadow-header-container: 0 3px 10px rgba(var(--shadow-color-rgb), 0.22); /* Sombra para el header-container fijo */
  --shadow-inset: inset 0 2px 4px rgba(var(--shadow-color-rgb), 0.1);

  /* --- Transiciones --- */
  --transition-speed-fast: 0.25s;
  --transition-speed-medium: 0.4s;
  --transition-speed-slow: 0.6s;
  --transition-preloader: 1.5s;
  --transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-timing-function-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-timing-function-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-timing-function-navbar: cubic-bezier(0.645, 0.045, 0.355, 1);
  --transition-default: all var(--transition-speed-medium) var(--transition-timing-function);
  --transition-colors: background-color var(--transition-speed-medium) ease, color var(--transition-speed-medium) ease, border-color var(--transition-speed-medium) ease;
  --transition-transform: transform var(--transition-speed-medium) var(--transition-timing-function);
  --transition-opacity: opacity var(--transition-speed-medium) ease;
}

/* --------------------------------------------------------------------------
   2. Resets y Estilos Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { font-size: var(--font-base-size); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; }
body { font-family: var(--font-secondary); font-weight: var(--font-weight-regular); line-height: var(--line-height-base); color: var(--color-text-body); background-color: var(--color-background); overflow-x: clip; text-rendering: optimizeLegibility; position: relative; transition: var(--transition-colors); opacity: 1; transition: opacity 0.5s ease; }
body.preload { opacity: 0; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-primary); color: var(--color-text-headings); line-height: var(--line-height-headings); font-weight: var(--font-weight-bold); margin-bottom: var(--spacing-md); letter-spacing: var(--letter-spacing-headings); transition: color var(--transition-speed-medium) ease; }
h1 { font-size: clamp(2.5rem, 6vw, 3.8rem); } h2 { font-size: clamp(2.1rem, 5vw, 3rem); margin-bottom: var(--spacing-lg); } h3 { font-size: clamp(1.7rem, 4vw, 2.2rem); } h4 { font-size: clamp(1.3rem, 3.5vw, 1.8rem); margin-bottom: var(--spacing-sm); }
p { margin-bottom: var(--spacing-md); max-width: 70ch; } .text-center p { margin-left: auto; margin-right: auto; }
p.lead { font-size: clamp(1.15rem, 2.8vw, 1.35rem); color: var(--color-text-accent); font-weight: var(--font-weight-light); margin-bottom: var(--spacing-lg); line-height: 1.6; }
a { color: var(--color-link); text-decoration: none; transition: color var(--transition-speed-fast) ease; } a:hover, a:focus-visible { color: var(--color-link-hover); text-decoration: none; }
:focus-visible { outline: var(--border-width-thick) solid var(--color-focus-ring); outline-offset: 3px; text-decoration: none; border-radius: var(--border-radius-sm); }
:focus:not(:focus-visible) { outline: none; }
img, svg, video, canvas, picture { max-width: 100%; height: auto; display: block; object-fit: cover; vertical-align: middle; }
img[loading="lazy"] { background-color: var(--color-background-section-alt); }
button { cursor: pointer; background-color: transparent; border: none; padding: 0; line-height: inherit; font-family: inherit; color: inherit; appearance: none; }
ul, ol { list-style: none; padding: 0; margin: 0; }

/* Ajuste de scroll-margin-top para secciones, considerando la altura del header fijo */
section[id] {
  scroll-margin-top: 0; /* Base, se recalculará dinámicamente si es necesario, pero CSS sticky lo maneja bien */
  /* La altura del header fijo es dinámica (banner + navbar).
     Para una solución CSS pura, necesitaríamos una altura fija para header-container o
     JS para calcular y aplicar el scroll-margin.
     Dado que el header-container será sticky, el navegador debe manejar esto.
     Si el banner tiene altura variable, el offset para anclas puede variar.
     Por ahora, confiamos en que el espaciado natural + sticky sea suficiente.
     Podríamos usar JS para obtener la altura de .header-container y aplicarla como
     scroll-margin-top, pero intentaremos evitarlo por ahora. */
}

blockquote { margin: var(--spacing-lg) 0; padding: var(--spacing-lg); border-left: 4px solid var(--color-secondary); background-color: rgba(var(--color-background-light-rgb), 0.7); border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0; font-style: normal; color: var(--color-text-body); transition: var(--transition-colors); }
blockquote p { margin-bottom: var(--spacing-sm); font-size: 1.1rem; font-family: var(--font-primary); font-style: italic; }
blockquote footer { font-style: normal; font-size: 0.9rem; font-weight: var(--font-weight-medium); color: var(--color-text-muted); transition: color var(--transition-speed-medium) ease; margin-top: var(--spacing-md); }
blockquote footer::before { content: "— "; }

/* --------------------------------------------------------------------------
   3. Clases de Utilidad
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container-max-width); margin-left: auto; margin-right: auto; padding-left: var(--container-padding); padding-right: var(--container-padding); }
.container-fluid { width: 100%; padding-left: var(--container-padding); padding-right: var(--container-padding); }
.text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; }
.visually-hidden { position: absolute !important; height: 1px; width: 1px; margin: -1px !important; padding: 0 !important; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.highlight { color: var(--color-secondary); font-weight: inherit; background-color: rgba(var(--color-secondary-rgb), 0.12); padding: 0.1em 0.4em; border-radius: var(--border-radius-sm); transition: color var(--transition-speed-medium) ease, background-color var(--transition-speed-medium) ease; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.highlight--badge { background-color: var(--color-offer); color: var(--color-offer-text); padding: var(--spacing-xxs) var(--spacing-sm); font-size: 0.75em; vertical-align: text-bottom; margin-left: var(--spacing-xs); font-weight: var(--font-weight-bold); border-radius: var(--border-radius-md); text-transform: uppercase; letter-spacing: 0.8px; display: inline-block; line-height: 1.2; }
.section-padding { padding-top: var(--section-padding-vertical); padding-bottom: var(--section-padding-vertical); }
.section-padding--large { padding-top: calc(var(--section-padding-vertical) * 1.2); padding-bottom: calc(var(--section-padding-vertical) * 1.2); }
.section-padding--reduced { padding-top: calc(var(--section-padding-vertical) / 1.5); padding-bottom: calc(var(--section-padding-vertical) / 1.5); }
.bg-light { background-color: var(--color-background-light); } .bg-dark { background-color: var(--color-background-dark); } .bg-alt { background-color: var(--color-background-section-alt); }
.section-header { margin-bottom: var(--spacing-xl); }
.section-title { margin-bottom: var(--spacing-sm); position: relative; display: inline-block; }
.section-title::after { content: ''; display: block; width: 65px; height: 3px; background: var(--color-secondary); margin-top: var(--spacing-sm); border-radius: 1.5px; opacity: 0.8; transition: background var(--transition-speed-medium) ease, width var(--transition-speed-medium) ease, transform var(--transition-speed-medium) ease; transform-origin: center; }
.section-header.text-center .section-title::after { margin-left: auto; margin-right: auto; }
.section-title:hover::after { width: 85px; background: var(--color-primary); transform: scaleX(1.1); }
.section-title--left-aligned { display: block; text-align: left; } .section-title--left-aligned::after { margin-left: 0; margin-right: auto; transform-origin: left; }
.section-subtitle { color: var(--color-text-muted); font-size: clamp(1.05rem, 2.5vw, 1.25rem); max-width: 75ch; margin-top: calc(-1 * var(--spacing-xs)); margin-bottom: 0; font-weight: var(--font-weight-light); line-height: 1.6; }
.section-header.text-center p.section-subtitle { margin-left: auto; margin-right: auto; }
.section-footer { margin-top: var(--spacing-xl); }
.fa-fw { width: 1.3em; text-align: center; margin-right: var(--spacing-sm); }
.mobile-break { display: none; } .emoji { display: inline-block; vertical-align: baseline; margin-left: var(--spacing-xxs); font-size: 1em; }
.link-styled { color: var(--color-secondary); font-weight: var(--font-weight-medium); border-bottom: 1px dashed rgba(var(--color-secondary-rgb), 0.6); padding-bottom: 1px; transition: color var(--transition-speed-fast) ease, border-color var(--transition-speed-fast) ease; }
.link-styled:hover, .link-styled:focus-visible { color: var(--color-link-hover); border-bottom-color: var(--color-link-hover); text-decoration: none; }

/* --------------------------------------------------------------------------
   4. Preloader
   -------------------------------------------------------------------------- */
.preloader {
  position: fixed;
  inset: 0;
  background-color: var(--color-preloader-bg);
  z-index: var(--z-index-preloader);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  visibility: visible;
  pointer-events: all; /* Permitir que el preloader sea "visible" al sistema */
  transition: opacity var(--transition-preloader) var(--transition-timing-function-expo),
              visibility 0s linear var(--transition-preloader);
}
.preloader__icon {
  font-size: 5rem;
  color: var(--color-preloader-icon);
  animation: preloaderPulse 2s infinite ease-in-out;
  transition: transform 0.5s ease-out;
}
.preloader__icon-element { display: block; } /* Asegura que el icono se renderice bien */

.preloader--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader--hidden .preloader__icon {
  transform: scale(0.7) rotate(45deg); /* Efecto de salida más bonito */
  opacity: 0;
  transition: transform var(--transition-preloader) var(--transition-timing-function),
              opacity var(--transition-preloader) var(--transition-timing-function);
}
@keyframes preloaderPulse {
  0%, 100% { opacity: 0.7; transform: scale(1) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(5deg); }
}

/* --------------------------------------------------------------------------
   5. Layout y Componentes Principales (Header Fijo)
   -------------------------------------------------------------------------- */

/* --- Header Container (Contenedor Fijo para Banner y Header/Navbar) --- */
.header-container {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-index-header-container);
  background-color: var(--color-header-container-background); /* Fondo para todo el bloque fijo */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-header-container); /* Sombra para el bloque fijo */
  /* No necesita transición aquí, ya que es siempre fijo */
}

/* --- Banner Promocional Superior --- */
.promo-banner--top {
  background-color: var(--color-banner-top-bg);
  color: var(--color-banner-top-text);
  padding: var(--spacing-xs) var(--container-padding);
  font-size: clamp(0.8rem, 1.7vw, 0.9rem);
  font-weight: var(--font-weight-medium);
  text-align: center;
  position: relative; /* No necesita ser sticky por sí mismo */
  z-index: 1; /* Orden dentro del header-container */
  border-bottom: 1px solid rgba(var(--color-background-rgb), 0.2);
  transition: background-color var(--transition-speed-medium) ease, color var(--transition-speed-medium) ease;
}
.promo-banner--top .container { display: flex; justify-content: center; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; }
.promo-banner--top p { margin-bottom: 0; }
.promo-banner--top i { margin-right: var(--spacing-xs); vertical-align: -0.1em; color: rgba(var(--color-background-rgb), 0.7); }
.promo-banner__link { color: var(--color-banner-top-text); font-weight: bold; text-decoration: underline; text-underline-offset: 3px; transition: color var(--transition-speed-fast) ease; opacity: 0.9; }
.promo-banner__link:hover, .promo-banner__link:focus-visible { color: #ffffff; opacity: 1; }
.promo-banner__urgency { opacity: 0.8; font-style: italic; font-size: 0.9em; margin-left: var(--spacing-sm); }

/* --- Header Principal (Navbar) --- */
.header {
  position: relative; /* Ya no es sticky, es parte del flujo de header-container */
  /* top: 0; ELIMINADO */
  width: 100%;
  z-index: var(--z-index-header); /* Orden dentro del header-container, debajo del banner si se superponen */
  background-color: var(--color-header-background); /* Transparente, el fondo lo da header-container */
  height: var(--navbar-height-desktop);
  border-bottom: var(--border-width) solid var(--color-header-border);
  /* box-shadow: var(--shadow-navbar); ELIMINADO, la sombra la da header-container */
  transition: none; /* No necesita transición de posición */
}
/* Clase .scrolled ya no tiene impacto visual directo en el .header para mantener apariencia estática */
.header.scrolled {
  /* No hay cambios visuales definidos aquí, la apariencia es constante */
}

/* --- Navbar Container y elementos internos (Layout v4.0 mantenido) --- */
.navbar.container { display: flex; justify-content: space-between; align-items: center; height: 100%; gap: var(--spacing-md); }
.navbar__logo { display: flex; align-items: center; gap: var(--spacing-sm); font-family: var(--font-primary); font-size: clamp(1.5rem, 3vw, 1.8rem); font-weight: var(--font-weight-bold); color: var(--color-primary); text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: color var(--transition-speed-fast) ease, transform var(--transition-speed-fast) ease; padding: 0; }
.navbar__logo-img { max-height: calc(var(--navbar-height-desktop) - 30px); width: auto; transition: filter var(--transition-speed-fast) ease; filter: brightness(1); display: block; }
.navbar__logo-text { display: block; transition: color var(--transition-speed-fast) ease; }
.navbar__logo:hover, .navbar__logo:focus-visible { color: var(--color-secondary); transform: scale(1.02); }
.navbar__logo:hover .navbar__logo-img { filter: brightness(1.1); } .navbar__logo:hover .navbar__logo-text { color: var(--color-secondary); }
.navbar__menu-wrapper { display: flex; justify-content: center; align-items: center; flex-grow: 1; overflow: hidden; min-width: 0; }
.navbar__menu--desktop { display: flex; align-items: center; list-style: none; padding: 0; margin: 0; gap: var(--spacing-sm); flex-wrap: nowrap; }
.navbar__menu--desktop li[role="none"] { margin: 0; }
.navbar__menu--desktop .navbar__link { display: block; font-family: var(--font-secondary); font-size: clamp(0.85rem, 1.5vw, 0.9rem); font-weight: var(--font-weight-regular); color: var(--color-text-body); text-decoration: none; padding: var(--spacing-sm) var(--navbar-link-padding-horizontal); position: relative; transition: color var(--transition-speed-fast) ease, background-color var(--transition-speed-fast) ease; white-space: nowrap; border-radius: var(--border-radius-sm); }
.navbar__menu--desktop .navbar__link::after { content: ''; position: absolute; bottom: 8px; left: 50%; width: 0; height: 2px; background-color: var(--color-secondary); opacity: 0.8; transform: translateX(-50%); transition: width var(--transition-speed-medium) var(--transition-timing-function-expo), opacity var(--transition-speed-medium) var(--transition-timing-function-expo); }
.navbar__menu--desktop .navbar__link:hover, .navbar__menu--desktop .navbar__link:focus-visible, .navbar__menu--desktop .navbar__link.navbar__link--active { color: var(--color-primary); background-color: var(--color-navbar-link-active-bg); }
.navbar__menu--desktop .navbar__link:hover::after, .navbar__menu--desktop .navbar__link:focus-visible::after, .navbar__menu--desktop .navbar__link[aria-current="page"]::after, .navbar__menu--desktop .navbar__link.navbar__link--active::after { width: 65%; opacity: 1; }
.navbar__menu--desktop .navbar__link[aria-current="page"] { color: var(--color-primary); font-weight: var(--font-weight-medium); }
.navbar__menu--desktop .navbar__link[aria-current="page"]::after { background-color: var(--color-primary); width: 65%; opacity: 1; }
.navbar__menu-item--highlight {}
.navbar__link--highlight { color: var(--color-navbar-link-highlight-text) !important; font-weight: var(--font-weight-bold) !important; background-color: var(--color-navbar-link-highlight-bg) !important; padding: var(--spacing-sm) calc(var(--navbar-link-padding-horizontal) * 1.4) !important; border-radius: var(--border-radius-md); transition: background-color var(--transition-speed-fast) ease, color var(--transition-speed-fast) ease, transform var(--transition-speed-fast) ease, box-shadow var(--transition-speed-fast) ease; display: inline-flex; align-items: center; gap: var(--spacing-xs); box-shadow: 0 0 0 1px rgba(var(--color-background-dark-rgb), 0.5), var(--shadow-soft); transform: scale(1); position: relative; z-index: 1; }
.navbar__link--highlight:hover, .navbar__link--highlight:focus-visible { background-color: var(--color-navbar-link-highlight-hover-bg) !important; color: var(--color-navbar-link-highlight-hover-text) !important; transform: scale(1.05); box-shadow: 0 0 0 1px rgba(var(--color-background-dark-rgb), 0.3), var(--shadow-medium); }
.navbar__link--highlight::after { display: none !important; } .navbar__link--highlight i { font-size: 0.85em; vertical-align: baseline; }
.navbar__cta--desktop { flex-shrink: 0; }
.navbar__cta--desktop .btn--small { padding: var(--spacing-xs) var(--spacing-lg); font-size: 0.85rem; letter-spacing: 0.8px; border-radius: var(--border-radius-md); transition: transform var(--transition-speed-fast) ease, box-shadow var(--transition-speed-fast) ease; }
.navbar__cta--desktop .btn--small:hover, .navbar__cta--desktop .btn--small:focus-visible { transform: translateY(-2px) scale(1.02); box-shadow: var(--shadow-medium); }
@media (max-width: 1150px) { .navbar__cta-text { display: none; } .navbar__cta--desktop .btn--small { padding: var(--spacing-xs) var(--spacing-sm); } .navbar__cta--desktop .btn--small i { margin-right: 0; } }
.navbar__toggle { display: none; background: none; border: none; padding: var(--spacing-xs); margin: 0; color: var(--color-primary); cursor: pointer; z-index: var(--z-index-navbar-toggle); width: 48px; height: 48px; position: relative; margin-right: calc(-1 * var(--spacing-xs)); transition: color var(--transition-speed-fast) ease; }
.navbar__toggle:hover, .navbar__toggle:focus-visible { color: var(--color-secondary); }
.navbar__toggle-icon-container { position: relative; width: 24px; height: 18px; display: block; }
.navbar__toggle-bar { display: block; position: absolute; left: 0; width: 100%; height: 2.5px; background-color: currentColor; border-radius: 1px; transition: transform var(--transition-speed-medium) var(--transition-timing-function-navbar), opacity var(--transition-speed-medium) var(--transition-timing-function-navbar); transform-origin: center; }
.navbar__toggle-bar:nth-child(1) { top: 0; } .navbar__toggle-bar:nth-child(2) { top: 50%; transform: translateY(-50%) scaleX(1); } .navbar__toggle-bar:nth-child(3) { bottom: 0; }
.mobile-menu-active .navbar__toggle-bar:nth-child(1) { transform: translateY(calc(18px / 2 - 2.5px / 2)) rotate(45deg); }
.mobile-menu-active .navbar__toggle-bar:nth-child(2) { transform: translateY(-50%) scaleX(0); opacity: 0; }
.mobile-menu-active .navbar__toggle-bar:nth-child(3) { transform: translateY(calc(-18px / 2 + 2.5px / 2)) rotate(-45deg); }
.navbar__mobile-menu-panel { display: block; position: fixed; top: 0; right: 0; width: var(--navbar-mobile-menu-width); height: 100vh; max-height: 100vh; background-color: var(--color-background); border-left: 1px solid var(--color-border); box-shadow: -5px 0 30px rgba(var(--shadow-color-rgb), 0.2); padding: var(--spacing-lg); padding-top: calc(var(--navbar-height-mobile) + var(--spacing-md)); padding-bottom: var(--spacing-xl); z-index: var(--z-index-navbar-panel); transform: translateX(100%); visibility: hidden; opacity: 0; transition: transform var(--transition-speed-medium) var(--transition-timing-function-navbar), visibility 0s var(--transition-speed-medium) linear, opacity var(--transition-speed-medium) var(--transition-timing-function-navbar); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
.mobile-menu-active .navbar__mobile-menu-panel { transform: translateX(0); visibility: visible; opacity: 1; transition-delay: 0s, 0s, 0s; }
.navbar__menu--mobile { display: flex; flex-direction: column; gap: 0; align-items: stretch; margin-bottom: auto; }
.navbar__menu--mobile li[role="none"] { width: 100%; opacity: 0; transform: translateY(15px); transition: opacity var(--transition-speed-medium) ease var(--item-delay, 0.1s), transform var(--transition-speed-medium) ease var(--item-delay, 0.1s); }
.mobile-menu-active .navbar__menu--mobile li[role="none"] { opacity: 1; transform: translateY(0); }
.mobile-menu-active .navbar__menu--mobile li:nth-child(1) { --item-delay: 0.1s; } .mobile-menu-active .navbar__menu--mobile li:nth-child(2) { --item-delay: 0.15s; } .mobile-menu-active .navbar__menu--mobile li:nth-child(3) { --item-delay: 0.2s; } .mobile-menu-active .navbar__menu--mobile li:nth-child(4) { --item-delay: 0.25s; } .mobile-menu-active .navbar__menu--mobile li:nth-child(5) { --item-delay: 0.3s; } .mobile-menu-active .navbar__menu--mobile li:nth-child(6) { --item-delay: 0.35s; } .mobile-menu-active .navbar__menu--mobile li:nth-child(7) { --item-delay: 0.4s; } .mobile-menu-active .navbar__menu--mobile li:nth-child(8) { --item-delay: 0.45s; }
.navbar__menu--mobile .navbar__link { font-size: 1.15rem; padding: var(--spacing-md) var(--spacing-md); border-bottom: 1px solid var(--color-border); color: var(--color-text-body); transition: background-color var(--transition-speed-fast) ease, color var(--transition-speed-fast) ease; white-space: normal; border-radius: 0; display: block; text-align: left; }
.navbar__menu--mobile .navbar__link:hover, .navbar__menu--mobile .navbar__link:focus-visible, .navbar__menu--mobile .navbar__link[aria-current="page"], .navbar__menu--mobile .navbar__link.navbar__link--active { background-color: var(--color-background-light); color: var(--color-primary); }
.navbar__menu--mobile .navbar__link[aria-current="page"] { font-weight: var(--font-weight-bold); }
.navbar__menu--mobile .navbar__link--highlight { background-color: rgba(var(--color-offer-rgb), 0.15); color: var(--color-offer-highlight); font-weight: var(--font-weight-bold); }
.navbar__menu--mobile .navbar__link--highlight:hover, .navbar__menu--mobile .navbar__link--highlight:focus-visible { background-color: var(--color-offer); color: var(--color-offer-text); }
.navbar__menu--mobile .navbar__link--highlight i { display: inline-block; margin-right: var(--spacing-xs); }
.navbar__cta--mobile { margin-top: var(--spacing-lg); padding-top: 0; border-top: none; display: block; } .navbar__cta--mobile .btn { width: 100%; }
.navbar__mobile-social { display: flex; justify-content: center; gap: var(--spacing-lg); margin-top: var(--spacing-lg); padding-top: var(--spacing-lg); border-top: 1px solid var(--color-border); }
.navbar__social-link { font-size: 1.6rem; color: var(--color-text-muted); transition: color var(--transition-speed-fast) ease, transform var(--transition-speed-fast) var(--transition-timing-function-bounce); }
.navbar__social-link:hover, .navbar__social-link:focus-visible { color: var(--color-secondary); transform: scale(1.15); }
.navbar__overlay { display: block; position: fixed; inset: 0; background-color: var(--color-overlay-navbar); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: var(--z-index-navbar-overlay); opacity: 0; visibility: hidden; transition: opacity var(--transition-speed-medium) ease, visibility 0s var(--transition-speed-medium) linear, backdrop-filter var(--transition-speed-medium) ease; cursor: pointer; pointer-events: none; }
.mobile-menu-active .navbar__overlay { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
@media (min-width: 1025px) { .navbar__toggle, .navbar__mobile-menu-panel, .navbar__overlay, .navbar__cta--mobile, .navbar__mobile-social { display: none !important; } .navbar__menu-wrapper { display: flex; } }
@media (max-width: 1024px) {
  .header { height: var(--navbar-height-mobile); }
  .navbar__logo-img { max-height: calc(var(--navbar-height-mobile) - 25px); }
  .navbar__menu-wrapper, .navbar__cta--desktop { display: none; }
  .navbar__toggle { display: flex; align-items: center; justify-content: center; }
  .promo-banner--scrolled { display: none !important; } /* Ocultar en móvil */
}
.promo-banner--scrolled { display: flex; align-items: center; justify-content: center; /* position: absolute; ELIMINADO, parte del flujo normal ahora */ /* top: 100%; ELIMINADO */ width: 100%; background-color: var(--color-offer); color: var(--color-offer-text); padding: var(--spacing-xxs) var(--container-padding); font-size: clamp(0.7rem, 1.3vw, 0.8rem); font-weight: var(--font-weight-medium); text-align: center; z-index: 0; /* Debajo de la navbar si es necesario, pero parte del flujo del header */ box-shadow: var(--shadow-soft); opacity: 0; transform: translateY(-10px); transition: opacity var(--transition-speed-medium) var(--transition-timing-function-expo), transform var(--transition-speed-medium) var(--transition-timing-function-expo), background-color var(--transition-speed-medium) ease; pointer-events: none; }
.promo-banner--scrolled .container { display: flex; align-items: center; justify-content: center; gap: var(--spacing-xs); flex-wrap: wrap; } .promo-banner--scrolled p { margin-bottom: 0; } .promo-banner--scrolled i { font-size: 1.05em; margin-right: var(--spacing-xxs); } .promo-banner--scrolled strong { font-weight: var(--font-weight-bold); }
.promo-banner__link--scrolled { color: var(--color-offer-text); font-weight: bold; text-decoration: underline; text-underline-offset: 2px; margin-left: var(--spacing-xs); transition: color var(--transition-speed-fast) ease; }
.promo-banner__link--scrolled:hover, .promo-banner__link--scrolled:focus-visible { color: rgba(26, 17, 16, 0.8); }
/* Banner scrolled ahora aparece si el header-container tiene la clase .scrolled Y no estamos en móvil */
@media (min-width: 1025px) { .header-container.scrolled .promo-banner--scrolled { opacity: 1; transform: translateY(0); pointer-events: auto; } }


/* --------------------------------------------------------------------------
   6. Secciones Principales (Hero, Experience, etc.)
   -------------------------------------------------------------------------- */
.hero { position: relative; padding: var(--spacing-xxl) var(--container-padding); min-height: 80vh; display: flex; align-items: center; justify-content: center; text-align: center; color: #ffffff; background-color: var(--color-background-dark); background-image: linear-gradient(rgba(30, 22, 20, 0.75), rgba(58, 42, 40, 0.9)), var(--hero-bg-image, url('img/hero-background-v9.webp')); background-size: cover; background-position: center center; background-attachment: scroll; padding-top: var(--spacing-xl); margin-top: 0; /* El sticky container ocupa su espacio, no se requiere margin-top aquí para el hero */ }
/* .header-container + #main-content > #hero { padding-top: var(--spacing-xxl); } */ /* Esta regla puede no ser necesaria con sticky */
@media (max-width: 1024px) { .hero { min-height: 75vh; } }
.hero__content { position: relative; z-index: var(--z-base); max-width: 980px; }
.hero__title { color: var(--color-primary); font-weight: var(--font-weight-bold); text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6); margin-bottom: var(--spacing-md); font-size: clamp(2.8rem, 7vw, 4.2rem); line-height: 1.2; }
.hero__title .highlight { color: var(--color-secondary); background-color: rgba(var(--color-secondary-rgb), 0.18); }
.hero__subtitle { font-size: clamp(1.15rem, 3vw, 1.4rem); color: var(--color-text-body); margin-bottom: var(--spacing-xl); text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5); font-weight: var(--font-weight-light); max-width: 70ch; margin-left: auto; margin-right: auto; line-height: 1.6; }
.hero__subtitle .highlight { color: var(--color-accent); background: none; font-weight: var(--font-weight-regular); }
.hero__cta-container { display: flex; justify-content: center; gap: var(--spacing-lg); flex-wrap: wrap; } .hero__cta-container .btn { font-size: clamp(0.95rem, 2vw, 1.1rem); }
.experience { background-color: var(--color-background-light); } .experience__container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); align-items: center; }
@media (min-width: 993px) { .experience__container { grid-template-columns: 1.1fr 1fr; gap: var(--spacing-xxl); } .experience__image-wrapper { order: 1; } .experience__content { order: 0; } }
.experience__content p.lead { color: var(--color-primary); font-size: 1.3rem; } .experience__benefits-list { margin: var(--spacing-lg) 0; padding-left: 0; } .experience__benefits-list li { display: flex; align-items: flex-start; gap: var(--spacing-md); margin-bottom: var(--spacing-md); }
.experience__benefits-list i { color: var(--color-secondary); font-size: 1.2em; background-color: transparent; border: 1px solid var(--color-border); border-radius: 50%; padding: var(--spacing-sm); width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 0.1em; box-shadow: none; transition: background-color var(--transition-speed-fast) ease, color var(--transition-speed-fast) ease, transform var(--transition-speed-fast) ease, border-color var(--transition-speed-fast) ease; }
.experience__benefits-list li:hover i { background-color: var(--color-secondary); color: var(--color-text-light); transform: scale(1.05); border-color: var(--color-secondary); }
.experience__benefits-list div { flex: 1; } .experience__benefits-list strong { color: var(--color-text-headings); font-weight: var(--font-weight-medium); } .experience__content .btn { margin-top: var(--spacing-lg); }
.experience__image-wrapper { position: relative; text-align: center; border-radius: var(--border-radius-lg); overflow: hidden; } .experience__image { border-radius: var(--border-radius-lg); border: none; box-shadow: var(--shadow-strong); max-width: 100%; transition: transform var(--transition-speed-slow) var(--transition-timing-function-expo), box-shadow var(--transition-speed-slow) var(--transition-timing-function-expo); }
.experience__image-wrapper:hover .experience__image { transform: scale(1.03); box-shadow: 0 15px 40px rgba(var(--shadow-color-rgb), 0.25); }
@media (max-width: 992px) { .experience__container { grid-template-columns: 1fr; } .experience__image-wrapper { order: -1; margin-bottom: var(--spacing-lg); } .experience__content { text-align: center; } .experience__content > * { margin-left: auto; margin-right: auto; } .experience__benefits-list li { justify-content: flex-start; text-align: left; max-width: 450px; margin-left: auto; margin-right: auto; } }
@media (max-width: 768px) { .experience__benefits-list li { justify-content: center; } }
.offer-section { border-top: none; border-bottom: none; background: linear-gradient(180deg, var(--color-background-light) 0%, var(--color-background-section-alt) 100%); } .offer-section__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); margin: var(--spacing-xl) 0; }
.offer-section__card { background-color: rgba(var(--color-background-rgb), 0.6); padding: var(--spacing-lg); border-radius: var(--border-radius-lg); box-shadow: none; border: 1px solid var(--color-border); text-align: left; } .offer-section__subtitle { color: var(--color-primary); border-bottom: 1px solid var(--color-border); padding-bottom: var(--spacing-md); display: flex; align-items: center; gap: var(--spacing-sm); font-size: 1.4rem; margin-bottom: var(--spacing-lg); }
.offer-section__subtitle i { color: var(--color-secondary); font-size: 1.1em; } .offer-section__list { padding-left: 0; } .offer-section__list li { display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md); font-size: 1rem; }
.offer-section__list i { color: var(--color-secondary); font-size: 1.1em; width: 20px; text-align: center; flex-shrink: 0; } .offer-section__benefits .fa-percent, .offer-section__benefits .fa-bath, .offer-section__benefits .fa-moon { color: var(--color-offer-highlight); }
.offer-section__list strong { font-weight: var(--font-weight-medium); } .offer-section__list .highlight { color: var(--color-offer-highlight); } .offer-section__footer { margin-top: var(--spacing-xl); } .offer-section__cta-text { font-size: 1.15rem; color: var(--color-primary); margin-bottom: var(--spacing-lg); }
.offer-section__footer .btn--offer { background-color: var(--color-offer); border-color: var(--color-offer); color: var(--color-offer-text); transform: scale(1); } .offer-section__footer .btn--offer:hover, .offer-section__footer .btn--offer:focus-visible { background-color: var(--color-offer-highlight); border-color: var(--color-offer-highlight); box-shadow: var(--shadow-medium); transform: translateY(-3px); }
.offer-section__urgency-note { margin-top: var(--spacing-lg); font-style: italic; color: var(--color-text-muted); font-size: 0.95rem; }
@media (max-width: 768px) { .offer-section__grid { grid-template-columns: 1fr; } }
.cabins { background-color: var(--color-background); } .cabins__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); }
.cabin-card { background-color: var(--color-background-light); border-radius: var(--border-radius-lg); border: 1px solid var(--color-border); transition: var(--transition-default), transform 0.3s ease; box-shadow: var(--shadow-medium); display: flex; flex-direction: column; } .cabin-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-strong); border-color: rgba(var(--color-secondary-rgb), 0.7); }
.cabin-card__image-container { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background-color: var(--color-background); border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0; } .cabin-card__image { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-speed-slow) ease, filter var(--transition-speed-medium) ease; filter: brightness(1) saturate(1); }
.cabin-card:hover .cabin-card__image { transform: scale(1.05); filter: saturate(1.1); } .cabin-card__image-overlay { position: absolute; inset: 0; background: linear-gradient(transparent 60%, rgba(var(--color-overlay-navbar-rgb), 0.85) 100%); display: flex; justify-content: center; align-items: flex-end; opacity: 0; transition: opacity var(--transition-speed-medium) ease; z-index: var(--z-content-overlay); padding: var(--spacing-lg); border-radius: inherit; pointer-events: none; }
.cabin-card:hover .cabin-card__image-overlay { opacity: 1; } .cabin-card__image-overlay .overlay-button { transform: translateY(15px); opacity: 0; transition: transform var(--transition-speed-medium) ease 0.15s, opacity var(--transition-speed-medium) ease 0.15s; pointer-events: all; }
.cabin-card:hover .cabin-card__image-overlay .overlay-button { transform: translateY(0); opacity: 1; } .cabin-card__content { padding: var(--spacing-lg); flex-grow: 1; display: flex; flex-direction: column; } .cabin-card__title { color: var(--color-primary); font-size: 1.6rem; }
.cabin-card__description { color: var(--color-text-body); font-size: 0.95rem; margin-bottom: var(--spacing-lg); flex-grow: 1; } .cabin-card__features { list-style: none; padding: 0; margin: 0 0 var(--spacing-lg) 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--spacing-md); font-size: 0.9rem; }
.cabin-card__features li { display: flex; align-items: center; gap: var(--spacing-sm); color: var(--color-text-body); } .cabin-card__features i { color: var(--color-secondary); font-size: 1.1em; width: 20px; text-align: center; flex-shrink: 0; }
.cabin-card__features .highlight { font-weight: var(--font-weight-bold); color: var(--color-offer-highlight); background: none; padding: 0; font-size: 1em; } .cabin-card__pricing { margin-top: auto; padding-top: var(--spacing-lg); border-top: 1px dashed var(--color-border); }
.rate-option { cursor: pointer; padding: var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--border-radius-md); margin-bottom: var(--spacing-md); position: relative; background-color: transparent; transition: border-color var(--transition-speed-fast) ease, background-color var(--transition-speed-fast) ease, transform var(--transition-speed-fast) ease, box-shadow var(--transition-speed-fast) ease; transform: scale(1); box-shadow: none; will-change: transform, box-shadow, border-color, background-color; overflow: hidden; }
.rate-option:not(.active-rate):hover, .rate-option:not(.active-rate):focus-visible { border-color: var(--color-secondary); background-color: rgba(var(--color-secondary-rgb), 0.05); transform: scale(1.01); box-shadow: var(--shadow-soft); outline: none; z-index: 1; }
.rate-option.active-rate { border-width: 2px; border-color: var(--color-secondary); background-color: rgba(var(--color-secondary-rgb), 0.1); box-shadow: none; transform: scale(1); z-index: 2; } .rate-option.cabin-card__price-block--offer.active-rate { border-color: var(--color-offer); background-color: rgba(var(--color-offer-rgb), 0.15); }
.rate-option::before { content: '✔'; position: absolute; top: -1px; right: -1px; color: var(--color-background-light); font-size: 0.9em; font-weight: bold; background-color: var(--color-secondary); border-bottom-left-radius: var(--border-radius-md); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; z-index: 3; opacity: 0; transform: translateY(-100%) translateX(100%) rotate(90deg); transition: opacity var(--transition-speed-medium) ease 0.05s, transform var(--transition-speed-medium) var(--transition-timing-function-expo) 0.05s; will-change: opacity, transform; }
.rate-option.active-rate::before { opacity: 1; transform: translateY(0) translateX(0) rotate(0deg); } .rate-option.cabin-card__price-block--offer.active-rate::before { background-color: var(--color-offer); color: var(--color-offer-text); }
.cabin-card__price-label { display: block; font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: var(--spacing-xxs); } .cabin-card__price { font-size: 1rem; margin-bottom: var(--spacing-xs); color: var(--color-text-body); }
.cabin-card__price-value { font-size: clamp(1.6rem, 3vw, 1.9rem); font-weight: var(--font-weight-bold); color: var(--color-primary); margin-right: var(--spacing-xs); } .cabin-card__price-original { font-size: 0.9rem; color: var(--color-text-muted); text-decoration: line-through; opacity: 0.8; }
.cabin-card__price-qualifier { font-size: 0.8rem; color: var(--color-text-muted); display: block; margin-bottom: var(--spacing-xs); } .cabin-card__price--optional { font-size: 0.9rem; color: var(--color-text-muted); margin-top: var(--spacing-xs); margin-bottom: 0; }
.cabin-card__price--optional .cabin-card__price-value { font-size: 1.1rem; font-weight: var(--font-weight-medium); } .rate-option.active-rate .cabin-card__price-block--offer .cabin-card__price-value { color: var(--color-offer-highlight); }
.rate-option.active-rate .cabin-card__price-block--regular .cabin-card__price-value { color: var(--color-primary); } .cabin-card__price-note { font-size: 0.85rem; color: var(--color-text-muted); margin-top: var(--spacing-sm); text-align: center; }
.cabin-card__cta { margin-top: var(--spacing-lg); }
.amenities { background-color: var(--color-background-light); } .amenities__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--spacing-lg); }
.amenity-card { background-color: var(--color-background); border-radius: var(--border-radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; overflow: hidden; transition: var(--transition-default); } .amenity-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-medium); border-color: var(--color-secondary); }
.amenity-card__figure { margin: 0; position: relative; overflow: hidden; aspect-ratio: 16 / 9; } .amenity-card__image { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-speed-medium) ease; }
.amenity-card:hover .amenity-card__image { transform: scale(1.05); } .amenity-card__content { padding: var(--spacing-md); text-align: center; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }
.amenity-card__title { font-size: 1.2rem; margin-top: 0; margin-bottom: var(--spacing-xs); color: var(--color-primary); } .amenity-card__title .highlight--badge { font-size: 0.7em; } .amenity-card__description { font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: 0; line-height: 1.5; }
.amenity-card--simple { background-color: transparent; border: 1px dashed var(--color-border); box-shadow: none; align-items: center; padding: var(--spacing-lg) var(--spacing-md); flex-direction: row; } .amenity-card--simple:hover { background-color: var(--color-background-light); border-style: solid; transform: none; box-shadow: none; }
.amenity-card--simple .amenity-card__figure { display: none; } .amenity-card--simple .amenity-card__icon-wrapper { margin-bottom: 0; margin-right: var(--spacing-md); } .amenity-card--simple .amenity-card__icon-wrapper i { font-size: 1.8rem; color: var(--color-text-muted); transition: color var(--transition-speed-fast) ease; }
.amenity-card--simple:hover .amenity-card__icon-wrapper i { color: var(--color-secondary); transform: none; } .amenity-card--simple .amenity-card__title { font-size: 1rem; color: var(--color-text-body); margin-bottom: 0; }
.amenity-card--simple .amenity-card__content { padding: 0; justify-content: flex-start; text-align: left; } .amenity-card--simple .amenity-card__description { display: block; font-size: 0.85rem; }
.reviews { background-color: var(--color-background-section-alt); } .reviews__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: var(--spacing-lg); }
.review-card { background-color: var(--color-background-light); padding: var(--spacing-lg); border-radius: var(--border-radius-lg); border-left: 4px solid var(--color-secondary); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; transition: var(--transition-default); } .review-card:hover { transform: scale(1.01) translateY(-3px); box-shadow: var(--shadow-medium); border-left-color: var(--color-primary); }
.review-card__rating { margin-bottom: var(--spacing-md); color: var(--color-secondary); font-size: 1.1rem; } .review-card__quote { margin: 0; font-family: var(--font-primary); font-style: italic; font-size: 1.05rem; color: var(--color-text-body); flex-grow: 1; }
.review-card__quote p { margin-bottom: var(--spacing-md); line-height: 1.6; } .review-card__quote footer { margin-top: auto; padding-top: var(--spacing-md); font-style: normal; font-family: var(--font-secondary); font-size: 0.9rem; color: var(--color-text-muted); text-align: right; }
.review-card__quote cite { font-weight: var(--font-weight-medium); color: var(--color-primary); } .review-card__source { display: block; font-size: 0.8em; opacity: 0.8; }
.gallery { background-color: var(--color-background-light); } #gallery .container-fluid { padding: 0 var(--spacing-xs); } .gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--spacing-sm); margin-top: var(--spacing-lg); }
.gallery__item { position: relative; overflow: hidden; cursor: pointer; aspect-ratio: 1 / 1; background-color: var(--color-background); display: block; border-radius: var(--border-radius-md); box-shadow: none; border: 1px solid var(--color-border); transition: transform var(--transition-speed-medium) ease, box-shadow var(--transition-speed-medium) ease, border-color var(--transition-speed-fast) ease; } .gallery__item:hover { transform: translateY(-3px) scale(1.02); box-shadow: var(--shadow-medium); z-index: 2; border-color: var(--color-secondary); }
.gallery__item figure { margin: 0; height: 100%; } .gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-speed-medium) ease, filter var(--transition-speed-medium) ease; filter: saturate(1); }
.gallery__item:hover img { transform: scale(1.08); filter: saturate(1.1) brightness(0.95); } .gallery__item-overlay { position: absolute; inset: 0; background: linear-gradient(transparent 20%, rgba(10, 8, 8, 0.8) 100%); display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity var(--transition-speed-medium) ease; z-index: var(--z-content-overlay); border-radius: inherit; }
.gallery__item:hover .gallery__item-overlay { opacity: 1; } .gallery__item-overlay i { color: var(--color-accent); font-size: 2.5rem; transform: scale(0.8); opacity: 0.8; transition: transform var(--transition-speed-medium) var(--transition-timing-function-bounce) 0.1s, opacity var(--transition-speed-medium) ease 0.1s; }
.gallery__item:hover .gallery__item-overlay i { transform: scale(1); opacity: 1; }
.lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-lightbox-bg); backdrop-filter: blur(8px); z-index: var(--z-index-lightbox); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity var(--transition-speed-medium) ease, visibility 0s var(--transition-speed-medium) linear, backdrop-filter var(--transition-speed-medium) ease; cursor: pointer; } .lightbox.active { opacity: 1; visibility: visible; transition-delay: 0s; }
.lightbox__content-wrapper { position: relative; max-width: 92vw; max-height: 88vh; display: flex; align-items: center; justify-content: center; cursor: default; } .lightbox__content { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--border-radius-md); box-shadow: var(--shadow-strong); animation: lightboxZoomIn var(--transition-speed-medium) var(--transition-timing-function); }
.lightbox__caption { position: absolute; bottom: var(--spacing-sm); left: 50%; transform: translateX(-50%); background-color: rgba(var(--color-background-rgb), 0.8); color: var(--color-text-body); padding: var(--spacing-xs) var(--spacing-md); border-radius: var(--border-radius-sm); font-size: 0.9rem; text-align: center; max-width: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity var(--transition-speed-fast) ease; }
.lightbox__content-wrapper:hover .lightbox__caption { opacity: 1; } .lightbox__close, .lightbox__prev, .lightbox__next { position: absolute; background: rgba(var(--color-background-light-rgb), 0.5); border: none; color: var(--color-primary); border-radius: 50%; width: 50px; height: 50px; font-size: 1.8rem; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: calc(var(--z-index-lightbox) + 1); transition: background-color var(--transition-speed-fast) ease, transform var(--transition-speed-fast) ease, color var(--transition-speed-fast) ease; opacity: 0.8; }
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover, .lightbox__close:focus-visible, .lightbox__prev:focus-visible, .lightbox__next:focus-visible { background-color: var(--color-secondary); color: var(--color-text-light); transform: scale(1.1); opacity: 1; } .lightbox__close { top: var(--spacing-md); right: var(--spacing-md); font-size: 2rem; }
.lightbox__prev { top: 50%; left: var(--spacing-md); transform: translateY(-50%); } .lightbox__next { top: 50%; right: var(--spacing-md); transform: translateY(-50%); } .lightbox__prev[disabled], .lightbox__next[disabled] { opacity: 0.3; cursor: default; background-color: rgba(var(--color-background-light-rgb), 0.3); transform: translateY(-50%) scale(1); color: var(--color-text-muted); }
@keyframes lightboxZoomIn { from { transform: scale(0.9) translateY(10px); opacity: 0.6; } to { transform: scale(1) translateY(0); opacity: 1; } }
.location { background: linear-gradient(180deg, var(--color-background-section-alt) 0%, var(--color-background) 100%); } .location__container { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--spacing-xl); align-items: start; }
.location__info .section-header { margin-bottom: var(--spacing-lg); } .location__address { font-style: normal; margin-bottom: var(--spacing-lg); line-height: 1.7; font-size: 1rem; color: var(--color-text-body); }
.location__address strong[itemprop="name"] { display: flex; align-items: center; gap: var(--spacing-sm); font-size: 1.3em; color: var(--color-primary); margin-bottom: var(--spacing-xs); font-weight: var(--font-weight-medium); } .location__address strong[itemprop="name"] i { color: var(--color-secondary); }
.location__navigation-aids { margin-bottom: var(--spacing-lg); } .location__subtitle { font-size: 1.4rem; font-weight: var(--font-weight-bold); color: var(--color-primary); margin-bottom: var(--spacing-md); margin-top: var(--spacing-lg); display: flex; align-items: center; gap: var(--spacing-sm); }
.location__subtitle i { color: var(--color-secondary); } .location__directions-simplified { margin-bottom: var(--spacing-lg); padding: var(--spacing-lg); background-color: rgba(var(--color-background-light-rgb), 0.6); border-radius: var(--border-radius-md); border-left: 4px solid var(--color-secondary); transition: var(--transition-colors), border-color var(--transition-speed-medium) ease; }
.location__directions-simplified p { margin-bottom: var(--spacing-sm); display: flex; align-items: flex-start; gap: var(--spacing-sm); color: var(--color-text-body); font-size: 0.95rem; } .location__directions-simplified p:last-child { margin-bottom: 0; }
.location__directions-simplified i { color: var(--color-secondary); margin-top: 0.2em; width: 20px; text-align: center; flex-shrink: 0; } .location__assistance { margin: var(--spacing-xl) 0; padding: var(--spacing-lg); border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); text-align: center; background-color: transparent; box-shadow: var(--shadow-soft); }
.location__assistance h4 { font-size: 1.2rem; color: var(--color-secondary); margin-bottom: var(--spacing-sm); font-weight: var(--font-weight-bold); } .location__assistance p { margin-bottom: 0; color: var(--color-text-body); display: flex; align-items: center; justify-content: center; gap: var(--spacing-sm); flex-wrap: wrap; font-size: 0.95rem;}
.location__assistance i { color: var(--color-whatsapp); font-size: 1.2rem; } .location__assistance a.link-styled { font-weight: var(--font-weight-bold); color: var(--color-accent); font-size: 1em; } .location__map-buttons { display: flex; gap: var(--spacing-md); flex-wrap: wrap; margin-top: var(--spacing-lg); }
.location__map-link i { margin-right: var(--spacing-xs); } .location__map-wrapper { border: 1px solid var(--color-border); background-color: var(--color-background-light); box-shadow: var(--shadow-medium); display: flex; align-items: center; justify-content: center; position: relative; border-radius: var(--border-radius-lg); overflow: hidden; min-height: 450px; height: 100%; }
.location__map-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity var(--transition-speed-slow) ease 0.2s; z-index: 1; } .location__map-wrapper.map-loaded iframe { opacity: 1; }
.location__map-static-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.3; z-index: 0; border-radius: inherit; transition: opacity var(--transition-speed-slow) ease; } .location__map-wrapper.map-loaded .location__map-static-placeholder { opacity: 0.1; }
.location__map-wrapper .map-placeholder-text { z-index: 2; color: var(--color-text-muted); background: rgba(var(--color-background-light-rgb), 0.8); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--border-radius-sm); transition: opacity var(--transition-speed-fast) ease; } .location__map-wrapper.map-loaded .map-placeholder-text { opacity: 0; pointer-events: none; }
.location__map-wrapper.map-error .map-placeholder-text { color: var(--color-error); background: rgba(241, 148, 138, 0.2); opacity: 1; font-style: normal; padding: var(--spacing-sm) var(--spacing-md);} .location__map-wrapper.map-placeholder-active .map-placeholder-text { background: none; font-style: italic; padding: 0; color: var(--color-text-body); opacity: 0.7; }
@media (max-width: 992px) { .location__container { grid-template-columns: 1fr; } .location__map-wrapper { order: -1; min-height: 350px; height: 350px; margin-bottom: var(--spacing-lg); } .location__info { text-align: center; } .location__info .section-header, .location__info .text-center-sm-down { text-align: center; } .location__directions-simplified p { justify-content: center; text-align: left; } .location__map-buttons { justify-content: center; } }
.contact { background-color: var(--color-background-dark); } .contact__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-lg); align-items: stretch; }
.contact__info-card { background-color: var(--color-background); padding: var(--spacing-xl); border-radius: var(--border-radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-medium); display: flex; flex-direction: column; } .contact__subtitle { font-size: 1.5rem; font-weight: var(--font-weight-bold); color: var(--color-primary); margin-bottom: var(--spacing-lg); display: flex; align-items: center; gap: var(--spacing-sm); border-bottom: 1px solid var(--color-border); padding-bottom: var(--spacing-md); }
.contact__subtitle i { color: var(--color-secondary); font-size: 1.05em; width: 1.3em; text-align: center; } .contact__subtitle--secondary { font-size: 1.3rem; margin-top: var(--spacing-xl); color: var(--color-text-muted); border-top: 1px dashed var(--color-border); padding-top: var(--spacing-lg); border-bottom: none; padding-bottom: 0; font-weight: var(--font-weight-medium); }
.contact__subtitle--secondary i { color: var(--color-text-muted); } .contact__info-list { list-style: none; padding: 0; margin: 0; } .contact__info-list--benefits { margin-bottom: var(--spacing-lg); } .contact__info-list li { display: flex; align-items: flex-start; gap: var(--spacing-md); margin-bottom: var(--spacing-md); font-size: 0.95rem; line-height: 1.6; }
.contact__info-list li i { color: var(--color-secondary); font-size: 1.1em; width: 22px; text-align: center; flex-shrink: 0; margin-top: 0.2em; } .contact__info-list li div { flex-grow: 1; } .contact__info-list strong { color: var(--color-text-headings); font-weight: var(--font-weight-medium); }
.contact__info-list--benefits li { margin-bottom: var(--spacing-sm); } .contact__info-list-item--highlight { font-weight: var(--font-weight-medium); } .contact__info-list-item--highlight i, .contact__info-list-item--highlight strong { color: var(--color-offer-highlight); }
.contact__info-list--additional { margin-top: var(--spacing-lg); } .contact__info-list--additional li i { color: var(--color-text-muted); } .contact__info-card--direct .contact__subtitle i { color: var(--color-primary); }
.contact__direct-recommendation { color: var(--color-text-muted); margin-bottom: var(--spacing-lg); font-style: italic; font-size: 0.9rem; } .contact__info-card--direct .btn--whatsapp { margin-bottom: var(--spacing-xl); }
.contact__info-list--secondary { margin-top: var(--spacing-lg); padding-top: var(--spacing-lg); border-top: 1px dashed var(--color-border); } .contact__link { color: var(--color-text-body); border-bottom: 1px solid transparent; transition: color var(--transition-speed-fast) ease, border-color var(--transition-speed-fast) ease; display: inline-block; }
.contact__link:hover, .contact__link:focus-visible { color: var(--color-secondary); border-bottom-color: var(--color-secondary); text-decoration: none; } .contact__social-container { margin-top: auto; padding-top: var(--spacing-lg); text-align: center; }
.contact__social-title { display: block; margin-bottom: var(--spacing-md); color: var(--color-text-muted); font-size: 0.85rem; font-weight: normal; text-transform: uppercase; letter-spacing: 1px; } .contact__social-container .btn { margin: 0 auto; }
.amenities__program-highlight { border: 1px solid var(--color-border); background-color: var(--color-background-light); box-shadow: none; border-radius: var(--border-radius-lg); } .amenities__program-highlight h3 { color: var(--color-primary); } .amenities__program-highlight .highlight { color: var(--color-secondary); }

/* --------------------------------------------------------------------------
   7. Footer
   -------------------------------------------------------------------------- */
.footer {
  background-color: var(--color-background-footer);
  color: var(--color-text-footer);
  border-top: 2px solid var(--color-footer-border-top);
  padding-top: var(--spacing-xl);
  padding-bottom: 0;
  font-size: 0.9rem;
}
.footer__container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-xl); padding-bottom: var(--spacing-xl); margin-bottom: var(--spacing-lg); border-bottom: 1px solid var(--color-border); }
.footer__section--about { display: flex; flex-direction: column; align-items: flex-start; }
@media (max-width: 768px) { .footer__section--about { align-items: center; text-align: center; } }
.footer__logo-img { max-width: 150px; margin-bottom: var(--spacing-md); opacity: 0.9; order: -1; filter: none; }
.footer__title { color: var(--color-footer-title); font-size: 1.1rem; font-weight: var(--font-weight-medium); border-bottom: none; padding-bottom: 0; margin-bottom: var(--spacing-md); }
.footer__section p, .footer__section li { color: var(--color-text-footer); margin-bottom: var(--spacing-xs); line-height: 1.7; font-size: 0.88rem; }
.footer__section ul { margin-top: var(--spacing-sm); }
.footer__section a { color: var(--color-link-footer); transition: color var(--transition-speed-fast) ease; }
.footer__section a:hover, .footer__section a:focus-visible { color: var(--color-link-footer-hover); text-decoration: none; }
.footer__section .highlight { color: var(--color-offer-highlight); }
.footer__section i { color: var(--color-secondary); opacity: 0.9; width: 20px; text-align: center; margin-right: var(--spacing-xs); }
.footer__bottom { padding: var(--spacing-lg) var(--container-padding); background-color: var(--color-background-footer-bottom); font-size: 0.85rem; color: var(--color-text-footer); text-align: center; }
.footer__bottom p { margin-bottom: var(--spacing-xs); opacity: 0.85; } .footer__bottom p:last-child { margin-bottom: 0; }
.footer__credit { font-size: 0.85rem; opacity: 0.75; } .footer__credit i { font-size: 0.9em; color: var(--color-secondary) !important; }
@media (min-width: 769px) { .footer__bottom { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: var(--spacing-xs); } }

/* --------------------------------------------------------------------------
   8. Botones
   -------------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-sm); font-family: var(--font-secondary); font-weight: var(--font-weight-medium); text-align: center; text-transform: none; letter-spacing: 0.5px; font-size: clamp(0.9rem, 1.8vw, 1rem); padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--border-radius-md); border: 1px solid transparent; cursor: pointer; user-select: none; transition: background-color var(--transition-speed-fast) ease, border-color var(--transition-speed-fast) ease, color var(--transition-speed-fast) ease, transform var(--transition-speed-fast) ease, box-shadow var(--transition-speed-fast) ease; box-shadow: none; position: relative; overflow: hidden; z-index: var(--z-base); line-height: 1.4; transform: perspective(1px) translateZ(0); }
.btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); text-decoration: none; }
.btn:active { transform: translateY(-1px); box-shadow: var(--shadow-inset); }
.btn:disabled, .btn.disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; background-color: var(--color-border) !important; border-color: var(--color-border) !important; color: var(--color-text-muted) !important; }
.btn i { font-size: 1em; margin-right: var(--spacing-xs); transition: transform var(--transition-speed-fast) ease; } .btn:hover i { transform: scale(1.1); }
.btn--primary { background-color: var(--color-secondary); color: var(--color-text-light); border-color: var(--color-secondary); } .btn--primary:hover, .btn--primary:focus-visible { background-color: #c49a5c; border-color: #c49a5c; color: var(--color-text-light); }
.btn--secondary { background-color: transparent; color: var(--color-secondary); border-color: var(--color-secondary); } .btn--secondary:hover, .btn--secondary:focus-visible { background-color: rgba(var(--color-secondary-rgb), 0.1); color: var(--color-primary); border-color: var(--color-primary); }
.btn--tertiary { background-color: transparent; color: var(--color-text-muted); border-color: var(--color-border); box-shadow: none; } .btn--tertiary:hover, .btn--tertiary:focus-visible { background-color: rgba(var(--color-border-rgb), 0.1); color: var(--color-secondary); border-color: var(--color-secondary); box-shadow: none; }
.btn--offer { background-color: var(--color-offer); border-color: var(--color-offer); color: var(--color-offer-text); } .btn--offer:hover, .btn--offer:focus-visible { background-color: var(--color-offer-highlight); border-color: var(--color-offer-highlight); }
.btn--large { padding: var(--spacing-md) var(--spacing-xl); font-size: clamp(1rem, 2vw, 1.1rem); letter-spacing: 0.8px; } .btn--small { padding: var(--spacing-xs) var(--spacing-md); font-size: 0.85rem; letter-spacing: 0.5px; }
.btn--full-width { display: flex; width: 100%; } .btn--whatsapp { background-color: var(--color-whatsapp) !important; border-color: var(--color-whatsapp) !important; color: #ffffff !important; } .btn--whatsapp:hover, .btn--whatsapp:focus-visible { background-color: #128C7E !important; border-color: #128C7E !important; box-shadow: var(--shadow-soft); color: #ffffff !important; }
.whatsapp-float { position: fixed; bottom: var(--spacing-lg); right: var(--spacing-lg); width: 58px; height: 58px; background-color: var(--color-whatsapp); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; box-shadow: var(--shadow-medium); z-index: var(--z-index-floating-button); transition: transform var(--transition-speed-medium) var(--transition-timing-function-bounce), box-shadow var(--transition-speed-fast) ease; text-decoration: none; border: 2px solid rgba(var(--color-background-rgb), 0.5); }
.whatsapp-float:hover, .whatsapp-float:focus-visible { transform: scale(1.12); box-shadow: var(--shadow-strong); color: white; text-decoration: none; } .whatsapp-float i { transition: transform var(--transition-speed-medium) cubic-bezier(0.68, -0.55, 0.27, 1.55); }
.whatsapp-float:hover i { transform: scale(1.1) rotate(10deg); } .whatsapp-float__tooltip { position: absolute; bottom: 110%; right: 50%; transform: translateX(50%); background-color: var(--color-offer); color: var(--color-offer-text); padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--border-radius-md); font-size: 0.75rem; font-weight: bold; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity var(--transition-speed-fast) ease, visibility 0s var(--transition-speed-fast) linear, transform var(--transition-speed-fast) ease; pointer-events: none; box-shadow: var(--shadow-soft); }
.whatsapp-float:hover .whatsapp-float__tooltip, .whatsapp-float:focus-visible .whatsapp-float__tooltip { opacity: 1; visibility: visible; transform: translateX(50%) translateY(-var(--spacing-xs)); transition-delay: 0.1s, 0.1s, 0.1s; }

/* --------------------------------------------------------------------------
   9. Animaciones de Scroll
   -------------------------------------------------------------------------- */
.animate-on-scroll, .animate-on-scroll-left, .animate-on-scroll-right { opacity: 0; transition: opacity var(--transition-speed-slow) ease-out 0.1s, transform var(--transition-speed-slow) var(--transition-timing-function-expo) 0.1s; transition-delay: var(--animation-delay, 0s); will-change: opacity, transform; }
.animate-on-scroll { transform: translateY(40px); } .animate-on-scroll-left { transform: translateX(-50px); } .animate-on-scroll-right { transform: translateX(50px); }
.animate-on-scroll.is-visible, .animate-on-scroll-left.is-visible, .animate-on-scroll-right.is-visible { opacity: 1; transform: translate(0, 0); }
@media (prefers-reduced-motion: reduce) { .animate-on-scroll, .animate-on-scroll-left, .animate-on-scroll-right { transition: opacity var(--transition-speed-slow) ease-out; transform: none !important; } }

/* --------------------------------------------------------------------------
   10. Responsividad General
   -------------------------------------------------------------------------- */
@media (max-width: 768px) { .mobile-break { display: block; } .text-center-sm-down { text-align: center; } .text-center-sm-down > * { margin-left: auto; margin-right: auto; } .section-header.text-center-sm-down .section-title::after { margin-left: auto; margin-right: auto; } .section-title--left-aligned { text-align: center; } .section-title--left-aligned::after { margin-left: auto; margin-right: auto; } .experience__container { grid-template-columns: 1fr; } .offer-section__grid { grid-template-columns: 1fr; } .cabins__grid { grid-template-columns: 1fr; } .amenities__grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .location__container { grid-template-columns: 1fr; } .contact__grid { grid-template-columns: 1fr; } .footer__container { grid-template-columns: 1fr; text-align: center; } .footer__section { align-items: center; } .footer__logo-img { order: 0; } .footer__bottom { flex-direction: column; gap: var(--spacing-xs); } }
@media (min-width: 769px) and (max-width: 1024px) { .cabins__grid { grid-template-columns: 1fr 1fr; } .contact__grid { grid-template-columns: 1fr 1fr; } .amenities__grid { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   11. Hacks y Fixes
   -------------------------------------------------------------------------- */
html.no-js .animate-on-scroll, html.no-js .animate-on-scroll-left, html.no-js .animate-on-scroll-right { opacity: 1; transform: none; }
.fa, .fas, .fab, .far { font-display: block; }

/* ==========================================================================
   Fin de styles-elite.css v5.1
   ========================================================================== */