@charset "UTF-8";

* { box-sizing: border-box; }

body, input, textarea, button, select {
    font-family: 'Circular Std';
}

body {
    margin:0;    
    font-size:10px;
    color: #6B6B6B;
    font-weight: 400;
    padding-right: 1.8em;
    background: #1D1D1B;
}

* {
-webkit-tap-highlight-color: transparent;
}
.center { text-align: center; }
.right { text-align: right; }
.left { text-align: right; }

input, textarea {
    box-shadow: none !important;
    outline: 0;
}
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #323031 inset !important;
  -webkit-text-fill-color: white !important;
}

a { text-decoration:none; }

h1, h2, h3, h4, h5, h6, p {
    font-weight: normal;
    margin: 0;
    font-size: 1.4em;
    line-height: 1.5em;
}

img {
    max-width:100%;
}

.table { display: table; width: 100%; height: 100%; }
.cell { display: table-cell; vertical-align: middle; }
.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.nmt { margin-top: 0 !important; }
.nmb { margin-bottom: 0 !important; }
.npt { padding-top: 0 !important; }
.npb { padding-bottom: 0 !important; }


.video-responsive {
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    padding-top: 30px;
    position: relative;
    }
.video-responsive iframe, .video-responsive object, .video-responsive embed {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}


.espacio1 { height: 1em; }
.espacio2 { height: 2em; }
.espacio3 { height: 3em; }
.espacio4 { height: 4em; }
.espacio5 { height: 5em; }
.espacio6 { height: 6em; }
.espacio7 { height: 7em; }
.espacio8 { height: 8em; }
.espacio9 { height: 9em; }
.espacio10 { height: 10em; }


.container {
    width: 100%;
    max-width: 168em;
    padding: 0 8em;
    margin: 0 auto;
    position: relative;
}
.columnas {
    display: flex;
    flex-wrap: wrap;
}


.overflow {
    overflow: hidden;
    position: relative;
}

header {
    background: #252728;
    position: relative;
    z-index: 1;
}
header .overflow {
    padding: 5em 0 14em;
}

header .columnas {
    margin: 0 -1.5em;
    align-items: center;
}
header .columnas .columna {
    padding: 1.5em;
}
header .columnas .izq {
    flex: 0 0 45%;
    max-width: 45%;
    position: relative;
    z-index: 1;
}
header .columnas .der {
    flex: 0 0 55%;
    max-width: 55%;
    text-align: center;
    transform: translateY(5em);
}
header .logos {
    margin: 0 -2em 12em;
}
header .logos img {
    margin: 1em 2em;
    display: inline-block;
    vertical-align: middle;
}
header .img {
    display: inline-block;
    vertical-align: middle;
    position: relative;
}
header .img::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    height: 200vh;
    width: 200vw;
    transform: translate(-50%,-50%);
    background: url(images/header_fondo.png) center no-repeat;
    background-size: 192em auto;
}
header .img img {
    display: block;
    position: relative;
}
header h1 {
    font-weight: 900;
    font-size: 8.5em;
    line-height: 1.0em;
    color: #FFFFFF;
    margin-bottom: 0.9em;
}
header h1 strong {
    font-weight: 900;
    color: #0098DC;
}
header h2 {
    font-weight: 900;
    font-size: 4.3em;
    line-height: 1.0em;
    color: #FFFFFF;
    margin-bottom: 0.2em;
}
header p {
    font-weight: 400;
    font-size: 2.3em;
    line-height: 1.2em;
    color: #FFFFFF;
}
header p strong {
    font-weight: 400;
    color: #0098DC;
}


header .formulario {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.5em;
    text-align: right;
    z-index: 1;
    pointer-events: none;
}
header .formulario .bloque {
    display: inline-block;
    background: #ffffff;
    padding: 5em 5.5em 4.5em;
    border-radius: 2.5em;
    width: 45em;
    text-align: left;
    box-shadow: -89px 0px 29px -65px rgba(49, 94, 114, 0.09);
    pointer-events: all;
}
header .formulario .bloque h2 {
    font-weight: 500;
    font-size: 3em;
    line-height: 1.1em;
    color: #1D1D1B;
    margin-bottom: 0.5em;
}
header .formulario .bloque p {
    font-weight: 400;
    font-size: 1.9em;
    line-height: 1.1em;
    color: #6B6B6B;
    margin-bottom: 1em;
}


