/* =========================================================================
   EMPRENDERE — sistema de marca, salvaguarda de contraste y estriado
   =========================================================================

   Este archivo se carga en el front Y en el lienzo del editor de bloques
   (functions.php → add_editor_style). Es deliberado: quien escribe tiene que
   ver exactamente lo que se va a publicar, incluidas las correcciones.

   RATIOS WCAG 2.1 AA — la tabla de ACUERDO.md §4, verificada:

     texto \ fondo   negro    antracita   bronce   bronce-osc.   marrón   beige
     negro            1,00       1,08      5,42       3,05        1,72    17,35
     antracita        1,08       1,00      5,02       2,82        1,59    16,05
     bronce           5,42       5,02      1,00       1,78        3,16     3,20
     bronce-oscuro    3,05       2,82      1,78       1,00        1,78     5,70
     marrón           1,72       1,59      3,16       1,78        1,00    10,12
     beige           17,35      16,05      3,20       5,70       10,12     1,00

   Umbrales: 4,50 texto corrido · 3,00 titular grande (>=24 px) y elementos
   no textuales (filetes, bordes, iconos, estriado).

   NOMBRES DE VARIABLE. Los colores de contexto se llaman `--emp-color-*` y no
   `--emp-texto`/`--emp-enlace` como antes. El cambio no es cosmético: el plugin
   declara `--emp-texto` como PILA TIPOGRÁFICA dentro de `.emp-directorio`,
   `.emp-portal` y `.emp-invitado`, así que el anillo de foco de este archivo
   —`box-shadow: 0 0 0 4px var( --emp-texto )`— resolvía a una lista de fuentes,
   era inválido en tiempo de cómputo y desaparecía en media web. Con el prefijo
   `--emp-color-` la colisión no puede volver a darse.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. Contexto de color
   -------------------------------------------------------------------------
   Toda la salvaguarda se apoya en cuatro variables heredadas, no en selectores
   de descendencia. El motivo es concreto: una tarjeta beige dentro de una
   sección oscura vuelve a declarar las variables, así que la corrección se
   recalcula sola en el nivel correcto. Con selectores del tipo
   «.oscuro .algo» esa tarjeta anidada quedaría mal y habría que ir parcheando
   excepciones una a una.

     --emp-color-texto    color de texto seguro en este fondo
     --emp-color-apoyo    color secundario (pies, metadatos, antetítulos)
     --emp-color-enlace   color de enlace seguro en este fondo
     --emp-color-filete   color de línea/borde decorativo (umbral 3,00)
   ------------------------------------------------------------------------- */

:root {
	/* Contexto por defecto: página sobre beige #F3EFE6.
	   marrón 10,12 ✔ · bronce oscuro 5,70 ✔ · bronce 3,20 solo titular grande. */
	--emp-color-texto: var( --wp--preset--color--marron );
	--emp-color-apoyo: var( --wp--preset--color--bronce-oscuro );
	--emp-color-enlace: var( --wp--preset--color--bronce-oscuro );
	--emp-color-filete: var( --wp--preset--color--bronce );

	--emp-medida: 62ch;
	--emp-tracking-versal: 0.16em;

	/* Ritmo vertical. Un solo número gobierna la distancia entre un titular y
	   su texto en todo el sitio; si se toca aquí, se mueve el sitio entero. */
	--emp-ritmo: 0.75rem;
}

/* Los contextos oscuros del sitio, en una sola lista. Se repite tal cual en
   §2 (salvaguarda), §3 (enlaces) y §4 (botones): son los tres sitios donde el
   color depende del fondo y no del componente. */
.emp-seccion--oscura,
.emp-seccion--antracita,
.emp-seccion--velada,
.emp-heroe,
.emp-pie,
.emp-pie-legal,
.site-header,
.site-info,
.has-negro-background-color,
.has-antracita-background-color,
.has-oscuro-gradient-background,
.has-oscuro-bronce-gradient-background {
	/* beige 17,35 / 16,05 ✔ · bronce 5,42 / 5,02 ✔
	   bronce oscuro 3,05 / 2,82 ✘ · marrón 1,72 / 1,59 ✘ — prohibidos. */
	--emp-color-texto: var( --wp--preset--color--beige );
	--emp-color-apoyo: var( --wp--preset--color--bronce );
	--emp-color-enlace: var( --wp--preset--color--bronce );
	--emp-color-filete: var( --wp--preset--color--bronce );
}

/* Contexto claro explícito. Repite el de :root porque una sección beige puede
   estar anidada dentro de una oscura y tiene que revertir el contexto. */
.emp-seccion--beige,
.has-beige-background-color {
	--emp-color-texto: var( --wp--preset--color--marron );
	--emp-color-apoyo: var( --wp--preset--color--bronce-oscuro );
	--emp-color-enlace: var( --wp--preset--color--bronce-oscuro );
	--emp-color-filete: var( --wp--preset--color--bronce );
}

/* Bronce como fondo (botones, chapas). negro 5,42 ✔ · beige 3,20 ✘. */
.has-bronce-background-color {
	--emp-color-texto: var( --wp--preset--color--negro );
	--emp-color-apoyo: var( --wp--preset--color--negro );
	--emp-color-enlace: var( --wp--preset--color--negro );
	--emp-color-filete: var( --wp--preset--color--negro );
}

/* Bronce oscuro y marrón como fondo. beige 5,70 y 10,12 ✔. */
.has-bronce-oscuro-background-color,
.has-marron-background-color {
	--emp-color-texto: var( --wp--preset--color--beige );
	--emp-color-apoyo: var( --wp--preset--color--beige );
	--emp-color-enlace: var( --wp--preset--color--beige );
	--emp-color-filete: var( --wp--preset--color--beige );
}


/* -------------------------------------------------------------------------
   2. Salvaguarda de contraste
   -------------------------------------------------------------------------
   theme.json quita el selector de color libre, así que el editor solo puede
   ofrecer los seis colores de marca. Lo que theme.json NO sabe expresar es
   «este color solo vale sobre aquellos fondos»: nada impide elegir marrón
   sobre negro (1,72) desde el panel lateral.

   Estas reglas cierran ese hueco corrigiendo la elección en vivo, en el front
   y en el editor. Se corrige en vez de avisar a propósito: un aviso se ignora,
   y el objetivo del encargo es que la norma no se pueda incumplir.

   El `!important` es obligado, no descuido: WordPress emite las clases de
   preset (`.has-marron-color { color: … !important }`) ya con `!important`,
   de modo que sin él la elección incorrecta ganaría siempre. `:root` delante
   sube la especificidad a (0,2,0) y hace que la corrección no dependa del
   orden de encolado, que es lo que la hacía frágil.
   ------------------------------------------------------------------------- */

/* Sobre fondo oscuro solo sobreviven beige y bronce.
   Los cuatro colores restantes se reconducen al texto seguro del contexto. */
:root :is( .emp-seccion--oscura, .emp-seccion--antracita, .emp-seccion--velada, .emp-heroe, .emp-pie, .has-negro-background-color, .has-antracita-background-color, .has-oscuro-gradient-background, .has-oscuro-bronce-gradient-background ) :is( .has-negro-color, .has-antracita-color, .has-marron-color, .has-bronce-oscuro-color ) {
	color: var( --emp-color-texto ) !important;
}

/* Beige sobre beige desaparece. `body` entra en el selector porque el fondo de
   página es beige y no lleva la clase de preset. */
:root :is( body, .emp-seccion--beige, .has-beige-background-color ) .has-beige-color {
	color: var( --emp-color-texto ) !important;
}

/* Bronce #B07A47 sobre beige da 3,20: decoración y titular grande, nunca texto.
   La corrección es AL REVÉS que antes y por eso ahora no tiene huecos: primero
   se reconduce TODO lo que lleve la clase —también un `ul`, un `div` de grupo,
   un `strong` o un resalte en línea, que son los cuatro caminos por los que el
   editor se saltaba la versión anterior— y después se devuelve el bronce solo a
   lo que la escala garantiza por encima de 24 px.
   En contexto oscuro ambas reglas son inofensivas: allí --emp-color-apoyo ya es
   bronce y el valor se sustituye por sí mismo. */
:root .has-bronce-color {
	color: var( --emp-color-apoyo ) !important;
}

/* La excepción, enumerada por tamaño y no por etiqueta. `titular` arranca en
   28 px, `titular-mayor` en 36, `portada` en 44 y `cifra` en 48: las cuatro
   están por encima del umbral de «texto grande» de WCAG en cualquier viewport.
   `grande` NO está en la lista a propósito: son 22 px en móvil, por debajo.
   Un encabezado sin clase de tamaño hereda de theme.json (h1 portada, h2
   titular-mayor, h3 titular) y también cumple. Los `:where()` no suman
   especificidad, así que esto es (0,2,1) y gana a la regla de arriba. */
:root :is( h1, h2, h3, .emp-titular, .emp-cifra ).has-bronce-color:where( :not( [class*="-font-size"] ), .has-titular-font-size, .has-titular-mayor-font-size, .has-portada-font-size, .has-cifra-font-size ) {
	color: var( --wp--preset--color--bronce ) !important;
}


