/*
Theme Name: Quisbert Lee
Theme URI: https://melvinquisbertlee.com/
Author: Melvin Quisbert Lee
Author URI: https://melvinquisbertlee.com/
Description: Tema personal para jurista y academico. Tres columnas: barra lateral fija con navegacion desplegable, visor de galeria central con reproduccion automatica, y tira de miniaturas. Paleta clara con acentos calidos.
Version: 3.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: quisbert-lee
Tags: blog, two-columns, custom-menu, editor-style, translation-ready
*/

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
	/* Paleta: casi todo blanco, con crema muy tenue en contadas piezas */
	--paper:       #FDFDFB;
	--paper-pure:  #FFFFFF;
	--cream:       #F7F5EF;
	--cream-soft:  #FBFAF6;
	--clay:        #C05F3C;
	--clay-bright: #D97757;
	--ink:         #1A1A18;
	--ink-soft:    #57544D;
	--ink-faint:   #8E8A80;
	--rule:        #EAE6DC;
	--rule-soft:   #F0EDE5;
	--rule-strong: #D8D3C6;

	/* Tipografia */
	--serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
	--sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Escala */
	--t-micro:  0.75rem;
	--t-small:  0.8125rem;
	--t-ui:     0.9375rem;
	--t-body:   1.0625rem;
	--t-nav:    1.375rem;
	--t-subnav: 0.9375rem;
	--t-h1:     2rem;
	--t-h2:     1.4375rem;
	--t-h3:     1.1875rem;

	/* Reticula */
	--barra: 288px;
	--tira: 112px;
	--prosa: 700px;

	/* Ritmo */
	--space-1: 6px;
	--space-2: 12px;
	--space-3: 20px;
	--space-4: 32px;
	--space-5: 48px;
	--space-6: 72px;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

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

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--serif);
	font-size: var(--t-body);
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Texto seleccionado en tono calido */
::selection { background: rgba(217, 119, 87, 0.20); color: var(--ink); }
::-moz-selection { background: rgba(217, 119, 87, 0.20); color: var(--ink); }

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

figure { margin: var(--space-4) 0; }

figcaption {
	font-family: var(--sans);
	font-size: var(--t-small);
	color: var(--ink-faint);
	margin-top: var(--space-2);
	line-height: 1.6;
}

a {
	color: var(--clay);
	text-decoration: underline;
	text-decoration-color: rgba(192, 95, 60, 0.28);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.16s ease, text-decoration-color 0.16s ease;
}

a:hover { color: var(--clay-bright); text-decoration-color: currentColor; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--clay);
	outline-offset: 3px;
	border-radius: 2px;
}

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

.saltar-al-contenido {
	position: absolute;
	left: -9999px;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--sans);
	font-size: var(--t-ui);
	padding: 10px 18px;
	z-index: 999;
	text-decoration: none;
}

.saltar-al-contenido:focus { left: 12px; top: 12px; }

.solo-lectores {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ==========================================================================
   3. ARMAZON
   ========================================================================== */

.armazon {
	display: grid;
	grid-template-columns: var(--barra) minmax(0, 1fr);
	min-height: 100vh;
	align-items: start;
}

.armazon--con-tira {
	grid-template-columns: var(--barra) minmax(0, 1fr) var(--tira);
}

/* ==========================================================================
   4. BARRA LATERAL
   ========================================================================== */

.barra {
	position: sticky;
	top: 0;
	align-self: start;
	height: 100vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--paper);
	border-right: 1px solid var(--rule-soft);
	padding: 46px 28px 40px 44px;
	display: flex;
	flex-direction: column;
	scrollbar-width: thin;
	scrollbar-color: var(--rule-strong) transparent;
}

.barra::-webkit-scrollbar { width: 5px; }
.barra::-webkit-scrollbar-track { background: transparent; }
.barra::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }
.barra:hover::-webkit-scrollbar-thumb { background: var(--rule-strong); }

/* -- Marca ---------------------------------------------------------------- */

.barra__marca {
	display: inline-block;
	line-height: 0;
	margin-bottom: var(--space-5);
	align-self: flex-start;
	text-decoration: none;
	max-width: 100%;
}

