/*! BaseBlue — V5 limpio. Designed and developed by Luis Koepke — https://www.luiskoepke.com */

/* ==========================================================================
   V5 · LIMPIO (cliente, oct. 2026)

   «La página se debe sentir limpia.» Esta hoja carga la última en todas las
   páginas y solo resta: fuera los filetes divisorios, los guiones de los
   rótulos, el aparato del mapa y la mitad del pie. Los números ya salieron
   del HTML (BASEBLUE-tools/clean_html.py). `:root` delante de cada regla
   para ganar a las hojas de sección sin `!important`.
   ========================================================================== */

/* ------------------------------------------------------------ Hero (Safari)
   El vídeo vivía en una capa con z-index negativo; Safari lo compone por
   encima del texto que no tiene capa propia y el titular «desaparecía»
   (quedaban solo el botón y los datos, que sí tienen capa). Ahora el fondo
   está en 0 y el contenido en una capa propia encima. */
:root .hero__bg { z-index: 0; }
:root .hero__inner { position: relative; z-index: 1; transform: translateZ(0); }
:root .hero__tag { z-index: 2; }

/* ------------------------------------------------------------ Filetes fuera */
:root .sec:where(main > [data-surface="paper"] + [data-surface="paper"], main > [data-surface="ink"] + [data-surface="ink"])::before { content: none; }
:root .idx > span:first-child::after { content: none; display: none; }
:root .idx { gap: 1.2rem; }
:root .hero__facts,
:root .datum,
:root .data,
:root .kv,
:root .mtable__row,
:root .mtable,
:root .pwhy__meta,
:root .psteps__step,
:root .pchain__step,
:root .pzoom__label,
:root .psheet__table tr,
:root .psheet__table td,
:root .psheet__table th,
:root .pscale__row,
:root .pscale__axis,
:root .pindex__item,
:root .prole,
:root .prole__row,
:root .team__role,
:root .menu__list,
:root .menu__item,
:root .pmap__legend,
:root .pflow__cap { border-top: 0; border-bottom: 0; }
:root .menu__rule { display: none; }
:root .hero__fact:nth-child(n + 3) { border-top: 0; }
:root .hero__facts { padding-top: 0; }
:root .adv__card { border: 0; }
:root .pscale__ticks, :root .pscale__axis { display: none; }
/* Las filas siguen separadas, por aire en vez de por línea. */
:root .datum, :root .mtable__row, :root .psheet__table tr { padding-block: 0.6rem; }

/* ------------------------------------------------------- Mapa minimalista
   Cliente: «muchas líneas y muchas cosas». Queda Texas en puntos, el halo
   azul sobre la Cuenca Pérmica, el punto y una sola etiqueta. Fuera la
   retícula, los grados, el norte, la escala, la leyenda, el contorno
   discontinuo, los estados vecinos y el marco. */
:root .pmap__grat,
:root .pmap__gl,
:root .pmap__north,
:root .pmap__scale,
:root .pmap__legend,
:root .pmap__extent,
:root .pmap__region { display: none; }
:root .pmap--geo .pmap__map,
:root .pmap__map { padding: 0; border: 0; border-radius: 0; background: none; }

/* --------------------------------------------------------------------- Pie */
:root .foot__ask { margin-bottom: clamp(6.4rem, 10svh, 12rem); }
:root .foot__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 2.4rem 4rem;
	margin-bottom: clamp(4.8rem, 8svh, 9.6rem);
}
:root .foot__row .foot__list { display: flex; flex-wrap: wrap; gap: 1.2rem clamp(2.4rem, 3vw, 4.8rem); margin: 0; padding: 0; list-style: none; }
:root .foot__row .foot__link { font-size: clamp(1.8rem, calc(var(--w, 100vw) * 0.0139), 2.4rem); }
:root .foot__legal { border-top: 0; padding-top: clamp(2.4rem, 4svh, 4rem); }
@media (max-width: 599px) {
	:root .foot__row { flex-direction: column; align-items: flex-start; }
	:root .foot__row .foot__list { flex-direction: column; gap: 1rem; }
}

/* ------------------------------------------- Vídeos negros sobre la tinta
   Los clips de la película tienen fondo negro puro (#000) y la tinta del
   sitio es #0e0e0e: se leía la caja del vídeo. Con `lighten` cada píxel
   negro toma el color del fondo que tiene detrás y lo claro queda igual.
   El marco pinta la tinta (el reveal crea un grupo aislado: el fondo debe
   estar dentro de él). El hero y las pistas fijadas quedan fuera: tienen
   póster debajo o su propia superficie. */
:root [data-surface="ink"] video { mix-blend-mode: lighten; }
:root [data-surface="ink"] :is(.vframe, .pbleed__frame, .process__media, .fuel__stage, .fuel__bleed, .fuel__frame, .pinside__frame, .pstage__media, .pzoom__frame):has(video) { background-color: var(--bb-ink); }
:root [data-surface="ink"] :is(.hero__video, .card__video, .cb-portal__video, [data-phero-video]) { mix-blend-mode: normal; }

