/* ==========================================================================
   Smarter.IA — Editorial Navy
   Sistema de CSS do redesign (ago/2026).

   Fonte da verdade: docs/design-reference/navy-2026/README.md
   O protótipo .dc.html é referência VISUAL — seus inline styles não foram copiados.

   ÍNDICE
     a) tokens ................ cores, tipografia, forma, movimento
     b) base .................. reset, body, links, .container, .section
     c) tipografia ............ h1-h4, lead, intro, eyebrow, meta, wordmark
     d) componentes ........... nav, hero, botões, badge, cabeçalho de seção,
                                card, listas, régua de estatísticas, passos,
                                linha de programa, founder, FAQ, CTA navy,
                                footer, whatsapp-float
     e) componentes de artigo . classes que os 21 artigos JÁ tinham no markup
     f) páginas ............... grade de artigos, institucionais, comparativo,
                                formulário, página de sucesso
     g) RESPONSIVO ............ TODOS os @media, no fim do arquivo

   ⚠️ REGRA DE ORDENAÇÃO — a única que este arquivo exige de quem o edita:
   NENHUMA regra depois da seção (g). Media query não acrescenta
   especificidade, então uma declaração escrita abaixo de um @media vence o que
   aquele @media dizia — e o componente fica com layout de desktop no celular.
   Isso mordeu três vezes durante a obra (variantes de grade, .contato-grid, e a
   própria correção do .contato-grid), e nas três a captura de tela parecia
   plausível: só a medição denunciou. Componente novo entra em (d)/(e)/(f); a
   regra responsiva dele entra em (g).

   Princípios não-negociáveis do handoff:
     · fundo papel, nunca branco puro no body
     · profundidade por hairline de 1px e contraste de fundo — ZERO box-shadow
     · radius 2px em botões, 0 no resto (única exceção: o dot do badge, 50%)
     · azul é acento único — sem teal, sem gradiente
     · sem ícones decorativos; marcador de lista é um "—" em blue
   ========================================================================== */

/* ==========================================================================
   a) TOKENS
   ========================================================================== */
:root {
    /* --- cor: superfícies ------------------------------------------------ */
    --paper:          #F7F6F2;  /* fundo padrão de todas as páginas */
    --paper-alt:      #EFEEE7;  /* seções alternadas (ex.: Metodologia) */
    --surface:        #FFFFFF;  /* fundo de cards */

    /* --- cor: tinta ------------------------------------------------------ */
    --navy:           #0E2240;  /* texto principal, títulos, fundos escuros */
    --navy-border:    #23395B;  /* divisores sobre fundo navy */

    /* --- cor: acento (único) --------------------------------------------- */
    --blue:           #1D4ED8;  /* links, botão primário, eyebrows, marcadores */
    --blue-hover:     #16389B;  /* hover sobre papel */
    /* O handoff especifica #3B82F6 aqui. Reprovado na varredura de contraste:
       texto --paper sobre #3B82F6 dá 3.4:1, abaixo do mínimo de 4.5:1 da WCAG AA
       para texto normal (o botão é 16px/600 — não se qualifica como texto grande).
       #2A66E8 dá 4.66:1 e continua CLAREANDO sobre o --blue base (6.2:1), que é a
       intenção do handoff para hover sobre fundo navy. Desvio registrado. */
    --blue-bright:    #2A66E8;  /* hover sobre fundo navy — era #3B82F6 */

    /* --- cor: texto ------------------------------------------------------ */
    --text-secondary: #4E5560;  /* parágrafos */
    --text-tertiary:  #3B4250;  /* itens de lista, nav */
    /* O handoff especifica #767D88. Reprovado na varredura de contraste: dá
       3.84:1 sobre --paper e 3.57:1 sobre --paper-alt, abaixo dos 4.5:1 da WCAG
       AA. E este token pinta justamente o texto de 12-13px do site — labels da
       régua, metas de programa, eyebrows, meta de artigo. #5F6672 dá 5.35 e
       4.97. Sobre fundo navy NÃO se usa este token: use --on-navy-soft. */
    --text-muted:     #5F6672;  /* labels, metas, legendas — era #767D88 */

    /* --- cor: linhas ------------------------------------------------------ */
    --hairline:       #E2E0D6;  /* bordas e divisores sobre papel */
    --hairline-soft:  #EAE8DE;  /* divisores internos de card */
    --numeral-ghost:  #D4D2C6;  /* numerais decorativos e borda de botão outline */

    /* --- cor: sobre fundo navy ------------------------------------------- */
    --on-navy:        #F7F6F2;  /* títulos e texto forte */
    --on-navy-soft:   #9AA3B0;  /* parágrafos */
    --on-navy-link:   #CBD2DB;  /* links do footer (hover: --on-navy) */

    /* --- tipografia: famílias -------------------------------------------- */
    /* O <link> do Google Fonts vive no HTML, não aqui. */
    --font-display: 'Bricolage Grotesque', 'Public Sans', system-ui, sans-serif;
    --font-text:    'Public Sans', system-ui, -apple-system, sans-serif;

    /* --- tipografia: escala desktop -------------------------------------- */
    --fs-h1:          64px;
    --fs-h2:          42px;
    --fs-h2-cta:      46px;
    --fs-h2-founder:  38px;
    --fs-h3:          26px;
    --fs-h3-programa: 24px;
    --fs-h4:          17px;
    --fs-stat:        36px;
    --fs-numeral:     52px;
    --fs-quote:       20px;
    --fs-lead:        19px;
    --fs-intro:       17px;
    --fs-body:        15px;
    --fs-founder-p:   16px;
    --fs-nav:         14px;
    --fs-eyebrow:     13px;
    --fs-meta:        13px;
    --fs-wordmark:    22px;

    /* --- forma e movimento ------------------------------------------------ */
    --radius-btn:  2px;
    --container:   1160px;
    --gutter:      32px;
    --section-y:   96px;
    --transition:  150ms ease;
}


