@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{

--primary:#0C5ADB;
--secondary:#0A2540;
--accent:#22D3EE;
--gold:#E6B325;
--white:#ffffff;
--black:#0b0b0b;
--text:#596172;
--light:#F7FAFC;
--border:#E5E7EB;
--radius:22px;
--shadow:
0 15px 45px rgba(0,0,0,.08);
--shadow-lg:
0 35px 80px rgba(0,0,0,.12);
--transition:.35s;

}

/*======================================================
RESET
========================================================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Poppins',sans-serif;
background:#fff;
overflow-x:hidden;
color:#333;
line-height:1.7;
}

section{
position:relative;
padding:110px 0;

}

img{
max-width:100%;
display:block;
}

a{
text-decoration:none;
transition:.35s;
}

ul{
list-style:none;
padding:0;
margin:0;
}

/*======================================================
SCROLLBAR
========================================================*/

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:#f5f5f5;
}

::-webkit-scrollbar-thumb{

background:linear-gradient(
    180deg,
    var(--primary),
    #003463

);

border-radius:50px;
}

/*======================================================
BODY BACKGROUND
========================================================*/

body::before{

    content:"";
    position:fixed;
    width:700px;
    height:700px;
    background:#003463;
    filter:blur(180px);
    opacity:.05;
    left:-250px;
    top:-250px;
    pointer-events:none;

}

body::after{
content:"";
position:fixed;
width:600px;
height:600px;
background:#003463;
filter:blur(180px);
opacity:.04;
right:-200px;
bottom:-200px;
pointer-events:none;

}

/*======================================================
NAVBAR
========================================================*/

.custom-navbar{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;

    padding: 25px 0;
    background: transparent;
    transition: all .4s ease;
    z-index: 9999;
}

.custom-navbar.scrolled{

    background: rgba(10, 37, 64, 0.75); /* Oscuro transparente */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 15px 0;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);

}

/* Al hacer scroll */

.custom-navbar.scrolled{
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    padding:15px 0;

}


/* .logo{
    align-items:center;
} */

.logo-icon{
    width: 260px;
    height: 60px;
    display: flex;
    align-items: center;
}

.logo-icon img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.nav-link{
    color: #fff;
    font-weight: 500;
    margin-left: 30px;
    position: relative;
    transition: .3s;
}

.custom-navbar.scrolled .nav-link{
    color:#fff;
}

.custom-navbar.scrolled .logo{
    color: #fff;
}

.nav-link::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:0;
    height:2px;
    background:#a2c52e;
    transition:.4s;

}

.nav-link:hover::after{
    width:100%;

}

.custom-navbar .nav-link:hover{
    color: #ffffff !important;
}
/*======================================================
BUTTONS
========================================================*/

.btn-primary{
    background:
    linear-gradient(
    135deg,
    #0C5ADB,
    #2563EB

);

    border:none;
    padding:16px 38px;
    border-radius:60px;
    font-weight:600;
    box-shadow:
    0 15px 35px rgba(12,90,219,.35);
    transition:.4s;

}

.btn-primary:hover{

    transform:translateY(-6px);
    box-shadow:
    0 25px 50px rgba(12,90,219,.45);

}

.btn-light{
    padding:16px 38px;
    border-radius:60px;
    font-weight:600;

}

.btn-primary.btn-asesoria{
    background: #003463 !important;
    border-color: #003463 !important;
    box-shadow: 0 15px 35px rgba(0,52,99,.35);
}

.btn-primary.btn-asesoria:hover{
    background: #00284d !important;
    border-color: #00284d !important;
    box-shadow: 0 25px 50px rgba(0,52,99,.45);
}




/*======================================================
HERO
========================================================*/
.hero{
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;

    background: linear-gradient(
        90deg,
        rgba(6,23,43,.92),
        rgba(6,23,43,.78)
    );
}



