/* ═══════════════════════════════════════════════════════════════════════
   Capa base · lo que aplica a todo el sitio

   Los colores salen SIEMPRE de var(--bd-*). Ningún literal hexadecimal
   aquí: tests/test_css_lint.py lo verifica.

   La capa tipográfica usa selectores de elemento planos —body, h1, p— y
   NO :where(). El motivo es concreto: GeneratePress declara `body {
   font-family: …; font-size: 17px }` con especificidad 0,0,1, y
   :where(body) vale 0, así que perdía y el sitio seguía en la fuente del
   sistema a 17px. Con el selector plano ganamos por orden de aparición,
   que es lo que garantiza la cadena de dependencias de functions.php.

   La intención del :where() del plan se conserva igual: 0,0,1 sigue
   perdiendo contra cualquier clase (0,1,0), así que un patrón o el editor
   siguen pudiendo pisar esto sin necesidad de !important.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Variables globales de GeneratePress ────────────────────────────────
   GeneratePress imprime sus propias custom properties en un <style> inline
   del head, con su azul de fábrica entre ellas: --accent es #1e73be. Ese
   azul es el que seguía llegando al front después de la Tarea 4, porque
   theme.json no puede quitar lo que el tema padre inyecta por su cuenta.

   Se remapean a nuestros tokens en lugar de sobrescribir cada componente
   que las use: una regla en vez de veinte, y si GeneratePress estrena un
   componente nuevo, ya nace con el color correcto.

   El orden lo garantiza la cadena de dependencias de functions.php:
   generate-style se emite antes que bd-base, así que a igual
   especificidad gana esta declaración.                                   */

:root {
	--contrast: var(--bd-ink);
	--contrast-2: var(--bd-ink);
	--contrast-3: var(--bd-mute);
	--base: var(--bd-paper);
	--base-2: var(--bd-paper);
	--base-3: var(--bd-paper);
	--accent: var(--bd-coral-ink);
}

/* ── Desplazamiento por ancla ───────────────────────────────────────────
   El ítem «Modelo Lotus» de la barra no es una página: es el ancla
   #modelo-lotus de la portada. Sin esto el navegador salta de golpe y no
   queda claro que uno sigue en la misma página, solo más abajo. Con el
   desplazamiento suave el recorrido se ve, y el aire de arriba lo pone el
   scroll-margin-top de .bd-modelo en sections.css.

   Va en html y no en un contenedor: el elemento que desplaza el documento
   es el raíz. Quien pide menos movimiento lo recupera en auto por el
   bloque de prefers-reduced-motion de más abajo, que lleva !important.   */

html {
	scroll-behavior: smooth;
}

/* ── Navegación entre páginas ───────────────────────────────────────────
   Al pulsar «Testimonios» o cualquier otro ítem que lleve a otra URL, el
   navegador recarga el documento entero y la barra parpadea con él, aunque
   sea idéntica en las dos páginas: se va y vuelve en el mismo sitio, y el
   salto se lee como si el sitio se hubiera caído y vuelto a levantar.

   Con las transiciones de vista entre documentos el navegador toma una
   foto de la página que se va, otra de la que llega, y las funde. Todo lo
   que tenga view-transition-name queda fuera de esa fusión y se anima por
   su cuenta: la barra, al ser la misma en las dos, se queda quieta.

   Esto NO es un router de JavaScript. La página se sigue recargando —el
   HTML lo sigue emitiendo WordPress y no hay estado que mantener—; lo que
   desaparece es el parpadeo. Donde el navegador no lo soporte todavía, la
   navegación queda exactamente como está hoy, sin JavaScript de por medio
   y sin nada que falle.                                                  */

@view-transition {
	navigation: auto;
}