.flotante .circulo {
    width: 5.2em; height: 5.2em;
    border-radius: 10000px;
    border: 1.4em solid #FFFFFF;
}
.flotante .cuadrado {
    width: 4.5em; height: 4.5em;
    border: 1.4em solid #FFFFFF;
}

.flotante .circulo.azul,
.flotante .cuadrado.azul {
    border-color: #0098DC;
}

.boton {
    display: inline-block;
    background: var(--oScriptsColor1);
    border: 0;
    border-radius: 0.25em;
    padding: 1em 2.0em;
    line-height: 1em;
    cursor: pointer;
    min-width: 10em;
    transition: all 0.3s;

    font-weight: 500;
    font-size: 2em;
    text-align: center;
    letter-spacing: 0.02em;
    color: #FFFFFF;

}
.boton:hover {
    background: var(--oScriptsColor2);
}

.boton2 {
    font-weight: 400;
    font-size: 2em;
    text-align: center;
    letter-spacing: 0.02em;
    color: #0098DC;
    transition: all 0.3s;
}
.boton2:hover {
    color: #ffffff;
}

header .formulario .bloque .boton {
    display: block;
    width: 100%;
}



#about {
    padding: 14em 0;
    background: #F4F4F4;
    overflow: hidden;
}
#about .columnas {
    align-items: center;
}
#about .columna {
    padding: 2em;
}
#about .columna.izq {
    flex: 0 0 63%;
    max-width: 63%;
    text-align: center;
}
#about .columna.der {
    flex: 0 0 37%;
    max-width: 37%;
}
#about h2 {
    font-weight: 500;
    font-size: 4.5em;
    line-height: 1.1em;
    color: #252728;
    margin-bottom: 0.5em;
    max-width: 9em;
}
#about h2 strong {
    font-weight: 600;
    color: #0098DC;
}
#about p {
    font-weight: 400;
    font-size: 1.8em;
    line-height: 1.2em;
    color: #6B6B6B;
    margin-bottom: 2em;
}
#about p strong {
    color: #252728;
}

#about .img {
    display: inline-block;
    position: relative;
}
#about .img img {
    display: inline-block;
    position: relative;
}
#about .img::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 75.9em;
    height: 72.8em;
    transform: translate(-50%,-50%);
    background: url(images/about_fondo.png) center no-repeat;
    background-size: cover;
}

#porque {
    padding: 16em 0;
    background: #ffffff;
}

.titulo {
    font-weight: 500;
    font-size: 4.5em;
    line-height: 1.2em;
    text-align: center;
    color: #252728;
    margin-bottom: 0.8em;
}
.titulo strong {
    color: #0098DC;
    font-weight: 600;
}

#porque .items {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -1em;
    justify-content: center;
}
#porque .items .item {
    padding: 1em;
    flex: 0 0 33.333%;
    max-width: 33.333%;
}

#porque .items .item .bloque {
    background: #F4F4F4;
    padding: 6em 5.5em;
    height: 100%;
}
#porque .items .item .bloque h3 {
    font-weight: 500;
    font-size: 3em;
    line-height: 1.2em;
    color: #252728;
    margin-bottom: 0.8em;
}
#porque .items .item .bloque p {
    font-weight: 450;
    font-size: 1.8em;
    line-height: 1.2em;
    color: #6B6B6B;
}
#porque .items .item .bloque .icono {
    width: 10em; height: 10em;
    background: #ffffff;
    border-radius: 10000px;
    position: relative;
    margin-bottom: 3.5em;
}
#porque .items .item .bloque .icono img {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%,-50%);
    width: 5.5em; height: auto;
}

#porque .items2 {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -1.5em;
    justify-content: center;

}
#porque .items2 .item {
    padding: 1.5em;
    flex: 0 0 20%;
    max-width: 20%;
    text-align: center;
}
#porque .items2 .item p {
    font-weight: 400;
    font-size: 2.5em;
    line-height: 1.3em;
    color: #6B6B6B;
    max-width: 8em;
    margin: 0 auto;
}

#porque .items2 .item .num {
    font-weight: 900;
    font-size: 9em;
    line-height: 0.8em;
    color: #0098DC;
}
#porque .items2 .item .num.outline {
    -webkit-text-stroke: 1px #D2D2D2;
    -webkit-text-fill-color: transparent;
}


#areas {
    background: #F4F4F4;
    padding: 16em 0 0em;
}
#areas .items {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -1em;
    justify-content: center;
}
#areas .items .item {
    padding: 1em;
    flex: 0 0 33.333%;
    max-width: 33.333%;
}
#areas .items .item .bloque {
    background: #ffffff;
    padding: 6em 5.5em;
    height: 100%;
}

