/*!
 * ASOFRIO — Estilos específicos del artículo individual (single.php)
 * Cargado únicamente al ver una entrada (ver functions.php).
 */

/* ============ Hero: migas de pan y meta del artículo ============ */
.hero-blog-crumbs{
	display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap;
	font-size:13px; color:var(--text-secondary); margin-bottom:18px;
}
.hero-blog-crumbs a{ font-size:13px; font-weight:600; color:var(--text-secondary); text-decoration:none; }
.hero-blog-crumbs a:hover{ color:var(--action); }
.hero-blog-crumbs .material-symbols-outlined{ font-size:14px; }
.hero-blog-meta{
	display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
	font-size:13px; color:var(--text-secondary); margin-top:18px; font-weight:600;
}

/* ============ Artículo: imagen destacada y tabla de contenidos ============ */
.article-featured-img{ border-radius:var(--r-lg); overflow:hidden; margin-bottom:32px; box-shadow:0 1px 3px rgba(11,31,77,.06); }
.article-featured-img img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.article-toc{ background:var(--lavender-bg); border-radius:var(--r-md); padding:22px 24px; margin-bottom:36px; }
.article-toc h4{ font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--brand); margin-bottom:12px; }
.article-toc ol{ list-style:none; display:flex; flex-direction:column; gap:9px; counter-reset:toc; }
.article-toc > ol > li{ counter-increment:toc; }
.article-toc > ol > li > a::before{ content:counter(toc) ". "; font-weight:700; color:var(--action); }
.article-toc a{ font-size:14px; font-weight:600; color:var(--text); text-decoration:none; }
.article-toc a:hover{ color:var(--action); }
.article-toc ol ol{ list-style:none; margin:9px 0 0 22px; display:flex; flex-direction:column; gap:7px; }
.article-toc ol ol a{ font-weight:500; font-size:13.5px; color:var(--text-secondary); }
.article-toc ol ol a::before{ content:'– '; color:var(--text-secondary); font-weight:400; }

/* ============ Cuerpo del artículo ============ */
.article-body{ max-width:720px; margin:0 auto; padding-top:0; }
.article-body p{ color:var(--text); margin-bottom:18px; font-size:16px; line-height:1.75; }
.article-body h3{ margin:32px 0 14px; }
.article-body blockquote,
.pullquote{
	border-left:3px solid var(--action); padding:6px 0 6px 20px; margin:28px 0;
	font-size:19px; font-weight:600; color:var(--text); font-style:normal;
}