/********** Template CSS **********/

/* ========================================= */
/* 1. CONFIGURACIÓN GENERAL & RESET          */
/* ========================================= */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

:root {
    --primary: #355EFC;
    --secondary: #E93C05;
    --tertiary: #555555;
    --light: #DFE4FD;
    --dark: #011A41;
}

.scroll-hidden {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.scroll-hidden.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ========================================= */
/* 2. TIPOGRAFÍA                             */
/* ========================================= */
h1, .h1, h2, .h2, .fw-bold {
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

h3, .h3, h4, .h4, .fw-medium {
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

h5, .h5, h6, .h6, .fw-semi-bold {
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    line-height: 1.1 !important;
}


/* ========================================= */
/* 3. COMPONENTES: SPINNER & BOTONES         */
/* ========================================= */
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 9999;
    pointer-events: none;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
    pointer-events: all;
}

.btn {
    transition: .5s;
    font-weight: 500;
}

.btn-primary,
.btn-outline-primary:hover {
    color: var(--light);
}

.btn-square { width: 38px; height: 38px; }
.btn-sm-square { width: 32px; height: 32px; }
.btn-lg-square { width: 48px; height: 48px; }

.btn-square, .btn-sm-square, .btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 30px;
    bottom: 30px;
    z-index: 99;
}


/* ========================================= */
/* 4. LAYOUT: NAVBAR                         */
/* ========================================= */
.fixed-top {
    transition: background-color .5s, box-shadow .5s;
    z-index: 1030;
    opacity: 1 !important;
    visibility: visible !important;
    background-color: rgba(255, 255, 255, 0.98) !important;
}

.top-bar {
    height: 45px;
    border-bottom: 1px solid rgba(53, 94, 252, .07);
}

.navbar .navbar-nav .nav-link {
    padding: 25px 15px;
    color: var(--tertiary);
    font-weight: 500;
    outline: none;
}

@media (max-width: 991.98px) {
    .navbar .navbar-nav {
        margin-top: 10px;
        border-top: 1px solid rgba(0, 0, 0, .07);
        background: #FFFFFF;
    }
    .navbar .navbar-nav .nav-link {
        padding: 10px 0;
    }
}


/* ========================================= */
/* 5. CARRUSEL: VISTA GENERAL (DESKTOP)      */
/* ========================================= */
.container-fluid:has(#header-carousel) {
    margin-top: 0;
}

#header-carousel {
    background: #ffffff !important;
}

#header-carousel .carousel-item {
    position: relative;
    min-height: 100vh;
}

#header-carousel .carousel-item img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    object-position: center;
}

.carousel-caption {
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: start;
    z-index: 2;
}

/* Animaciones */
#header-carousel.carousel-fade .carousel-item {
    opacity: 0;
    transition: opacity 2s ease-in-out !important;
}

#header-carousel.carousel-fade .carousel-item.active {
    opacity: 1;
}

#header-carousel .carousel-item.active img {
    animation: kenBurns 6s ease-in-out forwards;
}

@keyframes kenBurns {
    0% { transform: scale(1); }
    100% { transform: scale(1.05); }
}


/* ========================================= */
/* 6. CARRUSEL: SOLUCIÓN FINAL MÓVIL         */
/* ========================================= */
@media (max-width: 768px) {
    #header-carousel {
        margin-top: 75px !important; /* Espacio para el navbar móvil */
        background: #ffffff !important;
    }

    /* ELIMINAR CUALQUIER SOMBRA O FILTRO NEGRO */
    #header-carousel .carousel-item::before,
    #header-carousel .carousel-item::after {
        display: none !important;
        background: none !important;
    }

    #header-carousel .carousel-item {
        min-height: auto !important; 
        height: auto !important;
    }

    #header-carousel .carousel-item img {
        height: auto !important;
        min-height: 300px !important; /* Altura mínima para que cargue */
        max-height: 50vh !important;
        object-fit: contain !important; /* IMAGEN COMPLETA */
        background-color: #ffffff;
    }

    /* CAPTION: Texto debajo de la imagen para no taparla */
    .carousel-caption {
        position: relative !important;
        top: 0 !important;
        bottom: 0 !important;
        padding: 30px 20px !important;
        display: block !important;
        text-align: center !important;
    }

    .carousel-caption h1, 
    .carousel-caption .display-5 {
        font-size: 1.5rem !important;
        color: var(--dark) !important;
        text-shadow: none !important;
        background: transparent !important;
    }

    .carousel-caption p {
        color: var(--tertiary) !important;
        background: transparent !important;
    }

    /* Asegurar que los botones sean visibles */
    .carousel-control-prev-icon, 
    .carousel-control-next-icon {
        width: 2.5rem;
        height: 2.5rem;
    }
}


/* ========================================= */
/* 7. SECCIONES: FACTS, CALLBACK & ABOUT     */
/* ========================================= */
.page-header {
    padding-top: 12rem; padding-bottom: 6rem;
    background: url(../img/header.jpg) top left no-repeat;
    background-size: cover;
}

.facts {
    background: linear-gradient(rgba(53, 94, 252, .95), rgba(53, 94, 252, .95)), url(../img/bg.png);
}

.facts-item { transition: transform 0.3s ease; border-radius: 8px; }
.facts-item:hover { transform: translateY(-10px); background: rgba(255, 255, 255, 0.1); }

.callback::before {
    position: absolute; content: ""; width: 100%; height: 50%; top: 0; left: 0;
    background: linear-gradient(rgba(53, 94, 252, .95), rgba(53, 94, 252, .95)), url(../img/bg.png);
    z-index: -1;
}


/* ========================================= */
/* 8. SECCIONES: SERVICES & ABOUT            */
/* ========================================= */
.container-xxl .col-lg-6 > img.img-fluid { width: 100%; height: auto; display: block; object-fit: cover; }

.service .tab-pane .position-relative {
    height: 350px; overflow: hidden; border-radius: 8px;
}

.service .tab-pane .position-relative img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 767.98px) {
    .service .tab-pane .position-relative { height: 260px; }
}


/* ========================================= */
/* 9. SECCIONES: PROJECT & TEAM              */
/* ========================================= */
.project-item .project-img { overflow: hidden; border-radius: 8px; position: relative; }

.project-item .project-img a {
    position: absolute; width: 100%; height: 100%; top: 0; left: 0;
    background: rgba(255, 255, 255, .5);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: .5s;
}

.project-item:hover .project-img a { opacity: 1; }

.team-item { position: relative; padding: 4rem 0; isolation: isolate; overflow: hidden; }

.team-item .team-text {
    position: absolute; top: 0; right: 3rem; bottom: 0; left: 3rem;
    padding: 15px; border: 1px solid var(--light); border-radius: 8px;
    transition: .5s; z-index: 1;
}

.team-item:hover .team-text { background: var(--primary); }
.team-item:hover .team-text h4 { color: #FFFFFF; }


/* ========================================= */
/* 10. SECCIONES: TESTIMONIAL & FOOTER       */
/* ========================================= */
.testimonial-carousel .owl-dot {
    display: inline-block; margin: 0 5px; width: 30px; height: 30px;
    border: 1px solid var(--light); border-radius: 30px;
}

.footer .btn.btn-link { display: block; color: var(--light); transition: .3s; }
.footer .btn.btn-link:hover { color: var(--primary); letter-spacing: 1px; }

.copyright { color: var(--light); background: #000B1C; }


/* ========================================= */
/* 11. PORTFOLIO CARDS                       */
/* ========================================= */
.portfolio-card { transition: transform 0.35s ease; }
.portfolio-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}