#areas .items .item .bloque h3 {
    font-weight: 500;
    font-size: 3em;
    line-height: 1.2em;
    color: #252728;
    margin-bottom: 0.8em;
}
#areas .items .item .bloque p {
    font-weight: 450;
    font-size: 1.8em;
    line-height: 1.2em;
    color: #6B6B6B;
}
#areas .items .item .bloque .icono {
    width: 10em; height: 10em;
    background: #F4F4F4;
    border-radius: 10000px;
    position: relative;
    margin-bottom: 3.5em;
}
#areas .items .item .bloque .icono img {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%,-50%);
    width: 5.5em; height: auto;
}


#ebook {
    background: #F4F4F4;
    padding: 20em 0 16em;
}
#ebook .bloque {
    padding: 17em;
    background: url(images/sabermas_fondo.png) center no-repeat #ffffff;
    box-shadow: 0px 8.9em 2.9em -6.5em rgba(49, 94, 114, 0.09);
    border-radius: 2.5em;
    text-align: center;
}
#ebook .bloque {
}

#porque2 {
    background: #F4F4F4;
    padding: 0 0 12em;
}
#porque2 .intro {
    font-weight: 400;
    font-size: 2.5em;
    line-height: 1.2em;
    text-align: center;
    color: #6B6B6B;
    margin: 0 auto 2em;
    max-width: 30em;
}

#porque2 .items {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0 -1em;
    justify-content: center;
}
#porque2 .items .item {
    padding: 3.5em 1em;
    flex: 0 0 33.333%;
    max-width: 33.333%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

#porque2 .items .item .icono {
    width: 12em;
    height: 12em;
    border: 1px solid #E3E3E3;
    border-radius: 10000px;
    padding: 1em;
    position: relative;
}
#porque2 .items .item .icono::before {
    content: "";
    position: absolute;
    left: -1em; top: -1em;
    right: -1em; bottom: -1em;
    border: 1px solid #E3E3E3;
    border-radius: 10000px;
}
#porque2 .items .item .icono .circulo {
    width: 100%;
    height: 100%;
    background: #ffffff;
    border-radius: 1000px;
    position: relative;
}
#porque2 .items .item .icono .circulo img {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%,-50%);
    width: 5.5em; height: auto;
}
#porque2 .items .item p {
    font-style: normal;
    font-weight: 400;
    font-size: 2.5em;
    line-height: 1.2em;
    color: #6B6B6B;
    padding: 1em;
    width: 10em;
}

#sabermas {
    padding: 27em 0 23em;
    background: url(images/final_fondo.png) center no-repeat #252728;
    text-align: center;
}

#sabermas h2 {
    font-weight: 500;
    font-size: 4.5em;
    line-height: 1.1em;
    color: #FFFFFF;
    margin: 0 auto 0.8em;
    max-width: 11em;
}
#sabermas p {
    font-weight: 400;
    font-size: 2.5em;
    line-height: 1.2em;
    color: #E5E5E5;
    margin: 0 auto 1.5em;
    max-width: 20em;
}
#sabermas .boton:hover {
    background: #ffffff;
    color: #0098DC;
}


footer {
    background: #1D1D1B;
    padding: 3.0em 0;
}
footer .columnas {
    justify-content: space-between;
    margin-bottom: 0 -1.5em;
    align-items: center;
}
footer .columna {
    padding: 1.5em;
}

footer .flecha {
    width: 8em;
    height: 8em;
    background: #0098DC;
    border-radius: 10000px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
}
footer .flecha svg {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%,-50%);
    width: 2.8em; height: auto;
}
footer .flecha svg .st0{
    fill:#FFFFFF;
    transition: all 0.3s;
}
footer .flecha:hover {
    background: #ffffff;
}
footer .flecha:hover svg .st0{
    fill:#0098DC;
}




