/* ===================================
   INDEX PAGE LETTER ANIMATIONS
   Premium letter-by-letter reveal with BLUR
   Exact same effect as TourPage
   =================================== */

/* CSS Cleaned: Letter-by-letter animation removed */

/* Hide text elements initially to prevent flash before animation */
[data-i18n-key="experiences.lead"],
[data-i18n-key="services.lead"],
.moving-gallery .last-heading {
  opacity: 0; 
  /* Prevent word breaking at line ends */
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
}

/* Show container once letters are added by JS */
[data-i18n-key="experiences.lead"].animating,
[data-i18n-key="services.lead"].animating,
[data-i18n-key="services.lead.bottom"].animating,
.moving-gallery .last-heading.animating {
  opacity: 1; /* Handled by GSAP, removed !important */
}

/* Hero Title - Ensure it handles transforms/clip-path correctly */
.italic-text-4 {
  display: inline-block; /* Crucial for transform/clip-path */
  line-height: 1.25; /* Restore spacing destroyed by removing .word-wrapper */
  will-change: transform, opacity, filter;
  text-align: left; 
}

/* 
   SAFEGUARD: Prevent residual animation/hiding on split text 
   Since we removed the Webflow trigger, we must ensure any split spans stay visible
*/
/* Safeguard: Ensure split spans stay visible */
.split-lines_large span, 
.split-lines_large .word-span, 
.split-lines_large .letter-span {
  opacity: 1 !important;
  color: inherit !important;
  transform: none !important;
  filter: none !important;
}



/* =====================================================
   NAVBAR FIXED CON EFECTO EXCLUSIÓN
   El texto cambia de color automáticamente según el fondo
   ===================================================== */

/* Asegurar que el body no tenga transform que rompa fixed positioning */
html {
  scroll-behavior: smooth;
}

#navbar-exclusion.navbar-fixed {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 99999 !important;
  margin-top: 0px;
  margin-left: 0 !important;
 
  pointer-events: auto;
  /* Transparent at top */
  background: transparent;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.6s cubic-bezier(0.16, 1, 0.3, 1), margin-top 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: visible !important;
}

.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 100%;
  padding: 0 !important;
  padding-top: 0px;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), padding 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: visible !important; /* Permitir escalado de contenidos */
}

/* ===== FLOATING PILL SCROLLED STATE (positioning handled by inline styles) ===== */

/* Adjust container when scrolled */
#navbar-exclusion.navbar-fixed.scrolled .navbar-container {
  max-width: 100%;

 
  
}



/* ===== H2 STYLE-H1 WIDTH OVERRIDES ===== */
h2.style-h1.italic._03,
h2.style-h1._03.italic {
  width: fit-content !important;
  min-width: fit-content !important;
}



.navbar-container {
padding: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
#navbar-exclusion.navbar-fixed.scrolled {
  margin-top: 12px;
  padding: 0 !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
  margin-left: 0 !important;
}

/* Smaller logo when scrolled */
#navbar-exclusion.navbar-fixed.scrolled .navbar-logo {
  width: 36px;
}

/* Adjust text size when scrolled */
#navbar-exclusion.navbar-fixed.scrolled .navbar-title {
  font-size: 12px;
}

/* Adjust CTA button in scrolled state */
#navbar-exclusion.navbar-fixed.scrolled .header-contact-btn {
  padding: 8px 16px;
  font-size: 13px;
}

/* ===== EFECTO EXCLUSIÓN GLOBAL ===== */
/* El mix-blend-mode: difference invierte los colores del texto
   según el fondo: sobre fondo oscuro = texto blanco,
   sobre fondo claro = texto oscuro */

.navbar-fixed .navbar-title,
.navbar-fixed .nav-link-exclusion,
.navbar-fixed .header-contact-btn,
.navbar-fixed .lang-switch-exclusion select,
.navbar-fixed .menu-toggle-exclusion {
  color: white;
  /* mix-blend-mode: difference REMOVED FOR PERFORMANCE - CAUSES LAG */
}

.navbar-fixed .navbar-logo,
#navbar-exclusion .navbar-logo,
#navbar-exclusion.navbar-fixed.scrolled .navbar-logo {
  /* Logo NUNCA debe tener blend mode ni filter */
  mix-blend-mode: normal !important;
  filter: none !important;
}

