/*! BaseBlue — páginas interiores V3 (Projects, Technology, About). Designed and developed by Luis Koepke — https://www.luiskoepke.com */

/* ==========================================================================
   REDISEÑO V3 DE LAS PÁGINAS INTERIORES

   Se carga DESPUÉS de pages.css y pages-v2.css, y solo en Projects,
   Technology y About: nada de aquí toca request-power, team, contact ni las
   legales, que siguen con el kit tal cual. Todo lo nuevo es una pieza propia
   o un modificador (`--geo`, `--ledger`, `--meter`…), nunca una regla suelta
   sobre una clase del kit.

   Dirección: lámina técnica. Datos en monoespaciada del sistema (sin fuentes
   externas), filetes de 1 px, cifras grandes y finas, medios grandes y sin
   tarjetas. Nada de cajas redondeadas iguales en fila, degradados de adorno
   ni cristal esmerilado.

   Índice: tokens · mono · figbar · mtable · pmap--geo · pwhy · psite ·
   psteps--ledger · pfig (Technology: apertura) · pschem · pzoom · psheet ·
   pscale--meter · pindex · prole · pcase · pcrew · retrato · menos
   movimiento.
   ========================================================================== */

/* =================================================================== tokens */

:root {
	/* Alias de los tokens globales de dato (`base.css`: `--font-mono`, `--t-spec`,
	   `--track-spec`), así cada rótulo de estas páginas se lee igual que `.spec`.
	   Los valores de respaldo solo cuentan si base.css aún no los trae. */
	--mono: var(--font-mono, ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace);
	--t-mono: var(--t-spec, 1.2rem);
	--track-mono: var(--track-spec, 0.08em);
}

/* ===================================================================== mono */
/* El rótulo de dato: monoespaciada, versalitas sostenidas y algo de aire.
   Solo para datos, índices y pies técnicos; nunca para un párrafo. */
.mono {
	font-family: var(--mono);
	font-size: var(--t-mono);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: var(--track-mono);
	text-transform: none;
	font-variant-numeric: tabular-nums slashed-zero;
}

/* =================================================================== figbar */
/* La cabecera de una figura: número y título a la izquierda, contexto a la
   derecha, sobre un filete. Es lo que convierte una imagen en una lámina. */
.figbar {
	display: flex;
	justify-content: space-between;
	gap: 1.6rem;
	padding-bottom: 1.1rem;
	margin-bottom: clamp(1.2rem, 1.6vw, 2rem);
	border-bottom: 1px solid var(--rule);
	font-family: var(--mono);
	font-size: var(--t-mono);
	letter-spacing: var(--track-mono);
	text-transform: none;
	color: var(--muted);
}
.figbar > span:last-child { text-align: right; }

/* =================================================================== mtable */
/* Ficha de datos en filas: rótulo en mono a la izquierda, valor a la
   derecha, un filete por fila. Sirve para la apertura de Projects y para
   cualquier dato corto que hoy iba en columnas sueltas. */
.mtable { display: grid; margin: 0; }
.mtable__row {
	display: grid;
	grid-template-columns: minmax(9ch, 2fr) minmax(0, 5fr);
	align-items: baseline;
	gap: var(--gutter);
	padding-block: 1.1rem;
	border-top: 1px solid var(--rule);
}
.mtable__row:last-child { border-bottom: 1px solid var(--rule); }
.mtable dt {
	font-family: var(--mono);
	font-size: var(--t-mono);
	letter-spacing: var(--track-mono);
	text-transform: none;
	color: var(--muted);
}
.mtable dd { margin: 0; font-size: var(--t-body); font-weight: 400; line-height: 1.35; }
/* El único piloto encendido de la página: el estado del proyecto. */
.mtable__live {
	display: inline-block;
	width: 0.7rem;
	height: 0.7rem;
	margin-right: 0.9rem;
	border-radius: 50%;
	background: var(--accent);
	vertical-align: 0.1em;
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
	animation: mtable-live 2.4s var(--ease-out) infinite;
}
@keyframes mtable-live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 0.8rem transparent; } }

/* ================================================================ pmap--geo */
/* El mapa como lámina técnica: marco de 1 px con esquinas marcadas,
   retícula rotulada en los bordes, extensión de la cuenca en discontinuo,
   escala, norte y leyenda. Las piezas de pages-v2 (campo, pin, anillos)
   siguen igual; aquí se añade lo demás y se reajusta la ficha. */
.pmap--geo .pmap__text { gap: clamp(1.6rem, 2.6svh, 2.8rem); }
.pmap--geo .pmap__num { margin-block: 0.4rem; }
.pmap--geo .pmap__facts {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	margin: 0.8rem 0 0;
	padding-top: 0;
	border-top: 0;
	max-width: 52rem;
}
.pmap--geo .pmap__facts dt { font-size: var(--t-mono); letter-spacing: var(--track-mono); }
.pmap--geo .pmap__facts dd { margin: 0; font-size: var(--t-body); }

.pmap--geo .pmap__map {
	--c: rgba(222, 227, 235, 0.5);
	position: relative;
	padding: clamp(1.4rem, 1.6vw, 2.4rem);
	/* V5: sin marco ni esquinas de lámina: un panel suave, como la tarjeta del mapa del Home. */
	border-radius: var(--r-l);
	background: rgba(255, 255, 255, 0.035);
}
.pmap--geo .pmap__svg { margin-inline: auto; }
@media (orientation: landscape) and (min-width: 900px) {
	/* La lámina entera (cabecera, mapa y leyenda) cabe en la primera pantalla. */
	.pmap--geo .pmap__svg { max-height: max(36rem, calc(100svh - var(--header-h) - 26rem)); }
}

