/* =============================================
   1. VARIABLES DE MARCA Y CONFIGURACIÓN RAÍZ
   ============================================= */
:root {
    /* Paleta de Colores Principal (Tema Naturaleza/Aventura) */
    --color-primary-teal-dark: #0a5250;
    --color-primary-teal: #005953;
    --color-accent-brand-red: #c0392b;
    --color-accent-brand-red-dark: #a12f22;
    
    /* ! SOLUCIÓN CLAVE: Amarillo corregido y con propósito claro */
    --color-accent-gold-star: #e3e319a5; /* Amarillo SÓLIDO para estrellas y decoración. NO para texto. */

    /* Colores de Fondo */
    --color-bg-light: #f7f9f9;
    --color-bg-dark-section: #011c2a;
    --color-bg-top-bar: #073a38;
    --color-bg-footer: #01151f;

    /* Colores de Texto */
    --color-text-dark: #2c3e50;
    --color-text-dark-subtle: #566573;
    --color-white: #ffffff;
    --color-text-light-offwhite: #f0f2f2;
    --color-text-light-subtle: #aeb6bf;

    /* Tipografía */
    --font-family-serif: 'Merriweather', serif;
    --font-family-sans: 'Montserrat', sans-serif;

    /* Sizing y Espaciado */
    --border-radius-soft: 6px;
    --border-radius-cards: 12px;
    --border-radius-buttons: 50px; /* Botones tipo píldora */
    --section-padding: clamp(3rem, 8vw, 6rem) 0;

    /* Transiciones y Sombras */
    --transition-main: all 0.3s ease;
    --box-shadow-light: 0 4px 12px rgba(0, 0, 0, 0.06);
    --box-shadow-medium: 0 8px 25px rgba(0, 0, 0, 0.1);
    --box-shadow-strong: 0 12px 40px rgba(0, 0, 0, 0.15);
}


/* =============================================
   2. RESET BÁSICO Y ESTILOS GLOBALES
   ============================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 100%;
}

body {
    font-family: var(--font-family-sans);
    line-height: 1.7;
    color: var(--color-text-dark);
    background-color: var(--color-bg-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

main {
    flex-grow: 1;
}

/* Estilos base para imágenes y enlaces */
img, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: var(--color-primary-teal);
    transition: color 0.2s ease-in-out;
}

a:hover {
    color: var(--color-accent-brand-red);
}

/* Tipografía base */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-serif);
    color: var(--color-primary-teal-dark);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0.8em;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.4rem, 3vw, 2rem); }

p {
    margin-bottom: 1em;
    color: var(--color-text-dark-subtle);
}

/* ===== VISIBILIDAD DE TEXTOS ===== */
h1, h2, p {
    color: var(--color-text-dark);
}

.text-overlay {
    background-color: rgba(0,0,0,0.6);
    color: var(--color-text-light);
    padding: 15px;
}

/* ===== BOTÓN "RESERVAR" ===== */
.button-reservar {
    background-color: var(--color-accent-red);
    color: var(--color-white);
    padding: 12px 20px;
    border-radius: var(--border-radius-buttons);
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: var(--box-shadow-light);
    transition: var(--transition-main);
}

.button-reservar:hover {
    background-color: var(--color-accent-red-dark);
    box-shadow: var(--box-shadow-light);
}


/* ===== RESET BÁSICO Y CONFIGURACIÓN GLOBAL ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth; /* SINTAXIS CORREGIDA */
    font-size: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-family-sans);
    line-height: 1.7;
    color: var(--color-text-dark-charcoal);      /* CORREGIDO */
    background-color: var(--color-bg-light-gray); /* CORREGIDO */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
body.no-scroll {
    overflow: hidden;
}

main {
    flex-grow: 1;
}

img, svg {
    max-width: 100%;
    height: auto;
    display: block;
}
img {
    border-radius: var(--border-radius-soft);
}

a {
    text-decoration: none;
    color: var(--color-primary-teal-dark); /* CORREGIDO */
    transition: color 0.2s ease-in-out;
}
a:hover, a:focus {
    color: var(--color-accent-brand-red); /* CORREGIDO */
    text-decoration: none;
}
/* Estilo de foco (focus-visible) unificado y sutil */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, details > summary:focus-visible {
    outline: 2px solid var(--color-primary-green); /* Un borde verde sutil */
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 89, 83, 0.2); /* Un halo verde transparente */
    border-radius: var(--border-radius-soft);
}

/* En fondos oscuros, el foco será más claro para mayor contraste */
.section-padding-dark a:focus-visible,
.section-padding-dark button:focus-visible,
.site-footer a:focus-visible,
.site-footer button:focus-visible {
     outline-color: var(--color-text-light);
     box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
}


ul, ol {
    list-style: none;
}

/* =============================================
   3. HEADER Y NAVEGACIÓN (SISTEMA DINÁMICO)
   ============================================= */

/* Contenedor principal del header */
.site-header {
    background-color: rgba(247, 249, 249, 0.90);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Nivel base para el header */
}

/* --- Barra Superior --- */
.top-bar {
    background-color: var(--color-bg-top-bar);
    color: var(--color-text-light-subtle);
    font-size: 0.85rem;
    padding: 8px 0;
}
.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.top-bar-left, .top-bar-right {
    display: flex;
    align-items: center;
    gap: 1.5em;
}
.top-bar a {
    color: var(--color-text-light-subtle);
    transition: color 0.2s ease;
}
.top-bar a:hover {
    color: var(--color-white);
}

/* --- Barra de Navegación Principal --- */
.navigation-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

.logo-image {
    height: clamp(45px, 6vw, 55px);
    width: auto;
}

/* --- Menú de Escritorio --- */
.nav-menu {
    display: none; /* Oculto por defecto, se muestra en media query */
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (min-width: 992px) {
    .nav-menu {
        display: flex;
        gap: clamp(1em, 2.5vw, 2em);
    }
}

.nav-link {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text-dark);
    padding: 0.5em 0.2em;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.3em;
}

/* Línea animada bajo los enlaces */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-accent-brand-red);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1);
}
.nav-link.active {
    color: var(--color-primary-teal);
}

/* --- Mega Menú (Dropdown de Tours) --- */
.has-dropdown {
    position: relative;
}

@media (min-width: 992px) {
    .nav-dropdown-menu {
        display: flex;
        position: absolute;
        top: calc(100% + 15px);
        left: 0;
        z-index: 1001;
        width: 580px;
        background-color: var(--color-white);
        border-radius: 0 0 var(--border-radius-cards) var(--border-radius-cards);
        box-shadow: var(--box-shadow-strong);
        border: 1px solid #e9ecef;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s;
        pointer-events: none;
    }

    .has-dropdown:hover .nav-dropdown-menu,
    .has-dropdown:focus-within .nav-dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition-delay: 0s;
        pointer-events: auto;
    }

    .dropdown-links-wrapper {
        flex: 0 0 55%;
        padding: 20px;
        background-color: var(--color-bg-light);
    }
    .dropdown-links {
        list-style: none;
        padding: 0; margin: 0;
    }
    .dropdown-links a {
        display: block;
        padding: 12px 15px;
        color: var(--color-text-dark);
        font-weight: 500;
        border-radius: var(--border-radius-soft);
        transition: background-color 0.2s ease, color 0.2s ease;
    }
    .dropdown-links a:hover,
    .dropdown-links a:focus {
        background-color: var(--color-white);
        color: var(--color-primary-teal-dark);
    }
    
    .dropdown-image-preview {
        flex: 1;
        background-color: #f0f0f0;
    }
    .dropdown-image-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: opacity 0.3s ease-in-out;
    }
}

/* --- Menú Móvil y Hamburguesa --- */
.mobile-nav-toggle {
    display: none; /* Oculto en escritorio */
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1002; /* El más alto de todos */
}

/* =============================================
   ESTILOS PARA TABLET Y MÓVIL
   ============================================= */

@media (max-width: 991.98px) {
    /* ESTILOS PARA EL BOTÓN HAMBURGUESA (Necesarios)
       Estos estilos son los únicos que deben quedar aquí.
       Los estilos del panel del menú ahora están en header.html. */
    .mobile-nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 30px;
        height: 22px;
    }
    .mobile-nav-toggle .icon-bar {
        width: 100%;
        height: 3px;
        background-color: var(--color-primary-teal-dark);
        border-radius: 2px;
        transition: all 0.3s linear;
    }
}


/* =============================================
   16. GRIDS DE LAYOUT
   ============================================= */

.tours-grid, 
.testimonials-grid, 
.value-props-grid, 
.features-grid, 
.stats-grid {
    display: grid;
    gap: clamp(25px, 4vw, 40px);
}

/* Grids para Tours, Teasers de Blog y Testimonios */
.tours-grid,
.testimonials-grid {
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* Grid para Características o Props de Valor */
.features-grid,
.value-props-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Grid para Estadísticas */
.stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
/* ===== ACCESIBILIDAD: SKIP LINK ===== */
.skip-link {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-accent-brand-red); /* CORREGIDO */
    color: var(--color-white);
    padding: 12px 24px;
    z-index: 10000;
    border-radius: 0 0 var(--border-radius-soft) var(--border-radius-soft);
    transition: top 0.3s ease-in-out;
    font-weight: 600;
}
.skip-link:focus {
    top: 0;
}


/* ===== TIPOGRAFÍA Y TÍTULOS ===== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-serif);
    color: var(--color-primary-teal-dark); /* CORREGIDO */
    line-height: 1.25;
    margin-top: 0;
    margin-bottom: 0.8em;
    font-weight: 700;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.4rem, 3vw, 2rem); }
h4 { font-size: clamp(1.1rem, 2.5vw, 1.6rem); font-weight: 600; }