.barra__marca img { height: auto; display: block; }

.sello-iniciales {
	width: 68px;
	height: 68px;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--serif);
	font-size: 1.5rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 2px;
	line-height: 1;
	transition: background-color 0.2s ease;
}

.barra__marca:hover .sello-iniciales { background: var(--clay); }

/* -- Cierre --------------------------------------------------------------- */

.barra__cierre { margin-top: auto; padding-top: var(--space-6); }

.barra__filete {
	border: 0;
	border-top: 1px solid var(--rule);
	margin: 0 0 var(--space-4);
	width: 66%;
}

.barra__lema {
	font-family: var(--serif);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--ink);
	margin: 0 0 var(--space-3);
}

.barra__contacto {
	font-family: var(--serif);
	font-style: normal;
	font-size: 0.875rem;
	line-height: 1.75;
	color: var(--ink-soft);
	margin: 0;
	word-break: break-word;
}

.barra__contacto span {
	color: var(--ink-faint);
	font-family: var(--sans);
	font-size: var(--t-micro);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* ==========================================================================
   5. NAVEGACION
   ========================================================================== */

.nav { width: 100%; }

.nav__lista,
.nav__sublista { list-style: none; margin: 0; padding: 0; }

.nav__item {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
}

.nav__item > a {
	font-family: var(--serif);
	font-size: var(--t-nav);
	font-weight: 400;
	line-height: 1.3;
	color: var(--ink);
	text-decoration: none;
	padding: 11px 0;
	flex: 1 1 auto;
	min-width: 0;
	letter-spacing: -0.005em;
	transition: color 0.16s ease;
}

.nav__item > a:hover { color: var(--clay); }

.nav__item--nombre > a {
	color: var(--ink-faint);
	font-size: 1.3125rem;
	padding-bottom: 18px;
}

.nav__item--nombre > a:hover { color: var(--clay); }

.nav__item.current-menu-item > a,
.nav__item.current_page_item > a,
.nav__item.current-menu-ancestor > a { color: var(--clay); }

/* -- Chevron -------------------------------------------------------------- */

.nav__desplegar {
	flex: none;
	background: none;
	border: 0;
	padding: 8px 2px 8px 10px;
	margin: 0;
	cursor: pointer;
	color: var(--ink-faint);
	line-height: 0;
	border-radius: 2px;
}

.nav__desplegar:hover { color: var(--clay); }

.nav__desplegar svg {
	width: 15px;
	height: 15px;
	display: block;
	transition: transform 0.22s ease;
}

.nav__item.esta-desplegado > .nav__desplegar svg { transform: rotate(180deg); }
.nav__item.esta-desplegado > .nav__desplegar { color: var(--ink); }

/* -- Submenus ------------------------------------------------------------- */

.nav__sublista {
	flex: 1 0 100%;
	display: none;
	padding: 2px 0 14px 14px;
	border-left: 1px solid var(--rule);
	margin-left: 2px;
}

.nav__item.esta-desplegado > .nav__sublista { display: block; }

.nav__sublista .nav__item > a {
	font-size: var(--t-subnav);
	line-height: 1.45;
	color: var(--ink-soft);
	padding: 7px 0;
}

.nav__sublista .nav__item > a:hover { color: var(--clay); }
.nav__sublista .nav__item.current-menu-item > a { color: var(--clay); }

.nav__sublista .nav__desplegar { padding: 6px 2px 6px 8px; }
.nav__sublista .nav__desplegar svg { width: 13px; height: 13px; }

.nav__sublista .nav__sublista { padding-left: 12px; padding-bottom: 8px; }

.nav__sublista .nav__sublista .nav__item > a {
	font-size: 0.875rem;
	color: var(--ink-faint);
}

/* -- Conmutador movil ----------------------------------------------------- */

.nav__conmutador {
	display: none;
	background: none;
	border: 1px solid var(--rule-strong);
	border-radius: 3px;
	color: var(--ink);
	font-family: var(--sans);
	font-size: var(--t-ui);
	font-weight: 500;
	padding: 9px 15px;
	cursor: pointer;
	align-items: center;
	gap: 9px;
}

.nav__conmutador:hover { background: var(--cream-soft); }

.nav__hamburguesa {
	display: inline-block;
	width: 16px; height: 10px;
	position: relative;
	flex: none;
}

.nav__hamburguesa::before,
.nav__hamburguesa::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 1.5px;
	background: var(--ink);
}