.pmap__grat path { fill: none; stroke: rgba(222, 227, 235, 0.09); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pmap__gl text { fill: rgba(222, 227, 235, 0.52); font-family: var(--mono); font-size: 9px; letter-spacing: var(--track-mono); }
.pmap__gl--x text { text-anchor: middle; }
.pmap__gl--y text { text-anchor: end; }

.pmap__extent {
	fill: rgba(187, 221, 255, 0.05);
	stroke: var(--bb-sky);
	stroke-width: 1;
	stroke-dasharray: 4 3;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}
/* Los rótulos llevan un halo de la tinta del fondo: se leen sobre el campo
   de puntos sin caja detrás. */
.pmap__region text,
.pmap--geo .pmap__label text {
	paint-order: stroke;
	stroke: var(--bb-ink);
	stroke-width: 4px;
	stroke-linejoin: round;
}
.pmap__region text { fill: rgba(222, 227, 235, 0.42); font-family: var(--mono); font-size: 9px; letter-spacing: 0; }
.pmap__region .pmap__state { fill: rgba(222, 227, 235, 0.3); font-family: inherit; font-size: 13px; letter-spacing: 0; }
.pmap__region .pmap__basin-name { fill: var(--bb-sky); letter-spacing: 0; }
.pmap--geo .pmap__label path { fill: none; stroke: rgba(255, 255, 255, 0.6); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pmap--geo .pmap__name { font-size: 14px; }
.pmap--geo .pmap__mw { font-family: var(--mono); font-size: 10px; letter-spacing: 0; text-transform: none; }
.pmap__scale path { fill: none; stroke: var(--bb-pale); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pmap__scale .pmap__scale-a { stroke-width: 3; }
.pmap__scale .pmap__scale-b { stroke-width: 3; stroke-opacity: 0.32; }
.pmap__scale text,
.pmap__north text { fill: rgba(222, 227, 235, 0.6); font-family: var(--mono); font-size: 9px; }
.pmap__north path { fill: var(--bb-pale); }

/* La lámina se compone por capas al entrar: retícula, extensión, rótulos. */
.pmap--geo :is(.pmap__grat, .pmap__extent, .pmap__region, .pmap__scale, .pmap__north, .pmap__label) {
	opacity: 0;
	transition: opacity var(--dur-4) var(--ease-out);
}
.pmap--geo .pmap__grat { transition-delay: 0.2s; }
.pmap--geo .pmap__extent { transition-delay: 0.9s; }
.pmap--geo :is(.pmap__region, .pmap__scale, .pmap__north) { transition-delay: 1.2s; }
.pmap--geo .pmap__label { transition-delay: 1.5s; }
.pmap--geo .is-in :is(.pmap__grat, .pmap__extent, .pmap__region, .pmap__scale, .pmap__north, .pmap__label) { opacity: 1; }

.pmap__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2.8rem;
	margin-top: clamp(1.2rem, 1.6vw, 2rem);
	padding-top: 1.1rem;
	border-top: 1px solid var(--rule);
	font-family: var(--mono);
	font-size: var(--t-mono);
	letter-spacing: var(--track-mono);
	text-transform: none;
	color: var(--muted);
}
.pmap__key { display: inline-flex; align-items: center; gap: 0.9rem; }
.pmap__key::before { content: ""; flex: none; box-sizing: border-box; }
.pmap__key--site::before { width: 1rem; height: 1rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--bb-ink), 0 0 0 3px var(--bb-sky); }
.pmap__key--extent::before { width: 1.6rem; height: 1rem; border: 1px dashed var(--bb-sky); background: rgba(187, 221, 255, 0.06); }
.pmap__key--grid::before {
	width: 1.2rem;
	height: 1.2rem;
	border: 1px solid rgba(222, 227, 235, 0.3);
	background: linear-gradient(rgba(222, 227, 235, 0.3), rgba(222, 227, 235, 0.3)) center / 1px 100% no-repeat,
		linear-gradient(rgba(222, 227, 235, 0.3), rgba(222, 227, 235, 0.3)) center / 100% 1px no-repeat;
}

/* ===================================================================== pwhy */
/* Los cuatro criterios del emplazamiento como pliego editorial: dos piezas
   anchas (3:2) y dos altas (4:5), desfasadas en altura sobre la retícula.
   Cada pieza abre con su índice en mono sobre un filete. */
.pwhy__list {
	margin: var(--block-gap) 0 0;
	padding: 0;
	list-style: none;
	row-gap: clamp(6.4rem, 9vw, 14rem);
	align-items: start;
}
.pwhy__item { display: grid; align-content: start; gap: 1.2rem; }
.pwhy__item:nth-child(1) { grid-column: 1 / span 7; }
.pwhy__item:nth-child(2) { grid-column: 9 / span 4; margin-top: clamp(8rem, 13vw, 22rem); }
.pwhy__item:nth-child(3) { grid-column: 2 / span 4; }
.pwhy__item:nth-child(4) { grid-column: 7 / span 6; margin-top: clamp(6rem, 11vw, 18rem); }
.pwhy__media {
	position: relative;
	aspect-ratio: 3 / 2;
	margin-bottom: 0.8rem;
	background: var(--tone);
}
.pwhy__item--tall .pwhy__media { aspect-ratio: 4 / 5; }
.pwhy__media > :is(img, video) {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--pos, 50% 50%);
}
.pwhy__meta {
	display: flex;
	justify-content: space-between;
	gap: 1.6rem;
	margin: 0;
	padding-top: 1.1rem;
	border-top: 1px solid var(--rule);
	color: var(--muted);
}
.pwhy__title {
	margin: 0.4rem 0 0;
	font-size: clamp(2.2rem, calc(var(--w) * 0.0194), 3.2rem);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.018em;
}
.pwhy__text { margin: 0; max-width: 40ch; color: var(--text2); }

