/*=====================================================================
    CONTENDENCIA.ONLINE
    QUIÉNES SOMOS
    Versión 3.0
    Mobile First
    Autor: Oscar Rafael Portillo Torres
======================================================================*/


/*=====================================================================
    GOOGLE FONTS
======================================================================*/

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


/*=====================================================================
    VARIABLES
======================================================================*/

:root{

    /*=========================
        COLORES CORPORATIVOS
    =========================*/

    --primary:#0B1D3A;
    --secondary:#FF7300;
    --white:#FFFFFF;

    /*=========================
        COLORES DE APOYO
    =========================*/

    --text:#2C3E50;
    --text-light:#667085;

    --background:#F7F9FC;
    --background-light:#FCFCFD;

    --border:#E8ECF3;

    /*=========================
        ESTADOS
    =========================*/

    --success:#22C55E;
    --danger:#EF4444;
    --warning:#FF7300;

    /*=========================
        BORDES
    =========================*/

    --radius-xs:8px;
    --radius-sm:12px;
    --radius-md:18px;
    --radius-lg:24px;
    --radius-xl:34px;
    --radius-round:999px;

    /*=========================
        SOMBRAS
    =========================*/

    --shadow-sm:
        0 5px 18px rgba(11,29,58,.05);

    --shadow-md:
        0 12px 35px rgba(11,29,58,.08);

    --shadow-lg:
        0 25px 60px rgba(11,29,58,.12);

    --shadow-xl:
        0 40px 90px rgba(11,29,58,.18);

    /*=========================
        TRANSICIONES
    =========================*/

    --transition-fast:.25s ease;

    --transition:.35s ease;

    --transition-slow:.55s ease;

}



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

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;

    background:var(--white);

    color:var(--text);

    line-height:1.75;

    overflow-x:hidden;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}



/*=====================================================================
    ELEMENTOS GENERALES
======================================================================*/

img{

    display:block;

    width:100%;

    max-width:100%;

    height:auto;

}

picture{

    display:block;

}

a{

    text-decoration:none;

    color:inherit;

    transition:var(--transition);

}

button{

    font-family:inherit;

}

ul{

    list-style:none;

}

section{

    position:relative;

    padding-block:clamp(35px,8vw,60px);

}



/*=====================================================================
    CONTENEDOR
======================================================================*/

.container{

    width:min(92%,1280px);

    margin-inline:auto;

}



/*=====================================================================
    TIPOGRAFÍA
======================================================================*/

h1{

    font-size:clamp(2.5rem,6vw,4.5rem);

    line-height:1.10;

    font-weight:800;

    color:var(--primary);

}

h2{

    font-size:clamp(2rem,4vw,3.3rem);

    line-height:1.20;

    font-weight:800;

    color:var(--primary);

}

h3{

    font-size:clamp(1.35rem,3vw,2rem);

    font-weight:700;

    color:var(--primary);

}

h4{

    font-size:1.2rem;

    font-weight:700;

}

p{

    font-size:clamp(1rem,1.5vw,1.1rem);

    color:var(--text-light);

}



/*=====================================================================
    TITULOS
======================================================================*/

.section-title{

    text-align:center;

    margin-bottom:clamp(45px,6vw,80px);

}

.section-title span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 22px;

    border-radius:var(--radius-round);

    background:rgba(255,115,0,.10);

    color:var(--secondary);

    font-size:.85rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    margin-bottom:18px;

}

.section-title h2{

    margin-bottom:18px;

}

.section-title p{

    max-width:760px;

    margin-inline:auto;

}



/*=====================================================================
    BOTONES
======================================================================*/

.btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    padding:16px 30px;

    border:none;

    border-radius:var(--radius-round);

    cursor:pointer;

    font-weight:700;

    transition:var(--transition);

}

.btn-primary{

    background:var(--primary);

    color:var(--white);

}

.btn-primary:hover{

    background:#142B55;

    transform:translateY(-4px);

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

}

.btn-outline{

    border:2px solid var(--primary);

    background:transparent;

    color:var(--primary);

}

.btn-outline:hover{

    background:var(--primary);

    color:var(--white);

}



/*=====================================================================
    TARJETAS
======================================================================*/

.card{

    background:var(--white);

    border-radius:var(--radius-lg);

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

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-8px);

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

}



/*=====================================================================
    UTILIDADES
======================================================================*/

.text-center{

    text-align:center;

}

.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}
.mt-5{margin-top:50px;}

.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}
.mb-5{margin-bottom:50px;}

.d-flex{

    display:flex;

}

.align-center{

    align-items:center;

}

