/**
 * [gd_ecosistema] - Diagrama hexagonal del ecosistema tecnologico.
 *
 * Geometria y paleta tomadas del diseño original (Consultoria.pdf):
 * los nodos son navy solido sobre fondo claro, el hexagono es casi cuadrado
 * y los nodos superior e inferior son mas pequeños que los de las esquinas.
 *
 * Las posiciones se derivan del viewBox 1000x940 que usa el SVG de
 * conexiones, para que circulos y lineas coincidan a cualquier tamaño.
 */

.gd-eco {
	--gd-eco-acento: #5b8cff;
	--gd-eco-acento-claro: #85d6ff;

	/* Nodos: siempre oscuros, como en el diseño. */
	--gd-eco-nodo-fondo: #131f31;
	--gd-eco-nodo-borde: rgba(45, 61, 93, 0.55);
	--gd-eco-punto: #2d3d5d;
	--gd-eco-nodo-texto: #fff;

	--gd-eco-centro-fondo: #162138;
	--gd-eco-centro-borde: rgba(91, 140, 255, 0.9);
	--gd-eco-aro: #2d3d5d;

	/* Lo que si depende del fondo de la seccion. */
	--gd-eco-linea: rgba(45, 61, 93, 0.3);
	--gd-eco-etiqueta-centro: #111827;
	--gd-eco-panel-fondo: rgba(255, 255, 255, 0.5);
	--gd-eco-panel-borde: rgba(255, 255, 255, 0.7);
	--gd-eco-panel-texto: #2d3d5d;
	--gd-eco-panel-pista: rgba(45, 61, 93, 0.6);

	/* Diametros, como % del ancho del mapa. */
	--gd-eco-orbita-grande: 16.3%;
	--gd-eco-orbita-chica: 13.1%;
	--gd-eco-centro: 20.6%;

	--gd-eco-fuente-titulo: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;
	--gd-eco-fuente-texto: "Inter", system-ui, -apple-system, sans-serif;

	box-sizing: border-box;
	width: 100%;
	max-width: 780px;
	margin-inline: auto;
}

.gd-eco *,
.gd-eco *::before,
.gd-eco *::after {
	box-sizing: border-box;
}

/* Variante oscura: solo cambia lo que rodea a los nodos. */
.gd-eco.gd-eco--oscuro {
	--gd-eco-nodo-borde: rgba(133, 214, 255, 0.18);
	--gd-eco-linea: rgba(133, 214, 255, 0.16);
	--gd-eco-etiqueta-centro: rgba(255, 255, 255, 0.55);
	--gd-eco-panel-fondo: rgba(91, 140, 255, 0.06);
	--gd-eco-panel-borde: rgba(91, 140, 255, 0.26);
	--gd-eco-panel-texto: rgba(255, 255, 255, 0.88);
	--gd-eco-panel-pista: rgba(255, 255, 255, 0.5);
}

.gd-eco--fondo {
	padding: clamp(20px, 4vw, 40px);
	border-radius: 24px;
	background: radial-gradient(120% 90% at 50% 30%, #10203a 0%, #0a1523 60%, #08111d 100%);
}


/* --- Lienzo -------------------------------------------------------------- */

.gd-eco__mapa {
	position: relative;
	width: 100%;
	max-width: 680px;
	margin-inline: auto;
	/* Misma proporcion que el viewBox del SVG. */
	aspect-ratio: 1000 / 940;
}

.gd-eco__lineas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.gd-eco__linea {
	stroke: var(--gd-eco-linea);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	transition: stroke 0.35s ease, stroke-width 0.35s ease, filter 0.35s ease;
}

/* Radio encendido cuando su nodo esta activo. */
.gd-eco__linea--radio.is-activa {
	stroke: var(--gd-eco-acento);
	stroke-width: 2;
	filter: drop-shadow(0 0 6px rgba(91, 140, 255, 0.7));
}


/* --- Nodos ---------------------------------------------------------------
 * Los nodos son <button>. Los kits de Elementor y muchos temas estilan
 * button globalmente (fondo degradado, border-radius, padding, tipografia),
 * asi que aqui hay un reset explicito. El !important es deliberado: son las
 * propiedades que definen la forma del componente y no deben heredarse del
 * kit activo.
 * ---------------------------------------------------------------------- */

.gd-eco .gd-eco__nodo {
	position: absolute;
	left: var(--x);
	top: var(--y);
	transform: translate(-50%, -50%);
	display: flex !important;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	min-width: 0;
	min-height: 0;
	max-width: none;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--gd-eco-nodo-borde) !important;
	border-radius: 50% !important;
	background: var(--gd-eco-nodo-fondo) !important;
	background-image: none !important;
	color: var(--gd-eco-nodo-texto);
	font: inherit;
	text-align: center;
	text-transform: none !important;
	letter-spacing: normal;
	line-height: 1.2;
	text-decoration: none !important;
	box-shadow: none;
	transition: border-color 0.35s ease, background-color 0.35s ease,
		box-shadow 0.35s ease, transform 0.35s ease;
}