/* Let's talk: en la propia página de contacto el botón de la cabecera sobra. */
:root .page-contact .hdr__cta { visibility: hidden; }
:root .phero__mail { grid-column: 5 / -1; margin-top: 1.6rem; }
@media (orientation: portrait), (max-width: 899px) { :root .phero__mail { grid-column: 1 / -1; } }
:root .phero__mail .link-arrow { font-size: var(--t-lead, 2rem); }
/* El bloque fijado nunca se solapa con la sección de después (el «join» del sitio la subía). */
:root .pblock + .sec { margin-top: 0; }

/* El bloque por dentro, ahora en vídeo con el scroll (pages/block.js). */
:root .pblock__video { display: none; }
:root .pblock.is-live .pblock__video { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--bb-ink); mix-blend-mode: normal; }
:root .pblock.is-live .pblock__still { display: none; }

/* Mapa de Project: cada punto es un círculo (pages/pmap.js los agranda bajo el
   cursor); el color pasa de trazo a relleno y el tamaño baja (cliente). */
:root .pmap__band { fill: var(--bb-pale); stroke: none; }
:root .pmap__band[style*="--b:0"], :root .pmap__band[style*="--b:1"] { fill: var(--bb-sky); stroke: none; }
:root .pmap__band circle { transition: r 0.35s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { :root .pmap__band circle { transition: none; } }

/* Project · el vídeo final (cliente: «todo muy pegado»). El texto va sobre la
   imagen, bajo el titular; sin pie ni botón repetido (el pie ya pide hablar). */
:root .pend { padding-bottom: var(--edge, 1.2rem); }
:root .pend__lead { grid-column: 1 / span 6; margin: clamp(1.6rem, 2.4svh, 2.4rem) 0 0; max-width: 44ch; color: rgba(255, 255, 255, 0.88); text-shadow: 0 1px 12px rgba(14, 14, 14, 0.35); }
@media (orientation: portrait), (max-width: 899px) { :root .pend__lead { grid-column: 1 / -1; } }
/* En el cierre el título no se desvanece al hacer scroll (sí en las cabeceras de arriba). */
:root .pend .phero__over, :root .pend .phero__over * { opacity: 1 !important; }

/* Cabeceras con vídeo (About, Careers, Solutions…): la franja bajo la imagen se
   veía pequeña y desordenada (cliente). Fuera el pie de foto; la entradilla
   grande de 1 a 7 y las acciones a la derecha, con aire. */
:root .phero--media .phero__cap { display: none; }
:root .phero--media .phero__foot {
	align-items: end;
	row-gap: 3.2rem;
	margin-top: 0;
	padding-block: clamp(5.6rem, 9svh, 10.4rem) clamp(4rem, 6svh, 7.2rem);
}
:root .phero--media .phero__lead {
	grid-column: 1 / span 7;
	max-width: 30ch;
	font-size: clamp(2.2rem, 1.4rem + 1.1vw, 3.4rem);
	font-weight: 300;
	line-height: 1.28;
	letter-spacing: -0.012em;
	text-wrap: balance;
}
:root .phero--media .phero__status { grid-column: 1 / span 7; }
:root .phero--media .phero__actions { grid-column: 9 / -1; justify-self: end; margin: 0; }
@media (orientation: portrait), (max-width: 899px) {
	:root .phero--media .phero__lead, :root .phero--media .phero__actions { grid-column: 1 / -1; justify-self: start; }
}

/* Cabecera (cliente): el logotipo había quedado pequeño y todo pegado arriba.
   Vuelven la altura y el ancho de marca originales. */
:root { --header-h: clamp(7.2rem, 10svh, 9.6rem); --logo-w: clamp(13rem, calc(var(--w, 100vw) * 0.115), 17.6rem); }
@media (orientation: portrait), (max-width: 899px) { :root { --header-h: clamp(6.4rem, 9svh, 7.6rem); --logo-w: clamp(12rem, 34vw, 14rem); } }

/* Comparación gas / fuel cells en móvil (cliente): las celdas heredaban el ancho de
   escritorio (22 % y 39 %) y el texto quedaba en una columna estrecha. Cada fila es
   una ficha: el tema arriba y las dos alternativas lado a lado, a todo el ancho. */
@media (max-width: 699px) {
	.pcmp__table tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem 2rem; padding-block: 2.4rem; }
	.pcmp__table tbody tr + tr { padding-top: 0.8rem; }
	.pcmp__table tbody th, .pcmp__table tbody td { width: auto; padding: 0; }
	.pcmp__table tbody th { grid-column: 1 / -1; color: inherit; font-size: var(--t-h3, 2rem); line-height: 1.2; margin-bottom: 0.4rem; }
	.pcmp__table tbody td { font-size: 1.5rem; line-height: 1.45; }
	.pcmp__table td::before { margin-bottom: 0.4rem; font-size: 1.2rem; }
}

