section.banner-inicio h1 {
    font-size  : 40px;
    font-weight: 700;
    margin     : 0;
}

.fondo-bloque-azul {
    background-color: #354BB3;
}

.bloque-azul {
    background-color: #0C26A3;
    border-radius   : 0px 0px 60px 0px;
}

.texto-prop {
    position  : absolute;
    width     : 75%;
    top       : 50%;
    left      : 50%;
    transform : translate(-50%, -50%);
    color     : #fff;
    z-index   : 10;
    text-align: center;
}

.titulo-prop {
    font-family: 'MozaicGEO';
    color        : white;
    font-size    : 40px;
    font-style   : normal;
    font-weight  : 600;
    text-align   : start;
    margin-bottom: 1.5rem;
}


.descripcion-prop {
    color        : white;
    font-size    : 18px;
    font-style   : normal;
    font-weight  : 400;
    line-height  : normal;
    text-align   : start;
    margin-bottom: 1.5rem;
}

.img-full {
    width  : auto;
    height : 100%;
    display: block;
}

.fondo-bloque-secundario {
    background-color: #0C26A3;

}

.bloque-secundario {
    background-color: #354BB3;
    border-radius   : 60px 0px 0px 0px;
}

.proposito .bloque-azul svg {
    width : 100%;
    height: 90%;
}

/**/

.transformamos h2,
.pilares h2,
.valores h2,
.banner-historia h2 {
    color      : #0C26A3;
    font-size  : 40px;
    font-weight: 600;
}

.transformamos p b {
    font-weight: 500;
}

.video-wrapper {
    position      : relative;
    width         : 100%;
    padding-bottom: 56.25%;
    height        : 0;
    overflow      : hidden;
    border-radius : 25px;
}

.video-wrapper video,
.video-wrapper iframe,
.video-wrapper .wp-video-shortcode {
    position  : absolute;
    top       : 0;
    left      : 0;
    width     : 100% !important;
    height    : 100% !important;
    object-fit: cover;
}

.video-wrapper video {
    display  : block;
    max-width: 100%;
}




section.pilares .card {
    position     : relative;
    overflow     : hidden;
    border-radius: 20px !important;
}


section.pilares .card .shape {
    position       : absolute;
    inset          : 0;
    background     : transparent;
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    transition     : background 0.3s ease;
    border-radius  : 20px;
}

section.pilares .card .shape .container-logo,
section.pilares .card .shape .container-tit,
section.pilares .card .shape .container-desc {
    visibility: hidden;
}


section.pilares .card .shape:hover {
    background: #0C26A3;
}


section.pilares .card .shape:hover .container-logo,
section.pilares .card .shape:hover .container-tit,
section.pilares .card .shape:hover .container-desc {
    visibility: visible;
}


.container-logo {
    display         : flex;
    justify-content : center;
    align-items     : center;
    width           : 80px;
    height          : 80px;
    background-color: #7281CA;
    border-radius   : 50%;
    margin-bottom   : 20px;
}

.logo-tarj {
    width : 47px;
    height: 47px;
}

.tit-tarj {
    font-size  : 20px;
    font-weight: 800;
    color      : white;
    text-align : center;
}

.desc-tarj {
    font-size  : 15px;
    line-height: 1.3;
    font-weight: 300;
    color      : white;
    text-align : center;
}


/*Valores*/
/* Valores */
section.valores .row {
    display        : flex;
    flex-wrap      : wrap;
    justify-content: space-between;
}

section.valores .valor {
    width          : 32%;
    /* Asegura que las tarjetas ocupen un 32% del ancho */
    margin-bottom  : 20px;
    /* Espacio entre filas */
    display        : flex;
    justify-content: center;
    align-items    : center;
}

section.valores .valor .card-container {
    position     : relative;
    width        : 100%;
    /* Ocupa todo el ancho disponible */
    height       : 245px;
    /* Altura fija para el contenedor */
    overflow     : hidden;
    /* Oculta el contenido que se mueve fuera del contenedor */
    border-radius: 20px;
    /* Bordes redondeados */
    box-shadow   : 0px 4px 10px rgba(0, 0, 0, 0.1);
    /* Añade sombra a la tarjeta */
}

