/* ============================================================
   Components — Header, Footer, Nav, Cards, Sidebar, Widgets
   ============================================================ */

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
	background-color: var(--color-surface);
	border-bottom: 1px solid var(--color-outline-variant);
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	width: 100%;
}

.site-header__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 80px;
}

/* Logo */
.site-logo {
	font-size: var(--font-size-headline-md);
	font-weight: var(--font-weight-bold);
	color: var(--color-primary);
	text-decoration: none;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	line-height: 1;
}

/* Tamaño del logo — sobreescribe los atributos width/height del img generado por WP */
.site-logo img,
.site-logo .custom-logo-link img,
.custom-logo-link .custom-logo {
	height: var(--logo-height, 44px);
	width: auto;
	max-width: none;   /* cancela el max-width: 100% del reset */
	max-height: 60px;  /* límite de seguridad para no romper el header */
	display: inline-block;
}

/* Navegación principal (desktop) */
.primary-nav { display: none; }

@media (min-width: 768px) {
	.primary-nav {
		display: flex;
		align-items: center;
		height: 100%;
	}
}

.primary-nav .nav__list {
	display: flex;
	gap: var(--spacing-lg);
	align-items: center;
	height: 100%;
}

.primary-nav .nav__list li { display: flex; align-items: center; height: 100%; }

.primary-nav .nav__list a {
	font-size: var(--font-size-label);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
	color: var(--color-secondary);
	text-decoration: none;
	display: flex;
	align-items: center;
	height: 100%;
	border-bottom: 2px solid transparent;
	padding-top: 2px;
	transition: color 0.2s, border-color 0.2s;
}

.primary-nav .nav__list a:hover,
.primary-nav .nav__list .current-menu-item > a,
.primary-nav .nav__list .current-page-ancestor > a {
	color: var(--color-primary);
	border-bottom-color: var(--color-primary);
}

/* Acciones del header */
.header-actions {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
}

.btn-icon {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--color-secondary);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-xs);
	text-decoration: none;
	transition: color 0.2s;
	line-height: 1;
}
.btn-icon:hover { color: var(--color-primary); }
.btn-icon .material-symbols-outlined { font-size: 24px; }

.btn-subscribe {
	display: none;
	background-color: var(--color-primary);
	color: var(--color-on-primary);
	font-size: var(--font-size-label);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
	padding: var(--spacing-sm) var(--spacing-md);
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: opacity 0.2s;
	font-family: var(--font-family);
	line-height: 1;
}
.btn-subscribe:hover { opacity: 0.9; color: var(--color-on-primary); }

@media (min-width: 768px) { .btn-subscribe { display: inline-flex; align-items: center; } }

.menu-toggle { display: flex; }
@media (min-width: 768px) { .menu-toggle { display: none; } }

/* Navegación móvil */
.mobile-nav {
	display: none;
	background-color: var(--color-surface);
	border-top: 1px solid var(--color-outline-variant);
}

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

.mobile-nav .container { padding-block: var(--spacing-md); }

.mobile-nav .mobile-nav__list a {
	display: block;
	padding: var(--spacing-sm) 0;
	font-size: var(--font-size-label);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
	color: var(--color-secondary);
	border-bottom: 1px solid var(--color-outline-variant);
	text-decoration: none;
	transition: color 0.2s;
}
.mobile-nav .mobile-nav__list li:last-child a { border-bottom: none; }
.mobile-nav .mobile-nav__list a:hover { color: var(--color-primary); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
	background-color: var(--color-surface-container-low);
	border-top: 1px solid var(--color-outline-variant);
	padding-block: var(--spacing-xl);
}

.site-footer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
	align-items: flex-start;
}