/* ==========================================================================
   b) BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--navy);
    font-family: var(--font-text);
    font-size: var(--fs-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--blue);
    text-decoration: none;
    transition: color var(--transition), background var(--transition), border-color var(--transition);
}
a:hover { color: var(--blue-hover); }

img { max-width: 100%; display: block; }

hr { border: 0; border-top: 1px solid var(--hairline); margin: 0; }

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.section        { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section--alt   { background: var(--paper-alt); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.section--ruled { border-top: 1px solid var(--hairline); }


/* ==========================================================================
   c) TIPOGRAFIA
   ========================================================================== */
h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--navy);
    margin: 0;
}

h1 {
    font-size: var(--fs-h1);
    line-height: 1.04;
    letter-spacing: -0.03em;
    text-wrap: balance;
}
h1 .accent { color: var(--blue); }

h2 {
    font-size: var(--fs-h2);
    line-height: 1.1;
    letter-spacing: -0.03em;
}

h3 {
    font-size: var(--fs-h3);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

h4 {
    font-family: var(--font-text);
    font-size: var(--fs-h4);
    font-weight: 700;
    color: var(--navy);
    margin: 0;
}

p { margin: 0; color: var(--text-secondary); line-height: 1.6; }

.lead  { font-size: var(--fs-lead);  line-height: 1.6; color: var(--text-secondary); max-width: 600px; }
.intro { font-size: var(--fs-intro); line-height: 1.6; color: var(--text-secondary); max-width: 560px; }

.eyebrow {
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blue);
}
.eyebrow--muted { color: var(--text-muted); }

.meta { font-size: var(--fs-meta); color: var(--text-muted); }

.wordmark {
    font-family: var(--font-display);
    font-size: var(--fs-wordmark);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--navy);
}
.wordmark .ia { color: var(--blue); }


/* ==========================================================================
   d) COMPONENTES
   ========================================================================== */

/* --- nav ---------------------------------------------------------------- */
.site-nav {
    max-width: var(--container);
    margin: 0 auto;
    padding: 22px var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid var(--hairline);
}
.site-nav__links {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: var(--fs-nav);
    font-weight: 500;
}
/* :not(.btn) é a correção de raiz de um defeito real: `.site-nav__links a`
   tem especificidade (0,1,1) e vencia `.btn--navy` (0,1,0), pintando o CTA do
   nav com --text-tertiary sobre fundo navy — 1.4:1, ilegível. No hover era pior:
   fundo blue com texto blue. Excluir o botão do seletor resolve sem !important
   e sem repetir declaração. */
.site-nav__links a:not(.btn) { color: var(--text-tertiary); }
.site-nav__links a:not(.btn):hover { color: var(--blue); }
.site-nav__links a:not(.btn)[aria-current="page"] { color: var(--blue); }

.nav-toggle {
    display: none;
    border: 0;
    background: none;
    padding: 8px;
    cursor: pointer;
    color: var(--navy);
    font-family: var(--font-text);
    font-size: var(--fs-nav);
}

/* --- botões -------------------------------------------------------------- */
.btn {
    display: inline-block;
    font-family: var(--font-text);
    font-weight: 600;
    font-size: var(--fs-body);
    line-height: 1;
    padding: 15px 28px;
    border: 1px solid transparent;
    border-radius: var(--radius-btn);
    cursor: pointer;
    transition: color var(--transition), background var(--transition), border-color var(--transition);
}

.btn--blue    { background: var(--blue); color: var(--paper); }
.btn--blue:hover { background: var(--blue-hover); color: var(--paper); }

.btn--outline { background: none; color: var(--navy); border-color: var(--numeral-ghost); }
.btn--outline:hover { border-color: var(--blue); color: var(--blue); }

.btn--navy    { background: var(--navy); color: var(--paper); padding: 10px 20px; }
.btn--navy:hover { background: var(--blue); color: var(--paper); }

/* sobre fundo navy: o hover clareia em vez de escurecer */
.btn--on-navy { background: var(--blue); color: var(--paper); padding: 16px 32px; font-size: 16px; }
.btn--on-navy:hover { background: var(--blue-bright); color: var(--paper); }

/* --- badge --------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-eyebrow);
    color: var(--text-secondary);
}
.badge strong { color: var(--navy); font-weight: 700; }
/* única forma arredondada do sistema — o dot */
.badge__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--blue);
    flex-shrink: 0;
}

/* --- hero ----------------------------------------------------------------- */
.hero { padding-top: 96px; padding-bottom: 72px; }
.hero__inner { max-width: 820px; }
.hero .eyebrow { margin-bottom: 24px; }
.hero h1 { margin-bottom: 28px; }
.hero .lead { margin-bottom: 36px; }
.hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hero-actions .badge { margin-left: 8px; }

/* --- blocos de seção de largura estreita ---------------------------------- */
.section--narrow .container { max-width: 840px; }
.section__eyebrow { display: block; margin-bottom: 16px; }
.section__title-sm { font-size: var(--fs-h2-founder); margin-bottom: 36px; }

/* link de continuação ao pé de uma seção */
.section-link { display: inline-block; margin-top: 40px; font-weight: 600; font-size: var(--fs-body); }

/* --- cabeçalho de seção numerado ----------------------------------------- */
.section-head { margin-bottom: 44px; }
.section-head__line {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 16px;
}
.section-head__numeral {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--blue);
}
.section-head h2 { margin-bottom: 12px; }

