/* SAY - Sostenibilidad · gráficos dinámicos. Ajustes finos: sobrescribir las variables en Page CSS. */

.say-graf {
	--say-graf-salmon: #ea493a;
	--say-graf-gris: #7f8487;
	--say-graf-gris-claro: #a1bbc1;
	--say-graf-beige: #c1bdb4;
	--say-graf-oscuro: #0c2d3f;
	--say-graf-teal: #759ba3;
	--say-graf-texto: #0d2e40;
	--say-graf-acento: #e43d30;
	--say-graf-grilla: #738690;
	--say-graf-anim: 900ms;
	--say-graf-font: Montserrat, "Helvetica Neue", Arial, sans-serif;
	font-family: var(--say-graf-font);
	color: var(--say-graf-texto);
}
.say-graf svg { display: block; width: 100%; height: auto; overflow: visible; }
.say-graf svg text { font-family: var(--say-graf-font); }
.say-graf ul, .say-graf ol { list-style: none; margin: 0; padding: 0; }
.say-rueda__icono svg, .say-barras__icono svg, .say-vu__icono svg { fill: currentColor; }
.say-sr {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 1. Rueda ---------- */

.say-rueda {
	--say-rueda-max: 600px;
	--say-rueda-icono: 10cqi;
	container-type: inline-size;
	max-width: var(--say-rueda-max);
	margin-inline: auto;
}
.say-rueda__lienzo { position: relative; width: 74%; margin: 0 13%; aspect-ratio: 1; }
.say-rueda__svg { position: absolute; inset: 0; height: 100%; }
.say-rueda__anillo { fill: none; stroke: var(--say-graf-teal); stroke-width: .22; }
.say-rueda__nodo circle { fill: var(--say-graf-teal); transition: fill .25s; }
.say-rueda__nodo text {
	font-size: 3.4px; font-weight: 900; fill: var(--say-graf-texto);
	text-anchor: middle; dominant-baseline: central; transition: fill .25s;
}
.say-rueda__nodo { transform-box: fill-box; transform-origin: center; }
.say-rueda__nodo.is-activo circle { fill: var(--say-graf-acento); }
.say-rueda__nodo.is-activo text { fill: #fff; }

.say-rueda__item {
	position: absolute; left: var(--x); top: var(--y);
	transform: translate(-50%, -50%);
	width: 24cqi;
}
.say-rueda__item, .say-rueda__link {
	display: flex; flex-direction: column; align-items: center; gap: 1.2cqi;
	text-align: center; color: var(--say-graf-texto); text-decoration: none;
}
.say-rueda__icono { display: block; width: var(--say-rueda-icono); line-height: 0; transition: color .25s, transform .25s; }
.say-rueda__icono svg, .say-rueda__icono img { width: 100%; height: auto; }
.say-rueda__icono svg [fill]:not([fill="none"]) { fill: currentColor; }
.say-rueda__icono svg [stroke]:not([stroke="none"]) { stroke: currentColor; }
.say-rueda__etq {
	font-size: max(9px, 1.9cqi); font-weight: 700; line-height: 1.25;
	letter-spacing: .15em; text-transform: uppercase; color: var(--say-graf-acento);
}
.say-rueda__num { display: none; }
.say-rueda__item.is-activo .say-rueda__icono { transform: scale(1.08); }
.say-rueda__item:focus-visible, .say-rueda__link:focus-visible { outline: 2px solid var(--say-graf-acento); outline-offset: 4px; }

/* Entrada */
.say-rueda.is-armado .say-rueda__anillo { stroke-dasharray: 100; stroke-dashoffset: 100; }
.say-rueda.is-armado .say-rueda__nodo,
.say-rueda.is-armado .say-rueda__item { opacity: 0; }
.say-rueda.is-armado .say-rueda__nodo { transform: scale(.4); }
.say-rueda.is-visto .say-rueda__anillo { stroke-dashoffset: 0; transition: stroke-dashoffset var(--say-graf-anim) ease-out; }
.say-rueda.is-visto .say-rueda__nodo { opacity: 1; transform: none; transition: opacity .4s, transform .4s cubic-bezier(.3, 1.4, .5, 1); }
.say-rueda.is-visto .say-rueda__item { opacity: 1; transition: opacity .5s; }
.say-rueda.is-visto .say-rueda__nodo:nth-of-type(1), .say-rueda.is-visto .say-rueda__item:nth-child(1) { transition-delay: 300ms; }
.say-rueda.is-visto .say-rueda__nodo:nth-of-type(2), .say-rueda.is-visto .say-rueda__item:nth-child(2) { transition-delay: 380ms; }
.say-rueda.is-visto .say-rueda__nodo:nth-of-type(3), .say-rueda.is-visto .say-rueda__item:nth-child(3) { transition-delay: 460ms; }
.say-rueda.is-visto .say-rueda__nodo:nth-of-type(4), .say-rueda.is-visto .say-rueda__item:nth-child(4) { transition-delay: 540ms; }
.say-rueda.is-visto .say-rueda__nodo:nth-of-type(5), .say-rueda.is-visto .say-rueda__item:nth-child(5) { transition-delay: 620ms; }
.say-rueda.is-visto .say-rueda__nodo:nth-of-type(6), .say-rueda.is-visto .say-rueda__item:nth-child(6) { transition-delay: 700ms; }
.say-rueda.is-visto .say-rueda__nodo:nth-of-type(7), .say-rueda.is-visto .say-rueda__item:nth-child(7) { transition-delay: 780ms; }
.say-rueda.is-visto .say-rueda__nodo:nth-of-type(n+8), .say-rueda.is-visto .say-rueda__item:nth-child(n+8) { transition-delay: 860ms; }

/* ≤ 768: lista vertical */
@media (max-width: 768px) {
	.say-rueda { max-width: none; }
	.say-rueda__lienzo { width: auto; margin: 0; aspect-ratio: auto; }
	.say-rueda__svg { display: none; }
	.say-rueda__lista { position: relative; display: flex; flex-direction: column; gap: 1.1rem; padding-left: 3rem; }
	.say-rueda__lista::before {
		content: ""; position: absolute; left: 1rem; top: .9rem; bottom: .9rem;
		border-left: 1px solid var(--say-graf-teal);
	}
	.say-rueda__item { position: relative; left: auto; top: auto; transform: none; width: auto; }
	.say-rueda__item, .say-rueda__link { flex-direction: row; align-items: center; gap: 1rem; text-align: left; }
	.say-rueda__num {
		display: grid; place-items: center; position: absolute; left: -3rem; top: 50%;
		width: 2rem; height: 2rem; margin-top: -1rem; border-radius: 50%;
		background: var(--say-graf-teal); color: var(--say-graf-texto);
		font-weight: 900; font-size: 1rem; line-height: 1; transition: background .25s, color .25s;
	}
	.say-rueda__item.is-activo .say-rueda__num { background: var(--say-graf-acento); color: #fff; }
	.say-rueda__icono { width: 2.75rem; flex: none; }
	.say-rueda__etq { font-size: .72rem; }
}

/* ---------- 2. Dona ---------- */

.say-dona {
	--say-dona-max: 340px;
	container-type: inline-size;
	max-width: var(--say-dona-max);
	margin-inline: auto;
}
.say-dona__fig { position: relative; }
.say-dona__sec { fill: none; stroke-dasharray: var(--len) var(--c); transition: opacity .25s; }
.say-dona__pct {
	font-size: 9.3px; font-weight: 600; fill: #fff;
	text-anchor: middle; dominant-baseline: central; pointer-events: none; transition: opacity .3s;
}
.say-dona__pct.is-oscuro { fill: var(--say-graf-texto); }
.say-dona__centro {
	position: absolute; inset: 0; margin: 0; padding: 0 24%;
	display: grid; place-items: center; text-align: center; pointer-events: none;
	font-size: max(9px, 3.8cqi); font-weight: 500; line-height: 1.2; color: var(--say-graf-texto);
}
.say-dona__leyenda {
	display: flex; flex-direction: column; gap: .4em;
	margin-top: 1.4em !important; padding-top: .9em !important;
	border-top: 1px solid var(--say-graf-oscuro);
	font-size: max(9px, 2.6cqi); font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
.say-dona__ley { display: flex; align-items: center; gap: .7em; cursor: default; transition: opacity .25s; }
.say-dona__muestra { flex: none; width: 18px; height: 4px; }
.say-dona.is-hover .say-dona__sec:not(.is-activo) { opacity: .3; }
.say-dona.is-hover .say-dona__pct:not(.is-activo),
.say-dona.is-hover .say-dona__ley:not(.is-activo) { opacity: .45; }

.say-dona.is-armado .say-dona__sec { stroke-dasharray: 0 var(--c); }
.say-dona.is-armado .say-dona__pct { opacity: 0; }
.say-dona.is-visto .say-dona__sec {
	stroke-dasharray: var(--len) var(--c);
	transition: stroke-dasharray calc(var(--say-graf-anim) * .6) ease-out calc(var(--i) * 140ms), opacity .25s;
}
.say-dona.is-visto .say-dona__pct { opacity: 1; transition: opacity .4s ease calc(var(--say-graf-anim) * .6 + var(--i) * 140ms); }

/* ---------- 3. Barras ---------- */

.say-barras { container-type: inline-size; position: relative; }
.say-barras__grilla { stroke: var(--say-graf-grilla); stroke-width: .5; }
.say-barras__eje { font-size: 8.3px; font-weight: 600; fill: var(--say-graf-texto); text-anchor: end; dominant-baseline: central; }
.say-barras__unidad { font-size: 8px; font-weight: 600; fill: var(--say-graf-texto); }
.say-barras__valor { font-size: 9.3px; font-weight: 600; fill: var(--say-graf-texto); text-anchor: middle; transition: opacity .25s; }
.say-barras__bar { transform-box: fill-box; transform-origin: 50% 100%; transition: opacity .25s; }
.say-barras__grupos { position: relative; min-height: 3.6em; margin-top: .45em !important; font-size: max(9px, 1.96cqi); font-weight: 600; }
.say-barras__grupo {
	position: absolute; top: 0; transform: translateX(-50%);
	display: flex; flex-direction: column; align-items: center; gap: .35em; white-space: nowrap;
}
.say-barras__icono { display: block; width: 1.6em; line-height: 0; color: var(--say-graf-acento); }
.say-barras__icono svg, .say-barras__icono img { width: 100%; height: auto; }
.say-barras__icono svg [fill]:not([fill="none"]) { fill: currentColor; }
.say-barras__icono svg [stroke]:not([stroke="none"]) { stroke: currentColor; }
.say-barras__leyenda {
	display: flex; justify-content: center; flex-wrap: wrap; gap: .8em 2.6em;
	margin-left: var(--say-barras-pl) !important; padding-top: .8em !important;
	border-top: 1px solid var(--say-graf-oscuro);
	font-size: max(9px, 1.8cqi); font-weight: 600;
}
.say-barras__ley { display: flex; flex-direction: column; align-items: center; gap: .3em; transition: opacity .25s; }
.say-barras__muestra { width: 36px; height: 6px; }
.say-barras.is-hover .say-barras__bar:not(.is-activo),
.say-barras.is-hover .say-barras__valor:not(.is-activo) { opacity: .25; }
.say-barras.is-hover .say-barras__ley:not(.is-activo) { opacity: .45; }

.say-barras.is-armado .say-barras__bar { transform: scaleY(0); }
.say-barras.is-armado .say-barras__valor { opacity: 0; }
.say-barras.is-visto .say-barras__bar {
	transform: none;
	transition: transform calc(var(--say-graf-anim) * .7) cubic-bezier(.2, .8, .3, 1) calc(var(--i) * 60ms), opacity .25s;
}
.say-barras.is-visto .say-barras__valor { opacity: 1; transition: opacity .4s ease calc(var(--say-graf-anim) * .5 + var(--i) * 60ms); }

@container (max-width: 360px) {
	.say-barras__icono { display: none; }
	.say-barras__grupos { min-height: 2em; }
	.say-barras__leyenda { gap: .6em 1.4em; }
}

/* ---------- 4. Vida útil ---------- */

.say-vu { --say-vu-alto: 10px; color: inherit; }
.say-vu__lista { display: flex; flex-direction: column; gap: .9em; }
.say-vu__item { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .9em; }
.say-vu__item:not(:has(.say-vu__icono)) { grid-template-columns: 1fr; }
.say-vu__icono { display: block; width: 1.6em; line-height: 0; }
.say-vu__icono svg, .say-vu__icono img { width: 100%; height: auto; }
.say-vu__icono svg [fill]:not([fill="none"]) { fill: currentColor; }
.say-vu__icono svg [stroke]:not([stroke="none"]) { stroke: currentColor; }
.say-vu__txt { margin: 0 0 .35em; font-size: .75em; line-height: 1.2; }
.say-vu__barra { display: block; width: 100%; height: var(--say-vu-alto); }
.say-vu__relleno {
	display: block; height: 100%; width: var(--w); min-width: 3px;
	background: repeating-linear-gradient(135deg, currentColor 0 1px, transparent 1px 4px);
	box-shadow: inset 0 0 0 1px currentColor;
}
.say-vu.is-armado .say-vu__relleno { width: 0; }
.say-vu.is-visto .say-vu__relleno { width: var(--w); transition: width calc(var(--say-graf-anim) * 1.4) cubic-bezier(.25, .8, .3, 1) calc(var(--i) * 200ms); }

@media (prefers-reduced-motion: reduce) {
	.say-graf *, .say-graf *::before { transition: none !important; }
}