/* Ajustes personalizados para el portfolio de Isaias */

/* --- AJUSTES DE LA FOTO DE INICIO (HOME) --- */

/* Asegura que el enfoque de la imagen esté en la parte superior (ojos/rostro) */
.vlt-fullpage-slider .vlt-section[data-anchor="Home"] .vlt-section__ken-burn-background img {
    object-position: center 15% !important;
}

/* Capa de degradado (overlay) en móvil/tablet para garantizar contraste del texto */
.vlt-fullpage-slider .vlt-section[data-anchor="Home"] .vlt-section__ken-burn-background::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(to bottom, rgba(22, 22, 22, 0.85) 0%, rgba(22, 22, 22, 0.4) 50%, rgba(22, 22, 22, 0.85) 100%) !important;
    pointer-events: none !important;
    z-index: 5 !important;
}

/* Diseño premium en pantallas grandes (Desktop): Foto a la derecha y texto sobre fondo oscuro limpio */
@media (min-width: 992px) {
    .vlt-fullpage-slider .vlt-section[data-anchor="Home"] .vlt-section__ken-burn-background {
        width: 50% !important;
        left: auto !important;
        right: 0 !important;
    }
    
    /* En desktop, el degradado difumina suavemente el borde izquierdo de la foto con el fondo negro del texto */
    .vlt-fullpage-slider .vlt-section[data-anchor="Home"] .vlt-section__ken-burn-background::after {
        background: linear-gradient(to right, #161616 0%, rgba(22, 22, 22, 0.7) 15%, rgba(22, 22, 22, 0.3) 45%, rgba(22, 22, 22, 0) 100%) !important;
        z-index: 5 !important;
    }

    /* Ajuste para equilibrar el contenedor de texto en la izquierda */
    .vlt-fullpage-slider .vlt-section[data-anchor="Home"] .container {
        padding-left: 15px !important;
    }
}

/* --- LOGO EN NAVBAR: POSICIONAMIENTO Y VUELO DE PANTALLA DE CARGA --- */

/* Comportamiento del logo durante la carga (Centrado en pantalla, Protagónico y Pulsante) */
html:not(.vlt-is-page-loaded) .vlt-navbar-logo {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 999999 !important; /* Por encima de la pantalla negra */
    pointer-events: none !important;
}

html:not(.vlt-is-page-loaded) .vlt-navbar-logo img {
    height: 30rem !important; /* Enorme tamaño para ocupar toda la pantalla en escritorio */
    width: auto !important;
    max-width: 90vw !important; /* Asegura adaptabilidad horizontal en cualquier pantalla */
    max-height: 75vh !important; /* Evita desbordamiento vertical */
    filter: drop-shadow(0 0 0px rgba(26, 110, 191, 0)) !important;
    animation: premium-logo-pulsing 2.5s infinite ease-in-out !important;
}

/* Comportamiento del logo al finalizar la carga (Viaja y se encoge hacia su esquina) */
html.vlt-is-page-loaded .vlt-navbar-logo {
    position: fixed !important;
    top: 2.5rem !important;
    left: 3.75rem !important;
    transform: translate(0, 0) !important;
    z-index: 999999 !important;
    pointer-events: auto !important;
    /* Curva de aceleración cubic-bezier premium para un deslizamiento fluido y elegante, con 1.5s de delay */
    transition: top 2.6s cubic-bezier(0.16, 1, 0.3, 1) 1.5s,
                left 2.6s cubic-bezier(0.16, 1, 0.3, 1) 1.5s,
                transform 2.6s cubic-bezier(0.16, 1, 0.3, 1) 1.5s !important;
}

html.vlt-is-page-loaded .vlt-navbar-logo img {
    height: 8.5rem !important; /* Tamaño majestuoso para la esquina */
    width: auto !important;
    transform: scale(1) !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 0px rgba(0,0,0,0)) !important;
    transition: height 2.6s cubic-bezier(0.16, 1, 0.3, 1) 1.5s,
                transform 2.6s cubic-bezier(0.16, 1, 0.3, 1) 1.5s,
                opacity 2.6s cubic-bezier(0.16, 1, 0.3, 1) 1.5s,
                filter 2.6s cubic-bezier(0.16, 1, 0.3, 1) 1.5s !important;
}

/* Efecto hover interactivo sobre el logo ya ubicado en su esquina */
html.vlt-is-page-loaded .vlt-navbar-logo:hover img {
    transform: scale(1.05) rotate(-1deg) !important;
    filter: drop-shadow(0 4px 15px rgba(26, 110, 191, 0.3)) !important;
}

