/*! BaseBlue — páginas interiores. Designed and developed by Luis Koepke — https://www.luiskoepke.com */

/* ==========================================================================
   PÁGINAS INTERIORES · KIT DE COMPONENTES (PAGINAS §3)

   Las páginas se montan con estas piezas y con las de `site.css` (.sec +
   data-surface, .wrap, .grid, .sec__head, .eyebrow, .display, .h2, .lead,
   .body, .caps, .btn, .link-arrow, `pbleed`, `prows` y las entradas .rv-*).
   Ninguna pieza trae su propio azul ni su propio cuerpo de letra.

   Reglas de la casa, sin excepción: una capa de fondo por sección (nada de
   tarjetas de tono sobre tono), nada de marcos ni filetes alrededor de
   imágenes, filetes solo entre líneas de texto, renders protagonistas (a
   sangre o a 10 columnas, nunca en tarjeta) y ninguna mayúscula sostenida
   fuera de `.caps`.

   Índice: pmedia · pfigure · phero · pintro · psplit · pfigures · plist ·
   psteps · pspec · pquote · pcards · pform · plegal · pnote · pstatus ·
   pflow · pscale · pteam · pline · retrato · menos movimiento. El ritmo
   entre secciones vive en site.css (RONDA4 §2.1).
   ========================================================================== */

/* `--t-page`, `--p-space`, `--p-space-s`, `--edge` y los radios viven en
   `base.css` (RONDA4 §2): el kit solo los lee. */

/* Márgenes del navegador fuera, solo dentro de las piezas. */
:where(.phero, .pintro, .psplit, .pfigures, .plist, .psteps, .pspec, .pquote, .pcards, .pform, .plegal, .pnote, .pmedia, .pflow, .pscale, .pteam)
	:where(h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
:where(.phero, .pintro, .psplit, .plist, .psteps, .pspec, .pquote, .pcards, .pform, .pnote, .pscale)
	:where(ul, ol) { padding: 0; list-style: none; }
.pmedia { margin: 0; }
/* Las listas que SON la pieza (no están dentro de ella). */
:where(.pcards, .pfigures, .plist__grid, .psteps__list, .pspec__list, .psplit__facts, .pteam) { list-style: none; margin: 0; padding: 0; }

/* ============================================================== Superficies */
/* Superficies anidadas que no son sección (la lámina de la cabecera con
   foto): los mismos colores que `.sec[data-surface]`. `--field` es el suelo
   de un campo de formulario: un control, no una tarjeta. `--tone` es el
   marcador de carga de una imagen. */

[data-surface="paper"] { --tone: var(--bb-paper-2); --field: rgba(10, 27, 43, 0.05); --field-hi: rgba(10, 27, 43, 0.08); }
[data-surface="ink"] { --tone: var(--bb-ink-2); --field: rgba(222, 227, 235, 0.07); --field-hi: rgba(222, 227, 235, 0.11); }
[data-surface="flood"] { --tone: rgba(255, 255, 255, 0.08); --field: rgba(255, 255, 255, 0.1); --field-hi: rgba(255, 255, 255, 0.16); }
.phero__stage[data-surface="ink"] { background: var(--bb-ink); color: var(--bb-pale); --muted: var(--muted-ink); --text2: var(--text2-ink); --rule: var(--rule-ink); --accent: var(--bb-sky); }

/* =================================================================== pmedia */
/* Objeto, diagrama o fotografía en columna (nunca un render: los renders
   van en `pbleed`). La caja existe antes que la foto, la foto sube dentro
   desde la base al entrar y después flota con un paralaje del 4 % como
   máximo (`site.js`). `--object` pone un objeto recortado sobre la propia
   superficie, sin caja. */

.pmedia { position: relative; }
.pmedia__frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--ratio, 4 / 3);
	border-radius: var(--r-m);
	/* Safari no siempre recorta con el radio a un hijo transformado. */
	clip-path: inset(0 round var(--r-m));
	background: var(--tone);
}
.pmedia__frame > img,
.pmedia__frame > video {
	position: absolute;
	left: 0;
	top: -2%;
	width: 100%;
	max-width: none;
	height: 104%;
	object-fit: cover;
	object-position: var(--pos, 50% 50%);
}
.pmedia--object .pmedia__frame { background: none; border-radius: 0; clip-path: none; overflow: visible; }
.pmedia--object .pmedia__frame > img { top: 0; height: 100%; object-fit: contain; }
.pmedia__cap {
	margin-top: 1.4rem;
	font-size: var(--t-small);
	font-weight: 300;
	line-height: 1.5;
	color: var(--muted);
}

.pmedia[data-reveal] .pmedia__frame {
	clip-path: inset(100% 0 0 0 round var(--r-m));
	transition: clip-path var(--dur-4) var(--ease-io);
}
.pmedia[data-reveal] .pmedia__frame > img,
.pmedia[data-reveal] .pmedia__frame > video {
	scale: 1.06;
	transform-origin: 50% 100%;
	transition: scale var(--dur-settle) var(--ease-out);
}
.pmedia[data-reveal] .pmedia__cap { opacity: 0; transition: opacity var(--dur-3) var(--ease-out) 0.3s; }
.pmedia[data-reveal].is-in .pmedia__frame { clip-path: inset(0 round var(--r-m)); }
.pmedia--object[data-reveal] .pmedia__frame { clip-path: inset(100% 0 0 0); }
.pmedia--object[data-reveal].is-in .pmedia__frame { clip-path: inset(0 0 0 0); }
.pmedia[data-reveal].is-in .pmedia__frame > img,
.pmedia[data-reveal].is-in .pmedia__frame > video { scale: 1; }
.pmedia[data-reveal].is-in .pmedia__cap { opacity: 1; }

