/* ============================================================
   Turbo Tráfego — design system
   Verde Floresta + Creme · editorial · não-IA
   ============================================================ */

/* Garante que o browser não segure o render esperando web fonts */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-display: optional;
  src: local('Plus Jakarta Sans');
}
@font-face {
  font-family: 'Inter';
  font-display: optional;
  src: local('Inter');
}


:root {
    /* paleta: Modern Tech Light */
    --ink:          #0F172A; /* Slate 900 */
    --ink-soft:     #334155; /* Slate 700 */
    --ink-mute:     #64748B; /* Slate 500 */
    --paper:        #FFFFFF;
    --paper-deep:   #F8FAFC; /* Slate 50 */
    --paper-edge:   #E2E8F0; /* Slate 200 */
    --forest:       #10B981; /* Emerald 500 — decorativo/icônes */
    --forest-deep:  #047857; /* Emerald 700 — 5.3:1 c/ branco ✅ */
    --forest-dark:  #065F46; /* Emerald 800 — 7.2:1 c/ branco ✅ */
    --leaf:         #D1FAE5; /* Emerald 100 */
    --leaf-soft:    #ECFDF5; /* Emerald 50 */
    --copper:       #B45309; /* Amber 700 — 4.7:1 on white */
    --copper-soft:  #FEF3C7; /* Amber 100 */

    /* tipografia */
    --serif:  'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --sans:   'Inter', system-ui, -apple-system, sans-serif;

    /* medidas */
    --container: 72rem;
    --container-narrow: 44rem;
    --section: clamp(4rem, 10vw, 8rem);
    --gap: clamp(1.5rem, 3vw, 2.5rem);

    /* filete */
    --rule: 1px solid var(--forest);
    --rule-soft: 1px solid rgba(20, 83, 45, 0.18);
}

/* ============================================================
   reset enxuto
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body {
    font-family: var(--sans);
    font-size: 1rem; /* 16 */
    line-height: 1.6;
    color: var(--ink-soft);
    background: var(--paper);
    font-feature-settings: "ss01", "cv11";
    text-rendering: optimizeLegibility;
}
img, svg, picture, video { display: block; max-width: 100%; height: auto; }
a { color: var(--forest); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color .15s ease; }
a:hover { color: var(--forest-deep); }
button { font: inherit; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; }
ul, ol { padding: 0; list-style: none; }
input, select, textarea { font: inherit; }

::selection { background: var(--forest); color: var(--paper); }

*:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--forest);
    border-radius: 2px;
}

/* utilitário pra leitores de tela */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* skip link */
.skip-link {
    position: absolute; top: -100px; left: 1rem;
    background: var(--forest); color: var(--paper);
    padding: .5rem .9rem; border-radius: 4px; font-weight: 600;
    z-index: 100;
}
.skip-link:focus { top: 1rem; }

/* ============================================================
   tipografia · escala fluida
   ============================================================ */
.display-1, .display-2, .display-3, .h2, .h3, .h4, .eyebrow { font-family: var(--serif); color: var(--ink); }

