/* Blog: listado, categorías, búsqueda y artículo. */

/* ---------- Cabecera del listado ---------- */

.blog-header {
	background: var(--color-bg-section-alt);
}

.blog-header__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-6);
	padding-block: 56px;
}

.blog-header__title {
	font-size: var(--text-display);
	line-height: 1.1;
	letter-spacing: var(--tracking-display);
}

.blog-header__lead {
	max-width: 700px;
	color: var(--color-text-secondary);
	font-size: var(--text-body-lg);
	line-height: var(--leading-body);
}

.blog-search {
	position: relative;
	width: 100%;
	max-width: 600px;
}

.blog-search__icon {
	position: absolute;
	top: 50%;
	left: 20px;
	color: var(--color-text-secondary);
	transform: translateY(-50%);
	pointer-events: none;
}

.blog-search input[type="search"] {
	width: 100%;
	height: 50px;
	padding: 0 20px 0 48px;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	background: var(--color-bg-page);
	color: var(--color-text-primary);
	font: inherit;
	transition: border-color var(--transition), box-shadow var(--transition);
}

.blog-search input[type="search"]::placeholder {
	color: var(--color-text-secondary);
	opacity: 1;
}

.blog-search input[type="search"]:focus {
	border-color: var(--color-focus);
	background: var(--color-bg-page);
	color: var(--color-text-primary);
	box-shadow: 0 0 0 4px rgba(82, 153, 249, 0.18);
	outline: none;
}

/* Chips de categorías */

.chips {
	width: 100%;
}

.chips ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.chip {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border-radius: 20px;
	background: var(--color-bg-page);
	color: var(--color-text-primary);
	font-size: var(--text-label-sm);
	font-weight: 500;
	line-height: var(--leading-label);
	letter-spacing: var(--tracking-label-sm);
	white-space: nowrap;
	transition: background-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.chip:hover,
.chip:focus {
	background: var(--gray-100);
	color: var(--color-text-primary);
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(12, 30, 61, 0.1);
}

.chip.is-active,
.chip.is-active:hover,
.chip.is-active:focus {
	background: var(--color-bg-dark);
	color: var(--color-text-inverse);
}

/* ---------- Layout principal ---------- */

.blog-main {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	grid-template-areas: "sidebar content";
	align-items: start;
	gap: var(--space-12);
	padding-block: var(--space-10) var(--section-y);
}

.blog-content {
	grid-area: content;
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
	min-width: 0;
}

.blog-sidebar {
	grid-area: sidebar;
	position: sticky;
	top: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

/* ---------- Destacado ---------- */

.featured {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-8);
	padding: var(--space-6);
	border: 1px solid #edf0f5;
	border-radius: var(--radius-xl);
	background: var(--color-bg-page);
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.featured:hover {
	border-color: transparent;
	transform: translateY(-4px);
	box-shadow: 0 22px 44px rgba(12, 30, 61, 0.12);
}

.featured__media {
	flex: 0 0 340px;
	aspect-ratio: 340 / 220;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--color-bg-section-alt);
}

.featured__media img,
.articulo__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.featured:hover .featured__media img {
	transform: scale(1.04);
}

.featured__copy {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
	color: var(--color-text-secondary);
}

.featured__title {
	font-size: var(--text-h3);
	font-weight: 600;
	line-height: var(--leading-h3);
	letter-spacing: 0;
}

.featured__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--radius-xl);
}

.featured__title a:hover,
.featured__title a:focus {
	color: var(--color-text-heading);
}

.featured__copy > p:not(.eyebrow) {
	max-width: 460px;
}

.featured:hover .btn {
	background: var(--color-cta-bg-hover);
}

/* ---------- Grilla de artículos ---------- */

.recientes {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.blog-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-10) var(--space-5);
}

.post-card--blog {
	gap: var(--space-2);
}

.post-card--blog .post-card__media {
	aspect-ratio: auto;
	height: 200px;
	border-radius: var(--radius-lg);
}

.post-card__excerpt {
	color: var(--color-text-secondary);
}

/* Entrada de las tarjetas cargadas con "Ver más artículos". */
.blog-grid > li.is-new {
	animation: blog-card-in 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
	animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes blog-card-in {
	from {
		opacity: 0;
		transform: translateY(24px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ---------- Paginación ---------- */

.blog-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-top: var(--space-8);
}

.blog-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
}

.blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 6px;
	border-radius: 6px;
	color: var(--color-text-secondary);
	transition: background-color var(--transition), color var(--transition);
}

.blog-pagination a.page-numbers:hover,
.blog-pagination a.page-numbers:focus {
	background: var(--color-bg-section-alt);
	color: var(--color-text-heading);
}

.blog-pagination .page-numbers.current {
	background: var(--color-bg-dark);
	color: var(--color-text-inverse);
}

.blog-pagination .btn {
	margin-left: auto;
}

.btn.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

.blog-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);
	padding: var(--space-8);
	border-radius: var(--radius-xl);
	background: var(--color-bg-section-alt);
	color: var(--color-text-secondary);
}

