/* Biblioteca SINBIO: diseño editorial, intención de búsqueda y conversión. */
.blog { position:relative; overflow:hidden; padding:clamp(48px,7vw,94px) 0 clamp(72px,9vw,122px)!important; }
.blog::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 86% 0%,rgba(12,190,211,.18),transparent 27%); }
.blog .blog-shell { position:relative; max-width:1160px; gap:clamp(26px,4vw,48px)!important; }
.blog .blog-head { max-width:850px; padding:0!important; border:0!important; }
.blog .blog-head h1 { max-width:16ch; margin:12px 0 17px!important; font-size:clamp(2.3rem,5.1vw,4.65rem)!important; line-height:1!important; letter-spacing:-.052em; }
.blog .blog-head > p:not(.eyebrow) { max-width:66ch; font-size:clamp(1rem,1.4vw,1.15rem)!important; line-height:1.66!important; }
.blog-head-actions { display:flex; flex-wrap:wrap; gap:11px; margin-top:23px; }
.blog-head-actions a { display:inline-flex; align-items:center; min-height:45px; padding:0 18px; border-radius:999px; font-weight:800; text-decoration:none; }
.blog-primary-link { color:#fff!important; background:#0874cd; box-shadow:0 10px 24px rgba(0,93,180,.22); }
.blog-secondary-link { color:#0b4d76!important; border:1px solid rgba(2,123,178,.28); }
.blog-topics { display:flex; flex-wrap:wrap; gap:9px; padding:17px 0; border-top:1px solid rgba(11,133,181,.2); border-bottom:1px solid rgba(11,133,181,.2); }
.blog-topics a { padding:8px 13px; border:1px solid rgba(12,141,190,.24); border-radius:999px; color:inherit; font-size:.84rem; font-weight:800; text-decoration:none; transition:transform .2s ease,background .2s ease; }
.blog-topics a:hover { transform:translateY(-2px); background:rgba(47,207,213,.12); }
.blog-featured { overflow:hidden; border:1px solid rgba(11,134,184,.24); border-radius:19px; background:#052f4d; box-shadow:0 18px 42px rgba(4,46,75,.16); }
.blog-featured a { display:grid; grid-template-columns:minmax(0,1.06fr) minmax(290px,.94fr); min-height:340px; color:#effbff; text-decoration:none; }
.blog-featured img { width:100%; height:100%; min-height:340px; object-fit:cover; }
.blog-featured div { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:clamp(28px,4vw,52px); background:linear-gradient(135deg,#063a5d,#082d49 74%); }
.blog-featured span,.article-answer span { color:#69e1e5; font-size:.78rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.blog-featured h2 { max-width:15ch; margin:12px 0!important; color:#fff!important; font-size:clamp(1.7rem,3vw,2.7rem)!important; line-height:1.06!important; }
.blog-featured p { max-width:43ch; margin:0 0 20px!important; color:#c6e1ec!important; line-height:1.62; }
.blog-featured strong { color:#77e8e7; }
.blog-listing-head { display:flex; align-items:end; justify-content:space-between; gap:24px; margin:0 0 18px; }
.blog-listing-head h2 { max-width:23ch; margin:7px 0 0!important; font-size:clamp(1.65rem,3vw,2.65rem)!important; line-height:1.08!important; }
.blog-topic-section { margin-top:clamp(34px,5vw,58px); padding-top:clamp(21px,3vw,31px); border-top:1px solid rgba(10,128,177,.22); }
.blog-topic-section > header { display:flex; align-items:flex-start; gap:15px; margin:0 0 19px; }
.blog-topic-section > header > span { display:grid; flex:0 0 38px; width:38px; height:38px; place-items:center; border-radius:50%; color:#08779a; background:rgba(65,213,215,.16); font-size:.8rem; font-weight:900; }
.blog-topic-section .eyebrow { margin:0 0 4px!important; }
.blog-topic-section h3 { margin:0!important; font-size:clamp(1.35rem,2.3vw,1.9rem)!important; line-height:1.12!important; }
.blog-topic-section .posts { max-width:850px; }
body .blog .posts { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px!important; }
body .blog .post { display:grid!important; grid-template-columns:1fr; grid-template-rows:auto auto auto 1fr auto; gap:0; min-height:0; padding:0 0 22px!important; overflow:hidden; border:1px solid rgba(12,130,181,.21)!important; border-top:3px solid #23c2bd!important; border-radius:15px!important; text-decoration:none; }
body .blog .post:hover { transform:translateY(-4px); border-color:rgba(37,189,210,.65)!important; }
.post-media { grid-column:1!important; grid-row:auto!important; width:100%; height:clamp(150px,16vw,210px)!important; aspect-ratio:auto!important; margin:0 0 18px!important; border-radius:0!important; }
.post-media img { display:block!important; width:100%!important; height:100%!important; object-fit:cover!important; object-position:center 38%!important; }
body .blog .post > :not(.post-media) { grid-column:1!important; margin-inline:22px!important; }
body .blog .post > span { margin-bottom:9px!important; color:#078fa9!important; font-size:.76rem; font-weight:900!important; letter-spacing:.08em; text-transform:uppercase; }
body .blog .post h2 { max-width:23ch; margin:0 0 10px!important; font-size:clamp(1.22rem,2.2vw,1.58rem)!important; line-height:1.13!important; }
body .blog .post p { margin:0 0 15px!important; line-height:1.57!important; }
body .blog .post small { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:auto!important; font-size:.77rem; }
body .blog .post small b { font-weight:800; } body .blog .post small em { margin-left:auto; color:#0082b4; font-style:normal; font-weight:900; }
.article-wrap { padding:clamp(42px,6vw,80px) 0 clamp(66px,8vw,108px)!important; }
body .article-wrap .article { max-width:1080px; padding:clamp(26px,5vw,58px)!important; border-radius:19px!important; }
body .article-wrap .article h1 { max-width:19ch; margin:13px 0 15px!important; font-size:clamp(2.15rem,4.8vw,4.1rem)!important; }
.article-header { position:relative; padding:clamp(25px,4vw,42px); overflow:hidden; border:1px solid rgba(32,185,205,.2); border-radius:16px; background:linear-gradient(90deg,rgba(12,108,141,.18) 1px,transparent 1px),linear-gradient(rgba(12,108,141,.16) 1px,transparent 1px),linear-gradient(135deg,rgba(5,55,85,.95),rgba(6,34,56,.94)); background-size:48px 48px,48px 48px,auto; }
.article-header .back { margin-bottom:19px!important; }.article-header .eyebrow { margin-bottom:7px!important; }.article-header .dek { margin-bottom:0!important; }
.article-meta { display:flex; gap:8px; align-items:center; color:#53809a; font-size:.84rem; font-weight:750; }
.article-feature-image { max-width:900px; margin:clamp(24px,4vw,32px) auto clamp(31px,4vw,43px)!important; overflow:hidden; border:1px solid rgba(32,185,205,.28); border-radius:16px; background:linear-gradient(135deg,#062d49,#0a4263); box-shadow:0 20px 40px rgba(0,19,37,.22); }
.article-feature-image img { display:block!important; width:100%!important; height:clamp(220px,24vw,330px)!important; aspect-ratio:auto!important; object-fit:cover!important; object-position:center 42%!important; }
.article-feature-image figcaption { display:grid; grid-template-columns:8px minmax(0,1fr); column-gap:12px; align-items:center; padding:13px 17px 15px; background:linear-gradient(90deg,rgba(1,45,71,.98),rgba(5,89,116,.9)); }
.article-feature-image figcaption::before { content:""; grid-row:1 / span 2; width:8px; height:8px; border-radius:50%; background:#52e2dd; box-shadow:0 0 0 5px rgba(82,226,221,.12); }
.article-feature-image figcaption span { color:#6ee3e5; font-size:.68rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.article-feature-image figcaption strong { color:#eefcff; font-size:.9rem; line-height:1.35; }
.article-reading { display:grid; grid-template-columns:190px minmax(0,1fr); gap:clamp(28px,5vw,60px); }
.article-toc { position:sticky; top:105px; align-self:start; display:grid; gap:9px; padding:15px 0 15px 15px; border:1px solid rgba(47,207,213,.24); border-left:3px solid #44d5d4; border-radius:10px; background:rgba(4,44,70,.42); }
.article-toc strong { color:inherit; margin-bottom:2px; }.article-toc a { color:#19769b!important; font-size:.88rem; font-weight:750!important; text-decoration:none; }
.article-body { min-width:0; }.article-body h2 { margin-top:34px!important; }.article-body ul { padding-left:22px; }
.article-answer { margin:0 0 31px; padding:22px 23px; border:1px solid rgba(26,165,190,.28); border-radius:13px; background:linear-gradient(135deg,rgba(63,219,216,.12),rgba(16,110,178,.06)); }
.article-answer p { margin:8px 0 0!important; color:inherit!important; font-size:1.05rem; line-height:1.65!important; }
.article-cta { margin:40px 0; padding:25px; border-radius:14px; background:linear-gradient(135deg,#063b5e,#075779); }
.article-cta h2 { max-width:21ch; margin:8px 0!important; color:#fff!important; font-size:1.5rem!important; }.article-cta p:not(.eyebrow) { color:#cceaf3!important; }.article-cta .btn { margin-top:6px; }
.article-faq { margin-top:40px; padding-top:28px; border-top:1px solid rgba(16,131,182,.2); }.article-faq h2 { margin:8px 0 14px!important; }
.article-faq details { margin:9px 0; padding:0 15px; border:1px solid rgba(12,127,179,.2); border-radius:10px; }.article-faq summary { padding:15px 22px 15px 0; cursor:pointer; font-weight:850; }.article-faq details p { margin:0 0 15px!important; }
/* Modo claro: el artículo conserva bloques oscuros intencionales con tipografía de alto contraste. */
.article-header { color:#f5fcff; box-shadow:0 16px 34px rgba(4,45,70,.16); }
.article-header h1, body .article-wrap .article .article-header h1 { color:#fff!important; }
.article-header .back { color:#8aebef!important; border-color:rgba(126,230,235,.38); background:rgba(255,255,255,.09); }
.article-header .eyebrow { color:#72e2e4!important; }
.article-header .dek { color:#d6ebf3!important; }
.article-header .article-meta { color:#bdd9e5!important; }
html:not([data-theme="dark"]) .blog .blog-head > p:not(.eyebrow),html:not([data-theme="dark"]) .blog .post p { color:#294f67!important; }
html:not([data-theme="dark"]) .blog .post small b { color:#173f58!important; }
html:not([data-theme="dark"]) .article-reading .article-body > p,html:not([data-theme="dark"]) .article-reading .article-body li { color:#294f67!important; }
html:not([data-theme="dark"]) .article-reading .article-body h2,html:not([data-theme="dark"]) .article-toc strong,html:not([data-theme="dark"]) .article-faq summary { color:#082d4d!important; }
html:not([data-theme="dark"]) .article-toc { border-color:rgba(0,106,150,.26); background:#eef9fc; box-shadow:0 9px 22px rgba(14,64,96,.07); }
html:not([data-theme="dark"]) .article-toc a { color:#075f87!important; }
html:not([data-theme="dark"]) .article-answer { border-color:rgba(0,121,154,.25); background:linear-gradient(135deg,#e7fbfb,#eff8ff); }
html:not([data-theme="dark"]) .article-answer p { color:#214b63!important; }
html:not([data-theme="dark"]) .article-faq details { border-color:rgba(0,105,157,.2); background:#fbfeff; }
html:not([data-theme="dark"]) .article-faq details p { color:#294f67!important; }
html[data-theme="dark"] .blog-featured,html[data-theme="dark"] .article-cta { box-shadow:0 18px 42px rgba(0,0,0,.25); }
html[data-theme="dark"] .blog-topics a,html[data-theme="dark"] .article-toc a { color:#bfeaf5!important; } html[data-theme="dark"] .article-answer { background:linear-gradient(135deg,rgba(64,218,212,.12),rgba(9,74,120,.22)); }
@media(max-width:760px) { .blog .blog-head h1 { max-width:13ch; font-size:clamp(2.1rem,10.8vw,3.25rem)!important; }.blog-featured a { grid-template-columns:1fr; }.blog-featured img { min-height:0; aspect-ratio:16/9; }.blog-featured div { padding:26px 22px 29px; }.blog-featured h2 { max-width:18ch; }.blog-listing-head { display:block; }.blog-topic-section { margin-top:36px; padding-top:22px; }.blog-topic-section > header { gap:11px; }.blog-topic-section > header > span { flex-basis:32px; width:32px; height:32px; font-size:.72rem; } body .blog .posts { grid-template-columns:1fr; }.post-media { height:185px!important; }.article-feature-image { margin:22px auto 30px!important; border-radius:12px; }.article-feature-image img { height:210px!important; }.article-feature-image figcaption { padding:12px 14px 13px; }.article-header { padding:23px 19px; border-radius:13px; }.article-reading { grid-template-columns:1fr; gap:22px; }.article-toc { position:static; grid-template-columns:repeat(3,minmax(0,1fr); gap:8px; padding:0 0 14px; border-left:0; border-bottom:2px solid #44d5d4; }.article-toc strong { grid-column:1/-1; }.article-toc a { font-size:.78rem; }.article-cta { padding:22px; } }
@media(prefers-reduced-motion:reduce) { .blog-topics a,body .blog .post { transition:none!important; } }
@media(max-width:760px) { .article-toc { grid-template-columns:repeat(3,minmax(0,1fr))!important; } }