@import url("./core/variables.css");


/* =======================================================
   GENERAL
======================================================= */

body{
    background: var(--background-body);
    color: var(--text);
  
}

main{

    padding-top:50px;

}


/* =======================================================
   BGS
======================================================= */

.bg-primary-section{
    background:var(--bg-primary);
}

.bg-secondary-section{
    background:var(--bg-secondary);
}
#proceso .card{
    background:var(--background-surface);
}


/* =======================================================
   NAVBAR
======================================================= */
.navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1050;

    background:var(--navbar-background);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);


    padding-top: 1rem;

    padding-bottom: 1rem;

    box-shadow: 0 4px 24px rgba(15, 18, 30, 0.06);

    border-bottom: 1px solid var(--navbar-border);

}
/* =======================================================
   NAVBAR BRAND
======================================================= */

.navbar-brand img{

    height: 34px;

    width: auto;

}

/* =======================================================
   NAV LINKS
======================================================= */

.nav-link{

        color: var(--navbar-text) !important;

    font-weight: 500;

    border-radius: 999px;

    padding: .55rem 1rem !important;

    transition: all .25s ease;

    text-shadow: 0 1px 2px rgba(255,255,255,.25);


}

.nav-link:hover{

    color: var(--navbar-text-hover) !important;

    background: var(--navbar-link-hover);

}

/* Link activo */

.nav-link.active{

     color: var(--navbar-text-hover) !important;

    background: var(--navbar-link-hover);

    font-weight: 700;

}

/* =======================================================
   BUTTON PRIMARY
======================================================= */

.btn-primary{

    --bs-btn-color:var(--button-primary-text);

    --bs-btn-bg:var(--button-primary-bg);
    --bs-btn-border-color:var(--button-primary-bg);

    --bs-btn-hover-color:var(--button-primary-text);
    --bs-btn-hover-bg:var(--button-primary-hover);
    --bs-btn-hover-border-color:var(--button-primary-hover);

    --bs-btn-active-color:var(--button-primary-text);
    --bs-btn-active-bg:var(--button-primary-active);
    --bs-btn-active-border-color:var(--button-primary-active);

    --bs-btn-focus-shadow-rgb:var(--button-primary-shadow);

    border:none;

    font-size:.95rem;

    font-weight:600;

    padding:.70rem 1.35rem;

    border-radius:12px;

    transition:
        background-color .25s ease,
        transform .15s ease,
        box-shadow .25s ease;

}

.btn-primary:hover{

    transform:translateY(-2px);

}

.btn-primary:active{

    transform:translateY(0);

}

.btn-primary:focus-visible{

    box-shadow:
        0 0 0 .25rem rgba(var(--button-primary-shadow),.20);

    outline:none;

}

/* =======================================================
  SECCIONES
======================================================= */

.section-dark{
    background:var(--bg-primary);
}

.section-title{
    font-size:clamp(1.5rem,2.5vw,2.2rem);
     line-height:1.25;
}

.section-description{
    font-size:1.1rem;
    line-height:1.6;
}




/* =======================================================
   Seccion 1 HERO IMAGE
======================================================= */
/*----- Seccion PLATAFORMA----------------------------------- */

.hero-title{
    font-size:clamp(2rem,4vw,3rem);
    line-height:1.15;
}

.hero-image-wrapper{

    max-width:1200px;
    margin:0 auto;
    border-radius:24px;
    overflow:hidden;
    box-shadow:var(--shadow-lg);

}

.hero-image-wrapper img{

    width:100%;
    height:auto;
    display:block;

}




/* =======================================================
   Seccion 2 
======================================================= */



.process-title{
    color:var(--text-inverse);
}

.card-process{
    border-radius:24px;
    border:none;
    overflow:hidden;
      box-shadow:var(--shadow-dark);
}

.card-process img{
    width: 100%;
    max-height: 280px;
    object-fit: cover;
}


/* =======================================================
   Seccion 3
======================================================= */



.platform-tabs{

    gap:.75rem;

}


.platform-tabs .nav-link{

    border-radius:999px;

    padding:.75rem 1.5rem;

    font-weight:600;

    color:var(--text-secondary);

    background:transparent;

    transition:
        background-color .25s ease,
        color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;

}


/* Hover */

.platform-tabs .nav-link:hover{

    background:rgba(15,23,42,.06);

    transform:translateY(-2px);

}


/* Activo */

