/*
Theme Name: Malagueño
Theme URI: https://malagueno.cl
Author: Felipe Malagueño
Description: Tema propio de malagueno.cl. Sitio de ensayo construido sobre el Manual de Marca v1.0: un solo color, Space Grotesk para lo que se lee y JetBrains Mono para lo que se consulta. Sin dependencias, sin constructor, sin framework.
Version: 0.7.3
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: malagueno
Tags: blog, one-column, custom-logo, custom-menu, featured-images, editor-style, translation-ready
*/

/* ==========================================================================
   ÍNDICE

   01  Tokens de marca
   02  Base
   03  Tipografía
   04  Contenedores
   05  Cabecera y navegación
   06  Portada y listados
   07  Tarjetas
   08  Artículo
   09  Contenido (bloques del editor)
   10  Formularios
   11  Widgets
   12  Paginación y navegación entre entradas
   13  Pie
   14  Utilidades y accesibilidad
   ========================================================================== */


/* ==========================================================================
   01 · TOKENS DE MARCA
   Manual de Marca malagueno.cl v1.0. Un único color de marca; los neutros
   sostienen la composición; los tintes solo para fondos y estados suaves,
   nunca para el logotipo. Si algo de aquí cambia, cambia el manual primero.
   ========================================================================== */

:root {
	/* --- Color de marca --- */
	--brand:      #4F69E4;  /* Azul Malagueño · Pantone 2727 C */
	--brand-80:   #7286E9;
	--brand-60:   #95A3EE;
	--brand-40:   #B9C2F4;
	--brand-20:   #DCE1F9;

	/* --- Neutros del manual --- */
	--tinta:      #18181B;
	--hueso:      #F7F7F8;

	/* --- Roles (modo claro) --- */
	--bg:         var(--hueso);
	--surface:    #FFFFFF;
	--surface-2:  #EFEFF1;
	--ink:        var(--tinta);
	--ink-2:      #52525B;
	--ink-3:      #71717A;
	--line:       rgba(24, 24, 27, 0.10);
	--line-2:     rgba(24, 24, 27, 0.20);
	--accent:     var(--brand);
	--accent-bg:  var(--brand-20);
	--on-accent:  #FFFFFF;

	/* --- Tipografía ---
	   El manual fija Space Grotesk (600 titulares, 500 subtítulos, 400 texto)
	   y JetBrains Mono para datos y etiquetas. */
	--font:       "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, "Liberation Mono", monospace;

	/* El manual fija el cuerpo en 15 px. Eso es correcto para interfaz y para
	   documentos, pero un ensayo de 1200 palabras se lee siete minutos
	   seguidos y a 15 px cansa. Se usan 17 px dentro de la columna de lectura
	   y 15 px en todo lo demás: menú, tarjetas, metadatos, widgets. La medida
	   sigue dentro del rango del manual, 60 a 75 caracteres por línea.
	   Para volver al manual al pie de la letra: --size-read: 0.9375rem. */
	--size-ui:    0.9375rem;  /* 15 px */
	--size-read:  1.0625rem;  /* 17 px */
	--lh-read:    1.7;
	--lh-ui:      1.65;

	/* Etiquetas en mono: siempre versalitas y tracking amplio. */
	--label-size: 0.6875rem;
	--label-ls:   0.14em;

	/* --- Medidas --- */
	--wrap:       72rem;    /* 1152 px · contenedor general */
	--read:       38rem;    /*  608 px · columna de lectura, unos 68 caracteres */
	--media:      56rem;    /*  896 px · imagen del artículo, más ancha que el texto */
	--gutter:     1.5rem;

	/* --- Forma ---
	   El principio del manual es la barra recta. El radio se mantiene mínimo
	   a propósito; poner 0 aquí deja todo el sitio a escuadra. */
	--radius:     4px;
	--radius-lg:  8px;

	/* --- Ritmo vertical --- */
	--space-section: 5rem;
	--header-h:      5rem;

	color-scheme: light;
}

/* --- Modo azul ---
   El sitio entero pintado con el color de marca y el texto en blanco.

   Hay una restricción dura que conviene entender antes de tocar nada. Sobre
   el Azul Malagueño, el blanco puro da un contraste de 4,7 a 1: pasa el
   mínimo, pero por poco. Cualquier tono más claro que el azul y más oscuro
   que el blanco —un blanco al 90%, el tinte del 20%, lo que sea— cae por
   debajo de 4,5 y deja de ser legible según la norma. O sea que aquí no hay
   espacio para tonos intermedios: todo lo que se lee va en blanco.

   Por eso este modo no jerarquiza con color sino con tipografía. Lo que en
   claro se distinguía por ser más gris, aquí se distingue por ser más chico,
   más espaciado o de otro peso. Es una restricción, y es lo que le da al
   modo azul su aire de afiche.

   El acento tampoco puede ser azul sobre azul: pasa a ser blanco, y lo que
   antes marcaba el color ahora lo marca el subrayado. */
:root[data-theme="blue"] {
	--bg:         var(--brand);
	--surface:    rgba(255, 255, 255, 0.10);
	--surface-2:  rgba(255, 255, 255, 0.16);
	--ink:        #FFFFFF;
	--ink-2:      #FFFFFF;
	--ink-3:      #FFFFFF;
	--line:       rgba(255, 255, 255, 0.28);
	--line-2:     rgba(255, 255, 255, 0.45);
	--accent:     #FFFFFF;
	--accent-bg:  rgba(255, 255, 255, 0.18);
	--on-accent:  var(--brand);

	color-scheme: dark;
}

/* Los tonos secundarios pierden peso en vez de perder contraste. */
:root[data-theme="blue"] .kicker,
:root[data-theme="blue"] .card-kicker,
:root[data-theme="blue"] .card-meta,
:root[data-theme="blue"] .entry-meta,
:root[data-theme="blue"] .entry-dek,
:root[data-theme="blue"] .card-excerpt,
:root[data-theme="blue"] .post-row p,
:root[data-theme="blue"] .home-intro .dek,
:root[data-theme="blue"] .page-intro p,
:root[data-theme="blue"] .footer-lead,
:root[data-theme="blue"] .site-footer p,
:root[data-theme="blue"] figcaption,
:root[data-theme="blue"] .wp-element-caption { opacity: 0.82; }

