/* SAY · Operaciones — [say_ubicaciones] [say_proceso] [say_ciclo]
   Ajustes: sobrescribir las variables en .say-ubi / .say-pro / .say-cic desde Page o Global CSS.
   Como este archivo carga después del Global CSS, las sobrescrituras de reglas (no de variables)
   necesitan un nivel más de especificidad. */

/* =========================================================================
   Nuestra ubicación
   ========================================================================= */

.say-ubi {
	--say-ubi-mapa: #fff;          /* color del mapa (en el diseño ~#e9ecee) */
	--say-ubi-pin: #e43d30;
	--say-ubi-pin-w: 10px;
	--say-ubi-pin-h: 17px;
	--say-ubi-zoom: 1.35;          /* rombo resaltado */
	--say-ubi-linea: #e43d30;      /* línea guía internacional */
	--say-ubi-linea-w: 0.5px;
	--say-ubi-texto: #fff;
	--say-ubi-fs: 12px;
	/* Internacional: el componente va de la columna de etiquetas izquierda al borde de las derechas.
	   El mapa empieza en --mi % y ocupa --ma % del ancho (medido en el PDF). */
	--say-ubi-mi: 12.35;
	--say-ubi-ma: 71.41;
	/* Nacional */
	--say-ubi-nac-cols: minmax(0, 1fr) minmax(0, 1fr);  /* columna del mapa | columna de la lista */
	--say-ubi-nac-ancho: 130px;    /* ancho del mapa de Chile (centrado en su columna) */
	--say-ubi-nac-ancho-m: 90px;   /* ≤ 768 px */
	--say-ubi-nac-gap: 4%;
	--say-ubi-l-pad: 26px;         /* distancia de la línea vertical al texto */
	--say-ubi-l-gap: 30px;         /* separación entre ítems */
	--say-ubi-l-linea: #fff;
	--say-ubi-l-rombo-w: 11px;
	--say-ubi-l-rombo-h: 18px;
	--say-ubi-tit-fs: 20px;
	color: var(--say-ubi-texto);
	font-size: var(--say-ubi-fs);
}

.say-ubi__marco { position: relative; }
.say-ubi__mapa { position: relative; color: var(--say-ubi-mapa); line-height: 0; }
.say-ubi__svg { display: block; width: 100%; height: auto; }

.say-ubi__pin {
	position: absolute;
	z-index: 2;
	left: calc(var(--x) * 1%);
	top: calc(var(--y) * 1%);
	width: var(--say-ubi-pin-w);
	height: var(--say-ubi-pin-h);
	background: var(--say-ubi-pin);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	transform: translate(-50%, -50%);
	transition: transform .25s ease;
}
.say-ubi__pin.is-activo { transform: translate(-50%, -50%) scale(var(--say-ubi-zoom)); }

/* ---- Internacional: etiquetas con línea guía ---- */

.say-ubi--etiquetas .say-ubi__mapa {
	margin-left: calc(var(--say-ubi-mi) * 1%);
	width: calc(var(--say-ubi-ma) * 1%);
}
.say-ubi__etqs {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	pointer-events: none;
}
.say-ubi__etq {
	position: absolute;
	top: calc(var(--y) * 1%);
	height: 0;
	margin: 0;
	border-top: var(--say-ubi-linea-w) solid var(--say-ubi-linea);
	line-height: 1.25;
	pointer-events: auto;
	outline: none;
	transition: border-color .25s ease;
}
.say-ubi__etq--izquierda {
	left: 0;
	width: calc((var(--say-ubi-mi) + var(--x) * var(--say-ubi-ma) / 100) * 1%);
}
.say-ubi__etq--derecha {
	right: 0;
	width: calc((100 - var(--say-ubi-mi) - var(--x) * var(--say-ubi-ma) / 100) * 1%);
	text-align: right;
}
.say-ubi__nombre,
.say-ubi__detalle { position: absolute; white-space: nowrap; }
.say-ubi__nombre { bottom: 4px; font-weight: 600; }
.say-ubi__detalle { top: 4px; font-weight: 300; }
.say-ubi__etq--izquierda .say-ubi__nombre,
.say-ubi__etq--izquierda .say-ubi__detalle { left: 0; }
.say-ubi__etq--derecha .say-ubi__nombre,
.say-ubi__etq--derecha .say-ubi__detalle { right: 0; }
.say-ubi__etq.is-activo { border-top-color: var(--say-ubi-texto); }
.say-ubi__etq:focus-visible .say-ubi__nombre { text-decoration: underline; }

