@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');

:root {
    --lexend: 'Lexend Deca', sans-serif;
    --questrial: 'Questrial', sans-serif;
}

body { overflow-x: hidden; overflow-y: hidden; background: #eee; }
* { font-family: var(--questrial); font-weight: 200; }

.bg-light { background: none; box-shadow: 0px 0px 0px 1px var(--clr-main); }
.btn.bg-light:hover { background: none; box-shadow: 0px 0px 0px 2px var(--clr-main); }

.portada { width: 100vw; height: auto; overflow: hidden; }
.portada .contenido { width: 100vw; min-height: 100vh; position: relative; overflow: hidden; background: #fff;
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; z-index: 20; }
.hero-div { width: 35vw; height: 35vw; }
.hero-img { width: 100%; animation: hero-img-ani 3s ease-in-out infinite; position: relative; z-index: 24; }
.hero-txt { width: 45%; height: auto;  padding: 2rem; border-radius: 8px; display: flex; flex-wrap: wrap; align-items: center; z-index: 2; }
.hero-txt h1 { height: fit-content; font-size: 5vw; font-weight: 700; color: var(--clr-main); }
.hero-txt h2 { height: fit-content; font-size: 3vw; }
.hero-txt .btn { margin: 0.25rem; font-size: 1rem; font-weight: 400; }

.bkmrk-portada { width: 100%; height: 600px; position: relative; background: #fff; z-index: 21; overflow: visible; }
.bkmrk-portada .shape01 { width: 100%; height: auto; position: absolute; bottom: -25px; left: 0; z-index: 23; }
.bkmrk-portada .shape02 { width: 100%; height: auto; position: absolute; bottom: 100px; left: 0; z-index: 22; }
.bkmrk-portada .shape03 { width: 100%; height: auto; position: absolute; bottom: 175px; left: 0; z-index: 21; }

.presentacion { width: 100%; height: auto; background: var(--clr-main); color: #fff; position: relative; z-index: 11; }
.presentacion .fondo { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url('../img/fondoCollage.png');
    background-size: 16%; background-attachment: fixed; filter: invert(100%); opacity: 0.6; }
.presentacion .transicion01 { width: 100%; height: 200px; position: absolute; left: 0; top: 0;
    background: linear-gradient(to bottom, var(--clr-main), #fff0); }
.presentacion .transicion02 { width: 100%; height: 200px; position: absolute; left: 0; bottom: 0;
    background: linear-gradient(to top, var(--clr-main), #fff0); }
.presentacion .contenido { width: 75%; height: auto; margin: auto; padding: 7rem 0px; display: flex; flex-wrap: wrap; }
.presentacion .contenido .imagen { width: 40%; height: 100%; display: flex; justify-content: right; align-items: center; position: sticky; 
    top: 12rem; }
.presentacion .contenido .imagen img { width: 95%; margin: auto; filter: grayscale(100%); }
.presentacion .contenido .texto { width: 60%; height: auto; font-size: 2rem; line-height: 7rem; }
.presentacion .contenido .texto h2, .presentacion .contenido .texto h3 { width: 100%; }
.presentacion .contenido .texto h2 { font-size: 5rem; line-height: 7rem; font-weight: 700; color: #A1E8AF; }
.presentacion .contenido .texto h3 { font-size: 3rem; line-height: 5rem; font-weight: 400; }

.clientes { width: 100%; height: auto; position: relative; display: block; }
.certificaciones { width: 100%; height: auto; position: relative; display: block; }

.bkmrk-clientes { width: 100%; height: auto; background: #fff; position: relative; z-index: 2; }
.bkmrk-clientes .shape01 { width: 100%; height: auto; transform: rotateZ(0deg); position: relative; top: -5px; }


.clientes .contenido { width: 100%; min-height: 100vh; height: auto; padding: 7rem 15%; background: #fff; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin: 0; position: relative; }
.clientes .texto { width: 100%; }

.certificaciones .contenido { width: 100%; min-height: 100vh; height: auto; padding: 7rem 15%; background: #fff; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin: 0; position: relative; }
.certificaciones .texto { width: 100%; }

.cliente { width: 30%; height: auto; margin: 2rem auto; filter: grayscale(100%) brightness(100%); transition: 0.3s ease all; }
.cliente:hover { filter: grayscale(0%) brightness(100%) drop-shadow(4px 4px 2px #2224); transform: scale(1.1); }

.certificacion { width: 30%; height: auto; margin: 2rem 5rem; filter: grayscale(100%) brightness(100%); transition: 0.3s ease all; }
.certificacion:hover { filter: grayscale(0%) brightness(100%) drop-shadow(4px 4px 2px #2224); transform: scale(1.1); }

.separador { width: 100%; height: 100px; background: #fff; position: relative; overflow: hidden; }
.separador .uno { width: 100%; height: auto; position: absolute; left: 0; top: -400px; }

.servicios { width: 100%; min-height: 100vh; height: auto; background: #fff; padding: 7rem 15%; align-items: center; }
.servicio { text-align: center; transition: 0.3s ease all; }
.servicio .servicio-icon { width: 30%; margin: 10% auto; position: relative; }
.servicio .subtitulo { font-size: 1.5rem; position: relative; z-index: 2; }
.servicio .description { width: 100%; height: 100%; background: #fff; position: absolute; top: 0; left: 0; border-radius: 8px; opacity: 0;
    line-height: 1.25vw; display: none; font-size: 1vw; box-shadow: 4px 4px 8px #3335; padding: 1rem; z-index: 1; transition: 0.3s all ease; }
.servicio:hover { cursor: pointer; }
.servicio.active { transform: scale(1.1); }
.servicio.active .description { display: inline; opacity: 1; }
.servicio.active .subtitulo { font-weight: 700; }

.pop-up { width: 100%; height: 100%; position: fixed; z-index: 250; background: #0008; animation: pop-up-ani 3s linear;
    animation-fill-mode: forwards; }
.pop-content { position: relative; width: 60%; height: 80%; left: 20%; top: 10%; padding: 3rem; color: #333; box-shadow: 4px 4px 4px #0005;
    display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; background: #fff; border-radius: 8px; }
.div-txts { width: 100%; display: flex; flex-wrap: wrap; flex-direction: row; margin: 0.5rem auto; }
.div-txts img { width: 40%; height: min-content; }
.div-txts .only-txt { width: 60%; padding: 0 0.5rem; }
.pop-content h1 { font-weight: 700; color: var(--clr-main); }
.div-btns { width: 100%; display: inline; text-align: center; }
.pop-content .btn { width: 48%; }
.div-btns .btn.uno { background: #fff; color: var(--clr-main); border: 1px solid var(--clr-main); }
.div-btns .btn.uno:hover { background: var(--clr-main); color: #fff; }
.div-btns .btn.dos { background: #128C7E; color: #fff; border: 1px solid #128C7E; }
.div-btns .btn.dos:hover { background: #075E54; }
.btn-cerrar { position: absolute; width: 64px; height: 64px; border-radius: 50%; top: -16px; right: -16px; background: var(--clr-main);
    color: #fff; border: 4px solid #fff; cursor: pointer; transition: 0.3s ease all; }
.btn-cerrar:hover { transform: scale(1.1); font-weight: 900; }

/* Tamaño Mediano */
@media screen and (max-width: 992px) {
    .hero-div { width: 40vw; height: 40vw; }
    .hero-txt { width: 50vw; height: auto; padding: 3.5rem; }
    
    .bkmrk-portada { height: 400px; }

    .presentacion { overflow: hidden; }
    .presentacion .contenido { width: 85%; }
    .presentacion .contenido .imagen { top: 6rem; }

    .clientes .contenido { padding: 7rem 5%; }
    .cliente { width: 45%; margin: 2rem auto; }
    .clientes h2 { font-size: 8vw; }
    .clientes h3 { font-size: 5vw; }

    .servicios { padding: 7rem 10%; }
    .servicio img { width: 75%; }
    .servicios h2 { font-size: 8vw; }
    .servicios h3 { font-size: 4.5vw; }
    .servicio .description { font-size: 1.75vw; line-height: 2vw; }

    .pop-content { position: relative; width: 90%; height: 90%; left: 5%; top: 5%; padding: 1rem; }
}

/* Tamaño pequeño */
@media screen and (max-width: 576px) {
    .hero-txt { width: 95%; top: 50%; right: 2.5%; padding: 5rem 2rem; text-align: center; }
    .hero-txt .btn { margin: 1rem auto; }
    .hero-txt h1 { width: 100%; font-size: 8vw; text-align: center; }
    .hero-txt h2 { font-size: 6vw; }
    .hero-div { width: 80vw; height: 80vw; }
    .hero-img { width: 100%; }

    .bkmrk-portada { height: 200px; }
    .bkmrk-portada .shape01 { bottom: 0px; }
    .bkmrk-portada .shape02 { bottom: 75px; }
    .bkmrk-portada .shape03 { bottom: 150px; }

    .presentacion .contenido .imagen { width: 100%; }
    .presentacion .contenido .texto { width: 100%; }
    .presentacion .contenido .texto h2 { font-size: 4rem; line-height: 5rem; }
    .presentacion .contenido .texto h3 { font-size: 2rem; line-height: 4rem; }
    .presentacion .fondo { background-size: 25%; }

    .clientes h2 { font-size: 11vw; }
    .clientes h3 { font-size: 8vw; }

    .servicios h2 { font-size: 11vw; }
    .servicios h3 { font-size: 7.5vw; }
    .servicio .description { font-size: 3.75vw; line-height: 4vw; }

    .pop-content img { display: none; }
    .div-txts .only-txt { width: 100%; }
    .pop-content .btn { width: 100%; margin: 0.5rem 0; }
}

@keyframes hero-img-ani { 
    0% { transform: translateY(0); }
    50% { transform: translateY(16px); }
    100% { transform: translateY(0); }
}
@keyframes pop-up-ani {
    0% { visibility: hidden; opacity: 0; }
    90% {visibility: visible; opacity: 0; }
    100% {visibility: visible; opacity: 1; }
}