.nav__hamburguesa::before { top: 0; }
.nav__hamburguesa::after { bottom: 0; }

/* ==========================================================================
   6. ZONA CENTRAL
   ========================================================================== */

.central { min-width: 0; padding: 46px 0 0; }

.central__interior { padding: 0 clamp(24px, 4.5vw, 60px); }

/* ==========================================================================
   7. VISOR DE GALERIA
   ========================================================================== */

.visor {
	margin: 0 0 var(--space-5);
	padding: 0 clamp(24px, 4.5vw, 60px);
}

.visor__marco {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--cream);
	isolation: isolate;
}

/*
 * Dos capas superpuestas. Una muestra la imagen actual y la otra
 * carga la siguiente por debajo; al intercambiarlas se produce la
 * transicion sin que aparezca el fondo entre una imagen y otra.
 */
.visor__capa {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	opacity: 0;
	z-index: 0;
	transform: translateX(0);
	transition:
		opacity var(--duracion, 700ms) cubic-bezier(0.4, 0, 0.2, 1),
		transform var(--duracion, 700ms) cubic-bezier(0.4, 0, 0.2, 1);
}

.visor__capa.esta-visible { opacity: 1; z-index: 1; }

/*
 * La capa que entra se coloca por encima y aparece sobre la anterior,
 * que permanece opaca por debajo. Asi el fundido no deja ver el fondo
 * a mitad de camino.
 */
.visor__capa.esta-encima { z-index: 2; }

/* Estado auxiliar para colocar una capa sin animarla */
.visor__capa.sin-transicion { transition: none; }

/* -- Deslizamiento lateral ------------------------------------------------ */

.visor__capa.esta-a-la-derecha { transform: translateX(100%); }
.visor__capa.esta-a-la-izquierda { transform: translateX(-100%); }

/* -- Acercamiento lento --------------------------------------------------- */

.visor--deriva .visor__capa.esta-derivando {
	animation: ql-deriva var(--reposo, 5000ms) linear both;
}

@keyframes ql-deriva {
	from { transform: scale(1.004); }
	to   { transform: scale(1.055); }
}

/* -- Mandos --------------------------------------------------------------- */

.visor__mando {
	position: absolute;
	top: 14px;
	display: flex;
	gap: 4px;
	z-index: 2;
}

.visor__mando--izquierda { left: 14px; }
.visor__mando--derecha { right: 14px; }

.visor__boton {
	font-family: var(--sans);
	font-size: var(--t-small);
	font-weight: 500;
	color: #FFF;
	background: rgba(26, 26, 24, 0.60);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 0;
	border-radius: 3px;
	padding: 8px 13px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	line-height: 1;
	transition: background-color 0.16s ease;
}

.visor__boton:hover { background: rgba(192, 95, 60, 0.92); }

.visor__boton svg { width: 11px; height: 11px; fill: currentColor; flex: none; }

.visor__boton--flecha { padding: 9px 12px; }

.visor__boton:focus-visible { outline: 2px solid #FFF; outline-offset: 2px; }

.visor__icono-pausa { display: none; }

.visor__boton.esta-reproduciendo .visor__icono-play { display: none; }
.visor__boton.esta-reproduciendo .visor__icono-pausa { display: block; }

/* -- Pie ------------------------------------------------------------------ */

.visor__pie {
	font-family: var(--sans);
	font-size: var(--t-small);
	color: var(--ink-faint);
	margin-top: var(--space-2);
	line-height: 1.6;
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
	align-items: baseline;
}

.visor__contador {
	flex: none;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}

/* -- Imagen fija ---------------------------------------------------------- */

.portada-imagen { margin: 0 0 var(--space-5); line-height: 0; }

.portada-imagen img { width: 100%; height: auto; display: block; }

.portada-imagen figcaption { padding: 0 clamp(24px, 4.5vw, 60px); }

.portada-vacia {
	background: var(--cream);
	border: 1px dashed var(--rule-strong);
	aspect-ratio: 3 / 2;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--space-4);
	font-family: var(--sans);
	font-size: var(--t-ui);
	line-height: 1.6;
	color: var(--ink-soft);
	margin: 0 clamp(24px, 4.5vw, 60px) var(--space-5);
}