.section-header {
    text-align: center;
    margin-bottom: clamp(40px, 6vw, 60px);
}
.section-title, .section-title-light {
    margin-bottom: 0.4em;
    position: relative;
    padding-bottom: 20px;
}
.section-subtitle, .section-subtitle-light {
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-family: var(--font-family-sans);
    font-weight: 400;
    color: var(--color-bg-light); /* CORREGIDO */
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}
.section-subtitle-light {
    color: var(--color-text-light-subtle); /* CORREGIDO */
    opacity: 0.9;
}

/* Regla específica para la sección #contacto-reservas */
#contacto-reservas .section-subtitle-light {
    color: #ffffff;
    opacity: 1;
}


.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 3px;
    background-color: var(--color-accent-brand-red); /* CORREGIDO */
    border-radius: 3px;
}
.section-title-light {
    color: var(--color-text-light-offwhite); /* CORREGIDO */
}
.section-title-light::after {
    background-color: var(--color-accent-red); /* Cambiado a ROJO */
}

.highlight-text {
    color: var(--color-accent-brand-red); /* CORREGIDO */
}

/* ===== UTILIDADES DE LAYOUT ===== */
.container {
    width: 90%;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}
.narrow-container {
    max-width: 850px;
}

.section-padding, .section-padding-dark, .section-padding-cta {
    padding-top: clamp(60px, 10vw, 100px);
    padding-bottom: clamp(60px, 10vw, 100px);
}

.section-padding-dark {
    background-color: var(--color-bg-dark-section);
    color: var(--color-text-light-offwhite); /* CORREGIDO */
}
.section-padding-dark a {
    color: var(--color-accent-brand-red); /* CORREGIDO */
}
.section-padding-dark a:hover, .section-padding-dark a:focus {
    color: var(--color-bg-light-gray); /* CORREGIDO */
}
.section-padding-dark h1, .section-padding-dark h2, .section-padding-dark h3, .section-padding-dark h4 {
    color: var(--color-text-light-offwhite); /* CORREGIDO */
}

.section-padding-cta {
    text-align: center;
    position: relative;
    background-size: cover;
    background-position: center center;
    color: var(--color-white);
    overflow: hidden;
}
.hero-overlay {
    position: absolute;
    top:0; left:0; width:100%; height:100%;
    /* CORREGIDO: Gradiente con los colores de la nueva marca */
    background: linear-gradient(180deg, rgba(0, 89, 83, 0.7) 0%, rgba(0, 89, 83, 0.5) 40%, rgba(192, 57, 43, 0.45) 100%);
    z-index: 1;
}
.section-padding-cta > .container {
    position: relative;
    z-index: 2;
}



/* ===== HEADER Y NAVEGACIÓN ===== */
.site-header {
    background-color: rgba(247, 249, 249, 0.90); /* CORREGIDO: Usa el nuevo color de fondo claro */
    box-shadow: 0 2px 10px rgba(47, 79, 79, 0.06);
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.top-bar {
    background-color: var(--color-primary-teal-dark); /* CORREGIDO */
    padding: 8px 0;
    font-size: 0.85rem;
    color: var(--color-text-light-subtle);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.top-bar-left span, .top-bar-left a, .social-icons-top a {
    color: var(--color-text-light-subtle);
}
.top-bar-left a:hover, .social-icons-top a:hover {
    color: var(--color-white);
}

.navigation-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

.logo-image {
    height: clamp(45px, 6vw, 55px);
}

.header-contact-info .tel-link {
    color: var(--color-primary-teal-dark);   /* CORREGIDO */
}
.header-contact-info .tel-link:hover {
    color: var(--color-accent-brand-red); /* CORREGIDO */
}

.nav-link {
    color: var(--color-text-dark-charcoal); /* CORREGIDO */
    font-weight: 600;
    font-size: clamp(0.9rem, 1.5vw, 1rem);
    position: relative;
    padding: 0.5em 0.3em;
    transition: color 0.2s ease, border-bottom-color 0.2s ease;
}
.nav-link::after {
    background-color: var(--color-accent-brand-red); /* CORREGIDO */
    /* ... */
}
.nav-link.active {
    color: var(--color-primary-teal-dark); /* CORREGIDO */
    font-weight: 700;
}

.mobile-nav-toggle .icon-bar {
    background-color: var(--color-primary-teal-dark); /* CORREGIDO */
}

/* ===== HERO SECTION ===== */
.hero-section {
    height: clamp(70vh, 85vh, 90vh);
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 50px;
}
.hero-content {
    text-align: center;
    position: relative;
}
.hero-title {
    text-shadow: 1px 1px 5px var(--color-black-alpha-30);
}
.hero-subtitle {
    font-size: clamp(1.05rem, 2.2vw, 1.4rem);
    font-weight: 400;
    opacity: 0.95;
    margin-bottom: 2em;
}
.hero-cta {
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    padding: 0.9em 2.2em;
}
.scroll-hint {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-white);
    opacity: 0.8;
    margin-top: 1em;
    display: block;
    letter-spacing: 0.5px;
    text-align: center;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-6px);
  }
  60% {
    transform: translateY(-3px);
  }
}




