@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*

Con este reset vamos a resolver:
    👉 Unificar el uso de Custom Properties
    👉 Problemas de box-model más generales
    👉 Problemas con imagenes, vídeos e iconos svg
    👉 Problemas con tipografías y etiquetas input en formularios
    👉 Unificar la tipografía de todas las etiquetas de una web

*/
/* Aquí definimos las Custom properties */
:root {
--negro: #393939;
--azul: #004AAD;
/* Tipografía */
--tipo-principal: Montserrat, Arial, sans-serif;
--tipo-secundaria: Verdana;
}

/* Las adaptamos al modo oscuro */
@media (prefers-color-scheme: dark) {
:root {
    --negro: #ececec;
    --azul: rgb(255, 255, 255);
}
}
/* Opcional */
/* Configuramos si un usuario ha activado el modo alto contraste. (WD) */
/* Opcional */
/* Desactivamos los animations en el caso de que el usuario haya configurado el modo sin animation */
@media (prefers-reduced-motion: reduce) {
* {
    -webkit-animation: none !important;
            animation: none !important;
    -webkit-transition: none !important;
    transition: none !important;
}
}
/* Reseteamos los margin y paddings de todas las etiquetas */
* {
margin: 0;
padding: 0;
border: 0;
-webkit-box-sizing: border-box;
        box-sizing: border-box;
vertical-align: baseline;
}

/* Evitamos problemas con las imagenes */
img, picture, video, iframe, figure {
max-width: 100%;
width: 100%;
display: block;
/* opcional */
-o-object-fit: cover;
    object-fit: cover;
/* opcional */
-o-object-position: center center;
    object-position: center center;
}

/* Reseteamos los enlaces para funcionar como cajas... */
a {
display: block;
text-decoration: none;
color: inherit;
font-size: inherit;
}

/* ... excepto los que se encuentran en párrafos */
p a {
display: inline;
}

/* Quitamos los puntos de los <li> */
li {
list-style-type: none;
}

/* Configuramos anclas suaves */
html {
scroll-behavior: smooth;
}

/* Desactivamos estilos por defecto de las principales etiquetas de texto */
h1, h2, h3, h4, h5, h6, p, span, a, strong, blockquote, i, b, u, em {
font-size: 1em;
font-weight: inherit;
font-style: inherit;
text-decoration: none;
color: inherit;
}

/* Evitamos problemas con los pseudoelementos de quotes */
blockquote:before, blockquote:after, q:before, q:after {
content: "";
content: none;
}

/* Configuramos el texto que seleccionamos */
::-moz-selection {
background-color: var(--negro);
color: var(--blanco);
}
::selection {
background-color: var(--negro);
color: var(--blanco);
}

/* Nivelamos problemas de tipografías y colocación de formularios */
form, input, textarea, select, button, label {
font-family: inherit;
font-size: inherit;
-webkit-hyphens: auto;
    -ms-hyphens: auto;
        hyphens: auto;
background-color: transparent;
color: inherit;
display: block;
/* opcional */
-webkit-appearance: none;
    -moz-appearance: none;
        appearance: none;
}

/* Reseteamos las tablas */
table, tr, td {
border-collapse: collapse;
border-spacing: 0;
}

/* Evitamos problemas con los SVG */
svg {
width: 100%;
display: block;
fill: currentColor;
}

/* (Probándolo, no usar en producción) En el caso de añadir una  */
/* p svg{
display: inline;
width: initial;
} */
/* Configuramos la tipografía para toda la web */
body {
min-height: 100vh;
font-size: 100%;
font-family: var(--tipo-principal);
color: var(--negro);
/* opcional */
/* line-height: 1.4em; */
/* opcional */
/* -webkit-hyphens: auto;
    -ms-hyphens: auto;
        hyphens: auto; */
/* opcional */
font-smooth: always;
/* opcional */
-webkit-font-smoothing: antialiased;
/* opcional */
-moz-osx-font-smoothing: grayscale;
}