/* El punto del rótulo y el botón sí necesitan diferenciarse del fondo. */
:root[data-theme="blue"] .dot { background: #FFFFFF; }
:root[data-theme="blue"] .btn,
:root[data-theme="blue"] .wp-block-button__link,
:root[data-theme="blue"] input[type="submit"],
:root[data-theme="blue"] button[type="submit"],
:root[data-theme="blue"] .wpcf7-submit { background: #FFFFFF; color: var(--brand); border-color: #FFFFFF; }
:root[data-theme="blue"] .btn:hover,
:root[data-theme="blue"] .wp-block-button__link:hover,
:root[data-theme="blue"] input[type="submit"]:hover,
:root[data-theme="blue"] button[type="submit"]:hover,
:root[data-theme="blue"] .wpcf7-submit:hover { background: var(--brand-20); border-color: var(--brand-20); }

/* Formularios: el blanco puro de fondo sería un agujero en la página. */
:root[data-theme="blue"] input[type="text"],
:root[data-theme="blue"] input[type="email"],
:root[data-theme="blue"] input[type="url"],
:root[data-theme="blue"] input[type="tel"],
:root[data-theme="blue"] input[type="search"],
:root[data-theme="blue"] textarea,
:root[data-theme="blue"] select { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; border-color: rgba(255, 255, 255, 0.45); }
:root[data-theme="blue"] input::placeholder,
:root[data-theme="blue"] textarea::placeholder { color: rgba(255, 255, 255, 0.7); }

/* Las imágenes sobre azul necesitan menos borde, no más. */
:root[data-theme="blue"] .card-media,
:root[data-theme="blue"] .post-row .thumb,
:root[data-theme="blue"] .entry-featured { background: rgba(255, 255, 255, 0.08); }
:root[data-theme="blue"] .entry-featured figcaption { background: rgba(255, 255, 255, 0.10); }
:root[data-theme="blue"] .to-top { background: #FFFFFF; color: var(--brand); }
:root[data-theme="blue"] ::selection { background: #FFFFFF; color: var(--brand); }

/* El símbolo de la marca es un círculo azul: sobre azul desaparece.
   Se le pone el disco blanco y la marca en azul, que es la versión
   invertida que el propio manual contempla. */
:root[data-theme="blue"] .site-symbol circle { fill: #FFFFFF; }
:root[data-theme="blue"] .site-symbol rect { fill: var(--brand); }

/* Nota: aquí no hay bloque `@media (prefers-color-scheme: dark)`, y es a
   propósito. El modo azul no se define solo con variables: necesita también
   las reglas de arriba, que cuelgan del atributo. Si la preferencia del
   sistema se resolviera por media query, un visitante con el sistema en
   oscuro recibiría el fondo azul pero con los formularios blancos y el
   símbolo azul sobre azul, o sea invisible. La preferencia del sistema la
   resuelve el script de la cabecera, que escribe el atributo antes del
   primer pintado; así siempre hay un `data-theme` explícito y todas las
   reglas aplican juntas. */


/* ==========================================================================
   02 · BASE
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
	margin: 0;
	background-color: var(--bg);
	color: var(--ink-2);
	font-family: var(--font);
	font-size: var(--size-ui);
	line-height: var(--lh-ui);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}

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

hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: var(--space-section) 0;
}

::selection { background: var(--brand); color: #fff; }

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Marcado heredado: el sitio anterior tenía un contenedor de animación
   inyectado desde un plugin de snippets. Si vuelve a aparecer, no se ve. */
.animation-container,
.mlg-bg { display: none !important; }


/* ==========================================================================
   03 · TIPOGRAFÍA
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	color: var(--ink);
	font-family: var(--font);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0;
	text-wrap: balance;
}

h1 { font-size: clamp(2.125rem, 1.4rem + 3.2vw, 3.5rem); line-height: 1.05; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); font-weight: 500; letter-spacing: -0.015em; }
h4 { font-size: 1.125rem; font-weight: 500; letter-spacing: -0.01em; }
h5, h6 { font-size: 1rem; font-weight: 500; }

p { margin: 0 0 1.4em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-color: var(--line-2); text-underline-offset: 0.16em; }
a:hover { text-decoration-color: var(--accent); }

strong, b { font-weight: 600; color: var(--ink); }
em, i { font-style: italic; }
small { font-size: 0.875em; }

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

code {
	background: var(--surface-2);
	padding: 0.15em 0.4em;
	border-radius: var(--radius);
}

pre {
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.25rem;
	overflow-x: auto;
	line-height: 1.6;
}

pre code { background: none; padding: 0; }

/* --- La etiqueta: el recurso más característico del manual ---
   Mono, versalitas, tracking amplio. Va en las categorías, las fechas, los
   rótulos de sección y cualquier dato que se consulta en vez de leerse. */
.kicker,
.entry-meta,
.card-kicker,
.card-meta,
.widget-title,
.post-nav .label,
.archive-kicker {
	font-family: var(--font-mono);
	font-size: var(--label-size);
	font-weight: 500;
	letter-spacing: var(--label-ls);
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--ink-3);
	margin: 0;
}

.kicker a,
.card-kicker a,
.entry-meta a { color: inherit; text-decoration: none; }

.kicker a:hover,
.card-kicker a:hover,
.entry-meta a:hover { color: var(--accent); }

/* El punto azul que abre la etiqueta. Suele ser el único color de la vista. */
.kicker .dot,
.card-kicker .dot {
	display: inline-block;
	width: 0.45em;
	height: 0.45em;
	border-radius: 50%;
	background: var(--accent);
	margin-right: 0.65em;
	vertical-align: 0.1em;
}


/* ==========================================================================
   04 · CONTENEDORES
   ========================================================================== */

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.read { max-width: var(--read); margin-inline: auto; }

.site-main {
	display: block;
	min-height: 50vh;
	padding-bottom: var(--space-section);
}


/* ==========================================================================
   05 · CABECERA Y NAVEGACIÓN
   ========================================================================== */

/* Nota para el futuro: getComputedStyle() miente sobre los colores de esta
   cabecera. Al conmutar el tema devuelve los valores del modo anterior para
   los elementos que declaran color con var() aquí dentro, porque es un
   contexto compuesto por el backdrop-filter y Chrome no rehace el cálculo
   hasta que hay repintado. Lo que se pinta en pantalla es correcto: se
   comprobó a ojo en claro y en oscuro. Si algún día se audita el contraste
   por consola, hay que mirar la captura, no el número. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--bg) 85%, transparent);
	backdrop-filter: saturate(1.6) blur(10px);
	-webkit-backdrop-filter: saturate(1.6) blur(10px);
	border-bottom: 1px solid var(--line);
}

.site-header > .wrap {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	min-height: var(--header-h);
}

.site-branding {
	display: flex;
	align-items: center;
	margin-right: auto;
	min-width: 0;
}

/* --- Lockup del manual: símbolo más nombre ---
   El símbolo va a 36 px, sobre el mínimo digital de 32 que fija el manual.
   La separación entre el símbolo y el nombre reproduce la proporción del
   lockup, unos 0,65 del radio. La altura de la cabecera deja 22 px arriba y
   abajo, por encima del área de resguardo, que es el radio: 18 px. */
.site-logo {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	min-width: 0;
}

.site-symbol { flex: none; display: block; }

.custom-logo {
	flex: none;
	display: block;
	width: auto;
	height: 2.25rem;
	max-height: 2.25rem;
}

.site-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1.1;
	color: var(--ink);
	white-space: nowrap;
	transition: color 0.15s ease;
}

.site-logo:hover .site-title { color: var(--accent); }

@media (max-width: 30rem) {
	.site-title { font-size: 0.875rem; }
	.site-symbol,
	.custom-logo { height: 2rem; width: 2rem; }
}

/* En pantallas muy angostas el nombre choca con los botones. Ahí queda solo
   el símbolo, que es una versión legítima del logotipo según el manual, en
   vez de un nombre cortado a la mitad. */
@media (max-width: 24rem) {
	.site-title { display: none; }
}

/* La descripción del sitio no entra en el lockup del manual. Se conserva
   en el marcado por buscadores, pero no se muestra en la cabecera. */
.site-description { display: none; }

/* --- Menú --- */
.main-nav ul {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
}

.main-nav a {
	color: var(--ink-2);
	text-decoration: none;
	font-size: var(--size-ui);
	font-weight: 500;
	transition: color 0.15s ease;
}

.main-nav a:hover { color: var(--ink); }

.main-nav .current-menu-item > a,
.main-nav .current_page_item > a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
}

.main-nav li { position: relative; }

.main-nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 0.4rem 0;
	flex-direction: column;
	gap: 0;
	min-width: 12rem;
	box-shadow: 0 12px 32px rgba(24, 24, 27, 0.10);
}

.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu { display: flex; }
.main-nav .sub-menu a { display: block; padding: 0.5rem 1rem; }

/* --- Botones de la cabecera --- */
.theme-toggle,
.nav-toggle {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	background: transparent;
	color: var(--ink-2);
	border: 1px solid var(--line-2);
	border-radius: var(--radius);
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.theme-toggle:hover,
.nav-toggle:hover { color: var(--ink); border-color: var(--ink-3); }

.nav-toggle svg { width: 1.05rem; height: 1.05rem; }

/* --- El interruptor ---
   Más ancho que alto, como un interruptor. La perilla se desplaza; nada
   más cambia. El movimiento es el que comunica el estado. */
.theme-toggle {
	width: 3.25rem;
	border-radius: var(--radius);
}

.theme-toggle .icon-switch { width: 1.75rem; height: 1.03rem; }

.sw-knob { transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1); }

:root[data-theme="blue"] .sw-knob { transform: translateX(14px); }

/* En modo azul el interruptor está encendido: se rellena la carcasa. */
:root[data-theme="blue"] .theme-toggle { border-color: #FFFFFF; }
:root[data-theme="blue"] .sw-track { fill: rgba(255, 255, 255, 0.22); }

@media (prefers-reduced-motion: reduce) {
	.sw-knob { transition: none; }
}

.nav-toggle { display: none; }

@media (max-width: 48rem) {
	.nav-toggle { display: inline-flex; }

	.main-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--bg);
		border-bottom: 1px solid var(--line);
		display: none;
	}

	.main-nav.is-open { display: block; }

	.main-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0.25rem var(--gutter) 1rem;
	}

	.main-nav li { border-bottom: 1px solid var(--line); }
	.main-nav li:last-child { border-bottom: 0; }
	.main-nav a { display: block; padding: 0.85rem 0; }

	.main-nav .sub-menu {
		position: static;
		display: flex;
		border: 0;
		box-shadow: none;
		padding: 0 0 0.5rem 1rem;
		background: none;
	}
}