/* Grids para Tours, Teasers de Blog y Testimonios */
.tours-grid,
.testimonials-grid {
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* Grid para Características o Props de Valor */
.features-grid,
.value-props-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Grid para Estadísticas */
.stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
/* --- 1. Grid de Tours (La Corrección Principal) --- */

/* Por defecto (Mobile First): 1 columna */
.tours-grid {
    grid-template-columns: 1fr;
}

/* A partir de 640px de ancho: 2 columnas */
@media (min-width: 640px) {
    .tours-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* A partir de 992px de ancho: 3 columnas, como deseas */
@media (min-width: 992px) {
    .tours-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* --- 2. Adaptación de los Otros Grids para Consistencia --- */

/* Testimonials Grid (muy similar a los tours) */
.testimonials-grid {
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .testimonials-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* auto-fit aquí funciona bien */
    }
}

/* Features Grid (para props de valor y características) */
.features-grid {
    grid-template-columns: 1fr;
}
@media (min-width: 500px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 992px) {
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Stats & Value Props Grid (pueden tener hasta 4 columnas) */
.value-props-grid, 
.stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* --- Sección "Features" (Fondo Oscuro) --- */
.feature-item {
    background-color: rgba(255, 255, 255, 0.05); 
    padding: clamp(25px, 4vw, 35px);
    border-radius: var(--border-radius-cards);
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
    will-change: background-color, transform;
}
.feature-item:hover {
    background-color: rgba(255, 255, 255, 0.1); transform: translateY(-8px);
}
.feature-icon-wrapper {
    width: clamp(60px, 10vw, 75px); height: clamp(60px, 10vw, 75px);
    margin-inline: auto; margin-bottom: 1.5em;
    border-radius: 50%;
    background-color: var(--color-primary-teal-very-dark); /* BRANDING CORREGIDO */
    display: grid; place-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.feature-icon-wrapper i {
    font-size: clamp(1.8rem, 5vw, 2.2rem);
    color: var(--color-accent-gold-star); /* BRANDING CORREGIDO */
}
.feature-title {
    font-size: clamp(1.2rem, 2.5vw, 1.4rem);
    color: var(--color-text-light-offwhite); /* BRANDING CORREGIDO */
    margin-bottom: 0.5em; font-weight: 700;
}
.feature-item p {
    font-size: clamp(0.9rem, 1.8vw, 1rem);
    color: var(--color-text-light-subtle); /* BRANDING CORREGIDO */
    line-height: 1.6; margin: 0;
}

/* --- Sección "Stats" (Fondo Claro) --- */
.stats-section .feature-item {
    background-color: var(--color-white);
    box-shadow: var(--box-shadow-light);
}
.stats-section .feature-item:hover {
    transform: translateY(-6px); box-shadow: var(--box-shadow-medium);
}
.stats-section .feature-title {
    color: var(--color-primary-teal-dark); /* BRANDING CORREGIDO */
}
.stats-section .feature-item p {
    color: var(--color-text-dark-subtle); /* BRANDING CORREGIDO */
}
.stat-number {
    font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 700;
    color: var(--color-accent-brand-red); /* BRANDING CORREGIDO */
    font-family: var(--font-family-sans);
    margin-bottom: 0.2em; line-height: 1;
}

/* --- Sección de Testimonios --- */
.testimonial-quote-wrapper {
    background-color: var(--color-white);
    padding: clamp(25px, 4vw, 40px);
    border-radius: var(--border-radius-cards);
    box-shadow: var(--box-shadow-medium);
    display: flex; flex-direction: column;
}
.testimonial-quote {
    font-family: var(--font-family-serif); font-style: italic;
    font-size: clamp(1rem, 2vw, 1.15rem);
    color: var(--color-text-dark-subtle);
    position: relative; padding-left: 45px;
    margin-bottom: 1em; flex-grow: 1;
}
.testimonial-quote::before {
    content: '“'; font-family: var(--font-family-serif);
    font-size: 5rem;
    color: var(--color-primary-teal-dark); /* BRANDING CORREGIDO */
    opacity: 0.1; /* Sutil */
    position: absolute; left: -5px; top: -15px;
    line-height: 1; z-index: 0;
}
.testimonial-quote p {
    position: relative; z-index: 1;
}
.testimonial-cite {
    font-family: var(--font-family-sans); font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-primary-teal-dark); /* BRANDING CORREGIDO */
    margin-top: auto; text-align: right;
}
.testimonial-cite .testimonial-location {
    font-weight: 400; color: var(--color-text-dark-subtle);
    display: block; font-size: 0.9em;
}
.testimonial-rating {
    display: block; margin-top: 0.3em;
    color: var(--color-accent-brand-red-dark); /* BRANDING CORREGIDO */
}
.testimonial-rating i {
    font-size: 0.9em;
}

/* ===== FAQ SECTION ===== */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.faq-item {
    background-color: var(--color-white);
    border-radius: var(--border-radius-soft);
    box-shadow: var(--box-shadow-light);
    overflow: hidden; /* Para que el borde no se salga */
}
.faq-question { /* summary tag */
    padding: 1.2em 1.5em;
    font-weight: 600;
    color: var(--color-primary-green-dark);
    cursor: pointer;
    display: flex; /* Para alinear texto e indicador */
    justify-content: space-between;
    align-items: center;
    list-style: none; /* Quitar flecha por defecto de details en algunos navegadores */
    transition: background-color 0.2s ease;
}
.faq-question::-webkit-details-marker { /* Quitar flecha por defecto en Chrome/Safari */
    display: none;
}
.faq-question:hover {
    background-color: #f7f1eb; /* Un hover sutil */
}
.faq-item[open] .faq-question {
    background-color: var(--color-primary-green);
    color: var(--color-white);
}
.faq-question::after { /* Indicador +/- */
    content: '+';
    font-size: 1.5em;
    line-height: 1;
    transition: transform 0.3s ease;
    color: var(--color-accent-gold);
}
.faq-item[open] .faq-question::after {
    content: '−';
    transform: rotate(180deg); /* Gira para un efecto más suave */
    color: var(--color-accent-yellow);
}
.faq-answer {
    padding: 0 1.5em 1.5em 1.5em;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text-dark-subtle);
    border-top: 1px solid var(--color-bg-light); /* Separador cuando está abierto */
}
.faq-answer p {
    margin-bottom: 0.8em;
}
.faq-answer p:last-child {
    margin-bottom: 0;
}
.faq-answer a {
    font-weight: 600;
}


/* ===== FINAL CTA SECTION ===== */
.final-cta-content .hero-cta,
.final-cta-content .cta-button-secondary { /* Para los botones en la sección de contacto final */
    margin: 0.5em; /* Espacio entre botones si se apilan */
}

.final-cta-text {
    font-size: clamp(1.1rem, 2.2vw, 1.4rem);
    font-weight: 400;
    opacity: 0.95;
    margin-bottom: 1.5em;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Estilo específico solo para el párrafo en #custom-tour-cta */
#custom-tour-cta .final-cta-text {
    color: #ffffff;
}

/* ===== FOOTER ===== */
.site-footer {
    background-color: var(--color-bg-footer);
    color: var(--color-text-light-subtle);
    font-size: 0.9rem;
}
.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    padding-bottom: clamp(30px, 5vw, 50px);
    border-bottom: 1px solid var(--color-white-alpha-10);
}
.footer-column h4 {
    font-family: var(--font-family-sans); /* Títulos del footer en sans-serif */
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 1em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.footer-logo {
    height: clamp(40px, 5vw, 50px);
    margin-bottom: 1em;
}
.footer-tagline {
    font-size: 0.9em;
    line-height: 1.6;
    opacity: 0.8;
}
.footer-column ul li {
    margin-bottom: 0.6em;
}
.footer-column ul a {
    color: var(--color-text-light-subtle);
    transition: color 0.2s ease, padding-left 0.2s ease; /* Añadir transición de padding */
}
.footer-column ul a:hover, .footer-column ul a:focus {
    color: var(--color-white);
    padding-left: 5px; /* Pequeño efecto de indentación */
}
.footer-contact-social p {
    margin-bottom: 0.6em;
}
.footer-email, .footer-whatsapp, .footer-phone { /* Clases añadidas en HTML */
    color: var(--color-text-light-subtle);
}
.footer-email:hover, .footer-whatsapp:hover, .footer-phone:hover {
    color: var(--color-accent-yellow);
}
.social-icons {
    display: flex;
    gap: 15px;
    margin-top: 1em;
}
.social-icons a img {
    height: 24px;
    width: 24px;
    opacity: 0.8;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.social-icons a:hover img, .social-icons a:focus img {
    opacity: 1;
    transform: scale(1.1);
}
.footer-bottom {
    padding-top: clamp(20px, 3vw, 30px);
    text-align: center;
    font-size: 0.85rem;
    opacity: 0.7;
}

/* --- Estilos Generales / Reajustes (si no los tienes) --- */
/* Esto puede ayudar a la consistencia general. */
body {
    margin: 0;
    font-family: 'Arial', sans-serif; /* Define una fuente base */
    line-height: 1.6;
    color: #333; /* Color de texto predeterminado */
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5em;
    line-height: 1.2;
    color: var(--color-primary-green); /* Títulos en verde primario por defecto */
}

p {
    margin-top: 0;
    margin-bottom: 1em;
}

.container {
    max-width: 1200px; /* Ancho máximo de tu contenedor principal */
    margin: 0 auto; /* Centra el contenedor */
    padding: 0 20px; /* Padding horizontal para evitar que el contenido se pegue a los bordes */
}

.section-padding {
    padding: var(--section-padding); /* Aplica el padding general de sección */
}

.section-title {
    font-size: clamp(2rem, 5vw, 3.5rem); /* Título de sección más grande y responsivo */
    margin-bottom: 1em;
    text-align: center; /* Por defecto, centramos los títulos de sección */
    color: var(--color-primary-green);
}

.highlight-text {
    color: var(--color-accent-yellow); /* Color de acento para texto resaltado */
}

.cta-button {
    display: inline-block;
    padding: 15px 30px;
    background-color: var(--color-primary-green);
    color: var(--color-white);
    text-decoration: none;
    border-radius: var(--border-radius-soft);
    font-weight: bold;
    transition: var(--transition-main);
    text-align: center; /* Asegura que el texto dentro del botón esté centrado */
}

.cta-button:hover {
    background-color: #316440; /* Un tono más oscuro de verde al pasar el ratón */
    transform: translateY(-3px);
    box-shadow: var(--box-shadow-light);
}

/* --- SECCIÓN "POR QUÉ ELEGIRNOS" (#por-que-native-tours) --- */
/* No hay cambios significativos necesarios aquí, se ve bien. */
.value-prop-card {
    background-color: var(--color-white);
    padding: clamp(25px, 4vw, 35px);
    border-radius: var(--border-radius-cards);
    text-align: center;
    box-shadow: var(--box-shadow-light);
    transition: var(--transition-main);
    border-top: 4px solid var(--color-accent-gold);
}

.value-prop-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--box-shadow-medium);
}

.value-prop-icon {
    font-size: 2.8rem;
    color: var(--color-primary-green);
    margin-bottom: 0.6em;
}

.value-prop-title {
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    margin-bottom: 0.5em;
    color: var(--color-primary-green); /* Asegura que los títulos de la tarjeta tengan color */
}

.value-prop-card p {
    font-size: 0.95rem;
    color: var(--color-text-dark-subtle);
}

/* --- SECCIÓN "NUESTRO LEGADO" (#nuestro-legado) --- */
#nuestro-legado {
    background-color: var(--color-bg-dark-section);
    /* El padding ya se aplica con .section-padding */
    color: var(--color-text-light); /* Asegura que el texto sea visible en fondo oscuro */
}

.why-us-text-container blockquote {
    border-left: 4px solid var(--color-accent-yellow);
    /* ... más estilos ... */
}

/* ESTE ES EL NUEVO CÓDIGO CORREGIDO */
.why-us-image-container,
.why-us-text-container {
    flex: 1;
    min-width: 320px;
    max-width: 550px;
    text-align: left;
}

.why-us-image-container img {
    border-radius: var(--border-radius-cards);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* El título de la sección dentro de "Nuestro Legado" */
#nuestro-legado .section-title {
    text-align: left; /* Alineado a la izquierda para esta sección específica */
    color: var(--color-bg-light); /* Color de título claro para fondo oscuro */
    margin-bottom: 0.8em;
}

.why-us-text-container p {
    margin-bottom: 1.5em;
    color: var(--color-text-light); /* Asegura que el párrafo sea visible */
}

.why-us-text-container blockquote {
    border-left: 4px solid var(--color-accent-yellow);
    padding: 0.8em 1.5em;
    margin: 1.5em 0;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--color-text-light);
    background-color: var(--color-white-alpha-10);
    border-radius: 0 var(--border-radius-soft) var(--border-radius-soft) 0;
}

.why-us-text-container blockquote p {
    margin: 0;
}

/* Estilos para la cuadrícula de estadísticas */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* Ajuste el minmax a 140px */
    gap: 25px; /* Aumento el espacio entre las estadísticas */
    margin-top: 2.5em; /* Más espacio superior */
    margin-bottom: 2.5em; /* Más espacio inferior */
    text-align: center;
}

.stat-item {
    background-color: var(--color-white-alpha-10);
    padding: 1.2em; /* Ligeramente más padding */
    border-radius: var(--border-radius-soft);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: var(--box-shadow-light); /* Sombra ligera para cada ítem */
}

.stat-number {
    font-weight: 700;
    color: var(--color-white); /* Cambiado a BLANCO */
    /* ... más estilos ... */
}

.stat-label {
    font-size: 0.95em; /* Ligeramente más grande */
    color: var(--color-text-light);
    opacity: 0.9; /* Un poco más de opacidad */
    text-transform: uppercase;
    letter-spacing: 0.5px; /* Un poco de espaciado entre letras */
}

.stat-number .fa-star {
    font-size: 0.8em;
    vertical-align: middle;
    margin-left: 5px;
    color: var(--color-accent-yellow); /* Asegura que la estrella tenga el color de acento */
}

/* Botón CTA dentro de "Nuestro Legado" */
#nuestro-legado .cta-button {
    margin-top: 2em; /* Espacio desde la cuadrícula de estadísticas */
    /* Asegura que el botón se alinee con el texto principal a la izquierda */
    margin-left: 0;
    margin-right: auto;
}


/* --- Media queries para responsividad --- */
@media (max-width: 992px) {
    .why-us-image-container,
    .why-us-text-container {
        min-width: unset; /* Permite que se apilen más fácilmente */
        max-width: 100%;
        width: 100%; /* Ocupa el 100% del ancho disponible */
    }

    /* En tabletas y móviles, centrar el contenido principal de la sección de legado */
    #nuestro-legado .section-title,
    .why-us-text-container p,
    .why-us-text-container blockquote {
        text-align: center;
    }

    #nuestro-legado .cta-button {
        display: block; /* El botón ocupa todo el ancho */
        margin-left: auto; /* Centra el botón si es un elemento de bloque */
        margin-right: auto;
    }
}