.justify-center{

    justify-content:center;

}
/*=====================================================================
    HERO
======================================================================*/

.hero{

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
    135deg,
    #FFFFFF 0%,
    #F8FAFD 55%,
    #EEF4FB 100%
    );

}

/* Fondo decorativo */

.hero::before{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    border-radius:50%;

    background:rgba(255,115,0,.05);

    top:-320px;
    right:-260px;

}

.hero::after{

    content:"";

    position:absolute;

    width:550px;
    height:550px;

    border-radius:50%;

    background:rgba(11,29,58,.04);

    left:-260px;
    bottom:-280px;

}

.hero .container{

    position:relative;

    z-index:2;

}

/*=====================================================================
    GRID HERO
======================================================================*/

.hero-content{

    display:grid;

    gap:60px;

    align-items:center;

}

/*=====================================================================
    FOTO
======================================================================*/

.hero-photo{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-photo::before{

    content:"";

    position:absolute;

    width:min(95%,430px);

    aspect-ratio:1;

    border-radius:32px;

    background:
    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary)
    );

    transform:rotate(-6deg);

    z-index:0;

}

.hero-photo img{

    position:relative;

    z-index:2;

    width:min(100%,410px);

    aspect-ratio:4/5;

    object-fit:cover;

    border-radius:28px;

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

    transition:var(--transition);

}

.hero-photo img:hover{

    transform:translateY(-8px);

}

/*=====================================================================
    TEXTO
======================================================================*/

.hero-text{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    width:max-content;

    padding:10px 20px;

    border-radius:999px;

    background:rgba(255,115,0,.10);

    color:var(--secondary);

    font-size:.9rem;

    font-weight:700;

    margin-bottom:24px;

}

.hero-badge i{

    color:var(--secondary);

}

.hero-title{

    margin-bottom:25px;

}

.hero-title span{

    color:var(--secondary);

}

.hero-description{

    max-width:680px;

    margin-bottom:35px;

    line-height:1.9;

}

/*=====================================================================
    INFORMACIÓN
======================================================================*/

.hero-info{

    display:grid;

    gap:18px;

    margin-bottom:40px;

}

.hero-item{

    display:flex;

    align-items:center;

    gap:18px;

    padding:18px 22px;

    background:var(--white);

    border-radius:18px;

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

    transition:var(--transition);

}

.hero-item:hover{

    transform:translateY(-6px);

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

}

.hero-item i{

    width:55px;

    height:55px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:16px;

    background:rgba(255,115,0,.12);

    color:var(--secondary);

    font-size:22px;

    flex-shrink:0;

}

.hero-item h4{

    margin-bottom:3px;

    color:var(--primary);

}

.hero-item p{

    margin:0;

    font-size:.95rem;

}

/*=====================================================================
    BOTONES
======================================================================*/

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:16px;

}

.hero-buttons .btn{

    min-width:210px;

}

/*=====================================================================
    ESCRITORIO
======================================================================*/

@media(min-width:992px){

.hero-content{

grid-template-columns:430px 1fr;

}

.hero-info{

grid-template-columns:repeat(2,1fr);

}

}

/*=====================================================================
    TABLET
======================================================================*/

