.content-widget-beneficios-cm .cuadro.t-horizontal{
	width: 100%;
	height: 290px;
	display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px;
    cursor: pointer;
}
.content-widget-beneficios-cm .cuadro.t-horizontal img{
	max-width: 120px;
    height: auto;
    margin-right: 15px;
    z-index: 1;
}
.content-widget-beneficios-cm .cuadro.t-horizontal span.line-beneficio-vertical{
	width: 1px;
    background: #333333;
    height: 110px;
}
.content-widget-beneficios-cm .cuadro.t-horizontal h5{
	max-width: 180px;
    margin-left: 10px;
    font-weight: bold;
}



.content-widget-beneficios-cm .cuadro.t-vertical1{
	width: 100%;
	height: 290px;
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 30px;
    cursor: pointer;
}
.content-widget-beneficios-cm .cuadro.t-vertical1 img{
	max-width: 120px;
    height: auto;
    margin-bottom: 15px;
    z-index: 1;
}
.content-widget-beneficios-cm .cuadro.t-vertical1 span.line-beneficio-horizontal{
	width: 120px;
    background: #333333;
    height: 1px;
}
.content-widget-beneficios-cm .cuadro.t-vertical1 h5{
	max-width: 200px;
    margin-top: 10px;
    font-weight: bold;
}



.content-widget-beneficios-cm .cuadro.t-vertical2{
	width: 100%;
	height: 590px;
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 30px;
    cursor: pointer;
}
.content-widget-beneficios-cm .cuadro.t-vertical2 img{
	max-width: 120px;
    height: auto;
    margin-bottom: 15px;
    z-index: 1;
}
.content-widget-beneficios-cm .cuadro.t-vertical2 span.line-beneficio-horizontal{
	width: 120px;
    background: #333333;
    height: 1px;
}
.content-widget-beneficios-cm .cuadro.t-vertical2 h5{
	max-width: 200px;
    margin-top: 10px;
    font-weight: bold;
}



/* COLORES */
 .beneficio-item-1{
 	background: #EAF5FF;
 	z-index: 9;
 }

 .beneficio-item-2{
 	background: #EFFFDA;
 	z-index: 8;
 }

 .beneficio-item-3{
 	background: #FFF6D3;
 	z-index: 7;
 }

 .beneficio-item-4{
 	background: #FFF6D3;
 	z-index: 6;
 }

 .beneficio-item-5{
 	background: #FFF6D3;
 	z-index: 5;
 }

 .beneficio-item-6{
 	background: #E3EEF9;
 	z-index: 4;
 }
 .beneficio-item-7{
 	background: #EAF5FF;
 	z-index: 3;
 }
 .beneficio-item-8{
 	background: #EFFFDA;
 	z-index: 2;
 }
 .beneficio-item-9{
 	background: #FFDCE5;
 	z-index: 1;
 }



/* grillas y responsivo */

.content-widget-beneficios-cm {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas */
    grid-template-rows: repeat(3, auto);  /* 3 filas */
    gap: 10px; /* Espacio entre cuadros */
}

.type-2x1 {
    grid-column: span 2; /* Ocupa 2 columnas */
}

.type-1x2 {
    grid-row: span 2; /* Ocupa 2 filas */
}

.type-1x1 {
    grid-column: span 1;
    grid-row: span 1;
}


/* TOOLTIP */
.content-widget-beneficios-cm .cuadro {
	z-index: 1;
}
.content-widget-beneficios-cm .tooltip-custom{
    position: absolute;
    z-index: 4;
    background: #fff;
    height: min-content;
    width: max-content;
    max-width: 65%;
    color: #333;
    top: 75%;
    left: 50%;
    transform: translateX(-50%);
    padding: 15px;
    box-shadow: 1px 2px 4px 1px #ddd;
    /*margin: 0 30% 0% 50%;*/
}
.content-widget-beneficios-cm .tooltip-custom::before{
	content: "";
    position: absolute;
    top: -10px; /* Lo posiciona justo encima */
    left: 50%; /* Lo centra horizontalmente */
    transform: translateX(-50%); /* Ajusta para centrar */
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 10px solid #fff; /* Color del tooltip */
    filter: drop-shadow(0px -2px 2px #ddd); /* Efecto de sombra */
}

/* Si el tooltip está muy a la derecha, ajusta su posición */
.content-widget-beneficios-cm .tooltip-custom.right {
    left: auto;
    right: 0;
    transform: translateX(0);
}



/* Responsivo */
@media (max-width: 1024px) { /* Para tablets */
    .content-widget-beneficios-cm {
        grid-template-columns: repeat(1, 1fr); /* 2 columnas */
        grid-template-rows: auto;
    }
}

@media (max-width: 768px) { /* Para móviles */
    .content-widget-beneficios-cm {
        grid-template-columns: 1fr; /* Apilados en 1 sola columna */
        grid-template-rows: auto;
    }
    .type-2x1 {
    	grid-column: span 1; /* Ocupa 1 columnas */
	}
	.type-1x2 {
    	grid-row: span 1; /* Ocupa 1 filas */
	}

	.content-widget-beneficios-cm .cuadro{
		height: 200px !important;
		display: flex;
	    flex-direction: row !important;
	    justify-content: center;
	    align-items: center !important;
	    padding: 10px;
	}
	.content-widget-beneficios-cm .cuadro img{
		max-width: 120px !important;
	    height: auto !important;
	    margin-right: 15px !important;
	}
	.content-widget-beneficios-cm .cuadro span:nth-of-type(1){
		width: 1px !important;
	    background: #333333 ;
	    height: 110px !important;
	}
	.content-widget-beneficios-cm .cuadro h5{
		max-width: 180px !important;
	    margin-left: 10px !important;
	}


}