﻿@supports not selector(::-webkit-scrollbar) 
{
    .bloque-2 .perfiles 
    {
        scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
    }
}
@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 .textos .txt-1, .bloque-1 .textos .txt-2,.bloque-1 .capa-imagen
{
    animation: mostrarScalar 1s ease 0s 1 normal forwards;
}

.bloque-solucion, .bloque-2 .titulo, .bloque-2 .perfiles, .bloque-3 .titulo, .bloque-3 .descripcion, .bloque-3 .boton
{
    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-1
{
    background-color : #F4F7FE;
    padding-bottom   : 50px;
}
.bloque-1 .textos
{
    max-width  : 540px;
    margin     : 210px 0px 0px 108px;    
}
.bloque-1 .capa-imagen img
{
    width : 80%;
}

.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
{
    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 b
{
    font-weight : 700 !important;
}
.bloque-1 .capa-imagen
{
    margin : 90px 0px 90px 65px;
}
.separador-1
{
    height: 100px;
}


.bloque-2 .titulo
{
    color       : #244079;
    text-align  : center;
    font-size   : 36px;
    font-style  : normal;
    font-weight : 800;
    line-height : 46.8px;
    padding     : 120px 0px 90px 0px;
    max-width   : 956px;    
}

.bloque-2 .row-perfiles
{
    padding        : 0px 160px 120px 153px;    
}
.bloque-2 .perfiles
{
    display          : flex;
    flex-direction   : row;
    overflow-x       : auto;
    --sb-track-color : #e7e9ed;
    --sb-thumb-color : #737b7d;
    --sb-size        : 8px;
    padding          : 0px 0px 90px 0px;
}
.bloque-2 .perfiles::-webkit-scrollbar 
{
    width  : var(--sb-size);
    height : var(--sb-size);
}

.bloque-2 .perfiles::-webkit-scrollbar-track 
{
    background    : var(--sb-track-color);
    border-radius : 6px;
}

.bloque-2 .perfiles::-webkit-scrollbar-thumb 
{
    background    : var(--sb-thumb-color);
    border-radius : 6px;
}


.bloque-2 .perfil
{
    margin        : 0px 7px 0px 7px;
    padding       : 50px 30px 30px 30px;
    border-radius : 12px;
    border        : 1px solid #FFF;
    background    : #F4F7FE;
    min-width     : 500px;
    max-width     : 500px;
}
.bloque-2 .perfil .p-titulo
{
    color       : #262626;
    font-size   : 22px;
    font-style  : normal;
    font-weight : 600;
    line-height : 26.4px;
    padding     : 0px 0px 10px 0px;
}
.bloque-2 .perfil .p-descripcion
{
    color       : #737B7D;
    font-size   : 16px;
    font-style  : normal;
    font-weight : 400;
    line-height : 20.8px;
    padding     : 0px 0px 10px 0px;
}
.bloque-2 .perfil ul li
{
    padding-top : 7px;
}
.bloque-2 .perfil ul li a
{
    color       : #385DA8;
    font-size   : 16px;
    font-style  : normal;
    font-weight : 400;
    line-height : 130%;   
}
.bloque-2 .perfil ul li a:hover
{
    color: #DD082D !important;
}

.bloque-3
{
    background : #F4F7FE;
}
.bloque-3 a
{
    width :fit-content;
}
.bloque-3 .titulo
{
    color       : #244079;
    text-align  : center;
    font-size   : 28px;
    font-style  : normal;
    font-weight : 800;
    line-height : 36.4px;
    padding     : 70px 0px 10px 0px;
}
.bloque-3 .descripcion
{
    color       : #333333;
    text-align  : center;
    font-size   : 17px;
    font-style  : normal;
    font-weight : 400;
    line-height : 23.4px;
    max-width   : 662px;
}
.bloque-3 .boton
{
    margin          : 30px 0px 80px 0px;
    display         : flex;
    padding         : 12px 60px;
    justify-content : center;
    align-items     : center;
    border-radius   : 6px;
    border          : 2px solid #DD082D;
    color           : #DD082D;
    font-size       : 16px;
    font-style      : normal;
    font-weight     : 600;
    letter-spacing  : -0.32px;
    cursor          : pointer;
}





@media (min-width: 1440px)  /*XXXL*/
{
}
@media (min-width: 1400px)  and (max-width: 1440px) /*XXL*/
{
}
@media (min-width: 1200px)  and (max-width: 1399px) /*XL*/
{
    .bloque-1 .textos 
    {
        margin: 165px 0px 0px 108px !important;
    }
    .bloque-1 .capa-imagen
    {
        margin: 90px 0px 90px 50px !important;
    }
    .bloque-1 .capa-imagen img
    {
        width : 100% !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-1 .capa-imagen img
    {
        width : 100% !important;
    }
    .separador-1
    {
        height: 50px;
    }


    .bloque-2 .titulo
    { 
        font-size   : 32px !important; 
        line-height : initial !important;
    }
    .bloque-3 .titulo
    { 
        font-size   : 25px !important; 
        line-height : initial !important;
    }
}
@media (min-width: 768px)  and (max-width: 991px) /*MD*/
{
    .bloque-1 .textos 
    {
        margin: 90px 0px 0px 60px !important;
    }
    .bloque-1 .textos .txt-1 
    {
        font-size   : 32px !important; 
        line-height : initial !important;
    }
    .bloque-1 .capa-imagen 
    {
        margin     : 50px 0px 0px 0px !important;
        text-align : center !important;
    }
    .bloque-1 .capa-imagen img
    {
        width : 70% !important;
        margin: 0px -50px 40px 0px;
    }
    .separador-1
    {
        height: 50px;
    }


    .bloque-2 .titulo
    { 
        font-size   : 32px !important; 
        line-height : initial !important;
        padding     : 90px 20px 90px 40px;
    }
    .bloque-2 .row-perfiles
    {
        padding: 0px 80px 30px 80px;
    }
    .bloque-2 .perfiles
    {
        flex-direction : column !important; 
        padding        : 0px 0px 50px 0px !important;
    }
    .bloque-2 .perfil
    {
        min-width : initial !important;
        max-width : initial !important;
        margin    : 0px 7px 20px 7px !important;
    }

    .bloque-3 .titulo
    { 
        font-size   : 25px !important; 
        line-height : initial !important;
    }
}
@media (min-width: 576px)  and (max-width: 767px) /*SM*/
{
    .bloque-1 .textos 
    {
        margin: 90px 0px 0px 60px !important;
    }
    .bloque-1 .textos .txt-1 
    {
        font-size   : 32px !important; 
        line-height : initial !important;
    }
    .bloque-1 .capa-imagen 
    {
        margin     : 50px 0px 0px 0px !important;
        text-align : center !important;
    }
    .bloque-1 .capa-imagen img
    {
        width : 70% !important;
        margin: 0px -50px 40px 0px;
    }
    .separador-1
    {
        height: 50px;
    }

    .bloque-2 .titulo
    { 
        font-size   : 32px !important; 
        line-height : initial !important;
        padding     : 90px 20px 90px 40px;
    }
    .bloque-2 .row-perfiles
    {
        padding: 0px 30px 00px 30px;
    }
    .bloque-2 .perfiles
    {
        flex-direction : column !important; 
        padding        : 0px 0px 50px 0px !important;
    }
    .bloque-2 .perfil
    {
        min-width : initial !important;
        max-width : initial !important;
        margin    : 0px 7px 20px 7px !important;
    }

    .bloque-3 .titulo
    { 
        font-size   : 25px !important; 
        line-height : initial !important;
    }
    .bloque-3 .descripcion
    {
        max-width : fit-content !important;
    }
}
@media (min-width: 0px)  and (max-width: 575px) /*XS*/
{ 
    .bloque-1
    {
        padding: 0px 20px 0px 20px !important;
    }
    .bloque-1 .textos 
    {
        margin: 40px 0px 0px 10px !important;
    }
    .bloque-1 .textos .txt-1 
    {
        font-size   : 32px !important; 
        line-height : initial !important;
    }
    .bloque-1 .capa-imagen 
    {
        margin     : 30px 0px 0px 0px !important;
        text-align : center !important;
    }
    .bloque-1 .capa-imagen img
    {
        width : 100% !important;
        margin: 0px -30px 20px 0px;
    }
    .separador-1
    {
        height: 50px;
    }



    .bloque-2 .titulo
    { 
        font-size   : 32px !important; 
        line-height : initial !important;
        padding     : 40px 20px 40px 30px;
    }
    .bloque-2 .row-perfiles
    {
        padding: 0px 30px 00px 30px;
    }
    .bloque-2 .perfiles
    {
        flex-direction : column !important; 
        padding        : 0px 0px 50px 0px !important;
    }
    .bloque-2 .perfil
    {
        min-width : initial !important;
        max-width : initial !important;
        margin    : 0px 0px 20px 0px !important;
        padding   : 30px 20px 30px 20px;
    }

    .bloque-3
    {
        padding: 0px 20px 0px 20px !important;
    }
    .bloque-3 .titulo
    { 
        font-size   : 25px !important; 
        line-height : initial !important;
    }
    .bloque-3 .descripcion
    {
        max-width : fit-content !important;
    }
}