/* Complemento editorial. Base visual e navegação: ../styles.css. */
.article-hero { background: radial-gradient(ellipse at 90% 15%, rgba(100,50,255,.17), transparent 65%), var(--b900); color: var(--white); padding-block: clamp(2.5rem,6vw,5.5rem); }
.article-hero h1 { font-size: clamp(2rem,1.15rem + 3.7vw,4.25rem); line-height: 1.12; letter-spacing: -.04em; margin: 1.25rem 0; }
.article-hero .meta { color: var(--on-dark); }
.article-hero p { font-size: clamp(1rem,.9rem + .4vw,1.1875rem); color: rgba(255,255,255,.86); margin-bottom: 0; }
.article-hero .back { display: inline-flex; align-items: center; min-height: 48px; margin-bottom: 1.5rem; color: var(--white); font-size: .875rem; font-weight: 650; }
.article-hero .back:focus-visible { outline-color: var(--on-dark); }
.wrap { width: min(49rem,calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.content { padding-block: clamp(2.5rem,6vw,5rem); }
.content h2 { font-size: clamp(1.5rem,1.2rem + 1.2vw,2rem); margin: 2.5rem 0 1rem; }
.content h2:first-child { margin-top: 0; }
.content p, .content li { font-size: 1.0625rem; line-height: 1.85; color: var(--slate); }
.content ul, .content ol { padding-left: 1.4rem; }
.content li + li { margin-top: .5rem; }
.content pre { max-width: 100%; overflow-x: auto; padding: 1rem; background: var(--light); }
.content code { overflow-wrap: anywhere; }
.content pre code { overflow-wrap: normal; }
.content img { height: auto; }
.call { border-left: 4px solid var(--accent); padding: clamp(1rem,3vw,1.75rem); background: var(--light); margin-block: 2rem; }
.cta { margin-top: 3rem; padding: clamp(1.25rem,4vw,2rem); background: var(--b900); color: var(--white); }
.cta h2 { color: var(--white); margin-top: 0; }
.cta p { color: rgba(255,255,255,.86); }
.cta a { width: 100%; }
.cta :focus-visible { outline-color: var(--on-dark); }
@media(min-width:37.5rem) { .cta a { width: auto; } }
@media print {
 .article-hero { background: transparent; color: #000; padding: 0; }
 .article-hero h1 { color: #000; }
 .article-hero .back, .cta { display: none; }
 .article-hero p, .content p, .content li { color: #000; }
 .wrap { width: 100%; }
}