/* Custom Animations and Utilities */

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

/* Fade In Up Animation Classes */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered Delays */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }

/* Custom Hover Underline Animation */
.hover-underline-animation {
    display: inline-block;
    position: relative;
}

.hover-underline-animation::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: currentColor;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Navbar Scrolled State Utilities */
.nav-scrolled {
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(8px);
    border-bottom-color: #e5e5e5 !important;
}

.nav-scrolled .nav-link, 
.nav-scrolled .nav-text {
    color: #111111 !important;
}

.nav-scrolled .nav-link:hover {
    color: #06638e !important;
}

/* Mobile Menu Active State */
.mobile-menu-active {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

/*
 * 3. Cambio de Logo al hacer Scroll
 * El selector .nav-scrolled en #navbar hace que el logo cambie.
 */
.nav-scrolled .logo-switch {
    /* Usa 'content' para anular el 'src' del HTML y cargar el logo negro */
    content: url('../image/logoletrasnegras.png');
}

/* Opcional: Asegúrate de que el logo blanco se carga por defecto */
.logo-switch {
    /* Si tienes tamaños específicos, defínelos aquí también */
    height: 45px; /* Ejemplo de tamaño, ajusta según necesidad */
    width: auto;
}


.pt-1 iframe{
    width: 40vw;
    height: 60vh;
}