@keyframes show
{
    from
    {
        opacity : 0;
        scale   : 90%;
    }
    to
    {
        opacity : 1;
        scale   : 100%;
    }
}
@keyframes mostrarScalar {
	from 
    {
        opacity   : 0;
        transform : scale3d(.5, .5, .5);
	}
	to 
    {
        opacity: 1;
	}
}


.bloque-1 .linea-1 .txt-1, .bloque-1 .linea-1 .txt-2, .bloque-1 .linea-1 button, .bloque-2 button, .bloque-1 .linea-1 .diagrama, .slider-empresas
{
    animation: mostrarScalar 1.5s ease 0s 1 normal forwards;
}
.bloque-3 .solucion, .col-comillas, .row-txt-comillas, .bloque-4 .titulo, .bloque-3 .titulo, .bloque-2 .titulo, .bloque-2 .scroll, .info-bloque-2 .parrafo, .info-bloque-2 button, .col-txt-bienestar, .col-txt-concentrate
{
    view-timeline-name   : --fadeA;
    view-timeline-axis   : block;
    animation-timeline   : --fadeA;
    animation-name       : show;
    animation-range      : entry 35% cover 50%;
    animation-fill-mode  : both;
}

 .img-equipo, .col-img-bienestar, .col-img-concentrate
 {
    view-timeline-name   : --fadeB;
    view-timeline-axis   : block;
    animation-timeline   : --fadeB;
    animation-name       : show;
    animation-range      : entry 15% cover 40%;
    animation-fill-mode  : both;
 }


    
.bloque-1
{
    background : url('../imagenes/fondo_home.png') 0px 0px / 100% 100% no-repeat;
    padding    : 0px 0px 60px 0px;
}
.bloque-1 .row
{
    padding : 0px !important;
    margin  : 0px !important;
}

.bloque-1 .linea-1 .diagrama
{
    background     : url(../imagenes/diagrama_1.png) -15px 80px / 105% 54% no-repeat;
    mix-blend-mode : multiply;
   
}
.bloque-1 .linea-1 .texto
{
    padding : 0px 41px 0px 108px;
}

.bloque-1 .linea-1 .txt-1
{
    color       : #244079;
    font-size   : 44px;
    font-style  : normal;
    font-weight : 800;
    line-height : 57.2px;
    padding     : 150px 0px 0px 0px;
}
.bloque-1 .linea-1 .txt-2
{
    color       : #737B7D;
    font-size   : 18px;
    font-style  : normal;
    font-weight : 400;
    line-height : 23px;
    padding     : 19px 0px 40px 0px;
}
.bloque-1 .linea-1 .boton
{
    padding : 0px 0px 150px 0px
}
.bloque-2 .boton
{
    padding : 0px;
}
.bloque-1 .linea-1 button, .bloque-2 button
{
    display         : flex;
    width           : 171px;
    height          : 48px;
    padding         : 12px 16px;
    justify-content : center;
    align-items     : center;
    gap             : 10px;
    border-radius   : 6px;
    border          : 2px solid #385DA8;
    background      : transparent;
    color           : #385DA8;
    font-size       : 16px;
    font-style      : normal;
    font-weight     : 600;
    line-height     : 22px;
    letter-spacing  : -0.32px;
}


.slider-empresas
{
    padding : 0px;
    margin  : 0px;
}
.slider-empresas .linea-2
{
    margin : -35px 0px 20px 0px !important;
}


.bloque-2
{
    padding :0px 0px 95px 0px;
}
.bloque-2 .titulo
{
    color       : #244079;
    text-align  : center;
    font-family : Inter;
    font-size   : 36px;
    font-style  : normal;
    font-weight : 800;
    line-height : 46.8px;
    padding     : 123px 0px 99px 0px;
}
.bloque-2 .capa-img-equipo
{
    padding : 0px 0px 0px 172px;
}
.bloque-2 .img-equipo
{    
    height         : 100%;
    flex-shrink    : 0;
    border-radius  : 12px;    
    mix-blend-mode : multiply;
    display        : flex;
    align-items    : center;
}

