/*
Theme Name: Blog Guacurarí
Description: Tema custom para blog.guacurari.com. Sin page builder — meta-boxes propios para carga de contenido, roles de solo-lectura/editor.
Version: 0.1.0
Author: Guacurarí
Text Domain: blog-guacurari
*/

body {
	font-family: var(--font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	margin: 0;
	color: #1a1a1a;
	background: #f4f5f6;
}

/* Reglas de blog (grilla, sidebar, post individual) más abajo, después de
   las variables --font/--blue/etc. clonadas de la landing. */

/* ═══════════════════════════════════════════════════════════════
   Nav + footer clonados de shared/components/landing/{nav,footer}.php
   y css/landing.css (repo guacurari.com) — para que el blog se sienta
   parte del mismo sitio. Portado a mano 2026-09-01, sin include
   compartido entre los dos repos: si la landing cambia su nav/footer,
   replicar acá manualmente.
   ═══════════════════════════════════════════════════════════════ */

:root {
	--font:       'Inter', system-ui, sans-serif;
	--font-head:  'Sora', 'Inter', system-ui, sans-serif;
	--blue:       #5c5ff1;
	--blue-dk:    #4045d1;
	--sky:        #48c0fb;
	--navy:       #07122a;
	--navy-mid:   #0d1f45;
	--navy-banner:#13082d;
	--cyan:       #06b6d4;
	--cyan-bg:    #baf0ff;
	--mint:       #0d9488;
	--mint-bg:    #baffe7;
	--magenta:    #ff69d4;
	--surface:    #ffffff;
	--bg:         #f4f7fc;
	--text:       #161C84;
	--muted:      #6b7a99;
	--border:     #e2e8f0;
	--radius:     14px;
	--radius-lg:  22px;
	--shadow:     0 4px 24px rgba(10,30,80,.10);
	--shadow-lg:  0 8px 40px rgba(10,30,80,.14);
	--transition: .2s ease;
}

/* ── Navbar ─────────────────────────────────────────────── */
.hub-nav {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 1000;
	background: rgba(92,95,241,.96);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(255,255,255,.07);
	height: 62px;
	display: flex;
	align-items: center;
}

.hub-nav__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 1.5rem;
	width: 100%;
	height: 62px;
	display: flex;
	align-items: stretch;
	gap: 1.5rem;
}

.hub-nav__logo { flex: 0 0 auto; display: flex; align-items: center; }
.hub-nav__logo img { height: 30px; width: auto; }

.hub-nav__links {
	flex: 1;
	height: 62px;
	display: flex;
	gap: .1rem;
	list-style: none;
	align-items: center;
}

.hub-nav__links > li { position: relative; height: 100%; display: flex; align-items: center; }
.hub-nav__links > li.d-mobile-only { display: none; }

.nav-link {
	color: #fff;
	text-decoration: none;
	font-size: .875rem;
	font-weight: 500;
	padding: .5rem .8rem;
	border-radius: 8px;
	transition: var(--transition);
	background: none;
	border: none;
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	font-family: inherit;
	cursor: pointer;
}