/* Solo el menu toggle tiene blend mode, no el botón de contacto */
.navbar-fixed .menu-toggle-exclusion svg {
  filter: brightness(0) invert(1);
  mix-blend-mode: difference;
}

/* Icono del botón CTA hereda color del texto/borde */
.navbar-fixed .header-contact-btn svg {
  fill: currentColor !important;
  mix-blend-mode: normal !important;
  transition: fill 0.3s ease;
}

.navbar-fixed .header-contact-btn:hover svg {
  fill: #ffffff !important;
}

/* Cuando es PILL: icono hereda del padre (ya configurado en azul marca) */
#navbar-exclusion.scrolled .header-contact-btn svg,
#navbar-exclusion.navbar-fixed.scrolled .header-contact-btn svg {
  fill: currentColor !important;
}

/* ===== BRAND / LOGO ===== */
.navbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex: 1; /* Equal width as navbar-actions to center the links */
}

.navbar-logo {
  width: 42px;
  height: auto;
  transition: transform 0.3s ease;
}

.navbar-brand:hover .navbar-logo {
  transform: scale(1.05);
}

.navbar-title {
  font-family: Inter, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  margin: 0;
}

.navbar-title em {
  font-style: italic;
}

/* ===== NAVIGATION LINKS ===== */
.navbar-links {
  display: flex;
  gap: 8px;
  align-items: center;
}

.nav-link-exclusion {
  padding: 10px 16px;
  font-family: Inter, sans-serif;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.08em;
  text-decoration: none;
  border-radius: 4px;
  transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
  position: relative;
}

/* Barrita base (invisible por defecto) - BLANCA arriba */
.nav-link-exclusion::after {
  content: '';
  position: absolute;
  bottom: 4px; /* Increased spacing (was 6px) */
  left: 50%;
  right: 50%;
  height: 2px;
  background: #ffffff; /* Blanca cuando está arriba */
  border-radius: 2px;
  transition: left 0.3s ease, right 0.3s ease, background 0.3s ease;
}

/* Hover: la barrita crece desde el centro */
.nav-link-exclusion:hover::after {
  left: 16px;
  right: 16px;
}

.nav-link-exclusion:hover {
  transform: translateY(-1px);
}

.nav-link-exclusion.active {
  font-weight: 500;
}

/* Active: barrita siempre visible */
.nav-link-exclusion.active::after {
  left: 16px;
  right: 16px;
}

/* Cuando hacemos hover en OTRO link, ocultar la barrita del active */
.navbar-links:hover .nav-link-exclusion.active:not(:hover)::after {
  left: 50%;
  right: 50%;
}

#navbar-exclusion.scrolled .nav-link-exclusion,
#navbar-exclusion.navbar-fixed.scrolled .nav-link-exclusion,
#navbar-exclusion.navbar-fixed.scrolled .navbar-title {
  mix-blend-mode: normal !important;
  color: #042e4d !important; /* Texto oscuro */
}

/* Cuando es PILL (scrolled): barrita AZUL */
#navbar-exclusion.scrolled .nav-link-exclusion::after,
#navbar-exclusion.navbar-fixed.scrolled .nav-link-exclusion::after {
  background: #0070e0 !important; /* Azul claro marca cuando es pill */
  mix-blend-mode: normal !important;
}

/* Cuando es PILL (scrolled): language switcher oscuro */
#navbar-exclusion.scrolled .lang-btn,
#navbar-exclusion.navbar-fixed.scrolled .lang-btn {
  color: #042e4d !important; /* Texto oscuro */
}

/* Cuando es PILL (scrolled): botón CTA con borde azul marca */
#navbar-exclusion.scrolled .header-contact-btn,
#navbar-exclusion.navbar-fixed.scrolled .header-contact-btn {
  color: #0070e0 !important;
  border-color: #0070e0 !important;
  mix-blend-mode: normal !important;
}