.hero-slider{
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.hero-slide{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    opacity: 0;
    transform: scale(1);

    transition:
        opacity 1s ease,
        transform 10s linear;
}

.hero-slide.active{
    opacity: 1;
    transform: scale(1.10);
}



.hero-overlay{
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(6,23,43,.88),
            rgba(6,23,43,.65)
        ),
        radial-gradient(
            circle at top right,
            rgba(34,211,238,.15),
            transparent 40%
        );

    z-index: 2;
}



.hero .container{
    position:relative;
    z-index:10;
    padding-left:70px;
}

.hero-buttons{
    display:flex;
    gap:10px;
    margin-top:10px;

}

.hero-buttons .btn{
    font-size:15px;
    padding:10px 24px;
}

.hero-title{
    font-size:48px;
    font-weight:700;
    line-height:1.15;
    color:#fff;
    max-width:620px;
    margin-bottom:22px;
}

.hero-description{
     font-size:15px;
    line-height:1.5;
    color:#d8e5f5;
    max-width:560px;
    margin-bottom:38px;
    text-align: justify;
}

.hero-badge{
    display:inline-block;
    padding:12px 24px;
    border-radius:50px;
    font-size:15px;
    font-weight:600;
    margin-bottom:25px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(20px);
    color:#fff;
    border:1px solid rgba(255,255,255,.18);
}



/* animacion */

/* Estado inicial */
.hero-title,
.hero-description,
.hero-buttons{
    opacity: 0;
}

/* Título y descripción: izquierda → derecha */
.hero-title.animate-left,
.hero-description.animate-left{
    animation: heroLeft 2.8s ease forwards;
}

/* Botones: abajo → arriba */
.hero-buttons.animate-bottom{
    animation: heroBottom .9s ease forwards;
    animation-delay: .4s;
}

/* Animación izquierda */
@keyframes heroLeft{

    0%{
        opacity:0;
        transform:translateX(-80px);
    }

    100%{
        opacity:1;
        transform:translateX(0);
    }

}

/* Animación abajo */
@keyframes heroBottom{

    0%{
        opacity:0;
        transform:translateY(60px);
    }

    100%{
        opacity:1;
        transform:translateY(0);
    }

}

/*==========================
TARJETAS Y SCROLL
==========================*/

.floating-card,
.scroll-down,
.hero-circle{
    position: absolute;
    z-index: 10;
}

/*======================================================
FLOAT CARDS
========================================================*/
/*=========================================
TARJETAS FLOTANTES ABOUT
=========================================*/

.about-image{
    position:relative;
    max-width:520px;
    margin:auto;
}

.about-image img{
    border-radius:30px;
}

.floating-card{

    position:absolute;
    width:200px;
    padding:22px;
    background:rgba(255,255,255,.97);
    border-radius:22px;
    backdrop-filter:blur(20px);
    box-shadow:0 15px 40px rgba(0,0,0,.15);
    z-index:10;
    animation:float 6s ease-in-out infinite;
    transition:.4s;
}

.floating-card:hover{
    transform:translateY(-8px);
}

.floating-card i{
    font-size:28px;
    color:#003463;
    margin-bottom:12px;

}

.floating-card h5{
    font-size:30px;
    font-weight:800;
    margin-bottom:4px;
    color:#003463;
}

.floating-card span{

    font-size:14px;

    color:#666;

    line-height:1.5;

}

/* Superior izquierda */
.card-one{

    top:-30px;

    left:-50px;

}

/* Centro derecha */
.card-two{

    top:50%;

    right:-70px;

    transform:translateY(-50%);

    animation-delay:2s;

}

/* Inferior izquierda */
.card-three{

    bottom:-30px;

    left:-20px;

    animation-delay:4s;

}

@keyframes float{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }

}


/* SERVICIOS 4 IMAGENES */

.nuestros{
    opacity: 0;
    animation: nuestrosUp 1.2s ease forwards;
}

@keyframes nuestrosUp{

    from{
        opacity: 0;
        transform: translateY(60px);
    }

    to{
        opacity: 1;
        transform: translateY(0);
        opacity: 1;
    }

}


.companies-title{
    font-size: 48px;
    font-weight: 500;
    color: #000;
    line-height: 1.2;
}