@media (max-width: 768px) {
    .section-padding {
        padding: 60px 0; /* Reduce el padding en móviles */
    }

    .why-us-content {
        flex-direction: column; /* Apila los elementos en móviles */
        align-items: center; /* Centra los elementos apilados */
    }

    .why-us-text-container blockquote {
        border-left: none; /* Elimina la barra lateral en móviles */
        border-radius: var(--border-radius-soft); /* Redondea todos los lados */
        padding: 1em; /* Ajusta el padding */
    }

    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Posiblemente 2 columnas en móviles */
        gap: 15px;
    }

    .stat-item {
        padding: 1em;
    }

    .stat-number {
        font-size: 1.8em;
    }
    .stat-label {
        font-size: 0.85em;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr; /* Una sola columna en teléfonos muy pequeños */
    }
}

/* --- SECCIÓN "TESTIMONIOS" (#testimonios-viajeros) --- */
/* Esta sección no fue solicitada para revisión, pero la incluyo para completitud. */
.testimonial-card {
    background-color: var(--color-white);
    padding: clamp(25px, 4vw, 40px);
    border-radius: var(--border-radius-cards);
    box-shadow: var(--box-shadow-light);
    display: flex;
    flex-direction: column;
    text-align: center;
    transition: var(--transition-main);
}
.testimonial-card:hover {
    transform: scale(1.03);
    box-shadow: var(--box-shadow-strong);
}
.testimonial-rating {
    color: var(--color-accent-brand-red-dark);
    font-size: 1.1rem;
    margin-bottom: 1em;
}
.testimonial-text {
    font-family: var(--font-family-serif);
    font-size: 1.05rem;
    color: var(--color);
    margin-bottom: 1.5em;
    flex-grow: 1;
    font-style: italic;
}
.testimonial-author {
    font-weight: 700;
    color: var(--color-primary-green);
}

/* Puedes añadir más media queries si lo necesitas para puntos de quiebre específicos */

/* --- SECCIÓN "CONTACTO Y RESERVAS" (#contacto-reservas o similar ID) --- */
/* Assuming your section has an ID like #contacto-reservas */
#contacto-reservas {
    background-color: var(--color-bg-dark-section); /* Use the dark background for this section */
    padding: var(--section-padding); /* Ensure standard section padding */
    color: var(--color-text-light); /* Default text color for dark background */
}

.final-cta-content {
    display: grid;
    grid-template-columns: 1fr; /* Default to single column on mobile */
    gap: clamp(2em, 5vw, 3.5em); /* More responsive gap */
    align-items: center;
    /* max-width: 900px;  Consider adding a max-width to this grid for better readability */
    /* margin: 0 auto;    And centering it */
}

/* Text content on the left side of the contact section */
.final-cta-text {
    text-align: center; /* Center text on mobile */
}

.final-cta-text h2 {
    color: var(--color-white); /* White title for dark background */
    font-size: clamp(2rem, 5vw, 3.5rem); /* Responsive title size */
    margin-bottom: 0.5em; /* Space below title */
    line-height: 1.2;
}

.final-cta-text p {
    color: var(--color-text-light);
    opacity: 0.9;
    font-size: clamp(1rem, 2vw, 1.15rem); /* Responsive paragraph size */
    max-width: 600px; /* Limit paragraph width for better readability */
    margin: 0.5em auto 2em auto; /* Center paragraph and add more bottom margin */
}

/* Contact Form Container on the right side */
.contact-form-container {
    background: rgba(255, 255, 255, 0.98); /* Slightly more opaque background */
    padding: clamp(25px, 5vw, 45px); /* Increased padding for a more premium feel */
    border-radius: var(--border-radius-cards);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Stronger shadow for more lift */
    text-align: left;
    backdrop-filter: blur(8px); /* Slightly stronger blur effect */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border for definition */
}

.contact-form-container h3 {
    text-align: center;
    color: var(--color-primary-green-dark); /* Use the dark green for consistency */
    margin-bottom: 1.8em; /* Slightly more space below heading */
    font-size: clamp(1.5rem, 3.5vw, 2rem); /* Responsive heading size */
}

.form-group {
    margin-bottom: 1.5em; /* Increased spacing between form groups */
}

.form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.95rem; /* Slightly larger label font */
    margin-bottom: 0.5em; /* Increased space below label */
    color: var(--color-text-dark); /* Use dark text color */
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.9em 1.2em; /* Slightly more padding for inputs */
    border: 1px solid #dcdcdc; /* Lighter border color */
    border-radius: var(--border-radius-soft);
    font-family: var(--font-family-sans);
    font-size: 1rem;
    transition: var(--transition-main); /* Use main transition for all hover effects */
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--color-primary-green);
    box-shadow: 0 0 0 4px rgba(61, 122, 79, 0.2); /* Adjusted shadow color to primary green */
    outline: none;
    background-color: #fcfcfc; /* Slight background change on focus */
}

/* Style for the submit button */
.form-submit-button {
    width: 100%;
    margin-top: 2em; /* More margin above the button */
    font-size: 1.15rem; /* Slightly larger button text */
    padding: 0.9em 1.5em; /* Add specific padding for the button */
    border: none; /* Remove default button border */
    cursor: pointer;
    /* Inherits styles from .cta-button via HTML class, but can be overridden here if needed */
}

/* --- Media Queries for Responsiveness --- */

/* For larger screens (e.g., tablets and desktops) */
@media (min-width: 768px) {
    .final-cta-content {
        grid-template-columns: 1fr 1.2fr; /* Text on left, form on right, form slightly wider */
        /* If you want the form on the left, change to 1.2fr 1fr */
        text-align: left; /* Align text content to the left on larger screens */
    }

    .final-cta-text h2,
    .final-cta-text p {
        text-align: left; /* Ensure text is left-aligned on larger screens */
        margin-left: 0;
        margin-right: 0;
    }

    /* Adjust form container for larger screens if needed */
    .contact-form-container {
        /* No specific width needed if it's within a grid column */
    }
}

/* Even larger screens */
@media (min-width: 1024px) {
    .final-cta-content {
        gap: 4em; /* Increase gap for more space */
    }
    .final-cta-text h2 {
        font-size: 3rem; /* Slightly larger title on very large screens */
    }
}

/* Adjust padding for smaller screens if necessary */
@media (max-width: 767px) {
    #contacto-reservas {
        padding: 60px 0; /* Less padding on smaller screens */
    }
}
/* =================================================================== */
/* ===== MEDIA QUERIES Y AJUSTES FINALES (VERSIÓN CORREGIDA) ========= */
/* =================================================================== */

/* --- Media Queries para Responsividad --- */

/* -------------------------------------------------- */
/* @media (max-width: 991px) - Tablet y Móvil Grandes */
/* -------------------------------------------------- */
@media (max-width: 991px) {
    /* --- Header y Navegación --- */
    .header-contact-info {
        display: none; /* Oculta la información de contacto en tablet y móvil */
    }

    .navigation-bar {
        position: relative; /* Necesario para posicionar el menú desplegable */
    }

    .nav-menu {
        display: none; /* Oculto por defecto */
        position: absolute;
        top: 100%; /* Se posiciona justo debajo de la barra de navegación */
        left: 0;
        width: 100%;
        /* Usamos variables para los colores del branding */
        background-color: var(--color-white); /* Asumo un fondo blanco o claro para el menú */
        box-shadow: 0 4px 15px rgba(0,0,0,0.15); /* Sombra más pronunciada para el menú */
        flex-direction: column; /* Apila los elementos del menú verticalmente */
        align-items: stretch; /* Estira los elementos para ocupar todo el ancho */
        padding: 10px 0; /* Un poco menos de padding vertical */
        gap: 0; /* No hay espacio entre los ítems de lista */
        max-height: calc(100vh - 70px); /* Ajusta la altura máxima para no desbordar la pantalla */
        overflow-y: auto; /* Permite desplazamiento si el menú es muy largo */
        z-index: 1000; /* Asegura que el menú esté por encima de otros elementos */
    }

    .nav-menu.active {
        display: flex; /* Muestra el menú cuando está activo */
    }

    .nav-menu li {
        width: 100%; /* Cada ítem de lista ocupa todo el ancho del menú */
    }

    .nav-link {
        display: block; /* Hace que el enlace ocupe todo el espacio del li */
        padding: 1em 1.5em;
        text-align: left;
        /* Usa una variable para el borde si existe, o define un color */
        border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Borde más visible entre enlaces */
        font-size: 1.05rem; /* Ligeramente más grande para mejor legibilidad */
        color: var(--color-text-dark); /* Color de texto oscuro para el menú */
    }

    .nav-link:hover {
        background-color: rgba(0, 0, 0, 0.03); /* Fondo ligero al pasar el ratón */
    }

    .nav-link::after {
        display: none; /* Elimina la pseudo-clase de underline o indicador */
    }

    .nav-menu li:last-child .nav-link {
        border-bottom: none; /* Elimina el borde inferior del último elemento */
    }

    .cta-button-nav {
        margin: 15px; /* Margen alrededor del botón CTA en el menú móvil */
        width: calc(100% - 30px); /* Ajusta el ancho para el margen */
        /* Si este botón es un elemento de bloque, se centrará automáticamente con margin: auto */
        display: block; /* Asegura que ocupe todo el ancho disponible */
        text-align: center; /* Centra el texto del botón */
    }

    .mobile-nav-toggle {
        display: flex; /* Muestra el botón de hamburguesa */
        align-items: center; /* Centra el ícono verticalmente */
        justify-content: center; /* Centra el ícono horizontalmente */
    }

    /* --- Footer --- */
    .footer-content {
        /* Permite que las columnas del footer se ajusten, con un mínimo de 200px.
           Ideal para tabletas donde pueden caber 2 o 3 columnas. */
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 30px; /* Un poco más de espacio entre columnas en tabletas */
    }
}

