/* ==========================================================================
   CSS VARIABLES & ROOT STYLES
   ========================================================================== */
:root {
    --primary-color: #e67e22;
    --secondary-color: #ffffff;
    --text-dark: #2c3e50;
    --text-black: #000000;
    --text-light: #666666;
    --white: #ffffff;
    --background-alt: #f9f9f9;
    --border-light: #e0e0e0;
    --bs-btn-hover-border-color: #cf711e !important;
    --bs-btn-border-color: #cf711e !important;
    --bs-btn-disabled-border-color: #cf711e !important;
    --bs-btn-active-border-color: #cf711e !important;
    --font-primary: 'Lattiene Pro', sans-serif;
    --font-secondary: 'Arimo', sans-serif;
    --section-padding: 5rem 0;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
    --shadow-lg: 0 8px 15px rgba(0,0,0,0.1);
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --gallery-scale-desktop: 1.038; /* aun más suave */
    --gallery-scale-mobile: 1.024;  /* más sutil en mobile */
    --gallery-transition: 0.6s cubic-bezier(.25,.56,.28,.98); /* curva más sedosa */
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    position: relative;
    font-family: var(--font-primary);
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-dark);
    overflow-x: hidden;
    background-color: var(--white);
}

.container {
    max-width: 100vw;
    overflow-x: hidden;
    padding-left: 10vw;
    padding-right: 10vw;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-secondary);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--text-black);
}

h1 {
    font-size: 1rem !important; /* mismo tamaño que tus párrafos */
    font-weight: 400 !important; /* o el que estés usando */
    margin-bottom: 1.2rem !important;
    margin-top: 0 !important;
    line-height: 1.65 !important;
    color: inherit;
}

.booking-modal {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-black);
}
.section-title {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--text-black);
    margin-bottom: 1rem;
    position: relative;
}

.about-title {
    text-align: center;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--primary-color);
    border-radius: 2px;
}

/* Links */
a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-normal);
}

a:hover {
    color: var(--primary-color);
}

/* ================== NUEVO DISEÑO 2025 OVERRIDES ================== */
/* Header superior */
.top-header {
    position: static !important;
    display: flex;
    align-items: center;   /* ← centra verticalmente los items dentro del ul */
    height: 88px;
    background: #fff;
    z-index: auto;
}

/* Eliminar padding extra del body usado para header fijo */
body { padding-top: 0 !important; }

/* Navbar sticky normal al top de la ventana */
.main-nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000;
}

#main-content {
    scroll-margin-top: 50px;
}

iframe { height: 400px !important; }