@media(min-width:768px) and (max-width:991px){

.hero{

text-align:center;

}

.hero-badge{

margin-inline:auto;

}

.hero-description{

margin-inline:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-info{

grid-template-columns:repeat(2,1fr);

}

}

/*=====================================================================
    MÓVIL
======================================================================*/

@media(max-width:767px){

.hero{

text-align:center;

}

.hero-badge{

margin-inline:auto;

}

.hero-description{

margin-inline:auto;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons .btn{

width:100%;

}

.hero-info{

grid-template-columns:1fr;

}

.hero-photo{

margin-bottom:20px;

}

.hero-photo img{

width:min(90%,340px);

}

}
/*=====================================================================
    HISTORIA
======================================================================*/

.historia{

    background:var(--background);

}

.historia-content{

    display:grid;

    gap:40px;

}

.historia-texto{

    background:var(--white);

    padding:clamp(30px,5vw,50px);

    border-radius:var(--radius-lg);

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

}

.historia-texto h2{

    margin-bottom:25px;

}

.historia-texto p{

    margin-bottom:22px;

    text-align:justify;

}

.historia-texto p:last-child{

    margin-bottom:0;

}



/*=====================================================================
    TIMELINE
======================================================================*/

.timeline{

    position:relative;

    margin-top:70px;

}

.timeline::before{

    content:"";

    position:absolute;

    left:26px;

    top:0;

    bottom:0;

    width:4px;

    background:linear-gradient(

        to bottom,

        var(--secondary),

        var(--primary)

    );

    border-radius:50px;

}

.timeline-item{

    position:relative;

    padding-left:80px;

    margin-bottom:55px;

}

.timeline-item:last-child{

    margin-bottom:0;

}

.timeline-icon{

    position:absolute;

    left:0;

    top:0;

    width:56px;

    height:56px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--primary);

    color:var(--white);

    font-size:22px;

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

    border:4px solid var(--white);

}

.timeline-card{

    background:var(--white);

    padding:30px;

    border-radius:var(--radius-lg);

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

    transition:var(--transition);

    border-left:5px solid var(--secondary);

}

.timeline-card:hover{

    transform:translateY(-8px);

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

}

.timeline-year{

    display:inline-block;

    padding:8px 18px;

    background:rgba(255,115,0,.10);

    color:var(--secondary);

    border-radius:999px;

    font-weight:700;

    font-size:.9rem;

    margin-bottom:18px;

}

.timeline-card h3{

    margin-bottom:18px;

}

.timeline-card p{

    margin:0;

}



/*=====================================================================
    EXPERIENCIA
======================================================================*/

.experiencia{

    margin-top:80px;

}

.experiencia-grid{

    display:grid;

    gap:25px;

}

.experiencia-card{

    background:var(--white);

    padding:35px;

    border-radius:var(--radius-lg);

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

    transition:var(--transition);

    text-align:center;

    height:100%;

}

.experiencia-card:hover{

    transform:translateY(-10px);

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

}

.experiencia-icono{

    width:80px;

    height:80px;

    margin:0 auto 25px;

    border-radius:22px;

    background:rgba(255,115,0,.10);

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--secondary);

    font-size:34px;

}

.experiencia-card h3{

    margin-bottom:18px;

}

.experiencia-card p{

    margin-bottom:0;

}



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

@media(min-width:768px){

.experiencia-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(min-width:1200px){

.historia-content{

grid-template-columns:1fr 1fr;

align-items:start;

}

.experiencia-grid{

grid-template-columns:repeat(4,1fr);

}

.timeline::before{

left:50%;

transform:translateX(-50%);

}

.timeline-item{

width:50%;

padding-left:0;

margin-bottom:70px;

}

.timeline-item:nth-child(odd){

padding-right:60px;

text-align:right;

}

.timeline-item:nth-child(even){

margin-left:50%;

padding-left:60px;

}

.timeline-item:nth-child(odd) .timeline-icon{

right:-28px;

left:auto;

}

.timeline-item:nth-child(even) .timeline-icon{

left:-28px;

}

.timeline-card{

text-align:left;

}

}
/*=====================================================================
    MISIÓN - VISIÓN
======================================================================*/

.mision-vision{

    background:var(--white);

}

.mv-grid{

    display:grid;

    gap:30px;

}

.mv-card{

    position:relative;

    background:var(--white);

    padding:clamp(35px,5vw,50px);

    border-radius:var(--radius-lg);

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

    overflow:hidden;

    transition:var(--transition);

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

}

.mv-card:hover{

    transform:translateY(-10px);

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

}

.mv-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:6px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

}

.mv-icon{

    width:90px;

    height:90px;

    border-radius:22px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:28px;

    background:rgba(255,115,0,.10);

    color:var(--secondary);

    font-size:40px;

}

.mv-card h3{

    margin-bottom:20px;

}

.mv-card p{

    margin-bottom:0;

}


/*=====================================================================
    VALORES
======================================================================*/

.valores{

    background:var(--background);

}

.valores-grid{

    display:grid;

    gap:25px;

}

.valor-card{

    background:var(--white);

    padding:35px;

    border-radius:var(--radius-lg);

    text-align:center;

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

    transition:var(--transition);

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

    height:100%;

}

.valor-card:hover{

    transform:translateY(-10px);

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

}

.valor-icon{

    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    background:rgba(11,29,58,.08);

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--primary);

    font-size:38px;

}

.valor-card h3{

    margin-bottom:18px;

}

.valor-card p{

    margin-bottom:0;

}


/*=====================================================================
    ESTADÍSTICAS
======================================================================*/

.estadisticas{

    background:linear-gradient(
        135deg,
        var(--primary),
        #132D57
    );

    color:var(--white);

}

.estadisticas .section-title h2,
.estadisticas .section-title p{

    color:var(--white);

}

.estadisticas .section-title span{

    background:rgba(255,255,255,.12);

    color:#FFD7B3;

}

.estadisticas-grid{

    display:grid;

    gap:25px;

}

.estadistica-card{

    text-align:center;

    padding:35px 25px;

    border-radius:var(--radius-lg);

    background:rgba(255,255,255,.06);

    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.08);

    transition:var(--transition);

}