/* =================================================================== pfigure */
/* `pmedia` con dos modificadores (PAGINAS-V2 §2): la imagen deja de vivir en
   una sola columna de texto y ocupa diez de las doce, desplazada a un lado —
   `--from-left` en las columnas 1–10, `--from-right` en las 3–12 — con su pie
   debajo, alineado al arranque de la propia imagen y no al margen de la
   retícula. Va dentro de un `.grid` de doce columnas (`.wrap > .grid`). Con
   `pmedia--object` admite una pieza recortada con transparencia (el mismo
   tratamiento que usa ATR en `how-the-fuel-cell-works/20-atr.html`) flotando
   sobre la superficie de la sección, sin caja. */
.pfigure {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gutter);
}
.pfigure.pfigure--from-left .pmedia__frame,
.pfigure.pfigure--from-left .pmedia__cap { grid-column: 1 / span 10; }
.pfigure.pfigure--from-right .pmedia__frame,
.pfigure.pfigure--from-right .pmedia__cap { grid-column: 3 / span 10; }

/* ==================================================================== phero */
/* Cabecera de página, con el mismo marcado de texto en sus dos variantes:
   --plain  título grande sobre la superficie (acción, listados, legales);
   --media  render a sangre dentro del margen de la lámina, con la miga y el
            título en su tercio inferior sobre un degradado de un 30 % como
            máximo. La entradilla, las acciones y el pie de imagen van
            debajo, sobre la superficie: sobre un render solo va el título. */

.phero__crumb { gap: 1em; }
.phero__crumb a { transition: color var(--dur-1) var(--ease-out); }
.phero__crumb a:hover { color: var(--accent); }
.phero__crumb [aria-current] { color: inherit; }
.phero__crumb .sep { opacity: 0.6; }

.phero__title {
	font-size: var(--t-page);
	font-weight: 300;
	line-height: 1.02;
	letter-spacing: -0.028em;
	text-wrap: balance;
	max-width: 16ch;
}
.phero__title em { font-style: normal; color: inherit; }
/* El título entra palabra a palabra desde un poco más abajo. */
.phero [data-words] .w {
	display: inline-block;
	opacity: 0;
	transform: translateY(0.36em);
	transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
	transition-delay: calc(var(--wi, 0) * var(--stagger-w) + 120ms);
}
.phero.is-in [data-words] .w,
.phero [data-reveal].is-in [data-words] .w { opacity: 1; transform: none; }

.phero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.6rem 3.2rem;
}
.phero__foot { margin-top: var(--p-space); row-gap: 3.2rem; align-items: start; }
.phero__lead { grid-column: 5 / span 6; }
.phero__actions { grid-column: 5 / -1; }
.phero__status { grid-column: 5 / -1; }

/* ------------------------------------------------------------- --plain */

.phero--plain {
	padding-top: calc(var(--header-h) + clamp(3.2rem, 8svh, 10rem));
	/* El hero cierra como cualquier sección: así la unión con la siguiente
	   (misma superficie o no) cae dentro del ritmo de RONDA4 §2.1. */
	padding-bottom: var(--sec-pad);
}
.phero--plain .phero__title { margin-top: clamp(2.8rem, 5svh, 5.6rem); }

/* ------------------------------------------------------------- --media */

.sec.phero--media { padding: var(--edge) var(--edge) var(--sec-pad); }
.phero__stage {
	position: relative;
	height: calc(100svh - 2 * var(--edge));
	min-height: 52rem;
	max-height: 140rem;
	border-radius: var(--r-l);
	overflow: hidden;
	clip-path: inset(0 round var(--r-l));
	isolation: isolate;
	background: var(--tone);
}
.phero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
}
.phero__bg > img,
.phero__bg > video {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 104%;
	max-width: none;
	object-fit: cover;
	object-position: var(--pos, 50% 50%);
	scale: 1.06;
	transform-origin: 50% 40%;
	transition: scale var(--dur-settle) var(--ease-out);
}
.phero__stage.is-in .phero__bg > img,
.phero__stage.is-in .phero__bg > video { scale: 1; }

/* El degradado: un 30 % (`--shade`; 46 % en los renders claros) como máximo, solo en el tercio inferior (donde vive
   el título: se mantiene entero bajo la línea base y se funde antes del
   tercio), y el mismo 30 % arriba, bajo la marca de la cabecera, que sobre
   esta lámina va sin su franja. El render conserva su color: nada de
   duotono ni filtros. La sombra del texto es local, no un velo. */
