.indexdesign-relacionados__item{
	box-sizing:border-box;
	border-style:solid;
	border-color:transparent;
	transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.indexdesign-relacionados__item:hover{
	transform:translateY(-2px);
}
/* Piso por defecto — mismo gotcha que en Navegación de Entrada: el
   'default' de un Group_Control_Box_Shadow no se imprime solo en una
   instancia nueva (ver angie-conexion.md punto 58). Selector de una sola
   clase, para que la regla de Elementor (más específica) gane apenas se
   toque "Sombra - rollover" desde el panel. */
.indexdesign-relacionados__item:hover{
	box-shadow:0 22px 46px -22px rgba(25,45,52,.22);
}

.indexdesign-relacionados__category{
	display:inline-block;
	align-self:flex-start;
	border-radius:999px;
	padding:3px 10px;
	margin-bottom:4px;
}

/* Respiro lateral del carrusel (control "Margen externo" + reserva de "Posición horizontal
   de las flechas") — las 2 variables las fija Elementor en vivo vía selectors de cada control
   (ver class-widget-entradas-relacionadas.php). Con margin+width en vez de padding: si fuera
   padding, con loop:true los slides clonados del loop infinito asoman un pedazo dentro de esa
   zona (ver angie-conexion.md punto 62) — con margin+width el recorte (overflow:hidden) ocurre
   en el borde de una caja ya angosta, no queda lugar donde algo pueda asomar. */
.indexdesign-relacionados__carousel.swiper{
	width:calc(100% - var(--idx-margin-left, 0px) - var(--idx-arrow-reserve, 0px) - var(--idx-margin-right, 0px) - var(--idx-arrow-reserve, 0px));
	margin-left:calc(var(--idx-margin-left, 0px) + var(--idx-arrow-reserve, 0px));
	margin-right:calc(var(--idx-margin-right, 0px) + var(--idx-arrow-reserve, 0px));
}