/* ------------------------------------------- */
/* @media (max-width: 767px) - Teléfonos Móviles */
/* ------------------------------------------- */
/* Uso 767px para evitar solapamiento con 768px que podría ser un breakpoint de "tablet".
   Es una práctica común usar rangos como 992px-768px y 767px-481px. */
@media (max-width: 767px) {
    /* --- Top Bar --- */
    .top-bar .container {
        flex-direction: column; /* Apila los elementos de la barra superior */
        gap: 10px; /* Más espacio entre los elementos apilados */
        text-align: center;
        padding: 10px 15px; /* Ajusta el padding para móviles */
    }

    .top-bar-left, .top-bar-right {
        justify-content: center; /* Centra el contenido en móviles */
        width: 100%;
        gap: 1.2em; /* Espacio entre los elementos de la izquierda/derecha */
    }

    /* --- Hero Section --- */
    .hero-section {
        min-height: 70vh; /* Altura mínima ligeramente mayor para el hero */
        padding-top: 80px; /* Más padding superior para dejar espacio para el header fijo */
        padding-bottom: 60px; /* Más padding inferior */
    }
    
    .hero-title {
        font-size: clamp(2rem, 7vw, 3rem); /* Título más grande y responsivo en móvil */
        line-height: 1.2;
    }

    .hero-subtitle {
        font-size: clamp(1rem, 3.5vw, 1.2rem); /* Subtítulo responsivo */
    }

    /* --- Tour Cards --- */
    .tour-card-details {
        flex-direction: column; /* Apila el precio y el botón */
        align-items: flex-start; /* Alinea los elementos apilados a la izquierda */
        gap: 1em; /* Espacio entre el precio y el botón */
    }

    /* --- Testimonials --- */
    .testimonials-grid {
        grid-template-columns: 1fr; /* Una columna para los testimonios */
        gap: 30px; /* Espacio entre testimonios apilados */
    }

    .testimonial-cite {
        text-align: center; /* Centra la cita en móvil */
    }

    /* --- Footer --- */
    .footer-column ul a:hover, .footer-column ul a:focus {
    color: var(--color-white); /* Hover a BLANCO */
    padding-left: 5px; 
}
.footer-email:hover, .footer-whatsapp:hover, .footer-phone:hover {
    color: var(--color-white); /* Hover a BLANCO */
}

    .footer-column:not(.footer-brand) {
        padding-left: 0; /* Asegura que no haya padding extra si se centra */
    }

    .footer-logo, .social-icons {
        margin-left: auto;
        margin-right: auto; /* Centra los elementos a nivel de bloque */
    }

    .social-icons {
        justify-content: center; /* Centra los íconos si son flex */
    }
}

/* -------------------------------------------- */
/* @media (max-width: 480px) - Teléfonos Muy Pequeños */
/* -------------------------------------------- */
@media (max-width: 480px) {
    .container {
        width: 95%; /* Asegura que el contenedor tenga un ancho del 95% */
        padding-left: 15px; /* Un poco más de padding en los lados */
        padding-right: 15px;
    }

    /* Ya definido en 767px, pero si quieres un ajuste más fino, puedes sobreescribir aquí */
    /* .hero-title {
        font-size: clamp(1.6rem, 6vw, 2rem);
    } */

    .top-bar-left {
        flex-direction: column; /* Apila los elementos de la barra superior izquierda */
        gap: 8px; /* Espacio entre los elementos apilados */
    }
}
/* =================================================================== */
/* ===== AJUSTES Y ADICIONES ESPECÍFICAS (VERSIÓN CORREGIDA) ========= */
/* =================================================================== */

/* --- Animaciones para scroll --- */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    transition-delay: var(--animation-delay, 0s);
}

/* --- Iconos de la Barra Superior --- */
.top-bar-left i, .top-bar-right i {
    margin-right: 0.3em;
    /* En la barra superior (que es oscura) los iconos deben ser claros */
    color: var(--color-text-light-offwhite); /* BRANDING CORREGIDO */
    opacity: 0.8;
}
.social-icons-top a i {
    font-size: 1.2em;
    margin-right: 0;
}
.social-icons-top a:last-child i {
    margin-right: 0;
}

/* --- Lista de Highlights en Tarjetas de Tours --- */
.tour-highlights {
    list-style: none;
    padding-left: 0;
    margin-top: 0.8em;
    margin-bottom: 1em;
    font-size: clamp(0.85rem, 1.7vw, 0.95rem);
    color: var(--color-text-dark-subtle);
}
.tour-highlights li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.5em;
    line-height: 1.4;
}
.tour-highlights li i {
    margin-right: 0.6em;
    color: var(--color-primary-teal-dark); /* BRANDING CORREGIDO */
    font-size: 0.9em;
    margin-top: 0.2em;
}

/* =================================================================== */
/* ===== SECCIÓN INFO PARQUE (VERSIÓN MEJORADA Y DE MARCA) ========= */
/* =================================================================== */

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); /* Columnas un poco más flexibles */
    gap: clamp(25px, 4vw, 40px);
}

.info-card {
    background-color: var(--color-white);
    padding: clamp(25px, 4vw, 35px);
    border-radius: var(--border-radius-cards);
    box-shadow: var(--box-shadow-light);
    text-align: center;
    position: relative; /* Necesario para el borde animado */
    overflow: hidden;   /* Oculta el borde antes de la animación */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transiciones suaves */
}

/* --- MEJORA: Efecto de hover más dinámico y de marca --- */
.info-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px; /* Grosor del borde */
    background-color: var(--color-accent-brand-red); /* Color de la marca */
    transform: translateY(100%); /* Comienza oculto debajo de la tarjeta */
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.info-card:hover {
    transform: translateY(-8px); /* Eleva la tarjeta un poco más */
    box-shadow: var(--box-shadow-medium);
}

.info-card:hover::after {
    transform: translateY(0); /* Muestra el borde al pasar el ratón */
}

/* --- MEJORA: Contenedor circular para el icono --- */
.info-icon-wrapper {
    width: 70px;
    height: 70px;
    margin-inline: auto; /* Centra el círculo */
    margin-bottom: 1.2em;
    border-radius: 50%;
    background-color: #f0f2f2; /* Un fondo sutil para el círculo */
    display: grid;
    place-items: center; /* Centra perfectamente el icono dentro */
    transition: background-color 0.3s ease;
}

.info-card:hover .info-icon-wrapper {
    background-color: var(--color-primary-teal-dark); /* Cambia el fondo del círculo al color primario */
}

.info-icon {
    font-size: clamp(2.2rem, 5vw, 2.5rem);
    color: var(--color-primary-teal-dark); /* BRANDING CORREGIDO */
    transition: color 0.3s ease, transform 0.3s ease;
}

.info-card:hover .info-icon {
    color: var(--color-white); /* El icono se vuelve blanco sobre el fondo oscuro */
    transform: scale(1.1) rotate(5deg); /* Pequeña animación para el icono */
}

/* --- Título y texto de la tarjeta --- */
.info-card h4 {
    font-family: var(--font-family-sans);
    font-size: clamp(1.1rem, 2.2vw, 1.3rem);
    color: var(--color-primary-teal-dark); /* BRANDING CORREGIDO */
    margin-bottom: 0.5em;
    font-weight: 700;
}

.info-card p {
    font-size: clamp(0.9rem, 1.8vw, 1rem);
    color: var(--color-text-dark-subtle); /* BRANDING CORREGIDO */
    line-height: 1.6;
}

.info-card p a {
    font-weight: 600;
    color: var(--color-accent-brand-red); /* BRANDING CORREGIDO: Enlaces en rojo */
    text-decoration: underline;
    text-decoration-color: rgba(192, 57, 43, 0.3);
    transition: text-decoration-color 0.3s ease;
}

.info-card p a:hover {
    text-decoration-color: var(--color-accent-brand-red); /* Subrayado sólido al pasar el ratón */
}

/* =================================================================== */
/* ===== SECCIONES FINALES (CORREGIDAS Y MEJORADAS) ================ */
/* =================================================================== */

/* --- TESTIMONIAL SECTION --- */
/* Corrección: Se usa la variable correcta para el color de las estrellas. */
.testimonial-rating {
    color: var(--color-accent-gold-star);
}

/* --- BLOG TEASER CARD --- */
/* Mejora: Se limpian reglas vacías. Esta regla es para ajustar el icono en los botones de "Leer más". */
.blog-teaser-card .cta-button-secondary i {
    font-size: 0.9em;
    margin-left: 0.3em;
}

/* --- FAQ SECTION --- */
/* Mejora: Estilos completos y mejorados para un feedback visual más claro. */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.faq-item {
    background-color: var(--color-white);
    border-radius: var(--border-radius-soft);
    box-shadow: var(--box-shadow-light);
    border-left: 4px solid transparent; /* Borde oculto para la animación */
    transition: border-left-color 0.3s ease;
}
.faq-item:hover {
    border-left-color: var(--color-accent-brand-red); /* Muestra el borde rojo al pasar el ratón */
}
.faq-question { /* summary tag */
    padding: 1.2em 1.5em;
    font-weight: 600;
    color: var(--color-primary-teal-dark); /* BRANDING CORREGIDO */
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none; /* Oculta la flecha por defecto del <details> */
    transition: background-color 0.3s ease;
}
.faq-question::-webkit-details-marker { display: none; } /* Oculta la flecha en Webkit */

.faq-item[open] > .faq-question {
    background-color: var(--color-primary-teal-dark); /* BRANDING CORREGIDO: Fondo oscuro al abrir */
    color: var(--color-white); /* Texto blanco para contraste */
}