/* --- card hairline -------------------------------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.card__action { font-weight: 600; font-size: var(--fs-body); margin-top: auto; }

.card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* --- lista com marcador "—" ----------------------------------------------- */
.marker-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 20px 0 0;
    list-style: none;
    border-top: 1px solid var(--hairline-soft);
    font-size: var(--fs-body);
    color: var(--text-tertiary);
}
.marker-list li { display: flex; gap: 12px; }
.marker-list li::before { content: "—"; color: var(--blue); flex-shrink: 0; }

/* --- régua de estatísticas ------------------------------------------------ */
/* Desvio deliberado do handoff, que põe border-right em toda célula. Os
   divisores verticais nascem soltos abaixo da linha navy, param no meio do nada
   e leem como sobra de tabela, não como estrutura editorial. Fica só a linha
   navy no topo; quem separa as colunas é o espaço. O gap (não padding-right)
   garante que a primeira célula encoste na margem do container — a régua tem
   que casar com o alinhamento do resto da página. */
.stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 40px;
    border-top: 1px solid var(--navy);
}
.stat { padding: 28px 0 8px; }
.stat__n {
    font-family: var(--font-display);
    font-size: var(--fs-stat);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--navy);
}
.stat__l { font-size: var(--fs-meta); color: var(--text-muted); margin-top: 6px; }

/* --- passo de metodologia (numeral fantasma) ------------------------------ */
.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}
.step__numeral {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-numeral);
    line-height: 1;
    color: var(--numeral-ghost);
}
.step h4 { margin: 16px 0 8px; }

/* --- linha de programa ---------------------------------------------------- */
.programa {
    display: grid;
    grid-template-columns: 160px 1fr 300px;
    gap: 32px;
    align-items: baseline;
    padding: 32px 0;
    border-top: 1px solid var(--hairline);
}
.programa__area {
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--blue);
}
.programa h3 { font-size: var(--fs-h3-programa); margin-bottom: 8px; }
.programa__metas {
    display: flex;
    gap: 20px;
    justify-content: flex-end;
    font-size: var(--fs-meta);
    color: var(--text-muted);
}

/* --- bloco founder -------------------------------------------------------- */
.founder {
    display: grid;
    grid-template-columns: 340px 1fr;   /* R7: slot de 340px */
    gap: 72px;
    align-items: start;
}
/* A figura já não hospeda tag sobreposta; position: relative sai junto.
   O margin-bottom dá o respiro entre a foto e o nome no quem-somos, onde os
   dois vivem na mesma coluna. */
.founder__figure { margin: 0 0 24px; }
.founder__figure img {
    width: 100%;
    height: auto;
    border: 1px solid var(--hairline);
}
.founder .eyebrow { display: block; margin-bottom: 20px; }
.founder__name { font-size: var(--fs-h2-founder); margin-bottom: 6px; }
.founder__role { font-size: var(--fs-body); color: var(--blue); font-weight: 600; margin-bottom: 24px; }
/* O bloco não tinha régua vertical nenhuma: .founder p definia fonte, entrelinha
   e cor, mas nenhuma margem — e a base é p { margin: 0 }. Resultado: parágrafos
   colados entre si e o h2 colado no primeiro deles. 16px é o valor do protótipo
   para o parágrafo do founder; 24px separa o h2 da narrativa, e é o mesmo valor
   que já separava o cargo do que vem abaixo. */
/* :not(.founder__quote) porque `.founder p` tem especificidade (0,1,1) e
   venceria `.founder__quote` (0,1,0), engolindo o margin-bottom de 32px da
   citação. Mesma armadilha do CTA do nav: regra com escopo de container vence
   classe de componente. */
.founder p:not(.founder__quote) {
    font-size: var(--fs-founder-p);
    line-height: 1.7;
    color: var(--text-tertiary);
    margin-bottom: 16px;
}
.founder p:not(.founder__quote):last-child { margin-bottom: 0; }
/* :not() exclui o nome, que forma par apertado com o cargo logo abaixo (6px) */
.founder h2:not(.founder__name) { margin-bottom: 24px; }
.founder__quote {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-quote);
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: var(--navy);
    border-left: 2px solid var(--blue);
    padding-left: 20px;
    margin: 16px 0 32px;
}
/* grade de credenciais: o gap de 1px sobre o fundo hairline vira a borda interna */
.creds {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
}
.cred { background: var(--paper); padding: 20px; }
.cred__t { font-weight: 700; font-size: var(--fs-body); color: var(--navy); }
.cred__s { font-size: var(--fs-meta); color: var(--text-muted); margin-top: 4px; }

/* --- FAQ (details/summary nativo) ----------------------------------------- */
.faq { display: flex; flex-direction: column; }
.faq details { border-top: 1px solid var(--hairline); padding: 20px 0; }
.faq summary {
    cursor: pointer;
    font-size: var(--fs-h4);
    font-weight: 600;
    color: var(--navy);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+";
    color: var(--blue);
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
}
/* Desvio deliberado do handoff: o protótipo mantém "+" também no estado aberto.
   Um "+" sob um painel já expandido convida a clicar para abrir o que já está
   aberto. O "−" custa nada e diz a verdade sobre o que o clique faz. */
.faq details[open] summary::after { content: "−"; }
.faq details p {
    margin-top: 14px;
    font-size: var(--fs-body);
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 640px;
}

