@font-face {
    font-family: 'Open Sauce';
    src: url("assets/fuentes/open_sauce/open-sauce.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins Bold';
    src: url("assets/fuentes/poppins/Poppins-Bold.ttf");
    font-weight: normal;
    font-style: normal;
}

/*Configuracion general de elementos dentro del html*/

*{
    border: 0;
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-style: normal;
}

html{
    min-width: 1386px;
}

main, section{
    background-color: #f8f9fa;
}

h1, h2, h3, h4, h5, h6{
    font-family: 'Poppins Bold', Helvetica, Verdana;
}

p{
    font-family: 'Open Sauce', sans-serif, 'Lucida Sans Regular';
    font-size: 15.4pt;
    line-height: 1.47;
}

.activo{
    animation: aparecer 1.5s alternate forwards;
}

@keyframes aparecer{
    0%{
        opacity: 0;
    }
    100%{
        background-color: #004aad;
        box-shadow: 0 0 10px 10px #FFFFFF22;
        opacity: 1;
    }
}

/*HEADER*/

header{
    padding: 42.5px 62.5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #0f172a;
}

nav ul.menu-nav li{
    flex: 2;
    list-style: none;
    display: inline;
}

ul.menu-nav a{
    padding: 15px;
    font-family: 'Open Sauce', sans-serif, 'Lucida Sans Regular';
    font-size: 1rem;
    color: #ffffff;
    margin: 0px 9px;
    border-radius: 100px;
}

div.logotipo-box > a{
    flex: 1;
    display: flex;
    align-items: center;
    gap: 17.5px;
}

#icon-jj{
    width: 75px;
    height: 75px;
}

h1{
    font-size: 16.2px;
    color: #ffffff;
    width: 300px;
}

/*MAIN-PRINCIPAL*/

main#principal{
    padding: 83.75px 77.5px 87.5px 83.75px;
    display: flex;
    align-items: center;
    gap: 76.25px;
}

#cont-main-principal{
    flex: 1;
    text-align: center;
}

#cont-main-principal p{
    margin-top: 88.75px;
    padding: 0px 62px;
    font-weight: 100;
    font-size: 15pt;
    white-space: 0;
}

#cont-main-principal h2{
    font-size: 30pt;
    color: #1a2b3c;
}


.carrusel-contenedor{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
    position: relative;
}

.carrusel-imagenes{
    display: flex;
    justify-items: center;
    overflow-x: hidden;
    scroll-snap-type: mandatory;
    scroll-behavior: smooth;
    background-color: #000000;
}

.carrusel-imagenes::-webkit-scrollbar{
    display: none;
}

.carrusel-imagenes img{
    width: 100%;
    flex-shrink: 0;
    scroll-snap-align: center;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    transition: 1s ease-in-out;
}

.carrusel-imagenes img.cambiando{
    opacity: 0;
}

.carrusel-nav{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 60px;
    margin-top: 50px;
}

.carrusel-nav a.inactivo{
    width: 5px;
    height: 5px;
    padding: 6px;
    background-color: #6182ae;
    border-radius: 50px;
}

.carrusel-nav a.activo{
    width: 5px;
    height: 5px;
    padding: 6px;
    background-color: #004aad;
    border-radius: 50px;
}

/*Section de ALGUNOS DE NUESTROS SERVICIOS*/

section#servicios-principal{
    padding: 87.5px 110px;
    display: flex;
    align-items: center;
    gap: 128.75px;
}

section#servicios-principal img{
    width: 470px;
    flex: 1;
}

div#cont-servicios-principal{
    flex: 1;
}

div#cont-servicios-principal h3{
    font-size: 25pt;
    color: #1a2b3c;
    text-align: center;
    padding: 0px 70px;
}

div#cont-servicios-principal p{
    margin-top: 58.75px;
    margin-bottom: 60px;
    font-size: 15pt;
}

div#servicios-list p{
    display: list-item;
    line-height: 1.58;
    font-size: 15pt;
}

div#servicios-list{
    padding: 0px 60px 0px 30px;
}


/*Footer*/

footer{
    background-color: #0f172a;
    padding: 105px 66.25px 33.125px;
}

div.cont-footer-header{
    display: flex;
    align-items: flex-start;
    gap: 60px;
}

div.logotipo-box{
    flex: 1;
    display: flex;
    align-items: center;
    gap: 17.5px;
}

div.cont-footer-header div.logotipo-box{
    flex: 0.35;
    padding-right: 110px;
    color: #ffffff;
    font-size: 17px;
}

div.cont-footer-header div.contacto-footer{
    flex: 0.65;
    display: grid;
    grid-template-columns: 0.60fr repeat(2, 1fr);
    grid-template-rows: 60px repeat(2, 1fr);
    grid-template-areas: "header-contacto header-contacto header-contacto"
                         "titulo-tel titulo-email titulo-direccion"
                         "info-tel info-email info-direccion";
    text-align: center;
    align-items: center;
    color: #ffffff;
    column-gap: 10px;
}

.header-contacto{
    grid-area: header-contacto;
    font-size: 16pt;
    border-bottom: 3px solid #ffffff;
    margin-bottom: 22px;
    padding-bottom: 10px;
}

.subheader-contacto.titulo-tel{
    grid-area: titulo-tel;
}

.subheader-contacto.titulo-email{
    grid-area: titulo-email;
}

.subheader-contacto{
    font-size: 12pt;
}

.subheader-contacto.titulo-direccion{
    grid-area: titulo-direccion;
}

.info-footer.info-tel{
    grid-area: info-tel;
}

.info-footer.info-email{
    grid-area: info-email;
}

.info-footer.info-direccion{
    grid-area: info-direccion;
}

.info-footer{
    font-size: 11pt;
    line-height: normal;
}

div.cont-footer-body{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 238.75px;
    margin: 70px 0px;
}

div.redes-footer{
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
    color: #ffffff;
    font-size: 16pt;
}

.btn-contacto-footer{
    text-align: center;
    background-color: #004aad;
    font-family: 'Poppins Bold', Helvetica, Verdana;
    font-size: 16pt;
    color: #ffffff;
    padding: 25px 36px;
    border-radius: 100pt;
    cursor: pointer;
    transition: all 0.6s ease-in-out;
}

.btn-contacto-footer:hover{
    box-shadow: 0 0 10px 10px #FFFFFF22;
    transform: scale(1);
}


.redes-footer a > img.logos-footer{
    width: 55px;
    height: 55px;
    display: block;
}

.logo-linkedin{
    border-radius: 16px;
}

.cont-footer-footer{
    text-align: center;
}

.pol-link{
    color: #004aad;
    text-decoration: underline;
    font-family: 'Open Sauce', sans-serif, 'Lucida Sans Regular';
    font-size: 14.6pt;
    font-weight: lighter;
    display: block;
    margin-bottom: 25px;
}

.derechos-footer p{
    display: inline;
    margin: 0px 20px;
    color: #ffffff;
}

/*Botón para subir al principio de la página*/
.btn_subir{
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 55px;
}