.faq-question::after { /* Indicador +/- */
    content: '+';
    font-size: 1.5em;
    font-weight: 300; /* Un plus más fino */
    line-height: 1;
    transition: transform 0.3s ease, color 0.3s ease;
    color: var(--color-accent-brand-red); /* BRANDING CORREGIDO */
}
.faq-item[open] > .faq-question::after {
    content: '−';
    transform: rotate(180deg);
    color: var(--color-accent-gold-star); /* BRANDING CORREGIDO: Icono dorado para contraste en fondo oscuro */
}
.faq-answer {
    padding: 0 1.5em 1.5em 1.5em;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text-dark-subtle);
    border-top: 1px solid var(--color-bg-top-bar);
}
.faq-answer p:last-child {
    margin-bottom: 0;
}


/* --- FINAL CTA SECTION --- */
.cta-buttons-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1em 1.5em; /* Espacio vertical y horizontal */
    margin-top: 1.5em;
}

/* Corrección: Asegura que los botones en esta sección usen estilos apropiados para un fondo oscuro/de imagen. */
.final-cta-section .hero-cta,
.final-cta-section .cta-button {
    margin: 0; /* Quitar margen si se usa gap */
    /* Hereda los estilos rojos de .cta-button, lo cual es correcto. */
}
.final-cta-section .cta-button-secondary {
    margin: 0;
    color: var(--color-white);
    border-color: var(--color-white);
}
.final-cta-section .cta-button-secondary:hover {
    background-color: var(--color-white);
    color: var(--color-primary-teal-dark);
}

/* =================================================================== */
/* ===== ESTILOS FINALES Y FUNCIONALES (VERSIÓN CORREGIDA) ========= */
/* =================================================================== */

/* --- FOOTER --- */
.footer-icon {
    margin-right: 0.5em;
    color: var(--color-accent-gold-star); /* BRANDING CORREGIDO: Iconos dorados para contraste */
    width: 16px;
    text-align: center;
}
.footer-bottom .fa-heart {
    color: var(--color-accent-brand-red); /* BRANDING CORREGIDO: Corazón rojo */
    font-size: 0.9em;
}

/* --- AJUSTES DE TIPOGRAFÍA --- */
/* Esta sección estaba bien definida y no requiere cambios de lógica, solo es una guía de implementación. */
/* Se mantiene como referencia para la jerarquía de pesos de fuente. */
.hero-title {
    font-weight: 700;
}
.nav-link {
    font-weight: 600;
}
.cta-button, .cta-button-secondary, .cta-button-nav {
    font-weight: 700;
}
.section-title, .section-title-light {
    font-weight: 700;
}
h3.feature-title, .info-card h4, .tour-card-title, .blog-teaser-card .tour-card-title {
    font-weight: 700;
}
.stat-number {
    font-weight: 800;
}

/* --- MEDIA QUERIES ADICIONALES --- */
/* Esta sección estaba bien y no requiere cambios. */
@media (max-width: 768px) {
    .info-grid {
        grid-template-columns: 1fr;
    }
    .cta-buttons-group {
        flex-direction: column;
        align-items: center;
    }
    .final-cta-section .hero-cta,
    .final-cta-section .cta-button-secondary {
        width: 100%;
        max-width: 320px;
    }
}

/* --- ESTILOS PARA FUNCIONES JS Y ANIMACIONES --- */
.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

.typing-cursor {
    animation: blink 0.7s infinite;
    font-weight: normal;
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.read-more-link {
    cursor: pointer; /* Regla limpia, se mantiene */
}

.custom-tooltip {
    position: absolute;
    background-color: var(--color-text-dark-charcoal); /* BRANDING CORREGIDO */
    color: var(--color-white);
    padding: 6px 10px;
    border-radius: var(--border-radius-soft);
    font-size: 0.85rem;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
    white-space: nowrap;
}

/* --- ACCESIBILIDAD: REDUCIR MOVIMIENTO --- */
/* Esta sección es funcional y no se debe alterar su lógica. */
body.reduced-motion .animate-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}
body.reduced-motion .scroll-hint i,
body.reduced-motion .typing-cursor {
    animation: none !important;
    opacity: 1 !important;
}

/* --- REGLA LIMPIA --- */
/* Se eliminó el comentario vacío. Esta regla asegura el espaciado debajo del botón del hero. */
.hero-content .hero-cta {
    margin-bottom: 1.5em;
}
/* =================================================================== */
/* ===== POP-UPS, MODALES Y FILTROS (VERSIÓN FINAL CORREGIDA) ====== */
/* =================================================================== */

/* --- Estilos Generales para Overlays --- */
.whatsapp-popup-overlay,
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(52, 73, 94, 0.7); /* BRANDING CORREGIDO: usa el --color-text-dark-charcoal con opacidad */
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.35s ease-in-out;
    pointer-events: none;
}
.whatsapp-popup-overlay.active,
.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* --- Estilos para Pop-ups y Modales --- */
.whatsapp-popup,
.booking-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    background-color: var(--color-bg-light-gray); /* BRANDING CORREGIDO */
    border-radius: var(--border-radius-cards);
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    z-index: 10001;
    width: 90%;
    max-width: 500px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none;
}
.whatsapp-popup.active,
.booking-modal.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}
.whatsapp-popup-content,
.modal-content {
    position: relative;
    padding: clamp(25px, 5vw, 45px);
    max-height: 90vh;
    overflow-y: auto;
}

/* --- Botón de Cierre para Modales y Pop-ups --- */
.whatsapp-popup-close,
.modal-close {
    position: absolute;
    top: 10px; right: 15px;
    background: transparent;
    border: none;
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1;
    color: var(--color-text-dark-subtle);
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
}
.whatsapp-popup-close:hover,
.modal-close:hover {
    color: var(--color-accent-brand-red); /* BRANDING CORREGIDO */
    transform: rotate(90deg);
}

/* --- Contenido del Pop-up de WhatsApp --- */
.popup-logo {
    max-width: 100px; margin: 0 auto 1.2em auto;
}
.popup-title {
    font-family: var(--font-family-serif);
    color: var(--color-primary-teal-dark); /* BRANDING CORREGIDO */
    font-size: clamp(1.3rem, 4vw, 1.7rem);
    font-weight: 700; margin-bottom: 0.7em; line-height: 1.3;
}
.popup-title .highlight-text {
    color: var(--color-accent-brand-red-dark); /* BRANDING CORREGIDO */
}
.popup-text {
    font-size: clamp(0.9rem, 2.5vw, 1.05rem);
    color: var(--color-text-dark-subtle);
    line-height: 1.65; margin-bottom: 1.8em;
}
.popup-text strong {
    font-weight: 700;
    color: var(--color-primary-teal-dark); /* BRANDING CORREGIDO */
}
.popup-text .highlight-text-alt {
    background-color: var(--color-accent-gold-star); /* BRANDING CORREGIDO */
    color: var(--color-primary-teal-dark);
    padding: 0.2em 0.4em; border-radius: var(--border-radius-soft);
    font-weight: 700; white-space: nowrap;
}
.popup-cta-button {
    display: inline-flex; width: auto; min-width: 260px;
    padding: 0.9em 1.8em; font-size: clamp(1rem, 2.8vw, 1.15rem);
    font-weight: 700;
    background-color: #25D366; border-color: #25D366;
    color: var(--color-white);
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3);
    border-radius: var(--border-radius-buttons);
}
.popup-cta-button:hover,
.popup-cta-button:focus {
    background-color: #1DAE52; border-color: #1DAE52;
    color: var(--color-white); transform: translateY(-2px) scale(1.03);
}
.popup-cta-button i {
    margin-right: 0.7em; font-size: 1.4em;
}
.popup-subtext {
    font-size: 0.9rem; color: var(--color-text-dark-subtle);
    margin-top: 1.2em; opacity: 0.9;
}

/* --- Contenido del Modal de Reserva Rápida --- */
.tour-sidebar-h3 {
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    color: var(--color-primary-teal-dark); /* BRANDING CORREGIDO */
    margin-bottom: 1.2em;
    text-align: center;
    border-bottom: 2px solid var(--color-accent-brand-red); /* BRANDING CORREGIDO */
    padding-bottom: 0.6em;
}
.modal-whatsapp-link {
    font-weight: bold;
    color: var(--color-primary-teal-dark); /* BRANDING CORREGIDO */
    display: inline-flex; align-items: center;
    gap: 0.3em; margin-top: 0.5em;
}
.modal-whatsapp-link i {
    font-size: 1.2em;
}

/* --- Estilos para Filtros de Listado --- */
.filters-container {
    display: flex; flex-wrap: wrap; justify-content: center;
    align-items: center;
    gap: 1.5em 2.5em;
    margin-bottom: 3.5em; padding: 1.5em;
    background-color: var(--color-white); /* BRANDING CORREGIDO: Fondo más limpio */
    border: 1px solid #e0d8cf;
    border-radius: var(--border-radius-cards);
}
.filter-group {
    display: flex; align-items: center; gap: 0.8em;
}
.filter-group label {
    font-weight: 600; font-size: 0.95rem;
    color: var(--color-text-dark-charcoal); /* BRANDING CORREGIDO */
    white-space: nowrap;
}
.filter-group i {
    color: var(--color-primary-teal-dark); /* BRANDING CORREGIDO */
    font-size: 1.1em;
}
.filter-group select {
    padding: 0.6em 2em 0.6em 1em;
    border-radius: var(--border-radius-soft);
    border: 1px solid #ccc;
    font-family: var(--font-family-sans);
    font-size: 1rem; background-color: var(--color-white);
    cursor: pointer;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005953' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); /* BRANDING CORREGIDO: Flecha del color de la marca */
    background-repeat: no-repeat;
    background-position: right 0.7em top 50%;
    background-size: 1em;
    transition: border-color 0.2s ease;
}
.filter-group select:hover {
    border-color: var(--color-primary-teal-dark); /* BRANDING CORREGIDO */
}

/* --- Solo para lectores de pantalla --- */
.sr-only {
	border: 0; clip: rect(0, 0, 0, 0); height: 1px;
	margin: -1px; overflow: hidden; padding: 0;
	position: absolute; width: 1px;
}