@media (min-width: 768px) {
	.site-footer__inner {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}

.footer-brand__name {
	font-size: var(--font-size-headline-md);
	font-weight: var(--font-weight-bold);
	color: var(--color-primary);
	margin-bottom: var(--spacing-xs);
	display: block;
}

.footer-brand__tagline {
	font-size: var(--font-size-body-md);
	color: var(--color-secondary);
}

.footer-nav .menu { display: flex; flex-wrap: wrap; gap: var(--spacing-md); }
@media (min-width: 768px) { .footer-nav .menu { gap: var(--spacing-lg); } }

.footer-nav a {
	font-size: var(--font-size-label);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
	text-decoration: underline;
	text-underline-offset: 4px;
	transition: color 0.2s;
}
.footer-nav a:hover { color: var(--color-primary); }

/* ============================================================
   SECTION HEADER
   ============================================================ */
.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid var(--color-outline-variant);
	padding-bottom: var(--spacing-sm);
	margin-bottom: var(--spacing-lg);
}

.section-title {
	font-size: var(--font-size-headline-md);
	font-weight: var(--font-weight-semibold);
	color: var(--color-on-background);
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
}

.section-link {
	font-size: var(--font-size-label);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
	color: var(--color-primary);
	text-decoration: none;
	transition: text-decoration 0.2s;
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 2px;
}
.section-link:hover { text-decoration: underline; }

/* ============================================================
   HERO — Full-width con imagen de fondo y texto superpuesto
   ============================================================ */

/* Wrapper principal: ocupa todo el ancho disponible */
.section-hero {
	position: relative;
	width: 100%;
	overflow: hidden;
	background-color: #140a08; /* fallback sin imagen */
	min-height: 300px;
	aspect-ratio: 21 / 8;     /* proporción desktop ~2.6:1 */
}

@media (max-width: 767px) {
	.section-hero {
		aspect-ratio: auto;
		min-height: 420px;
	}
}

/* Imagen ocupa el 100% del contenedor */
.hero-bg {
	position: absolute;
	inset: 0;
}

.hero-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
	display: block;
}

/* Gradiente: oscuro a la izquierda, transparente a la derecha */
.hero-overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			to right,
			rgba(15, 6, 4, 0.93) 0%,
			rgba(15, 6, 4, 0.78) 38%,
			rgba(15, 6, 4, 0.30) 62%,
			transparent 82%
		),
		linear-gradient(
			to top,
			rgba(15, 6, 4, 0.55) 0%,
			transparent 50%
		);
}

/* Contenido superpuesto — alineado al fondo izquierdo */
.hero-container {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
}

.hero-content {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
	padding: var(--spacing-xl) var(--spacing-margin-mobile);
	max-width: 580px;
	width: 100%;
}

@media (min-width: 768px) {
	.hero-content {
		padding: var(--spacing-xl) var(--spacing-margin-desktop);
		max-width: 620px;
	}
}

/* Título en blanco, grande */
.hero-title {
	font-size: clamp(26px, 3.8vw, var(--font-size-display));
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	color: #ffffff;
}

.hero-title a { color: inherit; text-decoration: none; }
.hero-title a:hover { color: var(--color-primary-fixed-dim); }

/* Extracto en blanco semitransparente */
.hero-excerpt {
	font-size: var(--font-size-body-md);
	line-height: var(--line-height-relaxed);
	color: rgba(255, 255, 255, 0.82);
	max-width: 460px;
}

/* Botón CTA + meta en fila */
.hero-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-md);
	margin-top: var(--spacing-xs);
}

/* Meta (autor + tiempo) sobre el hero — texto blanco */
.hero-cta .post-meta__author,
.hero-cta .post-meta__date,
.hero-cta .post-meta__sep {
	color: rgba(255, 255, 255, 0.65);
}

.hero-cta .post-meta__read-time {
	color: rgba(255, 255, 255, 0.85);
	font-weight: var(--font-weight-semibold);
}

/* ============================================================
   POST META
   ============================================================ */
.post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-sm);
}

.post-meta__author { font-size: var(--font-size-caption); color: var(--color-secondary); }
.post-meta__sep    { font-size: var(--font-size-caption); color: var(--color-outline); }
.post-meta__date   { font-size: var(--font-size-caption); color: var(--color-on-surface-variant); }
.post-meta__read-time {
	font-size: var(--font-size-caption);
	color: var(--color-primary);
	font-weight: var(--font-weight-bold);
}

/* ============================================================
   CARD BENTO (grilla 2 columnas)
   ============================================================ */
.cards-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-gutter);
}

