/* Blog: índice lateral pegajoso + CTA (05-10-2026). Generado por blog_toc_cta.py. */
.bl-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem}
.bl-grid>.prose{max-width:54rem;margin-inline:auto;width:100%}
.bl-side{min-width:0}
.prose h2[id],.prose h3[id]{scroll-margin-top:100px}
@media (prefers-reduced-motion:no-preference){html:has(.bl-grid){scroll-behavior:smooth}}

/* Índice */
.bl-toc{background:#fff;border:1px solid var(--line,#e4ebf3);border-left:4px solid var(--teal,#2fa4ad);border-radius:14px;padding:.85rem 1rem}
.bl-toc summary{cursor:pointer;font-size:.8rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-2,#155a86);list-style:none;display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:32px}
.bl-toc summary::-webkit-details-marker{display:none}
.bl-toc summary:after{content:"";width:.55rem;height:.55rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-right:.2rem;transition:transform .2s}
.bl-toc[open] summary:after{transform:rotate(-135deg)}
.bl-toc summary:focus-visible,.bl-toc a:focus-visible,.bl-side-cta a:focus-visible,.bcta a:focus-visible{outline:3px solid var(--blue,#1a6ea3);outline-offset:2px;border-radius:6px}
.bl-toc ol{list-style:none;margin:.5rem 0 0;padding:0}
.bl-toc ol ol{margin:.1rem 0 .3rem}
.bl-toc li{margin:0}
.bl-toc a{display:block;padding:.38rem .6rem;border-left:3px solid transparent;border-radius:0 8px 8px 0;color:#33425c;text-decoration:none;font-size:.92rem;line-height:1.35}
.bl-toc .bl-sub a{padding-left:1.3rem;font-size:.86rem}
.bl-toc a:hover{color:var(--blue-2,#155a86);background:#f2f7fc}
.bl-toc a[aria-current]{color:var(--blue-2,#155a86);font-weight:700;background:#eaf4fb;border-left-color:var(--teal,#2fa4ad)}

/* CTA lateral */
.bl-side-cta{display:none}
.bl-side-t{margin:0 0 .7rem;font-weight:700;color:var(--navy,#0a2a44);line-height:1.35}
.btn.btn-sm{padding:.6rem 1rem;font-size:.88rem}

/* CTA dentro del artículo */
.prose .bcta{margin:2.2rem 0;padding:1.4rem 1.5rem;border-radius:18px;background:linear-gradient(120deg,var(--navy,#0a2a44),var(--blue-2,#155a86));color:#fff;box-shadow:0 18px 40px -24px rgba(10,42,68,.6)}
.prose .bcta p{color:#e8f1f8;margin:0 0 .6rem}
.prose .bcta .bcta-t{color:#fff;font-size:1.2rem;font-weight:800;line-height:1.3}
.prose .bcta .bcta-b{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem;margin:.9rem 0 0}
.prose .bcta .btn{text-decoration:none}
.prose .bcta-sec{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.prose .bcta-fin{margin-top:3rem}

/* Escritorio: índice a la derecha, pegajoso */
@media (min-width:1024px){
 .bl-grid{grid-template-columns:minmax(0,1fr) 290px;gap:3rem;align-items:start}
 .bl-grid>.prose{grid-column:1;grid-row:1;max-width:none;margin:0}
 .bl-side{grid-column:2;grid-row:1;position:sticky;top:96px;max-height:calc(100vh - 112px);overflow:auto;overscroll-behavior:contain;padding:2px}
 .bl-toc summary{cursor:default}
 .bl-toc summary:after{display:none}
 .bl-side-cta{display:block;margin-top:1rem;padding:1rem 1.05rem;border-radius:14px;background:#fff7ef;border:1px solid #f3d9bf}
 .bl-sin-indice{grid-template-columns:minmax(0,1fr) 290px}
}

/* Portada del artículo con width/height en el HTML (sin salto de diseño): mantener proporción. */
.article-hero-img{height:auto;aspect-ratio:auto}

/* Video incrustado en artículos (05-10-2026). */
.prose figure video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:14px;background:#0a2040;box-shadow:var(--shadow)}

/* Índice del blog: título de tarjeta como h2 con el aspecto del antiguo h3. */
.post h2.post-t{font-size:1.02rem;margin-bottom:.5rem;line-height:1.35}

/* Regla del sitio: tarjetas de a 3 por fila (2 en tablet, 1 en celular) — 06-10-2026 */
.posts{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1000px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.posts{grid-template-columns:minmax(0,1fr)}}