/* --- Media Queries para Pop-ups/Modales --- */
@media (max-width: 500px) {
    .whatsapp-popup, .booking-modal {
        padding: 30px 20px;
        max-width: calc(100% - 30px);
    }
    .popup-title { font-size: 1.25rem; }
    .popup-text { font-size: 0.88rem; }
    .popup-cta-button {
        width: 100%; min-width: auto; font-size: 1rem;
    }
    .popup-text .highlight-text-alt {
        white-space: normal;
    }
}
/* =================================================================== */
/* ===== CORRECCIÓN FINAL: HEADER, NAVEGACIÓN Y TÍTULO HERO ========= */
/* =================================================================== */

/* --- 1. Corrección del Layout de la Barra de Navegación --- */
.navigation-bar {
    display: flex;
    justify-content: space-between; /* Alinear logo a la izquierda y menú/hamburguesa a la derecha */
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 20px; /* Añadir un espacio entre el logo y el menú */
}

/* El logo no debe crecer, debe mantener su tamaño */
.logo-link {
    flex-shrink: 0;
}

/* El menú debe ocupar el espacio restante y alinearse a la derecha */
.nav-menu {
    display: flex;
    align-items: center;
    margin-left: auto; /* CLAVE: Empuja el menú hacia la derecha en desktop */
    gap: clamp(12px, 2vw, 30px);
}

/* --- 2. Corrección del Color del Título del Hero --- */
.hero-title {
    color: var(--color-white); /* CLAVE: Asegura que el color del texto sea blanco */
    text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.6); /* Sombra más pronunciada para mejorar legibilidad */
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 700;
}

/* El texto destacado dentro del título sigue usando el color rojo de la marca */
.hero-title .highlight-text {
    color: var(--color-accent-brand-red);
}

/* --- 3. Corrección del Color del Subtítulo del Hero --- */
.hero-subtitle {
    color: var(--color-text-light-offwhite); /* Asegura que el subtítulo también sea claro */
    opacity: 0.95;
    font-size: clamp(1.05rem, 2.2vw, 1.4rem);
    font-weight: 400;
    margin-bottom: 2em;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}
/* --- Tarjetas de Tour / Blog --- */
.tour-card, .blog-teaser-card {
    background-color: var(--color-white);
    border-radius: var(--border-radius-cards);
    box-shadow: var(--box-shadow-light);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}
.tour-card:hover, .blog-teaser-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--box-shadow-strong);
}
.tour-card-image-wrapper {
    position: relative; overflow: hidden; aspect-ratio: 16 / 10;
}
.tour-card-image {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.4s ease;
}
.tour-card:hover .tour-card-image,
.blog-teaser-card:hover .tour-card-image {
    transform: scale(1.05);
}
.tour-card-content {
    padding: clamp(20px, 3vw, 30px);
    display: flex; flex-direction: column; flex-grow: 1;
}
.tour-card-title {
    font-size: clamp(1.2rem, 2.5vw, 1.6rem); margin-bottom: 0.5em;
}
.tour-card-title-link {
    color: var(--color-primary-teal-dark); /* BRANDING CORREGIDO */
}
.tour-card-title-link:hover {
    color: var(--color-accent-brand-red); /* BRANDING CORREGIDO */
}
.tour-card-title-link:focus-visible {
    outline: 2px dashed var(--color-primary-teal-dark); /* BRANDING CORREGIDO */
    outline-offset: 2px; border-radius: var(--border-radius-soft);
}
.tour-card-excerpt, .blog-teaser-card .tour-card-excerpt {
    font-size: clamp(0.9rem, 1.8vw, 1rem);
    color: var(--color-text-dark-subtle);
    margin-bottom: 1em; flex-grow: 1;
}
.tour-card-details {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: auto; padding-top: 1em;
    border-top: 1px solid var(--color-bg-top-bar); /* BRANDING CORREGIDO */
}
.tour-card-price {
    font-size: clamp(1.1rem, 2.2vw, 1.4rem); font-weight: 700;
    color: var(--color-accent-brand-red-dark); /* BRANDING CORREGIDO */
}
.blog-teaser-date {
    font-size: 0.85rem; color: var(--color-text-dark-subtle);
    margin-bottom: 0.5em; display: block; font-weight: 500;
}
.section-cta-container {
    text-align: center; margin-top: clamp(30px, 5vw, 50px);
}
/* =================================================================== */
/* ===== ESTILOS PARA EL SLIDER DE TOURS (SWIPER.JS) =============== */
/* =================================================================== */

#tours-destacados .swiper-pagination-bullet-active {
    background-color: var(--color-white); /* El punto activo ahora es BLANCO */
    transform: scale(1.2);
}

#tours-destacados .swiper-slide {
    height: auto; /* Permite que la tarjeta determine la altura */
    display: flex; /* Ayuda a alinear el contenido */
}

/* Asegura que las tarjetas ocupen toda la altura del slide */
#tours-destacados .swiper-slide .tour-card {
    height: 100%;
    width: 100%;
}

/* Estilo de las flechas de navegación */
#tours-destacados .swiper-button-next,
#tours-destacados .swiper-button-prev {
    color: var(--color-white);
    background-color: rgba(192, 57, 43, 0.7); /* Rojo de la marca con transparencia */
    border-radius: 50%;
    width: 44px;
    height: 44px;
    transition: background-color 0.3s ease;
}

#tours-destacados .swiper-button-next:hover,
#tours-destacados .swiper-button-prev:hover {
    background-color: var(--color-accent-brand-red); /* Rojo sólido al pasar el ratón */
}

#tours-destacados .swiper-button-next::after,
#tours-destacados .swiper-button-prev::after {
    font-size: 18px; /* Tamaño del icono de la flecha */
    font-weight: 700;
}

/* Estilo de la paginación (puntos) */
#tours-destacados .swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, 0.5);
    width: 10px;
    height: 10px;
    opacity: 1;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

#tours-destacados .swiper-pagination-bullet-active {
    background-color: var(--color-accent-gold-star); /* Dorado para el punto activo */
    transform: scale(1.2);
}
/* =============================================
   BOTONES (CTAs) - VERSIÓN CORREGIDA Y REFORZADA
   ============================================= */

/* --- Estilos Base para Todos los Botones --- */
.cta-button, .cta-button-secondary, .cta-button-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7em;
    padding: 0.85em 2em;
    font-family: var(--font-family-sans);
    font-size: 1rem;
    font-weight: 700;
    border-radius: var(--border-radius-buttons);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: var(--transition-main);
    box-shadow: var(--box-shadow-light);
    cursor: pointer;
    border: 2px solid transparent;
    text-align: center;
}

/* --- Botón Primario (ROJO) --- */
.cta-button {
    background-color: var(--color-accent-brand-red);
    color: var(--color-white);
    border-color: var(--color-accent-brand-red);
}
.cta-button:hover, .cta-button:focus {
    background-color: var(--color-accent-brand-red-dark);
    border-color: var(--color-accent-brand-red-dark);
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-medium);
}

/* --- Botón Secundario (OUTLINE VERDE) --- */
.cta-button-secondary {
    background-color: transparent;
    color: var(--color-primary-teal-dark);
    border-color: var(--color-primary-teal-dark);
}
.cta-button-secondary:hover, .cta-button-secondary:focus {
    background-color: var(--color-primary-teal-dark);
    color: var(--color-white);
    transform: translateY(-2px);
}

/* --- Botón de Navegación (VERDE SÓLIDO) --- */
.cta-button-nav {
    background-color: var(--color-primary-teal);
    color: var(--color-white) !important; /* Importante para anular estilos de enlace */
    border-color: var(--color-primary-teal);
    padding: 0.6em 1.5em;
    font-size: 0.9rem;
}
.cta-button-nav:hover, .cta-button-nav:focus {
    background-color: var(--color-primary-teal-dark);
    border-color: var(--color-primary-teal-dark);
}

/* 
 * =======================================================
 * ! REGLAS DE ANULACIÓN ESPECÍFICAS - ¡AQUÍ ESTÁ LA MAGIA!
 * =======================================================
*/

/* 
 * PROBLEMA 1: Botones del formulario de contacto en index.html se ven blancos.
 * SOLUCIÓN: Forzar los colores correctos para los botones dentro del formulario.
*/
.contact-form-container .cta-button {
    background-color: var(--color-accent-brand-red);
    color: var(--color-white);
    border-color: var(--color-accent-brand-red);
}
.contact-form-container .cta-button-secondary {
    background-color: transparent;
    color: var(--color-primary-teal-dark);
    border-color: var(--color-primary-teal-dark);
}
.contact-form-container .cta-button-secondary:hover {
    background-color: var(--color-primary-teal-dark);
    color: var(--color-white);
}

/* 
 * PROBLEMA 2: Botón "Pagar con PayPal" en el widget flotante se ve mal.
 * SOLUCIÓN: Apuntar directamente a ese botón y darle el estilo correcto.
 * La clase es `.tour-sticky-cta .cta-button` según tu HTML.
*/
.tour-sticky-cta .cta-button {
    background-color: var(--color-accent-brand-red);
    color: var(--color-white);
    border-color: var(--color-accent-brand-red);
    padding: 0.8em 1.5em; /* Padding consistente */
    font-size: 1rem;      /* Tamaño de fuente consistente */
}
.tour-sticky-cta .cta-button:hover {
    background-color: var(--color-accent-brand-red-dark);
    border-color: var(--color-accent-brand-red-dark);
}
/* =============================================
   ! CORRECCIÓN FINAL Y DEFINITIVA PARA BOTONES
   ============================================= */

/* 
 * Esta regla fuerza que CUALQUIER elemento con la clase .cta-button
 * tenga el texto de color blanco. El !important asegura que esta regla
 * gane sobre cualquier otra que esté causando el conflicto.
*/
.cta-button {
    color: var(--color-white) !important;
}