.gd-eco .gd-eco__nodo--orbita {
	width: var(--gd-eco-orbita-grande) !important;
	height: auto !important;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	outline: none;
}

/* Los nodos superior e inferior son mas pequeños en el diseño. */
.gd-eco .gd-eco__nodo[data-slot="n"],
.gd-eco .gd-eco__nodo[data-slot="s"] {
	width: var(--gd-eco-orbita-chica) !important;
}

.gd-eco .gd-eco__nodo--orbita:hover,
.gd-eco .gd-eco__nodo--orbita:focus,
.gd-eco .gd-eco__nodo--orbita:active {
	background-image: none !important;
	text-decoration: none !important;
}

.gd-eco .gd-eco__nodo--centro {
	--x: 50%;
	--y: 50%;
	width: var(--gd-eco-centro);
	pointer-events: none;
	border-color: var(--gd-eco-centro-borde) !important;
	background: var(--gd-eco-centro-fondo) !important;
	box-shadow: 0 0 34px rgba(91, 140, 255, 0.35);
}

/* Coordenadas: los mismos puntos que el SVG, en porcentaje. */
.gd-eco .gd-eco__nodo[data-slot="nw"] { --x: 11.08%; --y: 19.10%; }
.gd-eco .gd-eco__nodo[data-slot="n"]  { --x: 49.91%; --y: 9.90%; }
.gd-eco .gd-eco__nodo[data-slot="ne"] { --x: 88.92%; --y: 19.10%; }
.gd-eco .gd-eco__nodo[data-slot="se"] { --x: 88.92%; --y: 80.60%; }
.gd-eco .gd-eco__nodo[data-slot="s"]  { --x: 49.91%; --y: 90.10%; }
.gd-eco .gd-eco__nodo[data-slot="sw"] { --x: 11.08%; --y: 80.60%; }

/* Disco interior. */
.gd-eco__punto {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 66%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--gd-eco-punto);
	transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

.gd-eco .gd-eco__nodo--centro .gd-eco__punto {
	width: 22%;
	background: var(--gd-eco-acento-claro);
	box-shadow: 0 0 16px rgba(133, 214, 255, 0.9);
}

/* Aro intermedio, solo en el nodo central. */
.gd-eco__aro {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 52%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--gd-eco-aro);
}

.gd-eco .gd-eco__etiqueta {
	position: relative;
	z-index: 1;
	padding-inline: 5%;
	color: var(--gd-eco-nodo-texto);
	font-family: var(--gd-eco-fuente-titulo);
	font-size: clamp(9px, 1.15vw, 13px);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	transition: color 0.35s ease;
}

/* Los nodos chicos necesitan tipografia menor para no desbordar el circulo. */
.gd-eco .gd-eco__nodo[data-slot="n"] .gd-eco__etiqueta,
.gd-eco .gd-eco__nodo[data-slot="s"] .gd-eco__etiqueta {
	padding-inline: 2%;
	font-size: clamp(8px, 0.92vw, 11px);
}

.gd-eco .gd-eco__etiqueta--centro {
	position: absolute;
	top: calc(100% + 0.75em);
	left: 50%;
	transform: translateX(-50%);
	padding: 0;
	color: var(--gd-eco-etiqueta-centro);
	font-size: clamp(9px, 1.05vw, 12px);
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
}