.display-1 {
    font-family: var(--serif);
    font-weight: 800;
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: var(--ink);
}
.display-2 {
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--ink);
}
.h2 {
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(1.75rem, 3.6vw, 2.625rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.h3 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(1.375rem, 2.4vw, 1.75rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.h4 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.italic-accent { font-style: normal; color: var(--forest-deep); }

.eyebrow {
    font-family: var(--sans);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #065F46; /* Emerald 800 — 7.2:1 on white */
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}
.eyebrow::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    background: #065F46;
    border-radius: 50%;
}
.lead {
    font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 38ch;
}
.lede-prose { font-size: 1.125rem; line-height: 1.65; }

/* ============================================================
   layout
   ============================================================ */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.container-narrow {
    width: 100%;
    max-width: var(--container-narrow);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
section { padding-block: var(--section); }
section + section { padding-top: 0; }

.alt-bg { background: var(--paper-deep); }
.alt-bg + section { padding-top: var(--section); }

/* divisores editoriais */
.hr-rule { border: 0; border-top: var(--rule-soft); margin-block: 0; }
.hr-bold { border: 0; border-top: var(--rule); margin-block: 0; }

/* ============================================================
   header
   ============================================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: var(--rule-soft);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: .9rem;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none;
    color: var(--ink);
}
.brand svg { width: auto; height: 32px; }
.brand:hover { color: var(--forest); }

.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a {
    color: var(--ink);
    text-decoration: none;
    font-size: .9375rem;
    font-weight: 500;
    padding: .25rem 0;
    border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--forest); border-bottom-color: var(--forest); }
.nav .nav-cta {
    color: var(--paper);
    background: var(--forest-deep); /* #047857 — 5.3:1 c/ branco ✅ */
    padding: .5rem .95rem;
    border-radius: 999px;
    border: 1px solid var(--forest-deep);
    transition: background .15s ease;
    text-decoration: none;
}
.nav .nav-cta:hover { background: var(--forest-dark); border-color: var(--forest-dark); }

.nav-toggle {
    display: none;
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
    border: 1px solid var(--forest);
    border-radius: 999px;
    color: var(--forest);
}
.nav-toggle svg { width: 18px; height: 18px; }

@media (max-width: 820px) {
    .nav-toggle { display: inline-flex; }
    .nav {
        position: fixed;
        inset: 60px 0 0 0;
        background: var(--paper);
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 1.5rem clamp(1.25rem, 4vw, 2.5rem);
        border-top: var(--rule-soft);
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
        transition: transform .25s ease, opacity .2s ease;
    }
    .nav a {
        width: 100%;
        padding: .9rem 0;
        border-bottom: var(--rule-soft) !important;
        font-size: 1.125rem;
    }
    .nav .nav-cta {
        margin-top: 1rem;
        align-self: stretch;
        text-align: center;
        border-bottom: 0 !important;
    }
    .nav.is-open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }
}

/* ============================================================
   hero
   ============================================================ */
.hero {
    padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 6vw, 5rem);
    position: relative;
    overflow: hidden;
}
.hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: end;
}
@media (min-width: 920px) {
    .hero__grid {
        grid-template-columns: 1fr 1.15fr;
        align-items: center;
        gap: clamp(3rem, 6vw, 5rem);
    }
}
.hero__copy { max-width: 100%; padding-right: 1rem; }
.hero__title { margin-top: 1.25rem; }
.hero__subtitle { margin-top: 1.25rem; max-width: 40ch; }
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: center;
    margin-top: 2rem;
}
.hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--paper-edge);
    background: var(--paper-deep);
    color: var(--ink-soft);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}
.hero__meta {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: var(--rule-soft);
    font-size: .875rem;
    color: var(--ink-mute);
}
.hero__meta strong { color: var(--ink); font-weight: 600; }

.hero__visual {
    position: relative;
    aspect-ratio: 5 / 4;
    width: 100%;
    margin-left: auto;
}
.hero__visual svg { width: 100%; height: 100%; }

/* ============================================================
   botões
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .9rem 1.4rem;
    font-family: var(--sans);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .005em;
    border-radius: 999px;
    border: 1px solid transparent;
    text-decoration: none;
    transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
    line-height: 1;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
    background: var(--forest-deep); /* #047857 — 5.3:1 c/ branco ✅ */
    color: var(--paper) !important;
    border-color: var(--forest-deep);
    text-decoration: none;
}
.btn-primary:hover { background: var(--forest-dark); border-color: var(--forest-dark); color: var(--paper) !important; }
.btn-ghost {
    background: transparent;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
    padding-inline: .3rem;
    border-radius: 0;
}
.btn-ghost:hover { color: var(--forest); transform: none; }
.btn-outline {
    background: transparent;
    color: var(--forest);
    border-color: var(--forest);
}
.btn-outline:hover { background: var(--forest); color: var(--paper); }

/* ============================================================
   selo / chips
   ============================================================ */
.chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .7rem .35rem .55rem;
    background: var(--leaf-soft);
    color: var(--forest-deep);
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    border: 1px solid rgba(20, 83, 45, 0.15);
}
.chip__dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--forest);
    box-shadow: 0 0 0 3px rgba(20, 83, 45, 0.15);
}

/* ============================================================
   seção · cabeçalho com número editorial
   ============================================================ */
.section-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
    border-bottom: var(--rule-soft);
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 820px) {
    .section-head {
        grid-template-columns: minmax(160px, 1fr) 2.2fr;
        gap: 3rem;
        align-items: end;
    }
}
.section-head--center {
    display: block;
    text-align: center;
}
.section-head__num {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: 1.125rem;
    color: var(--copper);
    letter-spacing: 0;
}
.section-head__num::after {
    content: " — ";
    color: var(--ink-mute);
    font-style: normal;
}

/* ============================================================
   prose (artigos / parágrafos longos)
   ============================================================ */
