/* ═══════════════════════════════════════════════════════════════════════
   Secciones de la dirección C

   Una sección por bloque de reglas, en el orden en que aparecen en la
   portada. Los colores salen de var(--bd-*); ningún literal aquí.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero ───────────────────────────────────────────────────────────────
   Banda negra a sangre que abre la portada. El loto va a la derecha en
   escritorio y debajo del titular en móvil.                             */

.bd-hero {
	display: grid;
	gap: var(--bd-e5);
	align-items: center;
	grid-template-columns: 1fr;
	padding-block: var(--bd-e6) var(--bd-e6);
	min-height: 78vh;
}

@media (min-width: 900px) {
	.bd-hero {
		/* El titular manda; el loto acompaña. De ahí el reparto desigual. */
		grid-template-columns: 1.15fr 0.85fr;
	}
}

.bd-hero__titular {
	/* Se sale de la escala global: en el hero el titular pesa más. */
	font-size: clamp(2.25rem, 4.6vw, 3.75rem);
	/* El peso, explícito y no heredado de la regla de h1..h6 de base.css: en
	   el editor de bloques esa regla no llega al titular y salía en 400. */
	font-weight: var(--bd-peso-fuerte);
	max-width: 20ch;
	margin: 0;
}

/* El punto coral, eco del punto del logotipo. Aquí es el punto final de la
   frase y no un círculo suelto entre el titular y la bajada: la misma marca,
   pero haciendo el trabajo que le toca a un punto.

   Va en un <strong> —como «cambios sostenibles» en el manifiesto— y no en un
   ::after con content ".", para que el punto exista en el texto: en el editor
   se ve y se puede borrar con el resto de la frase, y un ::after decorativo
   dejaría la oración sin cerrar para quien la lee con lector de pantalla.
   El peso se hereda para que no engorde respecto al titular.              */
.bd-hero__titular strong {
	color: var(--bd-coral);
	font-weight: inherit;
}

.bd-hero__bajada {
	font-size: 1.25rem;
	max-width: 44ch;
	color: var(--bd-mute);
	margin-block: var(--bd-e4) var(--bd-e4);
}

/* ── Botón de llamada a la acción ───────────────────────────────────────
   Sobre fondo oscuro va en coral con texto negro: 5.10:1 entre el coral y
   el negro del fondo, y el texto negro sobre coral da 4.5:1 largos.      */

.bd-cta {
	display: inline-block;
	background-color: var(--bd-coral);
	color: var(--bd-ink);
	font-weight: var(--bd-peso-fuerte);
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	padding: 15px 30px;
	border-radius: 2px;
	text-decoration: none;
	transition: background-color 160ms ease, transform 160ms ease;
}

.bd-cta:hover,
.bd-cta:focus-visible {
	background-color: var(--bd-paper);
	color: var(--bd-ink);
	transform: translateY(-1px);
}

/* Dentro de una banda oscura, .bd-oscuro pinta los enlaces de coral. El CTA
   necesita ganar esa regla porque su color de texto es el del fondo. */
.bd-oscuro .bd-cta {
	color: var(--bd-ink);
}

/* Y el hover aparte: .bd-oscuro a:hover vale (0,2,1) y le ganaba tanto a
   .bd-cta:hover como a .bd-oscuro .bd-cta, las dos (0,2,0). El botón se
   ponía blanco de fondo y blanco de texto, y al pasar el ratón por encima
   el texto desaparecía. Estos selectores valen (0,3,0) y ganan. */
.bd-oscuro .bd-cta:hover,
.bd-oscuro .bd-cta:focus-visible {
	color: var(--bd-ink);
}

/* ── El loto ────────────────────────────────────────────────────────────
   Se dibuja con stroke-dashoffset. Los <path> traen pathLength="1", así
   que la longitud del trazo es 1 y el offset va de 1 a 0.

   Estado inicial: sin dibujar. Solo se dibuja al añadirse la clase desde
   bd.js, o de inmediato si se pidió menos movimiento.                    */

.bd-loto {
	width: 100%;
	/* Crece con el viewport pero sin pasarse: al lado de un titular de 60px,
	   los 390px de antes lo dejaban en segundo plano. */
	max-width: clamp(300px, 36vw, 520px);
	height: auto;
	color: currentColor;
}