.nav-link:hover, .nav-link[aria-expanded="true"] { color: #fff; background: rgba(255,255,255,.08); }
.nav-link--mega i { font-size: .7rem; transition: transform .2s; }
.nav-link--mega[aria-expanded="true"] i { transform: rotate(180deg); }

/* ── Mega menú: Espacios ─────────────────────────────────── */
.mega-panel {
	position: fixed;
	top: 62px; left: 0; right: 0;
	background: var(--navy);
	border-bottom: 1px solid rgba(255,255,255,.08);
	box-shadow: 0 20px 40px rgba(0,0,0,.35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 999;
}

.mega-panel.open { opacity: 1; visibility: visible; transform: translateY(0); }

.mega-panel__inner { max-width: 1180px; margin: 0 auto; padding: 2rem 1.5rem 1.5rem; }
.mega-panel__sub   { font-size: .875rem; color: #fff; margin-top: .25rem; margin-bottom: 1.5rem; }

.mega-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }

.mega-card {
	display: flex;
	gap: .9rem;
	padding: 1rem;
	border-radius: var(--radius);
	text-decoration: none;
	transition: background .15s;
}

.mega-card:hover { background: rgba(255,255,255,.06); }

.mega-card__icon {
	width: 42px; height: 42px;
	border-radius: 10px;
	flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	font-size: 1.15rem;
	background: var(--mc-bg, rgba(0,123,255,.18));
	color: var(--mc-color, #4da6ff);
}

.mega-card__title { font-size: .95rem; font-weight: 700; color: #fff; margin-bottom: .15rem; }
.mega-card__desc  { font-size: .8rem; color: #fff; line-height: 1.45; }
.mega-card__tag   {
	display: inline-block;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--mc-color, #4da6ff);
	margin-top: .4rem;
}
.mega-card__link {
	display: inline-flex; align-items: center; gap: .3rem;
	font-size: .8rem; font-weight: 600; color: var(--mc-color, #4da6ff);
	margin-top: .4rem;
}

.mega-card--aulas-abiertas  { --mc-bg: rgba(6,182,212,.18);  --mc-color: #22d3ee; }
.mega-card--autoasistidos  { --mc-bg: rgba(92,95,241,.18);  --mc-color: #8b7ff5; }
.mega-card--entorno-guacu  { --mc-bg: rgba(224,57,158,.18); --mc-color: #f472b6; }
.mega-card--aula-aplicada  { --mc-bg: rgba(13,148,136,.18); --mc-color: #2dd4bf; }

.mega-panel__footer { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.08); }
.mega-panel__footer a {
	color: #fff;
	text-decoration: none;
	font-size: .875rem;
	font-weight: 600;
	display: inline-flex; align-items: center; gap: .35rem;
}
.mega-panel__footer a:hover { color: #fff; }

.has-mega { position: relative; }

.mega-panel--espacios,
.mega-panel--programa {
	position: absolute;
	top: calc(100% + 18px);
	bottom: auto;
	max-width: calc(100vw - 3rem);
	background: #fff;
	border-bottom: none;
	border-radius: 20px;
	box-shadow: 0 30px 60px rgba(10,20,60,.22);
}
.mega-panel--espacios::before,
.mega-panel--programa::before {
	content: '';
	position: absolute;
	top: -7px;
	width: 14px; height: 14px;
	background: #fff;
	transform: rotate(45deg);
	border-radius: 3px;
}
.mega-panel--espacios .mega-panel__title,
.mega-panel--programa .mega-panel__title {
	font-family: var(--font);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 1.1rem;
}
.mega-panel--espacios .mega-panel__sub,
.mega-panel--programa .mega-panel__sub { display: none; }

.mega-panel--espacios { left: -1.25rem; right: auto; width: 620px; }
.mega-panel--espacios::before { left: 2rem; }
.mega-panel--espacios .mega-panel__inner { padding: 1.75rem 1.75rem 1.5rem; max-width: none; margin: 0; }
.mega-panel--espacios .mega-grid { gap: 1.6rem 2rem; }
.mega-panel--espacios .mega-card { padding: 0; display: block; }
.mega-panel--espacios .mega-card:hover { background: none; }
.mega-panel--espacios .mega-card__icon { display: none; }
.mega-panel--espacios .mega-card__title { color: var(--text); font-family: var(--font-head); font-size: 1rem; margin-bottom: .3rem; }
.mega-panel--espacios .mega-card__desc  { color: var(--muted); }
.mega-panel--espacios .mega-card__tag   { display: none; }

.mega-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
	margin-top: .75rem;
	padding: .45rem .45rem .45rem 1rem;
	border-radius: 100px;
	font-size: .78rem;
	font-weight: 700;
	color: var(--text);
}
.mega-card__cta i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px; height: 20px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	font-size: .65rem;
}

.mega-card--aulas-abiertas  .mega-card__cta { background: var(--cyan-bg); }
.mega-card--autoasistidos   .mega-card__cta { background: var(--mint-bg); }
.mega-card--entorno-guacu   .mega-card__cta { background: var(--magenta); }
.mega-card--aula-aplicada   .mega-card__cta { background: var(--sky); }

.mega-panel--espacios .mega-panel__footer { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.mega-panel--espacios .mega-panel__footer a { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; color: var(--text); }
.mega-panel--espacios .mega-panel__footer a > span:first-child { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.mega-footer-cta__title { font-family: var(--font-head); font-weight: 700; font-size: .95rem; color: var(--text); }
.mega-footer-cta__desc  { font-size: .8rem; color: var(--muted); margin-top: .15rem; }
.mega-footer-cta__btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .55rem .55rem .55rem 1.1rem;
	border-radius: 100px;
	font-size: .8rem;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(90deg, #ff6a9d, #ff9d5c);
	white-space: nowrap;
}
.mega-footer-cta__btn i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px; height: 20px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	font-size: .65rem;
}

.mega-panel--programa { left: auto; right: -1.25rem; width: 280px; }
.mega-panel--programa::before { right: 2rem; }
.mega-panel--programa .mega-panel__inner { max-width: none; margin: 0; padding: 1.5rem; }
.mega-panel--programa ul { list-style: none; display: flex; flex-direction: column; gap: .15rem; }
.mega-panel--programa a {
	display: block;
	color: var(--text);
	text-decoration: none;
	font-size: .875rem;
	font-weight: 600;
	padding: .55rem .6rem;
	border-radius: 8px;
	transition: background .15s, color .15s;
}
.mega-panel--programa a:hover { background: var(--bg); color: var(--text); }

.hub-nav__end { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }

.hub-nav__cta {
	background: #161C84;
	color: #fff;
	border-radius: 100px;
	padding: .5rem 1.25rem;
	text-decoration: none;
	font-size: .875rem;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	transition: var(--transition);
}
.hub-nav__cta:hover { background: #232ba3; color: #fff; }

.hub-nav__toggle { display: none; background: none; border: none; color: #fff; font-size: 1.4rem; cursor: pointer; }

.d-mobile-only { display: none; }

/* ── Footer ──────────────────────────────────────────────── */
.hub-footer { background: var(--blue); color: #fff; padding: 3.5rem 1.5rem 2rem; }
.hub-footer__inner { max-width: 1180px; margin: 0 auto; }

.hub-footer__cols {
	display: flex;
	justify-content: space-between;
	gap: 2rem;
	padding-bottom: 2.5rem;
	border-bottom: 1px solid rgba(255,255,255,.08);
}

.hub-footer__brand img { height: 32px; filter: brightness(0) invert(1); margin-bottom: .9rem; }
.hub-footer__brand p { font-size: .82rem; color: #fff; max-width: 260px; }
.hub-footer__col-title { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; margin-bottom: 1rem; }
.hub-footer__cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.hub-footer__cols a { color: #fff; text-decoration: none; font-size: .85rem; transition: var(--transition); }
.hub-footer__cols a:hover { color: #fff; }

.hub-footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 2rem; }
.hub-footer__gov { display: flex; align-items: center; gap: 1rem; max-width: 100%; }
.hub-footer__gov img { height: 40px; width: auto; max-width: 100%; opacity: .85; }
.hub-footer__copy { display: flex; align-items: center; height: 40px; margin: 0; font-size: .78rem; color: #fff; line-height: 1; }

/* ── Contenido: clearance bajo el nav fijo (62px), aplicado al body
   entero (no a .post-hero/.post-content puntual) porque index.php lista
   varios posts seguidos y el primero necesita el mismo despeje. ─────── */
body { padding-top: 62px; }

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 991px) {
	.hub-footer__cols { flex-wrap: wrap; row-gap: 2rem; }
	.hub-footer__brand { flex: 1 0 100%; }
}

@media (max-width: 767px) {
	.hub-nav__links { display: none; }
	.hub-nav__end .hub-nav__cta { display: none; }
	.hub-nav__toggle { display: block; }
	.hub-nav__links > li.d-mobile-only { display: list-item; }

	.hub-nav__links.open {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		position: absolute;
		top: 74px; left: 1rem; right: 1rem;
		background: #fff;
		border-radius: 20px;
		padding: 1.1rem;
		gap: .15rem;
		box-shadow: 0 30px 60px rgba(10,20,60,.22);
		height: auto;
		max-height: calc(100vh - 90px);
		overflow-y: auto;
	}

	.hub-nav__links.open > li { height: auto; display: block; }

	.hub-nav__links.open > li > .nav-link,
	.hub-nav__links.open > li > a.nav-link {
		color: var(--text);
		font-family: var(--font-head);
		font-size: 1rem;
		font-weight: 700;
		width: 100%;
		justify-content: space-between;
		padding: .85rem .6rem;
		border-radius: 12px;
	}
	.hub-nav__links.open .nav-link:hover,
	.hub-nav__links.open .nav-link[aria-expanded="true"] { color: var(--text); background: var(--bg); }

	.mega-panel {
		position: static;
		opacity: 1; visibility: visible; transform: none; transition: none;
		background: var(--bg);
		box-shadow: none;
		border-bottom: none;
		border-radius: 14px;
		display: none;
	}
	.mega-panel.open { display: block; margin: .35rem 0 .6rem; }
	.mega-panel__inner { padding: 1.1rem; max-width: none; margin: 0; }
	.mega-grid { grid-template-columns: 1fr; }

	.mega-panel__title {
		font-family: var(--font);
		font-size: .7rem;
		font-weight: 700;
		letter-spacing: .08em;
		text-transform: uppercase;
		color: var(--muted);
		margin-bottom: 1rem;
	}
	.mega-panel__sub { display: none; }

	.mega-panel--espacios,
	.mega-panel--programa {
		width: 100%;
		box-sizing: border-box;
		max-width: none;
		left: 0; right: 0; top: 0;
		box-shadow: none;
	}
	.mega-panel--espacios::before,
	.mega-panel--programa::before { display: none; }
	.mega-panel--espacios .mega-card__title { color: var(--text); }
	.mega-panel--espacios .mega-card__desc  { color: var(--muted); }
	.mega-panel--espacios .mega-grid { gap: 1.1rem; }
	.mega-panel--espacios .mega-panel__footer { border-top-color: var(--border); }
	.mega-panel--espacios .mega-panel__footer a { flex-direction: column; align-items: flex-start; gap: .6rem; color: var(--text); }
	.mega-panel--espacios .mega-panel__footer a > span:first-child { max-width: 100%; min-width: 0; width: 100%; }
	.mega-footer-cta__title { color: var(--text); white-space: normal; }
	.mega-footer-cta__desc { color: var(--muted); white-space: normal; }
	.mega-footer-cta__btn { align-self: stretch; justify-content: center; }

	.mega-panel--programa .mega-panel__inner { margin: 0; padding: 1.1rem; }
	.mega-panel--programa a { color: var(--text); padding: .7rem .6rem; border-radius: 10px; }
	.mega-panel--programa a:hover { background: var(--border); color: var(--text); }

	.hub-footer__cols { flex-direction: column; }
	.hub-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════
   Blog — listado, sidebar, post individual, búsqueda, paginación.
   Reusa las variables clonadas de la landing (--blue, --navy, --font*,
   --radius, --shadow) para que se sienta parte del mismo sitio.
   ═══════════════════════════════════════════════════════════════ */

.blog-shell { background: var(--bg); }
.blog-shell__inner { max-width: 1180px; margin: 0 auto; padding: 3rem 1.5rem 5rem; }

.blog-hero { max-width: 700px; margin: 0 0 3rem; }
.blog-hero__eyebrow {
	display: inline-block;
	font-family: var(--font);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--blue-dk);
	background: var(--cyan-bg);
	padding: .3rem .8rem;
	border-radius: 100px;
	margin-bottom: 1rem;
}
.blog-hero__title {
	font-family: var(--font-head);
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 800;
	color: var(--navy);
	margin: 0 0 .6rem;
	line-height: 1.15;
}
.blog-hero__sub { font-size: 1.05rem; color: var(--muted); margin: 0; }

/* ── Layout: feed + sidebar ─────────────────────────────────── */
.blog-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 3rem;
	align-items: start;
}

.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }

/* ── Card de post ────────────────────────────────────────────── */
.blog-card {
	background: var(--surface);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow);
	transition: transform .2s ease, box-shadow .2s ease;
	display: flex;
	flex-direction: column;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.blog-card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--cyan-bg); }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.blog-card:hover .blog-card__media img { transform: scale(1.05); }
.blog-card__placeholder {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	font-size: 2rem; color: var(--blue);
	background: linear-gradient(135deg, var(--cyan-bg), var(--surface));
}

.blog-card__body { padding: 1.4rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.blog-card__meta { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--muted); }
.blog-card__dot { opacity: .6; }

.blog-card__title { font-family: var(--font-head); font-size: 1.15rem; font-weight: 700; line-height: 1.35; margin: 0; }
.blog-card__title a { color: var(--navy); text-decoration: none; }
.blog-card__title a:hover { color: var(--blue-dk); }

.blog-card__excerpt { font-size: .9rem; color: var(--muted); line-height: 1.6; margin: 0; flex: 1; }

.blog-card__link {
	display: inline-flex; align-items: center; gap: .4rem;
	font-size: .85rem; font-weight: 700; color: var(--blue-dk);
	text-decoration: none; margin-top: .3rem;
	transition: gap .15s ease;
}
.blog-card__link:hover { gap: .6rem; color: var(--blue-dk); }

.blog-empty { color: var(--muted); font-size: 1rem; }

/* ── Paginación ──────────────────────────────────────────────── */
.blog-pagination { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 3rem; }
.blog-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	gap: .35rem;
	min-width: 40px; height: 40px;
	padding: 0 .9rem;
	border-radius: 100px;
	background: var(--surface);
	color: var(--navy);
	text-decoration: none;
	font-size: .875rem;
	font-weight: 600;
	box-shadow: var(--shadow);
	transition: var(--transition);
}
.blog-pagination .page-numbers:hover { background: var(--blue); color: #fff; }
.blog-pagination .page-numbers.current { background: var(--blue); color: #fff; box-shadow: none; }
.blog-pagination .page-numbers.dots { box-shadow: none; background: none; }

/* ── Sidebar ─────────────────────────────────────────────────── */
.blog-sidebar { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 86px; }

.blog-widget {
	background: var(--surface);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 1.4rem;
}
.blog-widget__title {
	font-family: var(--font-head);
	font-size: .95rem;
	font-weight: 700;
	color: var(--navy);
	margin: 0 0 1rem;
}

.blog-widget--search { padding: .6rem; }

.blog-search { display: flex; align-items: center; gap: .4rem; }
.blog-search__input {
	flex: 1;
	border: none;
	background: var(--bg);
	border-radius: 100px;
	padding: .7rem 1.1rem;
	font-family: var(--font);
	font-size: .875rem;
	color: var(--navy);
}
.blog-search__input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.blog-search__btn {
	flex-shrink: 0;
	width: 40px; height: 40px;
	border-radius: 50%;
	border: none;
	background: #FF6699;
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: var(--transition);
}
.blog-search__btn:hover { background: #e34e80; }

.blog-recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.blog-recent__item { display: flex; gap: .8rem; text-decoration: none; align-items: flex-start; }
.blog-recent__item img,
.blog-recent__placeholder {
	width: 56px; height: 56px;
	border-radius: 10px;
	object-fit: cover;
	flex-shrink: 0;
	background: var(--cyan-bg);
	display: flex; align-items: center; justify-content: center;
	color: var(--blue);
	font-size: 1.1rem;
}
.blog-recent__text { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.blog-recent__title {
	font-size: .85rem; font-weight: 600; color: var(--navy);
	line-height: 1.4;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-recent__item:hover .blog-recent__title { color: var(--blue-dk); }
.blog-recent__text time { font-size: .72rem; color: var(--muted); }
.blog-recent__empty { font-size: .85rem; color: var(--muted); list-style: none; }

.blog-widget--cta { background: var(--navy); }
.blog-widget--cta p { color: #fff; font-size: .9rem; margin: 0 0 1rem; line-height: 1.5; }
.blog-widget__cta-btn {
	display: inline-flex; align-items: center; gap: .5rem;
	background: #25d366;
	color: #fff;
	text-decoration: none;
	font-size: .85rem; font-weight: 700;
	padding: .65rem 1.2rem;
	border-radius: 100px;
	transition: var(--transition);
}
.blog-widget__cta-btn:hover { background: #1ebd5a; color: #fff; }

/* ── Post individual ─────────────────────────────────────────── */
/* article y relacionados apilados en la columna izquierda (grid-row 1 y 2),
   sidebar ocupa la columna derecha y se estira por las dos filas — así el
   orden real del DOM (article, relacionados, sidebar) puede ser el mismo que
   se usa en mobile sin duplicar markup, y acá simplemente se reubica. */
.blog-layout--single {
	grid-template-columns: minmax(0, 1fr) 320px;
	grid-template-rows: auto auto;
}
.blog-layout--single > .blog-post { grid-column: 1; grid-row: 1; }
.blog-layout--single > .blog-post__related { grid-column: 1; grid-row: 2; margin-top: 0; }
.blog-layout--single > .blog-sidebar { grid-column: 2; grid-row: 1 / 3; }

.blog-post__back {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-bottom: 1.25rem;
	font-size: .875rem;
	font-weight: 600;
	color: var(--navy);
	text-decoration: none;
	transition: var(--transition);
}
.blog-post__back .material-symbols-rounded { font-size: 18px; }
.blog-post__back:hover { color: var(--blue); gap: .6rem; }

/* aspect-ratio en vez de max-height fija: la caja escala proporcional al
   ancho disponible (que cambia mucho entre desktop con sidebar y mobile a
   columna única), así una imagen subida en 16:9 llena el marco completo sin
   franjas de fondo en ningún breakpoint. Recomendado para futuras entradas:
   exportar el hero en 1600x900 (16:9). */
.blog-post__hero {
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	margin-bottom: 2rem;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, var(--navy), var(--blue-dk));
	display: flex;
	align-items: center;
	justify-content: center;
}
/* "contain": si una imagen vieja no viene en 16:9, se ve completa igual
   (sin recortar cabezas/bordes) con el degradé llenando el sobrante. */
.blog-post__hero img { width: 100%; height: 100%; object-fit: contain; display: block; }

.blog-post__head { margin-bottom: 1.75rem; }
.blog-post__meta { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--muted); margin-bottom: .8rem; }
.blog-post__title {
	font-family: var(--font-head);
	font-size: clamp(1.75rem, 3.5vw, 2.4rem);
	font-weight: 800;
	color: var(--navy);
	line-height: 1.2;
	margin: 0;
}

.blog-post__content {
	background: var(--surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	padding: 2.5rem;
	font-size: 1.05rem;
	line-height: 1.8;
	color: #2a3350;
}
.blog-post__content h2,
.blog-post__content h3 { font-family: var(--font-head); color: var(--navy); margin: 2em 0 .6em; line-height: 1.3; }
.blog-post__content h2 { font-size: 1.5rem; }
.blog-post__content h3 { font-size: 1.2rem; }
.blog-post__content p { margin: 0 0 1.2em; }
.blog-post__content img { max-width: 100%; height: auto; border-radius: var(--radius); margin: .5em 0; }
/* Imágenes agregadas dentro del cuerpo (no el hero): más chicas y centradas
   para que no compitan visualmente con la imagen destacada de 16:9. */
.blog-post__content .blog-post__inline-img { max-width: 440px; display: block; margin: 1.5em auto; box-shadow: var(--shadow); }
.blog-post__content a { color: var(--blue-dk); }
.blog-post__content .post-cta {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: var(--blue);
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	padding: .75rem 1.5rem;
	border-radius: 100px;
	margin: .5rem 0 1.5rem;
	transition: var(--transition);
}
.blog-post__content .post-cta:hover { background: var(--blue-dk); color: #fff; }

.blog-post__share-box {
	margin-top: 2.5rem;
	padding: 1.5rem 1.75rem;
	background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
	border-radius: var(--radius);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}
.blog-post__share-copy { display: flex; flex-direction: column; gap: .25rem; }
.blog-post__share-eyebrow { font-size: .75rem; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: .08em; }
.blog-post__share-copy strong { color: #fff; font-size: 1.05rem; font-weight: 700; line-height: 1.4; }

.blog-post__share { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.blog-post__share-link {
	width: 42px; height: 42px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	text-decoration: none;
	font-size: 1.1rem;
	transition: var(--transition);
}
.blog-post__share-link .material-symbols-rounded { font-size: 20px; }
.blog-post__share-link:hover { background: var(--blue); color: #fff; transform: translateY(-2px); }
.blog-post__share-link--whatsapp:hover { background: #25d366; }

.blog-post__related { margin-top: 3.5rem; }
.blog-post__related-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.blog-post__related-title { font-family: var(--font-head); font-size: 1.4rem; font-weight: 800; color: var(--navy); margin: 0; }

.blog-post__related-nav { display: flex; gap: .5rem; flex-shrink: 0; }
.blog-post__related-btn {
	width: 38px; height: 38px;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: #fff;
	color: var(--navy);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: var(--transition);
}
.blog-post__related-btn .material-symbols-rounded { font-size: 20px; }
.blog-post__related-btn:hover:not(:disabled) { background: var(--blue); border-color: var(--blue); color: #fff; }
.blog-post__related-btn:disabled { opacity: .35; cursor: default; }

/* Carrusel: scroll horizontal nativo (swipe en touch, flechas en desktop),
   scrollbar oculta a propósito porque las flechas + snap ya comunican que
   hay más contenido — una scrollbar visible acá solo suma ruido visual. */
.blog-post__related-track {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: .5rem;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.blog-post__related-track::-webkit-scrollbar { display: none; }

.blog-post__related-item { flex: 0 0 260px; scroll-snap-align: start; }
.blog-post__related-item .blog-card { height: 100%; }
.blog-post__related-item .blog-card__body { padding: 1rem 1.1rem 1.2rem; gap: .4rem; }
.blog-post__related-item .blog-card__title { font-size: 1rem; }
.blog-post__related-item .blog-card__excerpt {
	font-size: .85rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.blog-post__related-item .blog-card__link { font-size: .85rem; }

@media (max-width: 767px) {
	.blog-post__share-box { flex-direction: column; align-items: flex-start; }
	.blog-post__related-nav { display: none; }
	.blog-post__related-item { flex-basis: 220px; }
}

/* ── Mobile blog ─────────────────────────────────────────────── */
@media (max-width: 991px) {
	.blog-layout,
	.blog-layout--single { grid-template-columns: minmax(0, 1fr); }
	/* Una sola columna: se vuelve a apilar en el orden real del DOM
	   (article, relacionados, sidebar) — se pisan los grid-column/row
	   explícitos que en desktop reubican la sidebar a la derecha. */
	.blog-layout--single > .blog-post,
	.blog-layout--single > .blog-post__related,
	.blog-layout--single > .blog-sidebar { grid-column: auto; grid-row: auto; }
	/* margin-top en 0: el gap de 3rem del grid (heredado de .blog-layout) ya
	   separa todas las secciones apiladas — sumarle el margin-top de desktop
	   duplicaría el espacio. */
	.blog-layout--single > .blog-post__related { margin-top: 0; }

	/* display:contents saca la caja de .blog-sidebar del flujo pero deja sus
	   widgets como items directos del grid de .blog-layout--single — así cada
	   widget puede ordenarse individualmente contra article/relacionados vía
	   "order", en vez de moverse todos juntos como bloque. Orden pedido:
	   compartir (adentro del article) → sumate al canal → buscar →
	   quizás te interese → entradas recientes. */
	.blog-layout--single > .blog-sidebar { display: contents; }
	.blog-layout--single > .blog-post { order: 1; }
	.blog-sidebar .blog-widget--cta { order: 2; }
	.blog-sidebar .blog-widget--search { order: 3; }
	.blog-layout--single > .blog-post__related { order: 4; }
	.blog-sidebar .blog-widget--recent { order: 5; }
	.blog-widget { width: 100%; }
}

@media (max-width: 640px) {
	.blog-grid { grid-template-columns: 1fr; }
	.blog-shell__inner { padding: 2rem 1.25rem 3.5rem; }
	.blog-post__content { padding: 1.5rem; }
	.blog-sidebar { flex-direction: column; }
}

/* ── Botón "volver arriba" — global, todas las páginas del blog ──── */
.back-to-top {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	width: 46px; height: 46px;
	border: none;
	border-radius: 50%;
	background: var(--navy);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	box-shadow: var(--shadow-lg);
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: var(--transition), opacity .3s ease, transform .3s ease, visibility .3s;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--blue); }
.back-to-top .material-symbols-rounded { font-size: 22px; }

@media (max-width: 640px) {
	.back-to-top { right: 1rem; bottom: 1rem; width: 42px; height: 42px; }
}