﻿@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 .txt-1, .bloque-1 .txt-2, .bloque-1 .txt-2, .bloque-1 .txt-3, .bloque-1 .txt-4, .bloque-1 .capa-imagen
{
    animation: mostrarScalar 1s ease 0s 1 normal forwards;
}

.bloque-2 .textos-1, .bloque-2 .textos-2, .bloque-3 .textos, .bloque-4 .txt-1, .bloque-4 .capa-logos, .bloque-5 .textos, .bloque-5 .row-fotos .txt-1, .bloque-5 .row-fotos .txt-2, .bloque-5 .row-fotos .txt-3, .bloque-5 .row-fotos .rss, .slider-empresas
{
    view-timeline-name   : --fadeA;
    view-timeline-axis   : block;
    animation-timeline   : --fadeA;
    animation-name       : show;
    animation-range      : entry 35% cover 50%;
    animation-fill-mode  : both;
}
.bloque-5 .row-fotos .foto
{
    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;
}
.bloque-1 .textos
{
    max-width : 540px;
    margin    : 210px 0px 0px 108px
}
.bloque-1 .textos .txt-1
{
    color       : #244079;
    font-family : Inter;
    font-size   : 44px;
    font-style  : normal;
    font-weight : 800;
    line-height : 57.2px;
}
.bloque-1 .textos .txt-2, .bloque-1 .textos .txt-3
{
    color       : #737B7D;
    font-family : Inter;
    font-size   : 18px;
    font-style  : normal;
    font-weight : 400;
    line-height : 23.4px;
}
.bloque-1 .textos .txt-2
{
    padding : 20px 0px 20px 0px;
}
.bloque-1 .textos .txt-4
{
    color       : #DD082D;
    font-family : Inter;
    font-size   : 18px;
    font-style  : normal;
    font-weight : 800;
    line-height : 23.4px;
    padding     : 40px 0px 0px 0px;
}
.bloque-1 b
{
    font-weight : 700 !important;
}
.bloque-1 .capa-imagen
{
    margin : 90px 0px 90px 52px;
}
.bloque-1 .capa-imagen img
{
    width : 80%;
}



.bloque-2
{
    padding-bottom : 97px;
}
.bloque-2 .textos-1
{
    margin    : 100px 0px 0px 159px;
    max-width : 465px;
}
.bloque-2 .textos-2
{
    margin    : 101px 0px 0px 73px;
    max-width : 465px;
}
.bloque-2 .textos-1 .txt-2, .bloque-2 .textos-2 .txt-2
{
    padding : 10px 0px 10px 0px;
}
.bloque-2 .textos-1 .txt-2, .bloque-2 .textos-2 .txt-2
{
    color       : #262626;
    font-size   : 22px;
    font-style  : normal;
    font-weight : 600;
    line-height : 26.4px;
}
.bloque-2 .textos-1 .txt-3, .bloque-2 .textos-2 .txt-3
{
    color       : #737B7D;
    font-size   : 16px;
    font-style  : normal;
    font-weight : 400;
    line-height : 22.4px;
}
.bloque-2 svg
{
    margin  : 0px !important;
    padding : 0px !important;
}




.bloque-3
{
    background-color : #385DA8;
    justify-content  : center;
}
.bloque-3 .textos
{
    max-width : 670px;
    margin    : 80px 0px 80px 0px;
}
.bloque-3 .txt-1
{
    color       : #FFFFFF;
    text-align  : center;
    font-family : Inter;
    font-size   : 28px;
    font-style  : normal;
    font-weight : 800;
    line-height : 36.4px;    
}
.bloque-3 .txt-2
{
    color       : #FFFFFF;
    text-align  : center;
    font-family : Inter;
    font-size   : 18px;
    font-style  : normal;
    font-weight : 400;
    line-height : 23.4px;
    opacity     : 0.7;  
    padding     : 10px 0px 30px 0px;
}