.bd-loto path {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.bd-loto--dibujado path {
	animation: bd-trazar 1100ms ease forwards;
}

@keyframes bd-trazar {
	to { stroke-dashoffset: 0; }
}

/* El pétalo núcleo se rellena de coral al final del trazo: es «Transformar»,
   el centro del Modelo Lotus. */
.bd-loto--dibujado .bd-loto__nucleo {
	animation: bd-trazar 1100ms ease forwards,
		bd-rellenar 600ms ease 900ms forwards;
}

@keyframes bd-rellenar {
	to { fill: var(--bd-coral); }
}

/* Con menos movimiento, el loto aparece dibujado sin animación. */
@media (prefers-reduced-motion: reduce) {
	.bd-loto path,
	.bd-loto--dibujado path,
	.bd-loto--dibujado .bd-loto__nucleo {
		stroke-dashoffset: 0;
		animation: none;
	}

	.bd-loto--dibujado .bd-loto__nucleo {
		fill: var(--bd-coral);
	}
}

/* ── Cifras ─────────────────────────────────────────────────────────────
   Cuatro cifras SOBRE BLANCO, justo debajo del hero. La dirección C pone la
   prueba adelante y esto es lo primero que la sostiene.

   Sobre blanco y no sobre negro —que es lo que decía el plan— porque es lo
   que muestra el mockup de la dirección C: el corte de negro a blanco justo
   aquí es lo que hace que las cifras se lean como evidencia y no como una
   continuación del discurso del hero. Decisión de Josefa, 3-8-2026.

   2×2 en móvil y 4 en línea desde 900px. Los separadores son verticales, no
   un filete horizontal: ahora la banda ya se distingue del hero por el
   cambio de fondo, y lo que hay que separar son las cifras entre sí.       */

.bd-cifras {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* Sin hueco horizontal: el separador vertical de cada celda ocupa ese
	   lugar, y su padding hace de aire. */
	gap: var(--bd-e5) 0;
	padding-block: var(--bd-e6);
}

@media (min-width: 900px) {
	.bd-cifras {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* El separador va a la IZQUIERDA de cada celda y se quita en la primera de
   cada fila, que es distinta según cuántas columnas haya. Derivado del token
   del gris, como el resto de los filetes. */
.bd-cifras__celda {
	border-left: 1px solid color-mix(in srgb, var(--bd-ink) 15%, transparent);
	padding-inline: var(--bd-e3);
}

.bd-cifras__celda:nth-child(2n + 1) {
	border-left: 0;
	padding-left: 0;
}

@media (min-width: 900px) {
	/* En cuatro columnas, la primera de cada fila es otra: se devuelve el
	   separador a las impares y se quita solo a la primera. */
	.bd-cifras__celda:nth-child(2n + 1) {
		border-left: 1px solid color-mix(in srgb, var(--bd-ink) 15%, transparent);
		padding-left: var(--bd-e3);
	}

	.bd-cifras__celda:nth-child(4n + 1) {
		border-left: 0;
		padding-left: 0;
	}
}

.bd-cifras__valor {
	font-size: clamp(2.5rem, 4.2vw, var(--bd-cifra));
	font-weight: var(--bd-peso-fuerte);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--bd-titular-track);
	line-height: 1;
	margin: 0 0 var(--bd-e2);
	color: var(--bd-ink);
}

/* El signo + en el coral de marca. Sobre blanco ese coral da 3.70:1, que solo
   vale para texto grande, y aquí lo es de sobra: la cifra son 54px en
   SemiBold, muy por encima de los 19px que pide la regla (spec §5.2). */
.bd-cifras__valor em {
	font-style: normal;
	color: var(--bd-coral);
}

/* La clave va en tinta y NO en --bd-mute: el gris sobre blanco da 1.96:1 y
   está prohibido como texto (spec §5.2). Sobre negro sí podía. */
.bd-cifras__clave {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--bd-ink);
	margin: 0;
	max-width: 26ch;
}

/* ── Banda de manifiesto ────────────────────────────────────────────────
   Ocupa el lugar de la panorámica 21:9 que la dirección C pide y que no
   existe (spec D3 y §4.5). Lleva la pregunta que la comparativa de abajo
   responde: la banda pregunta, el split contesta.

   Cuando llegue la fotografía se le añade la clase
   .bd-manifiesto--con-foto y una custom property con la imagen. El overlay
   está calculado para preservar el contraste del texto.                  */

.bd-manifiesto {
	display: flex;
	align-items: center;
	/* La banda se hizo para una panorámica 21:9 que todavía no existe, así que
	   mientras solo lleva la pregunta —cuatro líneas— el 62vh de antes dejaba
	   medio negro vacío debajo del punto coral. Con 34vh la banda sigue
	   respirando y sigue siendo la pausa entre el hero y la comparativa. Al
	   llegar la foto, esto vuelve a 62vh. */
	min-height: 34vh;
	padding-block: var(--bd-e5);
}

.bd-manifiesto__pregunta {
	font-size: clamp(1.75rem, 3.6vw, 3rem);
	font-weight: var(--bd-peso-fuerte);
	line-height: 1.18;
	letter-spacing: var(--bd-titular-track);
	max-width: 30ch;
	margin: 0;
	text-wrap: balance;
}

/* «cambios sostenibles» va en coral: es la única parte de la pregunta que
   importa. A este tamaño el coral pasa AA de sobra sobre negro (5.10:1). */
.bd-manifiesto__pregunta strong {
	color: var(--bd-coral);
	font-weight: inherit;
}

/* El mismo punto y por el mismo motivo que en el hero: pseudo-elemento y no
   un wp:group vacío. */
.bd-manifiesto__pregunta::after {
	content: "";
	display: block;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background-color: var(--bd-coral);
	margin-top: var(--bd-e4);
}

/* ── Preparado para la fotografía ───────────────────────────────────────
   Cuando exista la panorámica 21:9, basta con añadir la clase y definir
   --bd-manifiesto-foto en el bloque. El overlay al 72% mantiene el
   18.9:1 del texto blanco casi intacto.                                  */

.bd-manifiesto--con-foto {
	background-image:
		linear-gradient(
			color-mix(in srgb, var(--bd-ink) 72%, transparent),
			color-mix(in srgb, var(--bd-ink) 72%, transparent)
		),
		var(--bd-manifiesto-foto, none);
	background-size: cover;
	background-position: center;
}

/* ── Comparativa ────────────────────────────────────────────────────────
   Responde la pregunta de la banda anterior. Dos mitades a sangre: el
   ciclo tradicional sobre blanco, el enfoque Boudesseul sobre negro.

   Aquí la alternancia de la dirección C deja de ser decoración: el
   contraste ES el argumento.                                             */

.bd-comparativa {
	display: grid;
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.bd-comparativa {
		grid-template-columns: 1fr 1fr;
	}
}

.bd-comparativa__mitad {
	padding: var(--bd-e6) var(--bd-e4);
}

@media (min-width: 900px) {
	/* En escritorio, la mitad clara se alinea al contenedor de 1190px y la
	   oscura llega al borde derecho. */
	.bd-comparativa__mitad:first-child {
		padding-left: max(var(--bd-e4), calc(50vw - 1190px / 2));
	}

	.bd-comparativa__mitad:last-child {
		padding-right: max(var(--bd-e4), calc(50vw - 1190px / 2));
	}
}

.bd-comparativa__mitad--claro {
	background-color: var(--bd-paper);
	color: var(--bd-ink);
}

.bd-comparativa__mitad--oscuro {
	background-color: var(--bd-ink);
	color: var(--bd-paper);
}

/* La etiqueta superior. Sobre blanco usa el coral de texto (4.79:1); sobre
   negro, el coral de marca (5.10:1). Es la regla de §5.2 aplicada. */
.bd-comparativa__etiqueta {
	font-size: 0.75rem;
	font-weight: var(--bd-peso-fuerte);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 var(--bd-e2);
}

.bd-comparativa__mitad--claro .bd-comparativa__etiqueta {
	color: var(--bd-coral-ink);
}

.bd-comparativa__mitad--oscuro .bd-comparativa__etiqueta {
	color: var(--bd-coral);
}

.bd-comparativa__titulo {
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: var(--bd-peso-fuerte);
	margin: 0 0 var(--bd-e4);
}

.bd-comparativa__paso {
	display: flex;
	align-items: baseline;
	gap: var(--bd-e2);
	padding-block: var(--bd-e2);
	margin: 0;
	font-size: 1.0625rem;
	border-top: 1px solid currentColor;
	/* El filete hereda el color del texto, así que funciona en las dos
	   mitades sin necesidad de dos reglas. Al 18% no compite con el texto. */
	border-top-color: color-mix(in srgb, currentColor 18%, transparent);
}

.bd-comparativa__paso:first-of-type {
	border-top: 0;
}

.bd-comparativa__paso .indice {
	font-variant-numeric: tabular-nums;
	font-weight: var(--bd-peso-fuerte);
	font-size: 0.8125rem;
	opacity: 0.55;
	min-width: 2ch;
}

/* El cuarto paso es la conclusión de cada columna y va marcado. */
.bd-comparativa__paso--fracaso {
	font-weight: var(--bd-peso-fuerte);
	/* Antes era opacity: 0.55. Se cambia a un color con alfa porque la
	   opacidad del párrafo crea un grupo del que el hijo no puede salir: con
	   ella puesta, el rojo del índice caía a 2.9:1 y ningún opacity:1 del
	   .indice lo rescataba. El resultado visual del texto es el mismo, #111
	   al 55% sobre blanco, y el filete queda igual de tenue que antes. */
	color: color-mix(in srgb, currentColor 55%, transparent);
}

/* Pedido de Christine (17-8-2026): marcar el 04 de las dos columnas. Van
   distintos a propósito —rojo el del fracaso, recuadro blanco el del logro—
   porque si los dos fueran rojos el acento de marca diría a la vez «esto
   falla» y «esto funciona». */
.bd-comparativa__paso--fracaso .indice {
	/* Rojo sobre la mitad clara y a 13px: es texto pequeño, así que va
	   --bd-coral-ink (4.79:1) y no --bd-coral (3.70:1). */
	color: var(--bd-coral-ink);
	font-size: 1rem;
	opacity: 1;
}

.bd-comparativa__paso--logro {
	font-weight: var(--bd-peso-fuerte);
	color: var(--bd-coral);
}

.bd-comparativa__paso--logro .indice {
	background-color: var(--bd-paper);
	color: var(--bd-ink);
	opacity: 1;
	font-size: 1rem;
	padding: 0.1em 0.4em;
	border-radius: 2px;
	text-align: center;
}

/* La envoltura de la comparativa es la única .bd-sangre sin padding lateral.
   En esta sección el padding lo llevan las mitades —es lo que alinea la clara
   al contenedor de 1190px y deja que la oscura llegue al borde—, así que
   sumar también el de .bd-sangre metía el split dentro del contenedor: medido
   en un viewport de 1440, iba de 125 a 1315 y quedaba una franja blanca de
   125px a la derecha de la mitad negra. */
.bd-comparativa-envoltura {
	padding-inline: 0;
}

/* ── Piezas comunes de las secciones nuevas ─────────────────────────────
   El mockup de la dirección C llama .c-sect a los bloques centrales de la
   portada, y todos tienen la misma cabecera: una cejilla pequeña en
   versalitas y un h2 debajo. Se declara una vez.                         */

.bd-seccion {
	padding-block: var(--bd-e6);
}

/* Dos secciones seguidas sobre el mismo blanco no repiten el aire de
   arriba: en el mockup se encadenan sin corte (padding-top:0 en la
   segunda). Si cada una llevara su padding completo, entre el título de
   una y el final de la anterior habría el doble de aire que dentro de la
   propia sección, y se leerían como dos páginas distintas. */
.bd-seccion--seguida {
	padding-top: 0;
}

/* La cejilla es texto pequeño, así que su color depende del fondo, igual
   que la etiqueta de la comparativa: sobre blanco --bd-coral-ink (4.79:1)
   y sobre negro --bd-coral (5.10:1). El mockup usa aquí un gris claro,
   que sobre blanco da 1.96:1 y está prohibido como texto (spec §5.2). */
.bd-cejilla {
	font-size: 0.6875rem;
	font-weight: var(--bd-peso-fuerte);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bd-coral-ink);
	margin: 0;
}