/* --- Estado activo ------------------------------------------------------- */

.gd-eco .gd-eco__nodo--orbita.is-activo {
	border-color: var(--gd-eco-acento) !important;
	box-shadow: 0 0 0 1px rgba(91, 140, 255, 0.4), 0 0 34px rgba(91, 140, 255, 0.5);
	transform: translate(-50%, -50%) scale(1.06);
}

.gd-eco .gd-eco__nodo--orbita.is-activo .gd-eco__punto {
	background: var(--gd-eco-acento);
	box-shadow: 0 0 24px rgba(91, 140, 255, 0.9), inset 0 0 16px rgba(255, 255, 255, 0.4);
}

/* Foco de teclado: visible sin depender del hover. */
.gd-eco .gd-eco__nodo--orbita:focus-visible {
	outline: 2px solid var(--gd-eco-acento) !important;
	outline-offset: 5px;
}


/* --- Panel ---------------------------------------------------------------
 * En reposo muestra la pista, centrada. Al activar un nodo muestra su
 * titulo y descripcion, alineados a la izquierda.
 * ---------------------------------------------------------------------- */

.gd-eco__panel {
	margin-top: clamp(16px, 2.6vw, 28px);
	padding: clamp(18px, 2.4vw, 26px) clamp(20px, 3vw, 34px);
	border: 1px solid var(--gd-eco-panel-borde);
	border-radius: 24px;
	background: var(--gd-eco-panel-fondo);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: opacity 0.22s ease;
}

.gd-eco__panel.is-cambiando {
	opacity: 0;
}

.gd-eco__panel-titulo {
	margin: 0 0 0.5em;
	color: var(--gd-eco-acento);
	font-family: var(--gd-eco-fuente-titulo);
	font-size: clamp(15px, 1.6vw, 18px);
	font-weight: 600;
	letter-spacing: 0.05em;
}

.gd-eco__panel-texto {
	margin: 0;
	color: var(--gd-eco-panel-texto);
	font-family: var(--gd-eco-fuente-texto);
	font-size: clamp(13px, 1.45vw, 16px);
	font-weight: 400;
	line-height: 1.6;
}

/* Estado de reposo: solo la pista, centrada y atenuada. */
.gd-eco__panel.is-pista {
	text-align: center;
}

.gd-eco__panel.is-pista .gd-eco__panel-texto {
	color: var(--gd-eco-panel-pista);
}


/* --- Movil ---------------------------------------------------------------
 * Por debajo de 640px las etiquetas no caben dentro de los circulos, asi que
 * salen debajo de cada nodo y los circulos se achican.
 * ---------------------------------------------------------------------- */

@media (max-width: 640px) {
	.gd-eco {
		--gd-eco-orbita-grande: 17%;
		--gd-eco-orbita-chica: 15%;
		--gd-eco-centro: 21%;
	}

	.gd-eco .gd-eco__nodo--orbita .gd-eco__etiqueta {
		position: absolute;
		top: calc(100% + 0.5em);
		left: 50%;
		transform: translateX(-50%);
		padding: 0;
		color: var(--gd-eco-etiqueta-centro);
		font-size: 11px;
		white-space: nowrap;
	}

	.gd-eco .gd-eco__nodo--orbita.is-activo {
		/* Sin escalado: en pantallas chicas desalinea la etiqueta externa. */
		transform: translate(-50%, -50%);
	}

	.gd-eco .gd-eco__nodo--orbita.is-activo .gd-eco__etiqueta {
		color: var(--gd-eco-acento);
	}

	.gd-eco .gd-eco__etiqueta--centro {
		font-size: 10px;
	}

	/* La etiqueta del nodo inferior cae fuera del mapa: hay que darle sitio. */
	.gd-eco__panel {
		margin-top: 34px;
	}
}


/* --- Preferencias de movimiento ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.gd-eco .gd-eco__nodo,
	.gd-eco__punto,
	.gd-eco__linea,
	.gd-eco__panel,
	.gd-eco .gd-eco__etiqueta {
		transition: none;
	}

	.gd-eco .gd-eco__nodo--orbita.is-activo {
		transform: translate(-50%, -50%);
	}
}