/* --- CTA navy -------------------------------------------------------------- */
.cta-navy { background: var(--navy); text-align: center; }
.cta-navy .container { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.cta-navy h2 {
    font-size: var(--fs-h2-cta);
    color: var(--on-navy);
    max-width: 680px;
    margin: 0 auto 16px;
    text-wrap: balance;
}
.cta-navy p {
    font-size: var(--fs-intro);
    color: var(--on-navy-soft);
    max-width: 540px;
    margin: 0 auto 36px;
}

/* --- footer ---------------------------------------------------------------- */
.site-footer {
    background: var(--navy);
    border-top: 1px solid var(--navy-border);
}
.site-footer__top {
    max-width: var(--container);
    margin: 0 auto;
    padding: 56px var(--gutter) 40px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
}
.site-footer .wordmark { color: var(--on-navy); font-size: 20px; }
/* O ".IA" em --blue sobre navy dá 2.37:1 — reprova até no limiar de texto
   grande (3:1), e o wordmark do rodapé é 20px/800. #3B82F6 dá 4.32:1. Não é
   cor nova: é o valor que o handoff dava a --blue-bright, e que saiu de lá por
   reprovar em texto NORMAL sobre navy. Aqui o texto é grande, e ele passa. */
.site-footer .wordmark .ia { color: #3B82F6; }
.site-footer__about {
    font-size: var(--fs-nav);
    color: var(--on-navy-soft);
    line-height: 1.6;
    max-width: 280px;
    margin: 14px 0 0;
}
.site-footer__col { display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-nav); }
.site-footer__col h4 {
    font-family: var(--font-text);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--on-navy-soft);
    margin-bottom: 4px;
}
.site-footer__col a { color: var(--on-navy-link); }
.site-footer__col a:hover { color: var(--on-navy); }
.site-footer__bottom {
    max-width: var(--container);
    margin: 0 auto;
    padding: 20px var(--gutter) 32px;
    border-top: 1px solid var(--navy-border);
    font-size: var(--fs-meta);
    color: var(--on-navy-soft);
}

/* --- WhatsApp flutuante ----------------------------------------------------
   R6: quadrado, radius 2px, sem sombra, sem pulse.
   O glifo é SVG inline, não Font Awesome e não emoji: aqui o ícone é
   FUNCIONAL (identifica o canal), não decorativo — não cai na proibição do
   handoff. Fica em navy com glifo papel, nunca no verde da marca WhatsApp:
   a disciplina da paleta ganha da cor de terceiro. O rótulo textual vive só
   no aria-label. */
.whatsapp-float {
    position: fixed;
    right: 28px;
    bottom: 28px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--navy);
    color: var(--paper);
    border-radius: var(--radius-btn);
    z-index: 900;
}
.whatsapp-float:hover { background: var(--blue); color: var(--paper); }
.whatsapp-float svg { width: 24px; height: 24px; fill: currentColor; display: block; }


/* ==========================================================================
   e) COMPONENTES DE ARTIGO
   Reusam os nomes de classe que os 21 artigos JÁ têm no markup — nenhum
   artigo precisa de reescrita para herdar o desenho novo.

   NOTA: o wrapper vivo é `.article-content` (21/21 artigos). `.article-body`
   existe no styles.css legado mas NÃO é usado por artigo nenhum — mantido aqui
   como co-seletor só para não deixar buraco caso alguma página futura o use.
   ========================================================================== */
.article-content,
.article-body {
    max-width: 760px;
    margin: 0 auto;
    padding: 72px var(--gutter) 80px;
}
.article-hero { max-width: 760px; margin: 0 auto; padding: 72px var(--gutter) 0; }

/* eyebrow do artigo — no legado esta classe não tinha regra nenhuma */
.article-meta {
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 20px;
}

.article-content h1, .article-body h1, .article-hero h1 {
    font-size: 46px;
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin-bottom: 20px;
}
.article-content h2, .article-body h2 {
    font-size: 30px;
    letter-spacing: -0.02em;
    margin: 56px 0 16px;
}
.article-content h3, .article-body h3 {
    font-size: var(--fs-h3-programa);
    letter-spacing: -0.02em;
    margin: 40px 0 12px;
}
.article-content h4, .article-body h4 { margin: 28px 0 10px; }

.article-content p, .article-body p { font-size: var(--fs-intro); line-height: 1.75; margin-bottom: 20px; }
.article-content ul, .article-content ol,
.article-body ul, .article-body ol {
    font-size: var(--fs-intro);
    line-height: 1.75;
    color: var(--text-secondary);
    margin-bottom: 20px;
    padding-left: 22px;
}
.article-content li, .article-body li { margin-bottom: 8px; }
.article-content strong, .article-body strong { color: var(--navy); }
.article-content a:hover, .article-body a:hover { text-decoration: underline; }

.article-subtitle {
    font-size: var(--fs-lead);
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 36px;
}
.article-info {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding-bottom: 24px;
    margin-bottom: 48px;
    border-bottom: 1px solid var(--hairline);
    font-size: var(--fs-meta);
    color: var(--text-muted);
}

/* highlight-box — a "Definição para GEO". Filete blue à esquerda, sem radius. */
.highlight-box {
    background: var(--paper-alt);
    border-left: 2px solid var(--blue);
    padding: 24px 28px;
    margin: 32px 0;
}
.highlight-box p { margin: 0; color: var(--text-tertiary); }
.highlight-box strong { color: var(--navy); }

/* tabela — o ativo extraível de cada artigo */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: 32px 0;
    font-size: var(--fs-body);
}
.comparison-table th {
    background: var(--paper-alt);
    text-align: left;
    font-weight: 700;
    color: var(--navy);
    padding: 14px 16px;
    border-bottom: 1px solid var(--navy);
}
.comparison-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--hairline);
    color: var(--text-secondary);
    vertical-align: top;
}
.comparison-table tr:hover td { background: var(--paper-alt); }

