/* ==========================================================================
   VARIABLES - DESIGN SYSTEM
   ========================================================================== */
:root {
    --color-primary: #537364;
    --color-primary-container: #3b5a4c;
    --color-secondary: #294037;
    --color-background: #faf9f7;
    --color-on-surface: #1a1c1b;
    --color-on-surface-variant: #414844;

    --radius-btn: 32px;
    --nav-shadow: 0px 20px 40px rgba(41, 64, 55, 0.05);
}

html {
    scroll-behavior: smooth;
}

/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--color-background);
    font-family: 'Hanken Grotesk', sans-serif;
    color: var(--color-on-surface);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Tipografías */
.font-display {
    font-family: 'EB Garamond', serif;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

h1.font-display {
    font-size: 64px;
}

h2.font-display {
    font-size: 48px;
}

.font-body-lg {
    font-size: 18px;
    line-height: 1.6;
    font-weight: 400;
}

.font-label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.text-primary {
    color: var(--color-primary);
}

.text-on-surface-variant {
    color: var(--color-on-surface-variant);
}

.text-white {
    color: #ffffff;
}

.text-white-90 {
    color: rgba(255, 255, 255, 0.9);
}

/* ==========================================================================
   NAVBAR (Glassmorphism)
   ========================================================================== */
.navbar-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    justify-content: center;
    padding: 32px 40px 0 40px;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1280px;
    padding: 16px 28px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    box-shadow: var(--nav-shadow);
    transition: all 0.4s ease;
}

.nav-blur {
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
}

.navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0px 20px 40px rgba(41, 64, 55, 0.1);
}

.navbar-logo .text-primary {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 32px;
}

.nav-link {
    text-decoration: none;
    color: var(--color-on-surface-variant);
    font-weight: 600;
    padding-bottom: 6px;
    position: relative;
    transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-primary);
}

.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-primary);

    /* ESTADO INICIAL: Oculto en el centro (escala 0) */
    transform: scaleX(0);
    transform-origin: center;

    /* Transición fluida de estiramiento */
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 24px;
}

.lang-selector {
    cursor: pointer;
    transition: color 0.3s ease;
}

.lang-selector:hover {
    color: var(--color-primary);
}

.btn {
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary {
    background-color: var(--color-primary);
    color: #ffffff;
    padding: 12px 32px;
    border-radius: var(--radius-btn);
}

.btn-primary:hover {
    background-color: var(--color-primary-container);
    transform: scale(1.02);
}

/* ==========================================================================
   BOTÓN DE IDIOMA MINIMALISTA (HERMANO DE CONTACTO)
   ========================================================================== */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.lang-btn-container {
    position: relative;
}

/* Estilo del botón hermano */
.btn-lang-toggle {
    background-color: rgba(83, 115, 100, 0.03);
    border: 0px solid rgba(41, 64, 55, 0.15);
    color: var(--color-on-surface-variant);
    height: 44px;
    padding: 0 16px;
    border-radius: 50px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-lang-toggle:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background-color: rgba(83, 115, 100, 0.03);
}

/* El texto que reemplaza al ícono cuando seleccionás */
.lang-text-avatar {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* Icono oficial de Google dentro del botón */
.btn-lang-toggle .material-symbols-outlined {
    font-size: 20px;
    color: inherit;
}

/* Menú Desplegable Flotante (Se abre justo abajo del botón) */
.lang-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background-color: #ffffff;
    border: 1px solid rgba(41, 64, 55, 0.08);
    border-radius: 14px;
    padding: 6px;
    list-style: none;
    box-shadow: 0px 15px 40px rgba(41, 64, 55, 0.08);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 120px;
    z-index: 60;

    /* Estado oculto */
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
    pointer-events: none;
    transform-origin: top right;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.lang-dropdown-menu.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.lang-option {
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 11px;
    letter-spacing: 0.05em;
    color: var(--color-on-surface-variant);
    transition: all 0.2s ease;
}

.lang-option:hover,
.lang-option.active {
    background-color: rgba(83, 115, 100, 0.06);
    color: var(--color-primary);
}

.btn-lang-toggle::before {
    content: attr(data-tooltip);
    /* Lee dinámicamente el texto del HTML */
    position: absolute;
    bottom: calc(100% + 12px);
    /* Se posiciona arriba del botón */
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background-color: var(--color-secondary);
    /* Fondo oscuro a tono con tu marca */
    color: #ffffff;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.05em;
    padding: 6px 12px;
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0px 4px 12px rgba(41, 64, 55, 0.15);

    /* Estado inicial oculto */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* La pequeña flecha del tooltip */
.btn-lang-toggle::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: var(--color-secondary) transparent transparent transparent;

    /* Estado inicial oculto */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover: El tooltip y la flecha aparecen subiendo sutilmente */
.btn-lang-toggle:hover::before,
.btn-lang-toggle:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Desactivar el tooltip cuando el menú de idiomas está abierto para que no estorbe */
.btn-lang-toggle:has(+ .lang-dropdown-menu.is-open):hover::before,
.btn-lang-toggle:has(+ .lang-dropdown-menu.is-open):hover::after {
    opacity: 0;
}


/* ==========================================================================
   HAMBURGER MENÚ Y OVERLAY RESPONSIVE
   ========================================================================== */
.hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    gap: 5px;
    padding: 0;
    z-index: 60;
}

.hamburger-line {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--color-on-surface-variant);
    border-radius: 2px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.3s ease;
    transform-origin: center;
}

.hamburger-btn.is-active .hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger-btn.is-active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger-btn.is-active .hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Overlay fullscreen */
.nav-mobile-overlay {
    position: fixed;
    inset: 0;
    z-index: 45;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-20px);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-mobile-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.nav-mobile-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    text-align: center;
}

.nav-mobile-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0;
}