/* ==========================================================================
   8. TIRA DE MINIATURAS
   ========================================================================== */

.tira {
	position: sticky;
	top: 0;
	align-self: start;
	height: 100vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 46px 14px 40px 0;
	scrollbar-width: none;
}

.tira::-webkit-scrollbar { width: 0; display: none; }

.tira__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.tira__pieza {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: var(--cream);
	line-height: 0;
	overflow: hidden;
	cursor: pointer;
	position: relative;
	text-decoration: none;
}

.tira__pieza img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	opacity: 0.62;
	transition: opacity 0.22s ease, transform 0.35s ease;
}

.tira__pieza:hover img { opacity: 1; }

.tira__pieza.esta-activa img { opacity: 1; transform: scale(1.02); }

.tira__pieza.esta-activa::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid var(--clay);
	pointer-events: none;
}

.tira__pieza:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }

.tira__aviso {
	font-family: var(--sans);
	font-size: 0.6875rem;
	line-height: 1.5;
	color: var(--ink-faint);
	padding: 10px 6px;
	border: 1px dashed var(--rule-strong);
	border-radius: 3px;
	text-align: center;
	margin: 0;
}

/* ==========================================================================
   9. TIPOGRAFIA DE CONTENIDO
   ========================================================================== */

.contenido h1,
.contenido h2,
.contenido h3,
.contenido h4,
.titulo-pagina {
	font-family: var(--serif);
	color: var(--ink);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.011em;
	text-wrap: balance;
}

.titulo-pagina { font-size: var(--t-h1); margin: 0 0 var(--space-4); }

.contenido h2 { font-size: var(--t-h2); margin: var(--space-5) 0 var(--space-2); }
.contenido h3 { font-size: var(--t-h3); margin: var(--space-4) 0 var(--space-2); }
.contenido h4 { font-size: 1.0625rem; margin: var(--space-4) 0 var(--space-1); }

.contenido p { margin: 0 0 var(--space-3); }

.contenido ul,
.contenido ol { margin: 0 0 var(--space-3); padding-left: 1.4em; }

.contenido li { margin-bottom: var(--space-1); }

.contenido strong { font-weight: 600; }

.contenido blockquote {
	margin: var(--space-4) 0;
	padding: 2px 0 2px var(--space-3);
	border-left: 2px solid var(--rule-strong);
	color: var(--ink-soft);
	font-style: italic;
}

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

.contenido code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.875em;
	background: var(--cream);
	padding: 2px 5px;
	border-radius: 3px;
}

.contenido pre {
	background: var(--cream);
	padding: var(--space-3);
	border-radius: 4px;
	overflow-x: auto;
	font-size: 0.875rem;
}

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

.contenido table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	margin: var(--space-4) 0;
}

.contenido th,
.contenido td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--rule);
	vertical-align: top;
}

.contenido th {
	font-family: var(--sans);
	font-size: var(--t-micro);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--ink-faint);
	font-weight: 600;
}

.columna-lectura { max-width: var(--prosa); }

.rotulo {
	font-family: var(--sans);
	font-size: var(--t-micro);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-weight: 600;
	color: var(--ink-faint);
	margin: 0 0 var(--space-3);
	display: block;
}

.entradilla {
	font-size: 1.1875rem;
	line-height: 1.65;
	color: var(--ink-soft);
	margin: 0 0 var(--space-4);
	max-width: 620px;
}

.enlace-mas {
	font-family: var(--sans);
	font-size: 0.9375rem;
	margin-top: var(--space-3);
}

/* ==========================================================================
   10. LISTA DE ENTRADAS
   ========================================================================== */

.lista-entradas { list-style: none; margin: 0; padding: 0; }

.entrada-resumen { padding: var(--space-4) 0; border-bottom: 1px solid var(--rule); }