/* step-box — numeral blue, hairline, sem card arredondado */
.step-box {
    border-top: 1px solid var(--hairline);
    padding: 24px 0;
    margin: 0;
}
.step-box h4 { display: inline; font-size: var(--fs-h4); color: var(--navy); }
.step-box p { margin: 10px 0 0; font-size: var(--fs-body); }
.step-box ul { margin-top: 10px; font-size: var(--fs-body); }
.step-number {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-h4);
    color: var(--blue);
    margin-right: 12px;
}

/* warning-box — mesmo vocabulário do highlight, só que em navy */
.warning-box {
    background: var(--paper-alt);
    border-left: 2px solid var(--navy);
    padding: 24px 28px;
    margin: 32px 0;
}
.warning-box p { margin: 0; color: var(--text-tertiary); }
.warning-box strong { color: var(--navy); }

/* code-block */
.code-block {
    background: var(--paper-alt);
    border: 1px solid var(--hairline);
    padding: 20px;
    margin: 24px 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-tertiary);
    overflow-x: auto;
    white-space: pre-wrap;
}

/* feature-grid / feature-item / feature-card */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
    margin: 32px 0;
}
.feature-item, .feature-card { background: var(--paper); padding: 24px; }
.feature-item h4, .feature-card h4 { margin: 0 0 8px; }
.feature-item p, .feature-card p { margin: 0; font-size: var(--fs-body); }

/* faq-section — <details> nativo, mesmo desenho do FAQ da home */
.faq-section { margin-top: 64px; }
.faq-section details { border-top: 1px solid var(--hairline); padding: 20px 0; }
.faq-section summary {
    cursor: pointer;
    font-size: var(--fs-h4);
    font-weight: 600;
    color: var(--navy);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}
.faq-section summary::-webkit-details-marker { display: none; }
.faq-section summary::after {
    content: "+";
    color: var(--blue);
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
}
.faq-section details[open] summary::after { content: "−"; }
.faq-section details p {
    margin: 14px 0 0;
    font-size: var(--fs-body);
    line-height: 1.7;
    max-width: 640px;
}

/* article-cta — o único bloco comercial do artigo */
.article-cta {
    background: var(--navy);
    padding: 48px 40px;
    margin: 64px 0 40px;
    text-align: center;
}
/* h2 e h3: o padrão do acervo é h3, mas artigo-melhores-prompts usa h2 no CTA.
   Generalizar o seletor preserva o nível do heading (mexer nele seria mudança
   semântica); sem isto o h2 herdaria navy sobre fundo navy e sumiria. */
.article-cta h2,
.article-cta h3 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    font-size: var(--fs-h3);
    color: var(--on-navy);
    margin-bottom: 16px;
    text-wrap: balance;
}
.article-cta p { color: var(--on-navy-soft); font-size: var(--fs-intro); margin-bottom: 28px; }
/* mesmo defeito do nav: `.article-cta a` (0,1,1) vencia `.btn-article-cta`
   (0,1,0). Latente — só apareceria na Fase 3, nos 21 artigos. */
.article-cta a:not(.btn-article-cta) { color: var(--on-navy-link); }
.article-cta a:not(.btn-article-cta):hover { color: var(--on-navy); }
.btn-article-cta {
    display: inline-block;
    background: var(--blue);
    color: var(--paper);
    font-weight: 600;
    font-size: 16px;
    padding: 16px 32px;
    border-radius: var(--radius-btn);
}
.btn-article-cta:hover { background: var(--blue-bright); color: var(--paper); }


/* --- ajustes de página: home ---------------------------------------------- */
.stats-section    { padding-bottom: 88px; }
.solucoes-section { padding-bottom: 96px; }

/* --- artigo: elementos que só existem nas páginas de artigo ---------------- */
/* Link "← Voltar para Artigos e Insights" no topo do corpo do artigo. */
.article-back {
    display: inline-block;
    margin-bottom: 32px;
    font-size: var(--fs-eyebrow);
    font-weight: 600;
}
/* Link dentro do CTA do artigo, quando embutido no parágrafo: sublinhado para
   se distinguir do texto sobre navy sem depender só de cor. */
.article-cta p a { text-decoration: underline; }

/* --- rótulos dentro de bloco de código ------------------------------------
   O padrão é o rótulo em blue (preserva a intenção do autor nos artigos que
   marcavam o rótulo do prompt em azul).
   Blue quer dizer "isto é um RÓTULO", e nada mais. Por isso quem leva classe é
   o rótulo, não a exceção: marcar a exceção fazia `.code-block strong` pintar de
   azul também a ênfase de conteúdo — em roi-treinamentos-ia, os valores de
   resultado (260%, 453%, 4,3 semanas) ficavam azuis sem serem rótulo. O gerador
   imita o acervo, e "às vezes blue é rótulo, às vezes é ênfase" é a lição errada.
   `<strong>` sem classe dentro do bloco é ênfase e herda o navy do corpo.
   Nas duas páginas em que existe um PAR de fato (prompt × saída do modelo,
   fórmula × exemplo numérico), o rótulo de RESULTADO leva .rotulo-saida e fica
   navy: ali o contraste tem função. Substitui o #4CAF50, fora da paleta. */
.code-block strong.rotulo { color: var(--blue); }
.code-block strong.rotulo-saida { color: var(--navy); }

/* --- grade de artigos (artigos-insights.html) ------------------------------
   Este card é o que o gerador espelha ao publicar um artigo novo — mudar aqui
   muda todo card futuro. Card hairline, sem sombra e sem radius, como os da
   home; o que muda é a densidade: padding menor e tipografia de listagem. */