/* Navbar principal */
.main-nav {
    position: sticky;
    background: #f5f5f5;
    top: 0;
    width: 100%;
    box-shadow: none !important;
    z-index: 1000;
    padding: 0.35rem 0;
    transition: none;
    font-family: var(--font-secondary);
    border-bottom: 1px solid #0000001c !important;
}
.main-nav .nav-link { color: var(--text-dark) !important; font-weight:500; padding: .75rem 1rem !important; position:relative; }
.main-nav .nav-link.active, .main-nav .nav-link:hover { color: var(--primary-color) !important; }
.main-nav .nav-link.btn { color:#fff !important; }
.btn-cta { padding: .55rem 1.2rem !important; font-weight:600; }

/* Botones minimalistas */
.btn { border-radius: 4px !important; box-shadow: none !important; transition: background .2s ease,color .2s ease; }
.btn-btn-primary { background: var(--primary-color); border-color: var(--bs-btn-border-color); color: #ffffff}
.btn-btn-primary:hover { background:#d36d07 !important; color: #ffffff }
.btn-secondary { background: var(--secondary-color) !important; }
.btn-secondary:hover { background:#234a23 !important; }
.btn-outline-primary { border:1px solid var(--primary-color) !important; color: var(--primary-color) !important; }
.btn-outline-primary:hover { background: var(--primary-color) !important; color:#fff !important; }
.btn-small { padding: .45rem .9rem; font-size:.85rem; line-height:1.1; }
.no-radius { border-radius:0 !important; }

/* Hero reducido y sobrio */
.hero-section.minimal-hero { height:50vh; min-height:360px; max-height:520px; position:relative; display:flex; align-items:center; justify-content:center; margin-top:0; }
.hero-bg-static { position:absolute; inset:0; background: url('assets/images/herobg.webp') center/cover no-repeat; filter: brightness(0.9); }
.hero-overlay-light { position:absolute; inset:0; background: rgba(255,255,255,0.08); }
.hero-heading { font-size:2.4rem; font-weight:600; margin-bottom:.75rem; color: var(--text-black); text-shadow:none; }
.hero-tagline { font-size:1.05rem; color: var(--text-dark); max-width:640px; margin:0 auto; }

/* Eliminación de elementos antiguos hero */
.hero-bg-fade, .hero-overlay, .hero-scroll-indicator, .hero-arrow { display:none !important; }

/* About limpio */
.about-clean { background:#fff !important; padding:4rem 0 3rem; }
.about-clean .about-text { max-width:860px; font-size:1rem; line-height:1.65; }
.about-clean p { margin-bottom:1.2rem; }

/* Unificación de iconos */
.icon-accent, .icon-accent i, i.icon-accent { color: var(--primary-color) !important; }
.location-info i, .contact-info i { color: var(--primary-color) !important; }

/* Tarjetas y elementos visuales sin bordes redondeados fuertes */
.amenity-card, .cabin-card, .testimonial-card, .contact-form-container, .location-info, .reservation-widget-container, .accordion-item, .map-container, .contact-info, .cabin-price, .gallery-item, .footer-brand img, .social-link, .amenity-icon, .cabin-badge { border-radius:0 !important; }
.amenity-icon, .social-link { border-radius:4px !important; }

/* Sombras muy sutiles o inexistentes */
.amenity-card, .cabin-card, .testimonial-card, .contact-form-container, .location-info, .reservation-widget-container, .accordion-item, .gallery-item { box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important; }
.cabin-card:hover, .amenity-card:hover, .testimonial-card:hover, .gallery-item:hover { transform:none !important; box-shadow:0 1px 3px rgba(0,0,0,0.12) !important; }

/* Eliminar escalados y efectos exagerados */
.gallery-item:hover img, .cabin-card:hover .cabin-image img { transform:none !important; }
.gallery-item, .cabin-image img { transition:none !important; }

/* Features (eliminadas) ocultar si persisten */
.feature-item { display:none !important; }

/* Acordeón simplificado */
.accordion-button:not(.collapsed) { background: var(--secondary-color) !important; }
.accordion-button { border-radius:0 !important; box-shadow:none !important; }

/* Formularios */
.form-control { border-radius:0 !important; box-shadow:none !important; }
.form-control:focus { box-shadow:none !important; outline:2px solid var(--primary-color); }

/* Precio cabina */
.cabin-price { background: #f9f9f9 !important; }

/* Ajustes de tipografía consistentes */
.section-title { font-size:2.1rem; font-weight:600; letter-spacing: .5px; }

/* Links */
a { color: var(--primary-color); }
a:hover { color:#d36d07; }
.footer-links a, .footer-link { color:#c7c7c7; }
.footer-links a:hover, .footer-link:hover { color:#fff; }

/* Footer ajustes menores */
footer { border-top:4px solid var(--primary-color); }

/* Back to top botón simplificado */
#backToTop { border-radius:4px !important; box-shadow:none !important; }

/* Utilidades */
.no-shadow { box-shadow:none !important; }

/* Desactivar animaciones globales decorativas */
* { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }

/* Ajustes de espaciado */
section { padding-top:4rem; padding-bottom:4rem; }
#gallery, #cabins, #amenities, #location, #reservas, #faq, #contact { padding-top:4rem !important; padding-bottom:4rem !important; }

/* Active nav underline minimal */
.main-nav .nav-link.active::after, .main-nav .nav-link:hover::after { content:''; position:absolute; left:0; right:0; bottom:4px; height:2px; background: var(--primary-color); }
.main-nav .nav-link::after { content:''; position:absolute; left:0; right:0; bottom:4px; height:2px; background:transparent; }

/* Remover decoraciones previas de navbar antigua */
.navbar.scrolled, .navbar.navbar-hidden { background: #cacaca !important; backdrop-filter:none !important; border:none !important; }

/* Ajustar colores de iconos en secciones para evitar múltiple paleta en misma sección */
#location .btn-outline-primary { border-color: var(--secondary-color) !important; color: var(--secondary-color) !important; }
#location .btn-outline-primary:hover { background: var(--secondary-color) !important; color:#fff !important; }
#location i { color: var(--primary-color) !important; }

/* Reservas placeholder icon */
.reservation-placeholder i { color: var(--primary-color) !important; }

/* Contact icons unificados */
#contact .contact-item i, #contact .social-link { color: var(--primary-color) !important; }
#contact .social-link { background:#f0f0f0; }
#contact .social-link:hover { background: var(--primary-color); color:#fff; }

/* Quitar dashed border reservas */
.reservation-widget-container { border:1px solid var(--border-light); }

/* Galería imágenes proporción */
.gallery-item img { height:220px; object-fit:cover; }

/* Ajuste hero en móviles */
@media (max-width: 768px) { .hero-heading { font-size:1.9rem; } .hero-tagline { font-size:.95rem; } }
/* ================== FIN OVERRIDES ================== */

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.navbar {
    backdrop-filter: none;
    padding: 1rem 0;
    transition: all 0.4s ease;
    box-shadow: none;
    border-bottom: none;
    z-index: 1000;
    transform: translateY(0);
    opacity: 1;
}

.navbar.scrolled {
    background: rgba(44, 95, 45, 0.95) !important;
    backdrop-filter: blur(10px);
    padding: 0.5rem 0;
    box-shadow: var(--shadow-sm);
    border-bottom: 1px solid var(--secondary-color);
}

.navbar.navbar-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.navbar-brand {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 1.5rem;
    gap: 8px;
    color: var(--primary-color) !important;
}

.nav-link {
    color: var(--white) !important;
    font-weight: 500;
    margin: 0 0.5rem;
    position: relative;
    padding: 8px 16px !important;
    display: flex;
    align-items: center;
    transition: var(--transition-normal);
}

.nav-link:hover {
    color: var(--primary-color) !important;
    background: none;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: var(--transition-normal);
    transform: translateX(-50%);
}

.nav-link:hover::after {
    width: 80%;
}

.navbar-nav {
    flex-direction: row;
}

.navbar-nav .nav-item {
    display: flex;
    align-items: center;
}

.navbar-nav .nav-item .btn {
    border-radius: 6px;
    padding: 8px 20px;
    margin-left: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero-section {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    color: var(--white);
    z-index: 8;
    overflow: hidden;
}

.hero-bg-fade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 7;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.5;
    transition: opacity 0.4s cubic-bezier(.4,0,.2,1);
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(360deg, rgba(21, 17, 10, 0.8), rgba(21, 17, 10, 0.4));
    z-index: 9;
}

.hero-content {
    position: relative;
    z-index: 10;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    animation: fadeInUp 1s ease-out;
    color: var(--white) !important;
}

.hero-subtitle {
    font-size: 1.3rem;
    font-family: var(--font-secondary);
    font-weight: 300;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    animation: fadeInUp 1s ease-out 0.3s both;
    padding-top: 16px;
}

.hero-buttons {
    animation: fadeInUp 1s ease-out 0.6s both;
}

.hero-scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    transition: all 0.4s ease;
    opacity: 1;
    visibility: visible;
}

.hero-scroll-indicator.hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(20px);
}

.hero-scroll-indicator i {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.8);
    animation: bounceArrow 2s ease-in-out infinite;
    transition: color 0.3s ease;
}

/* Animación sutil de bounce para la flecha */
@keyframes bounceArrow {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-8px);
    }
    60% {
        transform: translateY(-4px);
    }
}

.hero-arrow {
    position: absolute;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%);
    background: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    z-index: 20;
    transition: all 0.4s ease;
    opacity: 1;
    visibility: visible;
}

.hero-arrow.hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(20px);
}

.hero-arrow:hover {
    background: #d35400;
    transform: translateX(-50%) translateY(-2px);
    box-shadow: var(--shadow-lg);
}

@media (max-width: 768px) {
    .hero-arrow {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
        bottom: 18px;
    }
}

/* --- Hero slider capas (restaurado) --- */
.hero-bg-layer { position:absolute; inset:0; background-size:cover; background-position:center center; background-repeat:no-repeat; filter:brightness(.9); opacity:0; transition:opacity 1.4s ease; will-change:opacity, transform; }
.hero-bg-layer.active { opacity:1; }
@keyframes heroSlowZoom { 0% { transform:scale(1); } 100% { transform:scale(1.08); } }

/* Forzar animación sólo a la capa activa */
/* .hero-bg-layer.active { animation:slowZoom }
/* --- Fin hero slider capas --- */

/* ==========================================================================
   SECTIONS BACKGROUND - PALETA MÍNIMA (ACTUALIZADO PARA NUEVO ORDEN)
   ========================================================================== */
section { background-color: var(--white) !important; }
section:nth-child(even) { background-color: var(--background-alt) !important; }

#about { background-color: var(--background-alt) !important; }
#gallery { background-color: var(--white) !important; }
#cabins { background-color: var(--background-alt) !important; }
/* Reordenado: ahora #location va después de #cabins y debe ser blanco para alternar */
#location { background-color: var(--white) !important; }
/* #amenities ahora sigue a location (blanco) y debe ser gris */
#amenities { background-color: var(--background-alt) !important; }
/* #reservas sigue a amenities (gris) y permanece blanco */
#reservas { background-color: var(--white) !important; }
/* FAQ ahora antes de testimonials: venía tras reservas (blanco) -> debe ser gris */
#faq { background-color: var(--background-alt) !important; }
/* Testimonials ahora después de FAQ (gris) -> debe ser blanco */
#testimonials { background-color: var(--white) !important; }
/* Contact después de testimonials (blanco) -> gris */
#contact { background-color: var(--background-alt) !important; }

/* ==========================================================================
   ABOUT SECTION
   ========================================================================== */
.about-image {
    position: relative;
    overflow: hidden;
    border-radius: 25px;
}

.feature-item {
    display: flex;
    align-items: center;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--text-light);
}

.feature-item i {
    font-size: 1.2rem;
    width: 20px;
    color: var(--secondary-color);
    margin-right: 10px;
}

/* === About truncado mobile === */
@media (max-width: 768px) {
  .about-text.collapsed {
    max-height: 210px;
    overflow: hidden;
    position: relative;
    transition: max-height .4s ease;
  }
  .about-text.collapsed::after {
    content: '';
    position: absolute; left:0; right:0; bottom:0; height:64px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #f9f9f9); pointer-events:none;
  }
  .about-text.expanding, .about-text.collapsing { transition: max-height .4s ease; }
}

/* ==========================================================================
   AMENITIES SECTION
   ========================================================================== */
#amenities {
    padding: var(--section-padding);
}

.amenity-card {
    background: var(--white) !important;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-normal);
    height: 100%;
    padding: 2rem;
    text-align: center;
}

.amenity-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.amenity-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: var(--secondary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 2rem;
}

.amenity-card h5 {
    color: var(--text-black) !important;
    font-weight: 600;
    margin-bottom: 1rem;
}

.amenity-card p {
    color: var(--text-dark) !important;
    font-family: var(--font-secondary);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   AMENITIES MINI GRID (nuevo diseño compacto)
   ========================================================================== */
.amenities-grid {
  display:flex; /* cambiado de grid a flex para centrar última fila */
  flex-wrap:wrap;
  justify-content:center; /* centra todas las filas, incluida la última con pocos items */
  gap: 14px clamp(12px, 1.8vw, 20px);
  align-items:stretch;
  margin:0 auto;
  max-width:1200px;
  padding:.25rem 0 0;
}
/* Ajustes responsivos sólo ajustan tamaño de las cards, ya no columnas */
@media (max-width: 880px){ .amenity-card.mini { width:180px; flex:0 1 180px; } }
@media (max-width: 600px){ .amenity-card.mini { width:150px; flex:0 1 150px; } }

.amenity-card.mini {
  background:#fff !important;
  border:1px solid var(--border-light);
  padding:.75rem .85rem .7rem;
  display:flex;
  flex-direction:column; /* antes row */
  gap:.45rem;
  align-items:center; /* centrar horizontal */
  justify-content:center; /* centrar vertical */
  text-align:center;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:background .18s ease, border-color .18s ease, box-shadow .25s ease;
  position:relative;
  min-height:72px; /* un poco más alto para layout vertical */
  width:210px; /* ancho base */
  flex:0 1 210px; /* permite wrap y mantiene tamaño deseado */
}
.amenity-card.mini:hover { border-color: var(--primary-color); box-shadow:0 3px 10px -4px rgba(0,0,0,.12); background:#fff; }

.amenity-mini-icon {
  width:32px; height:32px; flex:0 0 32px; /* ligeramente mayor por layout vertical */
  display:flex; align-items:center; justify-content:center;
  font-size:16px; background:#fafafa; color: var(--primary-color);
  border:1px solid #ececec; border-radius:6px;
  transition: background .18s ease, color .18s ease, transform .35s ease;
  margin:0; /* reset */
}
.amenity-card.mini:hover .amenity-mini-icon { background: var(--primary-color); color:#fff; }

.amenity-title {
  margin:0; font-size:.73rem; line-height:1.18; font-weight:600; letter-spacing:.25px; color:var(--text-dark);
}
.amenity-title .sub-note { display:block; font-weight:400; font-size:.6rem; line-height:1.12; color: var(--text-light); margin-top:2px; }

@media (min-width:1200px){ .amenity-title { font-size:.76rem; } }
@media (max-width:600px){ .amenity-title { font-size:.7rem; } }

/* Accesibilidad foco */
.amenity-card.mini:focus-visible { outline:2px solid var(--primary-color); outline-offset:2px; }

/* Ajuste sección (menos aire vertical al tener muchas) */
#amenities { padding-top:3.2rem !important; padding-bottom:3.4rem !important; }
#amenities .section-title { margin-bottom:1.2rem; }
#amenities .text-muted.small { font-size:.78rem !important; letter-spacing:.5px; }
/* Fin amenities mini grid */

/* ==========================================================================
   GALLERY SECTION
   ========================================================================== */
#gallery {
    padding: var(--section-padding);
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-normal);
}

/* ================= GALERÍA DINÁMICA 2025 ================= */
.gallery-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(140px,1fr));
}
@media (min-width: 480px){
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); }
}
@media (min-width: 768px){
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); }
}
@media (min-width: 1200px){
  .gallery-grid { gap:18px; }
}
.gallery-item {
    margin:0;
    background:#f4f4f4;
    aspect-ratio: 5 / 3; /* 700x420 ratio */
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    position:relative;
    opacity:0;
    transform:translateY(12px);
    transition:opacity .5s ease, transform .5s ease;
    overflow: visible; /* permitir que el scale no recorte */
    border-radius:0;
}
.gallery-item.visible { opacity:1; transform:translateY(0); }
.gallery-item img { width:100%; height:100%; object-fit:cover; display:block; transform:translateZ(0); }
.gallery-item:focus { outline:2px solid var(--primary-color); outline-offset:2px; }
.hidden-photo { display:none !important; }
#galleryToggleBtn { min-width:230px; }
/* Mejorar pulsabilidad en mobile */
@media (max-width: 600px){
  .gallery-item { aspect-ratio: 1/1; }
  #galleryToggleBtn { width:100%; }
}
/* Estado hover sólo en punteros finos */
@media (hover:hover){
  .gallery-item:hover::after { content:''; position:absolute; inset:0; background:rgba(0,0,0,.15); }
}
/* ========================================================== */