.phero__stage::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		linear-gradient(to top, rgb(14 14 14 / var(--shade)) 0%, rgb(14 14 14 / var(--shade)) 20%, rgba(14, 14, 14, 0) 33.4%),
		linear-gradient(to bottom, rgb(14 14 14 / var(--shade-top)) 0%, rgb(14 14 14 / var(--shade-top)) 5%, rgba(14, 14, 14, 0) 20%);
}
/* Arriba va la marca y «Menu» (13 px): al menos 4,5:1 sobre cualquier render. */
.phero__stage { --shade: 0.3; --shade-top: 0.46; }
.page-financing .phero__stage, .page-data-centers .phero__stage, .page-manufacturing .phero__stage { --shade: 0.46; --shade-top: 0.6; }

/* El texto se alinea con la rejilla de la PÁGINA, no con la lámina: la capa
   sobresale lo mismo que el hueco de la lámina y la `.wrap` cae exacta. */
.phero__over {
	position: absolute;
	left: calc(-1 * var(--edge));
	right: calc(-1 * var(--edge));
	bottom: 0;
	padding-bottom: clamp(4.8rem, 9svh, 10rem);
	color: #fff;
	--muted: rgba(255, 255, 255, 0.86);
	--accent: #fff;
}
.phero__over-grid { align-items: end; }
.phero--media .phero__crumb { grid-column: 1 / -1; margin-bottom: clamp(1.4rem, 2.4svh, 2.4rem); }
.phero--media .phero__title { grid-column: 1 / span 8; }
.phero--media .phero__crumb,
.phero--media .phero__title { text-shadow: 0 0 1.2em rgba(14, 14, 14, 0.34), 0 1px 2px rgba(14, 14, 14, 0.24); }
.phero--media .phero__foot { margin-top: clamp(2rem, 3.4svh, 3.2rem); padding-inline: calc(var(--margin) - var(--edge)); }
.phero__cap { grid-column: 1 / span 4; }

/* =================================================================== pintro */
/* Rótulo en las primeras columnas y la afirmación en las ocho últimas, como
   `.sec__head`; debajo, el cuerpo. Sin rótulo si el titular se explica solo. */

.pintro__grid { row-gap: var(--head-gap); align-items: start; }
.pintro__eyebrow { grid-column: 1 / span 3; padding-top: 0.9em; }
.pintro__title { grid-column: 5 / -1; }
.pintro__lead,
.pintro__body { grid-column: 5 / span 7; }
.pintro__body { display: grid; gap: 1.6rem; }
.pintro__body .link-arrow { margin-top: 0.8rem; justify-self: start; }

/* =================================================================== psplit */
/* Texto y un objeto, un diagrama o una fotografía, cara a cara. Nunca un
   render. El medio ocupa 7 de 12 columnas. `--flip` cambia los lados. */

.psplit__grid { align-items: center; row-gap: var(--p-space-s); }
.psplit__text { grid-column: 1 / span 4; display: grid; gap: 2.4rem; justify-items: start; }
.psplit__media { grid-column: 6 / -1; }
.psplit--flip .psplit__text { grid-column: 9 / -1; grid-row: 1; }
.psplit--flip .psplit__media { grid-column: 1 / span 7; grid-row: 1; }
.psplit__text .body { max-width: 46ch; }
.psplit__text .link-arrow { margin-top: 0.8rem; }
/* Datos cortos al pie del texto, en dos columnas, sin filetes. */
.psplit__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.4rem var(--gutter);
	width: 100%;
	margin-top: 1.2rem;
}
.psplit__facts dt { font-size: var(--t-small); font-weight: 400; color: var(--muted); }
.psplit__facts dd { margin: 0.6rem 0 0; font-size: var(--t-h3); font-weight: 300; line-height: 1.15; letter-spacing: -0.01em; }

/* ================================================================= pfigures */
/* De dos a tres cifras en fila, cada una con su etiqueta debajo y un filete
   encima. Sin tarjetas, sin contador y tres como mucho por página. */

.pfigures {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: var(--gutter);
	margin-top: var(--p-space);
}
.pfigures:first-child { margin-top: 0; }
.pfigures__item {
	display: grid;
	align-content: start;
	gap: 1.4rem;
	padding-top: clamp(2rem, 3.4svh, 3.2rem);
	padding-right: calc(var(--gutter) * 2);
	border-top: 1px solid var(--rule);
}
.pfigures__num { white-space: nowrap; }
.pfigures__label { max-width: 32ch; }
.pfigures__note { margin-top: var(--p-space-s); }

/* ==================================================================== plist */
/* Rasgos en columnas: título y texto, sin filetes ni cajas; la columna ya
   los separa. `--2` los pone bajo el título (columnas 5–12). El número solo
   aparece cuando el orden importa. */

.plist__grid {
	display: grid;
	grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
	column-gap: var(--gutter);
	row-gap: var(--p-space);
	margin-top: var(--p-space);
}
.plist__grid:first-child { margin-top: 0; }
.plist__item { grid-column: span 4; display: grid; align-content: start; gap: 1.2rem; padding-right: calc(var(--gutter) * 2); }
.plist__grid--2 .plist__item:nth-child(odd) { grid-column: 5 / span 4; }
.plist__grid--2 .plist__item:nth-child(even) { grid-column: 9 / span 4; }
.plist__n {
	font-size: var(--t-small);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
}
.plist__title { max-width: 18ch; }
.plist__body { max-width: 40ch; }