.service-card{
    position:relative;
    overflow:hidden;
    border-radius:15px;
    height:350px;
    cursor:pointer;
}

/* Imagen */

.service-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.5s;
}

/* Capa oscura */

.service-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.65);

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;
    padding:30px;

    opacity:0;
    transition:.4s;
}

/* Contenido */

.service-content{
    color:#fff;
    transform:translateY(20px);
    transition:.4s;
}

.service-content h3{
    font-size:28px;
    font-weight:700;
    margin-bottom:15px;
}

.service-content p{
    font-size:16px;
    line-height:1.7;
    margin:0;
}

/* Hover */

.service-card:hover img{
    transform:scale(1.08);
    filter:brightness(.6);
}

.service-card:hover .service-overlay{
    opacity:1;
}

.service-card:hover .service-content{
    transform:translateY(0);
}


/*======================================================
FEATURES
========================================================*/

.hero-features{
    display:flex;
    gap:35px;
    margin-top:45px;
    color:#fff;
    font-size:18px;

}

.hero-feature{

    display:flex;
    align-items:center;
    gap:10px;
    color:#fff;
    font-weight:500;
}

.hero-feature i{
    color:#a3c62e;
}


/* animacion de ofrecemos */

.reveal-right{
    opacity:0;
    transform:translateX(120px);
    transition:1s ease;

}

.reveal-right.active{
    opacity:1;
    transform:translateX(0);
}

/*==============================
ANIMACIÓN TARJETAS
==============================*/

.reveal-up{
    opacity:0;
    transform:translateY(80px);
    transition:.9s ease;

}

.reveal-up.active{
    opacity:1;
    transform:translateY(0);
}

.reveal-up:nth-child(1){
    transition-delay:.1s;
}

.reveal-up:nth-child(2){
    transition-delay:.3s;
}

.reveal-up:nth-child(3){
    transition-delay:.5s;
}

.reveal-up:nth-child(4){
    transition-delay:.7s;
}



/*======================================================
SCROLL DOWN
========================================================*/

.scroll-down{
    position:absolute;
    bottom:35px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    color:#fff;
    font-size:14px;
    letter-spacing:3px;
    animation:updown 2s infinite;

}

.scroll-down i{
    font-size:26px;
}

/*======================================================
ANIMATIONS
========================================================*/

@keyframes float{
    0%{
    transform:translateY(0px);
    }

    50%{
        transform:translateY(-18px);
    }

    100%{
        transform:translateY(0px);
    }

    }

    @keyframes updown{

    0%{
        transform:translate(-50%,0);
    }

    50%{
        transform:translate(-50%,10px);
    }

    100%{
        transform:translate(-50%,0);
    }

}



/* carrusel */
.servicesSwiper{
    padding-bottom:70px;
}

.swiper-pagination{
    position:relative;
    margin-top:40px;
}

.swiper-pagination-bullet{
    width:30px;
    height:8px;
    border-radius:20px;
    background:#9bb2cf;
    opacity:1;
    transition:.3s;
}

.swiper-pagination-bullet-active{
    width:45px;
    background:#0C5ADB;
}



/* beneficios */
.benefits-section{

    position: relative;
    padding:120px 0;
   background-image: url("../images/im4.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed; /* Parallax */
    overflow:hidden;

}

.benefits-section::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;

    background:rgba(0,0,0,.55); /* oscurece la imagen */

    z-index:1;
}

.benefits-section .container{
    position:relative;
    z-index:2;
}

/* Texto superior */
.section-tag.beneficios{
    color: #ffffff;
}

/* Título */
.section-title.beneficios{
    color: #ffffff;
}

/* Contenedor de cada beneficio */
.benefit-item.beneficios h5{
    color: #ffffff;
    font-weight: 700;
}

/* Descripción */
.benefit-item.beneficios p{
    color: rgba(255,255,255,.85);
}

/* Ícono */
.benefit-item.beneficios i{
    color: #a2c52e;
    font-size: 28px;
}

.service-check{
    color: #a2c52e; /* Tu color corporativo */
    font-size: 16px;
    margin-right: 8px;
}