@media (min-width: 640px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }

.card-bento {
	border: 1px solid var(--color-outline-variant);
	background-color: var(--color-surface-container-lowest);
	padding: var(--spacing-sm);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	cursor: pointer;
	text-decoration: none;
	color: inherit;
	transition: background-color 0.2s;
}
.card-bento:hover { background-color: var(--color-surface); }

.card-bento__image {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--color-surface-variant);
}

.card-bento__image img {
	width: 100%; height: 100%;
	transition: transform 0.5s;
}
.card-bento:hover .card-bento__image img { transform: scale(1.05); }

.card-bento__body {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
	padding-inline: var(--spacing-xs);
	padding-bottom: var(--spacing-sm);
}

.card-bento__category {
	font-size: var(--font-size-caption);
	color: var(--color-secondary);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-wide);
}

.card-bento__title {
	font-size: var(--font-size-body-lg);
	font-weight: var(--font-weight-bold);
	color: var(--color-on-background);
	line-height: var(--line-height-snug);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 0.2s;
}
.card-bento:hover .card-bento__title { color: var(--color-primary); }

/* ============================================================
   CARD HORIZONTAL (lista)
   ============================================================ */
.cards-list { display: flex; flex-direction: column; gap: var(--spacing-sm); }

.card-horizontal {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
	padding: var(--spacing-sm);
	border: 1px solid var(--color-outline-variant);
	background-color: var(--color-surface-container-lowest);
	cursor: pointer;
	text-decoration: none;
	color: inherit;
	transition: background-color 0.2s;
}

@media (min-width: 640px) { .card-horizontal { flex-direction: row; } }

.card-horizontal:hover { background-color: var(--color-surface); }

.card-horizontal__image {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--color-surface-variant);
	flex-shrink: 0;
}

@media (min-width: 640px) {
	.card-horizontal__image { width: 192px; aspect-ratio: 1; }
}

.card-horizontal__image img {
	width: 100%; height: 100%;
	transition: transform 0.5s;
}
.card-horizontal:hover .card-horizontal__image img { transform: scale(1.05); }

.card-horizontal__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--spacing-xs);
	padding-block: var(--spacing-xs);
	padding-right: var(--spacing-sm);
	flex: 1;
	min-width: 0;
}

.card-horizontal__category {
	display: inline-block;
	font-size: var(--font-size-caption);
	color: var(--color-secondary);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-wide);
	background-color: var(--color-surface-container-low);
	padding: 2px var(--spacing-sm);
	align-self: flex-start;
}

.card-horizontal__title {
	font-size: var(--font-size-headline-md);
	font-weight: var(--font-weight-bold);
	color: var(--color-on-background);
	line-height: var(--line-height-snug);
	transition: color 0.2s;
}
.card-horizontal:hover .card-horizontal__title { color: var(--color-primary); }

.card-horizontal__excerpt {
	font-size: var(--font-size-body-md);
	color: var(--color-on-surface-variant);
	line-height: var(--line-height-relaxed);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar { display: flex; flex-direction: column; gap: var(--spacing-xl); }

/* Widget: Most Read */
.widget-most-read {
	border: 1px solid var(--color-outline-variant);
	background-color: var(--color-surface-container-lowest);
	padding: var(--spacing-md);
}

.widget-title {
	font-size: var(--font-size-label);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
	color: var(--color-secondary);
	border-bottom: 1px solid var(--color-outline-variant);
	padding-bottom: var(--spacing-xs);
	margin-bottom: var(--spacing-sm);
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
}
.widget-title .material-symbols-outlined { font-size: 16px; }

.most-read-list { display: flex; flex-direction: column; }

.most-read-item {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-md);
	padding-block: var(--spacing-sm);
	border-bottom: 1px solid var(--color-surface-variant);
	cursor: pointer;
	text-decoration: none;
	color: inherit;
}
.most-read-item:last-child { border-bottom: none; }

.most-read-number {
	font-size: var(--font-size-display);
	font-weight: var(--font-weight-bold);
	color: var(--color-surface-variant);
	line-height: 1;
	margin-top: -4px;
	flex-shrink: 0;
	transition: color 0.2s;
	min-width: 32px;
}
.most-read-item:hover .most-read-number { color: var(--color-primary); }