/* Adaptabilidad responsive para el logo en la esquina y pantalla de carga */
@media only screen and (max-width: 1199px) {
    html.vlt-is-page-loaded .vlt-navbar-logo {
        top: 1.875rem !important;
        left: 1.875rem !important;
    }
}

@media only screen and (max-width: 767px) {
    html:not(.vlt-is-page-loaded) .vlt-navbar-logo img {
        height: 18rem !important; /* Más proporcionado para la pantalla de carga móvil sin perder el enorme impacto */
    }
    
    html.vlt-is-page-loaded .vlt-navbar-logo img {
        height: 6rem !important; /* Ligeramente más pequeño en móviles para perfecta armonía */
    }
}

/* Animación de pulso con resplandor glow premium adaptado al azul/verde del logo de Isaias */
@keyframes premium-logo-pulsing {
    0% {
        transform: scale(0.96);
        opacity: 0.35;
        filter: drop-shadow(0 0 0px rgba(26, 110, 191, 0));
    }
    50% {
        transform: scale(1.04);
        opacity: 1;
        filter: drop-shadow(0 0 55px rgba(29, 158, 117, 0.65)) drop-shadow(0 0 20px rgba(26, 110, 191, 0.55));
    }
    100% {
        transform: scale(0.96);
        opacity: 0.35;
        filter: drop-shadow(0 0 0px rgba(26, 110, 191, 0));
    }
}

/* --- PANTALLA DE CARGA (PRELOADER) ULTRA OSCURA --- */
.animsition-loading-2 {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: #0b0b0b !important; /* Negro puro premium */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 99999 !important; /* Debajo del logo (999999) */
    
    /* Retraso de salida elegante para coordinar con el logo */
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.5s,
                visibility 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.5s !important;
}

/* Cuando la página se marca como cargada, el preloader se desvanece de forma ultra elegante después de 1.5s */
html.vlt-is-page-loaded .animsition-loading-2 {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Ocultamos cualquier spinner o logo duplicado del preloader original */
.animsition-loading-2 .spinner,
.animsition-loading-2 .double-bounce-one,
.animsition-loading-2 .double-bounce-two {
    display: none !important;
}

/* Barra de carga premium: Fondo/Pista */
.animsition-loading-2::after {
    content: '' !important;
    position: absolute !important;
    bottom: 22% !important;
    width: 240px !important;
    height: 4px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5) !important;
    transition: opacity 0.5s ease !important;
}