/* -------------------------------------------------------------------------
   3. Enlaces
   -------------------------------------------------------------------------
   theme.json fija bronce oscuro para el enlace, correcto sobre beige (5,70) y
   prohibido sobre oscuro (3,05). Aquí se corrige POR CONTEXTO.

   Y aquí está el arreglo del defecto más grave de la auditoría. La versión
   anterior era `:root a:where( … )`, que alcanza CUALQUIER enlace de la página
   con especificidad (0,1,1). Dentro de los paneles oscuros del plugin nadie
   redeclara el contexto, así que heredaba el bronce oscuro de `:root` y lo
   pintaba sobre negro: el botón «Pagar cuota» salía a 1,00 de contraste —texto
   invisible— y otras cinco combinaciones entre 2,82 y 3,05. Peor todavía, el
   `:hover` sí perdía, así que el texto solo se leía al pasar el ratón.

   La corrección es un ESTRECHAMIENTO: el color solo se impone dentro de las
   bandas oscuras que declara este tema. Fuera de ellas manda quien pinte el
   componente —el plugin, sobre todo—, que es quien conoce su propio fondo.
   El modo de fallo también mejora: si el selector no llegara a aplicar, el
   enlace se queda en el valor de theme.json, que es legible sobre beige.
   ------------------------------------------------------------------------- */

/* Base. Especificidad (0,0,1) A PROPÓSITO, ni más ni menos, y esa cifra es toda
   la corrección:

     · Hace falta llegar a (0,0,1) porque GeneratePress emite `a{color:var(--accent)}`
       —el azul #1E73BE, 4,30 sobre beige— con esa misma especificidad. theme.json
       emite el enlace base como `a:where(:not(.wp-element-button))`, que también
       es (0,0,1), así que empatan y decide el orden… y el CSS en línea del padre
       va después del de theme.json. Sin esta regla, TODOS los enlaces de cuerpo
       sobre beige salen azules y fallan AA por poco. Medido.
     · Y no hay que pasar de (0,0,1) porque cualquier regla de componente del
       plugin lleva una clase, es (0,1,0) o más y tiene que ganar: el fondo de sus
       paneles lo conoce él, no este archivo. Esa es justo la lección del defecto
       anterior.

   `marca.css` carga después de todo, así que el empate con el padre lo gana. */