.bd-oscuro .bd-cejilla {
	color: var(--bd-coral);
}

/* Los 36px del mockup, que es exactamente el h2 de base.css. Solo se
   ajusta el margen —el mockup lo pega a la cejilla— y se le pone un
   clamp para que en móvil no ocupe cuatro líneas. */
.bd-seccion__titulo {
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	margin: var(--bd-e1) 0 0;
}

/* ── Modelo Lotus ───────────────────────────────────────────────────────
   La metodología propia, sobre blanco. Es el segundo loto de la página, y
   aquí en negro: la dirección C lo dibuja dos veces, una por banda.

   El ancla #modelo-lotus es la que la semana 3 usará en el menú (D6): el
   ítem «Modelo Lotus» no es una página, es este sitio de la portada. El
   scroll-margin deja aire por arriba para que al llegar por el ancla el
   título no quede pegado al borde superior de la ventana.                */

.bd-modelo {
	scroll-margin-top: var(--bd-e3);
}

.bd-modelo__loto {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bd-e3);
	margin-top: var(--bd-e5);
	/* El loto usa currentColor: aquí el trazo es negro. */
	color: var(--bd-ink);
}

/* El clamp de .bd-loto está pensado para el hero, donde el loto acompaña
   a un titular. Aquí es el elemento central de la sección y el mockup lo
   fija en 390px, así que se acota a eso. */
.bd-modelo__loto .bd-loto {
	max-width: 390px;
}

.bd-modelo__fases {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--bd-e2) var(--bd-e6);
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bd-ink);
}

/* «Transformar» es el pétalo núcleo, el que se rellena de coral al
   dibujarse. La fase se marca con el mismo color para que la relación
   entre el dibujo y la palabra se vea sin explicarla.

   El <strong> no es decorativo: es la fase central del modelo y la única
   que el loto destaca gráficamente. Coral de texto y no de marca porque
   son 14px sobre blanco (spec §5.2). */
.bd-modelo__fases strong {
	color: var(--bd-coral-ink);
}

/* ── Desafíos ───────────────────────────────────────────────────────────
   «¿Qué estás intentando cambiar?»: los filtros, la grilla de ocho
   desafíos y los tres procesos. Es la sección que convierte el discurso
   en una lista de cosas que la persona reconoce como su problema.

   Las dos grillas se dibujan con un hueco de 1px y el color en el FONDO
   del contenedor: las celdas son blancas y el fondo se ve por el hueco,
   así que el filete es exactamente de 1px en todas partes. Con un borde
   por celda, en los encuentros se sumarían dos bordes y las líneas
   interiores saldrían del doble de grosor que las exteriores.            */

.bd-desafios__filtros {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bd-e1);
	margin: var(--bd-e4) 0 0;
	padding: 0;
}

/* Botones de verdad y no <span> como en el mockup: hay que poder llegar
   con el tabulador y activarlos con Enter o con la barra espaciadora, y
   eso lo da <button> gratis. font:inherit porque el navegador le pone su
   propia tipografía a los controles de formulario. */
.bd-desafios__filtro {
	font: inherit;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	/* 11px arriba/abajo, no los 9 originales: con el borde de 1px el botón
	   quedaba en 41px de alto, bajo el mínimo táctil de 44
	   (test_movil.py, caso_desborde_y_tactiles). */
	padding: 11px 16px;
	border: 1px solid color-mix(in srgb, var(--bd-ink) 22%, transparent);
	border-radius: 100px;
	background-color: transparent;
	color: var(--bd-ink);
	cursor: pointer;
	transition: background-color 140ms ease, border-color 140ms ease;
}

/* El estado se toma de aria-pressed y no de una clase aparte. Así hay un
   solo sitio donde vive «este filtro está activo», y lo que ve la vista y
   lo que oye un lector de pantalla no pueden discrepar. */
.bd-desafios__filtro[aria-pressed="true"] {
	background-color: var(--bd-ink);
	border-color: var(--bd-ink);
	color: var(--bd-paper);
}

.bd-desafios__filtro:hover {
	border-color: var(--bd-ink);
}

/* Los filetes los pinta CADA celda, hacia su izquierda y hacia arriba, y no
   son el fondo de la grilla asomando por un `gap` de 1px.

   El fondo asomando era lo que había, y tenía un fallo que solo aparecía al
   filtrar (visto por Josefa el 2026-08-07): cuando la última fila queda
   incompleta —«Liderazgo» deja 3 desafíos en una fila de 4— la posición vacía
   no tiene ninguna celda blanca encima, así que se veía el fondo entero como
   un RECUADRO GRIS del tamaño de una celda. Con el filete en la celda, una
   posición vacía no pinta nada.

   `overflow: hidden` recorta lo que cada celda pinta hacia fuera de la
   grilla: el filete izquierdo de la primera columna y el superior de la
   primera fila. Así solo quedan los interiores, que es lo que se veía antes.
   Nada dentro de la grilla desborda a propósito; si algún día una celda fuera
   enfocable, habría que revisar que el `overflow` no le recorte el contorno.

   No se puede resolver con `:nth-child` —«sin filete en la primera columna»—
   porque nth-child cuenta también las celdas ocultas, y se rompería justo al
   filtrar, que es el caso que esto arregla.                                */

.bd-desafios__grilla {
	--bd-filete: color-mix(in srgb, var(--bd-ink) 14%, transparent);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	margin-top: var(--bd-e3);
	overflow: hidden;
}

@media (min-width: 900px) {
	.bd-desafios__grilla {
		grid-template-columns: repeat(4, 1fr);
	}
}

.bd-desafio {
	background-color: var(--bd-paper);
	padding: var(--bd-e4) var(--bd-e3);
	/* Los 118px del mockup: con textos de una y de tres líneas, sin un
	   mínimo las celdas de la misma fila quedaban de alturas distintas. */
	min-height: 118px;
	box-shadow:
		-1px 0 0 var(--bd-filete),
		0 -1px 0 var(--bd-filete);
}

/* Lo pone filtrarDesafios() al filtrar. Explícito y no confiado al
   [hidden] del navegador: basta con que alguien le dé un `display` a la
   celda para que el hidden del agente de usuario deje de ganar. */
.bd-desafio[hidden] {
	display: none;
}

.bd-desafio__texto {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.45;
}

/* El punto coral, como en el hero y en el manifiesto: pseudo-elemento y
   no un wp:group vacío, que en el editor se convierte en el cartel
   «Agrupa bloques juntos». Es decoración, así que además ningún lector de
   pantalla lo anuncia. Elemento no textual: sobre blanco el coral de
   marca da 3.70:1 y para esto vale (spec §5.2). */
.bd-desafio__texto::before {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--bd-coral);
	margin-bottom: var(--bd-e2);
}

/* ── Los tres procesos ──────────────────────────────────────────────────
   Cierran la sección de desafíos: después de reconocer el problema, la
   forma de trabajarlo. Mismo tratamiento de filetes que la grilla.       */

.bd-procesos {
	--bd-filete: color-mix(in srgb, var(--bd-ink) 14%, transparent);
	display: grid;
	grid-template-columns: 1fr;
	margin-top: var(--bd-e5);
	overflow: hidden;
}

@media (min-width: 700px) {
	.bd-procesos {
		grid-template-columns: repeat(3, 1fr);
	}
}

.bd-proceso {
	background-color: var(--bd-paper);
	padding: var(--bd-e4) var(--bd-e3);
	box-shadow:
		-1px 0 0 var(--bd-filete),
		0 -1px 0 var(--bd-filete);
}

