/* Seotronix — Blog (index + article) */
.blog-hero { background: var(--navy); color: var(--white); position: relative; overflow: hidden; }
.blog-hero::before { content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(232,35,74,.18) 1.1px, transparent 1.2px); background-size:34px 34px; opacity:.5; }
.blog-hero .wrap { position:relative; z-index:1; padding: clamp(60px,10vh,110px) 0 clamp(56px,8vh,90px); max-width:760px; }
.blog-hero h1 { font-size: clamp(38px,6vw,64px); font-weight:800; letter-spacing:-1.5px; margin-bottom:18px; }
.blog-hero p { font-size: clamp(17px,2vw,20px); color: rgba(245,247,250,.78); line-height:1.55; max-width:560px; }

.cat-bar { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.cat-chip { font-size:14px; font-weight:700; padding:9px 18px; border-radius:30px; border:1.5px solid rgba(13,27,53,.14); color:var(--navy); background:#fff; cursor:pointer; transition:.18s; }
.cat-chip:hover, .cat-chip.active { background:var(--navy); border-color:var(--navy); color:#fff; }

.post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:44px; }
@media (max-width:960px){ .post-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .post-grid { grid-template-columns:1fr; } }
.post-card { display:flex; flex-direction:column; background:#fff; border:1px solid rgba(13,27,53,.09); border-radius:18px; overflow:hidden; transition:.22s; }
.post-card:hover { transform:translateY(-4px); box-shadow:0 22px 50px rgba(13,27,53,.12); border-color:rgba(232,35,74,.3); }
.post-card .thumb { aspect-ratio:16/10; background:var(--gray); overflow:hidden; }
.post-card .thumb img { width:100%; height:100%; object-fit:cover; transition:.3s; }
.post-card:hover .thumb img { transform:scale(1.04); }
.post-card .pc-body { padding:22px 24px 26px; display:flex; flex-direction:column; flex:1; }
.post-card .pc-cat { font-size:12px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--red); margin-bottom:10px; }
.post-card h3 { font-size:18.5px; font-weight:800; color:var(--navy); line-height:1.25; letter-spacing:-.3px; margin-bottom:10px; }
.post-card .excerpt { font-size:14px; color:var(--text-muted); line-height:1.55; flex:1; }
.post-card .pc-meta { display:flex; align-items:center; gap:11px; margin-top:20px; padding-top:18px; border-top:1px solid rgba(13,27,53,.08); }
.post-card .pc-meta img { width:38px; height:38px; border-radius:50%; object-fit:cover; }
.post-card .pc-meta .au { font-size:13px; font-weight:800; color:var(--navy); }
.post-card .pc-meta .dt { font-size:12px; color:var(--text-muted); }

.post-card.feat { grid-column:1 / -1; flex-direction:row; }
@media (max-width:760px){ .post-card.feat { flex-direction:column; } }
.post-card.feat .thumb { flex:0 0 46%; aspect-ratio:auto; }
@media (max-width:760px){ .post-card.feat .thumb { flex:none; aspect-ratio:16/10; } }
.post-card.feat .pc-body { padding:clamp(28px,4vw,44px); justify-content:center; }
.post-card.feat h3 { font-size:clamp(22px,3vw,32px); }
.post-card.feat .excerpt { font-size:15.5px; }

/* ---------- ARTICLE ---------- */
.article-hero { background:var(--navy); color:#fff; position:relative; overflow:hidden; }
.article-hero::before { content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(232,35,74,.16) 1.1px, transparent 1.2px); background-size:34px 34px; opacity:.45; }
.article-hero .wrap { position:relative; z-index:1; padding:clamp(48px,7vh,84px) 0; max-width:820px; }
.article-hero .crumbs { font-size:13px; color:rgba(245,247,250,.6); margin-bottom:22px; display:flex; gap:8px; flex-wrap:wrap; }
.article-hero .crumbs a { color:rgba(245,247,250,.8); }
.article-hero .crumbs a:hover { color:#fff; }
.article-hero .a-cat { display:inline-block; font-size:12px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:#fff; background:var(--red); padding:6px 14px; border-radius:20px; margin-bottom:20px; }
.article-hero h1 { font-size:clamp(30px,4.6vw,50px); font-weight:800; letter-spacing:-1.2px; line-height:1.1; margin-bottom:26px; text-wrap:balance; }
.article-hero .byline { display:flex; align-items:center; gap:13px; }
.article-hero .byline img { width:48px; height:48px; border-radius:50%; }
.article-hero .byline .nm { font-weight:800; font-size:15px; }
.article-hero .byline .meta { font-size:13px; color:rgba(245,247,250,.6); }

.article-wrap { display:grid; grid-template-columns:260px 1fr; gap:clamp(32px,5vw,64px); align-items:start; }
@media (max-width:900px){ .article-wrap { grid-template-columns:1fr; } }
/* posts sin tabla de contenido: el body no debe quedar atrapado en la columna de 260px */
.article-wrap:has(> .article-body:only-child) { display:block; }
.article-wrap:has(> .article-body:only-child) > .article-body { margin-left:auto; margin-right:auto; }
.toc { position:sticky; top:100px; background:var(--gray); border-radius:16px; padding:24px; }
@media (max-width:900px){ .toc { position:static; } }
.toc h4 { font-size:12px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); margin-bottom:14px; }
.toc ol { list-style:none; counter-reset:toc; display:flex; flex-direction:column; gap:10px; }
.toc li { counter-increment:toc; }
.toc a { display:flex; gap:9px; font-size:14px; color:var(--navy); font-weight:600; line-height:1.35; }
.toc a::before { content:counter(toc); color:var(--red); font-weight:800; flex:0 0 auto; }
.toc a:hover { color:var(--red); }

.article-body { max-width:720px; }
.article-body > .lead { font-size:19px; line-height:1.6; color:var(--navy); font-weight:600; margin-bottom:30px; }
.article-body h2 { font-size:clamp(23px,3vw,30px); font-weight:800; color:var(--navy); letter-spacing:-.5px; margin:40px 0 16px; scroll-margin-top:100px; }
.article-body h3 { font-size:20px; font-weight:800; color:var(--navy); margin:28px 0 12px; }
.article-body p { font-size:16.5px; line-height:1.75; color:var(--text-dark); margin-bottom:18px; }
.article-body ul, .article-body ol { margin:0 0 18px 4px; padding-left:24px; color:var(--text-dark); font-size:16.5px; line-height:1.7; }
.article-body li { margin-bottom:8px; }
.article-body img { border-radius:16px; margin:26px 0; box-shadow:0 18px 44px rgba(13,27,53,.12); }
.article-body a { color:var(--red); font-weight:600; border-bottom:1px solid rgba(232,35,74,.35); }
.article-body strong { color:var(--navy); }
.article-body .faq-block { background:var(--gray); border-radius:16px; padding:28px 30px; margin-top:24px; }
.article-body .faq-block p { margin-bottom:14px; }
.article-body .faq-block p:last-child { margin-bottom:0; }
.article-cta { background:var(--navy); color:#fff; border-radius:20px; padding:clamp(30px,5vw,48px); text-align:center; margin-top:48px; }
.article-cta h3 { font-size:clamp(22px,3vw,30px); font-weight:800; margin-bottom:12px; }
.article-cta p { color:rgba(245,247,250,.75); font-size:16px; margin-bottom:24px; max-width:480px; margin-left:auto; margin-right:auto; }
.article-body .article-cta h3 { color:#fff; }
.article-body .article-cta .btn-red { color:#fff; border-bottom:none; }
.article-body .article-cta .btn-red:hover { color:#fff; }