/* Coban Trips & Tours — base */
html { scroll-behavior: smooth; }
        
        body.overflow-hidden {
            overflow: hidden;
        }

        /* --- Estilos de Links Activos --- */
        .nav-active {
            color: #37952C !important;
            font-weight: 700 !important;
            position: relative;
        }
        .nav-active::after {
            content: ''; position: absolute; bottom: -4px; left: 50%;
            transform: translateX(-50%); width: 80%; height: 3px;
            background-color: #37952C; border-radius: 2px;
        }

        /* --- LÓGICA DE NAVBAR --- */
        #main-nav {
            transition: background-color 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease, backdrop-filter 0.4s ease;
        }

        /* Navbar Scrolled / Subpage - SOLO si el menú móvil está cerrado (:not(.menu-open)) */
        .subpage #main-nav:not(.menu-open),
        #main-nav.scrolled:not(.menu-open) {
            background-color: rgba(255, 255, 255, 0.95) !important;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            padding-top: 0px;
            padding-bottom: 0px;
        }

        .subpage #main-nav:not(.menu-open) .nav-link,
        #main-nav.scrolled:not(.menu-open) .nav-link { 
            color: #05312F;
            text-shadow: none;
        }
        
        .subpage #main-nav:not(.menu-open) .mobile-menu-btn-icon,
        #main-nav.scrolled:not(.menu-open) .mobile-menu-btn-icon { 
            color: #05312F !important; 
        }

        /* Homepage Transparent State O Menú Móvil Abierto (.menu-open) */
        .homepage #main-nav:not(.scrolled),
        #main-nav.menu-open { 
            background-color: transparent !important; 
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            box-shadow: none !important; 
            padding-top: 15px;
            border-bottom: none;
        }
        
        .homepage #main-nav:not(.scrolled) .nav-link,
        #main-nav.menu-open .nav-link {
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
            color: white;
        }
        
        .homepage #main-nav:not(.scrolled) .mobile-menu-btn-icon,
        #main-nav.menu-open .mobile-menu-btn-icon { 
            color: white !important; 
        }

        .homepage #main-nav:not(.scrolled) .nav-link.nav-active,
        #main-nav.menu-open .nav-link.nav-active { 
            color: #FFFFFF !important; 
            border-bottom-color: #FFFFFF;
        }
        
        .homepage #main-nav:not(.scrolled) .nav-active::after,
        #main-nav.menu-open .nav-active::after { 
            background-color: #FFFFFF; 
            height: 3px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.5);
        }

        /* Animación menú móvil */
        .mobile-item-enter {
            opacity: 0;
            transform: translateY(20px);
            animation: itemSlideUp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
        }
        @keyframes itemSlideUp {
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* Utilidad para ocultar elementos hasta que Alpine cargue */
        [x-cloak] { display: none !important; }

        /* COBAN — Modern Clean: sistema visual compartido */
        :root { --mc-forest:#05312f; --mc-green:#287d48; --mc-ink:#242a27; --mc-cream:#f7f5ef; --mc-line:#e7e3d8; }
        body { background:#f7f5ef; }
        #main-nav { transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease; border-bottom:1px solid transparent; }
        .subpage #main-nav:not(.menu-open), #main-nav.scrolled:not(.menu-open) {
            background:rgba(255,255,255,.97)!important; border-color:rgba(5,49,47,.09);
            box-shadow:0 2px 16px rgba(15,36,31,.035); backdrop-filter:blur(14px);
        }
        #desktop-nav .nav-link { font-size:.875rem; font-weight:500; letter-spacing:.005em; transition:color .2s ease; }
        #desktop-nav .nav-link:hover { color:var(--mc-green)!important; }
        #desktop-nav .nav-active { font-weight:600!important; }
        #desktop-nav .nav-active::after { width:65%; height:2px; bottom:0; background:var(--mc-green); box-shadow:none; }
        .homepage #main-nav:not(.scrolled):not(.menu-open) .nav-active::after { background:#fff; }
        /* Al desplegar menú móvil, la cabecera se vuelve clara y legible */
        #main-nav.menu-open { background:#fff!important; backdrop-filter:none!important; box-shadow:none!important;
            border-bottom:1px solid var(--mc-line); padding-top:0!important; padding-bottom:0!important; }
        #main-nav.menu-open .mobile-menu-btn-icon { color:var(--mc-forest)!important; }
        #mobile-navigation { background:var(--mc-cream)!important; color:var(--mc-forest); }
        #mobile-navigation a.mobile-item-enter:not(.mobile-contact) { color:var(--mc-forest)!important; }
        #mobile-navigation a.mobile-item-enter:not(.mobile-contact):hover { color:var(--mc-green)!important; }
        #mobile-navigation .mobile-contact { background:var(--mc-forest)!important; color:#fff!important; border-radius:12px;
            box-shadow:none!important; }
        #mobile-navigation .mobile-contact:hover { background:var(--mc-green)!important; }
        #mobile-navigation .mobile-language { color:var(--mc-forest)!important; }
        #mobile-navigation .mobile-social { color:var(--mc-forest)!important; }
        #mobile-navigation .mobile-divider { background:var(--mc-line)!important; }
        .mc-footer { background:var(--mc-forest); color:#fff; }
        .mc-footer a { transition:color .2s ease; }
        .mc-footer a:hover { color:#c1e2cb!important; }
        .mc-whatsapp a { background:#287d48!important; box-shadow:0 6px 20px rgba(5,49,47,.16)!important; }
        .mc-whatsapp a:hover { background:#216a3e!important; }
        @media (max-width:767px) {
            #mobile-navigation .mobile-nav-list { gap:1.15rem; }
            #mobile-navigation .mobile-nav-list > a:not(.mobile-contact) { font-size:1.65rem; font-weight:600; letter-spacing:-.025em; }
            #mobile-navigation .mobile-nav-list { padding-top:6rem; padding-bottom:2rem; }
        }
        @media (prefers-reduced-motion:reduce) {
            #main-nav, #mobile-navigation .mobile-item-enter { animation:none!important; transition:none!important; }
        }

/* NATURAL EDITORIAL — identidad compartida */
:root{--ne-forest:#173b32;--ne-cream:#faf7f0;--ne-leaf:#55745a;--ne-border:#e4dfd3;}
body{background:var(--ne-cream);}
#main-nav{border-bottom:1px solid transparent;}
.subpage #main-nav:not(.menu-open),#main-nav.scrolled:not(.menu-open){background:rgba(250,247,240,.98)!important;border-color:var(--ne-border);box-shadow:0 3px 12px rgba(23,59,50,.035);}
#desktop-nav .nav-link{font-size:.87rem;letter-spacing:.015em;font-weight:500;}
#desktop-nav .nav-active::after{height:1px;background:var(--ne-leaf);}
#desktop-nav a[href*="contacto"]{border-radius:3px!important;box-shadow:none!important;background:var(--ne-forest)!important;font-weight:600;}
#main-nav.menu-open{background:var(--ne-cream)!important;border-color:var(--ne-border);}
#mobile-navigation{background:var(--ne-cream)!important;}
#mobile-navigation .mobile-nav-list>a:not(.mobile-contact){font-size:clamp(1.5rem,6vw,2.1rem);font-weight:500;letter-spacing:-.035em;}
#mobile-navigation .mobile-contact{border-radius:3px!important;background:var(--ne-forest)!important;}
.mc-footer{background:#173b32;color:#f5f2e7;}
.mc-footer h3{font-weight:500;letter-spacing:-.025em;}
.mc-footer h4{font-weight:600;font-size:.78rem;letter-spacing:.14em;}
.mc-footer a:hover{color:#b7d3b5!important;}
.mc-whatsapp a{background:#456d51!important;box-shadow:0 4px 16px rgba(23,59,50,.18)!important;}
/* Contraste del icono sobre fondo claro del menú desplegado. */
        .homepage #main-nav.menu-open .mobile-menu-btn-icon,
        .subpage #main-nav.menu-open .mobile-menu-btn-icon,
        #main-nav.menu-open .mobile-menu-btn-icon {
            color: var(--ne-forest) !important;
        }
        #main-nav.menu-open .mobile-menu-btn-icon:hover {
            color: var(--ne-leaf) !important;
        }

        /* Página actual: subrayado editorial y contraste en ambos menús. */
        #desktop-nav a.nav-link.nav-active { font-weight: 700 !important; }
        #desktop-nav a.nav-link.nav-active::after { width: 72%; }
        #mobile-navigation .mobile-nav-list > a.mobile-nav-active:not(.mobile-contact) {
            color: var(--ne-forest) !important;
            font-weight: 700 !important;
            text-decoration: underline;
            text-decoration-color: var(--ne-leaf);
            text-decoration-thickness: 2px;
            text-underline-offset: 9px;
        }

.menu-delay-1 { animation-delay: 0.1s; }
.menu-delay-2 { animation-delay: 0.2s; }
.menu-delay-3 { animation-delay: 0.3s; }
.menu-delay-4 { animation-delay: 0.4s; }
.menu-delay-5 { animation-delay: 0.5s; }
.menu-delay-6 { animation-delay: 0.6s; }
.menu-delay-7 { animation-delay: 0.7s; }
.menu-delay-8 { animation-delay: 0.8s; }
.menu-delay-9 { animation-delay: 0.9s; }
/* Menú móvil: contenido comienza por debajo del navbar y no se recorta. */
@media (max-width:767px) {
  #main-nav { height:80px; z-index:60; }
  #mobile-navigation.mobile-navigation-overlay {
    position:fixed; inset:80px 0 0; width:100%;
    height:calc(100dvh - 80px); max-height:calc(100dvh - 80px);
    overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
    align-items:stretch; justify-content:flex-start;
    padding:0; background:var(--ne-cream,#faf7f0);
    -webkit-overflow-scrolling:touch;
  }
  #mobile-navigation .mobile-nav-list {
    flex:0 0 auto; min-height:100%; width:100%;
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    gap:clamp(17px,3.5dvh,31px);
    padding:clamp(24px,4dvh,42px) 20px max(34px,env(safe-area-inset-bottom));
    margin:0;
  }
  #mobile-navigation .mobile-nav-list > a:not(.mobile-contact) {
    font-size:clamp(1.35rem,5.5vw,1.85rem); line-height:1.25;
    text-align:center; max-width:100%; overflow-wrap:anywhere;
  }
  #mobile-navigation .mobile-contact { min-height:52px; display:inline-flex;align-items:center;justify-content:center; }
  #mobile-navigation .mobile-divider { margin-block:3px; }
}

/* Corrección menú móvil: cabecera sólida sobre portada hero. */
@media (max-width: 767px) {
  body.homepage #main-nav.menu-open,
  body.homepage #main-nav.menu-open:not(.scrolled),
  body.homepage #main-nav.menu-open.scrolled,
  body.subpage #main-nav.menu-open {
    background: #faf7f0 !important;
    background-color: #faf7f0 !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid #e4dfd3 !important;
    box-shadow: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  body.homepage #main-nav.menu-open .mobile-menu-btn-icon,
  body.subpage #main-nav.menu-open .mobile-menu-btn-icon {
    color: #173b32 !important;
  }
  #mobile-navigation.mobile-navigation-overlay {
    background: #faf7f0 !important;
  }
}


/* Se conserva el fondo transparente arriba y el fondo claro al desplazarse.
   Transición breve para evitar el desfase visual al navegar rápidamente. */
#main-nav { transition-duration: 0.12s; }
.homepage #servicios, .homepage #contacto { scroll-margin-top: 80px; }

/* Estado del navbar definido por el desplazamiento REAL, no por el momento
   en que Alpine actualiza su clase. Prioridad explícita para evitar retrasos. */
body.homepage.has-scrolled #main-nav:not(.menu-open) {
  background: #faf7f0 !important;
  background-color: #faf7f0 !important;
  border-bottom: 1px solid #e4dfd3 !important;
  box-shadow: 0 3px 12px rgba(23, 59, 50, .055) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body.homepage.has-scrolled #main-nav:not(.menu-open) .nav-link,
body.homepage.has-scrolled #main-nav:not(.menu-open) .mobile-menu-btn-icon {
  color: #173b32 !important;
  text-shadow: none !important;
}
body.homepage.has-scrolled #main-nav:not(.menu-open) .nav-active::after {
  background-color: #55745a !important;
  box-shadow: none !important;
}
body.homepage:not(.has-scrolled) #main-nav:not(.menu-open) {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  padding-top: 15px;
}
body.homepage:not(.has-scrolled) #main-nav:not(.menu-open) .nav-link,
body.homepage:not(.has-scrolled) #main-nav:not(.menu-open) .mobile-menu-btn-icon {
  color: #fff !important;
}
body.homepage:not(.has-scrolled) #main-nav:not(.menu-open) .nav-active::after {
  background-color: #fff !important;
}