.bloque-2 .img-equipo img
{
    width : 87%;
}
.bloque-2 .txt-1
{
    align-self     : stretch;
    color          : #262626;
    font-size      : 22px;
    font-style     : normal;
    font-weight    : 600;
    line-height    : 26.4px;
    padding-top    : 10px;
    padding-bottom : 10px;
}
.bloque-2 .txt-2
{
    color       : #737B7D;
    font-family : Inter;
    font-size   : 16px;
    font-style  : normal;
    font-weight : 400;
    line-height : 22.4px;
    max-width   : 490px;
}
.bloque-2 .sub-bloque-1
{
    padding-top : 40px;
}
.bloque-2 .boton
{
    padding-top : 40px !important;
}
.bloque-2 .scroll
{
    max-width : 50px;
}
.bloque-2 .info-bloque-2
{
    margin-top  : -10px;
    margin-left : 30px;
}
.bloque-2 .scroll .linea
{
  border-left : 2px solid #DD082D;
  height      : 393px;
  position    : absolute;
  margin-top  : 100px;
}
.bloque-2 .scroll .bt-circulo
{
    border-radius    : 50% !important;
    width            : 43px !important;
    height           : 43px !important;
    border-color     : #DD082D !important;
    color            : #DD082D;
    font-size        : 16px;
    font-weight      : 600;
    background-color : #FFFFFF;
}
.bloque-2 .scroll .bt-circulo.rojo
{
    background-color : #DD082D !important;
    color            : white !important;
}
.bloque-2 .scroll .bt-circulo.circulo-1
{
    position : absolute;
    margin   : 65px 0px 0px -20px
}
.bloque-2 .scroll .bt-circulo.circulo-2
{
    position : absolute;
    margin   : 265px 0px 0px -20px
}
.bloque-2 .scroll .bt-circulo.circulo-3
{
    position : absolute;
    margin   : 475px 0px 0px -20px
}


.bloque-3
{
    background : url('../imagenes/fondo_home.png') 0px 0px / 100% 100% no-repeat;
    padding    : 0px 0px 110px 0px;
}
.bloque-3 .titulo
{
    color       : #244079;
    text-align  : center;
    font-family : Inter;
    font-size   : 36px;
    font-style  : normal;
    font-weight : 800;    
    padding     : 120px 0px 85px 0px;
}
.bloque-3 .row-soluciones
{
    padding    : 0px 90px 0px 90px
}
.bloque-3 .row-soluciones .col-soluciones
{
    padding  : 0px 15px 15px 0px;
    position : relative;
}

.bloque-3 .row-soluciones .col-soluciones .capa_comming_soon
{
    position : absolute;
    top      : 0;
    right    : 0;
    margin   : -22px 5px 0px 0px;
}
.bloque-3 .row-soluciones .col-soluciones .capa_comming_soon img
{
    width : 70px;
}

.bloque-3 .solucion
{
    height        : 219px;
    border-radius : 12px;
    border        : 1px solid #FFF;
    background    : rgba(255, 255, 255, 0.50);
    padding       : 30px 40px 30px 40px;
}
.bloque-3 .solucion:hover
{
    height        : 219px;
    border-radius : 12px;
    border        : 1px solid #FFF;
    background    : #FFF;
    box-shadow    : 0px 0px 20px 0px rgba(56, 93, 168, 0.08);    
    transform     : rotate(2deg)
}
.bloque-3 .solucion .row-1
{
    display         : flex;
    flex-wrap       : nowrap;
    justify-content : flex-start;
    flex-direction  : row;
    height          : 50px;
}
.bloque-3 .solucion .row-1 img
{
    width  : auto;
    height : auto;
}
.bloque-3 .solucion .row-2
{
    color       : #262626;
    font-size   : 22px;
    font-style  : normal;
    font-weight : 600;
    line-height : 26.4px;
    padding     : 10px 0px 10px 0px;
}
.bloque-3 .solucion .row-3
{
    color       : #737B7D;
    font-size   : 16px;
    font-style  : normal;
    font-weight : 400;
    line-height : 20.8px;
}
.bloque-3 .solucion svg
{
    width   : auto;
    padding : 0px;
}





.bloque-4
{
    padding : 0px 0px 145px 0px;
}
.bloque-4 .row-titulo
{
    justify-content: space-evenly;
}
.bloque-4 .titulo
{
    max-width   : 956px;
    color       : #244079;
    text-align  : center;
    font-family : Inter;
    font-size   : 36px;
    font-style  : normal;
    font-weight : 800;
    line-height : 46.8px;
    padding     : 60px 0px 85px 1px;    
}
.bloque-4 .row-bienestar .col-img-bienestar
{
    display         : flex;
    justify-content : flex-end;
    margin          : -26px 24px 0px 0px;
}
.bloque-4 .row-bienestar .col-img-bienestar img
{
    width : 85%;
}
.bloque-4 .row-bienestar .col-txt-bienestar
{
    max-width : 410px;
    padding   : 98px 0px 0px 21px;
}
.bloque-4 .row-bienestar .col-txt-bienestar .row-1, .bloque-4 .row-concentrate .col-txt-concentrate .row-1
{
    max-width   : 306px;
    color       : #161C2D;
    font-size   : 28px;
    font-style  : normal;
    font-weight : 800;
    line-height : 36.4px;
}
.bloque-4 .row-bienestar .col-txt-bienestar .row-2, .bloque-4 .row-concentrate .col-txt-concentrate .row-2
{
    color       : #737B7D;
    font-size   : 16px;
    font-style  : normal;
    font-weight : 400;
    line-height : 22.4px;
    padding     : 20px 0px 30px 0px;
}
.bloque-4 .row-concentrate .col-txt-concentrate .row-2
{
    font-size : 18px !important;
}
.bloque-4 .row-concentrate .col-txt-concentrate .row-3, .bloque-4 .row-bienestar .col-txt-bienestar .row-3
{
    color       : #DD082D;
    font-family : Inter;
    font-size   : 18px;
    font-style  : normal;
    font-weight : 800;
    line-height : 23.4px;
}
.bloque-4 .row-concentrate .col-txt-concentrate .row-3 a, .bloque-4 .row-bienestar .col-txt-bienestar .row-3 a
{
    padding : 0px;
    margin  : 0px;
}

