/* =========================================================================
   Ecosistema (Constelación interactiva) — estilos del frontend
   Bloque: estilos-institucional/ecosistema-constelacion

   Índice
     1. Contenedor y encabezado
     2. Mapa y SVG (halos, líneas, partículas)
     3. Nodos (áreas)
     4. Núcleo
     5. Píldora de estado
     6. Animaciones
     7. Responsive
     8. Movimiento reducido
     9. Ajustes MINEC

   Responsive: view.js escribe data-eco-layout="desktop|tablet|mobile" en la
   <section class="eco-network"> según el ANCHO DEL CONTENEDOR. Las reglas del
   mapa usan ese atributo para que CSS y JS cambien de layout a la vez.
   ========================================================================= */

/* 1. Contenedor y encabezado --------------------------------------------- */

.eco-network {
	background: #303845;
	font-family: MuseoSans-300, Poppins, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Arial, sans-serif;
	margin: 0 auto;
	max-width: 1480px;
	padding: clamp(12px, 2.2vw, 32px);
}

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

.eco-network__canvas {
	background:
		radial-gradient(circle at 57% 52%, rgba(17, 30, 96, 0.35), rgba(17, 30, 96, 0.08) 28%, transparent 58%),
		linear-gradient(135deg, hsla(0, 0%, 100%, 0.018), transparent 46%);
	color: #fff;
	min-height: min(830px, 100vh - 24px);
	overflow: hidden;
	position: relative;
}