/* ==========================================================================
   06 · PORTADA Y LISTADOS
   ========================================================================== */

.home-intro,
.page-intro {
	padding: clamp(3rem, 8vw, 6rem) 0 clamp(2rem, 5vw, 3.5rem);
	text-align: center;
}

.home-intro .kicker,
.page-intro .kicker,
.page-intro .archive-kicker { display: block; margin-bottom: 1.25rem; }

.home-intro h1,
.page-intro h1 { max-width: 18ch; margin-inline: auto; }

.home-intro .dek,
.page-intro p {
	max-width: 46ch;
	margin: 1.25rem auto 0;
	color: var(--ink-3);
	font-size: 1rem;
	line-height: 1.6;
}

.page-intro .search-form { margin-top: 1.75rem; }

/* Encabezado de sección: título a la izquierda, enlace a la derecha,
   filete abajo. Es el patrón que ordena la portada y los archivos. */
.section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 0.9rem;
	margin-bottom: 2.5rem;
	border-bottom: 1px solid var(--line);
}

.section-head h2 {
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.015em;
}

.section-head > a {
	font-family: var(--font-mono);
	font-size: var(--label-size);
	letter-spacing: var(--label-ls);
	text-transform: uppercase;
	color: var(--ink-3);
	text-decoration: none;
	white-space: nowrap;
}

.section-head > a:hover { color: var(--accent); }

/* Primera sección de la portada: necesita aire arriba porque no hay
   presentación todavía. Va como clase y no como estilo suelto. */
.section-head.is-first { margin-top: 3rem; }

.no-results {
	padding: clamp(4rem, 12vw, 8rem) 0;
	text-align: center;
	max-width: 42ch;
	margin-inline: auto;
}