.bloque-4 .row-concentrate .col-img-concentrate
{
    margin : 5px 0px 0px 29px;
}
.bloque-4 .row-concentrate .col-img-concentrate img
{
    width : 85%;
}
.bloque-4 .row-concentrate .col-txt-concentrate
{
    max-width : 410px; 
    margin    : 162px 0px 0px 171px;
}
.bloque-4 .col-comillas
{
    text-align : center;
    margin     : 75px 0px 24px 0px;
}
.bloque-4 .row-txt-comillas
{
    justify-content: space-around;
}
.bloque-4 .col-txt-comillas
{
    max-width   : 803px;
    color       : #262626;
    text-align  : center;
    font-size   : 28px;
    font-style  : italic;
    font-weight : 300;
    line-height : 39.2px;
}
.bloque-4 .col-txt-comillas-autor
{
    margin         : 40px 0px 0px 0px;
    color          : #737B7D;
    text-align     : center;
    font-size      : 16px;
    font-style     : normal;
    font-weight    : 600;
    line-height    : 137.5%;
    letter-spacing : 0.1px;
}

@media(min-width:1441px)  /*XXXL*/
{
    
}
@media (min-width: 1400px)  and (max-width: 1440px) /*XXL*/
{    
    .bloque-3 .solucion       { height: 229px !important; }
    .bloque-1 .linea-1 .diagrama
    {
        background: url(../imagenes/diagrama_1.png) -15px 80px / 100% 50% no-repeat !important;
    }
    .bloque-2 .capa-img-equipo
    {
        padding: 0px 0px 0px 90px !important;
    }
}
@media (min-width: 1200px)  and (max-width: 1399px) /*XL*/
{    
    .bloque-3 .solucion       { height: 269px !important; }
    .bloque-1 .linea-1 .diagrama
    {
        background: url(../imagenes/diagrama_1.png) -15px 120px / 100% 40% no-repeat !important;
    }
    .bloque-2 .capa-img-equipo
    {
        padding: 0px 0px 0px 90px !important;
    }
}

@media (min-width: 992px)  and (max-width: 1199px) /*LG*/
{    
    .bloque-1 .linea-1 .txt-1 
    { 
        font-size   : 32px !important; 
        line-height : initial !important;
    }
    .bloque-1 .linea-1 .diagrama
    {
        background: url(../imagenes/diagrama_1.png) -15px 150px / 100% 40% no-repeat !important;
    }
    .bloque-2 .capa-img-equipo
    {
        padding: 0px 0px 0px 90px !important;
    }
}

@media (min-width: 768px)  and (max-width: 991px) /*MD*/
{    
    .bloque-1 .linea-1 .boton
    {
        padding: 0px 0px 30px 0px !important;
    }
    .bloque-1 .linea-1 .texto 
    {
        padding: 0px 40px 0px 40px !important;
    }
    .bloque-1 .linea-1 .txt-1 
    { 
        font-size   : 32px !important; 
        line-height : initial !important;
        padding     : 120px 0px 0px 0px !important;
    }

    .bloque-1 .linea-1 .diagrama
    {
        height: 375px !important;
        background: url(../imagenes/diagrama_1.png) 100px 0px / 80% 70% no-repeat !important;
    }
    .bloque-2 .titulo
    {
        font-size   : 32px !important; 
        line-height : initial !important;
        padding     : 80px 0px 70px 0px !important;
    }
    .bloque-2 .scroll
    {
        display : none !important;
    }
    .bloque-2 .capa-img-equipo 
    {
        padding: 0px 0px 0px 100px !important;
    }

    .bloque-4 .titulo 
    {
        font-size   : 32px !important; 
        line-height : initial !important;
        padding     : 60px 10px 85px 10px !important;
    }
    .bloque-4 .row-concentrate
    {
        flex-direction: column-reverse !important;
    }
    .bloque-4 .row-bienestar .col-txt-bienestar, .bloque-4 .row-concentrate .col-txt-concentrate
    {
        max-width : initial !important;
        padding   : 55px 0px 65px 21px !important;
        margin    : 0px !important;
    }
    .bloque-4 .row-bienestar .col-txt-bienestar .row-1, .bloque-4 .row-concentrate .col-txt-concentrate .row-1
    {
        max-width : initial !important;
    }
}