/* Barra de carga premium: Barra activa animada (Glowing gradient bar) */
.animsition-loading-2::before {
    content: '' !important;
    position: absolute !important;
    bottom: 22% !important;
    width: 240px !important;
    height: 4px !important;
    background: linear-gradient(90deg, #1d9e75 0%, #1a6ebf 100%) !important;
    border-radius: 10px !important;
    box-shadow: 0 0 12px rgba(29, 158, 117, 0.8), 0 0 4px rgba(26, 110, 191, 0.8) !important;
    animation: premium-bar-loading 3.2s infinite cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    transform-origin: left !important;
    transition: opacity 0.5s ease !important;
}

/* Animación realista de barra de carga con aceleración y desaceleración elegantes */
@keyframes premium-bar-loading {
    0% {
        transform: scaleX(0);
        opacity: 0.8;
    }
    40% {
        transform: scaleX(0.7);
        opacity: 1;
    }
    70% {
        transform: scaleX(0.88);
        opacity: 1;
    }
    90% {
        transform: scaleX(0.99);
        opacity: 1;
    }
    100% {
        transform: scaleX(1);
        opacity: 0;
    }
}

/* Desvanecer la barra de carga cuando la página ya está lista */
html.vlt-is-page-loaded .animsition-loading-2::after,
html.vlt-is-page-loaded .animsition-loading-2::before {
    opacity: 0 !important;
}

/* --- ENTRADA COREOGRAFIADA PARA LOS ELEMENTOS DE LA INTERFAZ --- */

/* Ocultar el resto de la interfaz durante la pantalla de carga */
html:not(.vlt-is-page-loaded) .vlt-main,
html:not(.vlt-is-page-loaded) .vlt-navbar-inner--center,
html:not(.vlt-is-page-loaded) .vlt-navbar-inner--right,
html:not(.vlt-is-page-loaded) .vlt-fixed-socials,
html:not(.vlt-is-page-loaded) .vlt-fullpage-slider-progress-bar,
html:not(.vlt-is-page-loaded) .vlt-footer--fixed {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Desvanecimiento secuencial una vez cargada la página */
html.vlt-is-page-loaded .vlt-main {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 1.5s ease-in-out !important;
    transition-delay: 1.5s !important; /* Empieza a aparecer en sincronía con el desvanecimiento del preloader negro */
}

html.vlt-is-page-loaded .vlt-navbar-inner--center,
html.vlt-is-page-loaded .vlt-navbar-inner--right {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 1.5s ease-in-out !important;
    transition-delay: 2.8s !important; /* Aparece justo cuando el logo está terminando de aterrizar */
}

html.vlt-is-page-loaded .vlt-fixed-socials,
html.vlt-is-page-loaded .vlt-fullpage-slider-progress-bar,
html.vlt-is-page-loaded .vlt-footer--fixed {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 1.8s ease-in-out !important;
    transition-delay: 3.2s !important; /* Entrada secuencial elegante */
}

/* --- TIMELINE IMAGES --- */
.vlt-timeline-item img {
    max-width: 140px !important;
    max-height: 80px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
}

/* Ajustes finos para imágenes específicas */
.vlt-timeline-item img[src*="SITAIMX"] {
    transform: scale(1.7);
    transform-origin: left center;
}

.vlt-timeline-item img[src*="unacar"] {
    transform: scale(1.6);
    transform-origin: left center;
}

.vlt-timeline-item img[src*="copyser"] {
    transform: translateX(18px); /* Desplaza hacia la derecha para alinearse perfectamente con el texto de SITAI */
    border-radius: 50%; 
}

/* --- AJUSTES DE ESPACIADO PARA EVITAR SCROLL INTERNO --- */
.vlt-timeline-item {
    padding: 1.25rem 0 !important; /* Reduce enormemente el padding vertical entre items */
}

/* Comprime los márgenes (gaps) solo en la sección de Educación para que todo encaje en una vista */
.vlt-section[data-anchor="Education"] .vlt-gap-70 {
    height: 2.5rem !important; 
}
.vlt-section[data-anchor="Education"] .vlt-gap-50 {
    height: 1.5rem !important; 
}
.vlt-section[data-anchor="Education"] .vlt-gap-75 {
    height: 2rem !important; 
}
.vlt-section[data-anchor="Education"] h3 {
    margin-bottom: 0 !important;
}

/* --- TECH LOGOS --- */
.tech-icon-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.vlt-partners li img {
    max-height: 55px !important;
    width: auto !important;
    object-fit: contain !important;
    margin: 0 auto;
}
.tech-name {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- PROJECTS SLIDER --- */
.vlt-project-title {
    font-size: clamp(3.5rem, 6vw, 7rem) !important; /* Texto adaptable que se encoge en pantallas pequeñas */
    line-height: 1.1 !important;
    margin-bottom: 1.5rem !important;
}
.vlt-project-excerpt {
    margin-bottom: 2rem !important;
}
.vlt-section[data-anchor="Projects"] .vlt-gap-100 {
    height: 3rem !important; /* Reduce el gran margen superior del slider */
}

/* --- RESPONSIVIDAD MÓVIL (DESACTIVAR FULLPAGE SCROLL) --- */
@media only screen and (max-width: 991px) {
    /* Permitir que la altura del slider y las secciones sea dinámica (no más cortes) */
    .vlt-fullpage-slider,
    .vlt-fullpage-slider .vlt-section,
    .vlt-section__vertical-align,
    .vlt-section__content {
        height: auto !important;
        min-height: 100vh !important;
    }
    
    /* Anular la altura 100% que impide el crecimiento en flex */
    .vlt-fullpage-slider .vlt-section__vertical-align {
        height: auto !important;
        min-height: 100% !important;
    }

    /* Permitir overflow y restablecer la posición absoluta de pagePiling */
    .pp-section,
    .vlt-section.pp-scrollable {
        position: relative !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
    }

    /* Forzar que html y body permitan el scroll nativo */
    html, body {
        overflow-y: auto !important;
        height: auto !important;
    }

    /* Ajustar el padding vertical de las secciones en móviles para respirar */
    .vlt-fullpage-slider .vlt-section__content {
        padding: 5rem 15px !important; 
    }

    /* Ocultar barra lateral de progreso de pagePiling ya que no es necesaria con scroll continuo */
    .vlt-fullpage-slider-progress-bar {
        display: none !important;
    }
}