.imagen-col{
    display:flex;
    height:100%;
    overflow:hidden;
}

.imagen-col img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
}


/* =========================================================
   COMPONENTE: ICONO DE SECCIÓN
   Reutilizable en cualquier lugar
   ========================================================= */

.icono-seccion {
	width: 64px !important;
	height: 64px !important;
	border-radius: 50% !important;
	background-color: #e9f7ef !important;

	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	flex-shrink: 0 !important;
}

.icono-seccion i {
	font-size: 2rem !important;
	color: #198754 !important;
}


/* =========================================================
   COMPONENTE: TÍTULO DE SECCIÓN
   ========================================================= */

.titulo-secciones {
	font-size: 2.5rem !important;
}


/* =========================================================
   COMPONENTE: INTRODUCCIÓN DE SECCIÓN
   ========================================================= */

.introduccion-seccion {
	padding: 1.5rem 5rem !important;

	border: 1px solid rgba(25, 135, 84, 0.25) !important;

	background-color: rgba(25, 135, 84, 0.06) !important;

	border-radius: 0 0 1rem 1rem !important;
}

.introduccion-seccion p {
	margin-bottom: 0 !important;
}


/* =========================================================
   BLOG
   Solo artículos que utilizan .titulo-secciones
   ========================================================= */

.article:has(.titulo-secciones) {
	container-type: inline-size;
}


/* =========================================================
   ICONO DENTRO DEL COMPONENTE DE TÍTULO
   ========================================================= */

.article:has(.titulo-secciones) .icono-seccion {
	width: 64px !important;
	height: 64px !important;
}

.article:has(.titulo-secciones) .icono-seccion i {
	font-size: 2rem !important;
}


/* =========================================================
   BLOG — ARTÍCULO ESTRECHO
   Ejemplo: col-4
   ========================================================= */

@container (max-width: 575.98px) {

	/* -----------------------------------------
	   TÍTULO
	   ----------------------------------------- */

	.titulo-secciones {
		font-size: 1.5rem !important;
	}


	/* -----------------------------------------
	   ICONO
	   Se mantiene igual por ahora
	   ----------------------------------------- */

	.article:has(.titulo-secciones) .icono-seccion {
		width: 64px !important;
		height: 64px !important;
	}

	.article:has(.titulo-secciones) .icono-seccion i {
		font-size: 2rem !important;
	}


	/* -----------------------------------------
	   INTRODUCCIÓN
	   Ajuste para columnas estrechas
	   ----------------------------------------- */

	.article:has(.titulo-secciones) .introduccion-seccion {
		padding: 1.5rem !important;
        text-align: center;
	}

}

/* =========================================================
   MÓVIL
   Mismo comportamiento que el Blog en col-4
   ========================================================= */

@media (max-width: 575.98px) {

	.titulo-secciones {
		font-size: 1.5rem !important;
	}

	.icono-seccion {
		width: 64px !important;
		height: 64px !important;
	}

	.icono-seccion i {
		font-size: 2rem !important;
	}

	.introduccion-seccion {
		padding: 1.5rem !important;
		text-align: center;
	}

}

@media (max-width: 767.98px) {

	.titulo-secciones {
		font-size: 1.5rem !important;
	}

	.icono-seccion {
		width: 64px !important;
		height: 64px !important;
	}

	.icono-seccion i {
		font-size: 2rem !important;
	}

	.introduccion-seccion {
		padding: 1.5rem !important;
		text-align: center;
	}

}

/*@media screen and (max-width: 767.98px) {

	.titulo-secciones {
		font-size: 1.5rem !important;
	}

	.icono-seccion {
		width: 64px !important;
		height: 64px !important;
	}

	.icono-seccion i {
		font-size: 2rem !important;
	}

	.introduccion-seccion {
		padding: 1.5rem !important;
		text-align: center !important;
	}

}*/