/* ---------- Barra lateral ---------- */

.blog-sidebar__block {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.blog-sidebar__title {
	color: var(--color-text-heading);
	font-family: var(--font-body);
	font-size: var(--text-label-md);
	font-weight: 500;
	line-height: var(--leading-label);
	letter-spacing: var(--tracking-label-md);
}

.blog-sidebar__topics {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.blog-sidebar__topics a {
	display: inline-block;
	color: var(--color-text-secondary);
	transition: color var(--transition), transform var(--transition);
}

.blog-sidebar__topics a:hover,
.blog-sidebar__topics a:focus,
.blog-sidebar__topics a[aria-current] {
	color: var(--color-text-heading);
	transform: translateX(4px);
}

.blog-sidebar__topics a[aria-current] {
	font-weight: 500;
}

.most-read {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-top: 2px;
}

.most-read li {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.most-read__num {
	flex: none;
	min-width: 12px;
	color: var(--color-text-accent);
	font-family: var(--font-heading);
	font-size: var(--text-h4);
	font-weight: 500;
	line-height: var(--leading-h4);
	transition: transform var(--transition);
}

.most-read a {
	color: var(--color-text-primary);
}

.most-read a:hover,
.most-read a:focus {
	color: var(--navy-700);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.most-read li:hover .most-read__num {
	transform: scale(1.25);
}

.nl-box {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: 24px 20px;
	border-radius: var(--radius-lg);
	background: var(--color-bg-section-alt);
}

.nl-box > p {
	color: var(--color-text-secondary);
}

.nl-form--stacked {
	grid-template-columns: 1fr;
	gap: var(--space-3);
}

.nl-form--stacked input[type="email"],
.nl-form--stacked input[type="submit"].btn {
	width: 100%;
	min-height: 40px;
}

.nl-form--stacked input[type="email"] {
	padding: 8px 12px;
}

/* ---------- Artículo ---------- */

.reading-progress {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 200;
	height: 3px;
	pointer-events: none;
}

.admin-bar .reading-progress {
	top: 32px;
}

.reading-progress span {
	display: block;
	height: 100%;
	background: var(--color-garantia);
	transform: scaleX(0);
	transform-origin: left;
}

.articulo__header {
	background: var(--color-bg-section-alt);
}

.articulo__header-inner,
.articulo__media,
.articulo__body {
	max-width: calc(880px + var(--gutter) * 2);
}

.articulo__header-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);
	padding-block: 56px 120px;
}

.articulo__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	color: var(--color-text-secondary);
	font-size: var(--text-label-md);
	font-weight: 500;
	letter-spacing: var(--tracking-label-md);
}

.articulo__breadcrumb a:last-child {
	color: var(--color-text-accent);
}

.articulo__breadcrumb a:hover,
.articulo__breadcrumb a:focus {
	color: var(--color-text-heading);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.articulo__title {
	font-size: var(--text-h1);
}

.articulo__lead {
	color: var(--color-text-secondary);
	font-size: var(--text-body-lg);
	line-height: var(--leading-body);
}

.articulo__meta,
.featured__meta {
	color: var(--color-text-secondary);
}

.articulo__media {
	margin-top: -80px;
}

.articulo__media img {
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-xl);
	box-shadow: 0 24px 48px rgba(12, 30, 61, 0.14);
}

.articulo__body {
	padding-block: var(--space-12) var(--section-y);
}

.articulo__post:not(.has-post-thumbnail) .articulo__header-inner {
	padding-bottom: 56px;
}

.entry-content {
	color: var(--color-text-primary);
	font-size: var(--text-body-md);
	line-height: 1.7;
}

.entry-content > * + * {
	margin-top: 1.25em;
}

.entry-content h2 {
	margin-top: 1.8em;
	font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
	line-height: 1.24;
	letter-spacing: 0;
}

.entry-content h3 {
	margin-top: 1.6em;
}

.entry-content a {
	color: var(--navy-700);
	text-decoration: underline;
	text-decoration-color: var(--lightblue-500);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.entry-content a:hover,
.entry-content a:focus {
	color: var(--navy-900);
	text-decoration-color: var(--color-garantia);
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.4em;
}

.entry-content ul {
	list-style: disc;
}

.entry-content ol {
	list-style: decimal;
}

.entry-content li + li {
	margin-top: 0.4em;
}

.entry-content li::marker {
	color: var(--color-text-accent);
}

.entry-content blockquote {
	margin-inline: 0;
	padding: var(--space-5) var(--space-6);
	border: 0;
	border-left: 4px solid var(--color-garantia);
	border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
	background: var(--color-garantia-bg);
	color: var(--color-text-heading);
	font-family: var(--font-heading);
	font-size: var(--text-body-lg);
	font-style: normal;
	font-weight: 500;
}

.entry-content img,
.entry-content figure {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
}

.entry-content figcaption {
	margin-top: var(--space-2);
	color: var(--color-text-secondary);
	font-size: var(--text-label-md);
	text-align: center;
}

.articulo__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	margin-top: var(--space-12);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-border-default);
}