.container{
    width: 100%;
    display: flex;
    flex-direction: column;
}

.container-a{
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Header */

.a-header{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background-color: #004AAD;
}

.a-header-logo{
    width: 12rem;
}

.a-header-logo-img{
    width: 100%;
    object-fit: cover;
}

.a-header-btn{
    background-color: white;
    padding: 0.8rem 2.2em;
    border-radius: 10rem;
    cursor: pointer;
    color: #004AAD;
}

/* Fin header */

/* Section A */

.a-info{
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-top: 4rem;
}

.a-info-texto{
    display: flex;
    width: 55%;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 0rem 2rem;
    justify-content: center;
}

.a-info-texto-titulo{
    color: #004AAD;
    font-weight: 600;
    font-size: 3.125rem;
    margin-bottom: 1.5rem;
}

.a-info-texto-parrafo{
    color: #393939;
    font-size: 1.3125rem;
    margin-bottom: 1rem;
}

.a-info-texto-leyenda{
    display: flex;
    flex-direction: row;
    font-size: 1.3125rem;
    color: #393939;
}

.a-info-texto-leyenda-nombre{
    font-weight: 500;
    padding-right: 0.5rem;
    border-right: 1px solid #393939;
    margin-right: 0.5rem;
}

.a-info-dibujo{
    width: 45%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
}

.a-info-dibujo-img{
    width: 70%;
    z-index: 2;
    transform: translateX(2rem);
}

.a-info-dibujo::after{
    content: '';
    display: block;
    position: absolute;
    background-color: #004AAD;
    width: 100%;
    height: 68%;
    border-radius: 10em 0em 0em 10em;
    z-index: 1;
}

.a-info-dibujo-contacto{
    display: flex;
    position: absolute;
    z-index: 2;
    left: 0.3rem;
    transform: translateY(1rem);
}

.c-info-dibujo-contacto{
    display: flex;
    position: absolute;
    z-index: 2;
    right: 0.3rem;
    transform: translateY(1rem);
}

.contacto-logo{
    padding: 0.8rem;
    background-color: #989898;
    border-radius: 100rem;
    margin-right: 0.5rem;
    cursor: pointer;
}

/* Fin section A */

/* Banner 1 */

.container-b{
    width: 100%;
    margin-top: 5rem;
    margin-bottom: 5rem;
    background-color: white;
}

.b-text{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 3.125rem;
    flex-direction: column;
}

.b-text-first{
    color: #989898;
    text-align: center;
}

.b-text-second{
    color: #004AAD;
    text-align: center;
}

/* Fin Banner 1 */

/* Section C */

.c-info{
    width: 100%;
    display: flex;
    flex-direction: row;
    background-color: #004AAD;
    padding: 2em 0em;
}

.c-info-texto{
    display: flex;
    width: 55%;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 0rem 2rem;
    justify-content: center;
}

.c-info-texto-titulo{
    color: #004AAD;
    font-weight: 600;
    font-size: 3.125rem;
    margin-bottom: 1.5rem;
}

.c-info-texto-parrafo{
    color: white;
    font-size: 1.3125rem;
    margin-bottom: 1rem;
}

.c-info-texto-leyenda{
    display: flex;
    flex-direction: row;
    font-size: 1.3125rem;
    color: white;
}

.c-info-texto-leyenda-nombre{
    font-weight: 500;
    padding-right: 0.5rem;
    border-right: 1px solid white;
    margin-right: 0.5rem;
}

.c-info-dibujo{
    width: 45%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
}

.c-info-dibujo-img{
    width: 70%;
    z-index: 2;
    transform: translateX(-2.3rem);
}

.c-info-dibujo::after{
    content: '';
    display: block;
    position: absolute;
    background-color: white;
    width: 100%;
    height: 68%;
    border-radius: 0em 10em 10em 0em;
    z-index: 1;
}

/* Fin section C */

/* Section D */

.d-info{
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-top: 2rem;
}

.d-info-texto{
    display: flex;
    width: 55%;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 0rem 2rem;
    justify-content: center;
}

.d-info-texto-parrafo{
    color: #393939;
    font-size: 1.3125rem;
    margin-bottom: 1rem;
}

.d-info-texto-leyenda{
    display: flex;
    flex-direction: row;
    font-size: 1.3125rem;
    color: #393939;
}

.d-info-texto-leyenda-nombre{
    font-weight: 500;
    padding-right: 0.5rem;
    border-right: 1px solid #393939;
    margin-right: 0.5rem;
}

.d-info-dibujo{
    width: 45%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
}

.d-info-dibujo-img{
    width: 70%;
    z-index: 2;
    transform: translateX(2.5rem);
}

.d-info-dibujo::after{
    content: '';
    display: block;
    position: absolute;
    background-color: #004AAD;
    width: 100%;
    height: 68%;
    border-radius: 10em 0em 0em 10em;
    z-index: 1;
}

/* Fin section D */

/* Banner 2 */

.container-e{
    width: 100%;
    margin-top: 5rem;
    margin-bottom: 5rem;
    background-color: white;
}

.e-text{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 3.125rem;
    flex-direction: column;
}

.e-text-first{
    color: #989898;
    text-align: center;
}

.e-text-second{
    color: #004AAD;
    text-align: center;
}

/* Fin Banner 2 */

/* Section F */

.container-f{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 5em;
}

.f-meet-schedule{
    display: flex;
    flex-direction: row;
    width: 65%;
    box-shadow: 8px 9px 66px -6px rgba(150, 150, 150, 0.24);
    padding-left: 1.5em;
}

.f-meet-schedule-text{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.f-meet-schedule-text h2{
    font-weight: 600;
    font-size: 3.125rem;
    color: #393939;
    font-weight: 600;
    padding-top: 0.3em;
    margin-bottom: 0.5em;
}

.f-meet-schedule-text p{
    font-size: 1.3125rem;
    color: #393939;
    margin-bottom: 1em;
}

.f-meet-schedule-calendly{
    height: 100%;
}

/* Responsive */

@media (max-width: 480px){
    /* Section A */
    .a-header-btn{
        display: none;
    }

    .a-info{
        flex-wrap: wrap;
    }

    .a-info-texto{
        width: 100%;
    }

    .a-info-texto-leyenda-nombre{
        padding-right: none;
        margin-right: none;
    }

    .a-info-dibujo{
        width: 100%;
        margin-top: 1.5rem;
    }

    /* Fin Section A*/

    /* Section C */

    .c-info{
        flex-wrap: wrap-reverse;
    }

    .c-info-texto{
        width: 100%;
    }

    .c-info-texto-leyenda-nombre{
        padding-right: none;
        margin-right: none;
    }

    .c-info-dibujo{
        width: 100%;
        margin-top: 1.5rem;
    }

    /* Fin Section C*/

    /* Section D */

    .d-header-btn{
        display: none;
    }

    .d-info{
        flex-wrap: wrap;
    }

    .d-info-texto{
        width: 100%;
    }

    .d-info-texto-leyenda-nombre{
        padding-right: none;
        margin-right: none;
    }

    .d-info-dibujo{
        width: 100%;
        margin-top: 1.5rem;
    }

    /* Fin Section D*/

    /* Section F */
    .container-f{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 5em;
    }
    
    .f-meet-schedule{
        display: flex;
        flex-direction: column;
        width: 100%;
        padding-left: 0rem;
        align-items: center;
        justify-content: center;
        box-shadow: none;
    }
    
    .f-meet-schedule-text{
        display: none;
    }
    
    .f-meet-schedule-calendly{
        height: 100%;
        width: 100%;
        padding-left: none;
    }
}