section.valores .valor .card-logo-title {
    background-color: #fff;
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    padding         : 20px;
    position        : absolute;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 490px;
    /* Altura fija para la tarjeta */
    transition      : transform 0.4s ease-in-out;
}

section.valores .valor .card-logo-title h3 {
    font-size    : 27px;
    font-weight  : 700;
    color        : #0C26A3;
    margin-bottom: 0;
}

section.valores .valor .card-logo-title .container-logo {
    display         : flex;
    justify-content : center;
    align-items     : center;
    width           : 92px;
    height          : 92px;
    background-color: #0C26A3;
    border-radius   : 50%;
    margin-bottom   : 20px;
}

section.valores .valor .card-logo-title .logo-tarj {
    width : 40px;
    height: 40px;
}

section.valores .valor .card-logo-title .parte-uno {
    flex           : 1;
    display        : flex;
    justify-content: center;
    align-items    : center;
    text-align     : center;
    padding        : 10px;
}

section.valores .valor .card-logo-title .parte-dos {
    flex            : 1;
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
    background-color: #0C26A3;
    color           : #fff;
    padding         : 10px;
}

section.valores .valor .card-logo-title .parte-dos h3 {
    font-size    : 20px;
    font-weight  : 600;
    margin-bottom: 2px;
}

section.valores .valor .card-logo-title .parte-dos p {
    font-size  : 14px;
    font-weight: 400;
    line-height: normal;
}

section.valores .valor .card-container:hover .card-logo-title {
    transform: translateY(-245px);
    /* Mueve la tarjeta hacia arriba */
    z-index  : 0;
}

section.valores .valor .card-container:hover .card-title-description {
    z-index: 1;
    /* Hace que la segunda tarjeta se vea encima */
}

/* Adicional: Estilos generales de la tarjeta con logo y descripción */
section.valores .valor .card-container .card-title-description {
    background-color: #0C26A3;
    color           : #fff;
    padding         : 15px;
    border-radius   : 10px;
    font-size       : 16px;
    text-align      : center;
}




/*historia*/
.cont-historia {
    border-radius  : 20px;
    justify-content: space-around;
}

.historia-tit {
    color      : #0C26A3;
    font-size  : 20px;
    font-style : normal;
    font-weight: 600;
    line-height: normal;
}

.historia_desc {
    font-size  : 15px;
    font-style : normal;
    font-weight: 400;
    line-height: normal;
    color      : #0C26A3;
}

.btn-inf {
    font-size      : 16px;
    font-style     : normal;
    font-weight    : 600;
    line-height    : normal;
    border-radius  : 40px;
    background     : #0C26A3;
    color          : #fff;
    text-align     : center;
    justify-content: center;
}

.btn-inf:hover {
    background: #242E7C;
    color     : #fff;
}









.historia {
    position: relative;
}

.historia::after {
    content       : "";
    position      : absolute;
    bottom        : 0;
    left          : 0;
    width         : 100%;
    height        : 300px;
    /* altura del desvanecimiento */
    background    : linear-gradient(to bottom, transparent, rgb(255, 255, 255));
    pointer-events: none;
    /* evita bloquear interacción con el contenido */
    z-index       : 9999;
}


.timeline-container {
    position: relative;
    width   : 100%;
    margin  : 0 auto;
    height  : 600px;
    overflow: scroll;
}

.timeline-line {
    position  : absolute;
    top       : 0;
    bottom    : 0;
    left      : 50%;
    width     : 4px;
    background: #242E7C;
    transform : translateX(-50%);
    z-index   : 1;
}

.timeline-item {
    display        : flex;
    align-items    : flex-start;
    justify-content: space-between;
    position       : relative;
    margin         : 50px 0 110px 0;
    width          : 100%;
    z-index        : 2;
}

.timeline-item::before,
.timeline-item::after {
    content      : '';
    position     : absolute;
    top          : 0;
    left         : 50.7%;
    border-radius: 50%;
    transform    : translate(-50%, -50%);
    z-index      : 3;
}

.timeline-item::after {
    width     : 14px;
    height    : 14px;
    background: #008B3D;
}

.timeline-item::before {
    width     : 22px;
    height    : 22px;
    background: #F3C438;
}