/*
 * Adicionalmente, forzamos que el botón de "Pagar con PayPal" en el widget
 * tenga el color de fondo correcto y el texto blanco.
*/
.tour-sticky-cta .cta-button {
    background-color: var(--color-accent-brand-red);
    color: var(--color-white) !important;
    border-color: var(--color-accent-brand-red);
}
/* =============================================
   LANGUAGE SWITCHER STYLES
   ============================================= */
.language-switcher {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 15px; /* Espacio para separarlo de los iconos sociales */
}

.language-switcher button {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.8);
    padding: 3px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
}

.language-switcher button:hover {
    background: white;
    color: var(--color-primary-teal-dark); /* Color del texto al hacer hover */
}

/* =============================================
   LANGUAGE SWITCHER STYLES (REFINED VERSION)
   ============================================= */
.language-switcher {
    display: flex;
    align-items: center;
    gap: 8px; /* Un poco más de espacio entre botones */
    margin-left: 15px; 
}

/* Estilo base para ambos botones */
.language-switcher button {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: rgba(255, 255, 255, 0.85);
    padding: 5px 14px; /* Ajuste para mejor proporción */
    font-size: 0.8rem;
    font-weight: 700; /* Texto en negrita para mejor legibilidad */
    cursor: pointer;
    border-radius: 50px; /* Forma de píldora para consistencia con la marca */
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    line-height: 1;
}

/* Efecto hover SÓLO para el botón inactivo */
.language-switcher button:not(.active):hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.8);
    color: white;
}

/* Estilo refinado para el botón ACTIVO */
.language-switcher button.active {
    background-color: white;
    border-color: white;
    color: var(--color-primary-teal-dark); /* Color más elegante y corporativo */
    cursor: default;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra sutil para darle profundidad */
}
<style>
    /* Estilos Generales de la Página (Sin cambios) */
    .tour-page-header { padding: clamp(30px, 6vw, 60px) 0; background-color: var(--color-bg-light); text-align: center; border-bottom: 1px solid var(--color-black-alpha-15); }
    .tour-page-title { font-size: clamp(2rem, 5vw, 3.2rem); color: var(--color-primary-green-dark); margin-bottom: 0.2em; }
    .tour-page-breadcrumb { font-size: 0.9rem; color: var(--color-text-dark-subtle); }
    .tour-page-breadcrumb a { color: var(--color-primary-green); text-decoration: none; }
    .tour-page-breadcrumb a:hover { text-decoration: underline; }

    /* ---- ÁREA DE CORRECCIÓN PRINCIPAL ---- */

    .tour-content-layout {
        display: grid;
        grid-template-columns: 1fr; /* Por defecto para móvil */
        gap: clamp(30px, 5vw, 50px);
        padding: clamp(30px, 5vw, 60px) 0;
    }

    @media (min-width: 992px) {
        .tour-content-layout {
            /* 1. Definimos las columnas para escritorio */
            grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
            
            /* 2. (LA CLAVE) Alineamos los items al inicio. Esto evita que el sidebar
                  se estire a la altura del contenido principal, permitiendo que 'sticky'
                  funcione dentro de su propio espacio vertical. */
            align-items: start;
        }
    }

    .tour-main-details {
        /* Esta propiedad puede a veces interferir, pero usualmente es segura.
           La mantenemos para contener elementos internos. */
        overflow: hidden; 
    }

    .tour-sidebar {
        background-color: #fdfaf6;
        padding: clamp(25px, 3vw, 35px);
        border-radius: var(--border-radius-cards);
        box-shadow: var(--box-shadow-light);

        /* 3. Definimos el comportamiento 'sticky' para el sidebar */
        position: sticky;
        top: 120px; /* Distancia desde la parte superior al pegarse */

        /* 4. (MEJORA) Evitamos que el sidebar sea más alto que la ventana
           y se corte por abajo en pantallas de baja altura. */
        max-height: calc(100vh - 140px); /* 120px de 'top' + 20px de margen */
        overflow-y: auto; /* Si el contenido del sidebar es muy largo, se podrá hacer scroll DENTRO de él */
    }

    /* 5. En móvil, volvemos a la posición estática normal. */
    @media (max-width: 991.98px) {
        .tour-sidebar {
            position: static;
            margin-top: 2em;
            max-height: none; /* Reseteamos la altura máxima */
            overflow-y: visible; /* Reseteamos el overflow */
        }
    }
    /* =============================================
   PULIDO FINAL RESPONSIVE
   ============================================= */

/* 1. Corrección del Skip Link de Accesibilidad */
.skip-link {
    position: absolute;
    top: -100px; /* Lo movemos muy arriba para que esté bien oculto */
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-accent-brand-red);
    color: var(--color-white);
    padding: 12px 24px;
    z-index: 10000;
    border-radius: 0 0 var(--border-radius-soft) var(--border-radius-soft);
    transition: top 0.3s ease-in-out;
    font-weight: 600;
}
/* Esta regla asegura que SÓLO se muestre cuando se enfoca con el teclado */
.skip-link:focus {
    top: 0;
}


/* 2. Corrección del Hero Section en pantallas muy pequeñas */
@media (max-width: 360px) {
    .hero-section {
        /* Hacemos la altura más flexible */
        height: auto;
        min-height: 90vh; /* Usamos vh para que se adapte mejor a la altura del dispositivo */
        padding-top: clamp(60px, 20vw, 100px); /* Padding dinámico */
        padding-bottom: clamp(60px, 20vw, 100px);
    }

    .hero-title {
        font-size: clamp(1.8rem, 10vw, 2.2rem); /* Hacemos el título un poco más pequeño */
        line-height: 1.2;
    }

    .hero-subtitle {
        font-size: clamp(0.9rem, 4vw, 1rem); /* Hacemos el subtítulo un poco más pequeño */
    }
}
    /* ---- FIN DEL ÁREA DE CORRECCIÓN ---- */


    /* Resto de Estilos (Sin cambios) */
    .tour-sidebar h3 { font-size: clamp(1.4rem, 3vw, 1.8rem); color: var(--color-primary-green); margin-bottom: 1.2em; text-align: center; border-bottom: 2px solid var(--color-accent-gold); padding-bottom: 0.6em; }
    .tour-image-gallery { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 200px); gap: 15px; margin-bottom: 2.5em; min-height: 415px; }
    .tour-image-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--border-radius-cards); cursor: pointer; transition: all 0.3s ease; position: relative; }
    .tour-image-gallery img:hover { transform: scale(1.03); box-shadow: var(--box-shadow-strong); z-index: 10; }
    .tour-image-gallery img:first-child { grid-column: span 2; grid-row: span 2; }
    @media (max-width: 768px) {
        .tour-image-gallery { grid-template-columns: 1fr; grid-template-rows: auto; gap: 10px; min-height: auto; }
        .tour-image-gallery img:first-child { grid-column: span 1; grid-row: span 1; height: 300px; }
        .tour-image-gallery img { height: 180px; }
    }
    #tourDescriptionContainer h2 { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--color-primary-green); margin-top: 1.8em; margin-bottom: 0.8em;}
    #tourDescriptionContainer h3 { font-size: clamp(1.3rem, 2.8vw, 1.7rem); color: var(--color-primary-green-dark); margin-top: 1.5em; margin-bottom: 0.7em;}
    #tourDescriptionContainer p, #tourDescriptionContainer ul, #tourDescriptionContainer ol { margin-bottom: 1.3em; line-height: 1.8; font-size: clamp(1rem, 2.1vw, 1.1rem); }
    #tourDescriptionContainer ul { list-style: none; padding-left: 0; }
    #tourDescriptionContainer ul li { padding-left: 1.8em; position: relative; margin-bottom: 0.7em;}
    #tourDescriptionContainer ul li i { position: absolute; left: 0; top: 0.3em; color: var(--color-primary-green); font-size: 1em; }
    #tourDescriptionContainer a { color: var(--color-accent-gold-dark); font-weight: 600; text-decoration: underline;}
    #tourDescriptionContainer a:hover { text-decoration: none; color: var(--color-primary-green-dark); }
    .tour-quick-details { margin-bottom: 1.5em; padding-bottom: 1em; border-bottom: 1px dashed var(--color-black-alpha-15); }
    .tour-quick-details p { margin-bottom: 0.6em; font-size: 1rem; }
    .tour-quick-details strong { color: var(--color-text-dark); font-weight: 600; }
    .tour-price-display { font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: 700; color: var(--color-accent-gold-dark); margin-top: 0.5em; margin-bottom: 0.8em; text-align: center; }
    .tour-price-display small { font-size: 0.75rem; font-weight: 400; color: var(--color-text-dark-subtle); display: block; line-height: 1.3; }
    .payment-message { margin-top: 1.2em; text-align: center; font-weight: 600; padding: 12px; border-radius: var(--border-radius-soft); font-size: 0.95rem; }
    .payment-success { color: var(--color-primary-green-dark); background-color: #d4edda; border: 1px solid #c3e6cb; }
    .payment-error { color: #721c24; background-color: #f8d7da; border: 1px solid #f5c6cb; }
    .contact-form .form-group { margin-bottom: 1em; }
    .contact-form label { display: block; font-weight: 600; margin-bottom: 0.5em; color: var(--color-text-dark); font-size: 0.9rem; }
    .contact-form input[type="date"],
    .contact-form input[type="number"] { width: 100%; padding: 0.7em 0.9em; border: 1px solid #ccc; border-radius: var(--border-radius-soft); font-family: var(--font-family-sans); font-size: 1rem; }
    .loading-message { text-align:center; padding: 1em; font-style: italic; color: var(--color-text-dark-subtle); }
    .lightbox { display: none; position: fixed; z-index: 10010; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.9); }
    .lightbox-content { margin: auto; display: block; width: 80%; max-width: 700px; animation-name: zoom; animation-duration: 0.6s; }
    @keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} }
    .lightbox-close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; }
    .lightbox-close:hover, .lightbox-close:focus { color: #bbb; text-decoration: none; cursor: pointer; }
</style>