/* ============================================================================
   REAL X — Capa de marca sobre el sistema de diseño del template.
   Azul eléctrico, fondo oscuro navy, estados de runtime (navbar, sliders,
   acordeones, popups) y utilidades propias. Se carga DESPUÉS de site.min.css.
   ============================================================================ */

:root {
    /* Acento: azul eléctrico Real X (reemplaza el lima del template) */
    --color--base--accent: #1e6fff;
    --color--base--accent-dark: #0f57dd;
    /* Palabras acentuadas en headings: azul de marca */
    --color--text--heading-accent: #1e6fff;
    /* Verde oscuro del template → navy profundo Real X */
    --color--backgrounds--bg-green: #081c3f;
    --navbar--scroll-invert--dropdown-bg-initial: #081c3f;
}

/* El botón primario ahora es azul: texto blanco para contraste */
.primary-button { color: #fff; }
.primary-button:hover { color: #fff; }
.primary-button.is-grey { color: var(--color--base--black); }
.primary-button.is-grey:hover { background-color: var(--color--backgrounds--bg-subtle); color: var(--color--base--black); }

/* Tintes oscuros (popups / blur del footer) en navy en lugar de verde */
.popup-about, .popup-form { background-color: #05132bd9; }
.footer-bg-blur { background-color: #081c3f80; }

/* ---------------------------------------------------------------------------
   Navbar scroll-invert: al hacer scroll se redefinen las variables del variant
   --------------------------------------------------------------------------- */
.navbar { transition: background-color .35s ease, border-color .35s ease; }
.navbar-link, .navbar-dropdown-toggle, .dates, .brand-link { transition: color .35s ease; }
.brand-link img { transition: filter .35s ease; height: 2.4rem; width: auto; }
.footer-brand-link img { height: 2.6rem; width: auto; }

.navbar.is-scrolled {
    --navbar--scroll-invert--bg-initial: var(--color--backgrounds--bg-page);
    --navbar--scroll-invert--border-initial: var(--border--color-size--border-subtle);
    --navbar--scroll-invert--item-initial: var(--color--base--black);
    --navbar--scroll-invert--dropdown-bg-initial: var(--color--backgrounds--bg-page);
}
/* Logo claro → oscuro al invertir el navbar (conserva el matiz azul) */
.navbar.is-scrolled .brand-link img { filter: invert(1) hue-rotate(180deg); }

/* ---------------------------------------------------------------------------
   Menú móvil (burger) — implementación propia sin webflow.js
   --------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .navbar-menu-wrap {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--navbar--scroll-invert--dropdown-bg-initial);
        border-bottom: 1px solid var(--border--color-size--border-subtle);
        padding: 1rem 2rem 1.5rem;
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        max-height: calc(100vh - 4.5rem);
        overflow-y: auto;
    }
    .navbar.nav-open .navbar-menu-wrap { display: flex; }
    .navbar.nav-open {
        --navbar--scroll-invert--bg-initial: var(--navbar--scroll-invert--dropdown-bg-initial);
    }
    .navbar.nav-open.is-scrolled .navbar-menu-wrap { background-color: var(--color--backgrounds--bg-page); }
    /* En el panel móvil los links siempre legibles sobre su fondo */
    .navbar-menu-center .navbar-menu, .navbar-menu-right .navbar-menu { flex-direction: column; align-items: flex-start; }
    /* Burger → X */
    .navbar.nav-open .burger-icon .is-top,
    .navbar.nav-open .burger-icon .is-bottom { opacity: 0; }
    .navbar.nav-open .burger-cross .is-cross-1 { transform: rotate(45deg); }
    .navbar.nav-open .burger-cross .is-cross-2 { transform: rotate(-45deg); }
    .burger-line { transition: transform .3s ease, opacity .2s ease; }
}

/* Dropdown del navbar: animación de apertura */
.navbar-dropdown-list { min-width: 14rem; }
.w-dropdown-list.w--open { display: block; }

/* ---------------------------------------------------------------------------
   Estados iniciales de animación (evita FOUC). El JS añade html.rx-anim
   inmediatamente y GSAP revela con autoAlpha.
   --------------------------------------------------------------------------- */
html.rx-anim .heading-h1,
html.rx-anim .heading-h2,
html.rx-anim .star-icon,
html.rx-anim .hero-fade,
html.rx-anim .rx-reveal,
html.rx-anim .overview-detail,
html.rx-anim .overview-story-card,
html.rx-anim .slider-wrap,
html.rx-anim .levels-card,
html.rx-anim .experience-card,
html.rx-anim .room-accordion-wrap,
html.rx-anim .steps-number,
html.rx-anim .pricing-cards-wrap,
html.rx-anim .cta-image-wrap,
html.rx-anim .cta-emoji-wrap { visibility: hidden; }

/* Máscaras de líneas para headings (se autoran en el markup) */
.gsap_split_line-mask { position: relative; display: block; overflow: clip; }
.gsap_split_line { position: relative; display: block; }
.gsap_split_word { position: relative; display: inline-block; }

/* ---------------------------------------------------------------------------
   Sliders — runtime propio: pista por translateX igual que Webflow
   --------------------------------------------------------------------------- */
.w-slider-mask { touch-action: pan-y; }
.w-slide { transition: transform .55s cubic-bezier(.45,.05,.25,1); will-change: transform; }
.w-slider-dot { width: .6rem; height: .6rem; border-radius: 100vh; background-color: #ffffff66; cursor: pointer; }
.w-slider-dot.w-active { background-color: #fff; }
.left-arrow, .right-arrow { cursor: pointer; }
.left-arrow .arrow-icon svg { transform: rotate(90deg); }
.right-arrow .arrow-icon svg { transform: rotate(-90deg); }

/* Popup dentro de slides (asesores / destinos) */
.slide-popup { transition: width .45s cubic-bezier(.45,.05,.25,1), height .45s cubic-bezier(.45,.05,.25,1), background-color .45s ease; }
.slide-popup.is-open {
    width: min(26rem, calc(100% - 3rem));
    height: auto;
    min-height: 12rem;
    background-color: #0a1730a6;
    padding: 1.5rem;
    display: flex;
}
.slide-popup { display: flex; }
.slide-popup-content { transition: opacity .35s ease .15s; }
.slide-popup.is-open .slide-popup-content { opacity: 1; }
.plus-button { cursor: pointer; }
.plus-button .plus-icon { transition: transform .3s ease; }
.plus-button.is-open .plus-icon { transform: rotate(45deg); }

/* ---------------------------------------------------------------------------
   Acordeones (habitaciones/reservas, meses, faq, niveles móvil, pricing)
   --------------------------------------------------------------------------- */
.room-accordion-body, .day-accordion-body, .faq-accordion-body, .levels-card-body { height: 0; overflow: hidden; }
.chevron-button .chevron-icon, .pricing-dropdown-toggle .chevron-icon { transition: transform .35s ease; }
.is-open > .room-accordion-header .chevron-icon,
.is-open > .day-accordion-header .chevron-icon,
.is-open > .faq-accordion-header .chevron-icon,
.levels-card.is-open .chevron-icon,
.pricing-dropdown-toggle.is-open .chevron-icon { transform: rotate(180deg); }
.room-accordion-header, .day-accordion-header, .faq-accordion-header, .pricing-dropdown-toggle { cursor: pointer; }
.pricing-dropdown-content { position: static; background: transparent; display: block; height: 0; overflow: hidden; }

/* Línea que se llena al pasar el mouse / abrir */
.line-fill-wrap { overflow: hidden; position: relative; }
.line-fill-color { transform: translateX(-100%); transition: transform .5s cubic-bezier(.45,.05,.25,1); }
.room-accordion-wrap:hover .line-fill-color,
.room-accordion-wrap.is-open .line-fill-color,
.day-accordion:hover .line-fill-color,
.day-accordion.is-open .line-fill-color,
.footer-link:hover .line-fill-color { transform: translateX(0%); }

/* Imagen que sigue el cursor en los acordeones de programa */
.follow-cursor-wrap { display: flex; opacity: 0; transition: opacity .3s ease; }
.day-accordion-header:hover .follow-cursor-wrap { opacity: 1; }
.day-accordion.is-open .follow-cursor-wrap { opacity: 0 !important; }

/* Tabs de los meses */
.day-tab-pane { display: none; }
.day-tab-pane.w--tab-active { display: block; }

/* ---------------------------------------------------------------------------
   Iconos SVG en emoji-wrap (sin emojis: iconos de línea estilo iconoir)
   --------------------------------------------------------------------------- */
.emoji-wrap .rx-icon { width: 1.5rem; height: 1.5rem; color: var(--color--base--accent); display: block; }
.cta-emoji-wrap .rx-icon { width: 1.5rem; height: 1.5rem; color: var(--color--base--accent); display: block; }

/* Botón con estado de carga (envíos) */
.primary-button.is-loading { pointer-events: none; opacity: .75; }

/* ---------------------------------------------------------------------------
   Widget de traducción (Google Translate) dentro del navbar.
   El partial usa clases Tailwind que aquí no existen: se estiliza por ID.
   --------------------------------------------------------------------------- */
.rx-translate-slot { display: flex; align-items: center; }
#rx-lang-selector { position: relative; }
#rx-lang-toggle {
    display: flex; align-items: center; gap: .4rem;
    background: transparent;
    border: 1px solid #ffffff40;
    border-radius: 100vh;
    color: var(--navbar--scroll-invert--item-initial);
    font: inherit; font-size: .75rem; font-weight: 700;
    padding: .45rem .9rem; cursor: pointer;
    transition: border-color .25s ease, color .35s ease;
}
#rx-lang-toggle:hover { border-color: var(--color--base--accent); }
.navbar.is-scrolled #rx-lang-toggle { border-color: #21212133; }
#rx-lang-toggle i { display: none; }
#rx-lang-toggle::after {
    content: ""; width: .45rem; height: .45rem;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}
#rx-lang-dropdown {
    position: absolute; right: 0; top: calc(100% + .5rem);
    min-width: 11rem; z-index: 200;
    border-radius: 1rem; overflow: hidden;
    border: 1px solid #1e6fff33;
    box-shadow: 0 20px 40px #00000059;
}
#rx-lang-dropdown.hidden { display: none; }
#rx-lang-dropdown button {
    width: 100%; display: flex; align-items: center; gap: .7rem;
    background: transparent; border: 0; border-top: 1px solid #ffffff0d;
    color: #fff; font: inherit; font-size: .85rem;
    padding: .7rem 1rem; cursor: pointer; text-align: left;
}
#rx-lang-dropdown button:first-child { border-top: 0; }
#rx-lang-dropdown button:hover { background: #ffffff0f; }
#rx-lang-dropdown button span:first-child {
    font-size: .65rem; font-weight: 700; color: #9fb2cc;
    background: #ffffff12; border-radius: .3rem; padding: .15rem .35rem;
}
#rx-lang-dropdown i { display: none; }
@media (max-width: 991px) {
    .rx-translate-slot { order: 99; }
    #rx-lang-dropdown { left: 0; right: auto; }
}
/* Barra superior que inyecta Google Translate: fuera */
.goog-te-banner-frame, #goog-gt-tt { display: none !important; }
body { top: 0 !important; }

