@import "fuentes.css";
@import "colores.css";

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

/* WIDTH */
.wh100 { width: 100%; }
.wh90 { width: 90%; }
.wh80 { width: 80%; }
.wh70 { width: 70% ; }
.wh60 { width: 60%; }
.wh50 { width: 50%; }
.wh40 { width: 40%; }
.wh30 { width: 30%; }
.wh20 { width: 20%; }
.wh10 { width: 10%; }
.wh0 { width: 0%; }

/* HEIGHT */
.hg10 { height: 10%; }
.hg70 { height: 70%; }
.hg80 { height: 80%; }
.hg90 { height: 90%; }
.hg100 { height: 100%; }

.mb-100 { margin-bottom: 100px; }
.mb-40 { margin-bottom: 40px; }

.pb-100 { padding-bottom: 100px; }
.pb-40 { padding-bottom: 40px; }

.px-20 { padding: 0 20px; }

/* GAPS */
.c-gap-8 { column-gap: 8px; }
.c-gap-10 { column-gap: 10px; }
.c-gap-16 { column-gap: 16px; }
.c-gap-20 { column-gap: 15px; }
.c-gap-30 { column-gap: 15px; }
.c-gap-40 { column-gap: 40px; }

.r-gap-16 { row-gap: 16px; }
.r-gap-24 { row-gap: 24px; }
.r-gap-40 { row-gap: 40px; }

/* FADES */
.fadeOut { opacity: 0; }
.fadeIn { opacity: 100%; }
.transition-mid { transition: all ease-in-out 0.5s; }


.hide-item {
    display: none;
    opacity: 0;
    transition-property: display, opacity;
    transition-duration: 0.5s;
    transition-behavior: allow-discrete;
}

.show-item {
    display: flex;
    opacity: 1;

    @starting-style {
        opacity: 0;
    }
}


p {
    margin: 0;
}



/* HEADER ============================================= */

.headerblock {
    width: 100%;
    position: sticky;
    top: 0;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 17px 48px;
    background-color: rgb(0, 37, 84, 85%);
    transition: all 0.5s;
}

.header-btns {
    display: flex;
    gap: 15px;
    
}

.header-btn {
    background-color: transparent;
    color: #FFF;
    border: none;
    text-decoration: none;  
    text-align: center;
}

#mobile-header-menu {
    background-color: #26466E;
    flex-direction: column;
    gap: 20px;
    justify-content: start;
    height: 100vh;
}

@media screen and (max-width: 768px) {
    .headerblock {
        width: 100%;
        position: fixed;
        z-index: 10;
    }
}

/* EYECATCHER ============================================= */

.eyecatcher-img {
    width: 100%;
}

@media screen and (max-width: 768px) {
    #eyecatcher {
        padding-top: 100px;
    }
}

/* VIDEO ============================================ */

#video-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 115px 50px;
    width: 100%;
    height: 100%;
    
}



.responsive-iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-width: 1040px;
  }

@media screen and (max-width: 768px) {
    #video-section {
        padding: 40px 0;
    }
}

@media screen and (min-width: 1080px) {
    #video-section {
        
        padding: 115px 120px;
    }
}


/* SUMATE AL EQUIPO ======================================== */

#sumate-al-equipo {
    background-color: #6CC8EA;
    color: #FFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px;
    padding: 54px;
}

#sumate-al-equipo p {
    font-size: 43px;
    text-align: center;
    width: 60%;
}

.base-btn {
    text-decoration: none;
    color: #FFF;
    border-radius: 69px;
    border: solid 1px #FFF;
    background-color: transparent;
    padding: 16px 32px;
    width: 330px;
    text-align: center;
    font-size: 28px;
}

.base-blue-btn {
    text-decoration: none;
    color: #26466E;
    border-radius: 69px;
    border: solid 1px #26466E;
    background-color: transparent;
    padding: 8px 16px;
    width: 200px;
    text-align: center;
    font-size: 16px;
}

.selected-btn {
    background-color: #26466E;
    color: #FFF;
}
 .base-blue-btn:hover {
    background-color: #26466E;
    color: #FFF;
 }


.por-que-trabajar-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: space-between;
    width: 100%;
    max-width: 1612px;
    padding: 0 50px;
    
}

.titulos-por-que-trabajar {
    max-width: 1612px;
    padding: 0 50px;
}


.por-que-trabajar-aqui-top {
    padding: 86px 32px 40px 32px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 16px;
}

.gap16 {
    gap: 16px;
}
.por-que-trabajar-aqui-bot {
    padding: 0 50px;
    display: flex;
    justify-content: center;
    max-height: 557px;
    max-width: 1612px;
}

.por-que-trabajar-aqui-bot-box {
    width: 100%;
    display: flex;
    justify-content: center;
}

.por-que-trabajar-aqui-bot-left {
    background-color: #26466E;
    color: #FFF;
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 30px;
    padding: 20px;
}

.por-que-trabajar-aqui-bot-right {
    background-color: #26466E;
    color: #FFF;
    width: 70%;
}

.por-que-trabajar-aqui-bot-right img {
width: 100%;   
height: 100%;
aspect-ratio: 16 / 9; 
}


#titulo-por-que-trabajar-slide {
    font-size: 30px;
    text-align: center;
}

#sub-titulo-por-que-trabajar-slide {
    font-size: 18px;
}