/* La barra es la misma en todas las páginas desde D12 —banda negra, mismo
   logotipo—, así que es la candidata natural a no moverse. El nombre debe
   ser único en el documento: solo hay un .site-header.

   El z-index no es decoración: `view-transition-name` convierte a la barra
   en un contexto de apilamiento, y eso encierra dentro de ella el
   `z-index: 99999` que GeneratePress le da al desplegable. Encerrado ahí,
   ese número solo ordena a los hermanos de dentro de la barra; frente al
   contenido de la página la barra entera valía `auto`, y la primera banda
   —`.bd-sangre`, que es `position: relative`— le pasaba por encima al ir
   después en el documento. El desplegable de «Nuestros Servicios» se veía
   recortado a la altura de la barra: «Comprender» asomaba y «Transformar»
   y «Sostener» quedaban tapados por el hero, con su sitio bien calculado y
   su texto en blanco. Nada en el menú estaba mal.

   Con la barra en `z-index: 10` su contexto entero se pinta por encima del
   contenido, que es lo que una barra de navegación tiene que hacer, y el
   desplegable vuelve a caer sobre la página. Lo comprueba
   tests/test_menu.py.

   Y `sticky` en vez de `relative`: la barra se queda arriba al bajar la
   página. `sticky` y no `fixed` porque sticky ocupa su hueco en el flujo —los
   115px de la barra siguen empujando a la primera banda hacia abajo— y con
   `fixed` habría que devolverle ese hueco a mano con un padding en el body,
   que es la clase de número que se desincroniza en cuanto la barra cambia de
   alto. El z-index de arriba ya la pone por encima del contenido, que es lo
   que un elemento pegado necesita. Lo comprueba tests/test_barra.py. */
.site-header {
	view-transition-name: bd-barra;
	z-index: 10;
	position: sticky;
	top: 0;
}

/* La consecuencia de pegar la barra: un ancla deja de llevar al sitio. Medido
   en /servicios/#comprender, el elemento aterrizaba con su borde superior en
   y=0 y la barra ocupa hasta y=115, así que la cejilla «Comprender» quedaba
   entera debajo de ella y el visitante llegaba a un bloque decapitado. Pasaba
   con las tres fases del menú y con #modelo-lotus de la portada, o sea con
   todos los destinos de segundo nivel.

   `scroll-padding-top` es el borde superior del área a la que el navegador
   lleva el scroll: con los 115px de la barra, el ancla aterriza justo debajo.
   Va en el elemento que hace scroll, que es <html>, y lo aplica también el
   scroll suave que ya estaba. Los 115px se miden, no se estiman: es el alto
   de .site-header, igual en 1440 y en 390. Si la barra cambia de alto, este
   número cambia con ella; lo comprueba tests/test_barra.py, que compara el
   alto real con el padding declarado en vez de dar los dos por buenos. */
html {
	scroll-padding-top: 115px;
}

/* Quien pide menos movimiento no recibe la fusión: la regla de
   prefers-reduced-motion de más abajo no alcanza a @view-transition, que no
   es una propiedad y no se puede pisar con !important. */
@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}
}

/* ── Tipografía global ──────────────────────────────────────────────── */

body {
	font-family: var(--bd-fuente);
	font-size: var(--bd-cuerpo);
	line-height: var(--bd-cuerpo-alto);
	font-weight: var(--bd-peso-normal);
	color: var(--bd-ink);
	background-color: var(--bd-paper);
	/* Inter tiene mejores formas alternativas para algunos glifos. */
	font-feature-settings: "cv05", "cv08";
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--bd-fuente);
	font-weight: var(--bd-peso-fuerte);
	line-height: 1.12;
	letter-spacing: var(--bd-titular-track);
	color: inherit;
	text-wrap: balance;      /* evita la última línea con una sola palabra */
}

h1 { font-size: var(--bd-titular); }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.5rem; }

p {
	text-wrap: pretty;
	margin-block: 0 var(--bd-e2);
}

strong, b { font-weight: var(--bd-peso-fuerte); }

/* ── Enlaces ────────────────────────────────────────────────────────────
   Sobre blanco, --bd-coral-ink (4.79:1). Sobre fondo oscuro, el coral de
   marca, que ahí da 5.10:1. Ver spec §5.2.                              */