.flotante .rotacion {
    -webkit-animation-name: rotacion;
    -webkit-animation-duration: 5s;
    animation-name: rotacion;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.flotante .rotacion.inversa {
    -webkit-animation-name: rotacion2;
    animation-name: rotacion2;
}
.flotante .rotacion.rapida {
    -webkit-animation-duration: 2.5s;
    animation-duration: 2.5s;
}
.flotante  .rotacion.lenta {
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
}


@keyframes rotacion {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes rotacion2 {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

#popupEbook {
    text-align: center;
}

#popupEbook p {
    font-style: normal;
    font-weight: 500;
    font-size: 2em;
    line-height: 1.3em;
    color: #1D1D1B;
    margin-bottom: 1em;
}



/* ---------------------- Media Queries ------------------ */

@media (max-width: 1850px) {
    body {
        font-size: 9.5px;
    }
}
@media (max-width: 1800px) {
    body {
        font-size: 9px;
    }    
}

@media (max-width: 1700px) {
    body {
        font-size: 8.5px;
    }
    header h1 {
        font-size: 7.5em;
    }
}

@media (max-width: 1650px) {    
}

@media (max-width: 1600px) {
    body {
        font-size: 8px;
    }
}

@media (max-width: 1500px) {
    
}

@media (max-width: 1400px) {
    header h1 {
        font-size: 6.5em;
    }
    header .columnas .izq,
    header .columnas .der {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 1300px) { 
}

@media (max-width: 1250px) {
}

@media (max-width: 1200px) {
    #porque .items2 .item .num {
        font-size: 7em;
    }
    #ebook .bloque {
        padding: 10em;
    }
}

@media (max-width: 1150px) {
    header .formulario {
        position: relative;
        left: auto;
        top: auto;
        padding: 0 8em;
    }
    header .formulario .bloque {
        width: 100%;
    }
    header {
        padding-bottom: 10em;
    }
    header .overflow {
        padding-bottom: 8em;
    }

    form {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    form .campo {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    form .campo.full {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

}

@media (max-width: 1100px) {
    #about .columna.izq {
        flex: 0 0 55%;
        max-width: 55%;
    }
    #about .columna.der {
        flex: 0 0 45%;
        max-width: 45%;
    }
    #porque .items2 {
        max-width: 84em;
        margin: 0 auto;
    }
    #porque .items2 .item {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }
    #areas .items .item .bloque {
        padding: 4em;
    }
    #porque2 .items {
        align-items: flex-start;
    }
    #porque2 .items .item p {
        flex: 0 0 100%;
        text-align: center;
    }
}

@media (max-width: 1050px) {
}

@media (max-width: 1000px) {
    body {
        padding-right: 0;
    }
    #porque .items .item .bloque {
        padding: 4em;
    }
}

@media (max-width: 950px) {
    .botonMenuMobile,
    #menuMobile {
        display: block;
    }
}

@media (max-width: 900px) {
    #about .columna.izq {
        flex: 0 0 100%;
        max-width: 100%;
    }
    #about .columna.der {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center;
    }
    #about .img img {
        width: 40em !important;
    }
    #about h2 {
        max-width: none;
    }

    #porque .items .item {
        flex: 0 0 50%;
        max-width: 50%;
    }
    #areas .items .item {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 800px) {
    .container,
    header .formulario {
        padding: 0 6em !important;
    }
    #menuPrincipal {
        display: none;
    }

    header .columnas .izq, header .columnas .der {
        flex: 0 0 100%;
        max-width: 100%;
    }
    header .img img {
        width: 50em !important;
    }
    header .columnas .der {
        transform: none;
    }
    header .logos {
        margin-bottom: 8em;
    }
    header .overflow {
        padding-bottom: 4em;
    }
    header .columnas .izq {
        text-align: center;
    }

    .titulo {
        font-size: 4em;
    }

}

@media (max-width: 700px) {
    form .campo {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .titulo {
        font-size: 3.5em;
    }
    .titulo br {
        display: none;
    }

    #porque .items2 .item {
        flex: 0 0 50%;
        max-width: 50%;
    }
    #ebook .bloque {
        padding: 7em;
    }
    #porque2 .items .item {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 2em 1em;
    }


    #about {
        padding: 10em 0;
    }
    #porque {
        padding: 10em 0;   
    }
    #areas {
        padding-top: 10em;
    }
    #ebook {
        padding: 10em 0 12em;
    }

}



@media (max-width: 650px) {
    #porque .items .item {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .container,
    header .formulario {
        padding: 0 4em !important;
    }
}

@media (max-width: 550px) {
    #areas .items .item {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 500px) {
    header h1 {
        font-size: 5.2em;
    }
    header .formulario .bloque {
        padding: 4em 3.5em 3.5em;
    }
    #porque .items2 .item {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 3em 1.5em;
    }
    #ebook .bloque {
        padding: 7em 4em;
    }
}

@media (max-width: 450px) {
    #porque2 .items .item {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 400px) {
    .container,
    header .formulario {
        padding: 0 3em !important;
    }
}

@media (max-width: 350px) {
}