/* ==========================================================================
   07 · TARJETAS
   Sin caja, sin borde y sin sombra: la imagen es la tarjeta. Debajo, la
   categoría en mono, el título y la ficha de datos.
   ========================================================================== */

.post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 3rem 2.25rem;
	margin-bottom: var(--space-section);
}

@media (max-width: 62rem) {
	.post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.75rem; }
}

@media (max-width: 40rem) {
	.post-grid { grid-template-columns: 1fr; gap: 2.75rem; }
}

.card { display: flex; flex-direction: column; min-width: 0; }

/* Ojo con el marcado: la categoría de la tarjeta es un enlace y nunca puede
   quedar dentro de este <a>. HTML no permite anidar enlaces y el navegador
   reordena el marcado si se intenta. Aquí el enlace envuelve solo la imagen
   y la categoría vive en .card-body, como hermana. */
.card-media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--surface-2);
	border: 1px solid var(--line);
	margin-bottom: 1.1rem;
}

.card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.card:hover .card-media img { transform: scale(1.03); }

.card-body { display: flex; flex-direction: column; flex: 1; }

.card-kicker { margin-bottom: 0.7rem; }

.card-title {
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.02em;
	margin: 0 0 0.55rem;
}

.card-title a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--accent), var(--accent));
	background-size: 0 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size 0.3s ease;
}

.card:hover .card-title a,
.card-title a:focus-visible { background-size: 100% 1px; }

.card-excerpt {
	color: var(--ink-3);
	font-size: var(--size-ui);
	line-height: 1.6;
	margin: 0 0 0.9rem;
}

.card-meta { margin-top: auto; }

/* --- Lista con miniatura, para entradas antiguas y archivos --- */
.post-list { margin-bottom: var(--space-section); }

.post-row {
	display: grid;
	grid-template-columns: 10rem 1fr;
	gap: 1.5rem;
	padding: 1.75rem 0;
	border-bottom: 1px solid var(--line);
	align-items: start;
}

.post-row:first-child { border-top: 1px solid var(--line); }

/* Si la lista viene después de un encabezado de sección, el filete de arriba
   ya lo dibujó el encabezado: dos líneas paralelas separadas por un hueco se
   leen como un error. Se quita una y se acerca la lista. */
.section-head + .post-list { margin-top: -1.5rem; }
.section-head + .post-list .post-row:first-child { border-top: 0; }

.post-row .thumb {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	background: var(--surface-2);
}

.post-row .thumb img { width: 100%; height: 100%; object-fit: cover; }

.post-row h2 {
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.015em;
	margin: 0 0 0.35rem;
}

.post-row h2 a { color: inherit; text-decoration: none; }
.post-row h2 a:hover { color: var(--accent); }

.post-row p { color: var(--ink-3); margin: 0 0 0.5rem; max-width: 62ch; }

@media (max-width: 40rem) {
	.post-row { grid-template-columns: 6rem 1fr; gap: 1rem; }
	.post-row p { display: none; }
}


/* ==========================================================================
   08 · ARTÍCULO
   ========================================================================== */

.entry-header {
	padding: clamp(2.5rem, 7vw, 5rem) 0 2.25rem;
	text-align: center;
}

.entry-header .kicker { display: block; margin-bottom: 1.25rem; }

.entry-title { max-width: 22ch; margin-inline: auto; }

.entry-dek {
	max-width: 48ch;
	margin: 1.35rem auto 0;
	color: var(--ink-3);
	font-size: 1.0625rem;
	line-height: 1.55;
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.35rem 0.9rem;
	margin-top: 1.75rem;
}

.entry-meta > * + *::before {
	content: "·";
	margin-right: 0.9rem;
	color: var(--line-2);
}

/* La imagen destacada es más ancha que la columna de texto. Ese desnivel
   es deliberado: es lo que le da aire y jerarquía a la entrada. */
.entry-featured {
	max-width: var(--media);
	margin: 0 auto 3rem;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--line);
	background: var(--surface-2);
}

.entry-featured img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.entry-featured figcaption {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	color: var(--ink-3);
	padding: 0.8rem 1rem;
	border-top: 1px solid var(--line);
	background: var(--surface);
}

.entry-footer {
	max-width: var(--read);
	margin: 3.5rem auto 0;
	padding-top: 1.75rem;
	border-top: 1px solid var(--line);
}

.entry-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.entry-tags > span {
	font-family: var(--font-mono);
	font-size: var(--label-size);
	letter-spacing: var(--label-ls);
	text-transform: uppercase;
	color: var(--ink-3);
	margin-right: 0.25rem;
}

.entry-tags a {
	font-family: var(--font-mono);
	font-size: var(--label-size);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-3);
	text-decoration: none;
	border: 1px solid var(--line-2);
	border-radius: 999px;
	padding: 0.35rem 0.75rem;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.entry-tags a:hover { color: var(--accent); border-color: var(--accent); }


/* ==========================================================================
   09 · CONTENIDO
   Todo lo que sale del editor de bloques vive aquí dentro.
   ========================================================================== */

.entry-content {
	max-width: var(--read);
	margin-inline: auto;
	font-size: var(--size-read);
	line-height: var(--lh-read);
	color: var(--ink-2);
}

.entry-content > * { margin-block: 0 1.4em; }

/* Aire generoso arriba del encabezado y poco abajo: la sección se despega
   del párrafo anterior y se pega al suyo. */
.entry-content h2 { margin-block: 3.5rem 1rem; }
.entry-content h3 { margin-block: 2.5rem 0.75rem; }
.entry-content h4 { margin-block: 2rem 0.6rem; }
.entry-content > :first-child { margin-top: 0; }
.entry-content > :last-child { margin-bottom: 0; }

.entry-content a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.18em;
	transition: color 0.15s ease;
}

.entry-content a:hover { color: var(--accent); }

.entry-content ul,
.entry-content ol { padding-left: 1.3em; }
.entry-content li { margin-bottom: 0.5em; }
.entry-content li::marker { color: var(--ink-3); }

.entry-content blockquote {
	margin: 2.5rem 0;
	padding-left: 1.4rem;
	border-left: 2px solid var(--accent);
	font-size: 1.1875rem;
	line-height: 1.45;
	font-weight: 500;
	color: var(--ink);
}