.bloque-3 .botones .soluciones
{
    border-radius   : 6px;
    background      : #FFFFFF;
    width           : 250px;
    height          : 45px;
    justify-content : center;
    color           : #385DA8;
    font-size       : 16px;
    font-style      : normal;
    font-weight     : 600;
    line-height     : 22px; 
    letter-spacing  : -0.32px;
    border          : 0px;
    margin          : 0px 0px 0px 55px;
}
.bloque-3 .botones .contactar
{
    border-radius   : 6px;
    background      : #DD082D;
    width           : 250px;
    height          : 45px;
    justify-content : center;
    color           : #FFFFFF;
    font-size       : 16px;
    font-style      : normal;
    font-weight     : 500;
    line-height     : 22px; 
    letter-spacing  : -0.32px;
    border          : 0px;
    margin          : 0px 0px 0px 10px;
}


.bloque-4
{
    
    background : #F4F7FE;
}
.bloque-4 .txt-1
{
    padding     : 80px 0px 0px 0px;
    color       : #244079;
    text-align  : center;
    font-size   : 18px;
    font-style  : normal;
    font-weight : 400;
    line-height : 23.4px;
}
.bloque-4 .capa-logos
{
    display         : flex;
    padding         : 35px 120px 100px 120px;
    justify-content : space-between;
    align-items     : center;
    text-align      : center;
}



.bloque-5 .textos
{
    display        : flex;
    flex-direction : column;
    align-items    : center;
}
.bloque-5 .textos .txt-1
{
    padding     : 120px 0px 10px 0px;
    color       : #244079;
    text-align  : center;
    font-size   : 36px;
    font-style  : normal;
    font-weight : 800;
    line-height : 46.8px;
}
.bloque-5 .textos .txt-2
{
    max-width   : 672px;
    color       : #737B7D;
    text-align  : center;
    font-size   : 20px;
    font-style  : normal;
    font-weight : 400;
    line-height : 26px;
}
.bloque-5 .row-fotos
{
    padding : 100px 120px 0px 120px;
}
.bloque-5 .row-fotos .foto
{
    border-top-left-radius  : 7px;
    border-top-right-radius : 7px;
    overflow                : hidden;
}
.bloque-5 .row-fotos .foto img
{
    width : 100%;
}
.bloque-5 .row-fotos .txt-1
{
    color       : #262626;
    font-size   : 21px;
    font-style  : normal;
    font-weight : 600;
    line-height : 27.3px;
    padding     : 30px 0px 8px 0px;
}
.bloque-5 .row-fotos .txt-2
{
    color       : #DD082D;
    font-size   : 16px;
    font-style  : normal;
    font-weight : 500;
    line-height : 20.8px;
}
.bloque-5 .row-fotos .txt-3
{
    color       : #737B7D;
    font-size   : 16px;
    font-style  : normal;
    font-weight : 400;
    line-height : 22.4px;
    padding     : 30px 0px 0px 0px;
    min-height  : 276px;
}
.bloque-5 .row-fotos .rss
{
    margin        : 60px 0px 80px 0px;
    padding       : 20px 0px 20px 0px;
    border-top    : 1px solid #D8D8D8;
    border-bottom : 1px solid #D8D8D8;
}




.bloque-6
{
    height        : 352px;
    background    : #F4F7FE;
    display       : flex;
    align-content : space-around;
}




@media(min-width:1441px)  /*XXXL*/
{
}
@media (min-width: 1400px)  and (max-width: 1440px) /*XL*/
{
    .bloque-5 .row-fotos .txt-1
    {
        height: 93px !important;
    }
    .bloque-5 .row-fotos .txt-3
    {
        min-height: 321px !important;
    }
}
@media (min-width: 1200px)  and (max-width: 1399px) /*XL*/
{
    .bloque-1 .textos 
    {
        margin: 165px 0px 0px 108px !important;
    }

    .bloque-5 .row-fotos .txt-1
    {
        height: 93px !important;
    }
    .bloque-5 .row-fotos .txt-3
    {
        min-height: 388px !important;
    }
}

@media (min-width: 992px)  and (max-width: 1199px) /*LG*/
{
    .bloque-1 .textos 
    {
        margin: 110px 0px 0px 108px !important;
    }
    .bloque-1 .textos .txt-1 
    {
        font-size   : 32px !important; 
        line-height : initial !important;
    }

    .bloque-5 .row-fotos .txt-3
    {
        min-height: 209px !important;
    }
}