/* =================================================================== psteps */
/* Pasos de una secuencia real sobre un filete que se dibuja con el scroll.
   En apaisado van en fila y el filete corre por arriba; en vertical, en
   columna, con el filete a la izquierda. Cada paso se enciende cuando el
   trazo lo alcanza: la marca es el progreso, no un adorno. */

.psteps { position: relative; margin-top: var(--p-space); --mark: 0.9rem; }
.psteps:first-child { margin-top: 0; }
.psteps__rail {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(var(--mark) / 2);
	height: 1px;
	background: var(--rule);
	overflow: hidden;
}
.psteps__fill {
	position: absolute;
	inset: 0;
	background: var(--accent);
	transform: scaleX(var(--p, 0));
	transform-origin: 0 50%;
}
.psteps__list {
	position: relative;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	column-gap: var(--gutter);
}
.psteps__step {
	position: relative;
	display: grid;
	align-content: start;
	gap: 1.2rem;
	padding-top: calc(var(--mark) + clamp(2.4rem, 4svh, 4rem));
	padding-right: var(--gutter);
}
.psteps__step::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: var(--mark);
	height: var(--mark);
	background: var(--rule);
	transition: background-color var(--dur-2) var(--ease-out);
}
.psteps__step.is-on::before { background: var(--accent); }
.psteps__n {
	font-size: var(--t-small);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
	transition: color var(--dur-2) var(--ease-out);
}
.psteps__step.is-on .psteps__n { color: var(--accent); }
.psteps__title { font-size: var(--t-h3); font-weight: 400; line-height: 1.18; letter-spacing: -0.012em; text-wrap: balance; }
.psteps__body { max-width: 34ch; }

/* ==================================================================== pspec */
/* Ficha técnica: rótulo arriba y valor debajo, en columnas, sin tabla. Uno o
   dos grupos, en la columna de la afirmación (5–12). La cabecera de cada
   columna es el segundo uso permitido de `.caps`. */

.pspec { margin-top: var(--p-space); row-gap: var(--p-space-s); align-items: start; }
.pspec:first-child { margin-top: 0; }
.pspec__group { grid-column: 5 / span 4; }
.pspec__group + .pspec__group { grid-column: 9 / span 4; }
.pspec__group:only-child { grid-column: 5 / -1; }
.pspec__group:only-child .pspec__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pspec__title { margin-bottom: clamp(2.4rem, 4svh, 4rem); }
.pspec__list { display: grid; gap: clamp(2rem, 3.4svh, 3.2rem) var(--gutter); }
.pspec__row { display: grid; gap: 0.6rem; }
.pspec__row dt { font-size: var(--t-small); font-weight: 400; color: var(--muted); }
.pspec__row dd {
	margin: 0;
	font-size: var(--t-lead);
	font-weight: 300;
	line-height: 1.25;
	letter-spacing: -0.01em;
}
.pspec__note { grid-column: 5 / span 7; }

/* =================================================================== pquote */
/* Una frase clave, grande, sobre papel o tinta. Sus palabras se encienden
   con el scroll (no con el tiempo): se lee al ritmo de quien la lee. */

.pquote__grid { row-gap: clamp(2.8rem, 5svh, 5.6rem); }
.pquote__eyebrow { grid-column: 1 / -1; }
.pquote__text {
	grid-column: 1 / span 10;
	font-size: var(--t-display);
	font-weight: 300;
	line-height: 1.06;
	letter-spacing: -0.024em;
	text-wrap: balance;
}
.pquote--long .pquote__text { font-size: var(--t-h2); line-height: 1.14; letter-spacing: -0.018em; grid-column: 1 / span 9; }
.pquote__text em { font-style: normal; }
.pquote__text .w { opacity: 0.16; transition: opacity var(--dur-2) var(--ease-out); }
.pquote__text .w.is-lit { opacity: 1; }
.pquote__foot { grid-column: 5 / span 6; }
.pquote__foot.small { max-width: 60ch; }

/* =================================================================== pcards */
/* Tarjetas-enlace de texto: sin tono de fondo, un filete encima. Toda la
   tarjeta es el enlace; al pasar, el título avanza y la flecha también. */

.pcards {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: var(--gutter);
	margin-top: var(--p-space);
}
.pcards:first-child { margin-top: 0; }
.pcard {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding-top: clamp(2rem, 3.4svh, 3.2rem);
	padding-right: calc(var(--gutter) * 2);
	border-top: 1px solid var(--rule);
}
.pcard__eyebrow { font-size: var(--t-small); font-weight: 400; color: var(--muted); }
.pcard__title {
	margin-top: 1.2rem;
	font-size: var(--t-h3);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-wrap: balance;
	transition: transform var(--dur-2) var(--ease-out);
}
.pcard__body { margin-top: 1.4rem; font-size: var(--t-body); line-height: 1.6; color: var(--text2); max-width: 42ch; }
.pcard__more {
	display: inline-flex;
	align-items: center;
	gap: 0.8em;
	margin-top: auto;
	padding-top: 2.4rem;
	font-size: var(--t-small);
	font-weight: 400;
}
.pcard__more svg { width: 1.1em; height: 1.1em; flex: none; color: var(--accent); transition: transform var(--dur-2) var(--ease-out); }
@media (hover: hover) {
	.pcard:hover .pcard__title { transform: translateX(0.14em); }
	.pcard:hover .pcard__more svg { transform: translateX(0.25em); }
}
.pcard:focus-visible { outline-offset: 0.6rem; }