.entry-content blockquote p:last-child { margin-bottom: 0; }

.entry-content blockquote cite {
	display: block;
	margin-top: 0.75rem;
	font-family: var(--font-mono);
	font-size: var(--label-size);
	letter-spacing: var(--label-ls);
	text-transform: uppercase;
	font-style: normal;
	color: var(--ink-3);
}

.entry-content figure { margin-inline: 0; }

.entry-content figcaption,
.wp-element-caption {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	line-height: 1.5;
	color: var(--ink-3);
	margin-top: 0.7rem;
	text-align: left;
}

.entry-content img,
.wp-block-image img {
	border-radius: var(--radius);
	border: 1px solid var(--line);
}

/* Ancho intermedio y ancho completo del editor. El intermedio coincide con
   el de la imagen destacada, para que todas las imágenes del sitio caigan
   en el mismo par de anchos. */
.entry-content .alignwide {
	width: min(var(--media), calc(100vw - var(--gutter) * 2));
	max-width: none;
	margin-inline: calc(50% - min(var(--media), calc(100vw - var(--gutter) * 2)) / 2);
}

.entry-content .alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

.entry-content .alignfull img { border-radius: 0; border-inline: 0; }

.entry-content .alignleft { float: left; margin: 0.4rem 1.75rem 1.25rem 0; max-width: 45%; }
.entry-content .alignright { float: right; margin: 0.4rem 0 1.25rem 1.75rem; max-width: 45%; }
.entry-content .aligncenter { margin-inline: auto; }

/* Cita destacada: se sale de la columna a propósito. */
.entry-content .wp-block-pullquote {
	width: min(var(--media), calc(100vw - var(--gutter) * 2));
	margin-inline: calc(50% - min(var(--media), calc(100vw - var(--gutter) * 2)) / 2);
	margin-block: 3.5rem;
	padding: 2.5rem 2rem;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	border-left: 0;
	text-align: center;
}

.entry-content .wp-block-pullquote p {
	font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: 0;
}

.entry-content .wp-block-separator {
	max-width: 4rem;
	margin: 3rem auto;
	border-top: 2px solid var(--line-2);
}

.entry-content .wp-block-table table { width: 100%; border-collapse: collapse; font-size: var(--size-ui); }
.entry-content .wp-block-table th,
.entry-content .wp-block-table td { text-align: left; padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--line); }
.entry-content .wp-block-table th { color: var(--ink); font-weight: 600; }

.entry-content .wp-block-embed iframe { border-radius: var(--radius); width: 100%; }

/* Enlaces a redes sociales.
   El bloque de WordPress trae cada icono con el color corporativo de su
   plataforma: cinco colores saturados en una página, justo lo contrario de
   lo que dice el manual. Aquí van todos en tinta y se encienden en azul al
   pasar por encima. La regla vale sea cual sea el estilo elegido en el
   editor, por eso el !important. */
.wp-block-social-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	list-style: none;
	padding: 0;
	margin-inline: 0;
}

.wp-block-social-links .wp-social-link,
.wp-block-social-links.is-style-default .wp-social-link {
	background-color: transparent !important;
	color: var(--ink-2) !important;
	border-radius: var(--radius);
	transition: color 0.15s ease, background-color 0.15s ease;
}

.wp-block-social-links .wp-social-link a { padding: 0.45rem; }
.wp-block-social-links .wp-social-link svg { width: 1.35rem; height: 1.35rem; fill: currentColor; }

.wp-block-social-links .wp-social-link:hover {
	color: var(--accent) !important;
	background-color: var(--accent-bg) !important;
}

/* Botones: los del editor y los del tema son la misma pieza. */
.btn,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--accent);
	color: var(--on-accent);
	font-family: var(--font);
	font-size: var(--size-ui);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	padding: 0.7rem 1.15rem;
	border: 1px solid var(--accent);
	border-radius: var(--radius);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn:hover,
.wp-block-button__link:hover { background: var(--brand-80); border-color: var(--brand-80); }

.btn svg { width: 0.9em; height: 0.9em; }

.is-style-outline .wp-block-button__link,
.btn.secondary {
	background: transparent;
	color: var(--ink);
	border-color: var(--line-2);
}

.is-style-outline .wp-block-button__link:hover,
.btn.secondary:hover { background: transparent; border-color: var(--accent); color: var(--accent); }


/* ==========================================================================
   10 · FORMULARIOS
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="number"],
textarea,
select {
	width: 100%;
	font-family: var(--font);
	font-size: var(--size-ui);
	line-height: 1.5;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line-2);
	border-radius: var(--radius);
	padding: 0.7rem 0.85rem;
	transition: border-color 0.15s ease;
}

input::placeholder,
textarea::placeholder { color: var(--ink-3); }

input:focus,
textarea:focus,
select:focus { outline: none; border-color: var(--accent); }

textarea { min-height: 9rem; resize: vertical; }

label { display: block; color: var(--ink-2); }

/* Los botones de envío son la misma pieza que .btn. Contact Form 7 usa un
   input[type=submit], que no hereda nada de .btn, así que se listan aquí. */
input[type="submit"],
button[type="submit"],
.wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	background: var(--accent);
	color: var(--on-accent);
	font-family: var(--font);
	font-size: var(--size-ui);
	font-weight: 500;
	line-height: 1;
	padding: 0.8rem 1.4rem;
	border: 1px solid var(--accent);
	border-radius: var(--radius);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.wpcf7-submit:hover { background: var(--brand-80); border-color: var(--brand-80); }