.most-read-title {
	font-size: var(--font-size-body-md);
	font-weight: var(--font-weight-bold);
	color: var(--color-on-background);
	line-height: var(--line-height-snug);
	transition: color 0.2s;
}
.most-read-item:hover .most-read-title { color: var(--color-primary); }

/* Widget: Newsletter */
.widget-newsletter {
	background-color: var(--color-surface-container-high);
	border: 1px solid var(--color-outline);
	padding: var(--spacing-lg);
	text-align: center;
	position: relative;
	overflow: hidden;
}

.widget-newsletter__bg {
	position: absolute;
	inset: 0;
	opacity: .05;
	pointer-events: none;
	background-image: repeating-linear-gradient(45deg, #000 0, #000 1px, transparent 0, transparent 50%);
	background-size: 10px 10px;
}

.widget-newsletter__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-xs);
}

.widget-newsletter__icon { color: var(--color-primary); font-size: 36px !important; margin-bottom: var(--spacing-xs); }

.widget-newsletter__title {
	font-size: var(--font-size-headline-md);
	font-weight: var(--font-weight-bold);
	color: var(--color-on-background);
}

.widget-newsletter__text {
	font-size: var(--font-size-body-md);
	color: var(--color-on-surface-variant);
	margin-bottom: var(--spacing-sm);
}

.widget-newsletter__form { width: 100%; display: flex; flex-direction: column; gap: var(--spacing-sm); }

.widget-newsletter__input {
	width: 100%;
	background-color: var(--color-surface-container-lowest);
	border: 1px solid var(--color-outline-variant);
	padding: var(--spacing-sm);
	font-size: var(--font-size-body-md);
	font-family: var(--font-family);
	color: var(--color-on-surface);
	outline: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.widget-newsletter__input:focus {
	border-color: var(--color-secondary);
	box-shadow: 0 0 0 1px var(--color-secondary);
}

.widget-newsletter__submit {
	width: 100%;
	background-color: var(--color-primary);
	color: var(--color-on-primary);
	padding: var(--spacing-sm) var(--spacing-md);
	font-size: var(--font-size-label);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
	border: none;
	cursor: pointer;
	font-family: var(--font-family);
	transition: background-color 0.2s;
}
.widget-newsletter__submit:hover { background-color: var(--color-primary-container); }

/* ----------------------------------------------------------
   Plugin "Newsletter" (Stefano Lissa) — override de estilos
   para que se vea igual al diseño del theme
   ---------------------------------------------------------- */
.widget-newsletter .newsletter_widget,
.widget-newsletter .newsletter_form {
	width: 100%;
}

.widget-newsletter .newsletter_fields,
.widget-newsletter .newsletter_field,
.widget-newsletter .newsletter_submit_block {
	width: 100%;
	margin: 0;
	padding: 0;
}

/* Input de email */
.widget-newsletter .newsletter_email {
	width: 100%;
	background-color: var(--color-surface-container-lowest);
	border: 1px solid var(--color-outline-variant);
	border-radius: 0;
	padding: var(--spacing-sm);
	font-size: var(--font-size-body-md);
	font-family: var(--font-family);
	color: var(--color-on-surface);
	outline: none;
	box-shadow: none;
	margin-bottom: var(--spacing-sm);
	transition: border-color 0.2s, box-shadow 0.2s;
	-webkit-appearance: none;
	appearance: none;
}
.widget-newsletter .newsletter_email:focus {
	border-color: var(--color-secondary);
	box-shadow: 0 0 0 1px var(--color-secondary);
}
.widget-newsletter .newsletter_email::placeholder {
	color: var(--color-on-surface-variant);
}

/* Botón submit */
.widget-newsletter .newsletter_submit {
	width: 100%;
	background-color: var(--color-primary);
	color: var(--color-on-primary);
	padding: var(--spacing-sm) var(--spacing-md);
	font-size: var(--font-size-label);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
	border: none;
	border-radius: 0;
	cursor: pointer;
	font-family: var(--font-family);
	transition: background-color 0.2s;
	-webkit-appearance: none;
	appearance: none;
}
.widget-newsletter .newsletter_submit:hover {
	background-color: var(--color-primary-container);
}

/* Mensaje de confirmación / error */
.widget-newsletter .newsletter_form_result {
	font-size: var(--font-size-body-md);
	color: var(--color-on-surface-variant);
	margin-top: var(--spacing-sm);
	text-align: center;
}

/* ============================================================
   MAGAZINE COVERS
   ============================================================ */
.section-magazine {
	padding-top: var(--spacing-lg);
	border-top: 4px solid var(--color-on-background);
}

.section-magazine__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--spacing-lg);
}