/* ---- Nacional: mapa + lista con desglose ---- */

.say-ubi--lista {
	display: grid;
	grid-template-columns: var(--say-ubi-nac-cols);
	align-items: center;
	column-gap: var(--say-ubi-nac-gap);
}
.say-ubi--lista .say-ubi__marco { width: var(--say-ubi-nac-ancho); justify-self: center; }

.say-ubi__lista {
	position: relative;
	margin: 0;
	padding: 0 0 0 var(--say-ubi-l-pad);
	list-style: none;
}
.say-ubi__lista::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	border-left: 1px solid var(--say-ubi-l-linea);
	align-self: auto;
}
.say-ubi__item { position: relative; margin: 0 0 var(--say-ubi-l-gap); outline: none; }
.say-ubi__item:last-child { margin-bottom: 0; }
.say-ubi__item::before {
	content: "";
	position: absolute;
	left: calc(-1 * var(--say-ubi-l-pad));
	top: calc(var(--say-ubi-tit-fs) * .65);
	width: var(--say-ubi-l-rombo-w);
	height: var(--say-ubi-l-rombo-h);
	background: var(--say-ubi-pin);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	transform: translate(-50%, -50%);
	transition: transform .25s ease;
}
.say-ubi__item.is-activo::before { transform: translate(-50%, -50%) scale(var(--say-ubi-zoom)); }
.say-ubi__tit { margin: 0 0 6px; font-size: var(--say-ubi-tit-fs); font-weight: 600; line-height: 1.3; color: inherit; }
.say-ubi__region { margin: 0; font-weight: 500; line-height: 1.35; }
.say-ubi__loc { margin: 0 0 2px; padding: 0 0 0 1.4em; list-style: none; font-style: italic; font-weight: 300; line-height: 1.35; }
.say-ubi__loc li::before { content: "•"; margin-right: .6em; font-style: normal; }
.say-ubi__item:focus-visible .say-ubi__tit { text-decoration: underline; }

@media (max-width: 768px) {
	.say-ubi--etiquetas .say-ubi__mapa { margin-left: 0; width: 100%; }
	.say-ubi__etqs {
		position: static;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px 20px;
		margin-top: 28px;
		pointer-events: auto;
	}
	.say-ubi__etq,
	.say-ubi__etq--izquierda,
	.say-ubi__etq--derecha {
		position: relative;
		top: auto;
		width: auto;
		height: auto;
		padding-left: 18px;
		border-top: 0;
		text-align: left;
	}
	.say-ubi__etq::before {
		content: "";
		position: absolute;
		left: 0;
		top: .15em;
		width: calc(var(--say-ubi-pin-w) * .8);
		height: calc(var(--say-ubi-pin-h) * .8);
		background: var(--say-ubi-pin);
		clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
		transition: transform .25s ease;
	}
	.say-ubi__etq.is-activo::before { transform: scale(var(--say-ubi-zoom)); }
	.say-ubi__nombre,
	.say-ubi__detalle { position: static; display: block; white-space: normal; }

	.say-ubi--lista { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
	.say-ubi--lista .say-ubi__marco { width: var(--say-ubi-nac-ancho-m); justify-self: center; }
}

/* =========================================================================
   Proceso de producción
   ========================================================================= */

.say-pro {
	--say-pro-circ: #d0cfce;       /* fondo de los círculos del esquema */
	--say-pro-ico: #303842;        /* ícono del esquema */
	--say-pro-acento: #e43d30;     /* etapa activa */
	--say-pro-ico-activo: #fff;
	--say-pro-linea: #d0cfce;      /* flechas */
	--say-pro-texto: #fff;
	--say-pro-etq: 1.65;           /* etiquetas del esquema, en % del ancho del esquema */
	--say-pro-zoom: 1.08;
	--say-pro-lista: 24%;          /* ancho de la lista vertical */
	--say-pro-gap: 4%;
	--say-pro-l-circ: 40px;
	--say-pro-l-fondo: rgba(208, 207, 206, .6);
	--say-pro-l-ico: #7f8487;
	--say-pro-l-linea: rgba(208, 207, 206, .6);
	--say-pro-l-gap: 18px;
	--say-pro-l-tit: 15px;
	--say-pro-l-baj: 12px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--say-pro-lista);
	column-gap: var(--say-pro-gap);
	align-items: center;
	color: var(--say-pro-texto);
}

