/* Piso por defecto — el look (negrita, mayúsculas, tracking) ahora se
   define desde el control de Tipografía del panel (Estilo → Título), con
   esos mismos valores como default ahí — esto es solo la red de
   seguridad por si ese default de un Group Control no llega a imprimirse
   en una instancia nueva (mismo caso que la sombra del rollover, ver
   angie-conexion.md punto 58). Una sola clase, para que la regla del
   panel (más específica) gane apenas Claudio toque algo ahí. */
.indexdesign-navegacion__eyebrow{font-weight:600;letter-spacing:.08em;text-transform:uppercase}

.indexdesign-navegacion__cards{display:flex}

.indexdesign-navegacion__card{
	/* flex-basis:0 (el "1" corto de flex:1 1 0) es lo que da el ancho
	   igual entre las 2 tarjetas en modo fila — pero combinado con
	   overflow:hidden en un contenedor flex de alto automático (como
	   este, apilado en columna) colapsa a 0 de alto: con overflow
	   distinto de "visible", el minimo automatico de un hijo flex deja
	   de basarse en su contenido. Por eso el radio de bordes vive en el
	   padding interno (ver .indexdesign-navegacion__body), nunca un
	   overflow:hidden acá. */
	flex:1 1 0;
	display:flex;
	flex-direction:column;
	text-decoration:none;
	color:inherit;
	border-style:solid;
	border-color:transparent;
	transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
/* Piso por defecto — el control "Sombra - rollover" de Elementor no
   imprime ninguna regla hasta que se guarda un valor explícito en esa
   instancia (pasa con los Group Control de Elementor, no solo acá: ver
   angie-conexion.md punto 58 para el mismo caso con un color). Selector
   de una sola clase a propósito, para que la regla de Elementor (varias
   clases, más específica) gane apenas Claudio toque el control. */
.indexdesign-navegacion__card:hover{
	box-shadow:0 22px 46px -22px rgba(25,45,52,.22);
	transform:translateY(-2px);
}

.indexdesign-navegacion__label-row{
	display:flex;
	align-items:center;
	gap:8px;
	padding:16px 20px 0;
}
/* Tarjeta "Siguiente": etiqueta espejada — texto primero, ícono al final,
   pegada al borde derecho ("Siguiente entrada >"). row-reverse da vuelta
   el orden visual de los hijos (el ícono, último en el HTML, pasa a
   mostrarse a la derecha) y de paso invierte a qué lado apunta
   justify-content:flex-start (que ya es el default) — por eso alcanza
   con esta sola propiedad, sin tocar el margen/alineación de nada más. */
.indexdesign-navegacion__card--next .indexdesign-navegacion__label-row{
	flex-direction:row-reverse;
}

.indexdesign-navegacion__icon{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:24px;
	height:24px;
	border-radius:999px;
	flex-shrink:0;
}
.indexdesign-navegacion__icon svg{width:12px;height:12px;display:block}

.indexdesign-navegacion__body{
	display:flex;
	align-items:center;
	gap:16px;
}

.indexdesign-navegacion__image{flex-shrink:0;overflow:hidden;display:flex}

.indexdesign-navegacion__text{
	display:flex;
	flex-direction:column;
	gap:8px;
	min-width:0;
}

.indexdesign-navegacion__category{
	align-self:flex-start;
	border-radius:999px;
	padding:3px 10px;
}

.indexdesign-navegacion__title{
	display:-webkit-box;
	-webkit-box-orient:vertical;
	overflow:hidden;
}