/* Cuando es PILL (scrolled): hover del botón CTA AZUL MARCA */
#navbar-exclusion.scrolled .header-contact-btn:hover,
#navbar-exclusion.navbar-fixed.scrolled .header-contact-btn:hover {
  background: #0070e0 !important;
  border-color: #0070e0 !important;
  color: #ffffff !important;
  transform: scale(1.05) !important;
}

.scrolled .header-contact-btn:hover span,
#navbar-exclusion.navbar-fixed.scrolled .header-contact-btn:hover span {
  color: #ffffff !important;
}

#navbar-exclusion.scrolled .header-contact-btn:hover svg,
#navbar-exclusion.navbar-fixed.scrolled .header-contact-btn:hover svg {
  fill: #ffffff !important;
}

/* ===== TOUR CARDS ANIMATION OPTIMIZATION ===== */
.home-tour-card,
.home-card-tour-2 {
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
}

/* Ensure images inside cards don't cause layout shifts */
.main-tour-img {
  aspect-ratio: 16/9;
  object-fit: cover;
  background-color: #f0f0f0; /* Placeholder color */
}

/* ===== MOVING GALLERY & FINAL SECTION OPTIMIZATION ===== */
.moving-gallery {
  isolation: isolate;
  will-change: transform;
}

.moving-gallery-image {
  will-change: transform;
  transform: translateZ(0); /* Force 3D layer */
}

.div-block-106 {
  contain: layout style;
  will-change: opacity;
}

/* ===== ABOUT SECTION & LOGOS OPTIMIZATION ===== */
.about-card,
.logo-container {
  will-change: transform, opacity;
  /* Optimization: Isolate paint and layout */
  contain: paint layout;
  /* CRITICAL: Prevent CSS transitions from fighting GSAP */
  transition: none !important;
}

.logo-container img {
  /* Prevent browser from trying to upscale/rescale excessively */
  image-rendering: -webkit-optimize-contrast;
  max-width: 100%;
  height: auto;
}

/* ===== SERVICES ANIMATION OPTIMIZATION ===== */
/* Initial state for GSAP animation */
.service-animate-item {
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}

/* ===== NAVBAR ACTIONS ===== */
.navbar-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1; /* Equal width as navbar-brand to center the links */
  justify-content: flex-end; /* Align content to the right */
  overflow: visible !important; /* Permitir que el botón escale sin clipear */
}

/* Language Switch - Custom Dropdown con Banderas */
.lang-switch-exclusion {
  position: relative;
}

.lang-dropdown {
  position: relative;
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: white; /* Texto blanco */
  transition: all 0.25s ease;
}

.lang-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.1);
}

.lang-flag {
  width: 18px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.lang-options {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  padding: 4px;
  min-width: 100px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
  z-index: 1000;
}

.lang-dropdown.open .lang-options,
.lang-dropdown.show .lang-options {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Force close override to beat hover state */
.lang-options.force-close {
  opacity: 0 !important;
  visibility: hidden !important;
  display: none !important;
  pointer-events: none !important;
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-family: Inter, sans-serif;
  font-size: 14px;
  color: #333;
  transition: background 0.2s ease;
}

.lang-option:hover {
  background: #f0f0f0;
}

.lang-option.active {
  background: #e8f0fe;
  color: #2563eb;
}

/* ===== HEADER CONTACT BUTTON ===== */
.header-contact-btn {
  color: inherit;
}

/* Hover: fondo azul con texto blanco */
.header-contact-btn:hover {
  background: #0070e0 !important;
  border-color: #0070e0 !important;
  color: #ffffff !important;
  transform: scale(1.05) !important;
}

.header-contact-btn:hover svg {
  fill: #ffffff !important;
}

.header-contact-btn:hover span {
  color: #ffffff !important;
}

/* Menu Toggle (Mobile) */
.menu-toggle-exclusion {
  display: none;
  background: transparent;
  border: none;
  padding: 8px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.menu-toggle-exclusion:hover {
  transform: scale(1.1);
}

.menu-toggle-exclusion svg {
  width: 24px;
  height: 24px;
}

/* ===== RESPONSIVE ===== */
@media screen and (max-width: 991px) {
  .navbar-fixed {
    padding: 1em 2.5em;
  }
  
  .navbar-links {
    display: none;
  }
  
  .menu-toggle-exclusion {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .header-contact-btn span {
    display: none;
  }
  
  .header-contact-btn {
    display: none !important;
  }
  
  /* Scrolled state adjustments for tablet */
  #navbar-exclusion.navbar-fixed.scrolled {
    max-width: 70%;
    padding: 0.5em 1.5em;
  }
  
  #navbar-exclusion.navbar-fixed.scrolled .navbar-container {
    gap: 1.5em;
  }
}

@media screen and (max-width: 767px) {
  .navbar-fixed {
    padding: 0.8em 1.5em;
  }
  
  .navbar-logo {
    width: 36px;
  }
  
  .navbar-title {
    font-size: 12px;
  }
  
  /* Scrolled state adjustments for mobile tablet */
  #navbar-exclusion.navbar-fixed.scrolled {
    max-width: 85%;
    padding: 0.4em 1.2em;
    top: 0.75em !important;
  }
  
  #navbar-exclusion.navbar-fixed.scrolled .navbar-logo {
    width: 32px;
  }
  
  #navbar-exclusion.navbar-fixed.scrolled .navbar-title {
    font-size: 11px;
  }
}