/* ==================================================================== psite */
/* El render de la parcela a todo el ancho de la retícula, en su proporción
   exacta, con cuatro marcas numeradas sobre lo que señalan y la leyenda
   debajo. Las marcas son de tinta sólida: nada de cristal. */
.psite__fig { margin: 0; }
.psite__frame {
	position: relative;
	aspect-ratio: 1919 / 1080;
	background: var(--tone);
}
.psite__frame > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.psite__marks { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.psite__mark {
	position: absolute;
	left: var(--x);
	top: var(--y);
	display: flex;
	align-items: center;
	gap: 0;
	transform: translate(-1.2rem, -50%);
	opacity: 0;
	transition: opacity var(--dur-3) var(--ease-out);
}
.psite__mark:nth-child(1) { transition-delay: 0.6s; }
.psite__mark:nth-child(2) { transition-delay: 0.72s; }
.psite__mark:nth-child(3) { transition-delay: 0.84s; }
.psite__mark:nth-child(4) { transition-delay: 0.96s; }
.is-in .psite__mark { opacity: 1; }
.psite__n {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: var(--bb-ink);
	color: #fff;
	font-family: var(--mono);
	font-size: 1.1rem;
	letter-spacing: 0;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 0 0.7rem rgba(14, 14, 14, 0.16);
}
/* El rótulo sale de la marca por un filete corto. */
.psite__tag {
	position: relative;
	margin-left: 2.4rem;
	padding: 0.6rem 0.9rem;
	border-radius: 0.3rem;
	background: var(--bb-ink);
	color: #fff;
	font-family: var(--mono);
	font-size: var(--t-mono);
	letter-spacing: var(--track-mono);
	text-transform: none;
	white-space: nowrap;
}
.psite__tag::before {
	content: "";
	position: absolute;
	right: 100%;
	top: 50%;
	width: 2.4rem;
	height: 1px;
	background: var(--bb-ink);
}
.psite__cap {
	display: grid;
	grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
	column-gap: var(--gutter);
	row-gap: 1.6rem;
	align-items: baseline;
	margin-top: clamp(2rem, 3svh, 3.2rem);
}
.psite__title { grid-column: 1 / span 4; margin: 0; font-weight: 300; }
.psite__legend {
	grid-column: 5 / -1;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.2rem var(--gutter);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--muted);
}
.psite__legend li { display: flex; gap: 1rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.psite__legend span { color: var(--accent); }

/* =========================================================== psteps--ledger */
/* Los pasos como libro de registro: una fila por fase, el filete bajando
   por la izquierda (en columna a cualquier ancho; `pages.js` lee
   `grid-auto-flow: row` y sigue el scroll en vertical). Por fila: índice,
   titular grande, cuerpo y la imagen a la derecha. */
.psteps--ledger { margin-top: var(--block-gap); --mark: 0.9rem; --row-pad: clamp(3.2rem, 5.6svh, 6.4rem); }
.psteps--ledger .psteps__rail { top: 0; bottom: 0; left: calc(var(--mark) / 2); right: auto; width: 1px; height: auto; }
.psteps--ledger .psteps__fill { transform: scaleY(var(--p, 0)); transform-origin: 50% 0; }
.psteps--ledger .psteps__list { grid-auto-flow: row; grid-auto-columns: auto; row-gap: 0; }
.psteps--ledger .psteps__step {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gutter);
	row-gap: 1.2rem;
	align-items: start;
	padding: var(--row-pad) 0 var(--row-pad) calc(var(--mark) + clamp(2.4rem, 3vw, 4.8rem));
	border-top: 1px solid var(--rule);
}
.psteps--ledger .psteps__step:last-child { border-bottom: 1px solid var(--rule); }
.psteps--ledger .psteps__step::before { top: calc(var(--row-pad) + 0.35em); }
.psteps--ledger .psteps__n { grid-column: 1 / span 2; grid-row: 1; padding-top: 0.5em; font-size: var(--t-mono); }
.psteps--ledger .psteps__title {
	grid-column: 3 / span 3;
	grid-row: 1;
	font-size: var(--t-h2);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.022em;
}
.psteps--ledger .psteps__body { grid-column: 6 / span 3; grid-row: 1; padding-top: 0.4em; max-width: 36ch; color: var(--text2); }
.psteps--ledger .psteps__media {
	grid-column: 9 / -1;
	grid-row: 1;
	aspect-ratio: 16 / 10;
	background: rgba(255, 255, 255, 0.04);
}
.psteps--ledger .psteps__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.psteps--ledger .psteps__media--dark img { object-fit: contain; background: #000; }
/* Sin imagen (About): el cuerpo se queda con el sitio de la imagen. */
.psteps--ledger.psteps--text .psteps__title { grid-column: 3 / span 4; }
.psteps--ledger.psteps--text .psteps__body { grid-column: 7 / span 5; max-width: 56ch; }

/* ============================================================ pstage--v3 */
/* Apertura de Technology: el vídeo de la pila sale a sangre por la derecha
   (se come el margen de la página) y lleva su cabecera de figura. */
.pstage--v3 .pstage__grid { align-items: end; }
.pstage--v3 .pstage__text { grid-column: 1 / span 4; padding-bottom: 0.4rem; }
.pstage--v3 .pstage__media { grid-column: 5 / -1; margin-right: calc(-1 * var(--margin)); }
.pstage--v3 .pstage__media .figbar { margin-right: var(--margin); }
.pstage--v3 .vframe { border-radius: var(--r-m) 0 0 var(--r-m); }
.pstage--v3 .vframe.rv-img { clip-path: inset(100% 0 0 0 round var(--r-m) 0 0 var(--r-m)); }
.pstage--v3 .is-in .vframe.rv-img { clip-path: inset(0 round var(--r-m) 0 0 var(--r-m)); }

/* La cadena de escala: tres eslabones en fila, cada uno con su filete y una
   punta que apunta al siguiente. */
.pchain {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 1.2rem;
	margin: 1.2rem 0 0;
	padding: 0;
	list-style: none;
}
.pchain__step {
	position: relative;
	display: grid;
	align-content: start;
	gap: 0.4rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--rule);
}
.pchain__step::after {
	content: "";
	position: absolute;
	top: -0.4rem;
	right: 0;
	width: 0.7rem;
	height: 0.7rem;
	border-top: 1px solid var(--accent);
	border-right: 1px solid var(--accent);
	transform: rotate(45deg);
}
.pchain__step:last-child::after { display: none; }
.pchain__n { color: var(--accent); }
.pchain__k { font-size: var(--t-h3); font-weight: 300; line-height: 1.15; letter-spacing: -0.012em; }
.pchain__v { color: var(--muted); text-transform: none; letter-spacing: 0; line-height: 1.35; }