.estadistica-card:hover{

    transform:translateY(-10px);

    background:rgba(255,255,255,.10);

}

.estadistica-numero{

    font-size:clamp(2.5rem,6vw,4rem);

    font-weight:800;

    color:var(--white);

    margin-bottom:12px;

}

.estadistica-card h4{

    color:var(--white);

    margin-bottom:10px;

}

.estadistica-card p{

    color:rgba(255,255,255,.80);

    margin-bottom:0;

}


/*=====================================================================
    LOGROS
======================================================================*/

.logros{

    margin-top:70px;

}

.logros-grid{

    display:grid;

    gap:20px;

}

.logro-item{

    display:flex;

    align-items:center;

    gap:18px;

    padding:20px;

    background:var(--white);

    border-radius:18px;

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

    transition:var(--transition);

}

.logro-item:hover{

    transform:translateX(8px);

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

}

.logro-item i{

    width:55px;

    height:55px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:16px;

    background:rgba(255,115,0,.10);

    color:var(--secondary);

    font-size:24px;

    flex-shrink:0;

}

.logro-item h4{

    margin-bottom:5px;

}

.logro-item p{

    margin:0;

}


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

@media(min-width:768px){

.mv-grid{

grid-template-columns:repeat(2,1fr);

}

.valores-grid{

grid-template-columns:repeat(2,1fr);

}

.estadisticas-grid{

grid-template-columns:repeat(2,1fr);

}

.logros-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(min-width:1200px){

.valores-grid{

grid-template-columns:repeat(4,1fr);

}

.estadisticas-grid{

grid-template-columns:repeat(4,1fr);

}

}
/*=====================================================================
    MENSAJE DEL FUNDADOR
======================================================================*/

.fundador{

    background:linear-gradient(
        180deg,
        var(--white) 0%,
        var(--background) 100%
    );

}

.fundador-wrapper{

    display:grid;

    gap:50px;

    align-items:center;

}

.fundador-photo{

    position:relative;

    display:flex;

    justify-content:center;

}

.fundador-photo img{

    width:min(100%,420px);

    aspect-ratio:4/5;

    object-fit:cover;

    border-radius:32px;

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

    transition:var(--transition);

}

.fundador-photo img:hover{

    transform:translateY(-10px);

}

.fundador-photo::before{

    content:"";

    position:absolute;

    width:min(90%,390px);

    aspect-ratio:1;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    border-radius:30px;

    transform:rotate(-7deg);

    z-index:0;

}

.fundador-photo img{

    position:relative;

    z-index:2;

}

.fundador-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.fundador-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    width:max-content;

    padding:10px 22px;

    background:rgba(255,115,0,.10);

    color:var(--secondary);

    border-radius:999px;

    font-weight:700;

    margin-bottom:25px;

}

.fundador-content h2{

    margin-bottom:25px;

}

.fundador-content p{

    margin-bottom:22px;

    text-align:justify;

}

.fundador-content p:last-of-type{

    margin-bottom:35px;

}

.firma{

    border-top:1px solid var(--border);

    padding-top:25px;

}

.firma h3{

    margin-bottom:8px;

}

.firma span{

    display:block;

    color:var(--text-light);

    font-size:.95rem;

}



/*=====================================================================
    LLAMADO A LA ACCIÓN
======================================================================*/

.cta{

    background:linear-gradient(
        135deg,
        var(--primary),
        #142B55
    );

    overflow:hidden;

}

.cta::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

    top:-320px;

    right:-260px;

}

.cta::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(255,115,0,.10);

    left:-180px;

    bottom:-180px;

}

.cta .container{

    position:relative;

    z-index:2;

}

.cta-box{

    max-width:900px;

    margin:auto;

    text-align:center;

}

.cta-box span{

    display:inline-block;

    padding:10px 22px;

    border-radius:999px;

    background:rgba(255,255,255,.12);

    color:#FFD7B3;

    font-weight:700;

    margin-bottom:25px;

}

.cta-box h2{

    color:var(--white);

    margin-bottom:25px;

}

.cta-box p{

    color:rgba(255,255,255,.85);

    max-width:700px;

    margin:auto;

    margin-bottom:40px;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

}

.cta-buttons .btn{

    min-width:220px;

}

.btn-orange{

    background:var(--secondary);

    color:var(--white);

}

.btn-orange:hover{

    background:#E56500;

    transform:translateY(-5px);

}

.btn-white{

    background:var(--white);

    color:var(--primary);

}

.btn-white:hover{

    background:#F2F2F2;

    transform:translateY(-5px);

}