/* ==========================================================================
   CABINS SECTION
   ========================================================================== */
#cabins {
    padding: var(--section-padding);
}

.cabin-card {
    background: var(--white) !important;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-normal);
    height: 100%;
    border: 1px solid var(--border-light);
}

.cabin-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.cabin-image {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.cabin-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-slow);
}

.cabin-card:hover .cabin-image img {
    transform: scale(1.1);
}

/* === Cabin badge estilizado como botón Ver Tour === */
.cabin-badge {
  background: rgba(255, 255, 255, 0.91) !important;
  color:var(--primary-color) !important;
  border:1px solid var(--primary-color) !important;
  padding:.45rem .9rem !important;
  font-size:.58rem !important;
  font-weight:600 !important;
  text-transform:uppercase;
  letter-spacing:.6px;
  line-height:1.1;
  border-radius:4px !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  position:relative;
  overflow:hidden;
  box-shadow:0 2px 6px -2px rgba(0,0,0,.18) !important;
  transition:box-shadow .25s ease, transform .25s ease, background .25s ease, color .25s ease;
}
.cabin-badge::after { /* highlight barrido */
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.35) 50%,rgba(255,255,255,0) 100%);
  transform:translateX(-120%);
  transition:transform .6s ease;
  pointer-events:none;
}
.cabin-badge:hover::after, .cabin-badge:focus-visible::after { transform:translateX(120%); }
.cabin-badge:hover, .cabin-badge:focus-visible {
  transform:translateY(-2px);
  box-shadow:0 6px 16px -6px rgba(0,0,0,.35) !important;
}
.cabin-badge:active { transform:translateY(0); box-shadow:0 3px 10px -4px rgba(0,0,0,.3) !important; }
.cabin-badge:focus-visible { outline:2px solid var(--primary-color); outline-offset:2px; }
@media (max-width:600px){ .cabin-badge { font-size:.52rem !important; padding:.4rem .75rem !important; } }
/* Fin cabin badge Ver Tour style */

.cabin-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--secondary-color);
    color: var(--white);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: var(--shadow-sm);
}

.cabin-content {
    padding: 1.5rem;
}

.cabin-content h4 {
    color: var(--text-black) !important;
    font-weight: 600;
    margin-bottom: 1rem;
}

.cabin-features {
    list-style: none;
    padding: 0;
    margin-bottom: 1.5rem;
}

.cabin-features li {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    color: var(--text-light);
}

.cabin-features i {
    color: var(--primary-color);
    width: 20px;
    margin-right: 10px;
    font-size: 1rem;
}

.cabin-price {
    text-align: center;
    padding: 1rem 0;
    background: var(--background-alt);
    margin: 0 -1.5rem 1.5rem -1.5rem;
    border-radius: 10px;
}


/* ==========================================================================
   RESERVATION WIDGET
   ========================================================================== */
#reservas {
    padding: var(--section-padding);
}

.reservation-widget-container {
    background: var(--white) !important;
    border: 2px dashed var(--primary-color);
    border-radius: 12px;
    padding: 3rem;
    box-shadow: var(--shadow-sm);
}

.reservation-placeholder {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--text-light);
}

/* ==========================================================================
   LOCATION SECTION
   ========================================================================== */
#location {
    padding: var(--section-padding);
}

.map-container {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.location-info {
    background: var(--white) !important;
    border: 1px solid var(--border-light);
    padding: 2rem;
    border-radius: 15px;
    box-shadow: var(--shadow-sm);
    height: 100%;
}

.location-info h5 {
    color: var(--text-black) !important;
}

.location-item {
    display: flex;
    align-items: center;
    font-weight: 500;
    color: var(--text-light);
    margin-bottom: 1rem;
}

.location-item i {
    width: 20px;
    font-size: 1.1rem;
    color: var(--secondary-color);
    margin-right: 10px;
}

/* ==========================================================================
   TESTIMONIALS SECTION
   ========================================================================== */
#testimonials {
    padding: var(--section-padding);
}

.testimonial-card {
    background: var(--white) !important;
    border: 1px solid var(--border-light);
    border-left: 4px solid var(--primary-color);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-normal);
    justify-content: flex-start;
    flex-direction: column;
    display: flex;
    height: 100%;
    position: relative;
    padding: 2rem;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.testimonial-stars {
    color: #ffc107;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.testimonial-text {
    font-style: italic;
    color: var(--text-light) !important;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.testimonial-author strong {
    color: var(--text-black) !important;
}

.testimonial-author {
    margin-top: auto;   /* EMPUJA el autor al fondo de la card */
    padding-top: 1.2rem; /* Separación visual, ajustá a gusto */
}

/* ==========================================================================
   FAQ SECTION
   ========================================================================== */
#faq {
    padding: var(--section-padding);
}

.accordion-item {
    background: var(--white) !important;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
}

.accordion-button {
    background: var(--white) !important;
    color: var(--text-black) !important;
    font-weight: 600;
    border: none;
    padding: 1.5rem;
}

.accordion-button:not(.collapsed) {
    background: var(--primary-color) !important;
    color: var(--white) !important;
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: none;
    border: none;
}

.accordion-body {
    background: var(--white) !important;
    color: var(--text-light) !important;
    line-height: 1.6;
}

/* FAQ: icono blanco cuando está abierto */
#faq .accordion {
    /* Sobrescribimos solo el icono activo del botón del acordeón en FAQ */
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>");
}
#faq .accordion-button:not(.collapsed)::after { background-image: var(--bs-accordion-btn-active-icon); }

/* ==========================================================================
   CONTACT SECTION
   ========================================================================== */
#contact {
    padding: var(--section-padding);
}

.contact-form-container {
    background: var(--white) !important;
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: var(--shadow-md);
}

