.fji-dentro {
	--fji-gap: 48px;
	--fji-image-col: 52%;
	--fji-number-color: #777;
	--fji-title-color: #111;
	--fji-text-color: #444;
	--fji-active-accent: #111;
}

/* Contenedor de la imagen del producto. */
.fji-dentro-vista {
	position: relative;
	margin: 0;
}

.fji-dentro-vista > img {
	display: block;
	width: 100%;
	height: auto;
}

/* Compatibilidad con el comportamiento global anterior, sin hotspots visibles. */
.fji-dentro .fji-pin-legacy,
.fji-dentro .fji-pin-legacy[hidden] {
	display: none !important;
}

/* Maquetación base; puede desactivarse desde el control del widget. */
.fji-dentro[data-base-styles="yes"] {
	display: grid;
	grid-template-columns: minmax(0, var(--fji-image-col)) minmax(0, 1fr);
	gap: var(--fji-gap);
	align-items: start;
}

.fji-dentro[data-base-styles="yes"] .fji-dentro-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(10px, 1.2vw, 18px);
}

/*
 * La geometría del item es idéntica en reposo, hover y estado activo.
 * Reservamos desde el principio el borde del hover para que nunca cambie
 * el ancho útil del texto y, por tanto, no haya saltos de línea al pasar
 * el ratón. Los !important sólo blindan geometría frente al CSS global
 * histórico de FJI; tipografías y colores siguen siendo editables.
 */
.fji-dentro[data-base-styles="yes"] .fji-dentro-lista > li {
	display: grid !important;
	grid-template-columns: 28px minmax(0, 1fr) !important;
	grid-template-rows: auto auto !important;
	column-gap: 12px !important;
	row-gap: 0 !important;
	align-items: start;
	margin: 0 !important;
	padding: 14px 16px 14px 24px !important;
	border: 1px solid transparent !important;
	border-inline-start: 2px solid rgba(0, 0, 0, .12) !important;
	border-radius: 0 8px 8px 0;
	box-sizing: border-box !important;
	width: 100% !important;
	min-width: 0;
	transform: none !important;
	translate: none !important;
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.fji-dentro[data-base-styles="yes"] .fji-dentro-lista > li:hover,
.fji-dentro[data-base-styles="yes"] .fji-dentro-lista > li:focus-visible,
.fji-dentro[data-base-styles="yes"] .fji-dentro-lista > li.is-active {
	margin: 0 !important;
	padding: 14px 16px 14px 24px !important;
	border: 1px solid rgba(255, 255, 255, .08) !important;
	border-inline-start: 2px solid var(--fji-active-accent) !important;
	box-sizing: border-box !important;
	width: 100% !important;
	transform: none !important;
	translate: none !important;
	background: rgba(0, 0, 0, .035);
	outline: none;
}

.fji-dentro[data-base-styles="yes"] .fji-dentro-lista > li:focus-visible {
	box-shadow: 0 0 0 2px rgba(0, 0, 0, .12);
}

.fji-dentro[data-base-styles="yes"] .fji-dentro-lista .n {
	grid-column: 1 !important;
	grid-row: 1 !important;
	display: block;
	align-self: center;
	margin: 1px 0 0 !important;
	padding: 0 !important;
	min-width: 0;
	color: var(--fji-number-color);
	font-size: .78em;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.2;
	transform: none !important;
}

.fji-dentro[data-base-styles="yes"] .fji-dentro-lista h3 {
	grid-column: 2 !important;
	grid-row: 1 !important;
	min-width: 0;
	margin: 0 0 6px !important;
	padding: 0 !important;
	color: var(--fji-title-color);
	font-size: clamp(1rem, 1.35vw, 1.35rem);
	line-height: 1.2;
	transform: none !important;
}

.fji-dentro[data-base-styles="yes"] .fji-dentro-lista p {
	grid-column: 2 !important;
	grid-row: 2 !important;
	min-width: 0;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--fji-text-color);
	line-height: 1.55;
	transform: none !important;
}

/* El hover/activo sólo cambia apariencia, nunca métricas de texto o layout. */
.fji-dentro[data-base-styles="yes"] .fji-dentro-lista > li:hover .n,
.fji-dentro[data-base-styles="yes"] .fji-dentro-lista > li:hover h3,
.fji-dentro[data-base-styles="yes"] .fji-dentro-lista > li:hover p,
.fji-dentro[data-base-styles="yes"] .fji-dentro-lista > li.is-active .n,
.fji-dentro[data-base-styles="yes"] .fji-dentro-lista > li.is-active h3,
.fji-dentro[data-base-styles="yes"] .fji-dentro-lista > li.is-active p,
.fji-dentro[data-base-styles="yes"] .fji-dentro-lista > li:focus-visible .n,
.fji-dentro[data-base-styles="yes"] .fji-dentro-lista > li:focus-visible h3,
.fji-dentro[data-base-styles="yes"] .fji-dentro-lista > li:focus-visible p {
	margin-inline: 0 !important;
	padding-inline: 0 !important;
	transform: none !important;
	translate: none !important;
}

@media (max-width: 767px) {
	.fji-dentro[data-base-styles="yes"] {
		grid-template-columns: 1fr;
	}

	.fji-dentro[data-base-styles="yes"] .fji-dentro-lista > li,
	.fji-dentro[data-base-styles="yes"] .fji-dentro-lista > li:hover,
	.fji-dentro[data-base-styles="yes"] .fji-dentro-lista > li:focus-visible,
	.fji-dentro[data-base-styles="yes"] .fji-dentro-lista > li.is-active {
		grid-template-columns: 26px minmax(0, 1fr) !important;
		column-gap: 10px !important;
		padding-inline-start: 20px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fji-dentro[data-base-styles="yes"] .fji-dentro-lista > li {
		transition: none;
	}
}