.artigos-grid {
    display: grid;
    /* min(340px, 100%): sem o min(), numa viewport estreita a coluna sai com
       340px dentro de um container de 335px e o card fica mais largo que a
       coluna de texto — desalinha com o h1 sem gerar overflow de página. */
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
    gap: 24px;
}
.artigo-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    padding: 32px;
    display: flex;
    flex-direction: column;
}
.artigo-card .eyebrow { display: block; margin-bottom: 16px; }
.artigo-card h3 {
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
}
.artigo-card__meta { font-size: var(--fs-meta); color: var(--text-muted); margin-bottom: 12px; }
.artigo-card__resumo { font-size: var(--fs-body); line-height: 1.65; margin-bottom: 20px; }
.secao-grade { padding-bottom: 100px; }

/* --- variantes de grade das páginas institucionais ------------------------- */
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.steps--4     { grid-template-columns: repeat(4, 1fr); gap: 32px; }
.stats--4     { grid-template-columns: repeat(4, 1fr); }
.stats--3     { grid-template-columns: repeat(3, 1fr); }

/* Régua COMPACTA — para 2 ou 3 números.
   A régua de 5 preenche a largura do container e o ritmo funciona. Com 2, as
   células de 1fr deixam ~550px de vazio à direita de cada número, e a linha
   navy atravessa o container inteiro anunciando um conteúdo que não vem.
   Aqui a régua encolhe ao conteúdo: colunas em max-content, o bloco em
   width: max-content — e a linha navy passa a ter a largura do bloco, não a do
   container. Continua encostada à esquerda, junto do h1.
   .stats--2 é alias de .stats--compacta.
   ⚠️ Desde 29/08/2026 NENHUMA página usa esta variante. A metodologia era a
   única consumidora e passou a fundir a proporção na linha do ciclo
   (.fluxo__prop). As páginas de curso usam .stats--3, não esta. Mantida no
   sistema por decisão do Felipe, para o próximo bloco de 2 ou 3 números —
   regras novas devem usar .stats--compacta, não o alias. */
.stats--compacta,
.stats--2 {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    column-gap: 40px;   /* o mesmo gap da régua de 5 — mantém o par junto */
    width: max-content;
    max-width: 100%;
}

/* lista de credenciais: linhas separadas por hairline, sem ícone
   (o handoff bane ícone decorativo; o texto já diz o que cada linha é) */
.cred-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.cred-list li {
    font-size: var(--fs-body);
    color: var(--text-tertiary);
    padding: 12px 0;
    border-bottom: 1px solid var(--hairline-soft);
}
.cred-list li:last-child { border-bottom: 0; }

/* --- comparação "antes × depois" -------------------------------------------
   O bloco original codificava a oposição por matiz (--red × --teal), fora da
   paleta. Aqui a distinção é PESO e FUNDO: o lado "antes" fica recuado sobre
   --paper-alt com marcador em --text-muted; o lado "depois" fica em --surface
   com marcador em --blue. ✕ e ✓ são texto, não ícone — sobrevivem à proibição
   e carregam a oposição sem inventar cor. */
.comparativo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.comparativo__lado { border: 1px solid var(--hairline); padding: 36px; }
.comparativo__lado--antes  { background: var(--paper-alt); }
.comparativo__lado--depois { background: var(--surface); }
.comparativo__rotulo {
    font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; display: block; margin-bottom: 16px;
}
.comparativo__lado--antes  .comparativo__rotulo { color: var(--text-muted); }
.comparativo__lado--depois .comparativo__rotulo { color: var(--blue); }
.comparativo h3 { margin-bottom: 8px; }
.comparativo__numero {
    font-family: var(--font-display); font-weight: 700; font-size: var(--fs-stat);
    letter-spacing: -0.02em; color: var(--navy); margin-bottom: 12px;
}
.comparativo p { font-size: var(--fs-body); margin-bottom: 20px; }
.comparativo ul {
    list-style: none; margin: 0; padding: 20px 0 0;
    border-top: 1px solid var(--hairline-soft);
    display: flex; flex-direction: column; gap: 12px;
    font-size: var(--fs-body);
}
.comparativo li { display: flex; gap: 12px; color: var(--text-tertiary); }
.comparativo li::before { flex-shrink: 0; }
.comparativo__lado--antes  li::before { content: "✕"; color: var(--text-muted); }
.comparativo__lado--depois li::before { content: "✓"; color: var(--blue); }

/* fluxo inline "Conceito → Ferramenta → Resultado" (metodologia) */
.fluxo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 20px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.fluxo span { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); }
.fluxo .fluxo__sep { color: var(--text-muted); letter-spacing: 0; }
.objetivo { font-size: var(--fs-meta); color: var(--text-muted); margin-top: auto; padding-top: 16px; border-top: 1px solid var(--hairline-soft); }

/* Proporção prática/conceito, fundida na linha do ciclo (metodologia.html).
   Antes vivia numa .stats--compacta própria, em section separada logo abaixo:
   linha navy curta e dois numerais de 36px flutuando sem âncora, descrevendo a
   mesma mecânica que a linha do ciclo já resume. Agora entra no mesmo bloco,
   entre as mesmas hairlines, empurrada à direita com margin-left: auto — mesmo
   registro tipográfico do ciclo (escala do eyebrow, caixa alta, tracking), mas
   número em --blue e rótulo em --text-muted, para complementar a linha navy em
   vez de disputar com ela.
   .stats--compacta continua no sistema, usada pelas páginas de curso. */
