/* ==========================================================================
   61 · PORTADA · EL PLAN VIVO DEL HERO
   --------------------------------------------------------------------------
   El hero se queda fijo mientras un Gantt en 3D recorre cuatro capítulos
   —ordenar, conectar, medir, anticipar— al ritmo del scroll. Al terminar el
   cuarto, el scroll sigue con la sección siguiente.

   Aquí solo está la maqueta: el escenario fijo, la cabecera de capítulo, el
   lienzo y los puntos. El Gantt lo dibuja main.js (initPlanHero) en un
   <canvas>, leyendo los colores de los alias de 00-tokens.css; el escenario
   (actividades y fechas) está en template-parts/home/plan.php.

   Archivo propio y no 60-home.css porque esa hoja promete contener solo
   colocación de piezas existentes. Esto es una pieza nueva, exclusiva del
   hero: por el mismo criterio que el hero (decisión 024) no entra en el kit.
   Ver la decisión 040.
   ========================================================================== */

/* ==========================================================================
   EL ESCENARIO
   --------------------------------------------------------------------------
   Algo se queda fijo con `sticky`, y su PADRE se alarga con un separador
   (::after) de la altura del recorrido del scroll:
     · ≥1024 px → fijo el hero entero, texto y Gantt juntos; se alarga la
       pista (.plan-hero__track).
     · <1024 px → el texto se lee antes con normalidad y después se fija el
       Gantt a pantalla completa; se alarga el escenario. En un móvil no
       caben las dos cosas a la vez.
   Tiene que ser el padre, y tiene que ser contenido y no padding, porque un
   elemento sticky solo se mueve dentro de la caja de contenido de su bloque
   contenedor. main.js mide cuánto de ese separador se ha recorrido y de ahí
   sale el capítulo, así que no necesita saber cuál de los dos es el fijo.

   Solo con `.js`: sin JavaScript nadie avanzaría los capítulos y el recorrido
   sería un hueco vacío. Y con un suelo de altura de ventana, por debajo del
   cual el escenario no cabe; ahí el hero no se fija y los botones de
   capítulo mueven el Gantt directamente. Son los únicos puntos de ruptura de
   ALTURA del tema (decisión 040).
   ========================================================================== */

/* Sin margen inferior: lo pone la sección de las cifras, que van justo debajo y
   forman un bloque con el hero. */
.plan-hero {
	padding-block-end: 0;
	/* `.section` declara overflow: hidden, y un ancestro con overflow hidden
	   anula `position: sticky`. `clip` no crea contenedor de scroll, y va solo
	   en horizontal para que el orbe inferior se funda con las cifras en lugar
	   de cortarse en una línea recta. */
	overflow: visible;
	overflow-x: clip;
	/* 60svh de scroll por capítulo. */
	--plan-scroll: 240svh;
	--plan-top: var(--header-h-mobile);
}

@media (min-width: 768px) {
	.plan-hero {
		--plan-top: var(--header-h);
	}
}

@media (min-width: 1024px) {
	.plan-hero__stage {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--space-5);
		align-items: center;
	}
}

/* ── Móvil y tableta: se fija el Gantt ─────────────────────────────────── */

@media (max-width: 1023px) and (min-height: 500px) {
	.js .plan-hero__stage::after {
		content: "";
		display: block;
		height: var(--plan-scroll);
	}

	.js .plan {
		position: sticky;
		inset-block-start: calc(var(--plan-top) + var(--space-2));
		height: calc(100svh - var(--plan-top) - var(--space-4));
	}
}

/* ── Escritorio: se fija el hero entero ────────────────────────────────── */

@media (min-width: 1024px) and (min-height: 540px) {
	.js .plan-hero {
		padding-block: 0;
	}

	.js .plan-hero__track::after {
		content: "";
		display: block;
		height: var(--plan-scroll);
	}

	/* La fila de la rejilla mide exactamente lo que deja la ventana, y el
	   panel no puede empujarla (min-height: 0). Sin las dos cosas, el lienzo
	   conserva su altura propia, la fila crece y los puntos de capítulo se
	   salen por debajo del hero en cuanto la ventana baja de unos 760 px. */
	.js .plan-hero__stage {
		position: sticky;
		inset-block-start: var(--plan-top);
		height: calc(100svh - var(--plan-top));
		padding-block: var(--space-4);
		grid-template-rows: minmax(0, 1fr);
	}

	.js .plan-hero .plan {
		align-self: stretch;
		min-height: 0;
	}

	/* El titular se ajusta a la altura de la ventana, no solo a su anchura:
	   el hero fijo tiene que caber entero en un portátil de 768 px de alto. */
	.js .plan-hero .hero__title {
		font-size: min(var(--fs-h1), 7svh);
	}
}

/* Compacto en dos casos: cuando la ventana es baja y cuando es estrecha, porque
   en una columna de menos de 500 px el texto ocupa más líneas. */