.section-magazine__title {
	font-size: var(--font-size-headline-lg);
	font-weight: var(--font-weight-bold);
	color: var(--color-on-background);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-tight);
}

.covers-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--spacing-md);
}

@media (min-width: 768px) {
	.covers-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--spacing-lg);
	}
}

.cover-card { display: flex; flex-direction: column; gap: var(--spacing-sm); text-decoration: none; color: inherit; }

.cover-card__image {
	aspect-ratio: 3 / 4;
	background-color: var(--color-surface-variant);
	border: 1px solid var(--color-outline-variant);
	overflow: hidden;
	position: relative;
	box-shadow: var(--shadow-card);
	transition: box-shadow 0.3s;
}
.cover-card__image:hover { box-shadow: var(--shadow-md); }

.cover-card__image img {
	width: 100%; height: 100%;
	transition: transform 0.7s;
	filter: grayscale(20%);
}
.cover-card:hover .cover-card__image img { transform: scale(1.05); }

.cover-card__label {
	font-size: var(--font-size-label);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
	color: var(--color-on-background);
	text-align: center;
}

/* ============================================================
   SINGLE POST — Header y contenido
   ============================================================ */
.entry-header {
	margin-bottom: var(--spacing-xl);
	padding-bottom: var(--spacing-lg);
	border-bottom: 1px solid var(--color-outline-variant);
}

.entry-badge { margin-bottom: var(--spacing-sm); }

.entry-title {
	font-size: clamp(var(--font-size-display-mobile), 4vw, var(--font-size-display));
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-on-background);
	margin-bottom: var(--spacing-md);
}

.entry-featured-image {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	margin-bottom: var(--spacing-xl);
}
.entry-featured-image img { width: 100%; height: 100%; }

.entry-content {
	font-size: var(--font-size-body-lg);
	line-height: var(--line-height-loose);
	color: var(--color-on-surface);
	max-width: 720px;
}
.entry-content h2 { font-size: var(--font-size-headline-lg); font-weight: var(--font-weight-bold); margin: var(--spacing-xl) 0 var(--spacing-md); line-height: var(--line-height-snug); }
.entry-content h3 { font-size: var(--font-size-headline-md); font-weight: var(--font-weight-semibold); margin: var(--spacing-lg) 0 var(--spacing-sm); }
.entry-content p { margin-bottom: var(--spacing-lg); }
.entry-content a { color: var(--color-primary); text-decoration: underline; }
.entry-content a:hover { opacity: .8; }
.entry-content ul, .entry-content ol { margin: 0 0 var(--spacing-lg) var(--spacing-lg); list-style: revert; }
.entry-content li { margin-bottom: var(--spacing-xs); }
.entry-content blockquote {
	border-left: 4px solid var(--color-primary);
	padding-left: var(--spacing-lg);
	margin: var(--spacing-xl) 0;
	color: var(--color-on-surface-variant);
	font-size: var(--font-size-headline-md);
	font-style: italic;
	line-height: var(--line-height-normal);
}
.entry-content figure { margin: var(--spacing-xl) 0; }
.entry-content figcaption { font-size: var(--font-size-caption); color: var(--color-on-surface-variant); margin-top: var(--spacing-xs); text-align: center; }

/* ============================================================
   BADGE
   ============================================================ */
.badge {
	display: inline-block;
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
	padding: 2px var(--spacing-sm);
	background-color: var(--color-surface-container-low);
	color: var(--color-secondary);
	border: 1px solid var(--color-outline-variant);
}