.bd-proceso__titulo {
	font-size: 1.3125rem;
	margin: 0 0 var(--bd-e2);
}

.bd-proceso__texto {
	font-size: 0.875rem;
	line-height: 1.6;
	margin: 0 0 var(--bd-e3);
}

/* El color lo hereda de la regla de enlaces de base.css, que sobre blanco
   es --bd-coral-ink (4.79:1). A 13px hace falta ese y no el de marca.
   Sin subrayado en reposo porque es una acción al final de una tarjeta,
   no un enlace dentro de un párrafo; al pasar por encima aparece, para
   que se vea que es un enlace y no un rótulo. */
.bd-proceso__enlace {
	display: inline-block;
	margin: 0;
	font-size: 0.8125rem;
	text-decoration: none;
}

.bd-proceso__enlace:hover,
.bd-proceso__enlace:focus-visible {
	text-decoration: underline;
}

/* ── Las fases, en la página Procesos ──────────────────────────────────
   Las dos tablas de 2020 pasan a esto. Una tabla con una fila de
   encabezados y tres de datos es una grilla disfrazada.

   El mecanismo del filete es EL MISMO que .bd-procesos, y por la razón que
   se aprendió el 2026-08-07: con gap:1px y el color en el fondo del
   contenedor, una posición vacía deja ver el fondo entero del tamaño de
   una celda. Aquí cada celda pinta su propio filete hacia la izquierda y
   hacia arriba, y overflow:hidden recorta los del perímetro.             */

.bd-fases {
	display: grid;
	gap: 0;
	overflow: hidden;
	margin-top: var(--bd-e4);
}

@media (min-width: 700px) {
	.bd-fases--tres { grid-template-columns: repeat(3, 1fr); }
	.bd-fases--cuatro { grid-template-columns: repeat(4, 1fr); }
}

.bd-fase {
	padding: var(--bd-e4) var(--bd-e3);
	box-shadow:
		-1px 0 0 color-mix(in srgb, var(--bd-ink) 22%, transparent),
		0 -1px 0 color-mix(in srgb, var(--bd-ink) 22%, transparent);
}

.bd-fase .bd-cejilla {
	margin-bottom: var(--bd-e2);
}

/* Los tres niveles y no solo h3, porque la misma celda aparece a tres
   profundidades distintas y el encabezado tiene que seguir al documento:
   h4 en las cuatro fases de medición cuando colgaban de un h3 dentro de
   Servicios, h3 en las tarjetas de proceso, y h2 desde que la medición es
   la página 797 y su título es el h1. Sin esta regla el encabezado sin
   estilo hereda un tamaño MAYOR que los que sí lo tienen: el nivel baja y
   el tamaño sube en el mismo componente. */
.bd-fase :is(h2, h3, h4) {
	font-size: 1.1875rem;
	margin: 0 0 var(--bd-e1);
}

/* Dentro de una celda las listas van sin el guion coral: en una grilla de
   tres celdas con tres puntos cada una, nueve guiones coral son ruido. El
   coral de la celda es su cejilla. */
.bd-fase ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.9375rem;
	/* transparent y no --bd-paper: mezclar con el papel da un gris opaco fijo,
	   un séptimo color de paleta disfrazado de variación. Ver la explicación
	   completa junto a .bd-ficha__rotulo, más abajo en este archivo. */
	color: color-mix(in srgb, var(--bd-ink) 72%, transparent);
}

.bd-fase ul li {
	margin-bottom: var(--bd-e1);
}

.bd-fase a {
	font-weight: var(--bd-peso-fuerte);
	text-decoration: none;
}

.bd-fase a:hover,
.bd-fase a:focus-visible {
	text-decoration: underline;
}

/* ── Quién acompaña ─────────────────────────────────────────────────────
   El retrato a la izquierda y la bio, la cita y el enlace a la derecha.
   La dirección C pone la prueba adelante, y aquí la prueba es la persona.

   El retrato es un placeholder hasta que llegue la foto (D4). El hueco
   está reservado con su proporción exacta, así que cuando la foto entre no
   hay que rediseñar nada: la sección ya tiene su altura.                 */

.bd-quien {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bd-e4);
	align-items: start;
	margin-top: var(--bd-e5);
}

@media (min-width: 700px) {
	.bd-quien {
		/* Los 300px del mockup para el retrato, el resto para el texto. */
		grid-template-columns: 300px 1fr;
		gap: var(--bd-e5);
	}
}

.bd-quien__retrato {
	margin: 0;
}

/* aspect-ratio y object-fit, y no solo width:100%: es lo que hace que el
   hueco siga siendo 4:5 cuando Christine reemplace el placeholder por una
   foto de otra proporción. Sin esto, la sección cambiaría de alto y de
   composición el día que llegue la fotografía, que es justo lo que D4
   quiere evitar. */
.bd-quien__retrato img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.bd-quien__bio {
	max-width: 52ch;
	margin: 0 0 var(--bd-e3);
}

/* El filete coral es un elemento no textual: sobre blanco el coral de
   marca da 3.70:1 y para esto vale de sobra (spec §5.2). El texto de la
   cita va en tinta, no en coral.

   GeneratePress define, sobre la etiqueta desnuda, `blockquote { border-
   left: 5px solid rgba(0,0,0,.05); padding: 20px; font-style: italic;
   margin: 0 0 1.5em; }`. Aquí se anula CADA propiedad de ese bloque, no
   solo las que la sección necesita distintas: border-left y padding-left
   se sustituyen por los propios, pero padding-top/right/bottom y font-
   style también hay que ponerlos a cero/normal explícitamente o se cuelan
   sin que ninguna de las reglas de abajo los toque. */
.bd-quien__cita {
	margin: 0 0 var(--bd-e3);
	padding: 0 0 0 var(--bd-e2);
	border-left: 2px solid var(--bd-coral);
	border-radius: 0;
	font-size: 1.1875rem;
	font-style: normal;
	line-height: 1.5;
	letter-spacing: -0.012em;
	max-width: 46ch;
}

/* El tema por defecto también le pone su propio margen al párrafo interior
   del blockquote. Se anula para que el único espaciado sea el de arriba. */
.bd-quien__cita p {
	margin: 0;
}

.bd-quien__enlace {
	display: inline-block;
	margin: 0;
	font-size: 0.8125rem;
	text-decoration: none;
}

.bd-quien__enlace:hover,
.bd-quien__enlace:focus-visible {
	text-decoration: underline;
}

/* ── Testimonios en la portada ──────────────────────────────────────────
   Dos extractos sobre negro, con enlace a los nueve. Es la única sección
   nueva de la semana sobre fondo oscuro, y va pegada a la banda de cierre:
   las dos juntas son el cierre negro de la página.

   Sobre negro el gris de marca sí se puede usar como texto —9.62:1— y es
   donde va la atribución, para que la cita pese más que el nombre. Sobre
   blanco eso estaría prohibido (spec §5.2).                              */

.bd-testimonios__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bd-e5);
	margin-top: var(--bd-e4);
}