a:where( :not( .wp-element-button ):not( .wp-block-button__link ) ) {
	color: var( --emp-color-enlace );
	/* Un subrayado pegado a la línea base rompe las bajas de una didone;
	   0,18 em lo despega lo justo. */
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

:root a:where( :not( .wp-element-button ):not( .wp-block-button__link ) ):hover {
	text-decoration: none;
}

/* El color dentro de contexto oscuro propio. (0,1,1), y hace falta llegar ahí
   —no basta con la regla base— porque theme.json emite el `:hover` del enlace
   como `:root :where(a…:hover)`, que es (0,1,0): sin esta regla el enlace de una
   banda negra se volvería marrón al pasar el ratón, y marrón sobre negro es
   1,72. Una regla sin pseudoclase pero con más especificidad gana igualmente al
   `:hover`, así que este único selector cubre los cuatro estados.
   Sigue sin alcanzar a nada que viva fuera de estas bandas. */
:is( .emp-seccion--oscura, .emp-seccion--antracita, .emp-seccion--velada, .emp-heroe, .emp-pie, .has-negro-background-color, .has-antracita-background-color, .has-oscuro-gradient-background, .has-oscuro-bronce-gradient-background ) a:where( :not( .wp-element-button ):not( .wp-block-button__link ) ) {
	color: var( --emp-color-enlace );
}

/* Pies de foto y notas: apoyo, nunca por debajo de 4,50 en su contexto. */
.wp-element-caption,
figcaption {
	color: var( --emp-color-apoyo );
}

/* Foco visible (WCAG 2.4.7). Doble anillo: bronce sobre el fondo que sea, más
   una sombra del color de texto del contexto, para que se vea tanto sobre
   #090909 como sobre #F3EFE6 sin tener que duplicar la regla. */
:where( a, button, input, select, textarea, summary, [tabindex] ):focus-visible {
	outline: 2px solid var( --wp--preset--color--bronce );
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var( --emp-color-texto );
}


/* -------------------------------------------------------------------------
   4. Botones
   -------------------------------------------------------------------------
   GeneratePress emite en su CSS en línea:

     button, …, a.wp-block-button__link:not(.has-background)
       { color:#ffffff; background-color:#55555e; }

   Especificidad (0,2,1), contra el (0,1,0) del `:root :where(…)` que genera
   theme.json. Ganaba el padre: NINGÚN botón del sitio era bronce, todos salían
   en el gris #55555E de GeneratePress, y el CTA secundario del héroe se
   quedaba en 2,01:1 —bronce sobre gris— porque marca.css corregía el color y
   nadie corregía el fondo.

   Se resuelve aquí y no en `generate_settings` para que el sistema de diseño
   siga viviendo en un solo sitio: si el color del botón se guardara en la base
   de datos, el `theme.json` mentiría y nadie sabría dónde mirar.

   (0,3,0) — `:root` más dos clases. Por encima del (0,2,1) del padre con
   margen, y sin `!important`: un bloque con color propio elegido en el editor
   tiene que poder ganar, y con `!important` no podría.
   ------------------------------------------------------------------------- */

:root .wp-block-button__link.wp-element-button,
:root .wp-block-button .wp-block-button__link,
:root .wp-element-button:where( a, button, input ) {
	background-color: var( --wp--preset--color--bronce );
	border: 1px solid var( --wp--preset--color--bronce );
	border-radius: 0;
	/* Sobre bronce el texto va en NEGRO (5,42). Nunca en beige, que da 3,20. */
	color: var( --wp--preset--color--negro );
	font-family: var( --wp--preset--font-family--texto );
	font-size: var( --wp--preset--font-size--pequena );
	font-weight: 600;
	letter-spacing: 0.12em;
	/* 1,25 y no el 1 de theme.json: en móvil el rótulo largo del CTA parte en
	   dos líneas y con interlínea 1 las versales se tocan. El acolchado baja lo
	   justo para que el botón de una línea conserve su altura. */
	line-height: 1.25;
	padding: 0.95rem 2rem;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

:root .wp-block-button__link.wp-element-button:hover,
:root .wp-block-button__link.wp-element-button:focus,
:root .wp-block-button .wp-block-button__link:hover,
:root .wp-block-button .wp-block-button__link:focus,
:root .wp-element-button:where( a, button, input ):hover,
:root .wp-element-button:where( a, button, input ):focus {
	background-color: var( --wp--preset--color--bronce-oscuro );
	border-color: var( --wp--preset--color--bronce-oscuro );
	/* beige sobre bronce oscuro: 5,70 ✔ */
	color: var( --wp--preset--color--beige );
}

:root .wp-block-button__link.wp-element-button:active,
:root .wp-block-button .wp-block-button__link:active,
:root .wp-element-button:where( a, button, input ):active {
	background-color: var( --wp--preset--color--marron );
	border-color: var( --wp--preset--color--marron );
	/* beige sobre marrón: 10,12 ✔ */
	color: var( --wp--preset--color--beige );
}

/* Variante «outline»: fondo transparente y texto del color de apoyo del
   contexto. Sobre beige sale bronce oscuro (5,70 ✔) y sobre negro bronce
   (5,42 ✔); el borde va en bronce en los dos, que cumple el umbral 3,00 de
   elemento no textual sobre ambos fondos.
   `background-color: transparent` es lo que faltaba en la versión anterior y
   la razón exacta del 2,01: se corregía el texto y el fondo seguía siendo el
   gris del padre. */
:root .wp-block-button.is-style-outline > .wp-block-button__link:not( .has-text-color ),
:root .wp-block-button.is-style-outline > .wp-block-button__link:not( .has-background ) {
	background-color: transparent;
	border-color: var( --wp--preset--color--bronce );
	color: var( --emp-color-apoyo );
}

:root .wp-block-button.is-style-outline > .wp-block-button__link:not( .has-background ):hover,
:root .wp-block-button.is-style-outline > .wp-block-button__link:not( .has-background ):focus {
	background-color: var( --wp--preset--color--bronce );
	border-color: var( --wp--preset--color--bronce );
	color: var( --wp--preset--color--negro );
}

/* Los botones cambian de estado con la transición del sistema y no con una
   escrita a mano. Va aquí y no en el marcado porque un botón puesto por la
   asociación desde el editor no va a llevar la clase. */
@media ( prefers-reduced-motion: no-preference ) {

	:root .wp-block-button__link,
	:root .wp-element-button {
		transition:
			background-color 200ms cubic-bezier( 0.22, 0.61, 0.36, 1 ),
			border-color 200ms cubic-bezier( 0.22, 0.61, 0.36, 1 ),
			color 200ms cubic-bezier( 0.22, 0.61, 0.36, 1 );
	}
}


/* -------------------------------------------------------------------------
   5. El fuste — el estriado de la columna como sistema
   -------------------------------------------------------------------------
   La idea rectora del encargo. El estriado del fuste que hace de asta en la
   «E» del logotipo se convierte aquí en el motivo que recorre el sitio:
   separador entre bandas, canto de un bloque destacado, remate de sección,
   pauta del héroe. Sale de la marca, no de una tendencia, y es lo que hace
   que este sitio no se pueda confundir con ningún otro.

   Es un `repeating-linear-gradient`, así que existe SIEMPRE: sin JavaScript,
   con el guion caído y con `prefers-reduced-motion: reduce`. El plugin aporta
   `[data-emp-estriado]`, que es lo mismo más el dibujado progresivo al entrar
   en pantalla; estas clases son la versión estructural, la que se puede poner
   en un `::before` donde no hay marcado que anotar.

   NOMBRES. `--emp-fuste-*` y no `--emp-estria-*`: los segundos son la API
   pública del plugin y se declaran sobre `[data-emp-estriado]`. Manteniéndolos
   separados, una cosa no puede desajustar la otra.

   CONTRASTE. El estriado es decoración pura, nunca porta información. Bronce
   da 5,42 sobre negro y 3,20 sobre beige: los dos por encima del 3,00 que
   WCAG 1.4.11 pide a un elemento gráfico.
   ------------------------------------------------------------------------- */

.emp-fuste,
.emp-remate::before,
.emp-seccion--fuste::before,
.emp-heroe::after {
	--emp-fuste-color: var( --emp-color-filete );
	--emp-fuste-paso: 7px;
	--emp-fuste-grosor: 1px;

	background-image: repeating-linear-gradient(
		90deg,
		var( --emp-fuste-color ) 0,
		var( --emp-fuste-color ) var( --emp-fuste-grosor ),
		transparent var( --emp-fuste-grosor ),
		transparent var( --emp-fuste-paso )
	);
}

/* Banda de estriado suelta, para usar como separador dentro de una sección.
   Se difumina en los dos extremos: sin la máscara el corte recto la delata
   como una trama y deja de leerse como un fragmento de fuste. */
.emp-fuste {
	block-size: 1.25rem;
	border: 0;
	display: block;
	inline-size: min( 100%, 22rem );
	margin: var( --wp--preset--spacing--50 ) 0;
	mask-image: linear-gradient( 90deg, transparent 0, #000 12%, #000 88%, transparent 100% );
	-webkit-mask-image: linear-gradient( 90deg, transparent 0, #000 12%, #000 88%, transparent 100% );
	opacity: 0.85;
}

.emp-fuste--ancho {
	inline-size: 100%;
}

.emp-fuste--centrado {
	margin-inline: auto;
}

/* Remate de sección: el estriado como transición entre dos bandas de color.
   Va en un `::before` absoluto sobre el borde superior de la sección, así que
   una banda beige que sigue a una negra se separa con el motivo de la marca en
   lugar de con un corte seco. */
.emp-remate,
.emp-seccion--fuste {
	position: relative;
}

.emp-remate::before,
.emp-seccion--fuste::before {
	block-size: 0.625rem;
	content: "";
	inline-size: min( 100%, 40rem );
	inset-block-start: 0;
	inset-inline-start: 50%;
	mask-image: linear-gradient( 90deg, transparent 0, #000 20%, #000 80%, transparent 100% );
	-webkit-mask-image: linear-gradient( 90deg, transparent 0, #000 20%, #000 80%, transparent 100% );
	position: absolute;
	transform: translateX( -50% );
}

/* Canto estriado en el borde izquierdo de un bloque: la caja se pone de pie y
   las estrías siguen corriendo A LO LARGO del fuste, que es como corren en una
   columna de verdad. Por eso el gradiente sigue siendo de 90 grados —franjas
   verticales— y NO de 180: con 180 saldrían travesaños cruzando el fuste, que
   es una escalera, no una columna. */
.emp-canto {
	padding-inline-start: var( --wp--preset--spacing--40 );
	position: relative;
}

.emp-canto::before {
	--emp-fuste-color: var( --emp-color-filete );
	--emp-fuste-paso: 4px;
	--emp-fuste-grosor: 1px;

	background-image: repeating-linear-gradient(
		90deg,
		var( --emp-fuste-color ) 0,
		var( --emp-fuste-color ) var( --emp-fuste-grosor ),
		transparent var( --emp-fuste-grosor ),
		transparent var( --emp-fuste-paso )
	);
	content: "";
	inline-size: 0.5rem;
	inset-block: 0;
	inset-inline-start: 0;
	mask-image: linear-gradient( 180deg, #000 0, #000 70%, transparent 100% );
	-webkit-mask-image: linear-gradient( 180deg, #000 0, #000 70%, transparent 100% );
	position: absolute;
}


/* -------------------------------------------------------------------------
   6. Secciones
   ------------------------------------------------------------------------- */

.emp-seccion {
	padding-block: var( --wp--preset--spacing--70 );
	position: relative;
}

/* Oscura — negro #090909. Texto beige 17,35 ✔ · acento bronce 5,42 ✔. */
.emp-seccion--oscura {
	background-color: var( --wp--preset--color--negro );
	color: var( --emp-color-texto );
}

/* Antracita #141414. Texto beige 16,05 ✔ · acento bronce 5,02 ✔.
   Se usa para encadenar dos bandas oscuras sin que se fundan en una sola. */
.emp-seccion--antracita {
	background-color: var( --wp--preset--color--antracita );
	color: var( --emp-color-texto );
}

/* Beige #F3EFE6. Texto marrón 10,12 ✔ · apoyo bronce oscuro 5,70 ✔. */
.emp-seccion--beige {
	background-color: var( --wp--preset--color--beige );
	color: var( --emp-color-texto );
}

/* Banda con imagen de fondo. El velo no es estética: sin él, el contraste del
   texto depende de la foto que suban, que es justo lo que no se puede dejar al
   azar. Con el velo, el fondo efectivo nunca se aleja de #090909.
   El contexto de color lo declara §1, que es lo que faltaba: la banda pintaba
   beige a mano y dejaba `--emp-color-enlace` en el valor claro, así que un
   enlace dentro del velo caía a 3,05. */
.emp-seccion--velada {
	background-color: var( --wp--preset--color--negro );
	background-position: center;
	background-size: cover;
	color: var( --emp-color-texto );
	isolation: isolate;
	position: relative;
}

.emp-seccion--velada::before {
	background: linear-gradient( 180deg, rgba( 9, 9, 9, 0.82 ) 0%, rgba( 9, 9, 9, 0.92 ) 100% );
	content: "";
	inset: 0;
	position: absolute;
	z-index: -1;
}


/* -------------------------------------------------------------------------
   7. Filete bronce
   -------------------------------------------------------------------------
   Bronce #B07A47 como línea: 3,20 sobre beige y 5,42 sobre negro. Ambos por
   encima del umbral 3,00 que WCAG 1.4.11 exige a los elementos no textuales,
   así que el filete es válido sobre los dos fondos. Como TEXTO sobre beige no
   lo sería: de ahí que el bronce viva aquí, en la decoración.
   ------------------------------------------------------------------------- */

.emp-filete {
	background-color: var( --emp-color-filete );
	border: 0;
	display: block;
	height: 1px;
	margin: var( --wp--preset--spacing--40 ) 0;
	width: 100%;
}

/* Filete corto: el remate bajo un antetítulo o sobre una cifra. */
.emp-filete--corto {
	width: 3.5rem;
}

.emp-filete--degradado {
	background: linear-gradient( 90deg, var( --emp-color-filete ) 0%, transparent 100% );
	height: 1px;
}

/* Filete como borde superior de un bloque, sin añadir marcado. */
.emp-filete-superior {
	border-top: 1px solid var( --emp-color-filete );
	padding-top: var( --wp--preset--spacing--40 );
}

.emp-filete-lateral {
	border-left: 2px solid var( --emp-color-filete );
	padding-left: var( --wp--preset--spacing--40 );
}


/* -------------------------------------------------------------------------
   8. Versalitas, titulares y ritmo vertical
   -------------------------------------------------------------------------
   El registro de marca es la didone en versales con tracking amplio. La regla
   tipográfica que se aplica aquí: a más pequeño el texto, más tracking. Las
   versales sin tracking a 13 px se leen como un bloque compacto y es el
   defecto más frecuente en identidades de este corte.
   ------------------------------------------------------------------------- */

.emp-versalitas {
	font-family: var( --wp--preset--font-family--texto );
	font-weight: 600;
	letter-spacing: var( --emp-tracking-versal );
	text-transform: uppercase;
}

/* Enlace en versalitas: el «Conocer la asociación» del final de cada bloque.
   Sin subrayado en reposo —una línea bajo unas versales trackeadas ensucia— y
   con un filete que se dibuja al apuntar. */
.emp-versalitas a {
	border-bottom: 1px solid var( --emp-color-filete );
	padding-bottom: 0.35em;
	text-decoration: none;
}

.emp-versalitas a:hover,
.emp-versalitas a:focus-visible {
	border-bottom-color: currentColor;
}

/* Antetítulo. Bronce sobre oscuro (5,42 ✔) o bronce oscuro sobre beige
   (5,70 ✔), resuelto por contexto: nunca cae en el 3,20 prohibido. */
.emp-antetitulo {
	color: var( --emp-color-apoyo );
	display: block;
	font-family: var( --wp--preset--font-family--texto );
	font-size: var( --wp--preset--font-size--pequena );
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1.4;
	margin-bottom: var( --wp--preset--spacing--30 );
	text-transform: uppercase;
}

.emp-antetitulo--con-filete::after {
	background-color: var( --emp-color-filete );
	content: "";
	display: block;
	height: 1px;
	margin-top: var( --wp--preset--spacing--30 );
	width: 3.5rem;
}

/* Variante con estriado en lugar de filete. Mismo papel, motivo de marca. */
.emp-antetitulo--con-fuste::after {
	--emp-fuste-color: var( --emp-color-filete );

	background-image: repeating-linear-gradient(
		90deg,
		var( --emp-fuste-color ) 0,
		var( --emp-fuste-color ) 1px,
		transparent 1px,
		transparent 5px
	);
	content: "";
	display: block;
	height: 0.5rem;
	margin-top: var( --wp--preset--spacing--30 );
	width: 5rem;
}

/* Titular de marca. Sirve para textos que no son encabezados semánticos
   (una cifra, un lema) y que aun así deben leerse como titular. */
.emp-titular {
	font-family: var( --wp--preset--font-family--titulares );
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1.1;
	text-transform: uppercase;
	text-wrap: balance;
}

/* Titular en bronce. SOLO aquí se permite el 3,20 sobre beige, y solo porque
   la escala mantiene estos tamaños por encima de 24 px, que es el umbral de
   «texto grande» de WCAG. No lo apliques a un h4 ni a un párrafo. */
.emp-titular--bronce {
	color: var( --wp--preset--color--bronce );
	font-size: var( --wp--preset--font-size--titular-mayor );
}

.wp-block-heading {
	text-wrap: balance;
}

/* Ritmo vertical. El bloque de encabezado de theme.json separa por arriba con
   el escalón «Medio»; lo que faltaba era acercar el titular a SU párrafo, que
   es lo que hace que un titular y su texto se lean como una unidad en vez de
   como dos elementos sueltos. Solo actúa cuando el encabezado tiene hermano
   inmediato, así que no toca los finales de bloque. */
:where( .entry-content, .wp-block-group, .wp-block-column ) > :where( h2, h3, h4 ) + :where( p, ul, ol ) {
	margin-top: var( --emp-ritmo );
}

/* Las versales de la didone piden más aire entre líneas cuando el titular
   ocupa dos o tres. theme.json fija la interlínea; el tracking del final de
   línea es lo que aquí se compensa para que el bloque quede a escuadra. */
:where( h1, h2 ) {
	margin-inline-end: -0.06em;
}


/* -------------------------------------------------------------------------
   9. Medida de lectura
   -------------------------------------------------------------------------
   `contentSize` en theme.json vale 46rem para que el ancho de la caja funcione
   con imágenes y tablas; el texto corrido necesita menos: entre 60 y 70
   caracteres. Estas clases lo ajustan sin tocar la retícula de bloques.
   ------------------------------------------------------------------------- */

.emp-columna {
	hanging-punctuation: first last;
	text-wrap: pretty;
}

/* La medida, con especificidad CERO a propósito.
   El núcleo recorta cada banda con una regla por contenedor
   —`.wp-container-core-group-is-layout-xxxx > :where( … )`— que es (0,1,0). Con
   `.emp-columna` a (0,1,0) se empataba y ganaba este archivo por orden, así que
   una banda de 46rem se ensanchaba a los 62ch de la medida y el párrafo salía
   46 px a la izquierda de su propio titular. Bajando a (0,0,0) manda el
   `contentSize` de la banda, que es quien sabe cuánto mide, y esta regla solo
   actúa donde no hay retícula que lo diga. */
:where( .emp-columna ) {
	max-width: var( --emp-medida );
}

/* La medida en una banda ancha.
   -------------------------------------------------------------------------
   Dos cosas hay que saber para entender por qué el selector es así de largo.

   PRIMERA: WordPress recorta los hijos directos de un grupo «constrained» con
   `.wp-block-group.is-layout-constrained > :where( … ) { max-width: … }`, que
   es (0,2,0). Una clase suelta como `.emp-columna` empata y pierde por orden,
   así que la medida de lectura no se aplicaba NUNCA dentro de una banda: en la
   portada se medían líneas de 1216 px, unos 135 caracteres. De ahí el (0,3,0)
   y el `!important` del margen, que es el arma con la que centra el núcleo.

   SEGUNDA, y es la que explica el ámbito: esa regla del núcleo centra CADA hijo
   por separado dentro del ancho total del grupo, no dentro de una caja común.
   En una banda cuyo `contentSize` ya es estrecho (46rem), anular el centrado
   manda el párrafo al borde de la banda mientras el titular se queda centrado:
   248 px de desalineación, medidos. Por eso la medida solo actúa donde de
   verdad hace falta —el héroe y las bandas anchas de 76rem, marcadas con
   `emp-banda--ancha`—; en una banda estrecha el propio `contentSize` ya mide y
   este archivo no tiene nada que arreglar. */
/* Alineado a la calle de contenido, no al borde de la banda.
 *
 * Antes esto era `margin-inline: 0`, que anula el centrado de la maquetación
 * constreñida de WordPress y deja el elemento pegado al borde de relleno de la
 * banda a sangre. El resultado medido: el claim del héroe arrancaba en x=17 y
 * sus hermanos —antetítulo y entradilla— en x=105. Ochenta y ocho píxeles de
 * desalineación en la primera pantalla del sitio.
 *
 * `margin-inline: <sangrado> auto` mantiene el texto alineado a la izquierda
 * —que era la intención— pero lo arranca donde empieza la retícula. El sangrado
 * se calcula contra el ancho de la propia banda, así que se recalcula solo en
 * cualquier viewport y no hay ningún número mágico que mantener. */
:root :is( .emp-heroe, .emp-banda--ancha ) > :is( .emp-columna, .emp-heroe__claim, .emp-heroe__titulo ) {
	--emp-sangrado: calc( ( 100% - min( 100%, var( --wp--style--global--wide-size ) ) ) / 2 );

	margin-inline: var( --emp-sangrado ) auto !important;
	max-width: var( --emp-medida );
}

/* Titular de portada: el H1 es el descriptor; el claim es un párrafo.
 *
 * El H1 era antes solo el claim —«La unión que construye imperios.»— que no
 * contiene ni una palabra por la que alguien pueda buscar a la asociación. Se
 * probó a meter ambos dentro del H1 en dos `span`, y era peor: un lema no es un
 * encabezado, alargaba el H1 sin aportar relevancia y un lector de pantalla
 * anunciaba el eslogan como parte del título principal.
 *
 * Lo correcto es separarlos por su función: el H1 dice qué es esto y dónde, y
 * el claim se queda como el párrafo destacado que siempre fue. La jerarquía
 * VISUAL no tiene que coincidir con la de encabezados —un `<p>` puede ser
 * perfectamente el texto más grande de la página—, y esa confusión es la que
 * había puesto el eslogan en el H1.
 *
 * El H1 lleva además las clases del antetítulo, así que se pinta exactamente
 * igual que antes: el diseño no cambia. */
.emp-heroe__titulo {
	display: block;
}

:root :is( .emp-heroe, .emp-banda--ancha ) > .emp-columna--entradilla {
	max-width: 54ch;
}

:root :is( .emp-heroe, .emp-banda--ancha ) > .emp-heroe__claim {
	max-width: 18ch;
}

.emp-columna--estrecha {
	--emp-medida: 48ch;
}

/* Entradilla. Un escalón por encima del cuerpo y con la interlínea más suelta:
   es lo que separa el primer párrafo del resto sin recurrir a la negrita. */
.emp-columna--entradilla {
	font-size: var( --wp--preset--font-size--media );
	line-height: 1.55;
}

:where( .emp-columna--entradilla ) {
	max-width: 54ch;
}

/* Columna doble. Solo a partir de 60rem: por debajo, dos columnas obligan al
   lector a subir y bajar en cada salto y la lectura se rompe. */
@media ( min-width: 60rem ) {

	.emp-columna--doble {
		column-count: 2;
		column-gap: var( --wp--preset--spacing--60 );
		column-rule: 1px solid var( --emp-color-filete );
		max-width: none;
	}

	.emp-columna--doble > * {
		break-inside: avoid-column;
	}
}

/* Primer párrafo de un artículo: sangría suprimida y arranque en versalitas.
   Alternativa sobria a la capitular, que theme.json deja desactivada porque
   una didone capitular chirría en un registro institucional. */
.emp-columna--arranque > p:first-of-type::first-line {
	font-variant-caps: small-caps;
	letter-spacing: 0.06em;
}


/* -------------------------------------------------------------------------
   10. Cifras
   ------------------------------------------------------------------------- */

/* La cifra va en el color de texto fuerte y el rótulo en el de apoyo, no al
   revés: sobre beige son marrón 10,12 y bronce oscuro 5,70, que es lo que pide
   el copy, y tipográficamente la jerarquía se lee mejor con el número pesado y
   la etiqueta ligera. Sobre oscuro se resuelve solo: beige y bronce. */
.emp-cifra {
	color: var( --emp-color-texto );
	font-family: var( --wp--preset--font-family--titulares );
	font-feature-settings: "tnum" 1, "lnum" 1;
	font-size: var( --wp--preset--font-size--cifra );
	font-variant-numeric: tabular-nums lining-nums;
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 0.95;
	margin: 0;
}

/* Pie de la cifra: lo que la cifra significa. Sin él una cifra es ruido. */
.emp-cifra__pie {
	color: var( --emp-color-apoyo );
	font-family: var( --wp--preset--font-family--texto );
	font-size: var( --wp--preset--font-size--pequena );
	letter-spacing: 0.14em;
	margin-top: var( --wp--preset--spacing--30 );
	padding-top: var( --wp--preset--spacing--30 );
	position: relative;
	text-transform: uppercase;
}

/* El pie se separa de la cifra con estriado, no con una línea: es la basa de
   la columna. Ancho corto para que no se lea como un subrayado. */
.emp-cifra__pie::before {
	--emp-fuste-color: var( --emp-color-filete );

	background-image: repeating-linear-gradient(
		90deg,
		var( --emp-fuste-color ) 0,
		var( --emp-fuste-color ) 1px,
		transparent 1px,
		transparent 5px
	);
	block-size: 0.5rem;
	content: "";
	inline-size: 4rem;
	inset-block-start: 0;
	inset-inline-start: 0;
	position: absolute;
}


/* -------------------------------------------------------------------------
   11. Beneficios, iconos y pasos
   ------------------------------------------------------------------------- */

/* La tarjeta de beneficio ya no se remata con una línea recta sino con el
   canto estriado: el mismo motivo, aplicado a la unidad más repetida del
   sitio. Sigue siendo un borde superior de 1px para que la retícula se lea. */
.emp-beneficio {
	border-top: 1px solid var( --emp-color-filete );
	padding-top: var( --wp--preset--spacing--40 );
	position: relative;
}

.emp-beneficio::before {
	--emp-fuste-color: var( --emp-color-filete );

	background-image: repeating-linear-gradient(
		90deg,
		var( --emp-fuste-color ) 0,
		var( --emp-fuste-color ) 1px,
		transparent 1px,
		transparent 6px
	);
	block-size: 0.5rem;
	content: "";
	inline-size: 4.5rem;
	inset-block-start: 0;
	inset-inline-start: 0;
	position: absolute;
}

.emp-beneficio > :where( h2, h3, h4, h5, h6 ) {
	margin-top: 0;
}

/* El icono del beneficio. Lo inyecta el tema en el servidor (functions.php),
   nunca el marcado guardado: el sprite solo lleva los símbolos que la página
   ha pedido en esa misma petición, así que un `<use>` almacenado en el
   contenido saldría en blanco.

   El color es el de apoyo del contexto y no el bronce fijo. Sobre oscuro son lo
   mismo —bronce, 5,42— así que el encargo se cumple donde lo pide; sobre beige
   baja a bronce oscuro y sube de 3,20 a 5,70. WCAG 1.4.11 se conformaría con
   3,00 por tratarse de un elemento gráfico, pero un icono que también aguanta el
   umbral de texto es un icono que nadie puede usar mal más adelante. */
.emp-beneficio__icono {
	color: var( --emp-color-apoyo );
	display: block;
	margin-bottom: var( --wp--preset--spacing--30 );
}

.emp-beneficio__icono .emp-icono {
	display: block;
}

/* El número del paso. Didone grande en bronce, con el estriado corriendo por
   debajo: es la barra de progreso del proceso de admisión, dibujada con el
   motivo de la marca en lugar de con una barra genérica. */
.emp-paso {
	position: relative;
}

.emp-paso__numero {
	color: var( --wp--preset--color--bronce );
	display: block;
	font-family: var( --wp--preset--font-family--titulares );
	font-feature-settings: "lnum" 1;
	font-size: var( --wp--preset--font-size--titular-mayor );
	letter-spacing: 0.04em;
	line-height: 1;
	margin: 0 0 var( --emp-ritmo );
}


/* -------------------------------------------------------------------------
   12. Héroe
   -------------------------------------------------------------------------
   Se monta con un grupo y no con el bloque «Portada» a propósito: el bloque
   Portada arrastra 20 KB de CSS en línea en cada página que lo use, y todo lo
   que hace aquí —imagen de fondo, velo y contenido centrado— lo resuelven seis
   declaraciones. El velo mantiene el fondo efectivo pegado a #090909, así que
   el titular beige cumple AA con cualquier textura que se ponga detrás.
   ------------------------------------------------------------------------- */

.emp-heroe {
	background-color: var( --wp--preset--color--negro );
	color: var( --emp-color-texto );
	isolation: isolate;
	overflow: hidden;
	/* Relleno proporcional a la ALTURA de la ventana, no fijo.
	 *
	 * Con los 176 px fijos que había, el héroe medía 919 px pasara lo que
	 * pasara. Medido en un portátil de 14 pulgadas (1440×760): cabecera 145 +
	 * relleno 352 + contenido 583, y los dos botones caían 77 px por debajo del
	 * pliegue. En móvil, 67 y 158 px. La llamada a la acción es LA conversión
	 * del sitio (ACUERDO §1) y no se puede pedir scroll para verla.
	 *
	 * `svh` y no `vh` a propósito: en móvil `vh` mide contra la ventana sin la
	 * barra del navegador, que es justo el caso en el que ya no cabía.
	 *
	 * Se redefine la VARIABLE y no la propiedad porque el bloque trae el relleno
	 * en estilo en línea —`padding-top: var( --wp--preset--spacing--80 )`— y un
	 * estilo en línea gana a cualquier regla de hoja. Redefiniendo la variable
	 * dentro del héroe, ese mismo estilo en línea resuelve al valor fluido sin
	 * tocar el contenido de la página ni marcar el bloque como inválido en el
	 * editor. */
	--wp--preset--spacing--80: clamp( 2.5rem, 6svh, 11rem );

	position: relative;
}

/* Pantallas bajas: portátiles de 13-14 pulgadas y móviles apaisados.
 *
 * El relleno fluido no basta por sí solo —el contenido del héroe ya mide 583 px
 * y en 760 de alto solo hay 615 disponibles bajo la cabecera—, así que aquí se
 * comprime también el ritmo vertical y el cuerpo del claim. En pantallas altas
 * no se toca nada: el héroe conserva la escala que da el impacto. */
@media ( max-height: 900px ) {
	.emp-heroe > * + *,
	.emp-heroe > .wp-block-group__inner-container > * + * {
		margin-block-start: clamp( 0.75rem, 2.4svh, 2.5rem );
	}

	/* `!important` obligado, no por comodidad: WordPress emite las clases de
	 * preajuste de tamaño —`has-portada-font-size`— con `!important` incluido,
	 * así que ninguna regla de hoja las gana sin él. */
	.emp-heroe .emp-heroe__claim {
		font-size: clamp( 2.25rem, 6.4svh, 5rem ) !important;
	}
}

/* Móvil en vertical: el caso más apretado, porque a la poca altura se suma que
 * el claim reparte en más líneas. Se recorta también la entradilla, que es lo
 * único que puede esperar a que el usuario baje. */
@media ( max-width: 782px ) {
	.emp-heroe .emp-heroe__claim {
		font-size: clamp( 1.85rem, 5.2svh, 3rem ) !important;
		letter-spacing: 0.03em;
	}

	.emp-heroe .emp-columna--entradilla {
		font-size: var( --wp--preset--font-size--base, 1rem );
		line-height: 1.45;
	}

	/* La entradilla se recorta a dos líneas, no se oculta. Ocultarla dejaría al
	 * visitante de móvil sin la única frase que explica que aquí no se pide el
	 * alta por internet, y esa frase es la que hace que el botón se entienda.
	 * Con `line-clamp` el texto sigue en el documento —se indexa y lo lee un
	 * lector de pantalla— y solo se acorta lo que se pinta. */
	.emp-heroe .emp-columna--entradilla {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.emp-heroe .wp-block-buttons {
		gap: 0.6rem;
	}

	.emp-heroe .emp-antetitulo {
		font-size: 0.8rem;
	}
}

/* El fondo es un bloque de imagen, no un `background-image` en el marcado.
   Tiene tres motivos, y el primero es el que decide:

     1. El bloque «Grupo» NO guarda la imagen de fondo en su `save()`. Escribirla
        a mano en el estilo en línea hace que el editor marque el bloque como
        inválido al reabrir la página: la asociación se encuentra el aviso rojo
        de «este bloque contiene contenido inesperado» y con un clic pierde el
        fondo. Comprobado en el editor real.
     2. Una foto de monumento conserva su `alt`. El catálogo de marca lo redacta
        monumento a monumento y tirarlo para ganar un fondo es mal negocio.
     3. Sigue sin usarse el bloque «Portada», que arrastra 20 KB de CSS en línea
        a cada página donde aparece.

   El velo de `::before` va por encima (z-index -1) y mantiene el fondo efectivo
   pegado a #090909. Para el beige eso basta con cualquier foto —medido: 9,2:1
   en el peor píxel—, pero para el bronce del antetítulo no: ver la nota del
   propio `::before`. */
.emp-heroe__fondo {
	inset: 0;
	margin: 0;
	position: absolute;
	z-index: -2;
}

.emp-heroe__fondo img {
	block-size: 100%;
	inline-size: 100%;
	object-fit: cover;
}

/* Velo del héroe, en dos capas que se componen.
 *
 * POR QUÉ DOS Y NO UNA. El texto del héroe usa dos colores con márgenes muy
 * distintos sobre foto. Medido contra el píxel más claro de cada fotografía del
 * banco —el peor caso posible, porque `object-fit: cover` recorta distinto en
 * cada proporción de ventana y cualquier píxel puede acabar bajo el texto—:
 *
 *   beige  #F3EFE6  necesita velo 0,60 · con 0,78 saca 9,2:1   sobrado
 *   bronce #B07A47  necesita velo 0,92 · con 0,87 saca 3,98:1  FALLA AA
 *
 * El antetítulo va en bronce y en cuerpo pequeño, así que le toca el umbral de
 * 4,5:1 y era el único que no llegaba. Subir el velo entero hasta 0,92 lo
 * arreglaba y de paso borraba la fotografía, que es justo lo que el héroe está
 * enseñando. Como el antetítulo ocupa solo la franja de arriba, se refuerza esa
 * franja y se deja el resto como estaba: la foto se ve igual donde se veía y el
 * bronce pasa a 4,8:1.
 *
 * La primera capa es el refuerzo superior; la segunda, el velo general de
 * siempre. Al superponerse, el alfa efectivo es 1-(1-a1)(1-a2).
 *
 * Esto corregía además dos fallos que ya estaban publicados: el antetítulo de
 * `/como-asociarse` daba 4,10:1 y el de `/contacto` 3,96:1. La portada se
 * salvaba por poco (4,74:1) solo porque su fondo era una textura casi negra.
 *
 * Para volver a medirlo tras cambiar una foto o estos números, el script está
 * en `revisiones/velo-heroe.php`. */
.emp-heroe::before {
	background:
		linear-gradient( 180deg, rgba( 9, 9, 9, 0.74 ) 0%, rgba( 9, 9, 9, 0.38 ) 24%, rgba( 9, 9, 9, 0 ) 42% ),
		linear-gradient( 165deg, rgba( 9, 9, 9, 0.94 ) 0%, rgba( 9, 9, 9, 0.78 ) 55%, rgba( 9, 9, 9, 0.92 ) 100% );
	content: "";
	inset: 0;
	position: absolute;
	z-index: -1;
}

/* El fuste del héroe: una columna de estrías a plomo contra el borde derecho.
   Es el elemento arquitectónico de la portada y la razón de que el héroe no se
   pueda confundir con el de ninguna otra web. Se desvanece hacia abajo, como
   se pierde un fuste en la sombra.
   Se oculta por debajo de 60rem: en móvil el texto llega al borde y el motivo
   se convertiría en una trama detrás de las letras. */
.emp-heroe::after {
	--emp-fuste-color: var( --wp--preset--color--bronce );
	--emp-fuste-paso: 11px;
	--emp-fuste-grosor: 1px;

	/* 90 grados: franjas verticales a lo largo del fuste. Con 180 saldrían
	   travesaños cruzándolo y el motivo se leería como una escala. */
	background-image: repeating-linear-gradient(
		90deg,
		var( --emp-fuste-color ) 0,
		var( --emp-fuste-color ) var( --emp-fuste-grosor ),
		transparent var( --emp-fuste-grosor ),
		transparent var( --emp-fuste-paso )
	);
	content: "";
	display: none;
	inline-size: 5.5rem;
	inset-block: 0;
	inset-inline-end: clamp( 1rem, 4vw, 4rem );
	mask-image: linear-gradient( 180deg, transparent 0, #000 22%, #000 58%, transparent 100% );
	-webkit-mask-image: linear-gradient( 180deg, transparent 0, #000 22%, #000 58%, transparent 100% );
	opacity: 0.42;
	position: absolute;
	z-index: -1;
}

@media ( min-width: 60rem ) {

	.emp-heroe::after {
		display: block;
	}
}

/* El claim. Se le da tratamiento propio y no se deja en el h1 genérico porque
   en la portada es la pieza de marca: más tracking, interlínea más corta y
   equilibrado de líneas para que no quede una palabra sola en la última. */
/* La medida del claim la fija §9 dentro de `.emp-heroe`, no aquí: así no se
   escapa a un titular que lleve la clase fuera del héroe. */
.emp-heroe__claim {
	/* La didone, declarada y no heredada.
	 *
	 * Mientras el claim fue un `<h1>` la recibía de la regla de titulares. Al
	 * separarlo en un párrafo —un lema no es un encabezado— pasó a heredar la
	 * pila de texto y el claim de marca apareció en `system-ui`. La lección es
	 * la misma que motivó el cambio: si el aspecto no debe depender de la
	 * etiqueta, tampoco puede depender de heredar de ella. Se declara aquí. */
	font-family: var( --wp--preset--font-family--titulares );
	font-weight: 400;
	letter-spacing: 0.055em;
	line-height: 1.02;
	margin-block: var( --wp--preset--spacing--40 ) 0;
	text-wrap: balance;
}

.emp-heroe .emp-columna--entradilla {
	margin-top: var( --wp--preset--spacing--50 );
}


/* -------------------------------------------------------------------------
   13. Llamada a la acción
   ------------------------------------------------------------------------- */

.emp-cta {
	text-align: center;
}

/* (0,3,0) y después de §9 a propósito: tiene que ganar al `margin-inline: 0`
   con el que la medida de lectura deshace el centrado de la retícula. */
:root .emp-cta :is( .emp-columna, .emp-antetitulo, .emp-heroe__claim ) {
	margin-inline: auto !important;
}

.emp-cta .emp-antetitulo--con-filete::after,
.emp-cta .emp-antetitulo--con-fuste::after {
	margin-inline: auto;
}

/* Letra pequeña bajo el botón: el aviso de que hay entrevista de admisión.
   No es un descargo legal, es gestión de expectativa — la conversión es venir
   a una reunión, no darse de alta (ACUERDO.md §1). */
.emp-cta__nota {
	color: var( --emp-color-apoyo );
	font-size: var( --wp--preset--font-size--pie );
	margin-top: var( --wp--preset--spacing--30 );
}


/* -------------------------------------------------------------------------
   14. Cita
   ------------------------------------------------------------------------- */

/* theme.json pone el filete izquierdo en bronce; la firma va en el color de
   apoyo del contexto para no caer en 3,20 sobre beige. */
.wp-block-quote cite {
	color: var( --emp-color-apoyo );
	display: block;
	margin-top: var( --wp--preset--spacing--30 );
}


/* -------------------------------------------------------------------------
   15. Cabecera del sitio
   -------------------------------------------------------------------------
   Sobria y quieta. `position: sticky` y no `fixed`: la cabecera sigue
   ocupando su sitio en el flujo, así que al fijarse no hay salto de contenido
   ni hace falta compensar con un `padding-top` que siempre acaba desajustado.
   Y como no hay JavaScript de por medio, tampoco hay parpadeo: no existe un
   estado «antes de que el guion decida».
   ------------------------------------------------------------------------- */

/* El contenedor del tema padre viene con fondo blanco. El fondo del sitio es el
   beige de la paleta, así que se deja pasar: si no, entre dos bandas a sangre
   asoma una franja blanca que no está en ningún sitio del sistema de color. */
:root #page,
:root .site-content,
:root .inside-article,
:root .entry-content {
	background-color: transparent;
}

/* Una página montada entera con bandas a sangre no necesita el acolchado
   vertical del contenedor: cada banda trae el suyo, y el que sobra se ve como
   una franja de fondo entre la cabecera y el héroe. La clase la pone el tema
   solo cuando el primer bloque de la página es `alignfull` (functions.php), así
   que una entrada o una página normal conservan su aire. */
body.emp-bandas .site-content {
	padding-block: 0;
}

/* Barra de scroll horizontal en todas las páginas con bandas a sangre.
 *
 * GeneratePress resuelve `alignfull` con `width: 100vw` y un margen negativo de
 * `50vw`. El problema es que `100vw` incluye el ancho de la barra de scroll
 * VERTICAL y `100%` no: con la barra presente, cada banda mide 15 px más que el
 * contenido disponible y asoma 8 px por la derecha. No se ve en un portátil sin
 * barras superpuestas ni en un navegador headless —que las oculta por defecto—,
 * y sí en cuanto la página es lo bastante larga para que aparezca la barra.
 *
 * Se corta con `clip` y no con `hidden` a propósito: `hidden` crea un contenedor
 * de scroll y eso rompería el `position: sticky` de la cabecera, que está veinte
 * líneas más abajo. `clip` recorta sin crear contexto de desplazamiento, que es
 * exactamente para lo que existe.
 *
 * Va en `html` además de en `body` porque el desbordamiento lo propaga el
 * elemento raíz: aplicarlo solo al `body` deja la barra puesta. */
html,
body {
	overflow-x: clip;
}

.site-header {
	background-color: var( --wp--preset--color--negro );
	border-bottom: 1px solid rgba( 176, 122, 71, 0.28 );
	color: var( --emp-color-texto );
	position: sticky;
	top: 0;
	z-index: 100;
}

/* El estriado como remate inferior de la cabecera: el motivo de marca en la
   primera pieza que se ve del sitio. Decoración pura, sin contenido. */
.site-header::after {
	--emp-fuste-color: var( --wp--preset--color--bronce );

	background-image: repeating-linear-gradient(
		90deg,
		var( --emp-fuste-color ) 0,
		var( --emp-fuste-color ) 1px,
		transparent 1px,
		transparent 7px
	);
	block-size: 3px;
	content: "";
	inline-size: 100%;
	inset-block-end: -4px;
	inset-inline-start: 0;
	mask-image: linear-gradient( 90deg, #000 0, #000 30%, transparent 62% );
	-webkit-mask-image: linear-gradient( 90deg, #000 0, #000 30%, transparent 62% );
	opacity: 0.32;
	pointer-events: none;
	position: absolute;
}

/* La cabecera comparte la retícula del contenido.
 *
 * GeneratePress trae su contenedor a 1200 px y el contenido de las páginas se
 * constriñe al `wideSize` de `theme.json`, 1216 px. Medido: el logotipo
 * arrancaba en x=153 y el contenido de la página en x=105 — cuarenta y ocho
 * píxeles de desfase entre la cabecera y todo lo que hay debajo.
 *
 * Se resuelve aquí y no en el ajuste `container_width` del personalizador por
 * dos razones: GeneratePress cachea el CSS que genera desde esa opción, y sobre
 * todo porque así el ancho queda atado a la MISMA variable que usa el contenido.
 * Una sola fuente de verdad: si mañana cambia `wideSize`, la cabecera lo sigue.
 *
 * El relleno se suma al ancho máximo para que la caja de contenido mida
 * exactamente `wideSize` y su borde izquierdo caiga en la misma calle que el
 * resto de la página, conservando aire en pantallas estrechas. */
.site-header .inside-header {
	--emp-calle: 1.5rem; /* el mismo relleno que llevan las bandas a sangre */

	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--30 ) var( --wp--preset--spacing--50 );
	justify-content: space-between;
	max-width: calc( var( --wp--style--global--wide-size ) + 2 * var( --emp-calle ) );
	padding-block: var( --wp--preset--spacing--30 );
	padding-inline: var( --emp-calle );
}

/* La barra de administración es `position: fixed`; sin esto la cabecera se
   fija debajo de ella y se pierde la primera línea. */
body.admin-bar .site-header {
	top: 32px;
}

@media ( max-width: 782px ) {

	body.admin-bar .site-header {
		top: 46px;
	}
}

/* --- La marca ------------------------------------------------------------
   Reproduce el lockup: el fuste, el nombre en didone con tracking amplio, un
   filete y el descriptor en versales pequeñas. Se compone con texto y con el
   icono `columna` del sistema en vez de con una imagen para que escale, se
   imprima y no dependa de que alguien suba el archivo correcto. */

.site-header .main-title {
	font-size: inherit;
	line-height: 1;
	margin: 0;
}

.emp-marca__enlace {
	align-items: center;
	color: var( --wp--preset--color--bronce );
	display: inline-flex;
	gap: 0.85rem;
	text-decoration: none;
}

.emp-marca__sello {
	color: var( --wp--preset--color--bronce );
	display: inline-flex;
	flex: 0 0 auto;
}

.emp-marca__texto {
	display: block;
}

.emp-marca__nombre {
	color: var( --wp--preset--color--bronce );
	display: block;
	font-family: var( --wp--preset--font-family--titulares );
	font-size: clamp( 1.25rem, 1.05rem + 1vw, 1.6rem );
	font-weight: 400;
	letter-spacing: 0.2em;
	line-height: 1;
	text-transform: uppercase;
}

.emp-marca__descriptor {
	border-top: 1px solid rgba( 176, 122, 71, 0.45 );
	color: var( --wp--preset--color--beige );
	display: block;
	font-family: var( --wp--preset--font-family--texto );
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	line-height: 1.4;
	margin-top: 0.35rem;
	padding-top: 0.3rem;
	text-transform: uppercase;
}

/* Por debajo de 30rem el descriptor no cabe en una línea y parte la palabra.
   Antes que partirla, se retira: el nombre solo ya identifica la asociación. */
@media ( max-width: 30rem ) {

	.emp-marca__descriptor {
		display: none;
	}
}

/* --- La navegación ------------------------------------------------------ */

.site-header .main-navigation,
.site-header .main-navigation .inside-navigation {
	background-color: transparent;
}

.site-header .main-navigation {
	flex: 0 1 auto;
}

.site-header .main-navigation .inside-navigation {
	padding: 0;
}

/* Tamaño y tracking calculados para que los siete rótulos del menú quepan en
   una sola línea junto al lockup dentro de la caja de 76rem. Con 13 px y 0,14 em
   sumaban 1234 px y el último saltaba a una segunda fila huérfana. */
.site-header .main-navigation .main-nav > ul > li > a {
	color: var( --wp--preset--color--beige );
	font-family: var( --wp--preset--font-family--texto );
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	line-height: 1;
	padding: 1rem 0.7rem;
	text-transform: uppercase;
}

.site-header .main-navigation .main-nav > ul > li > a:hover,
.site-header .main-navigation .main-nav > ul > li > a:focus,
.site-header .main-navigation .main-nav > ul > li.current-menu-item > a {
	background-color: transparent;
	color: var( --wp--preset--color--bronce );
}

/* La página actual se marca con un filete bronce bajo el rótulo. Es la única
   señal de estado del menú y no depende del color: quien no distinga el bronce
   ve igualmente la línea. */
.site-header .main-navigation .main-nav > ul > li > a::after {
	background-color: var( --wp--preset--color--bronce );
	block-size: 1px;
	content: "";
	inline-size: 0;
	inset-block-end: 0.55rem;
	inset-inline-start: 0.9rem;
	position: absolute;
	transition: inline-size 200ms cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

.site-header .main-navigation .main-nav > ul > li {
	position: relative;
}

.site-header .main-navigation .main-nav > ul > li > a:hover::after,
.site-header .main-navigation .main-nav > ul > li > a:focus::after,
.site-header .main-navigation .main-nav > ul > li.current-menu-item > a::after {
	inline-size: calc( 100% - 1.4rem );
}

@media ( prefers-reduced-motion: reduce ) {

	.site-header .main-navigation .main-nav > ul > li > a::after {
		transition: none;
	}
}

/* Submenús: fondo antracita para que se despeguen de la cabecera negra. */
.site-header .main-navigation .main-nav ul ul {
	background-color: var( --wp--preset--color--antracita );
	border-top: 1px solid var( --wp--preset--color--bronce );
}

.site-header .main-navigation .main-nav ul ul li a {
	color: var( --wp--preset--color--beige );
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
}

.site-header .main-navigation .main-nav ul ul li a:hover,
.site-header .main-navigation .main-nav ul ul li a:focus {
	background-color: transparent;
	color: var( --wp--preset--color--bronce );
}

/* El botón de menú en móvil. Bronce sobre negro: 5,42 ✔ */
.site-header .menu-toggle,
.site-header .mobile-menu-control-wrapper .menu-toggle {
	background-color: transparent;
	color: var( --wp--preset--color--bronce );
	font-family: var( --wp--preset--font-family--texto );
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}


/* -------------------------------------------------------------------------
   16. Pie del sitio
   -------------------------------------------------------------------------
   Negro con filete bronce, la contraparte de la cabecera. El pie de
   GeneratePress toma su color del personalizador del padre, que está fuera de
   la paleta; por eso esta zona declara su propio fondo y su propio contexto de
   color, y así los enlaces salen en bronce (5,42 ✔) caiga donde caiga.
   ------------------------------------------------------------------------- */

.site-info,
.emp-pie {
	background-color: var( --wp--preset--color--negro );
	border-top: 1px solid var( --wp--preset--color--bronce );
	color: var( --emp-color-texto );
	padding-block: var( --wp--preset--spacing--60 );
}

.site-info .inside-site-info {
	display: grid;
	gap: var( --wp--preset--spacing--50 );
}

/* --- Bloque de marca del pie -------------------------------------------- */

.emp-pie-marca {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--30 ) var( --wp--preset--spacing--50 );
	justify-content: space-between;
}

.emp-pie-marca__identidad {
	align-items: center;
	display: flex;
	gap: 0.85rem;
}

.emp-pie-marca__sello {
	color: var( --wp--preset--color--bronce );
	display: inline-flex;
	flex: 0 0 auto;
}

.emp-pie-marca__nombre {
	color: var( --wp--preset--color--bronce );
	display: block;
	font-family: var( --wp--preset--font-family--titulares );
	font-size: var( --wp--preset--font-size--grande );
	letter-spacing: 0.2em;
	line-height: 1;
	text-transform: uppercase;
}

.emp-pie-marca__lema {
	color: var( --wp--preset--color--beige );
	display: block;
	font-family: var( --wp--preset--font-family--texto );
	font-size: var( --wp--preset--font-size--pie );
	letter-spacing: 0.16em;
	margin-top: 0.45rem;
	text-transform: uppercase;
}

/* El estriado como filete del pie, a todo lo ancho y desvaneciéndose: el mismo
   motivo con el que arranca la cabecera cierra la página. */
.emp-pie-fuste {
	--emp-fuste-color: var( --wp--preset--color--bronce );

	background-image: repeating-linear-gradient(
		90deg,
		var( --emp-fuste-color ) 0,
		var( --emp-fuste-color ) 1px,
		transparent 1px,
		transparent 7px
	);
	block-size: 0.625rem;
	display: block;
	inline-size: 100%;
	mask-image: linear-gradient( 90deg, transparent 0, #000 15%, #000 85%, transparent 100% );
	-webkit-mask-image: linear-gradient( 90deg, transparent 0, #000 15%, #000 85%, transparent 100% );
	opacity: 0.5;
}

.site-info .copyright-bar {
	color: var( --wp--preset--color--beige );
	font-family: var( --wp--preset--font-family--texto );
	font-size: var( --wp--preset--font-size--pie );
	letter-spacing: 0.08em;
}

/* --- Menú legal del pie ------------------------------------------------- */

.emp-pie-legal {
	padding-block-start: var( --wp--preset--spacing--30 );
}

.emp-pie-legal__lista {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--30 ) var( --wp--preset--spacing--50 );
	list-style: none;
	margin: 0;
	padding: 0;
}

.emp-pie-legal__lista a {
	color: var( --emp-color-enlace );
	font-family: var( --wp--preset--font-family--texto );
	font-size: var( --wp--preset--font-size--pie );
	font-weight: 600;
	letter-spacing: var( --emp-tracking-versal );
	text-decoration: none;
	text-transform: uppercase;
}

.emp-pie-legal__lista a:hover,
.emp-pie-legal__lista a:focus {
	text-decoration: underline;
}


/* -------------------------------------------------------------------------
   17. Salto al contenido
   -------------------------------------------------------------------------
   El enlace lo imprime GeneratePress (`generate_do_skip_to_content_link`); aquí
   solo se le da el registro de la marca. Importa más que en otros sitios porque
   la cabecera es fija: quien navega con teclado tiene que poder saltársela, y
   con `z-index` por debajo del 100 de la cabecera quedaría tapado justo al
   recibir el foco.
   ------------------------------------------------------------------------- */

.skip-link:focus {
	background-color: var( --wp--preset--color--bronce );
	/* negro sobre bronce: 5,42 ✔ */
	color: var( --wp--preset--color--negro );
	font-family: var( --wp--preset--font-family--texto );
	font-size: var( --wp--preset--font-size--pequena );
	font-weight: 600;
	letter-spacing: 0.12em;
	padding: 0.85rem 1.5rem;
	text-decoration: none;
	text-transform: uppercase;
	z-index: 1000;
}


/* -------------------------------------------------------------------------
   18. Ajustes del lienzo del editor
   -------------------------------------------------------------------------
   WordPress reescribe estos selectores prefijándolos con
   `.editor-styles-wrapper`, así que aquí solo van reglas de contexto que en el
   front ya resuelve el tema padre.
   ------------------------------------------------------------------------- */

.emp-seccion--oscura .wp-block,
.emp-seccion--antracita .wp-block,
.emp-heroe .wp-block {
	color: var( --emp-color-texto );
}


/* -------------------------------------------------------------------------
   19. Movimiento y medios
   ------------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {

	*,
	*::before,
	*::after {
		animation-delay: 0ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-delay: 0ms !important;
		transition-duration: 0.01ms !important;
	}

	/* Una cabecera fija con `reduce` sigue siendo correcta —no se mueve sola—,
	   pero quien pide movimiento reducido suele pedirlo por mareo con el
	   desplazamiento, y una banda que acompaña al scroll es exactamente eso. */
	.site-header {
		position: static;
	}
}

/* Impresión: el fondo oscuro se descarta y todo vuelve a negro sobre blanco.
   La regla de contraste es de pantalla; en papel manda la tinta. */
@media print {

	.emp-seccion--oscura,
	.emp-seccion--antracita,
	.emp-seccion--velada,
	.emp-heroe,
	.site-header,
	.site-info {
		/* `background` y `color` sí lo necesitan: compiten contra las clases de
		   preajuste de `theme.json`, que WordPress emite con `!important`.
		   `position` no: esta regla llega después que la de la cabecera con la
		   misma especificidad, así que gana por orden. */
		background: none !important;
		color: #000 !important;
		position: static;
	}

	.emp-seccion--velada::before,
	.emp-heroe::before,
	.emp-heroe::after,
	.site-header::after,
	.emp-pie-fuste {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   Ritmo de las bandas, en la hoja y no en el marcado
   ---------------------------------------------------------------------------
   El editor de bloques escribe el relleno como estilo en línea en cada grupo:
   `style="padding-top:var(--wp--preset--spacing--70);…"`, cuatro declaraciones
   por banda. En la portada eran veintitrés atributos `style`, y con ellos tres
   problemas: el HTML deja de ser legible, cambiar el ritmo del sitio obliga a
   editar página por página, y cualquier ajuste desde la hoja necesita ganarle a
   un estilo en línea, que es la razón de la mitad de los `!important` que
   había.

   Al vivir aquí, el ritmo es una decisión del sistema de diseño y se cambia en
   un sitio. Las bandas siguen aceptando un relleno propio desde el editor si
   alguna lo necesita: un estilo en línea gana a esto, que es justo lo que se
   quiere para la excepción, no para la norma.
   --------------------------------------------------------------------------- */

.emp-heroe,
.emp-banda--ancha,
.emp-cta,
.emp-seccion--fuste {
	padding-inline: var( --wp--preset--spacing--40 );
}

.emp-banda--ancha,
.emp-seccion--fuste {
	padding-block: var( --wp--preset--spacing--70 );
}

.emp-cta {
	padding-block: var( --wp--preset--spacing--60 );
}

/* El héroe conserva su relleno fluido: es el único que se mide contra la altura
   de la ventana, para que la llamada a la acción quede sobre el pliegue. */
.emp-heroe {
	padding-block: var( --wp--preset--spacing--80 );
}

/* ---------------------------------------------------------------------------
   Nota sobre los `!important` de este archivo
   ---------------------------------------------------------------------------
   Auditados uno a uno contra el CSS que sirve WordPress, no a ojo. Quedan
   dieciocho y los dieciocho son inevitables:

   · Ocho sobrescriben clases de preajuste de `theme.json`. WordPress las emite
     ya con `!important` —`.has-negro-color{color:… !important}`, y lo mismo con
     los tamaños de fuente—, de modo que no hay especificidad que las gane.
   · Dos sobrescriben la maquetación constreñida del núcleo, que declara
     `margin-left: auto !important` en los hijos del contenedor.
   · Seis son el bloque de `prefers-reduced-motion`, que tiene que ganarle a
     cualquier animación, incluidas las de estilo en línea. Es el patrón
     idiomático y quitarlo lo dejaría sin efecto.
   · Dos son de impresión, contra fondos de preajuste.

   Se retiró el único que no hacía falta: `position: static` en el bloque de
   impresión, que gana por orden de aparición.

   Regla para quien añada más: antes de escribir uno, comprobar contra qué
   compite mirando el CSS servido. Si lo que hay que ganar no lleva `!important`,
   basta con especificidad u orden.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Banda compacta
   ---------------------------------------------------------------------------
   Variante para bandas que dicen poco y no necesitan la respiración de una
   sección de contenido. Las cifras son el caso: tres números y tres etiquetas
   ocupaban 620 px de alto, más que cualquier sección con texto de verdad.

   Es una variante del sistema y no una excepción: cualquier banda breve puede
   usarla, y el ritmo general sigue viviendo en un solo sitio.
   --------------------------------------------------------------------------- */

.emp-banda--compacta {
	padding-block: var( --wp--preset--spacing--50 );
}

/* La cifra acompaña al titular, no compite con él. Antes estaba en 6rem, por
   encima del claim de portada (5rem): la jerarquía del sitio quedaba invertida
   y tres números pesaban más que el mensaje principal. */
.emp-banda--compacta .emp-cifra {
	line-height: 1;
}