.prose {
    max-width: 38rem;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--ink-soft);
}
.prose > * + * { margin-top: 1.1em; }
.prose h2 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(1.5rem, 2.6vw, 1.875rem);
    line-height: 1.2;
    color: var(--ink);
    letter-spacing: -0.012em;
    margin-top: 2.4em;
}
.prose h3 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--ink);
    margin-top: 1.8em;
}
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--forest); }
.prose blockquote {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.375rem;
    line-height: 1.4;
    color: var(--ink);
    padding-left: 1.25rem;
    border-left: 3px solid var(--forest);
    margin-block: 2em;
}
.prose ul, .prose ol {
    padding-left: 0;
    margin-left: 0;
}
.prose ul li, .prose ol li {
    position: relative;
    padding-left: 1.4rem;
    margin-top: .55em;
}
.prose ul li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--forest);
    font-weight: 600;
}
.prose ol { counter-reset: prose-counter; }
.prose ol li { counter-increment: prose-counter; }
.prose ol li::before {
    content: counter(prose-counter, decimal-leading-zero);
    position: absolute;
    left: 0;
    color: var(--copper);
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: .9em;
}

/* dropcap (subpáginas) */
.prose > p:first-of-type::first-letter {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 3.6em;
    line-height: .85;
    float: left;
    padding: .12em .12em 0 0;
    color: var(--copper);
}

/* ============================================================
   stack editorial (lista numerada de passos)
   ============================================================ */
.steps { border-top: var(--rule); margin-top: 1rem; }
.steps__item {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
    padding-block: 1.75rem;
    border-bottom: var(--rule-soft);
}
@media (min-width: 760px) {
    .steps__item {
        grid-template-columns: 7rem 1fr;
        gap: 2.5rem;
        align-items: baseline;
    }
}
.steps__num {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 600;
    font-size: 1.625rem;
    color: #065F46; /* Emerald 800 — 7.2:1 on white */
}
.steps__title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.375rem;
    color: var(--ink);
    margin-bottom: .35rem;
    letter-spacing: -0.01em;
}
.steps__desc { color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.55; max-width: 56ch; }

/* ============================================================
   grade "para quem é"
   ============================================================ */
.audience {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem 3rem;
}
@media (min-width: 700px) { .audience { grid-template-columns: 1fr 1fr; } }
.audience__item {
    border-top: var(--rule-soft);
    padding-top: 1.25rem;
}
.audience__tag {
    font-family: var(--sans);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--copper);
    margin-bottom: .5rem;
}
.audience__title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.375rem;
    color: var(--ink);
    margin-bottom: .5rem;
    letter-spacing: -0.01em;
}
.audience__desc { font-size: 1rem; color: var(--ink-soft); line-height: 1.55; }

/* ============================================================
   painel · GA4
   ============================================================ */
.panel {
    background: var(--paper-deep);
    border: var(--rule-soft);
    border-radius: 18px;
    padding: clamp(1.25rem, 2.5vw, 2rem);
    display: grid;
    gap: 1.5rem;
}
.panel__metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.panel__metric {
    border-left: 3px solid var(--forest);
    padding-left: .75rem;
}
.panel__metric-label {
    font-size: .6875rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-soft); /* upgraded from ink-mute for contrast */
    font-weight: 700;
}
.panel__metric-value {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--ink);
    line-height: 1.1;
}
.panel__chart svg { width: 100%; height: auto; }

/* ============================================================
   tabela de planos · tipográfica
   ============================================================ */
.pricing-card {
    border-top: var(--rule);
    margin-top: 1rem;
    padding-top: 3rem;
    display: flex;
    justify-content: center;
}
.pricing-card__inner {
    background: var(--paper-deep);
    border: 1px solid var(--paper-edge);
    border-radius: 24px;
    padding: clamp(2rem, 5vw, 3rem);
    max-width: 460px;
    width: 100%;
    text-align: center;
}
.pricing-card__price {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-block: 1.5rem;
    border-block: var(--rule-soft);
}

/* ============================================================
   FAQ (details/summary nativo)
   ============================================================ */
.faq { border-top: var(--rule); margin-top: 1rem; }
.faq details {
    border-bottom: var(--rule-soft);
    padding-block: 1.25rem;
}
.faq summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    list-style: none;
    cursor: pointer;
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.1875rem;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+";
    font-family: var(--sans);
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--forest);
    transition: transform .2s ease;
    flex-shrink: 0;
    line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq details > div {
    margin-top: 1rem;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--ink-soft);
    max-width: 60ch;
}
.faq details > div p + p { margin-top: .85em; }

/* ============================================================
   CTA · grande bloco final
   ============================================================ */