/*=====================================================================
    FAQ
======================================================================*/

.faq{

    background:var(--background);

}

.accordion{

    --bs-accordion-border-color:transparent;

}

.accordion-item{

    border:none;

    margin-bottom:18px;

    border-radius:18px !important;

    overflow:hidden;

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

}

.accordion-button{

    background:var(--white);

    color:var(--primary);

    font-weight:700;

    font-size:1rem;

    padding:22px 26px;

}

.accordion-button:not(.collapsed){

    background:var(--primary);

    color:var(--white);

}

.accordion-button:focus{

    box-shadow:none;

}

.accordion-body{

    padding:28px;

    color:var(--text-light);

    line-height:1.8;

}



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

@media(min-width:992px){

.fundador-wrapper{

grid-template-columns:420px 1fr;

}

}

@media(max-width:991px){

.fundador{

text-align:center;

}

.fundador-badge{

margin-inline:auto;

}

.firma{

text-align:center;

}

}

@media(max-width:767px){

.cta-buttons{

flex-direction:column;

}

.cta-buttons .btn{

width:100%;

}

}
/*=====================================================================
    FOOTER CORPORATIVO
======================================================================*/

.footer-premium{

    background:var(--primary);

    color:var(--white);

    padding:80px 0 30px;

}

.footer-grid{

    display:grid;

    gap:40px;

}

.footer-logo{

    width:180px;

    margin-bottom:20px;

}

.footer-premium h3{

    color:var(--white);

    margin-bottom:20px;

}

.footer-premium p{

    color:rgba(255,255,255,.75);

}

.footer-links{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.footer-links a{

    color:rgba(255,255,255,.80);

    transition:var(--transition);

}

.footer-links a:hover{

    color:var(--secondary);

    padding-left:8px;

}

.footer-social{

    display:flex;

    gap:15px;

    margin-top:25px;

}

.footer-social a{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.08);

    color:white;

    font-size:18px;

    transition:var(--transition);

}

.footer-social a:hover{

    background:var(--secondary);

    transform:translateY(-6px);

}

.footer-copy{

    margin-top:60px;

    border-top:1px solid rgba(255,255,255,.10);

    padding-top:25px;

    text-align:center;

    color:rgba(255,255,255,.60);

}



/*=====================================================================
    BOTÓN FLOTANTE
======================================================================*/

#btn-arriba{

    position:fixed;

    right:25px;

    bottom:25px;

    width:56px;

    height:56px;

    border:none;

    border-radius:50%;

    background:var(--secondary);

    color:white;

    cursor:pointer;

    z-index:999;

    opacity:0;

    visibility:hidden;

    transform:translateY(25px);

    transition:var(--transition);

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

}

#btn-arriba:hover{

    transform:translateY(-6px);

}

#btn-arriba.mostrar{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}



/*=====================================================================
    BARRA SUPERIOR
======================================================================*/

#barra-progreso{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--secondary),
        var(--primary)
    );

    z-index:9999;

}



/*=====================================================================
    ANIMACIONES
======================================================================*/

.fade-up{

    animation:fadeUp .8s ease forwards;

}

.zoom{

    animation:zoom .8s ease forwards;

}

.slide-left{

    animation:slideLeft .8s ease forwards;

}

.slide-right{

    animation:slideRight .8s ease forwards;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes zoom{

from{

opacity:0;

transform:scale(.9);

}

to{

opacity:1;

transform:scale(1);

}

}

@keyframes slideLeft{

from{

opacity:0;

transform:translateX(-60px);

}

to{

opacity:1;

transform:translateX(0);

}

}

@keyframes slideRight{

from{

opacity:0;

transform:translateX(60px);

}

to{

opacity:1;

transform:translateX(0);

}

}



/*=====================================================================
    SCROLL PERSONALIZADO
======================================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#EDF2F7;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--secondary);

}



/*=====================================================================
    SELECCIÓN
======================================================================*/

::selection{

    background:var(--secondary);

    color:white;

}



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

@media(min-width:768px){

.footer-grid{

grid-template-columns:2fr 1fr 1fr 1fr;

}

}

@media(min-width:1400px){

.container{

max-width:1320px;

}

}

@media(min-width:1800px){

.container{

max-width:1500px;

}

}

@media(max-width:767px){

.footer-premium{

text-align:center;

}

.footer-logo{

margin:auto auto 25px;

}

.footer-social{

justify-content:center;

}

.footer-links{

align-items:center;

}

}



/*=====================================================================
    REDUCIR ANIMACIONES
======================================================================*/

@media(prefers-reduced-motion:reduce){

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}