@media (min-width: 900px) {
	.bd-testimonios__grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* Se anulan el filete y la sangría que el bloque de cita trae por defecto:
   aquí la cita no necesita marcarse, porque toda la banda es la cita. */
.bd-testimonios__cita {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
}

.bd-testimonios__cita p {
	font-size: 1.125rem;
	line-height: 1.58;
	margin: 0;
}

.bd-testimonios__cita cite {
	display: block;
	margin-top: var(--bd-e2);
	font-style: normal;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	color: var(--bd-mute);
}

/* El color lo hereda de .bd-oscuro a, que es el coral de marca: sobre negro
   da 5.10:1 y a 14px pasa AA. El filete inferior en vez de subrayado para
   que sea un enlace de acción y no de prosa, como los de los procesos. */
.bd-testimonios__mas {
	margin: var(--bd-e4) 0 0;
}

.bd-testimonios__mas a {
	display: inline-block;
	font-size: 0.875rem;
	text-decoration: none;
	border-bottom: 1.5px solid var(--bd-coral);
	padding-bottom: 4px;
}

.bd-testimonios__mas a:hover,
.bd-testimonios__mas a:focus-visible {
	border-bottom-color: var(--bd-paper);
}

/* ── Cierre ─────────────────────────────────────────────────────────────
   La última banda antes del pie. En el mockup es .c-end: el titular a la
   izquierda y el CTA a la derecha, los dos alineados por su línea de base
   inferior, sobre negro.

   El titular NO usa la escala de h2 de la capa base: el mockup lo fija en
   40px, más contenido que un título de sección, porque aquí lo que pesa es
   el botón.                                                              */

.bd-cierre {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	/* Alineados por abajo, no centrados: es lo que hace que el botón parezca
	   la respuesta a la frase y no un elemento suelto a su lado. */
	align-items: flex-end;
	gap: var(--bd-e4) var(--bd-e5);
	padding-block: var(--bd-e6);
}

.bd-cierre__titular {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: var(--bd-peso-fuerte);
	max-width: 22ch;
	margin: 0;
}

.bd-cierre__accion {
	margin: 0;
}

/* ── Los nueve testimonios ──────────────────────────────────────────────
   La página /testimonios/. Es lo único de la semana 2 que no vive en la
   portada, y también lo único que NO va a sangre.

   El motivo es concreto y no estético: .bd-sangre se sale del contenedor
   con margin-inline: calc(50% - 50vw), y ese 50% es la mitad del ancho del
   PADRE, así que la cuenta solo cuadra si el padre está centrado en el
   viewport. En la portada lo está porque functions.php le quita la barra
   lateral. En una página interna, GeneratePress decide la disposición según
   si el área de widgets de la barra lateral tiene contenido: si alguien
   añade un widget desde el panel, el padre deja de estar centrado y la
   banda se descoloca. Un texto largo se lee mejor acotado, además.

   Cada relato se separa con un filete coral arriba en vez de con aire:
   nueve textos largos seguidos necesitan una señal de dónde empieza cada
   uno. Es un elemento no textual, así que el coral de marca vale (3.70:1,
   spec §5.2).                                                            */

.bd-nueve {
	/* 74ch, no el ancho completo: por encima de unos 75 caracteres por línea
	   el ojo pierde el renglón al volver a la izquierda. */
	max-width: 74ch;
}

.bd-testimonio {
	margin: 0 0 var(--bd-e6);
	padding: var(--bd-e4) 0 0;
	border-top: 2px solid var(--bd-coral);
	/* GeneratePress y el estilo por defecto del bloque de cita ponen su
	   propio filete a la izquierda y su propia sangría. Se anulan para que
	   el filete sea uno y sea el nuestro. */
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
	padding-left: 0;
	font-style: normal;
}

.bd-testimonio p {
	font-size: 1.0625rem;
	line-height: 1.62;
	margin-block: 0 var(--bd-e2);
}

.bd-testimonio ul {
	margin: 0 0 var(--bd-e2);
	padding-left: var(--bd-e3);
}

.bd-testimonio li {
	font-size: 1.0625rem;
	line-height: 1.5;
	margin-bottom: var(--bd-e1);
}

/* La atribución es lo que hace verificable el testimonio, así que va en
   tinta y en semibold, no en gris: --bd-mute sobre blanco da 1.96:1 y está
   prohibido como texto (spec §5.2). font-style normal porque el navegador
   pone <cite> en cursiva y aquí es un nombre y un cargo, no un título. */
.bd-testimonio cite {
	display: block;
	margin-top: var(--bd-e3);
	font-style: normal;
	font-size: 0.875rem;
	font-weight: var(--bd-peso-fuerte);
	color: var(--bd-ink);
	letter-spacing: 0.01em;
}

/* El último no arrastra el margen de abajo: si no, la página termina con
   88px de blanco antes del pie. */
.bd-testimonio:last-child {
	margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   Páginas internas · semana 3

   Un solo sistema con dos variantes (D11): la entrada, el cuerpo y el
   cierre son iguales en las nueve páginas, y las cinco de servicio
   añaden una ficha lateral.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── La banda de entrada ────────────────────────────────────────────────
   Lo que sustituye al banner coral de 2020. El fondo y el color los pone
   .bd-oscuro, que ya existe; aquí solo van el ritmo y las medidas.

   Más baja que el hero a propósito: el hero mide min-height 78vh porque
   abre el sitio, y una página interna continúa. Es la diferencia entre
   abrir y seguir, y se nota al navegar de la portada a una interna.      */

.bd-cabecera {
	padding-block: var(--bd-e6) calc(var(--bd-e6) - var(--bd-e2));
}

/* La ruta. Es el único sitio del sistema donde un enlace va sobre negro a
   tamaño pequeño, así que usa --bd-coral, que ahí da 5.10:1. El separador
   sí puede ir en gris: no es texto, es puntuación. */
.bd-cabecera__ruta {
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bd-mute);
	margin: 0 0 var(--bd-e3);
}

.bd-cabecera__ruta strong {
	color: var(--bd-paper);
	font-weight: var(--bd-peso-fuerte);
}

.bd-cabecera__ruta span {
	color: var(--bd-coral);
	margin-inline: 0.35em;
}

/* El titular de la cabecera se sale de la escala global, como el del hero,
   pero un paso por debajo: 44px contra los 52 de h1 y los 60 del hero. La
   jerarquía entre portada e interna se lee en el tamaño. */
.bd-cabecera__titulo {
	font-size: clamp(1.875rem, 3.4vw, 2.75rem);
	font-weight: var(--bd-peso-fuerte);
	max-width: 22ch;
	margin: var(--bd-e1) 0 0;
}

/* El punto coral, el mismo signo de puntuación visual que el hero, y por la
   misma razón como pseudo-elemento y no como bloque: un wp:group vacío se
   convierte en el editor en el cartel «Agrupa bloques juntos». */
.bd-cabecera__bajada::before {
	content: "";
	display: block;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background-color: var(--bd-coral);
	margin-block: var(--bd-e3) var(--bd-e2);
}

.bd-cabecera__bajada {
	font-size: 1.1875rem;
	color: var(--bd-mute);
	max-width: 46ch;
	margin: 0;
}

/* Si la página no tiene sección madre, Christine borra el párrafo de la
   ruta y la cejilla queda como primer elemento: sin este ajuste se comería
   el margen inferior que traía la ruta. */
.bd-cabecera > .bd-cejilla:first-child {
	margin-top: 0;
}

/* ── El cuerpo de una página interna ────────────────────────────────────
   Una sola columna, con la medida en caracteres y no en píxeles: lo que
   cansa de leer no es el ancho de la caja, es cuántos caracteres tiene que
   recorrer el ojo antes de volver.                                       */

.bd-pagina {
	padding-block: var(--bd-e6) 0;
}

.bd-pagina__cuerpo {
	max-width: 66ch;
}

/* Contacto ya no acota la PÁGINA a 66ch. Lo hacía porque el formulario vivía
   solo en ella, y el resultado medido era el contrario del que se buscaba: la
   caja de 66ch pegada a la izquierda y el 60% derecho de la página en blanco,
   sin nada que explicara por qué escribir. Lo que hay que acotar es cada
   columna, no el contenedor; de eso se encarga la grilla del final del
   archivo. Aquí solo queda el aire de abajo, que antes ponía el cierre.

   .bd-pagina.bd-formulario y no .bd-formulario a secas: son las mismas dos
   clases en el mismo elemento en contenido/pagina-38.html, y acotar solo
   .bd-formulario sin .bd-pagina delante bastaría hoy pero es más frágil si
   algún día el formulario vive dentro de otra cosa. */
.bd-pagina.bd-formulario {
	padding-bottom: var(--bd-e6);
}

/* La entradilla es el primer párrafo de la página, el que hoy va justo
   debajo del subtítulo. Un punto más grande que el cuerpo, para que la
   página tenga una entrada antes del primer apartado. */
.bd-pagina__entradilla {
	font-size: 1.1875rem;
	line-height: 1.55;
	margin-bottom: var(--bd-e4);
}

/* Cada apartado. El aire va aquí, entre hermanos, y no en espaciadores
   sueltos: el contenido de 2020 los tenía de 25, 26, 27 y 30px puestos a
   mano, y el ritmo de una página no puede depender de que quien edite
   acierte el número. */
.bd-bloque + .bd-bloque {
	margin-top: var(--bd-e4);
}

/* La medida de lectura de un párrafo suelto en .bd-bloque, para las páginas
   «documento» (D11) que no tienen .bd-pagina__cuerpo: ese envoltorio solo
   existe en la variante con ficha, así que un párrafo de prosa directo en
   .bd-pagina -sin ningún ancestro que lo acote- se estira a los 1145px del
   contenedor entero. Va en el párrafo (> p) y no en .bd-bloque, que también
   envuelve .bd-fases: acotar el bloque completo aplastaría esa grilla. */
.bd-bloque > p {
	max-width: 66ch;
}

/* El filete coral que abre un apartado. Va sobre el encabezado y no como
   un elemento aparte, así que no hay nada que se pueda quedar huérfano al
   borrar el título.

   display:inline-block para que el filete mida lo que el título y no todo
   el ancho de la columna: un filete a toda la caja partiría la página en
   secciones, y estos son apartados de un mismo texto. */
.bd-bloque > h2,
.bd-bloque > h3 {
	display: inline-block;
	padding-top: var(--bd-e3);
	border-top: 2px solid var(--bd-coral);
	margin-bottom: var(--bd-e2);
}

/* Las listas, con guion coral en vez de viñeta. El guion es un elemento no
   textual, así que puede ir en --bd-coral incluso sobre blanco (§5.2).

   Se evaluó sustituir el guion con li::marker { content; color } para no
   tocar list-style y no perder semántica de lista en absoluto. Se descartó:
   ::marker no admite width/height/background (no puede dibujar la barra de
   12×1px, solo un carácter de texto), y ese carácter tampoco se pinta hoy en
   ningún Safari publicado —el soporte de `content` en ::marker recién se
   fusionó en WebKit trunk el 14 de julio de 2026 (bug 319211), sin llegar
   todavía a una versión publicada—, así que Safari quedaría con el punto
   redondo de siempre mientras el resto del stack ve un guion: un guion
   inconsistente entre navegadores es peor que uno perdido en accesibilidad.

   Se temía que list-style:none quitara también la semántica de lista en
   WebKit. MEDIDO EL 2026-08-30 Y NO OCURRE: el <ul> conserva el rol `list`
   en Safari 26.3.1, igual que una lista nativa. Comprobado con
   tools/rol-en-safari.py, que pregunta el rol computado por el endpoint
   «Get Computed Role» de WebDriver del W3C -no en Chrome, que no distingue
   nada porque Blink nunca tuvo ese comportamiento-, en una página de
   laboratorio con las tres variantes y también sobre /coaching-ejecutivo-11/
   servida de verdad. Las tres dan `list`.

   O sea que no hay nada que arreglar aquí: no hace falta
   ::marker { color: transparent }, no hay que quitar list-style:none, y
   sobre todo no hay que poner el `role="list"` que rompería el editor.
   Se deja escrito por qué esa vía estaba cerrada, porque el dato costó
   encontrarlo: el bloque de lista de Gutenberg (core/list) no emite `role`
   en su save(), así que escribirlo a mano en contenido/ hace que
   validateBlock() lo vea como un atributo inesperado y marque el bloque como
   contenido no válido en cuanto Christine lo abre en el editor -leído en
   isEqualTagAttributePairs(), wp-includes/js/dist/blocks.js-.

   El veredicto vale para Safari 26.3.1. El bug era real en WebKit antiguo;
   si alguna vez importa un Safari más viejo, la orden que lo responde es
   `python3 tools/rol-en-safari.py --pagina-de-prueba`.

   VERIFICACIÓN de la parte de Gutenberg: por lectura de código (wp-includes/
   js/dist/blocks.js, validateBlock/isEquivalentHTML/isEqualTagAttributePairs;
   wp-includes/js/dist/block-library.js, list_save_save), no abriendo el
   editor de bloques en un navegador. La ronda de arreglos finales de la 3b
   lo intentó dos veces -cookie de sesión y login por formulario- y las dos
   las bloqueó el clasificador del entorno de esa tarea. Quien pueda abrir
   /wp-admin/ con una sesión real: abrir cualquiera de las cinco páginas de
   proceso en el editor de bloques y confirmar (o desmentir) que ninguna
   lista aparece marcada como contenido no válido.

   VERIFICACIÓN del rol de lista en Safari: HECHA el 2026-08-30, en Safari
   26.3.1 sobre macOS 26.3.1 (build 25D2128). Para repetirla hace falta
   habilitar la automatización una vez -`sudo safaridriver --enable`, y en
   Safari: Ajustes → Avanzado → «Mostrar funciones para desarrolladores web»,
   y luego menú Desarrollo → Permitir automatización remota-. La salida
   completa está en S4.2 del spec. */
.bd-lista {
	list-style: none;
	margin: var(--bd-e2) 0;
	padding: 0;
}

.bd-lista li {
	position: relative;
	padding-left: 26px;
	margin-bottom: var(--bd-e1);
}

.bd-lista li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 12px;
	height: 1px;
	background-color: var(--bd-coral);
}