/* quienes somos */
.section-title.quienes{
    color: #000;
    font-weight: 500;
    font-size:  48px;
    line-height: 1.2;
}




/* contacnto */


.contact-section{
    background:#F3F4F6;
    padding:100px 0;
}

.contact-box{
    display:flex;
    overflow:hidden;
    border-radius:20px;
    box-shadow:0 20px 60px rgba(0,0,0,.10);

}

.contact-section .section-tag{
    display:inline-block;
    padding:8px 20px;
    border-radius:50px;
    background:#EAF2FF;
    color:#0C5ADB;
    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
    margin-bottom:20px;
}

.contact-section .section-title{
    font-size:42px;
    font-weight:700;
    color:#0A2540;
    margin-bottom:20px;
}

.contact-section p{
    color:#6B7280;
    line-height:1.8;
    font-size:16px;
}

.contact-info{
    margin-top:40px;
}

.contact-info p{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:18px;
    color:#0A2540;
    font-weight:500;
}

.contact-info i{
    width:45px;
    height:45px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#003463;
    color:#fff;
    font-size:18px;
}



/* formulario */

.contact-section form{
    background:#fff;
    padding:45px;
    border-radius:18px;
    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.contact-section .form-control{
    border:none;
    background:#F5F7FA;
    border-radius:12px;
    padding:16px 18px;
    font-size:15px;
    box-shadow:none;
    transition:.3s;

}

.contact-section textarea{
    resize:none;
}

.contact-section .form-control:focus{
    background:#fff;
    border:1px solid #0C5ADB;
    box-shadow:0 0 0 4px rgba(12,90,219,.12);

}


/* footer */

.footer{
    background:#000;
    color:#BDBDBD;
    padding:90px 0 30px;

}

.footer h3{
    color:#FFF;
    font-size:32px;
    font-weight:700;
    margin-bottom:25px;
    letter-spacing:1px;

}

.footer h5{
    color:#FFF;
    margin-bottom:25px;
    font-size:18px;
    font-weight:600;
    position:relative;
    padding-bottom:12px;

}

.footer h5::after{

    content:"";
    width:45px;
    height:2px;
    background:#a3c62e;
    position:absolute;
    left:0;
    bottom:0;

}

.footer p{
    color:#9CA3AF;
    line-height:1.9;
    font-size:15px;

}

.footer ul{
    list-style:none;
    padding:0;
    margin:0;
}

.footer ul li{
    margin-bottom:14px;
}

.footer ul li a{
    color:#9CA3AF;
    text-decoration:none;
    transition:.35s;

}

.footer ul li a:hover{
    color:#a3c62e;
    padding-left:8px;

}

.social-links{
    display:flex;
    gap:14px;
    margin-top:25px;

}

.social-links a{

    width:46px;
    height:46px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#FFF;
    font-size:18px;
    transition:.35s;

}

.social-links a:hover{
    background:#a3c62e;
    border-color:#a3c62e;
    color:#000;
    transform:translateY(-5px);

}


/* boton formulario */


.btn-contacto{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:14px 34px;
    background:#1F2937;
    color:#fff;
    border:1px solid #3B4554;
    border-radius:8px;
    font-size:15px;
    font-weight:600;
    letter-spacing:.5px;
    text-transform:uppercase;
    cursor:pointer;
    transition:.35s ease;

}

.btn-contacto i{
    font-size:16px;
    transition:.35s;
}

.btn-contacto:hover{
    background:#000;
    border-color:#a3c62e;
    color:#a3c62e;
    box-shadow:0 12px 30px rgba(0,0,0,.25);
}

.btn-contacto:hover i{
    transform:translateX(6px);
}


/* NUESTRO EQUIPO */


.team-section{
    padding:120px 0;
    background:#f7f9fc;

}

.team-card{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    cursor:pointer;

}

.team-card img{
    width:100%;
    height:420px;
    object-fit:cover;
    transition:.7s;
    filter:brightness(.45);

}

.team-overlay{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    padding:30px;
    color:#fff;
    transform:translateY(80px);
    transition:.6s;
    background:linear-gradient(
        transparent,
        rgba(0,0,0,.85)
    );

}

.team-overlay h4{
    margin-bottom:5px;
    font-weight:700;

}

.team-overlay span{
    color:#d4d4d4;
    display:block;
    margin-bottom:18px;

}

.team-social{
    display:flex;
    gap:12px;

}

.team-social a{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#fff;
    transition:.3s;

}

.team-social a:hover{
    background:#0C5ADB;
}

.team-card:hover img{
    transform:scale(1.12);
    filter:brightness(1);
}

.team-card:hover .team-overlay{
    transform:translateY(0);
}
/*=========================================
ANIMACIÓN DE ENTRADA EQUIPO
=========================================*/



.team-header{

    opacity:0;
    transform:translateY(60px);
    transition:all .8s ease;

}

.team-header.show{

    opacity:1;
    transform:translateY(0);

}

.team-item{
    opacity:0;
    transform:translateY(60px);
    transition:all .8s ease;
}

.team-item.show{
    opacity:1;
    transform:translateY(0);
}


/* mision */

.mission-section{
    padding:90px 0;
    background:#f7f9fc;
}

.section-title{
    text-align:center;
    margin-bottom:60px;
}

.section-title span{
    font-weight:600;
    letter-spacing:2px;
    font-size:.9rem;
}

.section-title h2{
    margin-top:10px;
    font-size:2.5rem;
    font-weight:700;
    color:#1f2937;
}

.line{
    width:80px;
    height:4px;
    background:#003463;
    margin:20px auto 0;
    border-radius:20px;
}

.mission-card{
    max-width:900px;
    margin:auto;
    background:#fff;
    padding:50px;
    border-radius:20px;
    display:flex;
    gap:35px;
    align-items:center;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    transition:.35s;
}

.mission-card:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 45px rgba(0,0,0,.12);
}