#link-por-que-trabajar-slide {
    border: solid 2px #FFF;
    border-radius: 20px;
    padding: 8px 32px;
    color: #FFF;
    text-decoration: none;
}

#slider-selector {
    background-color: #26466E;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32px 16px 18px 16px;
    gap: 15px;
}

.slider-selector-btn {
    background-color: transparent;
    border: none;
    padding: 0;
}

.dot {
    background-color: #FFF;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    opacity: 70%;
}

.selected-dot {
    opacity: 100%;
}

@media screen and (max-width: 768px) {
    
    #sumate-al-equipo {
        padding: 54px 34px;
    }
    
    #sumate-al-equipo p {
        font-size: 30px;
        width: 100%;
    }

    .por-que-trabajar-aqui-top {
        padding: 40px 32px;
    }
    
    
    .por-que-trabajar-aqui-bot {
        flex-direction: column;
        padding: 0;
    } 

    .por-que-trabajar-aqui-bot-left {
        width: 100%;
    }

    .por-que-trabajar-aqui-bot-right {
        width: 100%;
    }

    .por-que-trabajar-aqui-bot-right img {
        width: 100%;   
        height: auto;
        }

    #sub-titulo-por-que-trabajar-slide {
        text-align: center;
    }
}


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

#nuestros-valores {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 167px 0 116px 0;
}

.valores {
    max-width: 1400px;
    display: flex;
    justify-content: center;
    padding: 0 172px;
    gap: 35px;
}

.valores img {
    width: 30%;
    margin-top: 27px;
}

@media screen and (max-width: 768px) {
    #nuestros-valores {
        padding: 75px 0 25px 0;
    }
    
    .valores {
        flex-direction: column;
        justify-content: center;
        padding: 0 50px;
        gap: 20px;
    }
    
    .valores img {
        width: 100%;
        margin-top: 27px;
    } 
}

/* PROCESO DE RECLUTAMIENTO ==================================================== */

#proceso-reclutamiento {
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../imgs/proceso-reclutamiento/bg-proceso.png);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 100px 32px;
}

.pasos-left, .pasos-right {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.pasos-reclutamiento {
    display: flex;
    max-width: 1400px;
    padding: 60px 150px;
    gap: 32px;
}


.paso img {
    width: 89px ;
    height: 89px ;
}

.big-number {
    width: 53px !important;
}

.mfs18 {
    font-size: 18px !important;
}

.base-white-btn {
    text-decoration: none;
    color: #26466E;
    border-radius: 69px;
    border: solid 1px #26466E;
    background-color: #FFF;
    padding: 8px 16px;
    width: 200px;
    text-align: center;
    font-size: 16px;
}


.enviar-documentos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.enviar-documentos p {
    font-size: 20px;
    text-align: center;
    width: 60%;
    color: #FFF;
} 

@media screen and (max-width: 768px) { 
    
    .big-number {
        font-size: 60px !important;
    }

    #proceso-reclutamiento {
        padding: 100px 24px;
        gap: 50px;
    }
    
    .pasos-reclutamiento {
        flex-direction: column;
    }

    .pasos-reclutamiento {
        padding: 0; 
    }

    .pasos-left, .pasos-right {
        width: 100%;
    }

    .paso img {
        width: 56px ;
        height: 56px ;
    }

    .enviar-documentos p {
        font-size: 20px;
        width: 80%;
    } 
    
}


/* NOTICIAS Y EVENTOS ============================================== */

.base-dark-btn {
    text-decoration: none;
    color: #FFF;
    border-radius: 69px;
    background-color: #26466E;
    padding: 8px 16px;
    width: 200px;
    text-align: center;
    font-size: 16px;
}

.noticia {
    min-height: 600px;
    width: 25%;
}

.noticia-down {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
    gap: 16px;
    min-height: 400px;
}

#noticias-eventos {
    display: flex;
    justify-content: center;
}

.noticias-eventos-inner {
    max-width: 1400px;
    padding: 90px 32px;
}

.noticias {
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 32px;
}

@media screen and (max-width: 768px) {
    .noticias {
        flex-direction: column;
        gap: 50px;
    }

    .noticia {
        width: 100%;
    }

    .noticia-down {
        min-height: auto;
    }
}

/* COMPROMISOS Y CERTIFICACIONES =========================================== */

.nuestros-compromisos  {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
    padding-top: 50px;
    padding-bottom: 50px;
}

.tabla-compromisos {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 2fr 1fr;
    max-width: 1141px;
}

.compromiso {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    gap: 16px;
    border: solid 1px #26466E;
}

.compromiso img {
    width: 100%;
}

@media screen and (max-width: 768px) {
    .tabla-compromisos {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }
}


/* FOOTER ====================================================== */

footer {
    background-color: #26466E;
    color: #FFF;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    padding: 88px 68px;
    gap: 50px;
}

.footer-link {
    text-decoration: none;
    color: #FFF;
    font-size: 18px;
    width: 100%;
    display: flex;
    align-items: start;
    gap: 8px;
}

.footer-left img {
    max-width: 320px;
}

.footer-center {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

.footer-left-center, .footer-right-center {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 16px;
}

@media screen and (max-width: 768px) {
    footer {
        grid-template-columns: 1fr;
    }

    .footer-center {
        grid-template-columns: 1fr;
    }
}