.entrada-resumen:first-child { padding-top: 0; }

.entrada-resumen__meta {
	font-family: var(--sans);
	font-size: var(--t-micro);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ink-faint);
	display: block;
	margin-bottom: var(--space-1);
}

.entrada-resumen__titulo {
	font-family: var(--serif);
	font-size: 1.3125rem;
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 var(--space-1);
}

.entrada-resumen__titulo a { color: var(--ink); text-decoration: none; }

.entrada-resumen__titulo a:hover {
	color: var(--clay);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.entrada-resumen__extracto {
	margin: 0;
	color: var(--ink-soft);
	font-size: 1rem;
	line-height: 1.7;
}

/* ==========================================================================
   11. PUBLICACIONES
   ========================================================================== */

.grupo-anio {
	display: grid;
	grid-template-columns: 82px 1fr;
	gap: var(--space-3);
	padding: var(--space-4) 0;
	border-top: 1px solid var(--rule);
}

.grupo-anio:first-of-type { border-top: 0; padding-top: 0; }

.grupo-anio__anio {
	font-family: var(--sans);
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: 0.09em;
	color: var(--ink-faint);
	padding-top: 7px;
	font-variant-numeric: tabular-nums;
}

.grupo-anio__lista { list-style: none; margin: 0; padding: 0; }

.publicacion {
	margin-bottom: var(--space-3);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--rule);
}

.publicacion:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

.publicacion__titulo {
	font-family: var(--serif);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.45;
	margin: 0 0 3px;
}

.publicacion__titulo a { color: var(--ink); text-decoration: none; }

.publicacion__titulo a:hover {
	color: var(--clay);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.publicacion__fuente {
	font-family: var(--sans);
	font-size: 0.875rem;
	color: var(--ink-soft);
	margin: 0 0 var(--space-1);
	line-height: 1.6;
}

.publicacion__enlaces {
	font-family: var(--sans);
	font-size: var(--t-micro);
	letter-spacing: 0.04em;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: var(--space-1);
}

.publicacion__enlaces a {
	color: var(--clay);
	text-transform: uppercase;
	font-weight: 600;
}

.etiqueta-tipo {
	display: inline-block;
	font-family: var(--sans);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	color: var(--ink-soft);
	background: var(--cream);
	border-radius: 2px;
	padding: 2px 7px;
	margin-left: 8px;
	vertical-align: 2px;
	line-height: 1.6;
}

/* ==========================================================================
   12. BOLETIN
   ========================================================================== */

.boletin {
	background: var(--cream);
	border-radius: 3px;
	padding: clamp(28px, 4vw, 44px);
	margin: 0 0 var(--space-5);
	max-width: var(--prosa);
}

.boletin__rotulo {
	font-family: var(--sans);
	font-size: var(--t-micro);
	text-transform: uppercase;
	letter-spacing: 0.11em;
	font-weight: 600;
	color: var(--ink-faint);
	display: block;
	margin: 0 0 var(--space-2);
}

.boletin__nombre {
	font-family: var(--serif);
	font-size: 1.75rem;
	font-weight: 400;
	font-style: italic;
	letter-spacing: -0.012em;
	margin: 0;
	color: var(--ink);
	line-height: 1.2;
}

/* Filete corto bajo el titulo, en lugar de la franja lateral */
.boletin__rubrica {
	width: 46px;
	height: 2px;
	background: var(--clay);
	margin: var(--space-3) 0;
	border: 0;
}

.boletin__descripcion {
	margin: 0 0 var(--space-4);
	color: var(--ink-soft);
	font-size: 1rem;
	line-height: 1.7;
	max-width: 46ch;
}

.boletin__formulario {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 470px;
}

.boletin__formulario input[type="email"] {
	flex: 1 1 220px;
	font-family: var(--sans);
	font-size: var(--t-ui);
	color: var(--ink);
	background: var(--paper-pure);
	border: 1px solid var(--rule-strong);
	border-radius: 3px;
	padding: 12px 14px;
	min-width: 0;
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.boletin__formulario input[type="email"]::placeholder { color: var(--ink-faint); }

.boletin__formulario input[type="email"]:focus {
	border-color: var(--clay);
	outline: none;
	box-shadow: 0 0 0 3px rgba(192, 95, 60, 0.12);
}

.boletin__nota {
	font-family: var(--sans);
	font-size: var(--t-micro);
	color: var(--ink-faint);
	margin: var(--space-3) 0 0;
	line-height: 1.6;
}

.boton {
	font-family: var(--sans);
	font-size: var(--t-ui);
	font-weight: 500;
	color: var(--paper);
	background: var(--ink);
	border: 1px solid var(--ink);
	border-radius: 3px;
	padding: 12px 22px;
	cursor: pointer;
	transition: background-color 0.16s ease, border-color 0.16s ease;
	white-space: nowrap;
}

.boton:hover { background: var(--clay); border-color: var(--clay); }

.nota-admin {
	font-family: var(--sans);
	font-size: var(--t-small);
	line-height: 1.6;
	color: var(--ink-soft);
	background: var(--paper);
	border: 1px dashed var(--rule-strong);
	border-radius: 3px;
	padding: 12px 14px;
	margin-top: var(--space-3);
	max-width: var(--prosa);
}

.ediciones {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: var(--prosa);
	columns: 2;
	column-gap: var(--space-5);
}

.ediciones li {
	break-inside: avoid;
	padding: 5px 0;
	font-family: var(--sans);
	font-size: 0.9375rem;
}

.ediciones a { color: var(--ink-soft); text-decoration-color: var(--rule-strong); }
.ediciones a:hover { color: var(--clay); }

/* ==========================================================================
   13. ENTRADAS, PAGINACION, BUSCADOR
   ========================================================================== */

.entrada__meta {
	font-family: var(--sans);
	font-size: var(--t-micro);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ink-faint);
	margin: 0 0 var(--space-2);
	display: block;
}

.navegacion-entradas {
	display: flex;
	justify-content: space-between;
	gap: var(--space-4);
	margin-top: var(--space-5);
	padding-top: var(--space-4);
	border-top: 1px solid var(--rule);
	font-family: var(--sans);
	font-size: 0.9375rem;
}

.navegacion-entradas a {
	color: var(--ink-soft);
	text-decoration: none;
	max-width: 46%;
	line-height: 1.5;
}

.navegacion-entradas a:hover { color: var(--clay); }

.navegacion-entradas .direccion {
	display: block;
	font-size: var(--t-micro);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ink-faint);
	margin-bottom: 2px;
}