/* Móvil (cliente): sin los números de índice, estas filas reservaban todavía su
   columna y el título caía en una de 3 rem, encima de su texto. Ahora: título y
   texto en dos columnas reales (cadena), o uno debajo del otro (índice, roles). */
@media (orientation: portrait), (max-width: 899px) {
	.pchain__step { grid-template-columns: 7.2rem minmax(0, 1fr); column-gap: 1.6rem; }
	.pindex__item { grid-template-columns: minmax(0, 1fr); row-gap: 0.8rem; }
	.prole__row { grid-template-columns: minmax(0, 1fr); }
	.prole__title, .prole__body { grid-column: 1; }
}

/* Mapa: los puntos de Texas pasaban por detrás del rótulo y lo ensuciaban; un
   contorno del color del fondo lo separa sin caja. */
.pmap__label text { paint-order: stroke; stroke: #0e0e0e; stroke-width: 6px; stroke-linejoin: round; }

/* Ficha técnica de Technology (cliente): ya no es una tabla a todo el ancho. Las dos
   mitades de la planta en dos fichas, etiqueta a la izquierda y valor a la derecha,
   y debajo las tres cifras de la planta entera. Sin filetes: aire y fondo. */
.psheet__halves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter, 2.4rem); }
.psheet__card { padding: clamp(2.4rem, 3vw, 4rem); border-radius: var(--r-m, 1.2rem); background: rgba(255, 255, 255, 0.045); }
.psheet__name { margin: 0 0 clamp(1.6rem, 2.4vw, 2.8rem); font-size: var(--t-h3); font-weight: 300; line-height: 1.2; letter-spacing: -0.012em; color: #fff; }
.psheet__list { margin: 0; display: grid; gap: clamp(1.2rem, 1.6vw, 1.8rem); }
.psheet__row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2rem; align-items: baseline; }
.psheet__row dt { color: var(--muted); font-size: var(--t-small, 1.5rem); }
.psheet__row dd { margin: 0; color: #fff; font-size: var(--t-body); line-height: 1.35; font-variant-numeric: tabular-nums; }
.psheet__plant { margin: clamp(3.2rem, 5vw, 5.6rem) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter, 2.4rem); }
.psheet__plant dt { color: var(--muted); font-size: var(--t-small, 1.5rem); margin-bottom: 0.6rem; }
.psheet__plant dd { margin: 0; color: #fff; font-size: clamp(3.2rem, 4.4vw, 5.6rem); font-weight: 200; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.psheet__plant dd span { display: block; margin-top: 0.8rem; font-size: var(--t-body); font-weight: 400; letter-spacing: 0; color: var(--text2); }
@media (orientation: portrait), (max-width: 899px) {
	.psheet__halves { grid-template-columns: minmax(0, 1fr); }
	.psheet__plant { grid-template-columns: minmax(0, 1fr); gap: 2.8rem; }
}
@media (max-width: 479px) {
	.psheet__row { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
}

/* Home (cliente, oct. 2026). Los tres datos de la fuel cell, con el mismo formato que
   los bloques de abajo y sin estirarse a todo el ancho; los renders, solo las imágenes. */
.fuel__specs--3 { max-width: 64rem; }
.fuel__specs--3 .datum { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); }
.rend--bare .rend__cap { display: none; }

/* Hero (cliente, oct. 2026 · iPhone). Sin corte arriba ni abajo: el velo nace del
   mismo color que Safari pone en su barra (superficie «hero», ver site.js) y muere
   en la tinta exacta de la sección siguiente. */
:root .hero__shade {
	background:
		linear-gradient(180deg, #2b3d52 0%, rgba(43, 61, 82, 0.72) 9%, rgba(43, 61, 82, 0) 30%),
		linear-gradient(0deg, #0e0e0e 0%, rgba(14, 14, 14, 0.9) 14%, rgba(14, 14, 14, 0.5) 40%, rgba(14, 14, 14, 0) 64%),
		linear-gradient(90deg, rgba(14, 14, 14, 0.38) 0%, rgba(14, 14, 14, 0) 56%);
}
@media (orientation: portrait), (max-width: 899px) {
	:root .hero__shade {
		background:
			linear-gradient(180deg, #2b3d52 0%, rgba(43, 61, 82, 0.7) 8%, rgba(43, 61, 82, 0) 24%),
			linear-gradient(0deg, #0e0e0e 0%, rgba(14, 14, 14, 0.94) 22%, rgba(14, 14, 14, 0.62) 46%, rgba(14, 14, 14, 0) 70%);
	}
	/* Diagramación: el bloque de texto baja a la zona oscura y deja ver la planta;
	   los cuatro datos, compactos (antes ocupaban media pantalla). */
	:root .hero__inner { padding-bottom: max(2.4rem, env(safe-area-inset-bottom)); gap: 2.8rem; }
	:root .hero__copy { gap: 1.4rem; }
	:root .hero__eyebrow { font-size: 1.3rem; }
	:root .hero__title { font-size: clamp(3.6rem, 10.4vw, 5.2rem); line-height: 1; }
	:root .hero__lead { font-size: 1.6rem; line-height: 1.5; max-width: 34ch; }
	:root .hero__actions { gap: 1.2rem 2.4rem; margin-top: 0.4rem; }
	:root .hero__film .filmbtn__disc { width: 4.4rem; height: 4.4rem; }
	:root .hero__facts { column-gap: 2rem; row-gap: 1.6rem; }
	:root .hero__fact { padding: 0; }
	:root .hero__fact::before { display: none; }
	:root .hero__fact dt { font-size: 1.2rem; }
	:root .hero__fact dd { margin-top: 0.3rem; font-size: 1.5rem; line-height: 1.3; }
	:root .hero__fact:first-child dd { font-size: 2.6rem; line-height: 1; }
}

/* Technology (repaso del cliente, oct. 2026): una sola cifra en el ATR (98 % de
   captura) y una sola ficha (el bloque de fuel cells). Ninguna se estira a todo
   el ancho: la cifra a la izquierda con su texto, la ficha a una medida legible. */
.pzoom__facts--one .pzoom__fact { grid-column: 1 / span 7; }
.psheet__halves--one { grid-template-columns: minmax(0, 1fr); max-width: 72rem; }
@media (orientation: portrait), (max-width: 899px) {
	.pzoom__facts--one .pzoom__fact { grid-column: 1 / -1; }
}
.pzoom__facts--one .pzoom__body { max-width: 62ch; }

/* Cabecera (cliente, oct. 2026): siempre transparente y siempre visible. Sin velo
   esmerilado ni filete, no se retira al bajar, y la marca, los enlaces y el menú
   van en blanco con efecto diferencia: sobre papel se leen negros, sobre tinta
   blancos, y al cruzar entre dos superficies se invierten píxel a píxel. Sobre el
   azul de marca y en lo alto del hero la diferencia daría naranja o beige: ahí,
   blanco liso (los marca site.js con data-tint y data-hdr-plain). */
:root .hdr::before, :root .hdr::after { display: none; }
:root .hdr.is-hidden { transform: none; }
:root .hdr { color: #fff !important; mix-blend-mode: difference; }
:root[data-tint="flood"] .hdr,
:root[data-hdr-plain] .hdr,
:root[data-hdr-photo] .hdr,
:root[data-hdr-scene] .hdr,
:root.is-menu-open .hdr { mix-blend-mode: normal; }

/* Menú (cliente, oct. 2026; referencia: luiskoepke.com). Ya no es un panel a
   pantalla completa: es una tarjeta flotante a 10 px de los bordes, con radio de
   25 px y la altura de su contenido, que nace del botón (el recorte de site.js) y
   deja ver la página detrás, oscurecida. Enlaces a 36 px, sin filetes; debajo,
   la acción, el correo y lo legal en pequeño. El botón es solo el icono. */
:root .menu__scrim { background: rgba(6, 8, 10, 0.4); }
:root .menu__panel {
	--gap: 1rem;
	inset: var(--gap) var(--gap) auto auto;
	width: min(42rem, calc(100% - 2 * var(--gap)));
	max-height: calc(100svh - 2 * var(--gap));
	padding: calc(var(--header-h) + 0.4rem) 2.8rem 2.6rem;
	border-radius: 2.5rem;
	background: #0e0e0e;
	box-shadow: 0 2.4rem 6rem rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(244, 244, 242, 0.07);
	overflow-y: auto;
}
@media (max-width: 767px) {
	:root .menu__panel { inset: var(--gap) var(--gap) auto var(--gap); width: auto; border-radius: 2.5rem; padding-inline: 2.4rem; box-shadow: 0 2.4rem 6rem rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(244, 244, 242, 0.07); }
}
:root .menu__list { border-bottom: 0; }
:root .menu__rule { display: none; }
:root .menu__link { padding: 0.2em 0 0.18em; font-size: 3.6rem; font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; }
:root .menu__foot { margin-top: 3.2rem; padding-top: 0; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
:root .menu__cta { margin-bottom: 0.6rem; }
:root .menu__mail { gap: 0.2rem; font-size: 1.6rem; font-weight: 400; letter-spacing: 0; }
:root .menu__mail span { font-size: 1.3rem; }
:root .menu__home { display: none; }
:root .menu__legal { justify-content: flex-start; gap: 1.6rem; font-size: 1.3rem; }
:root .hdr__burger-label { display: none; }
:root .hdr__burger { padding-left: 0; min-width: 4.4rem; }

/* ===== Revisión de diseño (oct. 2026): móvil ===== */
/* Filetes entre secciones: la regla de arriba perdía por especificidad. */
:root .sec:where(main > [data-surface="paper"] + [data-surface="paper"], main > [data-surface="ink"] + [data-surface="ink"])::before { content: none !important; }
/* Filete bajo la última fila de cada ficha de datos. */
:root .data--list .datum:last-child { border-bottom: 0; }
/* Línea de tiempo (Project, About): sin raíl ni cuadraditos. */
:root .psteps__rail, :root .psteps__fill, :root .psteps .psteps__step::before { display: none; }
:root .psteps .psteps__step { padding-left: 0; border: 0; }
/* Índice de las páginas legales: sin cuadraditos. */
:root .plegal__toc a::before { display: none; }
@media (max-width: 599px) { :root .plegal__toc { margin-top: 0; } }
/* Listas de enlaces (Contact, 404): sin filetes. */
:root .prows, :root .prows__row { border: 0; }
:root .prows__row + .prows__row { margin-top: 0.8rem; }
@media (max-width: 599px) { :root .page-404 .prows { margin-top: 4rem; } }
/* Carrusel de renders: sin numeración ni filete. */
:root .rend__count, :root .rend__rule { display: none; }
:root .rend__bar { justify-content: flex-end; }
/* Línea decorativa sobre el vídeo del ATR (Home). */
:root .process__pipe { display: none; }
/* Medidor de ruido (Technology): barras redondeadas, sin marcas de escala ni rayado. */
:root .pscale--meter .pscale__bar { background: rgba(10, 27, 43, 0.06); border-radius: 99px; height: 1rem; }
:root .pscale--meter .pscale__bar::before { top: 0; bottom: 0; border-radius: 99px; }
:root .pscale--meter .pscale__row--ref .pscale__bar::before { background: rgba(10, 27, 43, 0.28); box-shadow: none; }
/* Technology: la nave entra justo después de la ficha. */
:root .psheet + .sec:has(> .pbleed) { padding-top: 0; }
@media (orientation: portrait), (max-width: 899px) {
	/* Home: el hueco negro tras «Zoom on the ATR». */
	:root .process { padding-bottom: 0; }
	:root .process__media--rack { aspect-ratio: 16 / 11; max-height: none; }
	:root .adv__stage { align-items: flex-start; padding-top: calc(var(--header-h) + 3.2rem); padding-bottom: 0; }
	/* «Why BaseBlue» y sus frases, en la misma línea. */
	:root .adv__claims { padding-left: 0; }
}
@media (max-width: 599px) {
	/* Bloque azul final y pie: el mismo eje (izquierda) y menos aire muerto. */
	:root .close { padding-block: clamp(8rem, 12svh, 11.2rem) clamp(4rem, 6svh, 5.6rem); text-align: left; }
	:root .close__body { justify-items: start; gap: 2.8rem; }
	:root .close__mark { display: none; }
	:root .foot.sec { padding-top: 0; }
	/* Logos de socios: una retícula regular. */
	:root .prefs__logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.8rem 1.6rem; align-items: center; justify-items: center; }
	:root .prefs__logo { height: 2.6rem; width: auto; max-width: 100%; }
}
@media (max-width: 767px) {
	/* Menú abierto: la marca y la cruz, alineadas con el contenido de la tarjeta. */
	:root .hdr__brand, :root .hdr__burger { transition: transform var(--dur-2) var(--ease-out); }
	:root.is-menu-open .hdr__burger { transform: translateX(-1.3rem); }
}

/* ===== Revisión de diseño (oct. 2026): escritorio y tablet ===== */
/* «Let's talk» de la cabecera: con la diferencia activa, el texto va en tinta
   (sobre papel sale claro sobre oscuro y al revés). Sobre azul, el azul. */
:root:not([data-tint="flood"]):not([data-hdr-plain]):not([data-hdr-photo]):not([data-hdr-scene]):not(.is-menu-open) .hdr__cta { --cta-fg: #0e0e0e; }
:root[data-hdr-scene] .hdr__cta { --cta-fg: #0055b7; }
/* Con el pie en pantalla, un solo «Let's talk». */
:root[data-foot="1"] .hdr__cta { visibility: hidden; }
/* Titulares de página: el mismo tamaño en todas (Project y Technology iban a la mitad). */
:root :is(.pmap__title, .pstage__title) { font-size: clamp(3.6rem, calc(var(--w, 100vw) * 0.044), 7.2rem); line-height: 1.04; letter-spacing: -0.026em; }
/* Textos legales: líneas de lectura cómoda. */
:root .plegal__body { max-width: 38em; }
/* Pasos (Project, About) y roles (About): el título al margen y el texto con los títulos de sección. */
:root .psteps--ledger .psteps__step { border: 0; padding-left: 0; }
:root .psteps--ledger .psteps__media { background: none; }
:root .psteps--ledger .psteps__media--dark img { background: var(--bb-ink); }
@media (orientation: landscape) and (min-width: 900px) {
	:root .psteps--ledger .psteps__title { grid-column: 1 / span 3; }
	:root .psteps--ledger .psteps__body { grid-column: 4 / span 4; max-width: 44ch; }
	:root .psteps--ledger.psteps--text .psteps__title { grid-column: 1 / span 3; }
	:root .psteps--ledger.psteps--text .psteps__body { grid-column: 4 / span 6; }
	:root .prole__title { grid-column: 1 / span 3; }
	:root .prole__body { grid-column: 4 / span 6; }
	/* Project, «Why the Permian Basin»: retícula regular de 2 × 2. */
	:root .pwhy__item:nth-child(n) { grid-column: span 6; margin-top: 0; }
	:root .pwhy__item--tall .pwhy__media { aspect-ratio: 3 / 2; }
	/* Technology, el bloque por dentro: el vídeo a pantalla completa y sin mover (su negro
	   es el de la página: no hay caja), y detrás del texto un viñeteado suave desde la
	   esquina inferior izquierda, para que se lea sobre cualquier toma del giro. */
	:root .pblock.is-live .pblock__stage::after { inset: 0; width: auto; height: auto; background: radial-gradient(ellipse 44% 46% at 17% 80%, rgba(14, 14, 14, 0.9) 0%, rgba(14, 14, 14, 0.78) 45%, rgba(14, 14, 14, 0.35) 75%, rgba(14, 14, 14, 0) 100%), linear-gradient(0deg, rgba(14, 14, 14, 0.5), rgba(14, 14, 14, 0) 40%); }
}
/* Home: menos aire muerto entre la fuel cell y el proceso. */
:root .fuel { padding-bottom: 0; }

/* Hero: bucle de tres tomas (planta aérea, fuel cells a ras de suelo, filas). Mientras
   carga, el póster correspondiente a la orientación. */
:root .hero__bg { background-image: url("/wp-content/themes/baseblue/assets/video/hero-poster.webp"); }
@media (orientation: portrait) { :root .hero__bg { background-image: url("/wp-content/themes/baseblue/assets/video/hero-poster-portrait.webp"); } }

/* «Skip to content»: oculto de verdad hasta que se enfoca con el teclado. En Safari
   (iOS 26) la página se ve también tras la barra de estado y el enlace, apartado
   solo por encima del borde, asomaba ahí. */
:root .skip:not(:focus-visible) { opacity: 0; pointer-events: none; clip-path: inset(50%); }

/* Menú (cliente, oct. 2026, 2.ª vuelta): más ligero, como luiskoepke.com. La página
   detrás solo se oscurece (sin desenfoque); «Let's talk» es un enlace con flecha y
   no un botón azul; el correo y lo legal, pequeños. */
:root .menu__scrim { background: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root .menu__cta.btn { height: auto; min-height: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--bb-paper); font-size: 2rem; font-weight: 400; gap: 1rem; margin-bottom: 0.2rem; }
:root .menu__cta.btn svg { width: 1.6rem; height: 1.6rem; }
:root .menu__mail span { display: none; }
:root .menu__mail { font-size: 1.5rem; color: rgba(244, 244, 242, 0.7); }
:root .menu__foot { margin-top: 2.8rem; gap: 1rem; }
:root .menu__legal { margin-top: 0.6rem; }

/* Menú (3.ª vuelta, referencia luiskoepke.com): al abrirse, la marca se retira y en la
   tarjeta solo queda la X; los enlaces empiezan arriba, sin el hueco del logotipo. */
:root .hdr__brand { transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
:root.is-menu-open .hdr__brand { opacity: 0; pointer-events: none; }
:root .menu__panel { padding-top: calc(var(--header-h) - 0.4rem); }
@media (max-width: 767px) { :root .menu__panel { padding-top: calc(var(--header-h) - 1.2rem); } }

/* Home · el mapa de la tarjeta es el aprobado de Project: puntos finos, halo azul
   sobre la cuenca, punto con doble latido y rótulo con guía. */
.adv__map .pmap__band circle { fill: var(--bb-pale); }
.adv__map .pmap__band { opacity: 0.62; transition: opacity 1.2s var(--ease-out); transition-delay: calc(0.2s + var(--b) * 0.05s); }
.adv__map .pmap__band:is([style*="--b:0"], [style*="--b:1"]) { opacity: 1; }
.adv__map .pmap__band:is([style*="--b:0"], [style*="--b:1"]) circle { fill: var(--bb-sky); }
.bb-ready .adv__card:not(.is-lit) .adv__map .pmap__band { opacity: 0.16; }
.adv__map .pmap__basin { opacity: 1; transition: opacity 1.6s var(--ease-out) 0.3s; }
.bb-ready .adv__card:not(.is-lit) .adv__map .pmap__basin { opacity: 0; }
.adv__map .pmap__core { fill: #fff; }
.adv__map .pmap__ring { fill: none; stroke: var(--bb-sky); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; opacity: 0; }
.adv__card.is-lit.is-live .adv__map .pmap__ring { animation: hmap-ring 2.8s var(--ease-out) infinite; }
.adv__card.is-lit.is-live .adv__map .pmap__ring--2 { animation-delay: 1.4s; }
@keyframes hmap-ring { from { transform: scale(1); opacity: 0.9; } to { transform: scale(6); opacity: 0; } }
.adv__map .pmap__label { opacity: 1; transition: opacity 0.8s var(--ease-out) 0.9s; }
.bb-ready .adv__card:not(.is-lit) .adv__map .pmap__label { opacity: 0; }
.adv__map .pmap__label path { fill: none; stroke: rgba(255, 255, 255, 0.6); stroke-width: 1; vector-effect: non-scaling-stroke; }
.adv__map .pmap__label text { fill: #fff; font-family: inherit; paint-order: stroke; stroke: var(--bb-ink-2); stroke-width: 6px; stroke-linejoin: round; letter-spacing: 0; }
.adv__map .pmap__name { font-size: 15px; font-weight: 400; }
.adv__map .pmap__mw { font-size: 11px; fill: var(--bb-sky) !important; }
@media (max-width: 767px) {
	.adv__map .pmap__name { font-size: 22px; }
	.adv__map .pmap__mw { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .adv__map .pmap__ring { display: none; } }

/* Galería en teléfono: todas las diapositivas con el mismo marco (antes las
   anchas 3:2 quedaban más bajas que las 4:5 y la tira se veía desarmada). La
   siguiente asoma por el borde para que se lea como carrusel. */
@media (orientation: portrait) {
	.rend { --rend-h: auto; }
	.rend__frame,
	.rend__slide--wide .rend__frame { width: calc(100vw - 2 * var(--margin) - 3.2rem); height: auto; aspect-ratio: 4 / 5; }
	.rend__list { gap: 1.2rem; }
}

/* Pie en teléfono, más compacto: el cierre y el pie ya no apilan dos titulares
   del mismo tamaño; secciones en una fila, correo y textos a escala de nota. */
@media (max-width: 767px) {
	:root .close { padding-bottom: 2.4rem; }
	:root .close__title { font-size: 4rem; }
	:root .foot { padding-top: 2.4rem; }
	:root .foot__ask { row-gap: 2rem; }
	:root .foot__title { font-size: 2.8rem; line-height: 1.1; letter-spacing: -0.02em; max-width: 12em; }
	:root .foot__actions { gap: 2.4rem; }
	:root .foot__btn.btn { height: 4.8rem; min-height: 0; padding-inline: 2rem; font-size: 1.5rem; }
	:root .foot__alt { font-size: 1.5rem; }
	:root .foot__ask { margin-bottom: 4rem; }
	:root .foot__row { margin-top: 0; gap: 1.2rem; }
	:root .foot__row .foot__list { flex-direction: row; flex-wrap: wrap; gap: 0.4rem 2.4rem; }
	:root .foot__list li { margin: 0; }
	:root .foot__row .foot__link { font-size: 1.6rem; line-height: 1.4; padding: 0; }
	:root .foot__link--mail { font-size: 1.5rem; opacity: 0.8; }
	:root .foot__mark { margin-top: 4rem; }
	:root .foot__legal { margin-top: 2rem; padding-top: 0; gap: 0.6rem; font-size: 1.2rem; }
}

/* Menú (4.ª vuelta, referencia luiskoepke.com). Al cerrar, la marca espera a que la
   tarjeta se haya recogido (is-menu-closing) y entonces aparece; la tarjeta se ordena
   como la de referencia: cuatro enlaces grandes (Let's talk es el cuarto) y debajo una
   rejilla de dos columnas con lo secundario. */
:root.is-menu-closing .hdr { mix-blend-mode: normal; }
:root.is-menu-closing .hdr__brand { opacity: 0; transition: none; }
:root .menu__panel { padding: calc(var(--header-h) + 1.2rem) 4rem 4rem; }
:root .menu__link { padding: 0; font-size: 4rem; font-weight: 400; line-height: 1.3; letter-spacing: -0.025em; }
:root .menu__meta { display: none; }
:root .menu__foot { margin-top: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 2.4rem; }
:root .menu__cta.btn { grid-column: 1 / -1; justify-self: start; margin: 0 0 3.6rem; font-size: 4rem; line-height: 1.3; letter-spacing: -0.025em; }
:root .menu__cta.btn svg { display: none; }
:root .menu__legal { display: grid; grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: 0.8rem 2.4rem; margin: 0; }
:root .menu__legal a, :root .menu__mail { margin: 0; font-size: 1.7rem; line-height: 1.3; color: var(--bb-paper); opacity: 1; text-decoration: none; }
:root .menu__mail { grid-column: 1 / -1; order: 2; margin-top: 1.6rem; color: rgba(244, 244, 242, 0.6); }
:root .menu__legal a:nth-child(1) { order: 1; } :root .menu__legal a:nth-child(2) { order: 1; } :root .menu__legal a:nth-child(3) { order: 1; }
@media (max-width: 767px) {
	:root .menu__panel { padding: calc(var(--header-h) + 0.4rem) 3.2rem 3.2rem; }
	:root .menu__link, :root .menu__cta.btn { font-size: 3.6rem; }
	:root .menu__cta.btn { margin-bottom: 3.2rem; }
}
:root .menu__legal a, :root .menu__mail { display: block; min-height: 0; height: auto; padding: 0.3rem 0; }
:root .menu__foot { row-gap: 0.8rem; }

/* Technology · el bloque en teléfono: el vídeo vertical llenaba la pantalla a lo alto
   con mucho negro arriba y el container quedaba pequeño en medio. Ahora ocupa la parte
   de arriba, más grande, y el texto va debajo sin pisarlo. */
@media (orientation: portrait) {
	:root .pblock.is-live .pblock__video { inset: clamp(0px, calc(50svh - 76vw), 20svh) 0 auto; height: min(70svh, 125vw); object-fit: cover; object-position: 46% 58%; transform: scale(1.1); transform-origin: 46% 50%; }
	:root .pblock.is-live .pblock__stage::after { background: linear-gradient(0deg, rgba(14, 14, 14, 1) 0%, rgba(14, 14, 14, 0.9) 30%, rgba(14, 14, 14, 0) 52%); }
	:root .pblock.is-live .pblock__copy { padding-bottom: clamp(3.2rem, 6svh, 5.6rem); }
}

/* Revisión móvil completa (oct. 2026). */
@media (max-width: 767px) {
	/* About · logos de socios: todos en la misma caja óptica (antes, misma altura
	   para todos: los apaisados quedaban diminutos y los redondos, enormes). */
	:root .prefs__logos { gap: 2.4rem 2rem; }
	:root .prefs__logos li { display: flex; justify-content: center; align-items: center; width: 100%; height: 3.6rem; }
	:root .prefs__logo { width: 100%; max-width: 9.6rem; height: 2.8rem; object-fit: contain; }
	:root :is(.prefs__logo--eu, .prefs__logo--fch, .prefs__logo--cnrs, .prefs__logo--sara) { height: 3.4rem; }
	/* Páginas legales: el índice de 12 entradas ocupaba una pantalla entera antes
	   del texto; en teléfono se lee de corrido (queda la fecha). */
	:root .plegal__toc ol { display: none; }
	:root .plegal__toc { gap: 0; }
	/* 404: cada destino en una línea con su flecha al lado, no debajo. */
	:root .page-404 .prows__item { display: flex; align-items: center; justify-content: space-between; padding-block: 1.4rem; }
	:root .page-404 .prows__item .prows__go { margin: 0; }
	:root .page-404 .prows__row + .prows__row { margin-top: 0; }
	:root .page-404 .prows__title { font-size: 2.6rem; }
}
@media (max-width: 767px) {
	/* Cabeceras de texto (Contact, legales, 404): sin el hueco doble con la sección de después. */
	:root .phero--plain { padding-bottom: 3.2rem; }
	:root .phero--plain + .sec { padding-top: 2.4rem; }
	:root .close { padding-top: 5.6rem; }
}

/* Revisión móvil, ronda de agentes (oct. 2026). */
:root .pblock.is-live .pblock__video { mix-blend-mode: lighten; }
:root .pend { background: var(--bb-ink); }
:root .pend .phero__stage { --shade: 0.62; }
:root .page-contact .foot__ask { display: none; }
@media (max-width: 767px) {
	/* El mismo tamaño de H1 en todas las páginas interiores. */
	:root :is(.pmap__title, .pstage__title, .phero__title) { font-size: 4.4rem; line-height: 1.04; letter-spacing: -0.026em; }
	/* Zonas táctiles de 44 px sin mover el diseño. */
	:root .foot__row .foot__link, :root .menu__legal a, :root .foot__policies a, :root :is(.pmap__crumb, .eyebrow) a { padding-block: 1.1rem; margin-block: -1.1rem; }
	:root .pform__check input { width: 2.4rem; height: 2.4rem; }
	:root .pform__check { min-height: 4.4rem; align-items: center; }
	/* Botones: texto legible dentro de su caja. */
	:root .btn { font-size: 1.5rem; }
	/* Socios: la última fila, centrada. */
	:root .prefs__logos li:last-child:nth-child(3n + 1) { grid-column: 2; }
}
@media (orientation: portrait) {
	/* Why BaseBlue: las líneas de luz se apagan detrás del texto. */
	:root .adv .lines__canvas { -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.4) 55%, #000 85%); mask-image: linear-gradient(90deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.4) 55%, #000 85%); }
}

/* Revisión escritorio, ronda de agentes (oct. 2026). */
/* Technology · 98 %: la cifra a la izquierda y su texto a la derecha, sin hueco. */
@media (min-width: 900px) and (orientation: landscape) {
	:root .pzoom__facts--one .pzoom__fact { grid-column: 1 / -1; grid-template-columns: 5fr 7fr; align-items: end; column-gap: var(--gutter); }
	:root .pzoom__facts--one .pzoom__fact > :not(:first-child) { grid-column: 2; }
	:root .pzoom__facts--one .pzoom__fact > :first-child { grid-row: 1 / span 3; }
}
/* Project · las cuatro imágenes de las fases con el mismo peso. */
:root .psteps--ledger .psteps__media--dark img, :root .psteps--media .psteps__media--dark img { object-fit: cover; padding: 0; transform: scale(1.12); }
/* El mismo tamaño de H1 en todas las páginas interiores. */

/* Menú: los legales en una sola fila. */
:root .menu__legal { display: flex; flex-wrap: wrap; gap: 0.8rem 2.4rem; }