.mission-icon{
    min-width:110px;
    width:110px;
    height:110px;
    border-radius:50%;
    background:#003463;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-size:48px;
}

.mission-content p{
    margin:0;
    font-size:18px;
    line-height:1.9;
    color:#555;
    text-align:justify;
}



@media(max-width:768px){

    .mission-card{
        flex-direction:column;
        text-align:center;
        padding:35px 25px;
    }

    .mission-content p{
        text-align:center;
    }

}


.mission-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

@media(max-width:768px){
    .mission-grid{
        grid-template-columns:1fr;
    }
}

.mission-content h3{
    margin-bottom:15px;
    font-size:1.5rem;
    color:#003463;
    font-weight:700;
}

.hero-title{
    font-size: 5rem;
}

@media (max-width:768px){

    .hero-title{
        font-size: 2.6rem;
        line-height: 1.1;
    }

}

@media (max-width:768px){

    .hero-buttons{
        display:flex;
        flex-direction:column;
        gap:15px;
    }

    .hero-buttons .btn{
        width:100%;
    }

}

@media (max-width:768px){

.logo img{

    width:170px;

}

}

@media (max-width:768px){

    .hero-features{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:15px;
    }

}

/* *{
    outline:1px solid red;
} */


/* respnse */

@media (max-width: 991.98px) {

    .custom-navbar{
        padding:15px 0;
    }

    .logo-icon{
        width:180px;
        height:auto;
    }

    .navbar-toggler{
        border:none;
        box-shadow:none !important;
        background:#fff;
        border-radius:10px;
        padding:8px 12px;
    }

    .navbar-collapse{
        margin-top:15px;
        background:rgba(10,37,64,.98);
        border-radius:15px;
        padding:15px;
    }

    .navbar-nav{
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:10px;
    }

    .nav-item{
        width:100%;
    }

    .nav-link{
        margin-left:0;
        padding:12px 0;
        display:block;
        text-align:center;
        color:#fff !important;
    }

}

html,
body{
    overflow-x:hidden;
    width:100%;
}

.container,
.container-fluid{
    max-width:100%;
}