.articulo__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.articulo__tags .chip {
	background: var(--color-bg-section-alt);
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
	.blog-main {
		grid-template-columns: 1fr;
		grid-template-areas:
			"content"
			"sidebar";
	}

	.blog-sidebar {
		position: static;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding-top: var(--space-10);
		border-top: 1px solid var(--color-border-default);
	}

	.nl-box {
		grid-column: 1 / -1;
	}
}

@media (max-width: 782px) {
	.admin-bar .reading-progress {
		top: 46px;
	}
}

@media (max-width: 720px) {
	.blog-header__inner {
		padding-block: var(--space-10);
	}

	/* Chips en una fila con desplazamiento horizontal. */
	.chips {
		margin-inline: calc(var(--gutter) * -1);
		width: auto;
		align-self: stretch;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.chips::-webkit-scrollbar {
		display: none;
	}

	.chips ul {
		flex-wrap: nowrap;
		padding: 4px var(--gutter);
	}

	.featured {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-5);
		padding: var(--space-4);
	}

	.featured__media {
		flex: none;
	}

	.blog-grid {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}

	.blog-sidebar {
		grid-template-columns: 1fr;
	}

	.blog-pagination .btn {
		width: 100%;
		margin-left: 0;
	}

	.articulo__header-inner {
		padding-block: var(--space-10) 96px;
	}

	.articulo__media {
		margin-top: -64px;
	}
}

/* ---------- Páginas legales (usan .entry-content del artículo) ---------- */

.legal__header {
	background: var(--color-bg-section-alt);
}

.legal__header-inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding-block: var(--space-16);
}

.legal__title {
	max-width: 900px;
	font-size: var(--text-display);
	line-height: 1.1;
	letter-spacing: var(--tracking-display);
}

.legal__main {
	display: grid;
	grid-template-columns: 280px minmax(0, 760px);
	align-items: start;
	gap: var(--space-16);
	padding-block: var(--space-12) var(--section-y);
}

.legal__toc {
	position: sticky;
	top: var(--space-6);
	max-height: calc(100vh - 48px);
	overflow-y: auto;
}

.legal__toc[hidden] {
	display: none;
}

.legal__toc[hidden] + .legal__content {
	grid-column: 1 / -1;
	max-width: 760px;
}

.legal__toc-title {
	margin-bottom: var(--space-3);
	color: var(--color-text-heading);
	font-size: var(--text-label-md);
	font-weight: 500;
	letter-spacing: var(--tracking-label-md);
}

.legal__toc ol {
	display: flex;
	flex-direction: column;
	border-left: 2px solid var(--color-border-default);
}

.legal__toc a {
	display: block;
	margin-left: -2px;
	padding: 7px 0 7px var(--space-4);
	border-left: 2px solid transparent;
	color: var(--color-text-secondary);
	font-size: var(--text-label-md);
	line-height: 1.35;
	transition: color var(--transition), border-color var(--transition), padding-left var(--transition);
}

.legal__toc a:hover,
.legal__toc a:focus {
	padding-left: var(--space-5);
	color: var(--color-text-heading);
}

.legal__toc a[aria-current] {
	border-left-color: var(--color-garantia);
	color: var(--color-text-heading);
	font-weight: 500;
}

.legal__content h2 {
	font-size: var(--text-h3);
	line-height: var(--leading-h3);
	scroll-margin-top: var(--space-6);
}

.legal__content h3 {
	font-size: var(--text-h4);
	font-weight: 500;
	line-height: var(--leading-h4);
}

.legal__content .legal-meta {
	color: var(--color-text-heading);
	font-size: var(--text-label-md);
	font-weight: 500;
	letter-spacing: var(--tracking-label-md);
}

.legal__content .legal-meta + p,
.legal__content .legal-meta + p + p {
	margin-top: var(--space-1);
	color: var(--color-text-secondary);
}

@media (max-width: 1100px) {
	.legal__main {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}

	.legal__toc {
		position: static;
		max-height: none;
		padding: var(--space-5);
		border-radius: var(--radius-lg);
		background: var(--color-bg-section-alt);
	}

	.legal__header-inner {
		padding-block: var(--space-12);
	}
}