.form-control {
    border-radius: 10px;
    border: 1px solid var(--border-light) !important;
    padding: 12px 15px;
    transition: var(--transition-normal);
    background: var(--white) !important;
    color: var(--text-dark) !important;
}

.form-control:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(230, 126, 34, 0.15) !important;
    background: var(--white) !important;
    color: var(--text-dark) !important;
}

.form-label {
    font-weight: 500;
    color: var(--text-black) !important;
    margin-bottom: 0.5rem;
}

.contact-info {
    background: var(--white) !important;
    border: 1px solid var(--border-light);
    border-radius: 15px;
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    height: fit-content;
}

.contact-info h5, .contact-info h6 {
    color: var(--text-black) !important;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    color: var(--text-light);
}

.contact-item i {
    width: 20px;
    margin-top: 2px;
    color: var(--secondary-color);
    margin-right: 10px;
}

.contact-item strong {
    color: var(--text-black) !important;
}

.contact-item a {
    color: var(--text-light) !important;
}

.contact-item a:hover {
    color: var(--primary-color) !important;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--secondary-color);
    color: var(--white);
    border-radius: 50%;
    transition: var(--transition-normal);
}

.social-link:hover {
    background: #1e4520;
    transform: translateY(-2px);
    color: var(--white);
}

/* Fix visibilidad iconos redes en contacto: icono blanco sobre fondo naranja */
#contact .social-link:hover,
#contact .social-link:focus-visible { color:#fff !important; }
#contact .social-link:hover i,
#contact .social-link:focus-visible i { color:#fff !important; }
/* Fin fix iconos contacto */

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer {
    background: var(--text-dark);
    color: var(--white);
    padding: 2.25rem 0 2rem; /* reducido desde 3rem 0 */
}

.footer-brand {
    display: flex;
    align-items: center;
}

.footer-title {
    color: var(--white) !important;
    font-weight: 600;
    margin-bottom: .65rem;
    font-size: 1.1rem;
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: .4rem;
}

.footer-links a {
    color: #a0aec0;
    transition: var(--transition-normal);
}

.footer-links a:hover {
    color: var(--white);
    padding-left: 5px;
}

.footer-link {
    color: #a0aec0;
    text-decoration: none;
    transition: var(--transition-normal);
}

.footer-link:hover {
    color: var(--white);
}

.footer-social .social-link {
    background: rgba(255, 255, 255, 0.1);
    margin-right: 10px;
}

.footer-social .social-link:hover {
    background: var(--primary-color);
}

.text-muted {
    color: var(--text-light) !important;
}

/* ==========================================================================
   BACK TO TOP BUTTON
   ========================================================================== */
#backToTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--primary-color);
    border: none;
    color: var(--white);
    font-size: 1.2rem;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-normal);
    z-index: 1000;
}

#backToTop.visible {
    opacity: 1;
    visibility: visible;
}

#backToTop:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    background: #d35400;
}

.main-nav .navbar-nav {
    justify-content: center !important;
    width: 100%;
}

.main-nav .navbar-nav .nav-item {
    position: relative;
    padding: 0 1.5rem;   /* Espaciado lateral */
}

.main-nav .navbar-nav .nav-link {
    position: relative;
    display: inline-block;
    color: var(--text-dark) !important;
    padding: .75rem 0 !important;   /* Solo padding vertical */
    background: none !important;
    transition: color 0.18s;
    text-align: center;
}

/* Underline centrado y solo bajo el texto */
.main-nav .navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    height: 2px;
    width: 0;
    background: var(--primary-color);
    transition: width 0.18s, left 0.18s;
    transform: translateX(-50%);
}

.main-nav .navbar-nav .nav-link:hover::after,
.main-nav .navbar-nav .nav-link.active::after {
    width: 70%;
}

/* Separadores verticales */
.main-nav .navbar-nav .nav-item:not(:last-child) {
    border-right: 1px solid #d4d4d4;
}

.main-nav .navbar-nav .nav-item:last-child {
    border-right: none;
}

.hero-bg-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    z-index: 1;
    transition: opacity 1.3s cubic-bezier(.4,0,.2,1);
    animation: slowZoom 5s linear forwards;
    /* Cada capa arranca animación al crearse */
}
.hero-bg-layer.active {
    opacity: 1;
}
@keyframes slowZoom {
    from { transform: scale(1); }
    to   { transform: scale(1.08); }
}

.hero-bg-layer { z-index:0; }
.hero-overlay-light { z-index:1; }
.hero-inner { position:relative; z-index:2; }

/* ==========================================================================
   ALOJAMIENTOS DINÁMICOS - ESTILOS ADICIONALES (Carrusel Horizontal)
   ========================================================================== */
/* Reglas anteriores basadas en #lodgingGrid quedan obsoletas (se mantienen por compat). */

.lodging-carousel { position:relative; }
.lodging-viewport { overflow-x:auto; overflow-y:visible; scrollbar-width:none; -ms-overflow-style:none; padding: .25rem 0 1rem; }
.lodging-viewport::-webkit-scrollbar { display:none; }
.lodging-track { display:flex; gap:16px; align-items:stretch; }

/* Tarjetas flexibles: muestran la mayor cantidad que entre sin forzar wrap */
.lodging-card { flex:0 0 clamp(250px, 28vw, 340px); max-width:340px; min-width:250px; outline:none; }
@media (max-width:1200px){ .lodging-card { flex:0 0 clamp(250px, 34vw, 360px);} }
@media (max-width:992px){ .lodging-card { flex:0 0 clamp(260px, 46vw, 380px);} }
@media (max-width:768px){ .lodging-card { flex:0 0 78%; } }
@media (max-width:560px){ .lodging-card { flex:0 0 88%; } }

/* Estado foco accesible */
.lodging-card:focus-within .cabin-card, .lodging-card:focus .cabin-card { box-shadow:0 0 0 3px rgba(230,126,34,.45); }

/* Flechas */
.lodging-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:44px; height:44px; border:none; background:rgba(255,255,255,0.9); color:#222; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.12); cursor:pointer; transition:.25s; }
.lodging-arrow.left { left:-12px; }
.lodging-arrow.right { right:-12px; }
.lodging-arrow:hover { background:var(--primary-color); color:#fff; }
.lodging-arrow.disabled { opacity:.35; pointer-events:none; }
@media (max-width:768px){ .lodging-arrow { width:38px; height:38px; } .lodging-arrow.left { left:4px;} .lodging-arrow.right { right:4px;} }

/* Arrastre */
.lodging-viewport.dragging { cursor:grabbing; }
.lodging-viewport:not(.dragging) { cursor:grab; }

/* Ajustes internos de la tarjeta para vista horizontal */
.lodging-card .cabin-card { min-height:100%; }
.lodging-card .cabin-image { height:200px; }
@media (max-width:768px){ .lodging-card .cabin-image { height:180px; } }

/* Suaviza el snap (opcional) */
.lodging-viewport { scroll-snap-type: x proximity; }
.lodging-card { scroll-snap-align:start; }

/* Indicadores de borde (fade) opcionales */
.lodging-carousel::before, .lodging-carousel::after { content:''; position:absolute; top:0; bottom:0; width:60px; pointer-events:none; z-index:4; }
.lodging-carousel::before { left:0; background:linear-gradient(90deg, var(--background-alt) 0%, rgba(255,255,255,0) 100%); }
.lodging-carousel::after { right:0; background:linear-gradient(270deg, var(--background-alt) 0%, rgba(255,255,255,0) 100%); }
@media (max-width:768px){ .lodging-carousel::before, .lodging-carousel::after { width:40px; } }

/* Actualización: ocultar fades en extremos del carrusel */
.lodging-carousel::before, .lodging-carousel::after { opacity:1; transition:opacity .28s ease; }
.lodging-carousel.at-start::before { opacity:0; }
.lodging-carousel.at-end::after { opacity:0; }

/* Ajuste de features list para reducir altura */
.lodging-card .cabin-features li { font-size:.74rem; line-height:1.2; }
.lodging-card .cabin-features i { font-size:.6rem; margin-right:6px; }

/* Precio compacto en horizontal */
.lodging-card .cabin-price { padding:.65rem 0; margin-bottom:.85rem; }

/* Separador visual entre secciones si hay fondo alterno */
#cabins { position:relative; }

/* Hint de arrastre y desactivación de selección */
.lodging-viewport, .lodging-viewport * { user-select:none; -webkit-user-select:none; -ms-user-select:none; }
.drag-hint { display:flex; align-items:center; justify-content:center; gap:.5rem; margin-top:.75rem; font-size:.8rem; color:#555; opacity:.9; transition:opacity .35s ease, transform .35s ease; }
.drag-hint .hint-icon { color: var(--primary-color); animation:pulseHint 1.4s ease-in-out infinite; }
.drag-hint.hidden { opacity:0; transform:translateY(-6px); pointer-events:none; }
@keyframes pulseHint { 0%,100% { transform:scale(1); } 50% { transform:scale(1.18); } }

@media (max-width:768px){
  .lodging-viewport { scroll-snap-type: x mandatory; }
  .lodging-track { padding:0 6%; }
  .lodging-card { flex:0 0 88% !important; scroll-snap-align:center; }
}

/* ==== REVERT GALERÍA SIMPLE A ESTADO ANTERIOR (uniforme con grid-auto-rows) ==== */
#gallery.simple-gallery .wg-grid {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.4vw, 22px);
  grid-auto-rows: 230px; /* altura base desktop */
  max-width: none; /* quitamos límite que agrandó percepción */
  margin: 0; /* sin centrado forzado */
}
@media (max-width: 992px){
  #gallery.simple-gallery .wg-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
}
@media (max-width: 600px){
  #gallery.simple-gallery .wg-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
}
#gallery.simple-gallery .wg-item {
  position:relative;
  margin:0;
  padding:0;
  border-radius:0;
  overflow:hidden; /* volvemos a ocultar para que el zoom de la imagen no desborde */
  background:#111;
  box-shadow:0 4px 14px -6px rgba(0,0,0,.35);
  cursor:pointer;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .55s cubic-bezier(.4,0,.2,1), box-shadow .55s ease, filter .55s ease;
  will-change:transform, filter;
  aspect-ratio: auto; /* cancelar */
}
#gallery.simple-gallery .wg-item img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .8s cubic-bezier(.25,.6,.25,1), filter .65s ease;
  backface-visibility:hidden;
  filter:none;
}
#gallery.simple-gallery .wg-item:hover,
#gallery.simple-gallery .wg-item:focus-visible { transform:translateY(-6px) scale(1.04); box-shadow:0 18px 32px -12px rgba(0,0,0,.50); }
#gallery.simple-gallery .wg-item:hover img,
#gallery.simple-gallery .wg-item:focus-visible img { transform:scale(1.18); filter:brightness(1.1) saturate(1.07); }
@media (max-width:600px){
  #gallery.simple-gallery .wg-item:hover,
  #gallery.simple-gallery .wg-item:focus-visible { transform:translateY(-4px) scale(1.03); }
  #gallery.simple-gallery .wg-item:hover img,
  #gallery.simple-gallery .wg-item:focus-visible img { transform:scale(1.12); }
}
/* Ajuste caption (sin cambios) */
#gallery.simple-gallery .wg-item::before { bottom:0; }
/* ==== FIN REVERT ==== */