/* =================================================================== pschem */
/* El proceso como esquema de planta (ver el comentario del marcado). Hereda
   de `pflow` el trazo que avanza con el scroll; aquí, todo lo demás. */
.pschem .pflow__svg { overflow: visible; }
.pschem pattern circle { fill: rgba(222, 227, 235, 0.16); }
.pschem__cols path { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pschem__cols text,
.pschem__tag { fill: var(--muted); font-family: var(--mono); font-size: 12px; letter-spacing: 0; text-transform: none; }
.pschem__tag--hi { fill: var(--accent); }
.pschem__box { fill: rgba(255, 255, 255, 0.035); stroke: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.pschem__corner { display: none; fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.pschem text { font-family: inherit; }
.pschem .pschem__cols text, .pschem .pschem__tag { font-family: var(--mono); }
.pschem__node { fill: currentColor; font-size: 17px; font-weight: 400; }
.pschem__sub { fill: currentColor; fill-opacity: 0.64; font-size: 13.5px; font-weight: 300; }
.pschem__out { fill: currentColor; font-size: 17px; font-weight: 500; }
.pschem .pflow__line { stroke-width: 2; }
/* La corriente: un discontinuo que corre por la tubería cuando el trazo ya
   ha llegado al final (opacidad atada a `--p`, como las puntas). */
.pschem__flow path {
	fill: none;
	stroke: #fff;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 1 14;
	opacity: 0;
	animation: pschem-flow 1.4s linear infinite;
}
.pschem.is-in .pschem__flow path { opacity: 0.7; transition: opacity var(--dur-3) var(--ease-out) 1.6s; }
.pschem.is-scrub .pschem__flow path { opacity: calc(clamp(0, (var(--p, 0) - 0.95) * 20, 1) * 0.7); transition: none; }
@keyframes pschem-flow { to { stroke-dashoffset: -15; } }
.pschem image { opacity: 0; transition: opacity var(--dur-4) var(--ease-out) 0.3s; }
.pschem.is-in image { opacity: 1; }
.pschem__cap { display: grid; gap: 0.8rem; max-width: 72ch; margin-top: clamp(2rem, 3svh, 3.2rem); padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.pschem__cap .mono { color: var(--muted); }

/* ==================================================================== pzoom */
/* «Zoom on the ATR»: el vídeo del reformador a todo el ancho de la retícula
   y, debajo, las dos pruebas como cifra + rótulo + texto. */
.pzoom__fig { margin: var(--block-gap) 0 0; }
.pzoom__frame { aspect-ratio: 21 / 9; }
.pzoom__facts {
	margin: clamp(4.8rem, 8svh, 9.6rem) 0 0;
	padding: 0;
	list-style: none;
	row-gap: var(--p-space-s);
}
.pzoom__fact { display: grid; align-content: start; gap: 1.2rem; }
.pzoom__fact:nth-child(1) { grid-column: 1 / span 5; }
.pzoom__fact:nth-child(2) { grid-column: 7 / span 5; }
.pzoom__num {
	margin: 0 0 0.4rem;
	font-size: clamp(6.4rem, calc(var(--w) * 0.075), 13rem);
	font-weight: 200;
	line-height: 0.9;
	letter-spacing: -0.05em;
	color: #fff;
	font-variant-numeric: tabular-nums;
}
.pzoom__num span { margin-left: 0.4rem; font-size: 0.26em; font-weight: 400; letter-spacing: 0; color: var(--accent); vertical-align: top; }
.pzoom__label { margin: 0; padding-top: 1.1rem; border-top: 1px solid var(--rule); color: var(--accent); }
.pzoom__title { margin: 0.4rem 0 0; }
.pzoom__body { margin: 0; max-width: 46ch; color: var(--text2); }

/* =================================================================== psheet */
/* La ficha técnica como documento: tabla real con referencia, parámetro y
   valor, agrupada por mitad de planta. Los grupos abren con su letra. */
.psheet__doc { margin-top: var(--block-gap); }
.psheet__table { width: 100%; border-collapse: collapse; }
.psheet__table th, .psheet__table td { padding: 0; text-align: left; font-weight: inherit; }
.psheet__table thead th {
	padding-bottom: 1.2rem;
	font-family: var(--mono);
	font-size: var(--t-mono);
	letter-spacing: var(--track-mono);
	text-transform: none;
	color: var(--muted);
}
.psheet__table thead th:nth-child(1) { width: 12%; }
.psheet__table thead th:nth-child(2) { width: 38%; }
.psheet__table tbody tr { border-top: 1px solid var(--rule); }
.psheet__table tbody:last-child tr:last-child { border-bottom: 1px solid var(--rule); }
.psheet__table tbody td, .psheet__table tbody th { padding-block: clamp(1.4rem, 2.2svh, 2.2rem); vertical-align: baseline; }
.psheet__table tbody td:first-child { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: var(--track-mono); color: var(--muted); }
.psheet__table tbody th[scope="row"] { font-size: var(--t-body); font-weight: 400; color: var(--text2); }
.psheet__table tbody td:last-child { font-size: var(--t-h3); font-weight: 300; line-height: 1.2; letter-spacing: -0.012em; color: #fff; font-variant-numeric: tabular-nums; }
.psheet__group th {
	padding-top: clamp(3.2rem, 5svh, 5.6rem) !important;
	font-family: var(--mono);
	font-size: var(--t-mono);
	letter-spacing: var(--track-mono);
	text-transform: none;
	color: var(--accent);
}
.psheet__table tbody:first-of-type .psheet__group th { padding-top: clamp(1.6rem, 2.4svh, 2.4rem) !important; }
.psheet__group th span {
	/* V5: la letra del grupo sin caja: solo la letra, en el color de señal. */
	display: inline-block;
	margin-right: 1rem;
}
.psheet__table tbody tr.psheet__group { border-top: 0; }

/* ============================================================ pscale--meter */
/* El sonómetro: pista con una marca cada 10 dB, barras gruesas y la
   referencia ajena en trama. El eje de debajo usa las mismas columnas. */
.pscale--meter { margin-top: var(--block-gap); }
.pscale--meter .pscale__group { grid-column: 1 / -1; gap: 0; }
.pscale--meter .pscale__list { border-bottom: 0; }
.pscale--meter .pscale__row,
.pscale__axis {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) minmax(0, 2fr);
	column-gap: clamp(2rem, 2.4vw, 4rem);
	align-items: center;
}
.pscale--meter .pscale__row { padding-block: clamp(1.6rem, 2.6svh, 2.4rem); }
.pscale--meter .pscale__label { font-size: var(--t-body); }
.pscale--meter .pscale__bar {
	height: 2.4rem;
	/* Una marca cada 10 dB (12 tramos) y el suelo de la pista. */
	background:
		repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px calc(100% / 12)),
		linear-gradient(var(--rule), var(--rule)) bottom / 100% 1px no-repeat;
}
.pscale--meter .pscale__bar::before { top: 0.5rem; bottom: 0.5rem; border-radius: 0; }
.pscale--meter .pscale__row--ref .pscale__bar::before {
	opacity: 1;
	background: repeating-linear-gradient(-45deg, currentColor 0 1px, transparent 1px 6px);
	box-shadow: inset 0 0 0 1px currentColor;
}
.pscale--meter .pscale__value { font-size: var(--t-h3); font-weight: 300; letter-spacing: -0.01em; }
.pscale__axis { padding-top: 1rem; border-top: 1px solid var(--rule); color: var(--muted); }
.pscale__ticks { position: relative; height: 1.6rem; }
.pscale__ticks i { position: absolute; top: 0; font-style: normal; transform: translateX(-50%); }
.pscale__ticks i:nth-child(1) { left: 0; transform: none; }
.pscale__ticks i:nth-child(2) { left: 16.667%; }
.pscale__ticks i:nth-child(3) { left: 33.333%; }
.pscale__ticks i:nth-child(4) { left: 50%; }
.pscale__ticks i:nth-child(5) { left: 66.667%; }
.pscale__ticks i:nth-child(6) { left: 83.333%; }
.pscale__ticks i:nth-child(7) { left: 100%; transform: translateX(-100%); }

/* =================================================================== pindex */
/* Índice numerado en dos columnas: cifra grande y fina en el acento sobre
   un filete, titular y texto. Sin cajas ni iconos. */
.pindex {
	margin: var(--block-gap) 0 0;
	padding: 0;
	list-style: none;
	row-gap: clamp(4.8rem, 7svh, 8rem);
}
.pindex__item {
	grid-column: span 6;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
	column-gap: var(--gutter);
	row-gap: 1.2rem;
	align-content: start;
	padding-top: clamp(2rem, 3svh, 3.2rem);
	border-top: 1px solid var(--rule);
}
.pindex__n {
	grid-row: 1 / span 2;
	font-size: clamp(4.4rem, calc(var(--w) * 0.05), 8rem);
	font-weight: 200;
	line-height: 0.85;
	letter-spacing: -0.04em;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
}
.pindex__title { margin: 0; }
.pindex__body { margin: 0; max-width: 42ch; color: var(--text2); }

/* ==================================================================== prole */
/* Los papeles de HDF Energy como tabla de capacidades: una fila por papel,
   índice mono, papel grande y su alcance, filete entre filas. */
.prole { margin: var(--block-gap) 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--rule); }
.prole__row {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gutter);
	align-items: baseline;
	padding-block: clamp(2.4rem, 4svh, 4rem);
	border-top: 1px solid var(--rule);
}
.prole__n { grid-column: 1 / span 1; color: var(--accent); }
.prole__title {
	grid-column: 2 / span 5;
	margin: 0;
	font-size: var(--t-h2);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.022em;
}
.prole__body { grid-column: 8 / span 5; margin: 0; max-width: 48ch; color: var(--text2); }

/* ==================================================================== pcase */
/* La referencia en servicio como ficha de caso: la cifra a la izquierda,
   el caso y su ficha en mono a la derecha. */
.pcase { margin-top: var(--block-gap); row-gap: 2.4rem; align-items: start; }
.pcase__bar { grid-column: 1 / -1; margin-bottom: 0; }
.pcase__num {
	grid-column: 1 / span 5;
	margin: 0;
	font-size: clamp(9rem, calc(var(--w) * 0.12), 22rem);
	font-weight: 200;
	line-height: 0.82;
	letter-spacing: -0.06em;
	color: #fff;
}
.pcase__num span { margin-left: 0.8rem; font-size: 0.2em; font-weight: 400; letter-spacing: 0; color: var(--accent); vertical-align: top; }
.pcase__text { grid-column: 7 / -1; display: grid; gap: 1.6rem; }
.pcase__title { margin: 0; font-size: var(--t-h2); font-weight: 300; line-height: 1.08; letter-spacing: -0.02em; }
.pcase__body { margin: 0; max-width: 52ch; color: var(--text2); }
.pcase__facts { margin-top: 0.8rem; }

/* Índice de tres (las otras pruebas del historial). */
.pindex--3 .pindex__item { grid-column: span 4; grid-template-columns: minmax(0, 1fr); }
.pindex--3 .pindex__n { grid-row: auto; font-size: clamp(3.2rem, calc(var(--w) * 0.03), 4.8rem); }

/* ==================================================================== pcrew */
/* Las seis personas en una tira: retrato en su color, nombre y área en mono. */
.pcrew {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 3.2rem var(--gutter);
	margin: var(--block-gap) 0 0;
	padding: 0;
	list-style: none;
}
.pcrew__p { display: grid; align-content: start; gap: 0.6rem; }
.pcrew__p img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-m); background: var(--tone); margin-bottom: 0.8rem; }
.pcrew__name { margin: 0; font-size: var(--t-body); font-weight: 400; line-height: 1.3; }
.pcrew__role { margin: 0; color: var(--muted); }