.platform-tabs .nav-link.active{

    background:var(--button-primary-bg);

    color:#fff !important;

    box-shadow:
        0 10px 25px rgba(0,0,0,.15);

    transform:translateY(-2px);

}


/* =======================================================
   Seccion 4
======================================================= */


.solution-card{

    height:100%;

    padding:2rem;

    background:var(--background-surface);

    border-radius:24px;

    box-shadow:var(--shadow-light);

}


.solution-icon-wrapper{
    display:flex;
    align-items:center;
    justify-content:center;

    width:64px;
    height:64px;

    margin-bottom:1.25rem;

    color:var(--accent);

    font-size:2.2rem;
}




.solution-title{

    margin-bottom:.75rem;

    font-size:1.35rem;

    line-height:1.3;

}




.solution-description{

    margin-bottom:1.25rem;

    line-height:1.6;

}




.solution-list{

    margin:0;

    padding:0;

    list-style:none;

    display:flex;

    flex-direction:column;

    gap:.55rem;

}


.solution-list li{
    position:relative;

    padding-left:1.1rem;

    color:var(--text-secondary);

    font-size:.95rem;

    line-height:1.4;
}

.solution-list li::before{
    content:"";

    position:absolute;

    left:0;
    top:.55em;

    width:5px;
    height:5px;

    border-radius:50%;

    background:var(--accent);
}



/* =======================================================
   SECCION 5 - BENEFICIOS
======================================================= */

.benefits-panel{
    overflow:hidden;

}

.benefit-item{

    display:flex;

    align-items:flex-start;

    gap:1.5rem;

    padding:2.5rem;

}


.benefit-icon{

    flex-shrink:0;

    color:var(--accent);

    font-size:2.2rem;

    line-height:1;

}


.benefit-title{

    margin:0 0 .6rem;

    font-size:1.35rem;

    font-weight:700;

    line-height:1.3;

}


.benefit-description{

    margin:0;

    max-width:420px;

    color:var(--text-secondary);

    line-height:1.6;

}






/* =======================================================
   TAB CONTENT ANIMATION
======================================================= */


.platform-content .tab-pane{

    animation:

        tabFade .45s ease;

}



@keyframes tabFade{


    from{

        opacity:0;

        transform:

            translateY(15px)
            scale(.98);

    }


    to{

        opacity:1;

        transform:

            translateY(0)
            scale(1);

    }


}


/* =======================================================
   IMAGE
======================================================= */


.platform-content img{

    transition:

        transform .35s ease,
        box-shadow .35s ease;

}


.platform-content img:hover{

    transform:scale(1.02);

}



/* =======================================================
   FOOTER
======================================================= */
.footer {
    padding: 4rem 0 1.5rem;
    background: var(--bg-primary);
    color: var(--text-inverse);
}

.footer .container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Top: marca + enlaces */
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    flex-wrap: wrap;
}

.footer-brand {
    max-width: 320px;
}

.footer-logo {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-inverse);
    margin-bottom: 0.5rem;
}

.footer-description {
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(248, 250, 252, 0.65);
    margin: 0;
}

.footer-legal {
    display: flex;
    gap: 1.5rem;
}

.footer-legal a {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.75);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-legal a:hover {
    color: var(--text-inverse);
}

/* Divider */
.footer-divider {
    height: 1px;
    background: rgba(248, 250, 252, 0.12);
    margin: 2.5rem 0 1.5rem;
}

/* Bottom: copyright */
.footer-bottom {
    text-align: center;
}

.footer-copyright {
    font-size: 0.8rem;
    color: rgba(248, 250, 252, 0.5);
}

/* Responsive */
@media (max-width: 576px) {
    .footer-top {
        flex-direction: column;
        gap: 1.5rem;
    }

    .footer-legal {
        gap: 1.25rem;
    }
}



/* =======================================================
   RESPONSIVE
======================================================= */


@media(max-width:768px){


    .platform-tabs{

        overflow-x:auto;

        flex-wrap:nowrap;

        justify-content:flex-start !important;

        padding-bottom:.5rem;

    }


    .platform-tabs .nav-link{

        white-space:nowrap;

        padding:.65rem 1.2rem;

    }


}



/*responsivo*/
@media(max-width:576px){

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

     .section-title{
        font-size:1.5rem;
    }

    .section-description{
        font-size:1rem;
    }

    .hero-image-wrapper{
        border-radius:16px;
    }

}