@media screen and (max-width: 479px) {
  .navbar-fixed {
    padding: 0.6em 1em;
  }
  
  .navbar-logo {
    width: 32px;
  }
  
  .navbar-actions {
    gap: 8px;
  }
  
  .lang-switch-exclusion select {
    font-size: 12px;
    padding: 6px 2px;
  }
  
  .header-contact-btn {
    padding: 8px 10px !important;
  }
  
  .header-contact-btn svg {
    width: 16px !important;
    height: 16px !important;
  }
  
  /* Scrolled state adjustments for small mobile */
  #navbar-exclusion.navbar-fixed.scrolled {
    max-width: 94%;
    padding: 0.35em 0.8em;
    top: 0.5em !important;
  }
  
  #navbar-exclusion.navbar-fixed.scrolled .navbar-container {
    gap: 1em;
    padding: 0.4em 0.8em;
  }
  
  #navbar-exclusion.navbar-fixed.scrolled .navbar-logo {
    width: 28px;
  }
  
  #navbar-exclusion.navbar-fixed.scrolled .navbar-title {
    font-size: 10px;
  }
}

/* ===== H2 STYLE-H1 WIDTH OVERRIDES ===== */
h2.style-h1.italic._03,
h2.style-h1._03.italic {
  width: fit-content !important;
  min-width: fit-content !important;
}

/* ===== FIX INTRO TEXT WRAPPING ===== */
/* Force the specific headings in the scrolling text section to match content width */
#intro .div-block-50 .style-h1._01,
#intro .div-block-49 .style-h1.italic._03,
.style-h1._01,
.style-h1.italic._03 {
  width: fit-content !important;
  max-width: none !important;
  white-space: nowrap !important;
}

/* ========================================
   FOOTER REVEAL (CURTAIN EFFECT)
   ======================================== */
#main-content-wrapper {
  background-color: #ffffff; /* Must be opaque to hide footer */
  position: relative;
  z-index: 100; /* Increased to stay above footer and most content */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  display: flow-root;
}

#nt-tours-footer-reveal {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  visibility: visible !important; /* Forced visible for reveal */
}

#nt-footer-spacer {
  display: block !important;
  width: 100%;
  height: 0; /* Default to 0, let JS set it for Tours/Gallery */
  pointer-events: none;
}

/* FIX: Restore explicit height ONLY for Index (body.body) to ensure full reveal */
body.body #nt-footer-spacer {
  height: 2000px !important;
  min-height: 94vh;
}


/* Fix for mobile where reveal might look jittery */
@media (max-width: 767px) {
  #nt-tours-footer-reveal {
    position: relative;
    visibility: visible;
    z-index: auto;
  }
  #main-content-wrapper {
    padding-bottom: 0 !important;
    box-shadow: none;
  }
  #nt-footer-spacer {
    display: none;
  }
  
  /* Increase gap between tour cards on home page */
  .tours-2 {
    display: flex !important;
    flex-direction: column !important;
    gap: 44px !important; /* Original was likely 24px, now +20px */
  }
}