@media (min-width: 768px)  and (max-width: 991px) /*MD*/
{

    .bloque-1 .capa-imagen 
    {
        margin     : 0px 0px 90px 0px !important;
        text-align : center !important;
    }
    .bloque-1 .capa-imagen img
    {
        width : 60% !important;
    }
    .bloque-1 .textos
    {
        margin: 90px 0px 90px 60px !important;
    }
    .bloque-1 .textos .txt-1 
    {
        font-size   : 32px !important; 
        line-height : initial !important;
    }

    .bloque-2 .textos-1 
    {
        margin : 100px 0px 0px 60px !important;
    }
    .bloque-2 .textos-2
    {
        margin : 50px 0px 0px 60px !important;
    }


    .bloque-4 .capa-logos div
    {
        padding : 15px 0px 15px 0px !important;
    }


    .bloque-5 .textos .txt-1
    {
        font-size   : 32px !important; 
        line-height : initial !important;
    }
    .bloque-5 .row-fotos
    {
        padding: 100px 30px 0px 60px;
    }
    .bloque-5 .row-fotos .txt-3
    {
        min-height: 232px !important;
    }
    .bloque-5 .row-fotos .txt-3es
    {
        min-height: 276px !important;
    }
}

@media (min-width: 576px)  and (max-width: 767px) /*SM*/
{   
    .bloque-1 .capa-imagen 
    {
        margin     : 0px 0px 90px 0px !important;
        text-align : center !important;
    }
    .bloque-1 .capa-imagen img
    {
        width : 70% !important;
    }
    .bloque-1 .textos
    {
        margin: 90px 0px 90px 30px !important;
    }
    .bloque-1 .textos .txt-1 
    {
        font-size   : 32px !important; 
        line-height : initial !important;
    }

    .bloque-2 .textos-1 
    {
        margin : 100px 0px 0px 30px !important;
    }
    .bloque-2 .textos-2
    {
        margin : 50px 0px 0px 30px !important;
    }

    .bloque-3 .botones div
    {
        text-align     : center !important;
        padding-bottom : 15px !important;
    }
    .bloque-3 .botones button
    {
        margin : 0px !important;
    }
    .bloque-4 .capa-logos div
    {
        padding : 20px 0px 20px 0px !important;
    }

    .bloque-5 .textos .txt-1
    {
        font-size   : 32px !important; 
        line-height : initial !important;
    }

    .bloque-5 .row-fotos
    {
        padding: 100px 30px 0px 50px;
    }
    .bloque-5 .row-fotos .txt-3
    {
        min-height : 0px !important;
    }
    .bloque-5 .row-fotos .rss
    {
        margin: 20px 0px 80px 0px !important;
    }
}

@media (min-width: 0px)  and (max-width: 575px) /*XS*/
{ 
    .bloque-1 .capa-imagen 
    {
        margin     : 0px 0px 90px 0px !important;
        text-align : center !important;
    }
    .bloque-1 .capa-imagen img
    {
        width : 70% !important;
    }
    .bloque-1 .textos
    {
        margin: 90px 0px 90px 30px !important;
    }
    .bloque-1 .textos .txt-1 
    {
        font-size   : 32px !important; 
        line-height : initial !important;
    }

    .bloque-2 .textos-1 
    {
        margin : 70px 0px 0px 30px !important;
    }
    .bloque-2 .textos-2
    {
        margin : 40px 0px 0px 30px !important;
    }

    .bloque-3 .botones div
    {
        text-align     : center !important;
        padding-bottom : 15px !important;
    }
    .bloque-3 .botones button
    {
        margin : 0px !important;
    }


    .bloque-4 .capa-logos div
    {
        padding : 20px 0px 20px 0px !important;
    }
    .bloque-4 .capa-logos 
    {
        padding: 35px 0px 100px 0px;
    }

    .bloque-5 .textos .txt-1
    {
        font-size   : 32px !important; 
        line-height : initial !important;
    }

    .bloque-5 .row-fotos
    {
        padding: 100px 30px 0px 50px;
    }
    .bloque-5 .row-fotos .txt-3
    {
        min-height : 0px !important;
    }
    .bloque-5 .row-fotos .rss
    {
        margin: 20px 0px 80px 0px !important;
    }


}