a {
	color: var(--bd-coral-ink);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover { color: var(--bd-ink); }

/* ── Foco visible ───────────────────────────────────────────────────────
   Sin :where() y con !important a propósito: esto es accesibilidad y no
   debe poder sobrescribirse por accidente. El doble contorno garantiza
   visibilidad tanto sobre blanco como sobre negro.                       */

:focus-visible {
	outline: 3px solid var(--bd-coral) !important;
	outline-offset: 2px !important;
	border-radius: 2px;
}

/* ── Secciones a sangre ─────────────────────────────────────────────────
   GeneratePress encierra el contenido en 1190 px. La dirección C necesita
   bandas que lleguen a los bordes de la pantalla. Esto las saca del
   contenedor sin tocar el tema padre.

   El truco: margen negativo del 50% del viewport menos la mitad del
   contenedor. 50vw incluye el ancho de la barra de scroll, de ahí el
   ajuste con 100% para evitar el desbordamiento horizontal.             */

.bd-sangre {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	/* Sin esto, en Windows la barra de scroll provoca scroll horizontal. */
	padding-inline: max(var(--bd-e3), calc(50vw - 1190px / 2));
	box-sizing: border-box;
}

/* Banda oscura: el fondo negro invierte los colores de todo lo que lleva
   dentro, incluidos los enlaces, que aquí sí pueden usar el coral de marca. */

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

/* Sin :where() por la misma razón que arriba, pero además por una concreta:
   a:hover de la capa base vale 0,1,1, así que .bd-oscuro :where(a:hover),
   que valdría 0,1,0, perdería, y al pasar el ratón sobre un enlace de una
   banda negra se volvería negro sobre negro. Estas reglas valen 0,1,1 y
   0,1,2 y ganan por especificidad, no por orden.

   El CTA coral sí necesita pisar esto, y lo hace desde sections.css con
   .bd-oscuro .bd-cta (0,2,0), que gana a las dos.                        */

/* Banda clara: la contraparte de .bd-oscuro, para las secciones a sangre que
   van sobre blanco. Se declara explícitamente en vez de dejarlo al fondo por
   defecto del body, para que el patrón diga de qué color es su banda. */

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

.bd-oscuro a { color: var(--bd-coral); }
.bd-oscuro a:hover { color: var(--bd-paper); }
.bd-oscuro h1,
.bd-oscuro h2,
.bd-oscuro h3,
.bd-oscuro h4,
.bd-oscuro h5,
.bd-oscuro h6 { color: var(--bd-paper); }

/* ── Movimiento ─────────────────────────────────────────────────────────
   Regla global: quien pide menos movimiento no recibe ninguno. Las
   animaciones de bd.js consultan además matchMedia, para no arrancar
   siquiera el IntersectionObserver.                                     */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ── Solo para lectores de pantalla ─────────────────────────────────────
   Texto que hay que decir pero no mostrar. Ahora mismo lo usa el aviso de
   cuántos desafíos quedan tras filtrar.

   No es display:none ni visibility:hidden: las dos cosas sacan el elemento
   del árbol de accesibilidad, o sea que lo silencian, que es exactamente lo
   contrario de lo que hace falta. La receta es dejarlo de 1px, recortarlo y
   sacarlo del flujo: sigue ahí para quien escucha y no ocupa para quien ve.

   nowrap porque, encerrado en 1px, un texto que se pudiera partir crecería
   en alto y algunos navegadores lo anuncian palabra por palabra.          */

.bd-solo-lector {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ── Cabecera ───────────────────────────────────────────────────────────
   La cabecera que traía GeneratePress medía 163px, y encima dejaba 60px de
   blanco antes del contenido: 223px de la primera pantalla gastados antes
   de que empiece la dirección C, que es justo lo que la dirección C no
   quiere.

   De esos 163, buena parte era aire: el logotipo se mostraba a 250px de
   ancho desde un lienzo de proporción 2:1 cuya tinta es 3:1, así que el 40%
   de su altura era transparencia. El asset del tema ya viene recortado a la
   tinta (tools/hacer-logos-web.py), de modo que el ancho que se pide es el
   que se ve.                                                             */

.site-header .header-image {
	/* 200px de tinta real. Con el recorte, esto da 67px de alto. */
	width: 200px;
	height: auto;
}

.site-header .inside-header {
	padding-block: var(--bd-e3);

	/* El logotipo tiene que caer en la MISMA vertical que el titular del hero.
	   Con los 40px que traía el tema padre empezaba 40px más adentro y la
	   desalineación se veía.

	   No basta con poner cero. El contenido de las bandas queda a
	   max(--bd-e3, (100vw - 1190px) / 2) del borde del viewport, mientras que
	   .inside-header ya viene desplazado por el centrado de su contenedor, que
	   es max(0, (100vw - 1190px) / 2). El padding que falta es la diferencia
	   entre los dos: cero en pantallas anchas, y --bd-e3 cuando el contenedor
	   ya llega a los bordes y deja de aportar margen.

	   Puesto a cero seco, en móvil el logotipo tocaba el borde izquierdo
	   mientras el titular entraba 24px. */
	padding-inline: max(0px, calc(var(--bd-e3) - max(0px, (100vw - 1190px) / 2)));
}

/* En pantallas intermedias GeneratePress apila la cabecera en columna y centra
   el logotipo. Alineado a la izquierda en los dos casos: en columna lo pone al
   borde, y en fila solo cambia su alineación vertical, que da igual porque el
   logotipo es el elemento más alto y es el que fija la altura. */
.site-header .site-logo {
	align-self: flex-start;
}

/* ── La barra como parte de la banda negra ──────────────────────────────
   En el mockup de la dirección C la barra de navegación NO es una cabecera
   blanca encima del hero: es el borde superior de la misma banda negra, y el
   logotipo aparece ahí una sola vez —el hero no lleva logotipo propio—.

   Esto es lo que hace que la primera pantalla se lea como un solo bloque
   negro y no como «una web con cabecera» a la que se le ha puesto un hero
   oscuro debajo.

   Hasta la semana 2 esto valía solo para la portada y las internas conservaban
   su cabecera blanca. Desde la semana 3 vale también para ellas (D12): la barra
   es el borde superior de la banda de entrada en todas las páginas del sitio.
   El cambio de logotipo lo sigue haciendo el filtro generate_logo.        */

.bd-entrada-oscura .site-header {
	background-color: var(--bd-ink);
	border-bottom: 0;
	box-shadow: none;
}

/* Transparente pintaba negro igual, porque detrás está `.site-header` con
   --bd-ink. Pero el header trae DOS elementos con la clase `.main-navigation`
   —el envoltorio del botón inline (`#mobile-menu-control-wrapper`) y la nav
   real del menú (`#site-navigation`)— y el envoltorio es el primero en el
   orden del documento. Con transparente, el color declarado de "el"
   `.main-navigation` (el primero que se encuentre) es transparente, aunque
   se vea negro por lo que hay detrás: no se puede comprobar que la banda
   sigue siendo negra sin depender de cuál de los dos se mire. El menú
   abierto es la superficie más grande de la entrada oscura: lleva su propio
   --bd-ink explícito. */
.bd-entrada-oscura .main-navigation {
	background-color: var(--bd-ink);
	color: var(--bd-paper);
}

.bd-entrada-oscura .menu-toggle {
	background-color: transparent;
	color: var(--bd-paper);
}

/* Los enlaces en gris y el de la página actual en blanco, que es el reparto
   del mockup: un solo elemento brillante y el resto en segundo plano. Sobre
   negro el gris da 9.62:1, muy por encima de AA (spec §5.2); como texto sobre
   blanco estaría prohibido, pero aquí el fondo es la banda negra. */
.bd-entrada-oscura .main-navigation ul li a {
	background-color: transparent;
	color: var(--bd-mute);
}

.bd-entrada-oscura .main-navigation ul li.current-menu-item > a,
.bd-entrada-oscura .main-navigation ul li.current-menu-ancestor > a {
	color: var(--bd-paper);
}

/* El coral se reserva para el hover y para el CTA: en el mockup es el único
   acento de la barra. */
.bd-entrada-oscura .main-navigation ul li a:hover,
.bd-entrada-oscura .main-navigation ul li a:focus {
	color: var(--bd-coral);
}

/* Las flechas de los submenús y el icono del menú móvil son SVG que toman
   currentColor, así que basta con heredar el color del enlace. */
.bd-entrada-oscura .main-navigation .dropdown-menu-toggle,
.bd-entrada-oscura .menu-toggle .gp-icon {
	color: inherit;
}

/* GeneratePress cierra un desplegable sin `.toggled-on` con `height:0` y
   `overflow:hidden` en el propio `<ul>`, pero eso solo recorta la pintura:
   los `<a>` de dentro conservan su alto propio y siguen midiendo lo mismo
   con getBoundingClientRect(), como pasa con las fases anidadas de
   «Transformar» y «Sostener» dentro del desplegable de «Nuestros
   Servicios» cuando ese panel se abre y el suyo propio sigue cerrado.
   `display:none` sí los saca del todo mientras no se despliegan con su
   propia flecha. */
.main-navigation.toggled .main-nav ul ul:not(.toggled-on) {
	display: none;
}

/* El submenú desplegable sí necesita su propio fondo: al abrirse se despliega
   sobre el contenido, no sobre la barra.

   Y necesita un filete, que no es adorno. El fondo del desplegable es
   --bd-ink y la primera banda de todas las páginas también: al abrirse, el
   panel caía sobre un negro idéntico al suyo y no se veía dónde acababa la
   zona en la que se puede pinchar. Con dos niveles de desplegable el problema
   se dobla —el de la fase sale al lado del de las fases— y el filete es lo
   que separa un panel del otro. El 22% es el mismo contraste con el que las
   tarjetas de sections.css se recortan del papel, leído sobre negro.        */
.bd-entrada-oscura .main-navigation .sub-menu {
	background-color: var(--bd-ink);
	border: 1px solid color-mix(in srgb, var(--bd-paper) 22%, transparent);
}

.bd-entrada-oscura .main-navigation .sub-menu li a {
	color: var(--bd-paper);
}

/* Los 200px fijos de GeneratePress se quedan cortos con estas etiquetas:
   «Workshops Experienciales» partía en dos líneas dentro de un panel de tres
   ítems de una línea, y una etiqueta partida se lee como dos. El panel crece
   con su contenido y no baja de los 200px, que es el ancho con el que se
   diseñó el desplegable de las fases.

   Solo en horizontal: en el menú móvil el desplegable es un bloque estático
   que ocupa el ancho de la pantalla, y ahí `nowrap` sacaría el texto fuera. */
@media (min-width: 769px) {
	.main-navigation .sub-menu {
		width: auto;
		min-width: 200px;
		white-space: nowrap;
	}
}

/* ── El CTA de la barra ─────────────────────────────────────────────────
   Lo añade el filtro bd_cta_en_la_barra() de functions.php. Reutiliza la
   clase .bd-cta de sections.css y solo ajusta lo que cambia dentro de un
   menú: quitarle el padding del ítem y hacerlo un poco más pequeño.

   Los selectores llevan .bd-menu-cta para ganar a las reglas de color de los
   enlaces de la barra, que valen (0,3,2) al llevar tres clases: si no, el
   texto del botón heredaría el gris de los enlaces.

   Y llevan `.main-nav ul` —que a primera vista sobra— para ganarle también a
   GeneratePress, que da `line-height: 60px` a los enlaces de la barra con
   `.main-navigation .main-nav ul li a`, o sea (0,2,3). El selector corto
   valía (0,2,2) y perdía: mismas clases, menos elementos. En la portada no se
   veía porque ahí ganaba la variante con `.bd-entrada-oscura` (0,3,2), así que el
   botón medía 39px en la portada y 82 en cualquier página interna. Con
   `.main-nav ul` vale (0,3,3) y gana en las dos, que es lo que comprueba
   tests/test_barra.py.                                                    */

.main-navigation li.bd-menu-cta {
	display: flex;
	align-items: center;
	/* El ítem no pinta nada: el botón de dentro es todo lo visible. */
	margin-left: var(--bd-e2);
}

.main-navigation .main-nav ul li.bd-menu-cta a {
	color: var(--bd-ink);
	background-color: var(--bd-coral);
	font-size: 0.875rem;
	/* 14px arriba/abajo, no los 11 originales: con line-height 1.2 el botón
	   quedaba en 39px de alto, bajo el mínimo táctil de 44 (test_movil.py,
	   caso_franja_de_tablet). */
	padding: 14px 20px;
	line-height: 1.2;
}

/* Los dos hover son excluyentes y cubren todas las páginas: o el body lleva
   .bd-entrada-oscura o no lo lleva. Los dos valen (0,4,3) y por eso le ganan a la
   regla de arriba, que al subir a (0,3,3) dejó muertos los selectores cortos
   `.main-navigation li.bd-menu-cta a:hover` (0,3,2) que había aquí antes. */
.bd-entrada-oscura .main-navigation ul li.bd-menu-cta a:hover,
.bd-entrada-oscura .main-navigation ul li.bd-menu-cta a:focus {
	color: var(--bd-ink);
	background-color: var(--bd-paper);
}

/* En la cabecera blanca de las páginas internas, el hover a blanco dejaría el
   botón invisible: ahí oscurece en vez de aclarar. */
body:not(.bd-entrada-oscura) .main-navigation li.bd-menu-cta a:hover,
body:not(.bd-entrada-oscura) .main-navigation li.bd-menu-cta a:focus {
	color: var(--bd-paper);
	background-color: var(--bd-ink);
}

/* En el menú móvil el ítem ocupa una fila entera, así que el botón se estira
   y se le devuelve el margen que en horizontal no hacía falta. Este atajo
   reescribe el margen entero: pone 24px (--bd-e3) a izquierda y derecha, no
   los 16px (--bd-e2) de margin-left de la línea 472, y esa línea queda sin
   efecto en esta franja. Con el <li> a width:100% el margen izquierdo no
   tiene contraparte a la derecha, así que el botón queda pegado al borde
   derecho del viewport (hallazgo de la revisión visual de la Tarea 9,
   deuda abierta a propósito). */
@media (max-width: 768px) {
	.main-navigation li.bd-menu-cta {
		margin: var(--bd-e2) var(--bd-e3) var(--bd-e3);
	}

	.main-navigation li.bd-menu-cta a {
		display: block;
		text-align: center;
		width: 100%;
	}
}

/* ── Pegar la primera banda a la cabecera ───────────────────────────────
   El hueco de 60px lo formaban el margen superior de .site-main (20px) y el
   padding de .inside-article (40px), que existen para que un artículo
   normal respire. Una banda a sangre no los quiere: la dirección C empieza
   en el borde.

   Solo se anulan en las páginas que abren con una banda, y solo por arriba:
   el resto del ritmo del tema padre se queda como está.                  */

/* Arriba y abajo: los mismos 60px de blanco —20 de margen de .site-main más
   40 de padding de .inside-article— aparecían por los dos lados. Arriba
   separaban la cabecera de la banda del hero; abajo dejaban una franja blanca
   entre la banda de cierre y el pie, que además rompía el negro justo donde la
   página tiene que cerrar de un solo tono. */

.bd-entrada-oscura .site-main {
	margin-block: 0;
}

.bd-entrada-oscura .inside-article {
	padding-block: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   Pie

   El mockup de la dirección C lo llama .c-foot —por eso al buscar «footer»
   en el archivo no aparecía— y es UNA sola fila fina sobre negro: la
   palabra «Boudesseul» a la izquierda, los enlaces en el centro y el año a
   la derecha, separada del cierre por un filete.

   No es lo que traía el tema padre, que era un mapa del sitio de tres
   niveles más dos widgets de perfiles sociales, uno de ellos con el <ul>
   vacío. Esa zona de widgets se desengancha desde functions.php, y la fila
   la monta bd_barra_del_pie() en la ranura que GeneratePress tiene dentro
   de la propia línea del copyright: así el año cae en la misma línea sin
   recolocar nada.
   ═══════════════════════════════════════════════════════════════════════ */

.site-info {
	background-color: var(--bd-ink);
	color: var(--bd-mute);
	font-size: 0.8125rem;
}

.site-info .inside-site-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--bd-e3);
	padding-block: var(--bd-e4);
	border-top: 1px solid color-mix(in srgb, var(--bd-paper) 13%, transparent);

	/* La misma cuenta que .inside-header, y por lo mismo: con los 40px que
	   traía el tema padre, la marca del pie empezaba en x=165 y el año acababa
	   en 1275, mientras el contenido de las bandas va de 125 a 1315. El pie
	   tiene que cerrar en la misma vertical en la que abre la cabecera. */
	padding-inline: max(0px, calc(var(--bd-e3) - max(0px, (100vw - 1190px) / 2)));
}

/* La barra: logotipo y enlaces. El año lo pone GeneratePress en su
   .copyright-bar, que es el otro hijo de esta misma fila. */
.bd-pie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bd-e3) var(--bd-e5);
	flex: 1 1 auto;
}

.bd-pie__marca {
	width: 130px;
	height: auto;
	display: block;
	/* Al 80%, como en el mockup: la marca cierra pero no reclama. */
	opacity: 0.8;
}

.bd-pie__menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bd-e2) var(--bd-e4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bd-pie__menu li {
	list-style: none;
}

/* Navegación, no prosa: sin subrayado y en gris, que sobre negro da 9.62:1.
   El subrayado se reserva para los enlaces dentro de un texto. */
.site-info a {
	color: var(--bd-mute);
	text-decoration: none;
}

.site-info a:hover,
.site-info a:focus {
	color: var(--bd-coral);
}

.site-info .copyright-bar {
	flex: 0 0 auto;
}

/* En móvil la fila se apila y se alinea a la izquierda: centrado, el año
   suelto debajo del menú parece un elemento más de la lista. */
@media (max-width: 600px) {
	.site-info .inside-site-info {
		justify-content: flex-start;
	}

	.bd-pie {
		flex-direction: column;
		align-items: flex-start;
	}
}