.navegacion-entradas .siguiente { text-align: right; margin-left: auto; }

.paginacion {
	margin-top: var(--space-5);
	padding-top: var(--space-4);
	border-top: 1px solid var(--rule);
	font-family: var(--sans);
	font-size: 0.9375rem;
}

.paginacion .page-numbers {
	display: inline-block;
	padding: 6px 12px;
	margin-right: 4px;
	color: var(--ink-soft);
	border: 1px solid var(--rule);
	border-radius: 3px;
	text-decoration: none;
}

.paginacion .page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.paginacion a.page-numbers:hover { border-color: var(--clay); color: var(--clay); }

.buscador { display: flex; gap: 8px; max-width: 420px; margin-bottom: var(--space-4); }

.buscador input[type="search"] {
	flex: 1;
	font-family: var(--sans);
	font-size: var(--t-ui);
	padding: 11px 13px;
	border: 1px solid var(--rule-strong);
	border-radius: 3px;
	background: var(--paper-pure);
	color: var(--ink);
	min-width: 0;
}

.buscador input[type="search"]:focus { border-color: var(--clay); outline: none; }

/* ==========================================================================
   14. PIE
   ========================================================================== */

.pie {
	margin-top: var(--space-6);
	padding: var(--space-4) 0 var(--space-5);
	border-top: 1px solid var(--rule);
}

.pie__redes {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	margin-bottom: var(--space-3);
	font-family: var(--sans);
	font-size: var(--t-small);
}