.badge--primary {
	background-color: var(--color-primary);
	color: var(--color-on-primary);
	border-color: var(--color-primary);
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn-primary {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
	background-color: var(--color-primary);
	color: var(--color-on-primary);
	padding: var(--spacing-sm) var(--spacing-md);
	font-size: var(--font-size-label);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
	border: none;
	cursor: pointer;
	font-family: var(--font-family);
	text-decoration: none;
	transition: opacity 0.2s;
	line-height: 1.2;
}
.btn-primary:hover { opacity: .9; color: var(--color-on-primary); }

.btn-secondary {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
	background: none;
	color: var(--color-secondary);
	padding: var(--spacing-sm) var(--spacing-md);
	font-size: var(--font-size-label);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
	border: 1px solid var(--color-secondary);
	cursor: pointer;
	font-family: var(--font-family);
	text-decoration: none;
	transition: color 0.2s, border-color 0.2s;
}
.btn-secondary:hover { color: var(--color-primary); border-color: var(--color-primary); }

/* ============================================================
   SEARCH DRAWER — barra oscura que se despliega bajo el header
   ============================================================ */

.search-drawer {
	background-color: #1a0e0c;
	border-bottom: 2px solid var(--color-primary);
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	/* Vive dentro del <header> sticky — no necesita position:fixed
	   ni cálculos de admin bar. El header ya maneja todo eso. */
}

/* Estado abierto */
.search-drawer.is-open {
	max-height: 88px;
}

/* Fila interior: formulario + botón cerrar */
.search-drawer__inner {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	height: 72px;
}

/* Formulario ocupa todo el espacio disponible */
.search-drawer__form {
	flex: 1;
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	height: 100%;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* Input editorial grande */
.search-drawer__input {
	flex: 1;
	background: transparent;
	border: none;
	outline: none;
	font-family: var(--font-family);
	font-size: clamp(18px, 3vw, 26px);
	font-weight: var(--font-weight-bold);
	color: #ffffff;
	padding: var(--spacing-sm) 0;
	line-height: 1.2;
	caret-color: var(--color-primary);
	-webkit-appearance: none;
	appearance: none;
}

.search-drawer__input::placeholder {
	color: rgba(255, 255, 255, 0.35);
	font-weight: var(--font-weight-regular);
}

.search-drawer__input::-webkit-search-cancel-button { display: none; }

/* Botón submit */
.search-drawer__submit {
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	display: flex;
	align-items: center;
	padding: var(--spacing-xs);
	transition: color 0.2s, transform 0.2s;
	flex-shrink: 0;
}

.search-drawer__submit:hover,
.search-drawer__submit:focus-visible { color: var(--color-primary); transform: translateX(3px); }
.search-drawer__submit .material-symbols-outlined { font-size: 26px; }

/* Botón cerrar × */
.search-drawer__close {
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	display: flex;
	align-items: center;
	padding: var(--spacing-xs);
	transition: color 0.2s;
	flex-shrink: 0;
}

.search-drawer__close:hover,
.search-drawer__close:focus-visible { color: #ffffff; }
.search-drawer__close .material-symbols-outlined { font-size: 22px; }

/* ============================================================
   READING PROGRESS BAR
   ============================================================ */
.reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 0;
	height: 3px;
	background-color: var(--color-primary);
	z-index: calc(var(--z-header) + 1);
	transition: width 0.1s linear;
	pointer-events: none;
}

/* ============================================================
   PAGINACIÓN
   ============================================================ */
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--spacing-sm);
	margin-top: var(--spacing-xl);
	flex-wrap: wrap;
}

.pagination a,
.pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--spacing-sm);
	font-size: var(--font-size-label);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
	border: 1px solid var(--color-outline-variant);
	color: var(--color-secondary);
	text-decoration: none;
	transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}

.pagination a:hover {
	color: var(--color-on-primary);
	background-color: var(--color-primary);
	border-color: var(--color-primary);
}

.pagination .current {
	background-color: var(--color-primary);
	color: var(--color-on-primary);
	border-color: var(--color-primary);
}

.pagination .dots { border: none; }