/* Video-link: escala suave al hover */
.video-link .video-thumbnail { overflow: hidden; }
.video-link .video-thumbnail img { transition: transform .6s cubic-bezier(.45,.05,.25,1); }
.video-link:hover .video-thumbnail img { transform: scale(1.06); }

/* Letras gigantes del footer */
.big-letter { cursor: default; transition: color .3s ease; }
.big-letter-wrap:hover .big-letter { color: #ffffffe6 !important; }

/* Tipos de viajero: 4 columnas en desktop como el template */
.layout-cards.rx-levels { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991px) { .layout-cards.rx-levels { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .layout-cards.rx-levels { grid-template-columns: 1fr; } }

/* Imágenes dentro de wraps siempre cubren */
.image-wrap.u-absolute-full img { width: 100%; height: 100%; object-fit: cover; }
.follow-cursor img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--border--color-size--radius-inner); }

/* Accesibilidad: sin animaciones si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
    html.rx-anim .heading-h1, html.rx-anim .heading-h2, html.rx-anim .star-icon,
    html.rx-anim .hero-fade, html.rx-anim .rx-reveal, html.rx-anim .overview-detail,
    html.rx-anim .overview-story-card, html.rx-anim .slider-wrap, html.rx-anim .levels-card,
    html.rx-anim .experience-card, html.rx-anim .room-accordion-wrap, html.rx-anim .steps-number,
    html.rx-anim .pricing-cards-wrap, html.rx-anim .cta-image-wrap, html.rx-anim .cta-emoji-wrap { visibility: visible; }
    .w-slide { transition: none; }
}