/* RadProChile — CSS de ARTICULO del blog (base-rp-blog2)
 *
 * Las reglas del cuerpo de un articulo (.article-hero, .article-body,
 * .article-cta...). Estaban repetidas en cada post; se sacan aca para que el
 * navegador las baje UNA vez al pasar de un articulo a otro.
 *
 * El indice del blog (/blog) NO carga este archivo: no usa estas clases.
 *
 * NO EDITAR A MANO de forma aislada: cambia en todos los articulos.
 */
.wrap-md { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.header { position: fixed; top: 0; left: 0; right: 0; height: 60px; border-bottom: 1px solid #e2eaec; z-index: 100; display: flex; align-items: center; }
.article-hero { padding: 120px 0 40px; background: var(--brand-dark); }
.article-hero .label { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan); margin-bottom: 16px; }
.article-hero h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); color: #fff; line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; margin-bottom: 16px; }
.article-hero .meta { font-size: 0.8rem; color: rgba(255,255,255,0.5); }
.article-body { padding: 48px 0 64px; }
.article-body p { font-size: 1.02rem; line-height: 1.8; color: #374151; margin-bottom: 20px; }
.article-body h2 { font-size: 1.4rem; color: var(--brand); font-weight: 800; margin: 36px 0 16px; letter-spacing: -0.01em; }
.article-body h3 { font-size: 1.15rem; color: var(--brand); font-weight: 800; margin: 28px 0 12px; }
.article-body strong { color: var(--brand); }
.article-body .callout { background: #fff; border-left: 4px solid var(--cyan); border-radius: 8px; padding: 20px 24px; margin: 24px 0; box-shadow: 0 2px 12px rgba(0,70,82,0.06); }
.article-body .callout p { margin: 0; }
.article-body ul { margin: 0 0 20px 20px; }
.article-body li { font-size: 1.02rem; line-height: 1.7; color: #374151; margin-bottom: 8px; }
.article-cta { background: var(--brand); padding: 48px 0; text-align: center; }
.article-cta h2 { color: #fff; font-size: 1.5rem; font-weight: 800; margin-bottom: 12px; }
.article-cta p { color: rgba(255,255,255,0.6); font-size: 0.9rem; margin-bottom: 24px; }
.share-box { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
 padding: 22px 0 6px; border-top: 1px solid #e2eaec; margin-top: 34px; }
.share-box span { font-size: 0.8rem; color: var(--gray); font-weight: 600; }
.share-li { display: inline-flex; align-items: center; gap: 8px; background: var(--brand);
 color: #fff; font-size: 0.83rem; font-weight: 700; padding: 10px 16px; border-radius: 999px;
 text-decoration: none; transition: background 0.2s; }
.share-li:hover { background: var(--cyan); }
.share-li svg { width: 15px; height: 15px; fill: currentColor; }
.art-lead { background: var(--brand, #004652); padding: 46px 0; }
.art-lead h2 { color: #fff; font-size: clamp(1.25rem, 2.6vw, 1.7rem); margin: 0 0 10px; }
.art-lead p { color: rgba(255,255,255,.82); font-size: .95rem; line-height: 1.6; margin: 0 0 20px; max-width: 620px; }
.art-lead form { display: flex; flex-wrap: wrap; gap: 10px; max-width: 760px; }
.art-lead input { flex: 1 1 190px; padding: 13px 15px; border-radius: 9px; border: 1.5px solid rgba(255,255,255,.25);
 background: rgba(255,255,255,.97); color: #1a1a1a; font-size: .95rem; font-family: inherit; }
.art-lead input:focus { outline: 3px solid var(--cyan, #95f6fa); outline-offset: 1px; }
.art-lead button { flex: 1 1 200px; cursor: pointer; border: none; }
.art-lead-note { flex: 1 1 100%; color: rgba(255,255,255,.62); font-size: .78rem; margin: 4px 0 0; }
@media (max-width: 560px) { .art-lead { padding: 34px 0; } .art-lead input, .art-lead button { flex: 1 1 100%; } }
.btn-brand { display: inline-block; background: var(--brand); color: #fff; font-weight: 700; font-size: 0.9rem; padding: 14px 28px; border-radius: 8px; border: none; cursor: pointer; transition: background 0.18s; }
.btn-brand:hover { background: var(--brand-mid); }