/* Una cita dentro del cuerpo, para los wp:quote que traen 67 y 107.

   Mismo problema que .bd-quien__cita unas líneas antes: GeneratePress declara
   sobre la etiqueta blockquote desnuda `border-left:5px solid rgba(0,0,0,.05);
   padding:20px;font-size:1.2em;font-style:italic;margin:0 0 1.5em`. Se anula
   CADA propiedad de ese bloque, no solo las que la cita quiere distintas: si
   solo se pone padding-left, el padding-top/right/bottom de 20px y el italic
   se cuelan sin que ninguna regla de aquí abajo los toque. */
.bd-pagina blockquote {
	margin: var(--bd-e4) 0;
	padding: 0 0 0 var(--bd-e3);
	border-left: 2px solid var(--bd-coral);
	border-radius: 0;
	font-size: 1.1875rem;
	font-style: normal;
	font-weight: var(--bd-peso-fuerte);
	line-height: 1.35;
}

.bd-pagina blockquote p:last-child {
	margin-bottom: 0;
}

/* La cita de 37 vive en una banda .bd-sangre .bd-oscuro > .bd-seccion, fuera
   de .bd-pagina: la regla de arriba no la alcanza y se queda con el bloque
   entero de GeneratePress sobre la etiqueta blockquote desnuda. .bd-seccion
   blockquote sin más se descartó: esa misma etiqueta desnuda la comparten los
   testimonios (.bd-testimonio, .bd-testimonios__cita), que ya anulan el
   filete izquierdo y la sangría a su manera, y un selector por etiqueta
   empataría en especificidad con esas clases y ganaría por ir después en el
   archivo — les devolvería el filete izquierdo que ya habían quitado. Se
   marca la cita con su propia clase, mismo mecanismo que .bd-quien__cita:
   anula CADA propiedad del bloque, no solo las que cambian.

   max-width en ch de la propia cita (19px) y no heredado de un .bd-pagina__
   cuerpo que aquí no existe: sin él la cita ocupa los 1190px del contentSize
   completo en vez de una medida de lectura. */
.bd-seccion__cita {
	margin: var(--bd-e4) 0;
	padding: 0 0 0 var(--bd-e3);
	border-left: 2px solid var(--bd-coral);
	border-radius: 0;
	font-size: 1.1875rem;
	font-style: normal;
	font-weight: var(--bd-peso-fuerte);
	line-height: 1.35;
	max-width: 46ch;
}

.bd-seccion__cita p:last-child {
	margin-bottom: 0;
}

/* El cierre. La página termina con el patrón portada-cierre, que ya trae su
   propio padding; lo único que hace falta es el aire de antes. */
.bd-pagina + .bd-sangre {
	margin-top: var(--bd-e6);
}