/* ---- Esquema ---- */

.say-pro__esquema {
	position: relative;
	aspect-ratio: 850 / 395;
	container-type: inline-size;
}
.say-pro__flechas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.say-pro__trazo { fill: none; stroke: var(--say-pro-linea); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; }
.say-pro__punta { fill: var(--say-pro-linea); }
/* Hover de una etapa: sus flechas (entrada y salida) se vuelven a dibujar como al aparecer. */
.say-pro .say-pro__flecha.say-redibuja .say-pro__trazo { animation: say-pro-trazo var(--say-pro-redibujo, .9s) ease both; }
.say-pro .say-pro__flecha.say-redibuja .say-pro__punta { animation: say-pro-punta var(--say-pro-redibujo, .9s) ease both; }
@keyframes say-pro-trazo { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes say-pro-punta { 0%, 70% { opacity: 0; } 100% { opacity: 1; } }

.say-pro__nodo {
	position: absolute;
	left: calc(var(--x) * 1%);
	top: calc(var(--y) * 1%);
	width: 8.247%;                 /* Ø 70,1 de 850 */
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	cursor: default;
}
.say-pro .say-pro__circ {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: var(--say-pro-circ);
	color: var(--say-pro-ico);
	transition: background-color .3s ease, color .3s ease, transform .3s ease;
}
.say-pro__circ svg,
.say-pro__circ img { display: block; width: 100%; height: 100%; }
.say-pro__nodo.is-activo .say-pro__circ {
	background: var(--say-pro-acento);
	color: var(--say-pro-ico-activo);
	transform: scale(var(--say-pro-zoom));
}

.say-pro__etq {
	position: absolute;
	font-size: 14px;
	font-size: calc(var(--say-pro-etq) * 1cqi);
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1.25;
	text-transform: uppercase;
	white-space: nowrap;
	text-align: center;
}
.say-pro__nodo--arriba .say-pro__etq { bottom: calc(100% + .45em); left: 50%; transform: translateX(-50%); }
.say-pro__nodo--abajo .say-pro__etq {
	top: calc(100% + .55em);
	left: 50%;
	width: max-content;
	max-width: 9em;
	white-space: normal;
	transform: translateX(-50%);
}
.say-pro__nodo--izquierda .say-pro__etq { right: calc(100% + .45em); top: 50%; transform: translateY(-50%); }

/* ---- Lista vertical ---- */

.say-pro__lista {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}
.say-pro__lista::before {
	content: "";
	position: absolute;
	left: calc(var(--say-pro-l-circ) / 2);
	top: calc(var(--say-pro-l-circ) * -.75);
	bottom: calc(var(--say-pro-l-circ) * -.75);
	border-left: 1px solid var(--say-pro-l-linea);
	align-self: auto;
}
.say-pro__item { position: relative; margin: 0 0 var(--say-pro-l-gap); }
.say-pro__item:last-child { margin-bottom: 0; }

.say-pro .say-pro__cab {
	appearance: none;
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: left;
	text-shadow: none;
	text-transform: none;
	cursor: pointer;
}
.say-pro .say-pro__cab:focus { outline: none; }
.say-pro .say-pro__cab:focus-visible .say-pro__tit { text-decoration: underline; }
.say-pro__lista .say-pro__circ {
	position: relative;
	flex: none;
	width: var(--say-pro-l-circ);
	height: var(--say-pro-l-circ);
	background: var(--say-pro-l-fondo);
	color: var(--say-pro-l-ico);
}
.say-pro__item.is-activo .say-pro__circ { background: var(--say-pro-acento); color: var(--say-pro-ico-activo); }
.say-pro__tit {
	font-size: var(--say-pro-l-tit);
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1.25;
	text-transform: uppercase;
	opacity: .85;
	transition: opacity .3s ease;
}
.say-pro__item.is-activo .say-pro__tit { opacity: 1; }

.say-pro__bajada {
	display: grid;
	grid-template-rows: 0fr;
	padding-left: calc(var(--say-pro-l-circ) + 14px);
	transition: grid-template-rows .35s ease;
}
.say-pro__bajada > div { overflow: hidden; }
.say-pro__bajada p {
	margin: 0;
	padding-top: 6px;
	max-width: 24em;
	font-size: var(--say-pro-l-baj);
	font-weight: 400;
	line-height: 1.35;
	opacity: 0;
	transition: opacity .3s ease;
}
.say-pro__item.is-activo .say-pro__bajada { grid-template-rows: 1fr; }
.say-pro__item.is-activo .say-pro__bajada p { opacity: 1; }

@media (max-width: 1024px) {
	.say-pro { --say-pro-lista: 30%; --say-pro-l-tit: 13px; }
}
@media (max-width: 768px) {
	.say-pro { grid-template-columns: minmax(0, 1fr); }
	.say-pro__esquema { display: none; }
	.say-pro__lista::before { top: 0; bottom: 0; }
}

/* =========================================================================
   Ciclo de cultivo
   ========================================================================= */

.say-cic {
	--say-cic-meses: #e43d30;
	--say-cic-mes-txt: #fff;
	--say-cic-mes-fs: 11.5px;       /* en unidades del viewBox (anillo Ø 286) */
	--say-cic-ova: #697d89;
	--say-cic-agua: #0d2e40;
	--say-cic-engorda: #425c6a;
	--say-cic-cosecha: #e43d30;
	--say-cic-ancho: 320px;
	--say-cic-zoom: 1.1;
	/* Escala independiente de cada capa (1 = diseño) */
	--say-cic-escala-meses: 1;
	--say-cic-escala-ova: 1;
	--say-cic-escala-agua: 1;
	--say-cic-escala-engorda: 1;
	--say-cic-escala-cosecha: 1;
	color: #fff;
}
.say-cic__svg { display: block; width: 100%; max-width: var(--say-cic-ancho); height: auto; overflow: visible; }

.say-cic__capa {
	transform-box: view-box;
	transform-origin: 160px 160px; /* centro del gráfico (viewBox 0 0 320 320) */
	transform: scale(var(--s, 1));
	transition: transform .3s ease;
}
.say-cic__capa--meses { --s: var(--say-cic-escala-meses); }
.say-cic__capa--ova { --s: var(--say-cic-escala-ova); --c: var(--say-cic-ova); }
.say-cic__capa--agua { --s: var(--say-cic-escala-agua); --c: var(--say-cic-agua); }
.say-cic__capa--engorda { --s: var(--say-cic-escala-engorda); --c: var(--say-cic-engorda); }
.say-cic__capa--cosecha { --s: var(--say-cic-escala-cosecha); --c: var(--say-cic-cosecha); }
.say-cic__capa.is-activo { transform: scale(calc(var(--s, 1) * var(--say-cic-zoom))); }

.say-cic__mes { fill: none; stroke: var(--say-cic-meses); }
.say-cic__mes-txt {
	fill: var(--say-cic-mes-txt);
	font-size: var(--say-cic-mes-fs);
	font-weight: 400;
	letter-spacing: .1em;
	text-anchor: middle;
	dominant-baseline: central;
	pointer-events: none;
}
.say-cic__arco { fill: none; stroke: var(--c); stroke-linecap: butt; pointer-events: stroke; }
.say-cic__hit { fill: none; stroke: transparent; pointer-events: stroke; }

.say-cic__leyenda {
	display: grid;
	gap: 9px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	line-height: 1.3;
}
.say-cic__ley {
	display: flex;
	align-items: center;
	gap: 14px;
	width: max-content;
	max-width: 100%;
	transform-origin: left center;
	transition: transform .3s ease;
	outline: none;
	cursor: default;
}
.say-cic__ley--ova { --c: var(--say-cic-ova); }
.say-cic__ley--agua { --c: var(--say-cic-agua); }
.say-cic__ley--engorda { --c: var(--say-cic-engorda); }
.say-cic__ley--cosecha { --c: var(--say-cic-cosecha); }
.say-cic__muestra { flex: none; width: 23px; height: 13px; background: var(--c); }
.say-cic__ley.is-activo { transform: scale(var(--say-cic-zoom)); }
.say-cic__ley:focus-visible { text-decoration: underline; }
.say-cic__nota { max-width: 24em; margin: 22px 0 0; font-size: 12px; line-height: 1.3; }

/* =========================================================================
   Animación de entrada (solo si el JS agregó .say-anim; sin JS todo se ve dibujado)
   ========================================================================= */

.say-pro.say-anim .say-pro__trazo { stroke-dasharray: 1; stroke-dashoffset: 1; }
.say-pro.say-anim .say-pro__punta { opacity: 0; }
.say-pro.say-anim .say-pro__nodo { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
.say-pro.say-anim .say-pro__item { opacity: 0; transform: translateX(12px); }

.say-pro.say-anim.is-visible .say-pro__nodo {
	opacity: 1;
	transform: translate(-50%, -50%);
	transition: opacity .5s ease calc(var(--i) * .08s), transform .5s cubic-bezier(.2, .9, .3, 1.3) calc(var(--i) * .08s);
}
.say-pro.say-anim.is-visible .say-pro__trazo {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset .9s ease calc(.45s + var(--i) * .12s);
}
.say-pro.say-anim.is-visible .say-pro__punta {
	opacity: 1;
	transition: opacity .3s ease calc(1.2s + var(--i) * .12s);
}
.say-pro.say-anim.is-visible .say-pro__item {
	opacity: 1;
	transform: none;
	transition: opacity .5s ease calc(.2s + var(--i) * .07s), transform .5s ease calc(.2s + var(--i) * .07s);
}

.say-cic.say-anim .say-cic__arco { stroke-dasharray: 1; stroke-dashoffset: 1; }
.say-cic.say-anim .say-cic__capa--meses { opacity: 0; transform: scale(var(--s, 1)) rotate(-25deg); }
.say-cic.say-anim .say-cic__leyenda { opacity: 0; }
.say-cic.say-anim.is-visible .say-cic__capa--meses {
	opacity: 1;
	transform: scale(var(--s, 1));
	transition: opacity .8s ease, transform 1s cubic-bezier(.2, .8, .3, 1);
}
.say-cic.say-anim.is-visible .say-cic__arco {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1s ease calc(.5s + var(--i) * .25s);
}
.say-cic.say-anim.is-visible .say-cic__leyenda { opacity: 1; transition: opacity .6s ease 1s; }

@media (prefers-reduced-motion: reduce) {
	.say-ubi *,
	.say-pro *,
	.say-cic * { transition: none !important; animation: none !important; }
}