/* ==================================================================== pform */
/* Formulario: rótulos encima (nunca solo el marcador), campos redondeados
   sobre un suelo muy leve y sin marcos. El foco es un anillo del acento.
   El aviso (`.pform__state`) se ve siempre sin JS; con JS queda plegado
   hasta que hace falta. Los formularios conectados (`data-bb-form`) los
   gobierna `forms.js`; `pages.js` solo atiende a los del kit. */

.pform__grid { row-gap: var(--p-space); align-items: start; }
.pform__intro { grid-column: 1 / span 4; display: grid; gap: 2.4rem; padding-right: var(--gutter); }
.pform__intro .body { max-width: 40ch; }
.pform__privacy { max-width: 40ch; }
.pform__privacy a,
.pform__state a:not(.link-arrow) { color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 0.25em; transition: text-decoration-color var(--dur-1) var(--ease-out); }
.pform__privacy a:hover { text-decoration-color: currentColor; }
.pform__form { grid-column: 6 / -1; }
.pform__fields {
	display: grid;
	/* Seis pistas: medio campo = 3, un tercio = 2, entero = 6. */
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: clamp(2rem, 3.2svh, 3.2rem) var(--gutter);
}
.pform__field { grid-column: span 3; display: grid; gap: 1rem; align-content: start; }
.pform__field--third { grid-column: span 2; }
.pform__field--full { grid-column: 1 / -1; }
.pform__field label {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-size: var(--t-small);
	font-weight: 400;
	line-height: 1.3;
}
.pform__req { font-weight: 300; color: var(--muted); }
.pform__field input,
.pform__field select,
.pform__field textarea {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	margin: 0;
	padding: 1.15em 1.2em;
	border: 0;
	border-radius: var(--r-s);
	background: var(--field);
	color: inherit;
	font: inherit;
	font-size: max(1.6rem, var(--t-body));
	font-weight: 300;
	line-height: 1.3;
	transition: background-color var(--dur-1) var(--ease-out);
}
.pform__field textarea { min-height: 16rem; resize: vertical; line-height: 1.5; }
.pform__field input:hover,
.pform__field select:hover,
.pform__field textarea:hover { background: var(--field-hi); }
.pform__field input:focus-visible,
.pform__field select:focus-visible,
.pform__field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; background: var(--field-hi); }
/* Sin JS la validación es la nativa; con JS (`novalidate`) llega por `aria-invalid`.
   En los dos casos el color es el de error, no el de marca: no se confunde con el foco. */
.pform__field :user-invalid { outline: 2px solid var(--error); outline-offset: 2px; }
.pform__field input[aria-invalid="true"],
.pform__field select[aria-invalid="true"],
.pform__field textarea[aria-invalid="true"] { outline: 2px solid var(--error); outline-offset: 2px; }
.pform__select { position: relative; }
.pform__select select { padding-right: 3.6em; cursor: pointer; }
.pform__select svg {
	position: absolute;
	right: 1.3em;
	top: 50%;
	width: 1.4rem;
	height: 1.4rem;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--muted);
}
.pform__check { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 1.2rem; font-size: var(--t-small); line-height: 1.5; }
.pform__check input { flex: none; width: 2rem; height: 2rem; margin: 0.1em 0 0; accent-color: var(--accent); border-radius: 0.4rem; }
/* La casilla de consentimiento no tiene campo `.pform__field` alrededor donde apoyar
   el contorno: se pone directamente en el input, con el mismo hueco que un foco. */
.pform__check input[aria-invalid="true"] { outline: 2px solid var(--error); outline-offset: 2px; }
.pform__hint { font-size: var(--t-small); line-height: 1.45; color: var(--muted); max-width: 44ch; }
/* Texto de error (422): mismo tamaño que la ayuda normal, color de error para distinguirlo. */
.pform__hint--error { color: var(--error); }
.pform__submit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.6rem 3.2rem;
	margin-top: clamp(3.2rem, 5svh, 5.6rem);
}
.pform__submit .small { max-width: 44ch; }
.pform__submit .btn { border: 0; cursor: pointer; font-family: inherit; }
.pform__submit .btn[aria-busy="true"] { cursor: progress; }

/* El aviso: texto con un filete encima, no una tarjeta. */
.pform__state {
	display: grid;
	gap: 1.4rem;
	justify-items: start;
	margin-top: clamp(2.4rem, 4svh, 4rem);
	padding-top: clamp(2rem, 3.4svh, 3.2rem);
	border-top: 1px solid var(--rule);
}
.pform__state-title { font-size: var(--t-lead); font-weight: 300; line-height: 1.35; letter-spacing: -0.006em; max-width: 36ch; }
/* Enviado: es el final del recorrido, se lee como un titular. */
.pform__state-title[data-bb-when="sent"] { font-size: var(--t-h2); line-height: 1.15; letter-spacing: -0.02em; }
/* Al plegarse los campos la columna conserva su alto un instante y luego se recoge. */
.pform__form.is-settling { transition: min-height var(--dur-3) var(--ease-out); }
.pform__state:focus { outline: none; }
.pform__state:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* Con JS: plegado hasta el envío, y entonces sube. */
.pform__form.is-armed .pform__state { display: none; }
.pform__form.is-armed.is-sent .pform__state { display: grid; animation: pform-in var(--dur-3) var(--ease-out) both; }
@keyframes pform-in { from { opacity: 0; transform: translateY(1.2rem); } to { opacity: 1; transform: none; } }