.fluxo__prop {
    margin: 0 0 0 auto;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
/* 0,2,0 — precisa vencer .fluxo span (0,1,1), que pinta tudo de navy/700 */
.fluxo .fluxo__prop-n   { font-weight: 700; color: var(--blue); }
.fluxo .fluxo__prop-l   { font-weight: 500; color: var(--text-muted); }
.fluxo .fluxo__prop-sep { color: var(--text-muted); letter-spacing: 0; margin: 0 4px; }

/* metas alinhadas à esquerda, quando o bloco não é a linha de programa da home */
.programa__metas--esq { justify-content: flex-start; }
/* botão dentro de flex-column não deve esticar na largura toda */
.btn--auto { align-self: flex-start; }
/* item de lista com título e subtítulo (cursos.html) */
.marker-list__t { font-weight: 700; color: var(--navy); }
.marker-list__s { font-size: var(--fs-meta); color: var(--text-muted); margin-top: 2px; }
/* Variante para itens com descrição de verdade, não legenda de uma linha:
   sobe a descrição para o tamanho e a cor do corpo, e abre o espaço entre os
   itens, senão quatro parágrafos de ~150 caracteres colam uns nos outros. */
.marker-list--modulos { gap: 20px; }
.marker-list--modulos .marker-list__s {
    font-size: var(--fs-body);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-top: 4px;
    max-width: 70ch;
}
.marker-list__t, .marker-list__s { display: block; }

/* --- página de curso: lista de tópicos do módulo --------------------------- */
.modulo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: var(--fs-body); }
.modulo-list li { display: flex; gap: 12px; color: var(--text-tertiary); }
.modulo-list li::before { content: "—"; color: var(--blue); flex-shrink: 0; }

/* --- página de curso: programa detalhado, em blocos temáticos -------------- */
/* Doze tópicos por módulo empilhados num .modulo-list viram parede de texto e
   o card passa de 1m de altura no desktop. Aqui os tópicos entram agrupados em
   blocos de ~4, cada um com um rótulo curto — é o rótulo que mostra a
   progressão didática do módulo, que é justamente o argumento de profundidade
   da página. Duas colunas no desktop; a regra de 1 coluna está na seção (g).
   O rótulo é NAVY, não blue: o eyebrow "Módulo N" já ocupa o azul no card, e
   dois azuis competindo no mesmo bloco desmancham a hierarquia. */
.modulo-grupos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 40px;
    padding-top: 24px;
    border-top: 1px solid var(--hairline-soft);
}
.modulo-grupo__t {
    display: block;
    margin-bottom: 14px;
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--navy);
}

/* Bloco em destaque dentro do programa (ex.: "Criação de aplicativos com
   agentes de IA", Módulo 3 da IA na Prática). Ocupa as duas colunas da grade,
   ganha fundo de papel + filete azul à esquerda e um badge "Destaque" antes do
   rótulo. A lista interna vira duas colunas no desktop para não esticar o card;
   a regra de 1 coluna está na seção (g), junto com a de .modulo-grupos. */
.modulo-grupo--destaque {
    grid-column: 1 / -1;
    padding: 24px 28px;
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--blue);
}
.modulo-grupo--destaque .modulo-grupo__t { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.modulo-grupo__badge {
    display: inline-block;
    padding: 3px 8px;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--surface);
    background: var(--blue);
    border-radius: var(--radius-btn);
}
.modulo-grupo--destaque .modulo-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 40px;
}

/* Linha de entregável no fim de cada módulo: "Sai do módulo com: ...". */
.modulo-entrega {
    margin: 28px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--hairline-soft);
    font-size: var(--fs-body);
    color: var(--text-tertiary);
}
.modulo-entrega strong { color: var(--navy); }


/* ⚠️ COMPONENTE NOVO COM GRADE? A regra responsiva dele entra NO BLOCO ACIMA,
   não num @media anterior. Media query não acrescenta especificidade: uma
   declaração de grade escrita depois de um @media vence o que aquele @media
   dizia, e o componente fica com o layout de desktop no celular. Já aconteceu
   duas vezes nesta obra (variantes de grade, e depois .contato-grid), e nas
   duas a captura de tela parecia plausível — só a medição denunciou. */

/* ==========================================================================
   FORMULÁRIO (contato.html)
   O :focus aqui substitui os handlers onfocus/onblur que manipulavam
   style.borderColor e style.background direto no elemento. É a única mudança
   de markup permitida no formulário: name, required, value e action do
   <select name="como_encontrou"> são contrato com o enviar.php e com o
   sucesso.html, e não podem mudar.
   ========================================================================== */
.contato-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 60px; align-items: start; }

.campo { display: block; margin-bottom: 20px; }
.campo > span {
    display: block; margin-bottom: 8px;
    font-size: var(--fs-eyebrow); font-weight: 600;
    letter-spacing: 0.04em; color: var(--text-tertiary);
}
.campo input,
.campo textarea,
.campo select {
    width: 100%;
    box-sizing: border-box;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 0;
    padding: 14px 16px;
    font-family: var(--font-text);
    font-size: var(--fs-intro);
    color: var(--navy);
    outline: none;
    transition: border-color var(--transition), background var(--transition);
}
.campo textarea { resize: vertical; }
.campo input:focus,
.campo textarea:focus,
.campo select:focus { border-color: var(--blue); background: var(--paper-alt); }
.campo input::placeholder { color: var(--text-muted); }

.form-submit {
    width: 100%;
    border: 0;
    cursor: pointer;
    font-family: var(--font-text);
    font-size: 16px;
    padding: 18px 32px;
}

