/*
 * Reset y estilos base.
 */

/* ── Reset ─────────────────────────────────────────────── */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* I6 · Desplazamiento suave a las anclas (flechas del 03; acceso del 02
   sin JavaScript), salvo con movimiento reducido. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
	margin: 0;
}

ul[class],
ol[class] {
	margin: 0;
	padding: 0;
	list-style: none;
}

img,
picture,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

svg {
	max-width: 100%;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

/* ── Color por fondo (sistema-color.md: lo decide el fondo) ── */

:root,
[data-fondo="claro"] {
	/* Superficies grandes en --beige-50: el corporativo a pantalla completa
	   se percibe más tostado. --beige-100 queda para cajas y paneles. */
	--c-fondo:   var(--beige-50);
	--c-texto:   var(--azul);
	--c-texto-2: var(--azul-700);
	--c-acento:  var(--beige-600);
	--c-rotulo:  var(--beige-700); /* texto de menos de 24 px: 4,5 */
	--c-filete:  var(--azul-300);
}

/* Claro sobre --beige-100, el tono de cajas y paneles: una banda algo
   más oscura que la página (la columna de Materializar del 01). Los
   colores de texto son los del claro; sobre --beige-100 el acento da 3,47
   y el rótulo 4,85 (sistema-color.md). */
[data-fondo="beige"] {
	--c-fondo:   var(--beige-100);
	--c-texto:   var(--azul);
	--c-texto-2: var(--azul-700);
	--c-acento:  var(--beige-600);
	--c-rotulo:  var(--beige-700);
	--c-filete:  var(--azul-300);
}

/* Claro sobre --azul-50, el azul grisáceo muy suave de las fases 01–03
   del 01. Los colores de texto son los del claro: el azul da 11,12, el
   texto secundario 7,45, el rótulo 5,18 y el acento 3,71
   (sistema-color.md). */
[data-fondo="azul-suave"] {
	--c-fondo:   var(--azul-50);
	--c-texto:   var(--azul);
	--c-texto-2: var(--azul-700);
	--c-acento:  var(--beige-600);
	--c-rotulo:  var(--beige-700);
	--c-filete:  var(--azul-300);
}

[data-fondo="oscuro"] {
	--c-fondo:   var(--azul);
	--c-texto:   var(--blanco);
	--c-texto-2: var(--beige-100);
	--c-acento:  var(--beige-100);
	--c-rotulo:  var(--beige-100);
	--c-filete:  var(--beige-500);
}

[data-fondo] {
	background-color: var(--c-fondo);
	color: var(--c-texto);
}

/* ── Base ──────────────────────────────────────────────── */

body {
	/* Sin position: relative. Hasta 600 px WordPress pone la barra de
	   administración en absolute: con el body posicionado, se colocaría
	   respecto a él y taparía la cabecera. */
	background-color: var(--c-fondo);
	color: var(--c-texto);
	font-family: var(--sans);
	font-size: var(--fs-lectura);
	font-weight: 400;
	line-height: var(--lh-lectura);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* DM Serif solo tiene peso 400: nada de negritas sintéticas. */
	font-synthesis-weight: none;
}

h1, h2, h3 {
	font-family: var(--serif);
	font-weight: 400;
	text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }

p {
	text-wrap: pretty;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

strong,
b {
	font-weight: 600;
}

/* Párrafo de lectura suelto (la banda de la IA del 01): ancho de lectura. */
.loha-texto {
	max-width: var(--lectura);
	color: var(--c-texto);
}

/* Cuerpo en varios párrafos (05): a tamaño de lectura y en --c-texto-2,
   para no competir con el titular. En E, su medida la fija la escena
   (escena.css, --editorial). */
.loha-parrafos {
	max-width: var(--lectura);
	color: var(--c-texto-2);
	font-size: var(--fs-lectura);
	line-height: var(--lh-lectura);
}

.loha-parrafos p + p {
	margin-top: 0.5em;
}

/* --intro: a tamaño de texto introductorio, como la entradilla de R2. Son
   párrafos que hacen de entradilla: la apertura y las dos mitades del
   método del 01. */
.loha-parrafos--intro {
	font-size: var(--fs-intro);
	line-height: var(--lh-intro);
}

/* Tras un encabezado (R2), el aire de su entradilla; si el encabezado
   acaba en filete, el de después del filete (encabezado.css). */
.loha-encabezado + .loha-parrafos--intro {
	margin-top: clamp(1rem, 0.6rem + 1.2vw, 1.75rem);
}

.loha-encabezado:has(> .loha-encabezado__filete:last-child) + .loha-parrafos--intro {
	margin-top: clamp(1.25rem, 0.8rem + 1.4vw, 2.25rem);
}

/* Acento dentro de un texto en Manrope: color y seminegrita, no cursiva
   (Manrope no tiene itálica; componentes.md, convenciones). El color,
   --c-rotulo: --beige-700 sobre claro, porque a tamaño de lectura
   --beige-600 no llega a 4,5. */
.loha-parrafos .loha-acento {
	color: var(--c-rotulo);
	font-style: normal;
	font-weight: 600;
}

/* Frase destacada, aparte y con una línea vertical beige a la izquierda
   (05, pantalla 2, como en su previa): entera en el acento de Manrope,
   sin asteriscos en el campo. La línea es decorativa, en --beige-500. */
.loha-parrafos__cierre--linea {
	padding-left: clamp(1rem, 0.7rem + 1vw, 1.75rem);
	border-left: 2px solid var(--beige-500);
	color: var(--c-rotulo);
	font-weight: 600;
}

/* Acento de los titulares: itálica y color (tipografia.md). */
.loha-acento {
	font-style: italic;
	color: var(--c-acento);
}

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* El foco que el tema mueve por código tras un toque o un clic no se
   pinta (foco.js; componentes.md, Convenciones). Los navegadores que
   entienden focus({ focusVisible: false }) ya no lo dan por visible;
   esta regla es el respaldo para los demás, como Safari anterior a la
   18.4. Gana a cualquier contorno de componente. Con teclado no hay
   clase y el contorno es el de siempre. */
.loha-foco-puntero:focus-visible {
	outline: none !important;
}

/* Iconos de interfaz (Lucide): heredan color y tamaño del texto, con
   trazo uniforme a cualquier tamaño. */
.loha-icono {
	flex: none;
	width: 1.15em;
	height: 1.15em;
}

.loha-icono * {
	vector-effect: non-scaling-stroke;
	stroke-width: 1.5;
}

/*
 * Capas fijas a pantalla completa (menú, cortina) con sesión iniciada:
 * empiezan debajo de la barra de administración, para que no tape CERRAR.
 * WordPress publica su alto en --wp-admin--admin-bar--height (32 px, o
 * 46 px hasta 782 px). Hasta 600 px la barra deja de ser fija y se va con
 * el scroll: ahí la capa vuelve arriba del todo y pasa por encima de ella.
 */
.admin-bar .loha-capa {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media screen and (max-width: 600px) {
	.admin-bar .loha-capa {
		top: 0;
		z-index: 100000; /* la barra de administración usa 99999 */
	}
}

/* Texto solo para lectores de pantalla. Clase de WordPress. */
/* «Saltar al contenido»: el primer elemento del tabulador. Fuera de la
   vista hasta recibir el foco; entonces aparece arriba a la izquierda,
   sobre la cabecera, con el aspecto de las acciones. Lleva a
   <main id="contenido">, que tienen todas las plantillas. */
.loha-saltar {
	position: fixed;
	top: 0.75rem;
	left: var(--margen);
	z-index: calc(var(--z-capa-cabecera) + 1);
	display: inline-flex;
	align-items: center;
	min-height: var(--control-minimo);
	padding: 0 1.25em;
	border-radius: 999px;
	background-color: var(--azul);
	color: var(--blanco);
	font-size: var(--fs-interfaz);
	font-weight: 500;
	letter-spacing: var(--tracking-mayusculas);
	text-decoration: none;
	text-transform: uppercase;
	transform: translateY(calc(-100% - 1.5rem));
}

.loha-saltar:focus-visible {
	outline-color: var(--azul);
	transform: none;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ── Páginas de texto: legales y 404 ─────────────────────── */
/* El relleno común: el primer contenido a --area-segura. La página legal
   tiene su hoja (legal.css); Hablemos, la suya (hablemos.css). */

.loha-legal,
.loha-404 {
	padding: var(--area-segura) var(--margen) var(--separacion);
}

/* 404: entre el titular y la vuelta a la portada, el hueco de las
   páginas legales entre el titular y el texto; el enlace, con su área de
   44 px de alto (antes, pegado a la «g» de «página» y de 23 px). */
.loha-404 > p {
	margin-top: var(--separacion);
}

.loha-404 a {
	display: inline-flex;
	align-items: center;
	min-height: var(--control-minimo);
}

/* ── Entrada común (.loha-entrada, componentes.md, I8) ────── */
/* Una sola animación de entrada en todo el sitio: el epílogo y cada
   pantalla de los casos, y solo para lo que llega con el scroll. Lo que
   ya está a la vista al cargar no se oculta nunca. entrada.js marca como
   --pendiente lo que queda fuera de la vista al terminar la carga (se
   oculta sin transición) y le añade --vista al llegar: el texto aparece y
   sube 1,5 rem; la imagen aparece un poco después. Una sola vez. Sin
   JavaScript, nada se oculta; al imprimir, tampoco: lo pendiente solo
   se oculta en pantalla. */
@media screen {
	.loha-js .loha-entrada--pendiente:not(.loha-entrada--vista) .loha-entrada__texto {
		opacity: 0;
		transform: translateY(1.5rem);
	}

	.loha-js .loha-entrada--pendiente:not(.loha-entrada--vista) .loha-entrada__imagen {
		opacity: 0;
	}
}

.loha-js .loha-entrada--pendiente.loha-entrada--vista .loha-entrada__texto {
	transition:
		opacity var(--t-entrada) var(--curva-suave),
		transform var(--t-entrada) var(--curva-suave);
}

.loha-js .loha-entrada--pendiente.loha-entrada--vista .loha-entrada__imagen {
	transition: opacity var(--t-entrada-imagen) ease var(--t-entrada-retardo);
}

/* Movimiento reducido: solo el fundido, sin desplazamiento. */
@media (prefers-reduced-motion: reduce) {
	.loha-js .loha-entrada--pendiente.loha-entrada--vista .loha-entrada__texto {
		transition: opacity var(--t-entrada) ease;
	}

	.loha-js .loha-entrada--pendiente:not(.loha-entrada--vista) .loha-entrada__texto {
		transform: none;
	}
}

/* ── Impresión ───────────────────────────────────────────── */
/* El contenido entero y legible en papel. El enlace de saltar al
   contenido, fijo, saldría al pie de cada hoja encima del texto: no se
   imprime. Los fondos oscuros se imprimen aunque el navegador no imprima
   fondos: sin ellos, el texto claro que llevan encima casi no se lee. */
@media print {
	.loha-saltar {
		display: none;
	}

	[data-fondo="oscuro"] {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}