@media (min-width: 576px)  and (max-width: 767px) /*SM*/
{       
    body
    {
        overflow-x : hidden !important;
    }
    .bloque-1 .linea-1 .texto 
    {
        padding: 0px 40px 0px 40px !important;
    }
    .bloque-1 .linea-1 .txt-1 
    { 
        font-size   : 32px !important; 
        line-height : initial !important;
        padding     : 50px 0px 0px 0px !important;
    }
    .bloque-1 .linea-1 button, .bloque-2 button
    {
        width : 100% !important;
    }
    .bloque-1 .linea-1 .boton
    {
        padding: 0px 0px 30px 0px !important;
    }
    .bloque-1 .linea-1 .diagrama
    {
        height: 375px !important;
        background: url(../imagenes/diagrama_1.png) 35px 0px / 100% 60% no-repeat !important;
    }

    .bloque-2 .titulo
    {
        font-size   : 32px !important; 
        line-height : initial !important;
        padding     : 50px 0px 70px 40px !important;
    }
    .bloque-2 .boton 
    {
        padding: 40px 35px 0px 0px !important;
    }
    .bloque-2 .scroll
    {
        display : none !important;
    }
    .bloque-2 .capa-img-equipo 
    {
        padding: 0px 0px 0px 85px !important;
    }

    .bloque-3 .row-soluciones 
    {
        padding: 0px 20px 0px 30px !important;
    }

    .bloque-4 .titulo 
    {
        font-size   : 32px !important; 
        line-height : initial !important;
        padding     : 60px 10px 85px 10px !important;
    }
    .bloque-4 .row-concentrate
    {
        flex-direction: column-reverse !important;
    }
    .bloque-4 .row-bienestar .col-txt-bienestar, .bloque-4 .row-concentrate .col-txt-concentrate
    {
        max-width : initial !important;
        padding   : 55px 0px 65px 21px !important;
        margin    : 0px !important;
    }
    .bloque-4 .row-bienestar .col-txt-bienestar .row-1, .bloque-4 .row-concentrate .col-txt-concentrate .row-1
    {
        max-width : initial !important;
    }
}

@media (min-width: 0px)  and (max-width: 575px) /*XS*/
{       
    body
    {
        overflow-x : hidden !important;
    }
    .bloque-1 .linea-1 .texto 
    {
        padding: 0px 40px 0px 30px !important;
    }
    .bloque-1 .linea-1 .txt-1 
    { 
        font-size   : 32px !important; 
        line-height : initial !important;
        padding     : 50px 0px 0px 0px !important;
    }
    .bloque-1 .linea-1 button, .bloque-2 button
    {
        width : 100% !important;
    }
    .bloque-1 .linea-1 .boton
    {
        padding: 0px 0px 30px 0px !important;
    }
    .bloque-1 .linea-1 .diagrama
    {
        height: 300px !important;
        background: url(../imagenes/diagrama_1.png) 15px 0px / 100% 60% no-repeat !important;
    }
    .bloque-2 .titulo
    {
        font-size   : 32px !important; 
        line-height : initial !important;
        padding     : 50px 0px 70px 10px !important;
    }
    .bloque-2 .boton 
    {
        padding: 40px 35px 0px 0px !important;
    }
    .bloque-2 .scroll
    {
        display : none !important;
    }
    .bloque-2 .capa-img-equipo 
    {
        padding: 0px 0px 0px 65px !important;
    }

    .bloque-3 .row-soluciones 
    {
        padding: 0px 20px 0px 30px !important;
    }

    .bloque-4 .titulo 
    {
        font-size   : 32px !important; 
        line-height : initial !important;
        padding     : 60px 10px 85px 10px !important;
    }
    .bloque-4 .row-concentrate
    {
        flex-direction: column-reverse !important;
    }
    .bloque-4 .row-bienestar .col-txt-bienestar, .bloque-4 .row-concentrate .col-txt-concentrate
    {
        max-width : initial !important;
        padding   : 55px 10px 65px 30px !important;
        margin    : 0px !important;
    }
    .bloque-4 .row-bienestar .col-txt-bienestar .row-1, .bloque-4 .row-concentrate .col-txt-concentrate .row-1
    {
        max-width : initial !important;
    }
}