/* ==========================================================================
   PAGINACIÓN GALERÍA SIMPLE (Minimalista)
   ========================================================================== */
.wg-pagination {
  display:flex;
  gap:8px;
  justify-content:center;
  align-items:center;
  margin-top:1.25rem;
  user-select:none;
}
.wg-pagination.wg-pagination-ready { opacity:1; }
.wg-arrow {
  background:transparent;
  border:1px solid var(--border-light);
  color: var(--text-light);
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:1.1rem;
  line-height:1;
  padding:0;
  border-radius:4px;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.wg-arrow:hover:not(:disabled), .wg-arrow:focus-visible:not(:disabled){
  background: var(--primary-color);
  color:#fff;
  border-color: var(--primary-color);
  outline:none;
}
.wg-arrow:disabled {
  opacity:.35;
  cursor:default;
}
.wg-status { text-align:center; margin-top:.35rem; font-size:.75rem; letter-spacing:.5px; }
@media (max-width:600px){
  .wg-arrow { width:34px; height:34px; font-size:1rem; }
  .wg-status { font-size:.7rem; }
}
/* Fin paginación minimalista */

/* ==========================================================================
   VIRTUAL TOUR SECTION
   ========================================================================== */
.virtual-tour-section { background: linear-gradient(180deg,#ffffff 0%,#f8f9fb 100%) !important; }
.virtual-tour-section .section-title::after { display:none; }
.vt-media-wrapper { position:relative; overflow:hidden; border-radius:12px; box-shadow:0 8px 28px -6px rgba(0,0,0,.15); background:#111; }
.vt-img { width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; transition:transform .9s ease, filter .4s ease; }
.vt-media-wrapper:hover .vt-img { transform:scale(1.06); filter:brightness(.9); }
.vt-badge { position:absolute; top:12px; left:12px; background:rgba(0,0,0,.55); color:#fff; padding:6px 14px; font-size:.75rem; letter-spacing:.5px; border-radius:40px; backdrop-filter:blur(4px); display:flex; align-items:center; gap:4px; font-weight:600; }
.vt-overlay { position:absolute; inset:0; padding:1rem; background:linear-gradient(180deg,rgba(0,0,0,0) 20%,rgba(0,0,0,.55) 95%); opacity:0; transition:opacity .5s ease; display:flex; }
.vt-media-wrapper:hover .vt-overlay, .vt-overlay:focus-within { opacity:1; }
.vt-peek-btn { background:rgba(255,255,255,.15); backdrop-filter:blur(6px); color:#fff; border:1px solid rgba(255,255,255,.4); }
.vt-peek-btn:hover { background:rgba(255,255,255,.3); color:#fff; }
.vt-highlights li { padding:.3rem 0; }
.vt-main-cta { position:relative; }
.vt-main-cta::after { content:'\f35d'; font-family:'Font Awesome 6 Free'; font-weight:900; margin-left:.5rem; font-size:.8rem; opacity:.7; }
@media (max-width: 991px){ .vt-overlay { opacity:1; background:linear-gradient(180deg,rgba(0,0,0,.25) 10%,rgba(0,0,0,.65) 95%); } }
@media (max-width: 575px){ .vt-img { aspect-ratio:16/11; } }
/* Fin Virtual Tour */

/* ==========================================================================
   VIRTUAL TOUR CARD (dentro de galería simple)
   ========================================================================== */
#gallery.simple-gallery .virtual-tour-card {
  grid-column: span 2;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  background:linear-gradient(135deg,#111 0%,#2c2c2c 100%);
  color:#fff;
  box-shadow:0 10px 26px -10px rgba(0,0,0,.55), 0 0 0 1px #000 inset;
  padding:1rem .75rem 1.15rem;
  overflow:hidden;
  isolation:isolate;
}
#gallery.simple-gallery .virtual-tour-card::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 78% 22%,rgba(230,126,34,.28),rgba(230,126,34,0) 65%); pointer-events:none; opacity:.9; }
#gallery.simple-gallery .virtual-tour-card:hover { transform:translateY(-4px) scale(1.02); box-shadow:0 18px 40px -18px rgba(0,0,0,.7); }
#gallery.simple-gallery .virtual-tour-card img { display:none; }
.vt-card-inner { max-width:520px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:.55rem; }
.vt-card-icon { width:54px; height:54px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.55rem; background:linear-gradient(145deg, var(--primary-color), #cf711e); color:#fff; box-shadow:0 4px 14px -4px rgba(0,0,0,.55); }
.vt-card-title { font-size:1.15rem; font-weight:600; letter-spacing:.5px; margin:.35rem 0 .15rem; color:#fff; }
.vt-card-text { font-size:.8rem; line-height:1.25; color:#e4e4e4; margin:0 0 .25rem; }
.vt-card-actions { display:flex; gap:.55rem; flex-wrap:wrap; justify-content:center; }
.vt-card-actions .btn { font-size:.65rem; padding:.42rem .75rem; letter-spacing:.4px; font-weight:600; }
.vt-card-actions .btn-outline-light { --bs-btn-color:#fff; --bs-btn-border-color:rgba(255,255,255,.55); color:#fff; border-color:rgba(255,255,255,.55)!important; }
.vt-card-actions .btn-outline-light:hover { background:#fff; color:#111; }
#gallery.simple-gallery .virtual-tour-card:focus-within { outline:2px solid var(--primary-color); outline-offset:3px; }
@media (max-width:992px){ #gallery.simple-gallery .virtual-tour-card { grid-column: span 2; } }
@media (max-width:600px){ .vt-card-title { font-size:1rem; } .vt-card-text { font-size:.72rem; } .vt-card-icon { width:48px; height:48px; font-size:1.3rem; } }
/* Fin Virtual Tour card */

/* Eliminado bloque inline anterior (virtual-tour-inline) - ya no se usa */

/* ==========================================================================
   VIRTUAL TOUR MODAL (iframe embebido)
   ========================================================================== */
#virtualTourModal .modal-dialog.vt-modal-dialog { max-width: min(1280px, 94vw); width:100%; }
#virtualTourModal .vt-modal-content { border:1px solid #000; background:#111; color:#fff; }
#virtualTourModal .modal-header { background:#181818; border-bottom:1px solid #222; }
#virtualTourModal .modal-footer { background:#181818; border-top:1px solid #222; }
#virtualTourModal .modal-title { font-weight:600; font-size:1rem; letter-spacing:.5px; }
.vt-iframe-wrapper { position:relative; width:100%; height:0; padding-bottom:56.5%; background:#000; overflow:hidden; }
@media (min-width:1200px){ .vt-iframe-wrapper { padding-bottom:52%; } }
.vt-iframe { position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; }
.vt-loading { position:absolute; inset:0; background:linear-gradient(135deg,#141414 0%,#1f1f1f 100%); color:#fff; z-index:2; }
.vt-loading .spinner-border { --bs-spinner-width:2.6rem; --bs-spinner-height:2.6rem; }
#virtualTourModal .btn-outline-primary { --bs-btn-color: var(--primary-color); --bs-btn-border-color: var(--primary-color); color:var(--primary-color); }
#virtualTourModal .btn-outline-primary:hover { background:var(--primary-color); color:#fff; }
#virtualTourModal .btn-outline-secondary { --bs-btn-color:#ccc; --bs-btn-border-color:#555; color:#ccc; border-color:#555; }
#virtualTourModal .btn-outline-secondary:hover { background:#444; color:#fff; }
@media (max-width: 767px){
  #virtualTourModal .modal-dialog { margin:.75rem; }
  #virtualTourModal .modal-header, #virtualTourModal .modal-footer { padding:.65rem .9rem; }
  #virtualTourModal .modal-title { font-size:.9rem; }
  .vt-iframe-wrapper { padding-bottom:68%; }
}
/* Fin Virtual Tour Modal */

/* ==========================================================================
   VIRTUAL TOUR BANNER (debajo de galería)
   ========================================================================== */
.vt-banner {
  margin-top:20px;
  margin-bottom:20px;
  background:linear-gradient(135deg,#fff5f0 0%,#ffffff 100%);
  border:2px solid rgba(230, 126, 34, 0.15);
  position:relative;
  overflow:hidden;
  box-shadow: 0 4px 12px rgba(230, 126, 34, 0.1), 0 2px 6px rgba(0,0,0,.05);
  border-radius:12px;
    transition: all 0.3s ease;
  --vt-scan-speed: 3s; /* duración del barrido */
}

.vt-banner:hover { box-shadow: 0 6px 20px rgba(230, 126, 34, 0.18), 0 4px 10px rgba(0,0,0,.08); transform: translateY(-2px); }

.vt-banner::before { content:''; position:absolute; inset:0; background: linear-gradient(110deg, rgba(230,126,34,0) 0%, rgba(230,126,34,0) 24%, rgba(230,126,34,.12) 40%, rgba(230,126,34,.22) 50%, rgba(230,126,34,.12) 60%, rgba(230,126,34,0) 76%, rgba(230,126,34,0) 100%); background-size: 260% 100%; animation: vt-banner-scan var(--vt-scan-speed) cubic-bezier(.12,0,.98,1) infinite; filter: brightness(1.05); z-index: 0; opacity: 0.6; }

@keyframes vt-banner-scan { 0% { background-position:150% 0; } 100% { background-position:-40% 0; } }
.vt-banner { /* refinado visual */
  position:relative;
  display:block;
  font-family: var(--font-secondary);
  border-left:4px solid var(--primary-color);
}
.vt-banner::before { z-index:0; opacity:1; }
.vt-banner-inner { position:relative; z-index:1; display:flex; align-items:center; gap:.85rem; padding:.65rem .95rem; flex-wrap:wrap; }
.vt-banner-icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color) 0%, #ff9f43 100%); color: #fff; box-shadow: 0 4px 15px rgba(230, 126, 34, 0.4), 0 2px 6px rgba(0,0,0,.2); position: relative; transition: transform 0.3s ease; }
.vt-banner:hover .vt-banner-icon { transform: rotate(15deg) scale(1.05); }
.vt-banner-icon::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.4), rgba(255,255,255,0) 70%); opacity: 0.7; mix-blend-mode: overlay; pointer-events: none; border-radius: inherit; }
.vt-banner-icon i { font-size: 1.3rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.vt-banner-text { flex: 1 1 auto; min-width: 200px; display: flex; flex-direction: column; gap: 0.25rem; }
.vt-banner-text strong { font-weight:700; color:var(--primary-color); letter-spacing:.5px; }
.vt-banner-actions {
  margin-left:auto; /* empuja el botón totalmente a la derecha */
  display:flex;
  align-items:center;
}
.vt-banner-title { display: block; font-weight: 700; font-size: 1rem; color: var(--primary-color); letter-spacing: 0.3px; line-height: 1.3; }
.vt-banner-subtitle { display: block; font-weight: 400; font-size: 0.85rem; color: #666; line-height: 1.4; }
.vt-banner-actions { margin-left: auto; display: flex; align-items: center; }
.vt-banner-actions .btn { position: relative; overflow: hidden; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; padding: 0.65rem 1.25rem; display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 50px; line-height: 1.2; background: var(--primary-color); color: #fff; border: 2px solid var(--primary-color); box-shadow: 0 3px 8px rgba(230, 126, 34, 0.3); transition: all 0.3s ease; will-change: transform; }
.vt-banner-actions .btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 50%, rgba(255,255,255,0) 100%); transform: translateX(-120%); transition: transform 0.6s ease; pointer-events: none; }
.vt-banner-actions .btn:hover::after, .vt-banner-actions .btn:focus-visible::after { transform: translateX(120%); }
.vt-banner-actions .btn:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 3px; }
.vt-banner-actions .btn:hover, .vt-banner-actions .btn:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(230, 126, 34, 0.4); background: #cf711e; border-color: #cf711e; }
.vt-banner-actions .btn:active { transform: translateY(0); box-shadow: 0 3px 8px rgba(230, 126, 34, 0.3); }
.vt-banner .btn-outline-primary { color: #fff !important }
.vt-banner::before { opacity:.5; }
@media (prefers-reduced-motion: reduce) { .vt-banner::before { animation: none; } .vt-banner-actions .btn, .vt-banner-icon, .vt-btn-arrow { transition: none; } .vt-banner:hover { transform: none; } }

/* Pequeños ajustes para pantallas muy pequeñas */
@media (max-width:768px){
  .vt-banner-icon { width:40px; height:40px; }
  .vt-banner-text { font-size:.7rem; }
  .vt-banner-actions { width:100%; justify-content:flex-end; margin-left:0; }
  .vt-banner-actions .btn { font-size:.58rem; padding:.45rem .85rem; }
  .vt-banner-inner { padding-top: 16px; padding-bottom: 16px; flex-wrap: nowrap; }
}
@media (prefers-reduced-motion:reduce){
  .vt-banner::before { animation:none; }
  .vt-banner-actions .btn { transition:none; }
}

@media (max-width: 768px) {
    .top-header-left {
        display: flex !important;
        align-items: center !important;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        justify-content: center !important;
    }

    .top-header-right,
    .top-header .btn,
    .top-header a,
    .top-header [class^="fa-"],
    .top-header [class*=" fa-"],

    .top-header {
        justify-content: center !important;
        padding-top: 12px;
        padding-bottom: 12px;
        height: auto;
    }

    .container {
        justify-content: center !important;
        padding-left: 5vw !important;
        padding-right: 5vw !important;
    }

    .hero-section.minimal-hero { height:25vh; min-height:25vh; max-height:25vh; position:relative; display:flex; align-items:center; justify-content:center; margin-top:0; }

    #about { padding-top: 28px !important; padding-bottom: 28px !important; }
    #gallery { padding-top: 28px !important; padding-bottom: 28px !important; }
    #cabins { padding-top: 28px !important; padding-bottom: 28px !important; }
    #location { padding-top: 28px !important; padding-bottom: 28px !important; }
    #amenities { padding-top: 28px !important; padding-bottom: 28px !important; }
    #reservas { padding-top: 28px !important; padding-bottom: 28px !important; }
    #faq { padding-top: 28px !important; padding-bottom: 28px !important; }
    #testimonials { padding-top: 28px !important; padding-bottom: 28px !important; }
    #contact { padding-top: 28px !important; padding-bottom: 28px !important; }

    iframe { height: 200px !important; }

    .mb-5 { margin-bottom: 32px !important;}

    .location-info { display: none !important; }

    #widget-reservas { padding-top: 0 !important; padding-bottom: 0 !important; }
    .reservation-placeholder {padding-left: 0 !important; padding-right: 0 !important; }
    .vt-banner {
        margin-top: 22px;
    }

    .testi-viewport {
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        white-space: nowrap;
        display: block !important;
    }
    .testi-track {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 0 16px;
    }
    .testimonial-slide {
        min-width: 85vw;
        max-width: 90vw;
        flex: 0 0 auto;
        scroll-snap-align: start;
        margin: 0;
        display: inline-block !important; /* sobrescribe el col de Bootstrap */
    }

    .testimonial-card,
    .testimonial-text {
        white-space: normal !important;
        overflow-wrap: break-word;
        word-break: break-word;
    }

  .hero-section.minimal-hero { display:none !important; }
  #gallery.simple-gallery .wg-grid.carousel-mode {
    display:flex !important;
    gap:0;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    padding:0 8px;
    width:100%;
}
#gallery.simple-gallery .gallery-viewport {
    position:relative;
    width:100%;
    max-width:100%;
    overflow:hidden; /* dejamos el scroll en el grid para no reescribir JS */
    padding:0; margin:0;
}
#gallery.simple-gallery .wg-grid.carousel-mode::-webkit-scrollbar { display:none; }
#gallery.simple-gallery .wg-grid.carousel-mode { scrollbar-width:none; }
#gallery.simple-gallery .wg-grid.carousel-mode .wg-item {
    flex:0 0 85vw; /* basado en viewport para asegurar overflow */
    min-width:85vw;
    max-width:85vw;
    scroll-snap-align:center;
    position:relative;
    margin:0 8px;
    background:#000;
}
#gallery.simple-gallery .wg-grid.carousel-mode .wg-item img { width:100%; height:320px; object-fit:cover; display:block; }
@media (max-width:600px){ #gallery.simple-gallery .wg-grid.carousel-mode .wg-item img { height:300px; } }
@media (max-width:480px){ #gallery.simple-gallery .wg-grid.carousel-mode .wg-item img { height:260px; } }
#gallery.simple-gallery .wg-grid.carousel-mode .wg-item:hover,
#gallery.simple-gallery .wg-grid.carousel-mode .wg-item:focus-visible { transform: none !important; box-shadow: none !important; }
#gallery.simple-gallery .wg-grid.carousel-mode + .wg-pagination { display:none !important; }
  /* 3. Amenities en exactamente 2 columnas */
  .amenities-grid {
    display:grid !important;
    grid-template-columns:repeat(2, 1fr) !important;
    gap:14px 14px !important;
    justify-content:stretch !important;
    align-items:stretch !important;
    padding-top:.5rem !important;
  }
  .amenity-card.mini { width:100% !important; flex:unset !important; }
  #gallery.simple-gallery .g-arrow,
  #gallery.simple-gallery .g-prev,
  #gallery.simple-gallery .g-next { display:none !important; }
  #gallery.simple-gallery .wg-item { cursor: default; }
  #gallery.simple-gallery .wg-item:hover,
  #gallery.simple-gallery .wg-item:focus-visible { transform: none !important; box-shadow: none !important; }
  #gallery.simple-gallery .wg-item:focus-visible { outline: 0 !important; }

  .main-nav .navbar-nav { flex-direction: row !important; align-items: center; justify-content: center; }
  .main-nav .navbar-nav .nav-item { flex: 0 0 auto; }

  body.top-header-hidden .main-nav { box-shadow:0 1px 1px rgba(0,0,0,.06); }

  .hide-mobile { display:inline-flex; }

  .hide-mobile { display:none !important; }
  /* Quitar padding y compactar sólo en mobile */
  .main-nav .navbar-nav .nav-item { padding:0 !important; }
  .main-nav .navbar-nav .nav-item:first-child { margin-left:0 !important; }
  .main-nav .navbar-nav .nav-item:last-child { margin-right:0 !important; }
  .main-nav .navbar-nav .nav-item:not(:last-child){ border-right: none !important; }

  .main-nav .navbar-nav .nav-item { padding:0 0.75rem; }

  .hide-mobile { display: none !important; }

  .main-nav-list > .nav-item:not(.hide-mobile):not(:last-child)::after {
        content: '';
        display: inline-block;
        width: 1px;
        height: 0.85em;
        background: #bcbcbc;
        opacity: .55;
        vertical-align: middle;
  }

  .nav-link { font-size: 14px !important }

  #backToTop { display: none; }

  .top-header-right { display: none !important; }
  .amenities-grid .amenity-card.mini:last-child { display: none !important; }

    @media (min-width: 400px) {
      .nav-text  { padding-left: 4px !important; padding-right: 2px !important; }}
}



/* ==========================================================================
   ESTILOS ESPECÍFICOS PARA EL NUEVO HEADER SUPERIOR
   ========================================================================== */
/* Top header estilos generales */
.top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  height: 88px;
  background: #fff;
  border-bottom: 1px solid #eaeaea;
  position: relative;
  z-index: 1000;
}

/* Ocultar logo original en mobile */
.top-header .logo {
  display: none;
}

/* Nuevo logo centrado en mobile */
.top-header .logo-mobile {
  display: block;
  margin: 0 auto;
  max-width: 120px;
}

/* Ajustes en los items del header superior */
.top-header .header-item {
  margin: 0 10px;
  position: relative;
}

/* Iconos sociales en el header superior */
.top-header .social-link-top {
    width: 40px;
    height: 40px;
    background: #f2f2f2;
    color: var(--primary-color);
    margin-left: 8px;
    font-size: 1rem;
    border: 1px solid #e3e3e3;
}
.top-header .social-link-top:first-child { margin-left: 0; }
.top-header .social-link-top:hover,
.top-header .social-link-top:focus-visible {
    background: var(--primary-color);
    color: #fff;
}

/* ================= Floating WhatsApp Mobile ================= */
#floatingWhatsapp {
  position: fixed;
  bottom: 18px;
  right: 16px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: 0 6px 18px -4px rgba(0,0,0,.35), 0 3px 8px -2px rgba(0,0,0,.25);
  text-decoration: none;
  z-index: 1200;
  opacity: 0;
  visibility: hidden;
  transform: scale(.6);
  transition: opacity .32s ease, transform .32s cubic-bezier(.4,0,.2,1), visibility .32s;
  -webkit-tap-highlight-color: transparent;
}
#floatingWhatsapp:hover { background:#20bd5a; }
#floatingWhatsapp:active { transform: scale(.92); }
#floatingWhatsapp:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow:0 0 0 4px rgba(37,211,102,.65), 0 6px 18px -4px rgba(0,0,0,.45); }
#floatingWhatsapp.fw-visible { opacity:1; visibility:visible; transform:scale(1); }
/* Ocultar siempre en desktop */
@media (min-width: 769px){
  #floatingWhatsapp {
    display:flex !important;
    opacity:0; visibility:hidden;
    transform:translateY(14px) scale(.9);
    transition:opacity .25s ease, transform .25s ease, visibility .25s;
    width:62px; height:62px; font-size:30px;
    bottom:94px; /* antes 22px: lo subimos para no chocar con #backToTop */
    right:22px;  /* alineado con el right del backToTop (30px) */
  }
  #floatingWhatsapp.visible { opacity:1; visibility:visible; transform:translateY(0) scale(1); }
}

/* ==========================================================================
   OVERRIDES GALERÍA SIMPLE (ajustes finos)
   ========================================================================== */
/* 1. Ajustar márgenes y centrado de items */
#gallery.simple-gallery .wg-item {
  margin: 0 auto; /* centrado horizontal */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* 2. Títulos y textos en centro */
#gallery.simple-gallery .wg-item .caption {
  text-align: center;
  padding: 0 0.5rem;
}

/* 3. Efecto hover sutil */
#gallery.simple-gallery .wg-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px -4px rgba(0,0,0,.2);
}

/* 4. Transiciones suaves para imágenes */
#gallery.simple-gallery .wg-item img {
  transition: transform .4s ease, filter .4s ease;
}

/* 5. Filtros en hover */
#gallery.simple-gallery .wg-item:hover img {
  filter: brightness(1.05) saturate(1.1);
}

/* 6. Ajustes en focus para accesibilidad */
#gallery.simple-gallery .wg-item:focus-within {
  outline: 3px solid var(--primary-color);
  outline-offset: 2px;
}

/* 7. Ocultar título en dispositivos pequeños (mobile) */
@media (max-width: 600px) {
  #gallery.simple-gallery .wg-item .caption {
    display: none;
  }
}

/* 8. Mostrar título completo en hover (mobile) */
@media (max-width: 600px) {
  #gallery.simple-gallery .wg-item:hover .caption {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 0.5rem;
    border-radius: 0 0 12px 12px;
  }
}

/* 9. Ajustes específicos para la última fila (mobile) */
@media (max-width: 600px) {
  #gallery.simple-gallery .wg-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  #gallery.simple-gallery .wg-item {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* 10. Desactivar efecto de ampliación en dispositivos táctiles (mobile) */
@media (pointer: coarse) {
  /* Override mobile/touch: sin ampliación ni desplazamiento vertical al tocar la galería */
  #gallery.simple-gallery .wg-item,
  #gallery.simple-gallery .wg-item:hover,
  #gallery.simple-gallery .wg-item:focus,
  #gallery.simple-gallery .wg-item:focus-visible {
    transform: none !important;
    box-shadow: 0 4px 14px -6px rgba(0,0,0,.35) !important; /* conservar sombra base */
  }
  #gallery.simple-gallery .wg-item img,
  #gallery.simple-gallery .wg-item:hover img,
  #gallery.simple-gallery .wg-item:focus img,
  #gallery.simple-gallery .wg-item:focus-visible img {
    transform: none !important;
    filter: none !important;
  }
  /* Evitar animaciones que intenten escalar */
  #gallery.simple-gallery .wg-item,
  #gallery.simple-gallery .wg-item img { transition: none !important; }
}
/* 10b. Refuerzo para navegadores táctiles que sólo exponen hover:none */
@media (hover: none) {
  #gallery.simple-gallery .wg-item,
  #gallery.simple-gallery .wg-item:hover,
  #gallery.simple-gallery .wg-item:focus,
  #gallery.simple-gallery .wg-item:focus-visible {
    transform: none !important;
    box-shadow: 0 4px 14px -6px rgba(0,0,0,.35) !important;
  }
  #gallery.simple-gallery .wg-item img,
  #gallery.simple-gallery .wg-item:hover img,
  #gallery.simple-gallery .wg-item:focus img,
  #gallery.simple-gallery .wg-item:focus-visible img {
    transform: none !important;
    filter: none !important;
  }
  #gallery.simple-gallery .wg-item,
  #gallery.simple-gallery .wg-item img { transition: none !important; }
}

/* Dots carrusel galería móvil encima del vt-banner */
#gallery.simple-gallery .gallery-dots { display:flex; justify-content:center; gap:8px; margin:20px 0 4px; padding:0 4px; }
#gallery.simple-gallery .gallery-dot { width:9px; height:9px; border-radius:50%; background: rgba(210, 210, 210, 0.5); border:none; padding:0; cursor:pointer; transition:background .35s, transform .35s; position:relative; }
#gallery.simple-gallery .gallery-dot:focus-visible { outline:2px solid var(--primary-color); outline-offset:2px; }
#gallery.simple-gallery .gallery-dot.active { background: var(--primary-color); transform:scale(1.25); }
#gallery.simple-gallery .gallery-dot:not(.active):hover { background: rgba(181, 181, 181, 0.5); }
/* Hint swipe animado */
@keyframes hintIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes hintFade {
    0%   { opacity: 1; }
    100% { opacity: 1; }
}
@keyframes hintOut {
    0%   { opacity: 1;}
    100% { opacity: 0;}
}

/* Aplica animación de fade in solo al aparecer */
#gallery.simple-gallery .gallery-swipe-hint {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
    font-size: 15px;
    line-height: 1.35;
    color: #fff;
    font-weight: 500;
    letter-spacing: .5px;
    backdrop-filter: none;
    z-index: 60;
    opacity: 0;
    /* Animación de entrada */
    animation: hintIn 0.7s cubic-bezier(.32,1.3,.5,1.1) forwards, hintFade 3.8s 0.7s forwards;
    pointer-events: none;
}