/* Contact Form 7 */
.wpcf7 { max-width: var(--read); margin-inline: auto; }
.wpcf7-form p { margin-bottom: 1.15rem; }
.wpcf7-not-valid-tip { color: #C0392B; font-size: 0.8125rem; margin-top: 0.3rem; }

.wpcf7-response-output {
	border: 1px solid var(--line-2) !important;
	border-radius: var(--radius);
	padding: 0.9rem 1rem !important;
	margin: 1.25rem 0 0 !important;
	font-size: var(--size-ui);
}

/* Búsqueda */
.search-form { display: flex; gap: 0.5rem; max-width: 28rem; margin-inline: auto; }
.search-form input[type="search"] { flex: 1; }


/* ==========================================================================
   11 · WIDGETS
   El diseño es de una sola columna: los widgets viven en el pie.
   ========================================================================== */

.sidebar { display: none; }

.widget { margin-bottom: 2.5rem; }
.widget:last-child { margin-bottom: 0; }
.widget-title { margin: 0 0 1rem; }

.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.widget li:last-child { border-bottom: 0; }
.widget a { color: var(--ink-2); text-decoration: none; }
.widget a:hover { color: var(--accent); }


/* ==========================================================================
   12 · PAGINACIÓN Y NAVEGACIÓN ENTRE ENTRADAS
   ========================================================================== */

.pagination { margin: 0 0 var(--space-section); }

.pagination .nav-links,
.pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.6rem;
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	color: var(--ink-2);
	text-decoration: none;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color 0.15s ease, color 0.15s ease;
}

.pagination .page-numbers:hover { border-color: var(--ink-3); color: var(--ink); }

.pagination .page-numbers.current {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
}

.pagination .dots { border-color: transparent; }

.post-nav {
	max-width: var(--read);
	margin: 3.5rem auto 0;
	padding-top: 2rem;
	border-top: 1px solid var(--line);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}

.post-nav a { text-decoration: none; display: block; }
.post-nav .next { text-align: right; }
.post-nav .label { display: block; margin-bottom: 0.4rem; }

.post-nav .t {
	display: block;
	color: var(--ink);
	font-weight: 500;
	font-size: var(--size-ui);
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.post-nav a:hover .t { color: var(--accent); }

@media (max-width: 40rem) {
	.post-nav { grid-template-columns: 1fr; }
	.post-nav .next { text-align: left; }
}


/* ==========================================================================
   13 · PIE
   ========================================================================== */

.site-footer {
	border-top: 1px solid var(--line);
	margin-top: var(--space-section);
	padding: 4rem 0 2rem;
}

.footer-widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: 2.5rem;
	margin-bottom: 3.5rem;
}

/* Cuerpo del pie: la marca ocupa el doble que cada columna de enlaces,
   igual que en la referencia. */
.footer-main {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 3rem 2.5rem;
	padding-bottom: 3rem;
}

@media (max-width: 62rem) {
	.footer-main { grid-template-columns: 1fr 1fr 1fr; }
	.footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 40rem) {
	.footer-main { grid-template-columns: 1fr 1fr; gap: 2.5rem 1.5rem; }
}

.footer-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	margin-bottom: 1.1rem;
}

.footer-lead {
	max-width: 38ch;
	margin: 0 0 1.5rem;
	color: var(--ink-3);
	font-size: var(--size-ui);
	line-height: 1.65;
}

.footer-social {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
}

.footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--line);
	border-radius: 50%;
	color: var(--ink-3);
	transition: color 0.15s ease, border-color 0.15s ease;
}

.footer-social a:hover { color: var(--accent); border-color: var(--accent); }
.footer-social svg { width: 1rem; height: 1rem; }

.footer-col-title {
	font-family: var(--font-mono);
	font-size: var(--label-size);
	font-weight: 500;
	letter-spacing: var(--label-ls);
	text-transform: uppercase;
	color: var(--ink-3);
	margin: 0 0 1.1rem;
}

.footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.footer-col a {
	color: var(--ink-2);
	text-decoration: none;
	font-size: var(--size-ui);
	line-height: 1.4;
	display: inline-block;
	transition: color 0.15s ease;
}

.footer-col a:hover { color: var(--accent); }

/* La columna de artículos lleva títulos largos: se les da aire propio. */
.footer-col:last-child ul { gap: 1rem; }
.footer-col:last-child a { line-height: 1.35; }

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--line);
}

.footer-bottom p {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--label-size);
	letter-spacing: var(--label-ls);
	text-transform: uppercase;
	color: var(--ink-3);
}

.footer-meta {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}

.footer-bottom a,
.link-boton {
	color: var(--ink-3);
	text-decoration: none;
	font-family: var(--font-mono);
	font-size: var(--label-size);
	letter-spacing: var(--label-ls);
	text-transform: uppercase;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: color 0.15s ease;
}

.footer-bottom a:hover,
.link-boton:hover { color: var(--accent); text-decoration: underline; }

/* Volver arriba */
.to-top {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 40;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	background: var(--accent);
	color: #fff;
	border-radius: 50%;
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.5rem);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top svg { width: 1.05rem; height: 1.05rem; }


/* ==========================================================================
   14 · UTILIDADES Y ACCESIBILIDAD
   ========================================================================== */

.error-404 {
	text-align: center;
	padding: clamp(4rem, 12vw, 8rem) 0;
	max-width: 44ch;
	margin-inline: auto;
}

.error-404 .code {
	font-family: var(--font-mono);
	font-size: clamp(3rem, 10vw, 5rem);
	font-weight: 700;
	color: var(--accent);
	line-height: 1;
	margin-bottom: 1rem;
}

.error-404 h1 { margin-bottom: 0.85rem; }
.error-404 p { margin-bottom: 2rem; }
.error-404 .btn { margin-top: 0; }

/* --- Aviso de consentimiento ---
   Abajo, ancho contenido, sin oscurecer la página: no es una alarma, es una
   pregunta. Los dos botones tienen el mismo tamaño y el mismo peso visual
   a propósito; un "rechazar" más chico que el "aceptar" no es un rechazo
   que se pueda dar por libre. */
.consentimiento {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	display: none;
	padding: var(--gutter);
	animation: consentimiento-entra 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.consentimiento.is-visible { display: block; }

@keyframes consentimiento-entra {
	from { transform: translateY(1rem); opacity: 0; }
	to   { transform: none; opacity: 1; }
}

.consentimiento-caja {
	max-width: var(--wrap);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem 2rem;
	background: var(--surface);
	border: 1px solid var(--line-2);
	border-radius: var(--radius-lg);
	padding: 1.5rem 1.75rem;
	box-shadow: 0 18px 50px rgba(24, 24, 27, 0.14);
}

:root[data-theme="blue"] .consentimiento-caja {
	background: var(--brand);
	border-color: rgba(255, 255, 255, 0.45);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
}

.consentimiento-texto { flex: 1 1 28rem; min-width: 0; }

.consentimiento-texto h2 {
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin-bottom: 0.5rem;
}

.consentimiento-texto p {
	margin: 0 0 0.5rem;
	font-size: var(--size-ui);
	line-height: 1.6;
	max-width: 62ch;
}

.consentimiento-texto a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.18em; }
.consentimiento-nota { color: var(--ink-3); }