/* ================================================================== Retrato */
/* Retrato o menos de 900 px: la retícula pasa a cuatro columnas (site.css). */
@media (orientation: portrait), (max-width: 899px) {
	.pmap--geo .pmap__map { margin-inline: 0; padding: 1.2rem; }
	.pmap__gl text, .pmap__region text, .pmap__scale text, .pmap__north text { font-size: 12px; }
	.pmap__region .pmap__state { font-size: 15px; }
	.pmap--geo .pmap__name { font-size: 17px; }
	.pmap--geo .pmap__mw { font-size: 13px; }
	.pmap__legend { gap: 0.8rem 2rem; }

	.pwhy__item:nth-child(n) { grid-column: 1 / -1; margin-top: 0; }
	.pwhy__item--tall .pwhy__media { aspect-ratio: 4 / 3; }

	.psite__tag { display: none; }
	.psite__mark { transform: translate(-50%, -50%); }
	.psite__n { width: 2.2rem; height: 2.2rem; }
	.psite__title, .psite__legend { grid-column: 1 / -1; }
	.psite__legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.psteps--ledger .psteps__step { grid-template-columns: minmax(0, 1fr); padding-left: calc(var(--mark) + 2rem); }
	.psteps--ledger .psteps__step > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
	.psteps--ledger .psteps__n { padding-top: 0; }
	.psteps--ledger .psteps__step::before { top: calc(var(--row-pad) + 0.2em); }
	.psteps--ledger .psteps__media { margin-top: 0.8rem; }

	.pstage--v3 .pstage__text, .pstage--v3 .pstage__media { grid-column: 1 / -1; }
	.pstage--v3 .pstage__media { margin-right: calc(-1 * var(--margin)); }
	.pchain { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.pchain__step { grid-template-columns: 3.2rem minmax(0, 7rem) minmax(0, 1fr); align-items: baseline; padding-block: 1.1rem; }
	.pchain__step:last-child { border-bottom: 1px solid var(--rule); }
	.pchain__step::after { display: none; }
	.pchain__k { font-size: var(--t-body); font-weight: 400; }

	.pschem .figbar > span:last-child { display: none; }
	.pschem__node, .pschem__out { font-size: 18px; }
	.pschem__sub { font-size: 14px; }
	.pschem__tag { font-size: 13px; }

	.pzoom__frame { aspect-ratio: 16 / 10; }
	.pzoom__fact:nth-child(n) { grid-column: 1 / -1; }

	.psheet__table thead th:nth-child(1) { width: 18%; }
	.psheet__table thead th:nth-child(2) { width: 42%; }
	.psheet__table tbody td:last-child { font-size: var(--t-body); font-weight: 400; }

	.pscale--meter .pscale__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 1.2rem; }
	.pscale--meter .pscale__bar { grid-column: 1 / -1; grid-row: 2; }
	.pscale__axis { grid-template-columns: minmax(0, 1fr); }
	.pscale__axis > span:not(.pscale__ticks) { display: none; }

	.pindex__item, .pindex--3 .pindex__item { grid-column: 1 / -1; }

	.prole__row { grid-template-columns: 3.6rem minmax(0, 1fr); row-gap: 1.2rem; }
	.prole__n { grid-column: 1; }
	.prole__title { grid-column: 2; }
	.prole__body { grid-column: 2; }

	.pcase__num, .pcase__text { grid-column: 1 / -1; }

	.pcrew { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (orientation: portrait) and (min-width: 700px) {
	.pcrew { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Teléfono: el mapa se dibuja a ~0,55 de su viewBox, así que los 12 px de
   arriba quedaban en ~6 px reales. Fuera los grados de la retícula (la
   leyenda ya dice «Graticule 2°») y el rótulo del proyecto, que es lo que
   hay que leer, sube a ~13 / 9,5 px reales. Las regiones, a ~8 px. */
@media (max-width: 599px) {
	.pmap--geo .pmap__gl { display: none; }
	.pmap__region text, .pmap__scale text, .pmap__north text { font-size: 15px; }
	.pmap__region .pmap__state { font-size: 18px; }
	.pmap--geo .pmap__name { font-size: 24px; }
	.pmap--geo .pmap__mw { font-size: 17px; }
	/* A este cuerpo el golfo se salía por la derecha: se recoge hacia dentro. */
	.pmap__region .pmap__gulf { transform: translateX(-34px); }
}
/* Tableta en vertical: los dos criterios altos, a medias. */
@media (orientation: portrait) and (min-width: 700px) {
	.pwhy__item:nth-child(2) { grid-column: 1 / span 2; }
	.pwhy__item:nth-child(3) { grid-column: 3 / span 2; margin-top: 8rem; }
	.pwhy__item--tall .pwhy__media { aspect-ratio: 4 / 5; }
}
/* Apaisado estrecho (portátil pequeño, tableta girada): la retícula aún es de
   doce, pero los rótulos de la parcela ya no caben enteros. */
@media (orientation: landscape) and (min-width: 900px) and (max-width: 1199px) {
	.psite__tag { font-size: 1.1rem; padding: 0.4rem 0.6rem; }
}

/* ======================================================== Menos movimiento */
@media (prefers-reduced-motion: reduce) {
	.mtable__live { animation: none; }
	.pmap--geo :is(.pmap__grat, .pmap__extent, .pmap__region, .pmap__scale, .pmap__north, .pmap__label),
	.psite__mark { opacity: 1; transition: none; }
	.pschem__flow path { animation: none; opacity: 0 !important; }
	.pschem image { opacity: 1; transition: none; }
}

/* ================================================================= pinside */
/* Clips (oct. 2026): dentro del reformador, dos planos lado a lado bajo el
   vídeo del ATR. Pie corto: el nombre de la pieza en tinta plena y una frase. */
.pinside {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gutter);
	margin-top: var(--gutter);
}
.pinside__item { margin: 0; }
.pinside__frame { aspect-ratio: 16 / 9; }
.pinside__cap { margin-top: 1.2rem; font-size: var(--t-small, 1.5rem); line-height: 1.5; color: var(--muted); }
.pinside__cap span { margin-right: 0.6rem; color: var(--bb-pale); }
@media (orientation: portrait), (max-width: 899px) {
	.pinside { grid-template-columns: minmax(0, 1fr); row-gap: 2.4rem; }
}

/* ===================================================================== pf2 */
/* V5 · El proceso, limpio (cliente): los dos equipos, cuatro tuberías finas y
   partículas que corren en el sentido del flujo, un color por corriente:
   gas y agua (pálido), hidrógeno (cielo), electricidad (blanco), CO₂ (gris). */
.pf2 { margin: var(--p-space) 0 0; }
.pf2__svg { display: block; width: 100%; height: auto; overflow: visible; }
.pf2__svg--tall { display: none; max-width: 42rem; margin-inline: auto; }
.pf2__svg text { fill: currentColor; font-family: inherit; }
.pf2__node { font-size: 22px; font-weight: 400; letter-spacing: -0.01em; }
.pf2__out { font-size: 22px; font-weight: 500; }
.pf2__label { font-size: 16px; font-weight: 400; fill-opacity: 0.86; }
.pf2__label--h2 { fill: var(--bb-sky) !important; }
.pf2__label--co2 { fill-opacity: 0.6; }
.pf2__sub { font-size: 14px; font-weight: 300; fill-opacity: 0.56; }
/* Los renders tienen fondo negro: se funden con la tinta. */
.pf2__img { mix-blend-mode: lighten; }
.pf2__pipe { fill: none; stroke: rgba(222, 227, 235, 0.16); stroke-width: 1.5; stroke-linecap: round; }
.pf2__pipe--h2 { stroke: rgba(187, 221, 255, 0.3); }
.pf2__pipe--pow { stroke: rgba(255, 255, 255, 0.3); }
.pf2__p { filter: drop-shadow(0 0 4px currentColor); }
.pf2__p--feed { fill: #dee3eb; color: rgba(222, 227, 235, 0.6); }
.pf2__p--h2 { fill: var(--bb-sky); color: #4d9cff; }
.pf2__p--pow { fill: #fff; color: rgba(255, 255, 255, 0.9); }
.pf2__p--co2 { fill: #8b94a3; color: transparent; }
.pf2__cap { margin-top: var(--p-space-s, 3.2rem); max-width: 60ch; font-size: var(--t-small, 1.5rem); color: var(--muted); }
/* Entrada: las tuberías aparecen y luego empieza el flujo. */
.pf2[data-reveal] .pf2__flow { opacity: 0; transition: opacity 0.8s var(--ease-out) 0.6s; }
.pf2[data-reveal].is-in .pf2__flow { opacity: 1; }
@media (orientation: portrait), (max-width: 899px) {
	.pf2__svg--wide { display: none; }
	.pf2__svg--tall { display: block; }
	.pf2__node, .pf2__out { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .pf2__flow { display: none; } }

/* ================================================================== pblock */
/* El bloque por dentro: pista de 420 svh con el lienzo fijado a pantalla
   completa y los cuatro textos relevándose abajo a la izquierda. */
.pblock { padding: 0; }
.pblock__still { display: block; width: 100%; height: auto; }
.pblock__canvas { display: none; }
.pblock__steps { display: grid; gap: var(--block-gap); margin: 0; padding: 0; list-style: none; }
.pblock__title { margin: 0.8rem 0 0; font-size: var(--t-h2); font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.pblock__body { margin-top: 1.2rem; max-width: 40ch; color: var(--text2); }
.pblock__copy { padding-block: var(--sec-pad); }

.pblock.is-live .pblock__track { height: 420svh; }
.pblock.is-live .pblock__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.pblock.is-live .pblock__still { display: none; }
.pblock.is-live .pblock__canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.pblock.is-live .pblock__copy { position: absolute; left: 0; right: 0; bottom: 0; padding-block: 0 clamp(4rem, 8svh, 8rem); pointer-events: none; }
.pblock.is-live .pblock__steps { display: block; position: relative; min-height: 18rem; }
.pblock.is-live .pblock__step {
	position: absolute;
	left: 0;
	bottom: 0;
	max-width: 44rem;
	opacity: 0;
	transform: translateY(1.6rem);
	transition: opacity 0.6s var(--ease-out), transform 0.8s var(--ease-out);
}
.pblock.is-live .pblock__step.is-on { opacity: 1; transform: none; }
/* Velo abajo a la izquierda para que el texto se lea sobre el render. */
.pblock.is-live .pblock__stage::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 45%;
	background: linear-gradient(0deg, rgba(14, 14, 14, 0.85), rgba(14, 14, 14, 0));
	pointer-events: none;
}
.pblock.is-live .pblock__copy { z-index: 1; }
@media (orientation: portrait), (max-width: 899px) {
	.pblock.is-live .pblock__steps { min-height: 22rem; }
	.pblock__title { font-size: clamp(2.6rem, 7vw, 3.6rem); }
}

/* =================================================================== prefs */
/* Referencias en servicio (Figma 1102): dos fichas con foto vertical. */
.prefs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter) clamp(2.4rem, 4vw, 6.4rem); margin: var(--block-gap) 0 0; padding: 0; list-style: none; }
.prefs__media { overflow: hidden; aspect-ratio: 4 / 5; margin-bottom: 2rem; border-radius: var(--r-media); background: rgba(255, 255, 255, 0.04); }
.prefs__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.prefs__title { margin: 0.8rem 0 0; }
.prefs__body { margin-top: 1rem; max-width: 44ch; color: var(--text2); }
@media (max-width: 699px) { .prefs { grid-template-columns: minmax(0, 1fr); row-gap: 4.8rem; } }
/* Cifras del concepto (Figma 1098) bajo cada corriente. */
.pf2__val { font-size: 15px; font-weight: 400; fill-opacity: 0.72; font-variant-numeric: tabular-nums; }
.pf2__val--h2 { fill: var(--bb-sky) !important; fill-opacity: 0.9; }

/* ==================================================================== psus */
/* Huella y emisiones (Figma 1105), tres cifras bajo el medidor de ruido. */
.psus { margin: var(--block-gap) 0 0; padding: 0; list-style: none; row-gap: 3.2rem; }
.psus__item { grid-column: span 4; }
.psus__num { margin: 0; font-size: var(--t-num, 5.6rem); font-weight: 300; line-height: 1; letter-spacing: -0.03em; }
.psus__num span { margin-left: 0.6rem; font-size: 0.32em; color: var(--muted); letter-spacing: 0; }
.psus__text { margin-top: 1rem; max-width: 28ch; color: var(--text2); }
@media (orientation: portrait), (max-width: 899px) { .psus__item { grid-column: 1 / -1; } }

/* ==================================================================== pcmp */
/* Gas frente a fuel cells (Figma 1096): tabla sobria, la columna propia en tinta plena. */
.pcmp { margin-top: var(--block-gap); overflow-x: auto; }
.pcmp__table { width: 100%; border-collapse: collapse; font-size: var(--t-body); }
.pcmp__table th, .pcmp__table td { padding: 1.6rem 2.4rem 1.6rem 0; text-align: left; vertical-align: top; font-weight: 400; }
.pcmp__table thead th { padding-bottom: 2rem; color: var(--muted); font-size: var(--t-small, 1.5rem); }
.pcmp__table tbody th { width: 22%; color: var(--muted); }
.pcmp__table tbody td { color: var(--text2); width: 39%; }
.pcmp__table tbody td:last-child { color: inherit; }
.pcmp__table thead th:last-child { color: var(--bb-sky); }
@media (max-width: 699px) {
	.pcmp__table, .pcmp__table tbody, .pcmp__table tr, .pcmp__table th, .pcmp__table td { display: block; width: auto; }
	.pcmp__table thead { display: none; }
	.pcmp__table tr { padding-block: 1.6rem; }
	.pcmp__table tbody th, .pcmp__table td { padding: 0.3rem 0; }
	.pcmp__table td::before { display: block; font-size: 1.3rem; color: var(--muted); }
	.pcmp__table td:nth-of-type(1)::before { content: "Gas turbines"; }
	.pcmp__table td:nth-of-type(2)::before { content: "BaseBlue fuel cells"; color: var(--bb-sky); }
}
/* Socios de cada referencia (Figma 1102): logotipos en blanco, alineados a una
   altura óptica común; los que son emblema (UE, FCH, CNRS) un poco más altos. */
.prefs__with { margin: 2.4rem 0 1.2rem; font-size: var(--t-small, 1.5rem); color: var(--muted); }
.prefs__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem 2.8rem; margin: 0; padding: 0; list-style: none; }
.prefs__logo { display: block; height: 2.2rem; width: auto; max-width: 12rem; filter: brightness(0) invert(1); opacity: 0.82; transition: opacity var(--dur-1, 0.2s); }
.prefs__logo:hover { opacity: 1; }
.prefs__logo--eu, .prefs__logo--fch, .prefs__logo--cnrs { height: 3.4rem; }
.prefs__logo--sara, .prefs__logo--la-banque-postale { height: 3rem; }
.prefs__logo--bnp-paribas, .prefs__logo--meridiam, .prefs__logo--siemens-energy, .prefs__logo--afd { height: 2.8rem; }
[data-surface="paper"] .prefs__logo { filter: brightness(0); opacity: 0.7; }