/* =================================================================== plegal */
/* Texto largo: índice fijo a la izquierda en escritorio, columna de lectura
   a unos 68 caracteres. El índice marca la sección que se está leyendo. */

.plegal__grid { align-items: start; row-gap: var(--p-space-s); }
.plegal__toc {
	grid-column: 1 / span 3;
	position: sticky;
	top: calc(var(--header-h) + 2.4rem);
	display: grid;
	gap: 2.4rem;
}
.plegal__toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
.plegal__toc a {
	display: flex;
	gap: 1em;
	padding: 0.55em 0;
	font-size: var(--t-small);
	line-height: 1.35;
	color: var(--muted);
	transition: color var(--dur-1) var(--ease-out);
}
/* La marca dice dónde se está leyendo: tiene función, no adorna. */
.plegal__toc a::before {
	content: "";
	flex: none;
	width: 0.45em;
	height: 0.45em;
	margin-top: 0.45em;
	background: var(--accent);
	opacity: 0;
	transform: scale(0.4);
	transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.plegal__toc a:hover,
.plegal__toc a.is-current { color: inherit; }
.plegal__toc a.is-current::before { opacity: 1; transform: none; }

.plegal__body { grid-column: 5 / span 7; max-width: 70ch; }
.plegal__meta { display: grid; gap: 1.6rem; margin-bottom: var(--p-space); }
.plegal__date { font-size: var(--t-small); color: var(--muted); }
.plegal__body section { scroll-margin-top: calc(var(--header-h) + 2.4rem); }
.plegal__body section + section { margin-top: clamp(4.4rem, 8svh, 8rem); }
.plegal__body h2 {
	margin: 0 0 2rem;
	font-size: var(--t-h3);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.012em;
}
.plegal__body section p,
.plegal__body section li {
	font-size: var(--t-body);
	font-weight: 300;
	line-height: 1.65;
	color: var(--text2);
}
.plegal__body section p { margin: 0 0 1.4rem; }
.plegal__body section ul { margin: 0 0 1.4rem; padding: 0 0 0 1.2em; display: grid; gap: 0.9rem; }
.plegal__body section li::marker { color: var(--muted); }
.plegal__body a { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 0.25em; }
.plegal__body a:hover { text-decoration-color: currentColor; }

/* ==================================================================== pnote */
/* Nota pequeña: el rótulo y el texto apagado. Solo en el kit: la nota de
   borrador legal no se publica nunca. */

.pnote { display: grid; gap: 0.8rem; max-width: 64ch; }
.grid > .pnote { grid-column: 5 / span 7; }
.pnote__label { font-size: var(--t-small); font-weight: 400; color: inherit; }
.pnote__text { font-size: var(--t-small); font-weight: 300; line-height: 1.55; color: var(--muted); }

/* ================================================================== pstatus */
/* El estado del proyecto, una vez por página, en `.caps` (el marcado lleva
   las dos clases). Sin marcador delante. */

.pstatus { display: block; }

/* ==================================================================== pflow */
/* El proceso en su versión pública: cinco pasos y dos salidas, dibujados
   en SVG con texto real. La estructura va en la tinta de la superficie y
   el recorrido del flujo en el acento; al entrar, el trazo avanza en el
   sentido del proceso. Hay un dibujo apaisado y otro vertical: a cada
   ancho se ve uno (el otro no existe para el lector de pantalla). */

.pflow { margin-top: var(--p-space); }
.pflow:first-child { margin-top: 0; }
.pflow__svg { width: 100%; height: auto; overflow: visible; }
.pflow__svg--tall { display: none; }
.pflow__svg text { fill: currentColor; font-family: inherit; }
.pflow__node { font-size: 17px; font-weight: 400; }
.pflow__sub { font-size: 13.5px; font-weight: 300; fill-opacity: 0.64; }
.pflow__out { font-size: 17px; font-weight: 500; }
.pflow__dot { fill: var(--accent); }
.pflow__base { fill: none; stroke: currentColor; stroke-opacity: 0.16; stroke-width: 1; }
.pflow__line { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pflow__arrow { fill: var(--accent); }
.pflow__cap { display: grid; gap: 0.6rem; margin-top: var(--p-space-s); max-width: 64ch; }

/* El trazo avanza con el scroll (RONDA4 §2.6): `pages.js` pone `is-scrub`
   y escribe `--p` (0→1) mientras el diagrama cruza la pantalla, como
   `psteps`. Sin JS, entra una vez con `data-reveal` en `--dur-4` × 1,6. Las
   puntas y los puntos aparecen al final del trazo, no a destiempo. */
.pflow[data-reveal] .pflow__line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset calc(var(--dur-4) * 1.6) var(--ease-io); }
.pflow[data-reveal] .pflow__arrow,
.pflow[data-reveal] .pflow__dot { opacity: 0; transition: opacity var(--dur-2) var(--ease-out) calc(var(--dur-4) * 1.4); }
.pflow[data-reveal].is-in .pflow__line { stroke-dashoffset: 0; }
.pflow[data-reveal].is-in .pflow__arrow,
.pflow[data-reveal].is-in .pflow__dot { opacity: 1; }
.pflow[data-reveal].is-scrub .pflow__line { stroke-dashoffset: calc(1 - var(--p, 0)); transition: none; }
.pflow[data-reveal].is-scrub .pflow__arrow,
.pflow[data-reveal].is-scrub .pflow__dot { opacity: clamp(0, (var(--p, 0) - 0.88) * 12, 1); transition: none; }

/* =================================================================== pscale */
/* Escalas de ruido (dB) y de huella frente a la parcela (acres): barras
   horizontales de un solo color, con el valor escrito. La referencia (lo
   que no es BaseBlue) va en la tinta apagada. La longitud es `--v` (0–1). */

.pscale { margin-top: var(--p-space); row-gap: var(--p-space-s); }
.pscale:first-child { margin-top: 0; }
.pscale__group { grid-column: 5 / -1; display: grid; gap: 1.2rem; }
.pscale__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--rule); }
.pscale__title { font-size: var(--t-small); font-weight: 400; color: var(--muted); }
.pscale__row {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 2fr);
	align-items: center;
	column-gap: var(--gutter);
	padding-block: 1.2rem;
	border-top: 1px solid var(--rule);
}
.pscale__label { font-size: var(--t-small); line-height: 1.4; }
.pscale__bar { position: relative; height: 0.8rem; }
.pscale__bar::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: calc(var(--v, 0) * 100%);
	border-radius: 0.2rem;
	background: var(--accent);
	transform-origin: 0 50%;
	transition: transform var(--dur-4) var(--ease-io) calc(var(--i, 0) * var(--stagger));
}
.pscale__row--ref .pscale__bar::before { background: currentColor; opacity: 0.24; }
.pscale__value { justify-self: end; font-size: var(--t-body); font-weight: 400; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pscale__note { grid-column: 5 / span 7; }
.pscale[data-reveal] .pscale__bar::before { transform: scaleX(0); }
.pscale[data-reveal].is-in .pscale__bar::before { transform: none; }

/* ==================================================================== pteam */
/* Personas: retrato a su tamaño real como mucho (325 × 397), cuatro por
   fila en escritorio y dos en vertical, en su color. Nombre y cargo, sin
   más. */

.pteam {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 32.5rem));
	gap: var(--p-space-s) var(--gutter);
	margin-top: var(--p-space);
}
.pteam:first-child { margin-top: 0; }
.pteam__photo {
	width: 100%;
	height: auto;
	aspect-ratio: 325 / 397;
	object-fit: cover;
	border-radius: var(--r-m);
	background: var(--tone);
}
.pteam__name { margin-top: 1.4rem; font-size: var(--t-body); font-weight: 400; line-height: 1.35; }
.pteam__role { margin-top: 0.2rem; }