.consentimiento-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	flex: 0 0 auto;
}

/* Mismo relleno, mismo borde, mismo ancho mínimo para las dos salidas. La
   única diferencia entre aceptar y rechazar debe ser la palabra. */
.consentimiento-acciones .btn {
	min-width: 8.5rem;
	justify-content: center;
	background: var(--surface-2);
	border-color: var(--line-2);
	color: var(--ink);
}

.consentimiento-acciones .btn:hover {
	background: var(--surface-2);
	border-color: var(--accent);
	color: var(--accent);
}

/* En azul, la regla general pinta los botones de blanco relleno. Aquí no:
   dos botones blancos sobre azul gritan, y el aviso pregunta, no grita. */
:root[data-theme="blue"] .consentimiento-acciones .btn {
	background: rgba(255, 255, 255, 0.16);
	color: #FFFFFF;
	border-color: rgba(255, 255, 255, 0.45);
}

:root[data-theme="blue"] .consentimiento-acciones .btn:hover {
	background: rgba(255, 255, 255, 0.26);
	border-color: #FFFFFF;
	color: #FFFFFF;
}

@media (max-width: 40rem) {
	.consentimiento-acciones { width: 100%; }
	.consentimiento-acciones .btn { flex: 1; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.consentimiento { animation: none; }
}

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

.skip-link { position: absolute; left: -9999px; z-index: 999; }

.skip-link:focus {
	left: 1rem;
	top: 1rem;
	background: var(--accent);
	color: #fff;
	padding: 0.75rem 1rem;
	border-radius: var(--radius);
	text-decoration: none;
}

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

@media print {
	.site-header,
	.site-footer,
	.to-top,
	.post-nav,
	.pagination { display: none !important; }

	body { background: #fff; color: #000; font-size: 11pt; }
	.entry-content { max-width: none; }
	a { text-decoration: underline; }
}


/* --- Video de YouTube ---
   La carátula ocupa el ancho de la media —más que la columna de lectura,
   como las imágenes del artículo— y el botón es un disco blanco con el
   triángulo en azul: el mismo par de formas que el símbolo de la marca en
   modo azul, invertido. Nada de rojo de YouTube: el video es contenido de
   este sitio, no un anuncio del otro. */
.yt {
	position: relative;
	aspect-ratio: 16 / 9;
	margin-block: 2.5rem 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--surface-2);
}

.yt-marco {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font: inherit;
	color: inherit;
}

.yt-caratula {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	border: 0;
	border-radius: 0;
}

.yt-play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
}

.yt-play svg {
	width: clamp(3.75rem, 9vw, 5rem);
	height: clamp(3.75rem, 9vw, 5rem);
	padding: clamp(1.15rem, 2.8vw, 1.5rem);
	box-sizing: border-box;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	color: var(--brand);
	transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.3, 1), background-color 0.2s;
}

.yt-marco:hover .yt-play svg,
.yt-marco:focus-visible .yt-play svg {
	background: #FFFFFF;
	transform: scale(1.07);
}

.yt-marco:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* El reproductor se monta encima de la carátula y aparece recién cuando
   avisa que está listo. Antes se reemplazaba el marcado de golpe y quedaba
   un rectángulo negro los dos segundos que YouTube tarda en arrancar. Al
   terminar el video se quita este div y la carátula ya estaba ahí abajo,
   intacta, lista para volver a verlo. */
.yt-reproductor {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.yt.yt-activo .yt-reproductor {
	opacity: 1;
	pointer-events: auto;
}

.yt.yt-activo .yt-marco { visibility: hidden; }

.yt-reproductor iframe,
.yt iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.yt-reproductor { transition: none; }
}

/* Marca de origen. Va sobre la carátula, abajo a la izquierda, en el mismo
   mono en versalitas que el resto de los rótulos del sitio. No lleva el rojo
   de YouTube: aquí el video es contenido de esta página, no un anuncio de la
   otra. Desaparece al cargar el reproductor, donde YouTube ya pone el suyo. */