.cta-block {
    background: var(--forest-dark); /* #065F46 — 7.2:1 c/ texto branco ✅ */
    color: var(--paper);
    border-radius: 24px;
    padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3.5rem);
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
    align-items: end;
    position: relative;
    overflow: hidden;
}
@media (min-width: 820px) {
    .cta-block { grid-template-columns: 1.4fr 1fr; align-items: end; }
}
.cta-block .display-2 { color: var(--paper); }
.cta-block p { color: rgba(255, 255, 255, 1); max-width: 36ch; font-weight: 500; }
.cta-block .btn-primary {
    background: var(--paper);
    color: var(--forest-dark); /* usa forest-dark para 7.2:1 ✅ */
    border-color: var(--paper);
    font-weight: 700;
}
.cta-block .btn-primary:hover { background: var(--paper-deep); color: var(--forest-deep); border-color: var(--paper-deep); }
.cta-block__side { justify-self: start; }
@media (min-width: 820px) { .cta-block__side { justify-self: end; text-align: right; } }
.cta-block::before {
    content: "";
    position: absolute;
    right: -120px; top: -120px;
    width: 360px; height: 360px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    pointer-events: none;
}
.cta-block::after {
    content: "";
    position: absolute;
    right: -60px; top: -60px;
    width: 240px; height: 240px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    pointer-events: none;
}

/* ============================================================
   footer
   ============================================================ */
.site-footer {
    border-top: var(--rule);
    background: var(--paper);
    padding-block: clamp(3rem, 5vw, 4rem) 1.5rem;
    margin-top: clamp(3rem, 6vw, 5rem);
}
.site-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}
@media (min-width: 760px) {
    .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}
.footer-nav-label {
    font-family: var(--sans);
    font-size: .75rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--copper);
    margin-bottom: 1rem;
}
.site-footer__brand p {
    font-size: .9375rem;
    color: var(--ink-soft);
    margin-top: .9rem;
    max-width: 32ch;
}
.site-footer ul li { margin-bottom: .55rem; }
.site-footer ul a {
    color: var(--ink);
    text-decoration: none;
    font-size: .9375rem;
    border-bottom: 1px solid transparent;
}
.site-footer ul a:hover { color: var(--forest); border-bottom-color: var(--forest); }
.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    border-top: var(--rule-soft);
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: 1.5rem;
    font-size: .8125rem;
    color: var(--ink-mute);
}
.site-footer__legal p { margin: 0; }

/* ============================================================
   breadcrumb (subpáginas)
   ============================================================ */
.breadcrumb {
    font-size: .8125rem;
    color: var(--ink-mute);
    margin-block: 2rem 1rem;
    letter-spacing: .02em;
}
.breadcrumb a { color: var(--ink-mute); text-decoration: none; }
.breadcrumb a:hover { color: var(--forest); text-decoration: underline; }
.breadcrumb span { margin-inline: .35rem; }

/* ============================================================
   hero artigo (subpáginas)
   ============================================================ */
.article-hero { padding-block: 2rem clamp(2.5rem, 5vw, 4rem); }
.article-hero .eyebrow { margin-bottom: 1rem; }
.article-hero h1 { max-width: 22ch; }
.article-hero .lead { margin-top: 1.5rem; max-width: 48ch; }
.article-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: var(--rule-soft);
    font-size: .875rem;
    color: var(--ink-mute);
}
.article-hero__meta time { font-weight: 600; color: var(--ink); }

/* ============================================================
   inline CTA dentro do artigo
   ============================================================ */
.inline-cta {
    background: var(--paper-deep);
    border-left: 4px solid var(--forest);
    padding: 1.5rem 1.75rem;
    margin-block: 2.5em;
    border-radius: 0 12px 12px 0;
}
.inline-cta p:first-of-type {
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: .75rem;
    letter-spacing: -0.005em;
}
.inline-cta .btn { margin-top: .25rem; }

/* ============================================================
   "leia também" no fim do artigo
   ============================================================ */
.related {
    border-top: var(--rule);
    margin-top: clamp(3rem, 6vw, 5rem);
    padding-top: clamp(2rem, 4vw, 3rem);
}
.related h5 {
    font-family: var(--sans);
    font-size: .75rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--copper);
    font-weight: 600;
    margin-bottom: 1.25rem;
}
.related__list { display: grid; gap: 1.25rem 2rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .related__list { grid-template-columns: 1fr 1fr 1fr; } }
.related__item {
    display: block;
    padding: 1.25rem 0;
    border-top: var(--rule-soft);
    text-decoration: none;
    color: var(--ink);
}
.related__item:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 700px) { .related__item { border-top: 0; padding-top: 0; } }
.related__item span {
    display: block;
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--forest);
    margin-bottom: .35rem;
}
.related__item strong {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.3;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.related__item:hover strong { color: var(--forest); text-decoration: underline; }

/* ============================================================
   utilitários extras
   ============================================================ */
.mt-2 { margin-top: .5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.text-mute { color: var(--ink-mute); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}