/* ==================================================================== pline */
/* El cambio de capítulo en una página larga, sin gastar una línea de texto en
   decirlo (PAGINAS-V2 §0.6): un filete de 1 px a todo el ancho de la retícula
   que se dibuja de 0 a 1 cuando entra la sección siguiente. Va como
   `<hr class="pline" data-reveal>` dentro de su propio `.sec` + `.wrap`, para
   heredar `--rule` de la superficie en la que aparece. Desde RONDA4 la
   unión de dos secciones iguales ya dibuja su filete sola (site.css): el
   `pline` suelto queda para cortes dentro de una misma sección. */
.pline-sec { padding-block: clamp(2.4rem, 4svh, 4.8rem); }
.pline {
	display: block;
	width: 100%;
	height: 1px;
	margin: 0;
	border: 0;
	background: var(--rule);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform var(--dur-4) var(--ease-io);
}
.pline.is-in { transform: scaleX(1); }

/* ================================================================== Retrato */

@media (orientation: portrait), (max-width: 899px) {
	.phero__lead, .phero__actions, .phero__status, .phero__cap { grid-column: 1 / -1; }
	.phero--media .phero__title { grid-column: 1 / -1; }
	.phero__stage { height: calc(88svh - 2 * var(--edge)); min-height: 48rem; }
	.phero__over { padding-bottom: clamp(3.6rem, 6svh, 6rem); }

	.pintro__eyebrow, .pintro__title, .pintro__lead, .pintro__body { grid-column: 1 / -1; padding-top: 0; }

	.psplit__text, .psplit__media,
	.psplit--flip .psplit__text, .psplit--flip .psplit__media { grid-column: 1 / -1; grid-row: auto; }
	.psplit--flip .psplit__media { order: 2; }

	.pfigures { grid-auto-flow: row; grid-template-columns: 1fr; gap: 0; }
	.pfigures__item { padding-bottom: 2.4rem; }

	/* A cuatro columnas ya no hay diez de doce que desplazar: la imagen ocupa
	   todo el ancho, como cualquier otra pieza en retrato. */
	.pfigure { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.pfigure.pfigure--from-left .pmedia__frame,
	.pfigure.pfigure--from-left .pmedia__cap,
	.pfigure.pfigure--from-right .pmedia__frame,
	.pfigure.pfigure--from-right .pmedia__cap { grid-column: 1 / -1; }

	.plist__grid { --cols: 4; }
	.plist__item,
	.plist__grid--2 .plist__item:nth-child(odd),
	.plist__grid--2 .plist__item:nth-child(even) { grid-column: 1 / -1; padding-right: 0; }

	/* Pasos en columna: el filete baja por la izquierda. */
	.psteps__rail { top: 0; bottom: 0; left: calc(var(--mark) / 2); right: auto; width: 1px; height: auto; }
	.psteps__fill { transform: scaleY(var(--p, 0)); transform-origin: 50% 0; }
	.psteps__list { grid-auto-flow: row; row-gap: clamp(3.2rem, 5svh, 4.8rem); }
	.psteps__step { padding-top: 0; padding-left: calc(var(--mark) + 2.4rem); padding-right: 0; }
	.psteps__step::before { top: 0.2em; }

	.pspec__group, .pspec__group + .pspec__group, .pspec__group:only-child, .pspec__note { grid-column: 1 / -1; }
	.pspec__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.pquote__text, .pquote--long .pquote__text, .pquote__foot { grid-column: 1 / -1; }

	.pcards { grid-auto-flow: row; grid-template-columns: 1fr; row-gap: 3.2rem; }
	.pcard { padding-right: 0; }

	.pform__intro, .pform__form { grid-column: 1 / -1; padding-right: 0; }

	.plegal__toc { grid-column: 1 / -1; position: static; }
	.plegal__body { grid-column: 1 / -1; }

	.grid > .pnote { grid-column: 1 / -1; }

	.pflow__svg--wide { display: none; }
	.pflow__svg--tall { display: block; max-width: 48rem; }

	.pscale__group, .pscale__note { grid-column: 1 / -1; }
	.pscale__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 1rem; }
	.pscale__bar { grid-column: 1 / -1; grid-row: 2; }

	.pteam { grid-template-columns: repeat(2, minmax(0, 32.5rem)); }
}

