/* ==========================================================================
   10 · BASE — reset, tipografía, accesibilidad
   --------------------------------------------------------------------------
   La accesibilidad va aquí, en el primer commit, no en una pasada posterior:
   skip link, foco siempre visible, y `prefers-reduced-motion` como camino
   por defecto. Ninguna de las tres se negocia después.
   ========================================================================== */

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

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

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* Compensa la cabecera fija al saltar a un ancla. Sustituye por completo
	   al cálculo de offset en JS que arrastraba el tema anterior. */
	scroll-padding-top: calc(var(--header-h) + var(--space-3));
}

body {
	/* Columna flexible para que el pie quede abajo también en páginas cortas
	   (un 404, una búsqueda sin resultados). Sin esto, el pie sube a media
	   pantalla y deja un hueco vacío debajo. */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: var(--c-bg);
	color: var(--c-text);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-synthesis-weight: none;
	text-rendering: optimizeLegibility;
}

/* El contenido se come el espacio sobrante y empuja el pie al fondo. */
.site-main {
	flex: 1 0 auto;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--c-heading);
	font-weight: 700;
	line-height: 1.2;
	/* Norma de marca: -0.02em solo en los titulares grandes. */
	letter-spacing: -0.02em;
	text-wrap: balance;
}

h1 {
	font-size: var(--fs-h1);
	font-weight: 800;
	line-height: 1.1;
}

h2 {
	font-size: var(--fs-h2);
}

h3 {
	font-size: var(--fs-h3);
	letter-spacing: normal;
}

h4 {
	font-size: var(--fs-lead);
	letter-spacing: normal;
}

h5 {
	font-size: var(--fs-body);
	letter-spacing: normal;
}

h6 {
	font-size: var(--fs-small);
	letter-spacing: normal;
	text-transform: uppercase;
}

p {
	text-wrap: pretty;
}

strong,
b {
	font-weight: 600;
}

small {
	font-size: var(--fs-small);
}

code,
kbd,
samp,
pre {
	font-family: var(--font-mono);
	font-size: 0.9em;
}

/* ── Enlaces ───────────────────────────────────────────────────────────── */

a {
	color: var(--c-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--t-fast);
}

a:hover {
	color: var(--c-link-hover);
}

/* ── Listas ────────────────────────────────────────────────────────────── */

ul,
ol {
	padding-inline-start: var(--space-3);
}

li + li {
	margin-block-start: var(--space-1);
}

/* ── Medios ────────────────────────────────────────────────────────────── */

img,
picture,
video,
canvas,
svg,
iframe {
	display: block;
	max-width: 100%;
}

img,
video {
	height: auto;
}

/* ── Formularios ───────────────────────────────────────────────────────── */

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

textarea {
	resize: vertical;
}

button {
	cursor: pointer;
}

/* ── Tablas ────────────────────────────────────────────────────────────── */

table {
	border-collapse: collapse;
	width: 100%;
}

/* ── El atributo `hidden` siempre gana ─────────────────────────────────────
   Sin esto, cualquier `display: block` de un componente pisa el `hidden` del
   navegador y el elemento sigue visible. Todo lo que se muestre y oculte en
   este tema usa el atributo `hidden`, nunca `style.display` desde JS.
   ────────────────────────────────────────────────────────────────────────── */

[hidden] {
	display: none !important;
}

/* ── Selección ─────────────────────────────────────────────────────────── */

::selection {
	background-color: var(--c-accent);
	color: var(--c-white);
}

/* ==========================================================================
   ACCESIBILIDAD
   ========================================================================== */

/* ── Foco. NUNCA se hace `outline: none` en este proyecto. ─────────────── */

:focus-visible {
	outline: var(--focus-width) solid var(--c-focus);
	outline-offset: var(--focus-offset);
	border-radius: var(--radius-button);
}

/* Quita el anillo del ratón, lo mantiene para el teclado. */
:focus:not(:focus-visible) {
	outline: none;
}

/* ── Texto solo para lectores de pantalla (convención de WordPress) ────── */

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

/* ── Saltar al contenido ───────────────────────────────────────────────── */

.skip-link {
	position: absolute;
	inset-block-start: var(--space-1);
	inset-inline-start: var(--space-1);
	z-index: calc(var(--z-modal) + 1);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-button);
	background-color: var(--c-white);
	color: var(--c-night);
	font-size: var(--fs-small);
	font-weight: 600;
	text-decoration: none;
	box-shadow: var(--shadow-card-hover);
	/* Fuera de pantalla hasta recibir el foco. */
	transform: translateY(-200%);
	transition: transform var(--t-fast);
}

.skip-link:focus {
	transform: translateY(0);
}

/* ── Movimiento reducido ───────────────────────────────────────────────────
   El desplazamiento suave y las animaciones se ACTIVAN solo si el usuario
   no ha pedido reducir el movimiento. El camino accesible es el que se
   aplica por defecto, no una excepción al final del archivo.
   ────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Red de seguridad: si algún componente añadiera una animación olvidando
   el guard anterior, aquí se neutraliza igualmente. */
@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;
	}
}

/* ==========================================================================
   CLASES DE NÚCLEO DE WORDPRESS
   Requeridas para que el contenido antiguo del editor clásico siga
   maquetándose bien. Los ~41 artículos existentes las usan.
   ========================================================================== */

.alignleft {
	float: left;
	margin-inline-end: var(--space-3);
	margin-block-end: var(--space-2);
}

.alignright {
	float: right;
	margin-inline-start: var(--space-3);
	margin-block-end: var(--space-2);
}

.aligncenter {
	display: block;
	margin-inline: auto;
	margin-block-end: var(--space-3);
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text,
.gallery-caption {
	color: var(--c-muted);
	font-size: var(--fs-small);
	line-height: 1.5;
	text-align: center;
}

/* Marcadores del núcleo que deben existir aunque no se estilicen. */
.sticky,
.bypostauthor {
	/* Intencionadamente vacío: WordPress exige que estén declaradas. */
}