.timeline-img,
.timeline-content {
    width: 39%;
}

.timeline-img img {
    width        : 90%;
    height       : auto;
    border-radius: 24px;
    display      : block;
    z-index      : -1;
    position     : relative;
}

.timeline-img {
    position: relative;
    display : inline-block;
}

.timeline-container .timeline-item .timeline-img::before {
    content      : '';
    position     : absolute;
    height       : 90%;
    width        : 80%;
    z-index      : -1;
    border-radius: 24px;
    right        : 19px;
}

.timeline-container .timeline-img.bg-1::before {
    background-color: #0073B8;
    bottom          : -20px;

}

.timeline-container .timeline-img.bg-2::before {
    background-color: #008B3D;
    top             : -20px;

}

.timeline-container .timeline-img.bg-3::before {
    background-color: #F3C438;
    top             : -20px;
}

.timeline-container .timeline-img.bg-4::before {
    background-color: #242E7C;
    top             : -20px;
}

.timeline-content {
    position: relative;
}

.timeline-item.right .timeline-content h3 {
    text-align: right;
}

.timeline-item.left .timeline-content h3 {
    text-align: left;
}

.timeline-content h3 {
    font-size    : 40px;
    font-weight  : 500;
    background   : linear-gradient(to bottom, #7281CA, #242e7c);
    line-height  : 1;
    color        : white;
    padding      : 7px 17px;
    border-radius: 10px;
    position     : absolute;
    margin       : 0;
}

.timeline-item.left .timeline-content h3::before {
    left         : -20px;
    border-right : 20px solid #242e7c;
    border-top   : 9px solid transparent;
    border-bottom: 9px solid transparent;
}

.timeline-item.right .timeline-content h3::before {
    right        : -20px;
    border-left  : 20px solid #242E7C;
    border-top   : 9px solid transparent;
    border-bottom: 9px solid transparent;
}

.timeline-content h3::before {
    content  : '';
    position : absolute;
    top      : 50%;
    transform: translateY(-50%);
    width    : 0;
    height   : 0;

}

.timeline-content .text-line h5 {
    font-size    : 20px;
    font-weight  : 700;
    line-height  : 1.2;
    color        : #008B3D;
    margin-bottom: 0;

}

.timeline-content .text-line h5 strong {
    font-weight: 700;
    color      : #242E7C;
}

.timeline-content .text-line h5 em {
    font-weight: 400;
    color      : #636363;
    font-style : normal;
}

.timeline-content .text-line p {
    color        : #636363;
    font-size    : 15px;
    font-style   : normal;
    margin-bottom: 0;
}

.timeline-content .text-line h4 {
    font-size    : 28px;
    font-weight  : 750;
    line-height  : 1.2;
    color        : #242E7C;
    margin-bottom: 0;

}

.timeline-content .text-line h4 b {
    color      : #008B3D;
    font-weight: 750;
}

.timeline-content .text-line {
    border-radius: 20px;
    background   : #FFF;
    box-shadow   : 0 0 12px 4px rgba(0, 0, 0, 0.10);
    margin-top   : 70px;
}

.timeline-item.left .timeline-content h3 {

    left: -70px;
    top : -30px;
}

.timeline-item.right .timeline-content h3 {

    right: -70px;
    top  : -27px;
}

.registrar .container {
    background-color: #0C26A3;
    border-radius   : 20px;
}

.titulo-reg {
    font-size  : 38px;
    font-style : normal;
    font-weight: 600;
    color      : white;
}

.descrip-reg {
    font-size  : 17px;
    font-style : normal;
    font-weight: 400;
    line-height: normal;
    color      : white;
}

.registrar .container .row img {
    border-radius: 0px 20px 20px 0px;
}

@media (max-width: 600px){
    .titulo-prop{
        font-size: 15px;
        margin-bottom: 15px;
    }
    .descripcion-prop {
    font-size: 11px;
    }
    .bloque-secundario img{
        width: 100%;
        height: auto;
    }
    .bloque-azul {
    border-radius: 0px 0px 30px 0px;
    }
    .bloque-secundario{
            border-radius: 30px 0px 0px 0px;
    }
    .transformamos h2, .pilares h2, .valores h2, .banner-historia h2{
            font-size: 25px;
    }
}