.nav-mobile-links .nav-link {
    font-size: 28px;
    font-weight: 500;
    color: var(--color-on-surface);
    padding: 8px 0;
    display: block;
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-mobile-links .nav-link:hover {
    color: var(--color-primary);
}

.nav-mobile-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* Bloqueo de scroll */
body.no-scroll {
    overflow: hidden !important;
    height: 100vh !important;
}

/* Contenedor que agrupa traducción + hamburguesa en mobile */
.nav-mobile-group {
    display: none;
}

/* Oculto en desktop, visible junto al hamburger en mobile */
.mobile-lang-toggle {
    display: block;
}

/* --- BREAKPOINT ≤ 900px: ocultar nav-actions, mostrar hamburguesa --- */
@media (max-width: 900px) {
    .navbar .nav-actions {
        display: none;
    }

    .nav-mobile-group {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .hamburger-btn {
        display: flex;
    }
}

/* -- > 600px: ocultar links del menú mobile (solo aparecen ≤ 600px) -- */
@media (min-width: 601px) {
    .nav-mobile-links {
        display: none;
    }
}

/* --- BREAKPOINT ≤ 600px: ocultar nav-links --- */
@media (max-width: 600px) {
    .navbar .nav-links {
        display: none;
    }

    .navbar-wrapper {
        padding: 16px 16px 0 16px;
    }

    .navbar {
        padding: 12px 20px;
    }
}

/* ==========================================================================
   HERO CINEMÁTICO DE ALTO CONTRASTE Y NAVEGACIÓN
   ========================================================================== */
.hero-container {
    position: relative;
    width: 100%;
    height: 100vh;
    /* Ocupa exactamente el 100% del viewport */
    overflow: hidden;
}

.carousel {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 1;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-slide.active {
    opacity: 1;
    z-index: 2;
}

.slide-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.03);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.7) 0%,
            rgba(0, 0, 0, 0.25) 50%,
            rgba(0, 0, 0, 0.1) 100%);
    /* Efecto cinematográfico: oscurece la base para dar profundidad y
       atenúa el brillo general para que el texto destaque */
}

.hero-content {
    position: absolute;
    inset: 0;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    z-index: 4;
}

.hero-content h1,
.hero-content h2 {
    color: #ffffff;
    /* Sombras sutiles pero multicapa: una definida para el borde y otra difuminada para el contraste */
    text-shadow:
        0px 2px 4px rgba(0, 0, 0, 0.5),
        0px 4px 20px rgba(0, 0, 0, 0.4),
        0px 10px 40px rgba(0, 0, 0, 0.6);
    text-transform: capitalize;
}

.hero-content p {
    margin-top: 24px;
    color: rgba(255, 255, 255, 0.95);
    /* Fondo negro ultra translúcido (lino sutil) que solo abraza al texto */
    background-color: rgba(0, 0, 0, 0.25);
    padding: 12px 20px;
    border-radius: 12px;
    backdrop-filter: blur(4px);
    /* Suaviza el ruido de la imagen justo detrás de las letras */
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);

    /* Sombras para las letras del párrafo */
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
}

/* --- Contenedor unificado en la base --- */
.hero-navigation-footer {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;

    z-index: 5;
}

/* Flecha de Scroll Suave */
.hero-scroll-arrow {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease, transform 0.3s ease;
    animation: arrowBounce 2s infinite ease-in-out;
}

.hero-scroll-arrow:hover {
    color: #ffffff;
}

.hero-scroll-arrow .material-symbols-outlined {
    font-size: 28px;
    font-variation-settings: 'wght' 300;
    filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.5));
}

/* Barras Indicadoras Pasivas (Sin comportamiento de botón) */
.carousel-indicators {
    display: flex;
    gap: 16px;
    align-items: center;
}

.indicator-line {
    width: 40px;
    height: 2px;
    background: rgba(255, 255, 255, 0.25);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: default;
    /* Remueve el puntero de botón interactivo */
}

.indicator-line.active {
    background: #ffffff;
    width: 56px;
}

/* Animación orgánica de rebote para la flecha */
@keyframes arrowBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }
}

@media (max-width: 768px) {
    .hero-content {
        padding: 0 24px;
    }

    .hero-content p {
        padding: 10px 16px;
        font-size: 16px;
    }

    h1.font-display {
        font-size: 38px;
    }

    h2.font-display {
        font-size: 34px;
    }

    .hero-navigation-footer {
        bottom: 32px;
    }
}


/* ==========================================================================
   SECCIÓN DE PAQUETES (Barras Cinemáticas a lo ancho)
   ========================================================================== */
.packages-section {
    padding: var(--spacing-section-gap, 160px) 80px;
    max-width: 1440px;
    margin: 0 auto;
}

.section-header {
    margin-bottom: 48px;
}

.section-header span {
    display: block;
    margin-bottom: 8px;
}

.packages-container {
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-shadow: var(--nav-shadow);
}

.package-bar {
    height: 180px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 80px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.package-bar:last-child {
    border-bottom: none;
}

.package-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 1;
}

[data-package="4"] .package-bg {
  background-position-y: 35%;
}

.package-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(26, 28, 27, 0.55) 0%, rgba(26, 28, 27, 0.2) 100%);
    z-index: 2;
    transition: background 0.5s ease;
}