/* Tableta en vertical: las tarjetas-enlace caben de dos en dos. */
@media (orientation: portrait) and (min-width: 700px) {
	.pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
	.pteam { grid-template-columns: repeat(3, minmax(0, 32.5rem)); }
}

/* Teléfono: los campos del formulario en una sola columna. */
@media (max-width: 599px) {
	.pform__fields { grid-template-columns: 1fr; }
	.pform__field, .pform__field--third { grid-column: 1 / -1; }
}

/* Apaisado muy bajo (el móvil girado): la lámina deja de ser una pantalla
   entera — no cabría el título. */
@media (orientation: landscape) and (max-height: 520px) {
	.phero__stage { height: auto; min-height: 100svh; }
	.phero__over { position: relative; left: auto; right: auto; padding-top: calc(var(--header-h) + 4rem); }
	.phero--media .phero__over .wrap { padding-inline: calc(var(--margin) - var(--edge)); }
	.plegal__toc { position: static; }
}

/* ======================================================== Menos movimiento */

@media (prefers-reduced-motion: reduce) {
	.pmedia[data-reveal] .pmedia__frame { clip-path: inset(0 round var(--r-m)); transition: none; }
	.pmedia--object[data-reveal] .pmedia__frame { clip-path: none; }
	.pmedia[data-reveal] .pmedia__frame > img,
	.pmedia[data-reveal] .pmedia__frame > video,
	.phero__bg > img, .phero__bg > video { scale: 1; transition: none; }
	.pmedia[data-reveal] .pmedia__cap { opacity: 1; transition: none; }
	.phero [data-words] .w { opacity: 1; transform: none; transition: none; }
	.pquote__text .w { opacity: 1; transition: none; }
	.pcard__title, .pcard__more svg { transition: none; }
	.pform__form.is-armed.is-sent .pform__state { animation: none; }
	.pflow[data-reveal] .pflow__line { stroke-dashoffset: 0; transition: none; }
	.pflow[data-reveal] .pflow__arrow, .pflow[data-reveal] .pflow__dot { opacity: 1; transition: none; }
	.pscale[data-reveal] .pscale__bar::before { transform: none; transition: none; }
	.pline { transform: scaleX(1); transition: none; }
}

/* ================================================================== vpause */
/* Pausa de un vídeo de fondo en bucle (pages.js): pequeña, callada, en la
   esquina inferior derecha de su lámina. 32 px a la vista, 44 al tacto. */
.vpause {
	position: absolute;
	right: clamp(1.2rem, 1.6vw, 2.4rem);
	bottom: clamp(1.2rem, 1.6vw, 2.4rem);
	z-index: 3;
	display: grid;
	place-items: center;
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 50%;
	background: rgba(14, 14, 14, 0.42);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #fff;
	opacity: 0.8;
	transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.vpause::before { content: ""; position: absolute; inset: -0.6rem; }
.vpause:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 2px; }
.vpause:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .vpause:hover { opacity: 1; } }
/* En la película de la secuencia la esquina de abajo es del lanzador de BlueCore: arriba, bajo «Menu». */
.cb-portal .vpause { top: calc(var(--header-h) + 0.8rem); bottom: auto; right: var(--margin); }