/* ── La variante con ficha ──────────────────────────────────────────────
   D11. Las cinco páginas de proceso ponen a la izquierda los datos que
   alguien compara antes de escribir, y de paso le dan un trabajo al tercio
   de página que en 2020 se quedó vacío (§2.4).

   El reparto es 300px fijos y el resto para el texto, y no un porcentaje:
   la ficha tiene un contenido de ancho conocido —un rótulo corto y un
   valor de dos o tres palabras— y estirarla con el viewport solo añadiría
   aire dentro de la caja.                                                */

.bd-pagina--con-ficha .bd-pagina__cuerpo {
	max-width: 62ch;
}

@media (min-width: 900px) {
	.bd-pagina--con-ficha .bd-pagina__interior {
		display: grid;
		grid-template-columns: 300px minmax(0, 1fr);
		gap: var(--bd-e6);
		align-items: start;
	}
}

/* En móvil la ficha va DESPUÉS del texto y no antes: en una columna, abrir
   con cuatro datos sueltos antes de decir de qué va la página deja a quien
   lee sin contexto para entenderlos. En escritorio el orden visual lo pone
   la grilla; en el documento la ficha va primero, que es lo que hace que
   el tabulador la encuentre antes del cuerpo, y eso sí interesa: es donde
   está el botón. */
@media (max-width: 899px) {
	.bd-pagina--con-ficha .bd-pagina__interior {
		display: flex;
		flex-direction: column;
	}
	.bd-pagina--con-ficha .bd-ficha {
		order: 2;
		margin-top: var(--bd-e5);
	}
}

.bd-ficha__datos {
	border: 1px solid color-mix(in srgb, var(--bd-ink) 22%, transparent);
	padding: var(--bd-e3);
}

/* El rótulo es la etiqueta del dato: pequeño, en versalitas, y en un gris
   de texto de verdad. NO --bd-mute, que sobre blanco da 1.96:1 y está
   prohibido como texto (§5.2).

   Mezclado con transparent y no con --bd-paper: mezclar con el papel da un
   gris opaco fijo, un séptimo color de paleta disfrazado de variación, y
   aquí hoy se veía igual solo porque el papel es blanco puro. La forma que
   la restricción autoriza es con transparent —así lo hacen las otras
   mezclas de este archivo—, que es un tinte de --bd-ink que compone con lo
   que tenga detrás, no un color nuevo.

   72% medido en Chrome (no calculado): color-mix(in srgb, var(--bd-ink) 72%,
   transparent) resuelve a rgb(84,84,84) sobre --bd-paper, contraste 7.62:1.
   El primer valor que pasaba de 7:1 era 70% (7.07:1), margen demasiado fino
   para el mismo error que el 58% original; 72% deja aire de sobra sin
   acercarse al negro de --bd-ficha__valor. La jerarquía rótulo/valor no
   depende de este gris: la versalita, el letter-spacing y el tamaño ya la
   cargan. */
.bd-ficha__rotulo {
	font-size: 0.71875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--bd-ink) 72%, transparent);
	margin: var(--bd-e2) 0 2px;
}

.bd-ficha__rotulo:first-of-type {
	margin-top: 0;
}

.bd-ficha__valor {
	font-size: 0.9375rem;
	font-weight: var(--bd-peso-fuerte);
	margin: 0;
}

/* El botón, a todo el ancho de la ficha: es la acción de la columna, no un
   enlace más. */
.bd-ficha__accion {
	margin: var(--bd-e3) 0 0;
}

.bd-ficha__accion .bd-cta {
	display: block;
	text-align: center;
	font-size: 0.875rem;
	padding-inline: var(--bd-e2);
}

.bd-ficha__otros {
	margin-top: var(--bd-e4);
}

/* Sin esta regla el título hereda el h2 global: 36px en dos líneas dentro de
   una columna de 300px, aplastando la ficha de datos que tiene encima. Mismo
   tamaño y tono que .bd-ficha__rotulo, unas líneas más arriba: es un rótulo
   de la ficha, no un título de sección. */
.bd-ficha__otros-titulo {
	font-size: 0.71875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--bd-ink) 72%, transparent);
	margin: 0 0 var(--bd-e2);
}

/* Los enlaces a los otros procesos, uno por línea y con filete arriba: es
   una lista, aunque cada uno sea su propio párrafo para poder editarlo. */
.bd-ficha__otros p {
	margin: 0;
	font-size: 0.9375rem;
	border-top: 1px solid color-mix(in srgb, var(--bd-ink) 12%, transparent);
}

.bd-ficha__otros p a {
	display: block;
	padding-block: var(--bd-e1);
	text-decoration: none;
}

.bd-ficha__otros p a:hover,
.bd-ficha__otros p a:focus-visible {
	text-decoration: underline;
}

/* La página actual no se enlaza a sí misma. Christine borra ese párrafo al
   componer cada página; esta regla es la red por si se olvida: un enlace a
   la página en la que ya estás no lleva a ninguna parte. No se puede poner
   este aria-current solo: el patrón se cachea y se copia dentro del
   contenido de cada página al insertarlo (ver el comentario junto a estos
   enlaces en pagina-ficha.php), así que nada dentro del patrón puede saber
   en qué página está cada visitante. Mismo tono que --bd-ficha__rotulo:
   72%, con transparent y no con --bd-paper. */
.bd-ficha__otros p a[aria-current="page"] {
	color: color-mix(in srgb, var(--bd-ink) 72%, transparent);
	pointer-events: none;
}

/* ── Contacto: el porqué y el formulario ────────────────────────────────
   La página era un formulario suelto en medio del blanco. Ahora son dos
   columnas: a la izquierda qué pasa cuando escribes y cómo llegar a
   Christine sin el formulario, a la derecha el formulario.

   El reparto y el corte son los mismos que .bd-pagina--con-ficha, más
   arriba en este archivo, y a propósito: son las dos únicas maquetas de
   dos columnas del sitio, y si una reparte 300px y la otra un porcentaje,
   quien pasa de una página de proceso a contacto ve dos sistemas.

   Lo que SÍ cambia respecto de la ficha es el orden en móvil. Allí la
   ficha baja a order:2 porque abrir con cuatro datos sueltos deja a quien
   lee sin contexto para entenderlos. Aquí la columna izquierda ES el
   contexto -tres frases, no cuatro datos-, así que se queda arriba: es lo
   que responde «¿por qué le escribo?» antes de pedir un correo. Sin
   order, entonces, y el orden del documento vale para los dos anchos. */

@media (min-width: 900px) {
	.bd-pagina.bd-formulario {
		display: grid;
		grid-template-columns: 300px minmax(0, 1fr);
		gap: var(--bd-e6);
		align-items: start;
	}
}

/* En móvil el retrato NO va a todo el ancho. Medido a 390px: la foto sola
   ocupaba 342x428 y el primer campo del formulario caía a 1000px de scroll,
   o sea que para escribir había que pasar de largo una cara a tamaño póster.
   Acotada a 9rem son 144x180 y el formulario sube unos 250px, sin perder lo
   que la foto está haciendo ahí: decir a quién le escribes.

   Se probó antes recomponer la columna como una fila -foto a la izquierda,
   nombre y vías a la derecha- con una grilla de dos columnas y la figura
   abarcando todas las filas. No funciona sin filas explícitas: en
   `grid-row: 1 / -1` el -1 es la última línea EXPLÍCITA, y sin
   grid-template-rows no hay ninguna, así que resuelve a 1/1 y la figura
   abarca una sola fila. El resultado medido fue el cargo debajo de la foto y
   el correo al lado del nombre. Acotar el ancho hace el mismo trabajo y no
   depende de cuántos párrafos tenga la columna. */
@media (max-width: 899px) {
	.bd-contacto__quien {
		margin-bottom: var(--bd-e5);
	}

	.bd-contacto__retrato {
		max-width: 9rem;
	}
}