.pie__redes a {
	color: var(--ink-soft);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.pie__redes a:hover { color: var(--clay); }

.pie__redes svg { width: 15px; height: 15px; fill: currentColor; flex: none; }

.pie__legal {
	font-family: var(--sans);
	font-size: var(--t-micro);
	color: var(--ink-faint);
	margin: 0;
	line-height: 1.7;
}

/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */

@media (max-width: 1180px) {
	:root { --barra: 252px; }

	.armazon,
	.armazon--con-tira { grid-template-columns: var(--barra) minmax(0, 1fr); }

	.tira {
		grid-column: 1 / -1;
		position: static;
		height: auto;
		padding: 0 clamp(24px, 4.5vw, 60px) var(--space-5);
		overflow: visible;
	}

	.tira__lista {
		flex-direction: row;
		overflow-x: auto;
		gap: 6px;
		padding-bottom: 8px;
		scroll-snap-type: x proximity;
	}

	.tira__lista li { flex: 0 0 128px; scroll-snap-align: start; }

	.tira__aviso { flex: 0 0 230px; }
}

@media (max-width: 900px) {
	:root { --t-h1: 1.6875rem; --t-nav: 1.1875rem; }

	.armazon,
	.armazon--con-tira { display: block; }

	.barra {
		position: static;
		height: auto;
		overflow: visible;
		display: block;
		border-right: 0;
		border-bottom: 1px solid var(--rule);
		padding: 26px clamp(20px, 5vw, 32px) 22px;
	}

	.barra__marca { margin-bottom: var(--space-3); }
	.barra__marca img { max-width: 54px; }

	.sello-iniciales { width: 54px; height: 54px; font-size: 1.25rem; }

	.nav__conmutador { display: inline-flex; }

	.nav__lista {
		display: none;
		margin-top: var(--space-3);
		border-top: 1px solid var(--rule);
	}

	.nav.esta-abierta .nav__lista { display: block; }

	.nav__item { border-bottom: 1px solid var(--rule); }
	.nav__sublista .nav__item { border-bottom: 0; }

	.barra__cierre { margin-top: 0; padding-top: var(--space-4); }
	.barra__filete { width: 100%; }
	.barra__lema { max-width: 420px; }

	.central { padding-top: var(--space-4); }

	.visor__marco { aspect-ratio: 4 / 3; }

	.grupo-anio { grid-template-columns: 1fr; gap: var(--space-2); }
	.grupo-anio__anio { padding-top: 0; }

	.ediciones { columns: 1; }

	.navegacion-entradas { flex-direction: column; gap: var(--space-3); }
	.navegacion-entradas a { max-width: 100%; }
	.navegacion-entradas .siguiente { text-align: left; margin-left: 0; }
}

@media (max-width: 480px) {
	.boletin__formulario input[type="email"] { flex: 1 1 100%; }
	.boton { width: 100%; }
	.tira__lista li { flex: 0 0 112px; }
	.visor__marco { aspect-ratio: 1 / 1; }
	.visor__pie { flex-direction: column; gap: 4px; }
}

/* ==========================================================================
   16. ACCESIBILIDAD E IMPRESION
   ========================================================================== */

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

	/* El visor cambia de imagen al instante, sin acercamiento ni deslizamiento */
	.visor__capa { transform: none !important; }

	.visor--deriva .visor__capa.esta-derivando { animation: none !important; }
}

@media print {
	.nav, .tira, .boletin, .pie__redes, .paginacion, .navegacion-entradas, .visor__mando { display: none; }
	.armazon, .armazon--con-tira { display: block; }
	.barra { position: static; height: auto; border: 0; padding: 0 0 20px; }
	body { background: #fff; color: #000; font-size: 11pt; }
	a { color: #000; text-decoration: none; }
}

/* ==========================================================================
   17. CLASES DE WORDPRESS
   ========================================================================== */

.alignleft { float: left; margin: 6px var(--space-3) var(--space-2) 0; }
.alignright { float: right; margin: 6px 0 var(--space-2) var(--space-3); }
.aligncenter { display: block; margin: var(--space-3) auto; }
.alignwide, .alignfull { max-width: 100%; }
.wp-caption { max-width: 100%; }

.wp-caption-text {
	font-family: var(--sans);
	font-size: var(--t-small);
	color: var(--ink-faint);
}

.sticky .entrada-resumen__meta::after { content: " · Destacada"; color: var(--clay); }