/* aside do WhatsApp: card hairline, sem verde de marca e sem ícone */
.contato-aside { border: 1px solid var(--hairline); background: var(--surface); padding: 40px; position: sticky; top: 32px; }
.contato-aside h3 { margin-bottom: 12px; }
.contato-aside p { font-size: var(--fs-body); margin-bottom: 28px; }
.contato-aside .btn { display: block; text-align: center; }

/* página de confirmação de envio */
.pagina-sucesso { display: flex; flex-direction: column; min-height: 100vh; }
.sucesso-caixa {
    flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    max-width: var(--container); margin: 0 auto; width: 100%;
    padding: 96px var(--gutter);
}
.sucesso-caixa h1 { margin-bottom: 20px; }
.sucesso-caixa p { font-size: var(--fs-lead); max-width: 560px; margin-bottom: 36px; }


/* ==========================================================================
   g) RESPONSIVO — TODOS os @media, e nada depois deles
   ========================================================================== */
/* ==========================================================================
   f) RESPONSIVO — breakpoint ~820px
   ========================================================================== */

@media (max-width: 820px) {
    :root {
        --fs-h1:         40px;
        --fs-h2:         30px;
        --fs-h2-cta:     32px;
        --fs-h2-founder: 28px;
        --fs-h3:         22px;
        --fs-numeral:    40px;
        --fs-lead:       17px;
        --gutter:        20px;
        --section-y:     64px;
    }

    .site-nav { flex-wrap: wrap; gap: 16px; }
    .site-nav__links { gap: 18px; flex-wrap: wrap; font-size: var(--fs-eyebrow); }

    .card-grid { grid-template-columns: 1fr; }
    .card { padding: 28px; }

    /* mesma regra do desktop: nenhum divisor, só espaço. O row-gap substitui
       o border-bottom que separava as linhas. */
    .stats { grid-template-columns: 1fr 1fr; gap: 24px 40px; }
    .stat { padding: 20px 0 0; }

    .steps { grid-template-columns: 1fr; gap: 32px; }

    .programa { grid-template-columns: 1fr; gap: 12px; }
    .programa__metas { justify-content: flex-start; flex-wrap: wrap; gap: 14px; }

    .founder { grid-template-columns: 1fr; gap: 40px; }
    .founder__figure { max-width: 340px; }
    .creds { grid-template-columns: 1fr; }

    .site-footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }

    .article-content, .article-body, .article-hero { padding-left: var(--gutter); padding-right: var(--gutter); }
    .article-content h1, .article-body h1, .article-hero h1 { font-size: 34px; }
    .article-content h2, .article-body h2 { font-size: 26px; }
    .article-cta { padding: 36px 24px; }

    /* tabela larga rola dentro do próprio bloco, sem estourar a página */
    .comparison-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ==========================================================================
   f2) RESPONSIVO DAS VARIANTES
   Precisa vir DEPOIS das variantes, não dentro do bloco @media lá de cima:
   media query não acrescenta especificidade, então `.card-grid--3` declarado
   adiante venceria `.card-grid { 1fr }` de dentro do media anterior — e os
   grids ficavam em 3 colunas a 600px de largura.
   ========================================================================== */

@media (max-width: 820px) {
    .card-grid--3,
    .steps--4        { grid-template-columns: 1fr; }
    .stats--3,
    .stats--4        { grid-template-columns: 1fr 1fr; }
    /* a compacta continua lado a lado a 375px: o bloco mede ~191px, cabe com
       folga nos 335px disponíveis. Nada a mudar — a regra fica registrada para
       deixar explícito que foi verificado, não esquecido. */
    .comparativo     { grid-template-columns: 1fr; }
    .comparativo__lado { padding: 28px; }
    .fluxo           { gap: 10px; }
}

/* ==========================================================================
   f3) RESPONSIVO — SEMPRE O ÚLTIMO BLOCO DO ARQUIVO
   Este bloco tem de ficar no fim, depois de TODO componente. Media query não
   acrescenta especificidade: qualquer grade declarada abaixo dele venceria e o
   componente ficaria com layout de desktop no celular.
   Aconteceu três vezes nesta obra — variantes de grade, .contato-grid, e a
   própria tentativa de corrigir .contato-grid num bloco que já não era o
   último. Nas três a captura de tela parecia plausível; só a medição denunciou.
   ========================================================================== */

@media (max-width: 820px) {
    .contato-grid  { grid-template-columns: 1fr; gap: 40px; }
    .contato-aside { position: static; padding: 28px; }
}

/* O par de proporção da metodologia divide a linha do ciclo até o bloco medir
   632px — ou seja, viewport de 672px (container: 1160px de máximo, 20px de
   padding de cada lado). Abaixo disso ele quebra para a linha de baixo, ainda
   dentro das mesmas hairlines. Quando quebra, margin-left: auto o jogaria para
   a direita e ele voltaria a parecer solto — que é exatamente o problema que
   esta fusão veio resolver. Aqui ele volta a encostar à esquerda, alinhado com
   CONCEITO. O breakpoint é 680px, logo acima dos 672px medidos, para que os
   dois estados nunca se contradigam. */
@media (max-width: 680px) {
    .fluxo__prop { margin-left: 0; margin-top: 12px; width: 100%; }
}

/* Programa detalhado da página de curso: os blocos temáticos viram uma coluna.
   Escrito no FIM do arquivo de propósito — é o último @media, e nada vem
   depois dele. Ver a regra de ordenação no cabeçalho. */
@media (max-width: 820px) {
    .modulo-grupos { grid-template-columns: 1fr; gap: 28px; padding-top: 20px; }
    .modulo-grupo--destaque { padding: 20px; }
    .modulo-grupo--destaque .modulo-list { grid-template-columns: 1fr; }
}