/* La columna izquierda es el retrato de Christine y nada más: a quién le
   escribes, no una lista de garantías. La versión anterior explicaba en tres
   frases qué pasaba al escribir, bajo dos rótulos en versalitas y separadas
   por un filete; se retiró entera porque se leía como plantilla y no como
   este sitio: dos cejillas en 300px, tres frases del mismo largo y dos veces
   la misma figura -«X, no Y»- en cuatro líneas seguidas. Una cara y un cargo
   dicen lo mismo sin prometer nada, y no hay ni una palabra nueva: el retrato
   y el cargo son los que ya usa portada-quien-acompana.                    */

/* Mismo tratamiento que .bd-quien__retrato: aspect-ratio y object-fit para
   que el hueco siga siendo 4:5 el día que Christine reemplace la foto por
   otra de proporción distinta (D4). */
.bd-contacto__retrato {
	margin: 0 0 var(--bd-e3);
}

.bd-contacto__retrato img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.bd-contacto__nombre {
	font-size: 1.1875rem;
	font-weight: var(--bd-peso-fuerte);
	margin: 0;
}

/* El cargo, en el mismo gris de texto que los rótulos de la ficha: 72% con
   transparent, 7.62:1 sobre blanco. --bd-mute está prohibido aquí (§5.2). */
.bd-contacto__cargo {
	font-size: 0.9375rem;
	color: color-mix(in srgb, var(--bd-ink) 72%, transparent);
	margin: 2px 0 var(--bd-e3);
}

.bd-contacto__via {
	font-size: 0.9375rem;
	margin: 0 0 var(--bd-e1);
}

/* El correo largo no puede empujar la columna: 300px son fijos y
   «christine@boudesseul.com» no parte por sí solo en ningún hueco. */
.bd-contacto__via a {
	overflow-wrap: anywhere;
}

/* El logotipo de LinkedIn, delante del enlace.
   Va por mask-image y no como <img>: así el glifo es una silueta que se
   pinta con background-color, y no un archivo con un color dentro que
   habría que mantener aparte de tokens.css.

   En tinta y no en coral. LinkedIn permite su marca en monocromo negro o
   blanco, y el coral no es ninguno de los dos; además esta página ya lleva
   coral en el punto de la cabecera, en el botón y en los enlaces, y un
   cuarto uso convierte el acento en fondo.

   Si el navegador no entendiera la máscara, el enlace se ve sin marca: el
   texto dice «LinkedIn» por su cuenta. */
.bd-contacto__linkedin::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 0.45em;
	vertical-align: -0.15em;
	background-color: var(--bd-ink);
	mask-image: url("../img/linkedin.svg");
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
}

/* ── El formulario ──────────────────────────────────────────────────────
   CoBlocks trae su propio CSS y sus campos heredan la tipografía del
   navegador, no la del sitio: de ahí el font:inherit, la misma razón por la
   que lo llevan los botones de filtro de los desafíos.

   Los selectores van sobre las clases de CoBlocks porque el markup del
   bloque no lo controlamos: no hay un className que ponerle a cada input
   desde el editor.                                                       */

.bd-formulario .coblocks-form {
	max-width: 40rem;
}

.bd-formulario .coblocks-label {
	display: block;
	font-size: 0.75rem;
	font-weight: var(--bd-peso-fuerte);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: var(--bd-e1);
}

/* El asterisco de obligatorio: coral de TEXTO, porque es pequeño y va
   sobre blanco (§5.2). */
.bd-formulario .required {
	color: var(--bd-coral-ink);
}

.bd-formulario input[type="text"],
.bd-formulario input[type="email"],
.bd-formulario input[type="tel"],
.bd-formulario textarea {
	font: inherit;
	width: 100%;
	padding: 12px 14px;
	background-color: var(--bd-paper);
	color: var(--bd-ink);
	border: 1px solid color-mix(in srgb, var(--bd-ink) 22%, transparent);
	border-radius: 2px;
	transition: border-color 140ms ease;
}

/* Nombre, correo y teléfono son datos de identificación, no la conversación:
   se quedan en 24rem aunque la columna dé para 40. Un campo de 640px para un
   nombre no es generosidad, es un blanco que la persona tiene que cruzar con
   la vista para volver al principio de la línea siguiente. */
.bd-formulario input[type="text"],
.bd-formulario input[type="email"],
.bd-formulario input[type="tel"] {
	max-width: 24rem;
}

.bd-formulario input:hover,
.bd-formulario textarea:hover {
	border-color: color-mix(in srgb, var(--bd-ink) 45%, transparent);
}

/* El error, cuando el navegador lo detecta. :user-invalid y no :invalid: un
   campo obligatorio está :invalid desde que la página carga, así que con
   :invalid el formulario se pinta entero en rojo antes de que nadie escriba
   nada. :user-invalid solo se activa después de que la persona interactúe.

   El color es --bd-coral-ink y no --bd-coral por §5.2: es un borde fino y
   el coral de marca da 3.70:1 sobre blanco. */
.bd-formulario input:user-invalid,
.bd-formulario textarea:user-invalid {
	border-color: var(--bd-coral-ink);
}

/* El foco no se personaliza aquí: el :focus-visible de base.css lleva
   !important a propósito, porque es accesibilidad. Solo se quita el borde
   redundante para que el contorno coral se lea limpio. */
.bd-formulario textarea {
	min-height: 11rem;
	resize: vertical;
}

/* La pregunta abierta no es un campo más: es la pregunta de la marca, la
   misma que da nombre a «embracing change», y hasta ahora se leía como el
   cuarto rótulo de una lista de cuatro. Puesta al punto de un subtítulo y en
   caja baja, la página pasa a pedir una cosa -que cuentes qué quieres
   cambiar- con tres datos de contacto delante.

   El selector va por posición porque CoBlocks no da una clase a la etiqueta
   de cada campo, solo a los campos: la única etiqueta seguida de un textarea
   es la suya (el <input type=hidden> del medio lo pone el plugin para
   mandar el texto del rótulo en el correo). Si CoBlocks cambiara ese orden,
   la etiqueta vuelve a verse como las otras tres: se pierde el énfasis, no
   se rompe la página. */
.bd-formulario label:has(+ input[type="hidden"] + textarea) {
	font-size: 1.5rem;
	font-weight: var(--bd-peso-normal);
	letter-spacing: normal;
	text-transform: none;
	margin-top: var(--bd-e5);
	margin-bottom: var(--bd-e2);
}

/* El asterisco no crece con la pregunta: a 24px un asterisco coral compite
   con el texto, y sigue diciendo lo mismo al tamaño de siempre. */
.bd-formulario label:has(+ input[type="hidden"] + textarea) .required {
	font-size: 0.75rem;
	vertical-align: super;
}

/* El botón de envío es el CTA del sistema. CoBlocks le pone su propia
   clase de bloque de botón, así que la regla tiene que ganarle: dos clases
   y el elemento, (0,2,1). */
.bd-formulario .wp-block-button__link,
.bd-formulario button[type="submit"] {
	font: inherit;
	font-size: 0.95rem;
	font-weight: var(--bd-peso-fuerte);
	letter-spacing: 0.01em;
	background-color: var(--bd-coral);
	color: var(--bd-ink);
	border: 0;
	border-radius: 2px;
	padding: 15px 30px;
	cursor: pointer;
	transition: background-color 160ms ease;
}

.bd-formulario .coblocks-form__submit {
	margin-top: var(--bd-e4);
}

.bd-formulario .wp-block-button__link:hover,
.bd-formulario button[type="submit"]:hover {
	background-color: var(--bd-ink);
	color: var(--bd-paper);
}

/* El acuse de envío. CoBlocks lo pinta en lugar del formulario, con el CSS
   del plugin: un párrafo suelto, del mismo tamaño que un rótulo, donde
   antes había una página entera. Al llegar ahí la persona ya no tiene nada
   que hacer, así que lo único que se le debe es que se vea que llegó. */
.bd-formulario .coblocks-form__submitted {
	border-left: 2px solid var(--bd-coral);
	padding: var(--bd-e3) var(--bd-e4);
	background-color: color-mix(in srgb, var(--bd-ink) 4%, transparent);
	font-size: 1.1875rem;
}