.package-content {
    position: relative;
    z-index: 3;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.package-title {
    color: #ffffff;
    font-size: 36px;
    font-weight: 500;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.4s ease;
}

/* Botón que emerge sutilmente desde el fondo Arena */
.reserve-btn {
    background-color: var(--color-tertiary, #E6D8C1);
    color: var(--color-primary-container, #3b5a4c);
    padding: 14px 36px;
    border-radius: var(--radius-btn);
    border: none;
    cursor: pointer;
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Efectos Hover Orgánicos */
.package-bar:hover .package-bg {
    transform: scale(1.06);
}

.package-bar:hover .reserve-btn {
    opacity: 1;
    transform: translateX(0);
}

.package-bar:hover .package-overlay {
    background: linear-gradient(90deg, rgba(41, 64, 55, 0.75) 0%, rgba(26, 28, 27, 0.25) 100%);
}

.package-bar:hover .package-title {
    transform: translateX(10px);
}

/* Responsive */
@media (max-width: 768px) {
    .packages-section {
        padding: 80px 24px;
    }

    .package-bar {
        padding: 0 32px;
        height: 140px;
    }

    .package-title {
        font-size: 24px;
    }

    .reserve-btn {
      display: none;
        /* opacity: 1; */
        transform: translateX(0);
        padding: 10px 20px;
        font-size: 12px;
    }
}


/* ==========================================================================
   SECCIÓN DE DESCANSO VISUAL (Rest Section)
   ========================================================================== */
.rest-section {
    padding: var(--spacing-section-gap, 160px) 80px;
    max-width: 1440px;
    margin: 0 auto;
    background-color: var(--color-background);
}

.rest-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: center;
}

.rest-editorial span {
    display: block;
    margin-bottom: 12px;
}

.rest-editorial h2 {
    margin-bottom: 24px;
    font-size: 48px;
    text-wrap: balance;
}

.rest-editorial p {
    color: var(--color-on-surface-variant);
    font-weight: 300;
    text-wrap: balance;
}

/* Grilla de tarjetas minimalistas */
.rest-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

/* Tarjeta con efecto Translucent Linen White */
.rest-card {
    background-color: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 40px;
    border-radius: 32px;
    /* Primary Radius según DESIGN.md */
    box-shadow: 0px 10px 30px rgba(41, 64, 55, 0.02);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-icon {
    width: 48px;
    height: 48px;
    color: var(--color-primary);
    margin-bottom: 24px;

    & span {
      font-size: 3rem;
    }
}

.rest-card h3 {
    margin-bottom: 12px;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-wrap: balance;
}

.rest-card p {
    font-size: 15px;
    line-height: 1.5;
    text-wrap: pretty;
}

/* Microinteracciones Orgánicas en Hover */
.rest-card:hover {
    transform: translateY(-6px);
    background-color: rgba(255, 255, 255, 0.65);
    border-color: rgba(83, 115, 100, 0.2);
    /* Sutil tinte del verde principal */
    box-shadow: 0px 20px 40px rgba(41, 64, 55, 0.06);
}

/* Responsive */
@media (max-width: 1024px) {
    .rest-container {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}

@media (max-width: 768px) {
    .rest-section {
        padding: 80px 24px;
    }

    .rest-editorial h2 {
        font-size: 32px;
    }

    .rest-card {
        padding: 32px;
    }
}


/* ==========================================================================
   SECCIÓN DE EXCURSIONES (Bento Grid Layout)
   ========================================================================== */
.excursions-section {
    padding: var(--spacing-section-gap, 160px) 80px;
    max-width: 1440px;
    margin: 0 auto;
    background-color: var(--color-background);
}

.excursions-container {
    width: 100%;
}

/* Distribución Bento Asimétrica Pro */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 340px;
    gap: 24px;
}

.bento-card {
    position: relative;
    border-radius: 32px;
    /* Sincronizado con primary radius */
    overflow: hidden;
    text-decoration: none;
    display: flex;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Capa de imagen de fondo */
.card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Sutil degradado cinemático inferior */
.card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(41, 64, 55, 0.8) 0%, rgba(41, 64, 55, 0.2) 50%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
}

.card-content-floating {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 40px;
    z-index: 2;
    transition: transform 0.4s ease;
}

.duration-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    font-family: 'Hanken Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 8px;
}

.destination-name {
    font-size: 28px;
    color: #ffffff;
}

/* Tarjeta CTA (Color Terciario Arena) */
.cta-card {
    background-color: var(--color-tertiary, #E6D8C1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
}

.cta-text {
    font-size: 28px;
    color: var(--color-secondary, #294037);
    margin-bottom: 16px;
    transition: color 0.4s ease;
}

.cta-arrow {
    color: var(--color-secondary, #294037);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Interacciones Orgánicas de las Tarjetas */
.destination-card:hover .card-bg {
    transform: scale(1.05);
}

.destination-card:hover .card-content-floating {
    transform: translateY(-4px);
}

.cta-card:hover {
    background-color: var(--color-primary, #537364);
}

.cta-card:hover .cta-text,
.cta-card:hover .cta-arrow {
    color: #ffffff;
}

.cta-card:hover .cta-arrow {
    transform: translateX(8px);
}

/* Definición de proporciones Bento en Desktop */
@media (min-width: 1025px) {
    .bento-grid article:nth-child(1) {
        grid-column: span 1;
    }

    .bento-grid article:nth-child(2) {
        grid-column: span 2;
    }

    .bento-grid article:nth-child(3) {
        grid-column: span 2;
    }

    .bento-grid article:nth-child(4) {
        grid-column: span 1;
    }

    .bento-grid article:nth-child(5) {
        grid-column: span 1;
    }

    .cta-card {
        grid-column: span 2;
    }
}

/* Respuestas en Tablets */
@media (max-width: 1024px) {
    .excursions-section {
        padding: 100px 40px;
    }

    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 300px;
    }
}

/* Respuestas en Celulares */
@media (max-width: 768px) {
    .excursions-section {
        padding: 80px 24px;
    }

    .bento-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 260px;
    }

    .destination-name,
    .cta-text {
        font-size: 24px;
    }
}

/* ==========================================================================
   SECCIÓN DE CONTACTO (CORREGIDA CON INVERSIÓN CROMÁTICA CREMA)
   ========================================================================== */
.contact-section {
    /* Cambiamos el fondo al crema oficial de marca para separarla del footer */
    background-color: var(--color-tertiary, #E6D8C1);
    padding: 120px 24px;
    border-top-left-radius: var(--radius-container, 50px);
    border-top-right-radius: var(--radius-container, 50px);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
    /* Pisa sutilmente la transición del fondo */
}

.contact-container {
    max-width: 900px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* El subtítulo superior ahora pasa a tu verde secundario para que sea legible */
.contact-container .tracking-widest {
    color: var(--color-secondary, #294037);
    letter-spacing: 0.25em;
    margin-bottom: 16px;
    opacity: 0.8;
}

/* El título rotativo pasa a verde profundo (Secondary) en lugar de blanco */
.contact-title {
    font-size: 52px;
    line-height: 1.15;
    font-weight: 400;
    color: var(--color-secondary, #294037);
    margin-bottom: 16px;
    width: 100%;
    max-width: 800px;
    transition: opacity 0.5s ease;
    opacity: 1;
}

.contact-title.fade-out {
    opacity: 0;
}

/* La descripción pasa a tu verde variante para un contraste óptimo */
.contact-description {
    font-size: 16px;
    color: var(--color-on-surface-variant, #414844);
    margin-bottom: 32px;
    max-width: 600px;
    line-height: 1.6;
}

/* INVERSIÓN DEL BOTÓN: Ahora el botón es oscuro para que resalte sobre el fondo crema */
.btn-action {
    background-color: var(--color-secondary, #294037);
    color: #ffffff;
    padding: 16px 44px;
    border-radius: var(--radius-btn, 32px);
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border: none;
    cursor: pointer;
    box-shadow: 0px 10px 25px rgba(41, 64, 55, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-arrow {
    transition: transform 0.3s ease;
}

.btn-action:hover {
    background-color: var(--color-primary, #537364);
    color: #ffffff;
    transform: translateY(-2px);
}

.btn-action:hover .btn-arrow {
    transform: translateX(4px);
}

/* Pilares inferiores estilizados sobre crema */
.brand-pillars {
    display: flex;
    justify-content: center;
    gap: 48px;
    margin-top: 56px;
    border-top: 1px solid rgba(41, 64, 55, 0.15);
    /* Línea divisoria adaptada */
    padding-top: 32px;
    width: 100%;
    max-width: 500px;
}

.pillar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Iconos de Google en verde de marca */
.contact-section .material-symbols-outlined {
    font-size: 24px;
    color: var(--color-primary, #537364);
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    transition: transform 0.3s ease;
}

.pillar-item:hover .material-symbols-outlined {
    transform: scale(1.1);
}

/* Texto de los pilares en verde atenuado */
.contact-section .text-white-70 {
    color: var(--color-on-surface-variant, #414844);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
}

/* ==========================================================================
   COMPONENTE: MODAL FULLSCREEN ULTRA-OPTIMIZADO (SIN BLUR)
   ========================================================================== */
/* Bloqueo de scroll global controlado desde el Body */
body.modal-open {
    overflow: hidden !important;
    height: 100vh !important;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: #ffffff;
    /* Fondo blanco plano y limpio para máximo rendimiento */
    z-index: 1000;
    display: block;
    overflow-y: auto;
    /* Permite scroll solo si el contenido excede pantallas pequeñas */
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
    /* Optimización para aceleración de GPU corporativa */
    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.modal-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}

.modal-window {
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    /* Mitad imagen cinematográfica, mitad datos */
    position: relative;
}

/* Botón cerrar sobre la capa superior */
.modal-close {
    position: fixed;
    top: 32px;
    right: 32px;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-on-surface, #1a1c1b);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    z-index: 1010;
    transition: transform 0.3s ease, color 0.3s ease;
}

.modal-close:hover {
    color: var(--color-primary, #537364);
    transform: scale(1.05);
}

.modal-close .material-symbols-outlined {
    font-size: 24px;
    font-variation-settings: 'wght' 300;
}

/* Imagen Cinematográfica Principal (Izquierda) */
.modal-hero-image {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Bloque de Información (Derecha) */
.modal-content-wrapper {
    padding: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background-color: #ffffff;
}

.modal-header-block {
    margin-bottom: 20px;
}

.modal-header-block h2 {
    font-size: 44px;
    margin-top: 8px;
}

.modal-content-wrapper p {
    line-height: 1.6;
    margin-bottom: 32px;
}

.modal-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 40px;
    margin-bottom: 40px;
    width: 100%;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.meta-item .material-symbols-outlined {
    font-size: 32px;
    color: var(--color-primary, #537364);
}

.meta-item h4 {
    font-size: 11px;
    letter-spacing: 0.05em;
    color: var(--color-on-surface-variant, #414844);
}

.meta-item p {
    margin-bottom: 0;
    font-weight: 600;
}

/* Sección de Galería de Muestra */
.modal-gallery-section {
    width: 100%;
    margin-bottom: 40px;
}

.gallery-title {
    font-size: 12px;
    color: var(--color-on-surface-variant, #414844);
    margin-bottom: 16px;
}

.modal-thumbnails-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
}

.thumb-img {
    width: 100%;
    height: 100px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.btn-modal-submit {
    align-self: center;
    padding: 16px 44px;
}

/* ==========================================================================
   INTERACCIONES DE LA GALERÍA DEL MODAL
   ========================================================================== */
.modal-hero-image {
    /* Agregamos una transición suave de opacidad para que el cambio de imagen no sea brusco */
    transition: background-image 0.4s ease-in-out;
}

.thumb-img {
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease, border-color 0.3s ease;
    opacity: 0.7;
    /* Por defecto están un poco atenuadas */
}

/* Miniatura seleccionada o en Hover */
.thumb-img:hover,
.thumb-img.is-active {
    opacity: 1;
    transform: translateY(-2px);
    border: 2px solid var(--color-primary, #537364);
}

@media (max-width: 1200px) {
    .modal-window {
        grid-template-columns: 0.8fr 1.2fr;
    }

    .modal-content-wrapper {
        padding: 60px 48px;
    }

    .modal-header-block h2 {
        font-size: 36px;
    }
}

@media (max-width: 1024px) {
    .modal-window {
        grid-template-columns: 1fr;
    }

    .modal-hero-image {
        height: 300px;
        min-height: 300px;
    }

    .modal-content-wrapper {
        padding: 40px 24px;
    }
}

/* ==========================================================================
   COMPONENTE: MODAL CATÁLOGO DE EXCURSIONES (Dual Panel Fullscreen)
   ========================================================================== */
.excursions-modal-window {
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    /* Panel izquierdo (Vista), Panel derecho (Lista) */
    background-color: #ffffff;
}

/* LADO IZQUIERDO: Panel Visualizador */
.excursion-viewer-panel {
    height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--color-surface-container-low, #f4f4f1);
    border-right: 1px solid rgba(0, 0, 0, 0.05);
}

.viewer-image-crop {
    width: 100%;
    height: 45vh;
    /* Ocupa una porción controlada de la pantalla */
    background-size: cover;
    background-position: center;
    transition: background-image 0.4s ease-in-out;
}

.viewer-info-content {
    padding: 48px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
}

.viewer-info-content h2 {
    font-size: 36px;
    margin-top: 8px;
    margin-bottom: 16px;
}

.viewer-info-content p {
    max-width: 500px;
    line-height: 1.6;
}

.viewer-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 32px;
    margin-top: 28px;
    margin-bottom: 28px;
    width: 100%;
}

.viewer-meta-grid .meta-item .material-symbols-outlined {
    font-size: 24px;
}

.btn-excursion-consult {
    /* align-self: flex-start; */
    padding: 14px 36px;
}

/* LADO DERECHO: Lista de Tarjetas Rectangulares */
.excursions-sidebar-list {
    padding: 80px 64px;
    height: 100vh;
    overflow-y: auto;
    /* Permite scroll infinito de las excursiones a la derecha */
    background-color: #ffffff;
}

.list-headline {
    margin-bottom: 32px;
    font-size: 12px;
    color: var(--color-on-surface-variant, #414844);
}

.sidebar-cards-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Tarjeta Rectangular estilo Paquetes */
.sidebar-rect-card {
    position: relative;
    height: 110px;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.rect-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
    transition: transform 0.6s ease, filter 0.4s ease;
    z-index: 1;
    filter: grayscale(1) sepia(0.6) hue-rotate(90deg) saturate(0.5);
}

.rect-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(26, 28, 27, 0.6);
    z-index: 2;
    transition: background 0.4s ease;
}

.rect-card-content {
    position: relative;
    z-index: 3;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rect-card-title {
    color: #ffffff;
    font-size: 22px;
    font-weight: 500;
    transition: transform 0.3s ease;
}

.rect-card-btn {
    background-color: var(--color-tertiary, #E6D8C1);
    color: var(--color-secondary, #294037);
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 11px;
    border: none;
    opacity: 0.8;
    transform: translateX(10px);
    transition: all 0.3s ease;
}

/* Estados Hover */
.sidebar-rect-card:hover .rect-card-bg {
    transform: scale(1.05);
}

.sidebar-rect-card:hover .rect-card-btn {
    opacity: 1;
    transform: translateX(0);
    background-color: #ffffff;
}

/* Tarjeta seleccionada: imagen a color, sin borde, sombra verde sutil */
.sidebar-rect-card.is-selected {
    box-shadow: 8px 0 25px -5px rgba(83, 115, 100, 0.35);
}

.sidebar-rect-card.is-selected .rect-card-bg {
    filter: grayscale(0);
}

.sidebar-rect-card.is-selected .rect-card-overlay {
    background: linear-gradient(90deg, rgba(83, 115, 100, 0.35) 0%, transparent 55%);
}

.sidebar-rect-card.is-selected .rect-card-btn {
    display: none;
}

/* Oculto en desktop */
.btn-catalog-toggle {
    display: none;
}

/* Scroll personalizado */
.modal-overlay::-webkit-scrollbar,
.excursions-sidebar-list::-webkit-scrollbar,
.viewer-info-content::-webkit-scrollbar {
    width: 6px;
}

.modal-overlay::-webkit-scrollbar-track,
.excursions-sidebar-list::-webkit-scrollbar-track,
.viewer-info-content::-webkit-scrollbar-track {
    background: transparent;
}

.modal-overlay::-webkit-scrollbar-thumb,
.excursions-sidebar-list::-webkit-scrollbar-thumb,
.viewer-info-content::-webkit-scrollbar-thumb {
    background-color: var(--color-primary, #537364);
    border-radius: 3px;
}

.modal-overlay::-webkit-scrollbar-thumb:hover,
.excursions-sidebar-list::-webkit-scrollbar-thumb:hover,
.viewer-info-content::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-primary-container, #759b88);
}

@supports (scrollbar-color: auto) {
    .modal-overlay,
    .excursions-sidebar-list,
    .viewer-info-content {
        scrollbar-width: thin;
        scrollbar-color: var(--color-primary, #537364) transparent;
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .excursions-modal-window {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        position: relative;
    }

    .excursion-viewer-panel {
        flex: 1;
        height: auto;
        position: relative;
        border-right: none;
    }

    .viewer-image-crop {
        height: 35vh;
    }

    /* Contenedor de acciones del viewer */
    .viewer-actions {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        width: 100%;
        margin-top: 2rem;
    }

    .viewer-actions .btn-excursion-consult,
    .viewer-actions .btn-catalog-toggle {
        width: 80%;
    }

    /* Botón "Ver Catálogo" dentro del viewer (solo mobile) */
    .btn-catalog-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        justify-content: center;
        padding: 14px 24px;
        border: 1px solid var(--color-primary, #537364);
        border-radius: 50px;
        background-color: transparent;
        color: var(--color-primary, #537364);
        cursor: pointer;
        font-family: inherit;
        font-size: 14px;
        letter-spacing: 0.05em;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .btn-catalog-toggle:hover {
        background-color: var(--color-primary, #537364);
        color: #ffffff;
    }

    /* Sidebar: arranca desde abajo, crece hacia arriba al abrir */
    .excursions-sidebar-list {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 5;
        background-color: #ffffff;

        height: 0;
        overflow: hidden;
        padding: 0 32px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.3s ease,
            padding 0.3s ease,
            visibility 0s 0.45s;
    }

    .excursions-sidebar-list.catalog-reveal {
        height: 100vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 64px 24px 80px 24px;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.3s ease,
            padding 0.3s ease,
            visibility 0s 0s;
    }

    /* Header bar dentro del sidebar para cerrar catálogo */
    .sidebar-catalog-header {
        background-color: #ffffff;
        padding: 12px 0 16px 0;
        margin-bottom: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .sidebar-catalog-header .btn-catalog-toggle {
        margin-top: 0;
        border: 1px solid rgba(0, 0, 0, 0.12);
        border-radius: 8px;
        background-color: var(--color-surface-container-low, #f4f4f1);
        color: var(--color-on-surface, #1a1c1b);
        justify-content: flex-start;
        padding: 10px 16px;
        gap: 10px;
    }

    .sidebar-catalog-header .btn-catalog-toggle:hover {
        background-color: rgba(0, 0, 0, 0.06);
        color: var(--color-on-surface, #1a1c1b);
    }

    .sidebar-catalog-header .btn-catalog-toggle .material-symbols-outlined {
        font-size: 20px;
        font-variation-settings: 'wght' 400;
    }

    /* Modal overlay: ocultar scroll cuando el catálogo está abierto */
    .modal-overlay.catalog-open {
        overflow: hidden;
    }

    /* Ocultar la X del modal cuando el catálogo está abierto */
    .modal-close.catalog-open {
        display: none;
    }

    @media (max-width: 500px) {
        .viewer-info-content {
            padding: 48px 24px 20px;
        }

        .viewer-actions .btn-excursion-consult,
        .viewer-actions .btn-catalog-toggle {
            width: 100%;
        }
    }
}

@media (max-width: 600px) {
    .excursions-sidebar-list.catalog-reveal {
        padding: 56px 16px 72px 16px;
    }

    .sidebar-rect-card {
        height: 90px;
        padding: 0 20px;
        border-radius: 16px;
    }

    .rect-card-title {
        font-size: 18px;
    }

    .rect-card-btn {
        padding: 6px 16px;
        font-size: 10px;
    }
}

/* ==========================================================================
   ESTILOS DEL FOOTER COMPACTO Y EDITORIAL (Captura)
   ========================================================================== */
.main-footer {
    background-color: var(--color-secondary, #294037);
    /* Conecta directo sin cortes con la sección de contacto */
    padding-top: 80px;
    position: relative;
    width: 100%;
}

.footer-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 80px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    /* Proporciones asimétricas limpias */
    gap: 64px;
    padding-bottom: 64px;
}

/* Columna de Marca */
.footer-brand-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-w: 360px;
}

.footer-logo {
    font-size: 32px;
    color: #ffffff;
    margin-bottom: 20px;
    letter-spacing: -0.01em;
}

.footer-brand-col p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 16px;
}

/* Legajo / Registro */
.footer-legajo {
    margin-bottom: 24px;
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
}

/* Redes Sociales */
.footer-socials {
    display: flex;
    gap: 16px;
}

.social-link {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.social-link:hover {
    color: var(--color-tertiary, #E6D8C1);
    transform: translateY(-2px);
}

.social-link svg {
    display: block;
    width: 20px;
    height: 20px;
}

/* Columnas de Enlaces */
.footer-headline {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-tertiary, #E6D8C1);
    /* Tono arena de la captura */
    margin-bottom: 24px;
}

.footer-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-list a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 15px;
    transition: color 0.3s ease, padding-left 0.3s ease;
}

.footer-list a:hover {
    color: #ffffff;
    padding-left: 4px;
    /* Sutil movimiento orgánico en hover */
}

/* Barra de Legales Inferior */
.footer-bottom-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 32px 0;
    width: 100%;
}

.footer-bottom-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-legal-links {
    display: flex;
    gap: 32px;
    align-items: center;
}

.text-white-40 {
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
    text-decoration: none;
}

a.text-white-40:hover {
    color: rgba(255, 255, 255, 0.8);
}

.credit-link {
    color: var(--color-tertiary, #E6D8C1);
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.3s ease;
}

.credit-link:hover {
    opacity: 0.8;
}

/* Adaptabilidad Responsiva */
@media (max-width: 1024px) {
    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 48px;
    }

    .footer-brand-col {
        grid-column: span 2;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .footer-container {
        grid-template-columns: 1fr;
        padding: 0 24px 48px 24px;
        gap: 32px;
    }

    .footer-brand-col {
        grid-column: span 1;
    }

    .footer-bottom-container {
        padding: 0 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .footer-legal-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ==========================================================================
   COMPONENTE: DRAWER LATERAL DE CONTACTO (ESTÉTICA PREMIUM ELEVADA)
   ========================================================================== */
.contact-drawer-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(26, 28, 27, 0.4);
    /* Capa oscura atenuada sin blur para rendimiento */
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.contact-drawer-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}

.contact-drawer-window {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40%;
    min-width: 460px;
    background-color: #ffffff;
    box-shadow: -15px 0px 50px rgba(41, 64, 55, 0.08);
    padding: 80px 56px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transform: translateX(100%);
    will-change: transform;
    transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

.contact-drawer-overlay.is-active .contact-drawer-window {
    transform: translateX(0);
}

/* Botón cerrar minimalista */
.drawer-close {
    position: absolute;
    top: 40px;
    right: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-on-surface-variant, #414844);
    transition: color 0.3s ease, transform 0.3s ease;
}

.drawer-close:hover {
    color: var(--color-primary, #537364);
    transform: scale(1.1);
}

.drawer-close .material-symbols-outlined {
    font-size: 26px;
    font-variation-settings: 'wght' 300;
}

/* Encabezado del Formulario */
.drawer-body {
    display: flex;
    flex-direction: column;
    margin-top: 16px;
}

.drawer-body h2 {
    font-size: 36px;
    line-height: 1.2;
    margin-top: 8px;
    margin-bottom: 16px;
    color: var(--color-on-surface, #1a1c1b);
}

.drawer-body p {
    margin-bottom: 48px;
    color: var(--color-on-surface-variant, #414844);
    line-height: 1.6;
}

/* Estructura del Formulario Estético */
.drawer-form {
    display: flex;
    flex-direction: column;
    gap: 28px;
    /* Mayor espacio para que respire el diseño */
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

/* Etiquetas flotantes finas */
.form-group label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--color-primary, #537364);
    text-transform: uppercase;
}

/* Contenedores estilizados inspirados en formas orgánicas suaves */
.form-group input,
.form-group select,
.form-group textarea {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 15px;
    padding: 16px 20px;
    color: var(--color-on-surface, #1a1c1b);
    background-color: rgba(230, 216, 193, 0.18);
    /* Tinte de lino/arena suave de fondo */
    border: 1px solid transparent;
    border-radius: 16px;
    /* Bordes suaves según el sistema de diseño */
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Estilo específico para placeholders */
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(65, 72, 68, 0.5);
}

/* Ajuste interactivo del Selector */
.form-group select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23537364' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 18px;
    padding-right: 48px;
}

/* === EFECTO FOCO ELEVADO (MICROINTERACCIÓN PREMIUM) === */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    background-color: #ffffff;
    border-color: var(--color-primary, #537364);
    box-shadow: 0px 8px 20px rgba(83, 115, 100, 0.06);
    /* Brillo muy leve del verde de marca */
}

/* Textarea dinámico para el mensaje */
.form-group textarea {
    resize: none;
    line-height: 1.5;
}

/* Botón de envío final refinado */
.btn-submit-form {
    width: 100%;
    padding: 18px;
    margin-top: 16px;
    border-radius: 32px;
    box-shadow: 0px 10px 25px rgba(83, 115, 100, 0.15);
}

/* Adaptabilidad Responsiva */
@media (max-width: 1024px) {
    .contact-drawer-window {
        width: 55%;
        padding: 64px 40px;
    }
}

@media (max-width: 768px) {
    .contact-drawer-window {
        width: 100%;
        min-width: 100%;
        padding: 56px 24px;
    }

    .drawer-body h2 {
        font-size: 28px;
    }

    .contact-drawer-window {
        border-radius: 0;
    }
}

/* ==========================================================================
   SECCIÓN STATEMENT PREMIUM (INVERSIÓN CROMÁTICA)
   ========================================================================== */
.premium-statement-section {
    width: 100%;
    padding: 160px 80px;
    background-color: var(--color-secondary);
    /* Inversión radical: pasamos al color oscuro de tu marca */
    color: #ffffff;
    overflow: hidden;
}

.statement-wrapper {
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    /* Relación asimétrica */
    gap: 80px;
    align-items: center;
}

/* Bloque de Contenido */
.statement-text-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.statement-tag {
    color: var(--color-tertiary, #E6D8C1);
    /* Tu tono arena premium */
    margin-bottom: 32px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

.statement-heading {
    font-size: 64px;
    line-height: 1.1;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 32px;
    letter-spacing: -0.02em;
}

.statement-heading .highlight-serif {
    font-family: 'EB Garamond', serif;
    font-style: italic;
    color: var(--color-tertiary, #E6D8C1);
}

.statement-paragraph {
    color: rgba(255, 255, 255, 0.8);
    /* Blanco suavizado para legibilidad */
    max-width: 520px;
    line-height: 1.7;
    font-weight: 300;
}

/* Marco de Imagen Flotante (Estilo Galería de Arte) */
.statement-image-frame {
    width: 100%;
    position: relative;
    padding-left: 40px;
    /* Descentrado intencional */
}

.statement-img {
    width: 100%;
    height: 550px;
    border-radius: 24px;
    /* Sincronizado con tus paquetes */
    background-size: cover;
    background-position: center;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
    filter: grayscale(20%) contrast(110%);
    /* Toque cinematográfico a la foto */
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.statement-image-frame:hover .statement-img {
    transform: scale(1.02) translateY(-5px);
    /* Microinteracción sutil */
}

.image-caption {
    margin-top: 16px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    text-align: right;
    letter-spacing: 0.15em;
}

/* Adaptabilidad para que no rompa en pantallas chicas */
@media (max-width: 1100px) {
    .statement-heading {
        font-size: 48px;
    }

    .statement-img {
        height: 400px;
    }
}

@media (max-width: 900px) {
    .premium-statement-section {
        padding: 100px 24px;
    }

    .statement-wrapper {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .statement-image-frame {
        padding-left: 0;
    }

    .statement-heading {
        font-size: 40px;
    }
}

/* ==========================================================================
   SECCIÓN BANNER PARALLAX PANORÁMICO
   ========================================================================== */
.parallax-banner-section {
    position: relative;
    width: 100%;
    height: 60vh;
    /* Altura controlada para que funcione como ventana de transición */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.parallax-bg {
    position: absolute;
    inset: 0;
    /* Foto panorámica de alta montaña de Unsplash */
    /*background-image: url(attr(data-backgroundImage));*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* Esto genera el efecto de ventana parallax */
    z-index: 1;
}

.parallax-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(26, 28, 27, 0.4) 0%,
            rgba(26, 28, 27, 0.4) 100%);
    z-index: 2;
}

.parallax-content {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 0 24px;
}

.parallax-phrase {
    font-size: 52px;
    font-weight: 400;
    text-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
    letter-spacing: -0.01em;
}

/* Desactivamos el background-attachment: fixed en dispositivos móviles 
   porque iOS/Safari y algunos Android no lo procesan bien y rompen el rendimiento */
@media (max-width: 1024px) {
    /*.parallax-bg {
        background-attachment: fixed;
    }*/

    .parallax-banner-section {
        height: 45vh;
    }

    .parallax-phrase {
        font-size: 32px;
    }
}

/* ==========================================================================
   SECCIÓN CRÓNICAS CINEMATOGRÁFICAS (REDISEÑO REFINADO)
   ========================================================================== */
.cinematic-chronicles {
    width: 100%;
    padding: 160px 0;
    background-color: #ffffff;
    overflow: hidden;
}

.chronicles-headline-wrapper {
    max-width: 1440px;
    margin: 0 auto 60px auto;
    padding: 0 80px;
}

.chronicles-main-title {
    font-size: 44px;
    /* Un poco más contenida e imponente */
    color: var(--color-on-surface);
    letter-spacing: -0.02em;
}

.editorial-testimonials-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.editorial-strip {
    width: 100%;
    border-top: 1px solid rgba(41, 64, 55, 0.08);
    padding: 48px 80px;
    display: flex;
    justify-content: flex-start;
    background-color: #ffffff;

    /* ESTADO INICIAL (OCULTO) */
    opacity: 0;
    transform: translateY(25px);

    /* TRANSICIÓN */
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.editorial-strip:not(.is-visible) {
    transition-delay: 0ms !important;
}

.editorial-strip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.editorial-strip.reverse-strip {
    justify-content: flex-end;
    background: linear-gradient(90deg, transparent 0%, rgba(230, 216, 193, 0.08) 15%, rgba(230, 216, 193, 0.08) 85%, transparent 100%);
}

.editorial-strip:last-child {
    border-bottom: 1px solid rgba(41, 64, 55, 0.08);
    /* Cierre de la última banda */
}

/* Estado cuando el JS detecta el scroll */
.editorial-strip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.strip-text-container {
    max-width: 640px;
}

.strip-quote {
    font-size: 26px;
    line-height: 1.4;
    font-style: italic;
    color: var(--color-secondary);
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}

.strip-author {
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--color-primary);
}

/* Botón "Ver más historias" */
.chronicles-actions {
    display: flex;
    justify-content: center;
    padding: 48px 80px 0 80px;
}

.btn-chronicles-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 36px;
    border: 1px solid var(--color-primary, #537364);
    border-radius: 50px;
    background-color: transparent;
    color: var(--color-primary, #537364);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    letter-spacing: 0.08em;
    transition: background-color 0.3s ease, color 0.3s ease, gap 0.3s ease;
}

.btn-chronicles-more:hover {
    background-color: var(--color-primary, #537364);
    color: #ffffff;
    gap: 14px;
}

.btn-chronicles-more .material-symbols-outlined {
    font-size: 18px;
}

/* Modal Carrusel de Crónicas */
#chroniclesModal {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(26, 28, 27, 0.6);
    padding: 40px;
}

#chroniclesModal .chronicles-modal-window {
    width: 100%;
    max-width: 700px;
    min-height: auto;
    background-color: #ffffff;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px 64px;
    position: relative;
    box-shadow: 0 20px 60px rgba(26, 28, 27, 0.15);
}

.chronicles-carousel {
    width: 100%;
    overflow: hidden;
}

.carousel-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.chronicles-slide {
    min-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 20px;
    box-sizing: border-box;
}

.chronicles-slide .slide-quote {
    font-size: 24px;
    line-height: 1.5;
    font-style: italic;
    color: var(--color-secondary, #294037);
    margin-bottom: 24px;
    letter-spacing: -0.01em;
    max-width: 520px;
}

.chronicles-slide .slide-author {
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--color-primary, #537364);
}

/* Barra de progreso */
.carousel-progress-bar {
    width: 100%;
    max-width: 400px;
    height: 2px;
    background-color: rgba(41, 64, 55, 0.1);
    border-radius: 1px;
    margin-top: 48px;
    overflow: hidden;
}

.carousel-progress-fill {
    height: 100%;
    width: 0%;
    background-color: var(--color-primary, #537364);
    border-radius: 1px;
    transition: width 0.1s linear;
}

/* Navegación */
.carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 24px;
}

.carousel-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(41, 64, 55, 0.12);
    background-color: transparent;
    color: var(--color-secondary, #294037);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.carousel-arrow:hover {
    border-color: var(--color-primary, #537364);
    background-color: rgba(83, 115, 100, 0.06);
}

.carousel-arrow .material-symbols-outlined {
    font-size: 20px;
}

.carousel-dots {
    display: flex;
    gap: 8px;
}

.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(41, 64, 55, 0.15);
    transition: background-color 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.carousel-dot.is-active {
    background-color: var(--color-primary, #537364);
    transform: scale(1.2);
}

@media (max-width: 768px) {
    #chroniclesModal {
        padding: 20px;
    }

    #chroniclesModal .chronicles-modal-window {
        padding: 48px 24px;
    }

    .chronicles-slide .slide-quote {
        font-size: 20px;
    }

    .carousel-progress-bar {
        margin-top: 32px;
    }

    .carousel-nav {
        gap: 16px;
        margin-top: 20px;
    }
}

@media (max-width: 480px) {
    #chroniclesModal {
        padding: 12px;
    }

    #chroniclesModal .chronicles-modal-window {
        padding: 36px 16px;
        border-radius: 16px;
    }

    .chronicles-slide .slide-quote {
        font-size: 18px;
    }
}

/* Adaptabilidad */
@media (max-width: 1024px) {
    .chronicles-headline-wrapper {
        padding: 0 40px;
    }

    .editorial-strip {
        padding: 40px 40px;
    }

    .strip-quote {
        font-size: 22px;
    }
}

@media (max-width: 768px) {
    .cinematic-chronicles {
        padding: 100px 0;
    }

    .chronicles-headline-wrapper {
        padding: 0 24px;
        margin-bottom: 40px;
    }

    .chronicles-main-title {
        font-size: 32px;
    }

    .editorial-strip {
        padding: 32px 24px;
    }

    .strip-quote {
        font-size: 18px;
    }
}



/* ==========================================================================
   NUEVO APARTADO NOSOTROS - SPLIT SCREEN & MOSAICO EDITORIAL (CON PARALLAX)
   ========================================================================== */
.cinematic-about-section {
    width: 100%;
    padding: 100px 80px;
    background-color: var(--color-background);
    overflow: hidden;
    /* Creamos un contenedor de tiempo de scroll para las animaciones nativas */
    view-timeline: --sectionTimeline block;
}

.about-split-wrapper {
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 100px;
    align-items: start;
}

/* --- Columna Izquierda (Se mantiene fija de fondo) --- */
.about-meta-pane {
    position: sticky;
    top: 140px;
}

.about-giant-heading {
    font-size: 56px;
    line-height: 1.15;
    font-weight: 500;
    color: var(--color-secondary);
    margin-top: 24px;
    margin-bottom: 32px;
    letter-spacing: -0.02em;
}

.about-giant-heading .highlight-serif {
    font-family: 'EB Garamond', serif;
    font-style: italic;
    color: var(--color-primary);
}

.about-minimal-divider {
    width: 60px;
    height: 1px;
    background-color: var(--color-primary);
    margin-bottom: 32px;
}

.about-paragraph {
    color: var(--color-on-surface-variant);
    line-height: 1.8;
    font-weight: 300;
}

/* --- Columna Derecha (Mosaico de Imágenes con Parallax Seguro) --- */
.about-mosaic-pane {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    position: relative;
    width: 100%;
}

/* Caja contenedora rígida (evita que el hover altere el tamaño del layout) */
.mosaic-item {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0px 20px 50px rgba(41, 64, 55, 0.1);
    background-color: #eaeaea;
    /* Placeholder de carga */
}

/* La imagen real que ejecutará el Parallax y el Zoom */
.mosaic-img-parallax {
    position: absolute;
    /* Hacemos la imagen un 30% más alta que su contenedor para tener margen de movimiento */
    top: -15%;
    left: 0;
    width: 100%;
    height: 130%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Suavizado premium para el hover */
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);

    /* ANIMACIÓN PARALLAX NATIVA POR SCROLL */
    animation: parallaxEffect linear both;
    animation-timeline: --sectionTimeline;
    animation-range: exit-crossing 0% entry-crossing 100%;
}

/* Microinteracción: El hover ahora solo hace un zoom interno elegante de la imagen */
.mosaic-item:hover .mosaic-img-parallax {
    transform: scale(1.08);
}

/* Configuración asimétrica de cada cuadro */
.item-main {
    grid-column: 1 / span 11;
    height: 500px;
    z-index: 1;
}

.item-secondary {
    grid-column: 3 / span 10;
    height: 320px;
    margin-top: -120px;
    /* Se solapa elegantemente */
    z-index: 2;
    border: 4px solid var(--color-background);
}

.item-detail {
    grid-column: 2 / span 10;
    height: 220px;
    margin-top: 40px;
    z-index: 3;
}

/* Definición de la animación de desplazamiento vertical lento */
@keyframes parallaxEffect {
    from {
        transform: translateY(-8%);
    }

    to {
        transform: translateY(8%);
    }
}

/* --- Adaptabilidad (Responsive) --- */
@media (max-width: 1100px) {
    .about-split-wrapper {
        gap: 48px;
    }

    .about-giant-heading {
        font-size: 42px;
    }

    .item-main {
        height: 325px;
    }

    .item-secondary {
        height: 260px;
    }
}

@media (max-width: 900px) {
    .cinematic-about-section {
        padding: 100px 24px;
    }

    .about-split-wrapper {
        grid-template-columns: 1fr;
        gap: 64px;
    }

    .about-meta-pane {
        position: relative;
        top: 0;
    }

    .item-secondary {
        margin-top: -60px;
    }

    /* Desactivamos el parallax en móviles muy chicos para ahorrar batería y GPU */
    .mosaic-img-parallax {
        animation: none;
        top: 0;
        height: 100%;
    }
}

/* ==========================================================================
   SECCIÓN PLANIFICACIÓN TÉCNICA (PREMIUM FAQ)
   ========================================================================== */
.premium-faq-section {
    padding: 160px 80px;
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
}

.premium-faq-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(83, 115, 100, 0.03) 0%, transparent 40%, transparent 60%, rgba(83, 115, 100, 0.03) 100%);
    pointer-events: none;
}

.faq-grid-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 100px;
    align-items: start;
    position: relative;
}

/* --- Columna Selector Izquierda --- */

.faq-main-title {
    font-size: 48px;
    color: var(--color-secondary);
    margin-bottom: 40px;
}

.faq-nav-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq-nav-btn {
    background: transparent;
    border: 1px solid transparent;
    text-align: left;
    padding: 20px 24px;
    font-family: 'Hanken Grotesk', sans-serif;
    color: var(--color-on-surface-variant);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    width: fit-content;
}

.faq-nav-btn.active {
    border-color: var(--color-primary, #537364);
    background-color: rgba(83, 115, 100, 0.04);
    color: var(--color-primary);
    font-weight: 700;
}

.faq-nav-btn:hover:not(.active) {
    border-color: rgba(83, 115, 100, 0.2);
    color: var(--color-primary);
}

/* --- Columna Contenido Derecha --- */
.faq-content-column {
    position: relative;
    min-height: 400px;
}

.faq-content-pane {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: translateY(15px);
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-content-pane.active {
    position: relative;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.pane-title {
    font-size: 32px;
    color: var(--color-on-surface);
    margin-bottom: 16px;
}

.pane-divider {
    width: 48px;
    height: 3px;
    background-color: var(--color-primary, #537364);
    border-radius: 2px;
    margin-bottom: 24px;
}

.pane-text {
    color: var(--color-on-surface-variant);
    line-height: 1.7;
    font-weight: 300;
    margin-bottom: 32px;
}

.pane-tech-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pane-tech-list li {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--color-secondary);
    font-size: 13px;
    letter-spacing: 0.03em;
    padding: 12px 16px;
    background: linear-gradient(90deg, rgba(83, 115, 100, 0.06) 0%, rgba(83, 115, 100, 0.02) 60%, transparent 100%);
    border-radius: 12px;
    transition: background 0.3s ease;
}

.pane-tech-list li:hover {
    background: linear-gradient(90deg, rgba(83, 115, 100, 0.1) 0%, rgba(83, 115, 100, 0.04) 60%, transparent 100%);
}

.pane-tech-list .material-symbols-outlined {
    font-size: 22px;
    color: var(--color-primary);
}

/* --- Adaptabilidad (Responsive) --- */
@media (max-width: 1024px) {
    .premium-faq-section {
        padding: 100px 40px;
    }

    .faq-grid-wrapper {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .faq-meta-column {
        position: relative;
        top: 0;
    }

    .faq-main-title {
        font-size: 36px;
        margin-bottom: 24px;
    }
}

@media (max-width: 768px) {
    .premium-faq-section {
        padding: 80px 24px;
    }

    .pane-title {
        font-size: 24px;
    }
}