@media (min-width: 1024px) and (min-height: 540px) and (max-height: 760px),
	(min-width: 1024px) and (max-width: 1199px) and (min-height: 540px) {
	.js .plan-hero__stage {
		padding-block: var(--space-2);
	}

	.js .plan-hero .hero__inner > * + * {
		margin-block-start: var(--space-2);
	}

	.js .plan-hero .hero__lead {
		font-size: var(--fs-body);
	}
}

/* ==========================================================================
   EL PANEL
   ========================================================================== */

.plan {
	--plan-progress: 0;

	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: var(--space-6) 0 0;
}

@media (min-width: 1024px) {
	.plan {
		margin-block-start: 0;
	}
}

/* ── Capítulos ─────────────────────────────────────────────────────────────
   Sin JS se leen como lista. Con JS se apilan en la misma celda y solo se ve
   el activo; los demás siguen en el DOM para el lector de pantalla, que los
   recorre en orden sin que nada se anuncie al hacer scroll.
   ────────────────────────────────────────────────────────────────────────── */

.plan__chapters {
	display: grid;
	flex-shrink: 0;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.plan__chapter {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	margin: 0;
}

.js .plan__chapter {
	grid-area: 1 / 1;
	opacity: 0;
}

.js .plan__chapter.is-active {
	opacity: 1;
}

.plan__num {
	color: var(--c-accent);
	font-size: var(--fs-h2);
	font-variant-numeric: tabular-nums;
	font-weight: 400;
	line-height: 1;
}

.plan__copy {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.plan__title {
	color: var(--c-heading);
	font-size: var(--fs-h3);
	font-weight: 700;
	line-height: 1.3;
}

.plan__text {
	color: var(--c-muted);
	font-size: var(--fs-small);
	line-height: 1.6;
}

/* ── El lienzo ─────────────────────────────────────────────────────────────
   Una altura propia que encoge si la ventana no da para tanto; con el panel
   fijo, todo él —capítulo, lienzo y puntos— se centra en vertical, para que
   el título del capítulo no quede lejos del dibujo en una pantalla alta. El
   halo es el mismo verde translúcido de los orbes, para que la plataforma no
   flote sobre un negro plano.
   ────────────────────────────────────────────────────────────────────────── */

.plan__scene {
	position: relative;
	flex: 0 1 auto;
	height: 22rem;
	min-height: 0;
	background-image: radial-gradient(ellipse at 50% 55%, var(--tint-emerald-glow), transparent 70%);
}

@media (min-width: 1024px) {
	.plan__scene {
		height: 30rem;
	}
}

@media (max-width: 1023px) and (min-height: 500px) {
	.js .plan {
		justify-content: center;
	}

	.js .plan-hero .plan__scene {
		height: 24rem;
	}
}

@media (min-width: 1024px) and (min-height: 540px) {
	.js .plan-hero .plan {
		justify-content: center;
	}
}

.plan__canvas {
	display: block;
	width: 100%;
	height: 100%;
	/* El scroll vertical sigue siendo del navegador aunque el dedo empiece
	   encima del dibujo. */
	touch-action: pan-y;
}

.no-js .plan__scene {
	display: none;
}

/* ── Progreso y navegación por capítulos ───────────────────────────────── */

.plan__progress {
	position: relative;
	flex-shrink: 0;
	height: 2px;
	background-color: var(--c-border);
}

.plan__progress::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--c-accent);
	transform: scaleX(var(--plan-progress));
	transform-origin: left center;
}

/* Repartidos de extremo a extremo y no en cuatro columnas iguales: los verbos
   no miden lo mismo, y en columnas fijas el punto de uno se pega al texto del
   anterior. */
.plan__steps {
	display: flex;
	flex-shrink: 0;
	justify-content: space-between;
	gap: var(--space-2);
}

/* Sin JS no harían nada: se ocultan en lugar de quedarse como adorno. Con
   ellos se va la barra de progreso, que tampoco avanzaría. */
.no-js .plan__steps,
.no-js .plan__progress {
	display: none;
}

.plan__step {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	min-width: 0;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-muted);
	font: inherit;
	font-size: var(--fs-data);
	text-align: start;
	cursor: pointer;
}

.plan__step::before {
	content: "";
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border: 1px solid currentColor;
	border-radius: var(--radius-pill);
}

.plan__step:hover,
.plan__step[aria-current="step"] {
	color: var(--c-heading);
}

.plan__step[aria-current="step"]::before {
	border-color: var(--c-accent);
	background-color: var(--c-accent);
}

@media (min-width: 640px) {
	.plan__step {
		font-size: var(--fs-small);
	}
}

/* ==========================================================================
   MOVIMIENTO
   Dentro del guard, como manda la invariante 7. El dibujo del canvas mira la
   misma preferencia desde main.js.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.js .plan__chapter {
		transform: translateY(var(--space-1));
		transition: opacity var(--t-base), transform var(--t-base);
	}

	.js .plan__chapter.is-active {
		transform: none;
	}
}

@media (forced-colors: active) {
	.plan__progress::before {
		background-color: CanvasText;
	}
}