#gallery.simple-gallery .gallery-swipe-hint.hide {
    animation: hintOut .55s forwards;
}

@media (max-width: 768px) {
    .vt-banner-text {
        white-space: normal;
        overflow-wrap: anywhere;
        letter-spacing: 0;
        align-items: flex-start !important;
        height: 100%; /* asegura que ocupe el mismo alto que el flex parent */
    }

    .vt-banner-title {
        font-size: .8rem;
        min-width: 0;
        padding: 0;
    }

    .vt-banner-subtitle {
        font-size: .8rem;
        min-width: 0;
        padding: 0;
    }

    .vt-banner-actions {
        margin-left: 0 !important;
        justify-content: center !important;
        max-width: 25vw !important;
    }

    .vt-banner-actions .btn {
        font-size: .7rem !important;
    }

    .vt-banner-inner {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding: .6rem .8rem;
        gap: .65rem;
        transition: transform 0.15s cubic-bezier(.4, 1.6, .6, 1);
    }
}
/* Fin ajustes vt-banner */

/* Footer color alignment overrides */
footer .text-muted, /* texto tenue dentro del footer */
footer .contact-item, /* bloques de contacto si existen en footer */
footer .contact-item a, /* enlaces dentro de contact-item */
footer .contact-item span, /* spans genéricos */
footer .contact-item p { color:#a0aec0 !important; }
footer .contact-item a:hover { color:#fff !important; }

/* === Botones: mantener color en click (active) === */
.btn-btn-primary:active,
.btn-btn-primary:not(.disabled):active,
.btn-btn-primary:focus,
.btn-btn-primary:focus-visible,
.btn-btn-primary:active:focus,
.btn-btn-primary.show,
.btn-primary:active,
.btn-primary:not(.disabled):active,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active:focus,
.btn-primary.show {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color:#fff !important;
    box-shadow:none !important;
}
/* Preservar hover distinto sólo en hover explícito */
.btn-btn-primary:hover { background:#d36d07 !important; }

/* === Botón WhatsApp con secondary-color === */
/* Reemplazado: ahora sólo el ícono será verde, el botón mantiene color primario */
.whatsapp-button .btn {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color:#fff !important;
}
.whatsapp-button .btn i { color: var(--secondary-color) !important; }
.whatsapp-button .btn:hover,
.whatsapp-button .btn:focus,
.whatsapp-button .btn:active,
.whatsapp-button .btn:focus-visible {
    background:#d36d07 !important; /* mismo hover que otros primarios */
    border-color:#d36d07 !important;
    color:#fff !important;
}
/* Fin overrides botón WhatsApp (sólo ícono verde) */

/* Ajuste específico: botón enviar del formulario contacto a 1rem */
#contactForm button[type="submit"] { font-size: 1rem !important; }
/* Fin ajuste específico */

/* --- Estilos para la Página 404 --- */

/* Aseguramos que el contenedor ocupe toda la pantalla para centrar el contenido */
body.error-page, html {
    height: 100%;
    margin: 0;
}

.error-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* Ocupa toda la altura de la pantalla */
    padding: 20px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    background-color: #f8f9fa; /* Un fondo suave */
    color: #343a40;
}

.error-container .feather-compass {
    color: #ff8c00; /* Un color naranja cálido, similar al de tu logo */
    margin-bottom: 20px;
}

.error-title {
    font-family: 'Playfair Display', serif;
    font-size: 10rem; /* Tamaño bien grande para el 404 */
    font-weight: 700;
    line-height: 1;
    margin: 0;
    color: #dee2e6; /* Un color gris claro para que no sea tan agresivo */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.error-subtitle {
    font-size: 1.75rem;
    font-weight: 600;
    margin-top: -2rem; /* Lo movemos un poco hacia arriba para que se superponga con el 404 */
    margin-bottom: 1rem;
    color: #495057;
    position: relative; /* Necesario para que esté por encima del título */
}

.error-text {
    font-size: 1rem;
    max-width: 500px;
    margin-bottom: 2rem;
    color: #6c757d;
}

.error-button {
    display: inline-block;
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background-color: #ff8c00; /* Mismo color naranja cálido */
    border: none;
    border-radius: 50px; /* Bordes redondeados para un look moderno */
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.error-button:hover {
    transform: translateY(-3px);
    background-color: #fff; /* Un poco más oscuro al pasar el mouse */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

a.btn.error-button:hover,
a.btn.error-button:focus {
    color: #fff !important;
    background: #e67e22 !important;
    border-color: #e67e22 !important;
}


/* --- Responsividad para móviles --- */
@media (max-width: 768px) {
    .error-title {
        font-size: 8rem;
    }
    .error-subtitle {
        font-size: 1.25rem;
        margin-top: -1.5rem;
    }
}