.contenedor{

    width: 90%;

    max-width: 60%;

    text-align: center;

    margin: 1.875rem auto !important;

    display: grid;

    grid-gap: 20px;

    grid-template-columns: repeat(3, 1fr);

    grid-template-rows: auto auto;



    grid-template-areas: "widget-1 widget-2 widget-5"

                         "widget-3 widget-6 widget-4";

}


.seccion-beneficios{
    margin-bottom: 40px;
}


.titulos-beneficios h3{

    font-family: 'arkibal_displayheavy';

    background: -webkit-linear-gradient(360deg, rgba(0,55,98,1) 45%, rgba(0,204,160,1) 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;


}

.titulos-beneficios{
    text-align: center !important;
    color: #00365b;
	font-size: 20px;
}

.contenedor > a,

.contenedor > div{

    padding: 4.475em;

    border-radius: 15px;

    text-decoration: none;

    

}


.texto-beneficios{
    font-family: 'arkibal_display_ltlight';
    font-weight: bold;
    color: #000;
    font-size: 0.9em;
}


.contenedor .widget-1{

    background: #f1f2f4;

    grid-area: widget-1;

    padding: 1em;



}


.contenedor .widget-2{

    background: #f1f2f4;

    grid-area: widget-2;

    padding: 1em;



}


.contenedor .widget-3{

    background: #f1f2f4;

    grid-area: widget-3;

    padding: 1em;

}


.contenedor .widget-4{

    background: #f1f2f4;

    grid-area: widget-4;

    padding: 1em;

}





.contenedor .widget-5{

    background: #f1f2f4;

    grid-area: widget-5;

    padding: 1em;

}


.contenedor .widget-6{

    background: #f1f2f4;

    grid-area: widget-6;

    padding: 1em;

}

.iconos-beneficios{
    width: 20%;
    margin-bottom: 20px;
}

/* Estilos para hover en los widgets individuales */
.contenedor .widget-1:hover,
.contenedor .widget-2:hover,
.contenedor .widget-3:hover,
.contenedor .widget-4:hover,
.contenedor .widget-5:hover,
.contenedor .widget-6:hover {
    background: #00365b;
}

/* Estilos para cambiar el color de h5 y .texto-beneficios solo dentro del widget que se está destacando */
.contenedor .widget-1:hover p,
.contenedor .widget-1:hover .texto-beneficios,
.contenedor .widget-2:hover p,
.contenedor .widget-2:hover .texto-beneficios ,
.contenedor .widget-3:hover p,
.contenedor .widget-3:hover .texto-beneficios ,
.contenedor .widget-4:hover p,
.contenedor .widget-4:hover .texto-beneficios ,
.contenedor .widget-5:hover p,
.contenedor .widget-5:hover .texto-beneficios ,
.contenedor .widget-6:hover p,
.contenedor .widget-6:hover .texto-beneficios {
    color: #fff;
}


@media (max-width: 1024px) { 

    .contenedor{

        width: 100%;

        max-width: 70%;
    }



    .contenedor > a,

    .contenedor > div{

        padding: 0em;

    }


 }


/* `lg` applies to medium devices (tablets, less than 992px)*/

@media (max-width: 992px) { 

    .contenedor{

        width: 90%;

    }



    .contenedor > a,

    .contenedor > div{

        padding: 0em;

    }


 }

 /* `md` applies to small devices (landscape phones, less than 768px)*/

@media (max-width: 800px) { 



    .contenedor{

        grid-template-columns: repeat(2, 1fr);

        grid-template-rows: repeat(3, auto);

        width: 90%;

        grid-template-areas: "widget-1 widget-2"

                             "widget-3 widget-4"

                             "widget-5 widget-6";

    }

    .contenedor a img,
    .contenedor div img {
        width: 40%;
    }

    .contenedor > a,

    .contenedor > div{



        padding: 0em;



    }

 }



/* `md` applies to small devices (landscape phones, less than 576px)*/
@media (max-width: 576px) { 
    .contenedor{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, auto);
        width: 100%;
        max-width: 100%;
        grid-template-areas: "widget-1 widget-4"
                             "widget-3 widget-5"
                             "widget-2 widget-6";
    }

    .contenedor > a,
    .contenedor > div{
        padding: 0em;
    }
    
    /* Agregamos reglas para ocultar el párrafo y ajustar el padding */
    .contenedor a > .texto-beneficios,
    .contenedor div > .texto-beneficios {
        display: none;
    }
    
    /* Agregamos reglas para ocultar las imágenes */
    .contenedor a img,
    .contenedor div img {
        width: 60%;
    }
    
    /* Ajustamos el padding para el título y el icono */
    .contenedor a h5,
    .contenedor div h5 {
        padding:0 0 1em 0;
    }

}