/* Retícula de puntos difuminada hacia los bordes */
.eco-network__canvas:before {
	background-image: radial-gradient(circle, rgba(227, 233, 249, 0.05) 0 1px, transparent 1.4px);
	background-size: 34px 34px;
	content: "";
	inset: 0;
	-webkit-mask-image: radial-gradient(ellipse at 55% 52%, #000 8%, transparent 70%);
	mask-image: radial-gradient(ellipse at 55% 52%, #000 8%, transparent 70%);
	opacity: 0.34;
	pointer-events: none;
	position: absolute;
}

.eco-network__header {
	padding: clamp(36px, 5vw, 64px) 24px 0;
	position: relative;
	text-align: center;
	z-index: 2;
}

.eco-network__title {
	color: #fff;
	font-size: clamp(23px, 2.2vw, 34px);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	margin: 0;
	text-transform: uppercase;
}

/* Variante antigua del encabezado (h1 + p). El markup actual usa h2.eco-network__title. */
.eco-network__header h1 {
	color: #fff;
	font-size: clamp(22px, 2.75vw, 38px);
	font-weight: 660;
	letter-spacing: 0.075em;
	line-height: 1.28;
	margin: 0;
	text-transform: uppercase;
}

.eco-network__header h1 span {
	color: hsla(0, 0%, 100%, 0.74);
	font-size: 0.76em;
	font-weight: 410;
	letter-spacing: 0.11em;
}

.eco-network__header p {
	color: rgba(229, 234, 248, 0.5);
	font-size: 9px;
	letter-spacing: 0.16em;
	margin: 15px 0 0;
	text-transform: uppercase;
}

/* 2. Mapa y SVG ----------------------------------------------------------- */

.eco-network__map {
	height: clamp(580px, 58vw, 670px);
	position: relative;
	z-index: 1;
}

.eco-const-svg {
	display: block;
	height: 100%;
	overflow: visible;
	width: 100%;
}

.eco-const-cluster-halo {
	fill: rgba(17, 30, 96, 0.07);
	stroke: rgba(157, 171, 218, 0.08);
	stroke-dasharray: 3 12;
	stroke-width: 1px;
}

.eco-const-cluster-halo--one {
	animation: eco-const-dash 34s linear infinite;
}

.eco-const-cluster-halo--two {
	animation: eco-const-dash-reverse 40s linear infinite;
}

.eco-const-cluster-halo--three {
	animation: eco-const-dash 46s linear infinite;
}

.eco-const-edge {
	fill: none;
	transition: opacity 0.22s ease, stroke 0.22s ease, stroke-width 0.22s ease;
}

.eco-const-edge--primary {
	stroke: rgba(195, 204, 232, 0.25);
	stroke-linecap: round;
	stroke-width: 1.25px;
}

.eco-const-edge--secondary {
	stroke: rgba(130, 147, 203, 0.28);
	stroke-dasharray: 4 7;
	stroke-linecap: round;
	stroke-width: 1px;
}

.eco-const-edge--quality {
	stroke: rgba(137, 153, 207, 0.14);
	stroke-dasharray: 2 9;
}

.eco-const-edge.is-muted {
	opacity: 0.07;
}

.eco-const-edge.is-active {
	stroke: rgba(232, 236, 249, 0.88);
	stroke-width: 2px;
}

.eco-const-edge--secondary.is-active {
	stroke: rgba(148, 166, 226, 0.82);
	stroke-dasharray: 3 5;
	stroke-width: 1.5px;
}

.eco-const-particle {
	fill: rgba(220, 227, 249, 0.54);
	opacity: 0.35;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.eco-const-edge-wrap.is-muted .eco-const-particle {
	opacity: 0;
}

.eco-const-edge-wrap.is-active .eco-const-particle {
	fill: #fff;
	opacity: 0.88;
}

/* 3. Nodos ---------------------------------------------------------------- */

.eco-const-node {
	cursor: pointer;
	outline: none;
	transition: opacity 0.22s ease;
}

.eco-const-node__visual {
	animation: eco-const-float 7s ease-in-out infinite;
	transform-box: fill-box;
	transform-origin: center;
}

.eco-const-node__ring {
	fill: rgba(17, 30, 96, 0.18);
	stroke: rgba(157, 174, 226, 0.2);
	stroke-width: 1px;
	transition: fill 0.22s ease, stroke 0.22s ease;
}

.eco-const-node__disc {
	fill: rgba(17, 30, 96, 0.55);
	filter: url(#eco-const-node-shadow);
	stroke: rgba(224, 229, 246, 0.3);
	stroke-width: 1px;
	transition: fill 0.22s ease, stroke 0.22s ease, filter 0.22s ease;
}

.eco-const-node__icon {
	fill: none;
	font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
	font-size: 23px;
	font-weight: 900;
	paint-order: stroke;
	pointer-events: none;
	stroke: rgba(250, 251, 255, 0.96);
	stroke-width: 1px;
	text-anchor: middle;
}

.eco-const-node__stem {
	stroke: rgba(210, 218, 242, 0.28);
	stroke-width: 1px;
}

.eco-const-node__label {
	fill: rgba(247, 248, 252, 0.9);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: -0.01em;
	pointer-events: none;
	transition: fill 0.22s ease;
}

.eco-const-node.is-muted {
	opacity: 0.15;
}

.eco-const-node.is-related {
	opacity: 0.62;
}

.eco-const-node.is-active .eco-const-node__ring {
	fill: rgba(17, 30, 96, 0.46);
	stroke: rgba(197, 207, 239, 0.62);
}

.eco-const-node.is-active .eco-const-node__label {
	fill: #fff;
	font-weight: 620;
}

.eco-const-node.is-active .eco-const-node__disc,
.eco-const-node:focus-visible .eco-const-node__disc,
.eco-const-node:hover .eco-const-node__disc {
	filter: url(#eco-active-shadow);
	stroke: hsla(0, 0%, 100%, 0.82);
	stroke-width: 1.5px;
}

.eco-const-node:focus-visible .eco-const-node__ring {
	stroke: #fff;
	stroke-width: 2px;
}

/* 4. Núcleo --------------------------------------------------------------- */

.eco-const-core {
	cursor: pointer;
	outline: none;
}

.eco-const-core__aura {
	animation: eco-const-breathe 5s ease-in-out infinite;
	fill: rgba(17, 30, 96, 0.55);
	stroke: rgba(17, 30, 96, 0.7);
	stroke-width: 1.5px;
	transform-box: fill-box;
	transform-origin: center;
}

.eco-const-core__outer {
	fill: rgba(17, 30, 96, 0.95);
	stroke: rgba(176, 188, 228, 0.22);
	stroke-width: 1px;
}

.eco-const-core__disc {
	fill: #111e60;
	filter: url(#eco-const-core-shadow);
	stroke: rgba(235, 238, 249, 0.55);
	stroke-width: 1.2px;
}

.eco-const-core__label {
	fill: #fff;
	font-size: 15px;
	font-weight: 680;
	letter-spacing: -0.018em;
	pointer-events: none;
	text-anchor: middle;
}

.eco-const-core:focus-visible .eco-const-core__outer {
	stroke: #fff;
	stroke-width: 2px;
}

/* 5. Píldora de estado (nombre del área seleccionada) --------------------- */

.eco-const-status {
	background: rgba(17, 30, 96, 0.9);
	border: 1px solid rgba(218, 224, 245, 0.18);
	border-radius: 999px;
	bottom: 18px;
	color: rgba(247, 248, 252, 0.86);
	font-size: 10px;
	left: 50%;
	letter-spacing: 0.04em;
	opacity: 0;
	padding: 7px 12px;
	pointer-events: none;
	position: absolute;
	transform: translate(-50%, 6px);
	transition: opacity 0.18s ease, transform 0.18s ease;
	white-space: nowrap;
	z-index: 4;
}

.eco-const-status.is-visible {
	opacity: 1;
	transform: translate(-50%);
}

/* 6. Animaciones ---------------------------------------------------------- */

@keyframes eco-const-dash {
	to {
		stroke-dashoffset: -180;
	}
}

@keyframes eco-const-dash-reverse {
	to {
		stroke-dashoffset: 180;
	}
}

@keyframes eco-const-float {
	0%,
	to {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-2.5px);
	}
}

@keyframes eco-const-breathe {
	0%,
	to {
		opacity: 0.45;
		transform: scale(0.94);
	}
	50% {
		opacity: 0.9;
		transform: scale(1.08);
	}
}

/* 7. Responsive ----------------------------------------------------------- */

/* Tablet y móvil: el alto sale de la proporción del dibujo (sin franjas vacías)
   y se reserva abajo el espacio de la píldora de estado. */
.eco-network[data-eco-layout="tablet"] .eco-network__canvas,
.eco-network[data-eco-layout="mobile"] .eco-network__canvas {
	min-height: 0;
}

.eco-network[data-eco-layout="tablet"] .eco-network__map,
.eco-network[data-eco-layout="mobile"] .eco-network__map {
	height: auto;
	padding: 12px 0 64px;
}

.eco-network[data-eco-layout="tablet"] .eco-const-svg,
.eco-network[data-eco-layout="mobile"] .eco-const-svg {
	aspect-ratio: var(--eco-ratio);
	height: auto;
	margin: 0 auto;
}

/* En tablet el dibujo no pasa del alto de la pantalla (ni de 860px de ancho). */
.eco-network[data-eco-layout="tablet"] .eco-const-svg {
	max-width: clamp(600px, (100vh - 140px) * var(--eco-ratio), 860px);
}

.eco-network[data-eco-layout="mobile"] .eco-const-svg {
	max-width: 480px;
}

/* Textos más grandes en el sistema de coordenadas del SVG, para que en
   pantalla se lean entre ~11 y ~17px. */
.eco-network[data-eco-layout="tablet"] .eco-const-node__label {
	font-size: 15px;
}

.eco-network[data-eco-layout="mobile"] .eco-const-node__label {
	font-size: 14px;
}

.eco-network[data-eco-layout="tablet"] .eco-const-status,
.eco-network[data-eco-layout="mobile"] .eco-const-status {
	font-size: 12px;
	line-height: 1.35;
	max-width: calc(100% - 32px);
	text-align: center;
	white-space: normal;
	width: max-content;
}

@media (max-width: 720px) {
	.eco-network {
		padding: 0;
	}

	.eco-network__header {
		padding: 28px 16px 0;
	}

	.eco-network__title {
		font-size: clamp(18px, 5vw, 23px);
		letter-spacing: 0.05em;
	}

	.eco-network__header h1 {
		font-size: clamp(17px, 5vw, 23px);
		letter-spacing: 0.05em;
	}

	.eco-network__header h1 span {
		font-size: 0.7em;
	}

	.eco-network__header p {
		font-size: 7.5px;
		line-height: 1.5;
	}
}

/* 8. Movimiento reducido -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.eco-const-cluster-halo,
	.eco-const-core__aura,
	.eco-const-node__visual {
		animation: none;
	}

	.eco-const-particle {
		display: none;
	}

	.eco-const-edge,
	.eco-const-node,
	.eco-const-node__disc,
	.eco-const-node__label,
	.eco-const-node__ring,
	.eco-const-status {
		transition-duration: 0.01ms;
	}
}

/* 9. Ajustes MINEC -------------------------------------------------------- */

/* Sin líneas punteadas en la constelación */
.eco-const-edge--secondary,
.eco-const-edge--quality {
	display: none !important;
}