.yt-fuente {
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	padding: 0.3rem 0.55rem;
	border-radius: var(--radius);
	background: rgba(24, 24, 27, 0.62);
	color: #FFFFFF;
	font-family: var(--font-mono);
	font-size: var(--label-size);
	letter-spacing: var(--label-ls);
	text-transform: uppercase;
	line-height: 1;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

/* Dentro del bloque «Incrustar» de WordPress, que trae su propia figura. */
.wp-block-embed .yt { margin-block: 0; }

/* Y que trae también un pseudo-elemento con 56,25% de relleno superior. Esa
   es la vieja treta para reservar el 16:9 antes de que existiera
   aspect-ratio: el hueco se deja con padding y el iframe se mete encima en
   posición absoluta. Aquí no hay iframe absoluto —la carátula va en el flujo
   normal— así que el hueco se quedaba vacío arriba del video: media pantalla
   en blanco. Se anula. */
.wp-embed-responsive .wp-block-embed .wp-block-embed__wrapper:has(.yt)::before {
	content: none;
	padding-top: 0;
}

/* Un video de 16:9 metido en la columna de lectura queda de tarjeta postal.
   Va al ancho de la media por defecto, el mismo de la imagen destacada, para
   que todo lo que se mira —y no se lee— caiga en la misma medida. Poner
   «Ancho completo» en el editor sigue mandando. */
.entry-content .wp-block-embed:has(.yt) {
	width: min(var(--media), calc(100vw - var(--gutter) * 2));
	max-width: none;
	margin-inline: calc(50% - min(var(--media), calc(100vw - var(--gutter) * 2)) / 2);
	margin-block: 2.5rem;
}

.entry-content .wp-block-embed.alignfull:has(.yt) {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.entry-content .wp-block-embed.alignfull .yt { border-radius: 0; }

@media (prefers-reduced-motion: reduce) {
	.yt-play svg { transition: none; }
	.yt-marco:hover .yt-play svg { transform: none; }
}


/* --- Reproductor de audio ---
   Todo sale de este servidor: el archivo, la carátula y el código. A
   diferencia del video, aquí no hay terceros, así que no hay nada que
   pedirle permiso a nadie ni nada que bloquear.

   La caja va al ancho de la columna de lectura y no al de la media. No es
   algo que se mire, como una foto o un video: es un aparato que se usa
   mientras se lee, y va donde va el texto. */
.aud {
	max-width: var(--read);
	margin: 2.5rem auto;
	padding: 1.75rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

:root[data-theme="blue"] .aud { border-color: var(--line-2); }

.aud-fuente { display: none; }

.aud-cab {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	margin-bottom: 1.5rem;
}

.aud-tapa {
	flex: 0 0 auto;
	width: 5.5rem;
	height: 5.5rem;
	border-radius: var(--radius);
	overflow: hidden;
	background: linear-gradient(140deg, var(--brand), var(--brand-80));
	display: grid;
	place-items: center;
}

.aud-tapa img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	border: 0;
	border-radius: 0;
}

/* Si no hay imagen destacada va el símbolo, que ya viene con su disco
   azul; sobre el degradado del mismo azul el disco desaparece y quedan
   solo las barras, que es justo lo que se quiere ver aquí. */
.aud-tapa .site-symbol circle { fill: transparent; }
.aud-tapa .site-symbol rect { fill: #FFFFFF; }

/* En modo azul el degradado de marca queda a un paso del fondo y el
   cuadrado se pierde. Se cambia por la superficie translúcida del tema; el
   símbolo, que ahí ya es un disco blanco, se lee como una insignia. */
:root[data-theme="blue"] .aud-tapa { background: var(--surface-2); }

.aud-datos { min-width: 0; }

.aud-rotulo {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--label-size);
	letter-spacing: var(--label-ls);
	text-transform: uppercase;
	color: var(--ink-3);
}

.aud-titulo {
	margin: 0.4rem 0 0.3rem;
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.3;
	color: var(--ink);
	text-wrap: balance;
}

.aud-sub {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--label-size);
	letter-spacing: 0.04em;
	color: var(--ink-3);
}

/* --- El espectro ---
   Cuarenta barras que suben con lo que está sonando: los graves a la
   izquierda, los agudos a la derecha. En reposo caen a una línea de tres
   píxeles en gris, que se lee como el suelo del gráfico y no como un error.
   Se dibujan con transform y no con height para que el navegador no tenga
   que recalcular la disposición sesenta veces por segundo. */
.aud-espectro {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 5.5rem;
	margin-bottom: 1rem;
}

.aud-espectro span {
	flex: 1;
	min-width: 2px;
	height: 3px;
	border-radius: 1px 1px 0 0;
	background: var(--accent);
	transform-origin: bottom;
	will-change: transform;
}

.aud-espectro.en-reposo span {
	background: var(--line-2);
	transform: none;
}

/* --- La barra de posición ---
   Es un input de rango de verdad, no un div con oyentes de ratón: así
   viene gratis el teclado, el arrastre y el anuncio del porcentaje en los
   lectores de pantalla. Lo único propio es la pintura. */
.aud-rango {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 1rem;
	margin: 0;
	background: none;
	cursor: pointer;
}

.aud-rango::-webkit-slider-runnable-track {
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(to right, var(--accent) var(--p, 0%), var(--line-2) var(--p, 0%));
}

.aud-rango::-moz-range-track {
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(to right, var(--accent) var(--p, 0%), var(--line-2) var(--p, 0%));
}

.aud-rango::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 11px;
	height: 11px;
	margin-top: -4.5px;
	border: 0;
	border-radius: 50%;
	background: var(--accent);
}

.aud-rango::-moz-range-thumb {
	width: 11px;
	height: 11px;
	border: 0;
	border-radius: 50%;
	background: var(--accent);
}

.aud-rango:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.aud-tiempos {
	display: flex;
	justify-content: space-between;
	margin: 0.35rem 0 0;
	font-family: var(--font-mono);
	font-size: var(--label-size);
	letter-spacing: 0.06em;
	color: var(--ink-3);
	font-variant-numeric: tabular-nums;
}

.aud-controles {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 1.25rem;
}

.aud-ico {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	border: 1px solid var(--line-2);
	background: none;
	color: var(--ink);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: border-color 0.18s, color 0.18s;
}

.aud-ico svg { width: 1.25rem; height: 1.25rem; }
.aud-ico:hover { border-color: var(--accent); color: var(--accent); }

.aud-play {
	width: 3.75rem;
	height: 3.75rem;
	border-radius: 999px;
	border: 0;
	background: var(--accent);
	color: var(--on-accent);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.aud-play svg { width: 1.375rem; height: 1.375rem; }
.aud-play:hover { transform: scale(1.06); }

.aud-pie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.5rem;
	padding-top: 1.15rem;
	border-top: 1px solid var(--line);
}

.aud-enlace {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink-3);
	font-family: var(--font-mono);
	font-size: var(--label-size);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.18s;
}

/* El tema subraya todos los enlaces del artículo, que está bien para un
   enlace dentro de una frase y mal para un botón de una barra de
   herramientas. Aquí se quita con la misma especificidad, no con !important. */
.entry-content .aud .aud-enlace,
.aud .aud-enlace { text-decoration: none; color: var(--ink-3); }

.aud-enlace svg { width: 0.9rem; height: 0.9rem; }

.entry-content .aud .aud-enlace:hover,
.aud .aud-enlace:hover { color: var(--accent); }
.aud-vel { font-variant-numeric: tabular-nums; }

@media (max-width: 34rem) {
	.aud { padding: 1.25rem; }
	.aud-tapa { width: 4rem; height: 4rem; }
	.aud-cab { gap: 0.9rem; }
	.aud-espectro { gap: 2px; height: 4.5rem; }
	.aud-pie { font-size: 0.625rem; }
}

/* Quien pidió menos movimiento no quiere cuarenta barras bailando. Se deja
   el suelo del gráfico quieto; la barra de posición y los tiempos siguen
   diciendo todo lo que hace falta saber. */
@media (prefers-reduced-motion: reduce) {
	.aud-espectro span { transform: none !important; background: var(--line-2); }
	.aud-play { transition: none; }
}