.fic-wrapper {
	--fic-active: #333333;
	--fic-center-bg: #f5f5f5;
	position: relative;
	max-width: 100%;
	margin: 0 auto;
	box-sizing: content-box;
	/* Fallback para el editor (UX Builder): el template Angular
	   (inc/templates/interactive_circle.html) solo define las custom
	   properties --fic-radius/--fic-circle, nunca un width/height inline.
	   Sin esta regla, como todos los hijos del wrapper son position:absolute,
	   el wrapper queda con altura 0 y todo el layout circular se rompe.
	   En el frontend esto NUNCA se usa: inc/shortcodes.php pone width/height
	   directo en el style inline del wrapper, que siempre gana por
	   especificidad sobre esta regla de clase. */
	width: calc(var(--fic-radius, 0px) * 2 + var(--fic-circle, 0px));
	aspect-ratio: 1 / 1;
}

.fic-circles,
.fic-arrows {
	position: absolute;
	inset: 0;
}

.fic-arrows {
	pointer-events: none;
	z-index: 1;
}

/* --- Círculos ---
   Cada .fic-item recibe left/top/width/height ya resueltos en px directo
   en su propio atributo style (ver inc/shortcodes.php). No dependen de
   heredar ninguna custom property ni de transforms encadenados, así que
   son inmunes a cualquier CSS externo que pise box-sizing/line-height/etc
   en selectores genéricos como "button" o "img". */
.fic-item {
	position: absolute;
	z-index: 2;
	box-sizing: border-box !important;
	max-width: none !important;
	min-width: 0 !important;
	max-height: none !important;
	min-height: 0 !important;
	border-radius: 50%;
	overflow: hidden;
	padding: 0;
	margin: 0;
	border: 3px solid transparent;
	background: #fff;
	cursor: pointer;
	transition: border-color var(--fic-speed) ease, box-shadow var(--fic-speed) ease;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Solo usado por el preview del editor (UX Builder), cuyo template Angular
   (inc/templates/interactive_circle_item.html) envuelve cada círculo en un
   ".fic-item-anchor" y posiciona vía rotate()+translateX() porque Angular
   no puede calcular cos()/sin() como sí hace PHP en el frontend. El
   selector descendiente ".fic-item-anchor .fic-item" no matchea nunca en
   el HTML real del sitio (inc/shortcodes.php no genera ese wrapper), así
   que no puede pisar el posicionamiento en px del frontend. */
.fic-item-anchor {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: rotate(var(--fic-angle)) translateX(var(--fic-radius));
}

.fic-item-anchor .fic-item {
	top: 0;
	left: 0;
	width: var(--fic-circle, 90px) !important;
	height: var(--fic-circle, 90px) !important;
	max-width: none !important;
	min-width: 0 !important;
	max-height: none !important;
	min-height: 0 !important;
	transform: translate(-50%, -50%) rotate(calc(var(--fic-angle) * -1));
}

.fic-item:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
}

.fic-item.is-active {
	border-color: var(--fic-active);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.fic-item-image {
	display: block;
	width: 100% !important;
	height: 100% !important;
}

.fic-item-image img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	display: block;
}

/* Título visible dentro del círculo — oculto por default, se activa con
   la opción "Mostrar título" (agrega la clase fic-show-titles al wrapper). */
.fic-item-title {
	display: none;
}

.fic-wrapper.fic-show-titles .fic-item-title {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18%;
	box-sizing: border-box;
	color: #fff;
	font-weight: 700;
	font-size: 11px;
	line-height: 1.25;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 8px rgba(0, 0, 0, 0.6);
	overflow: hidden;
	white-space: normal;
	word-break: break-word;
	pointer-events: none;
}

/* --- Flechas conectoras --- */

.fic-arrow {
	position: absolute;
	height: auto;
	display: block;
	pointer-events: none;
}

/* --- Centro --- */

.fic-center {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	transform: translate(-50%, -50%);
	width: var(--fic-center);
	height: var(--fic-center);
	border-radius: 50%;
	background: var(--fic-center-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
	box-sizing: border-box;
}

.fic-center-inner {
	transition: opacity var(--fic-speed) ease;
	opacity: 1;
}

.fic-center-inner.fic-fade {
	opacity: 0;
}

.fic-center-title {
	font-weight: 600;
	font-size: 1.1em;
	margin-bottom: 6px;
}

.fic-center-text {
	font-size: 0.9em;
	line-height: 1.4;
}

/* Responsive: en mobile pasamos a grilla simple en vez de círculo, para no
   forzar textos ilegibles en pantallas chicas. El centro se intercala a la
   mitad de la lista de círculos (no al final) usando "order" de flexbox:
   inc/shortcodes.php le asigna a cada círculo y al centro un "order" tal
   que la mitad de los círculos queda antes y la otra mitad después. Para
   que "order" funcione entre elementos que NO son hermanos directos
   (los círculos viven dentro de .fic-circles, el centro es hermano de ese
   div), .fic-circles pasa a "display:contents": desaparece de la caja pero
   sus hijos (los .fic-item-anchor) se vuelven ítems flex directos de
   .fic-wrapper, al mismo nivel que .fic-center. */
@media (max-width: 549px) {
	.fic-wrapper {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: auto;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: center;
		gap: 12px;
	}
	.fic-circles {
		display: contents;
	}
	.fic-item-anchor {
		position: static !important;
		transform: none !important;
	}
	.fic-item {
		/* relative (no static): sigue participando del flujo flex normal,
		   pero se mantiene como ancestro posicionado para que
		   .fic-item-title (position:absolute) quede anclado a SU propio
		   círculo. Con static, el título perdía su referencia y "subía"
		   hasta el próximo ancestro posicionado (el wrapper entero),
		   apareciendo fuera del círculo.
		   OJO: en el frontend cada .fic-item trae left/top inline (el
		   cálculo de posición circular de escritorio, ver
		   inc/shortcodes.php). Con position:static esos valores se
		   ignoran, pero con position:relative pasan a interpretarse como
		   un OFFSET extra sobre la posición normal del flujo — por eso
		   hay que anularlos acá explícitamente o los círculos quedan
		   corridos/superpuestos en mobile. */
		position: relative !important;
		left: 0 !important;
		top: 0 !important;
		transform: none !important;
	}
	.fic-arrows {
		display: none;
	}
	.fic-center {
		position: static;
		transform: none;
		width: 100%;
		margin: 6px 0;
		border-radius: 12px;
		flex: 0 0 100%; /* fuerza su propia fila entre las dos mitades */
	}
}