/* ===========================================================================
   WEBNOV — SITE PÚBLICO
   ===========================================================================
   Folha do design aprovado em `Webnov-Frontend-para-Claude-v2`. As cores, a
   tipografia, os espaçamentos e as proporções vêm de lá e não devem ser
   ajustados por gosto: o `INTEGRACAO-PARA-CLAUDE.md` chama isso de regra
   visual inegociável.

   O que mudou em relação ao pacote entregue:

   1. **Os nomes das classes viraram os do projeto.** O pacote usava `.header`,
      `.nav`, `.footer`; aqui é `.cabecalho`, `.rodape`. Classe em português é
      a convenção do Framework desde a primeira versão, e misturar os dois
      idiomas deixaria a folha ilegível na metade.
   2. **O HTML é montado no servidor.** O pacote gerava tudo por JavaScript —
      o que o próprio documento de integração proíbe, porque o Google receberia
      página vazia. Nenhuma regra aqui depende de script para valer.
   3. **`prefers-reduced-motion` é respeitado**, como o documento manda.
   =========================================================================== */

:root {
    /* Marca ---------------------------------------------------------------
       O azul-marinho profundo e o verde-azulado do pacote aprovado. */
    --navy: #071a2c;
    --navy-2: #0d2940;
    --teal: #07989a;
    --teal-2: #0bb5ad;
    --mint: #e8f7f5;

    --ink: #102234;
    --muted: #617082;
    --line: #dce7eb;
    --cinza-300: #c7ced3;
    --paper: #fff;
    --soft: #f4f8f9;

    --raio: 22px;
    --raio-sm: 12px;
    --sombra: 0 20px 60px rgba(6, 31, 48, .10);
    --max: 1180px;

    --fonte: Inter, "Segoe UI", system-ui, Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Estados. Usados nos avisos do formulário. */
    --ok: #087b5b;
    --ok-fundo: #e3f5ec;
    --erro: #a8221b;
    --erro-fundo: #faeae9;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--fonte);
    line-height: 1.65;
}

a { color: inherit; }

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

h1, h2, h3 { text-wrap: balance; }

.conteiner {
    width: min(var(--max), calc(100% - 40px));
    margin-inline: auto;
}

/* O link que só aparece para quem navega pelo teclado. */
.pular {
    position: absolute;
    left: -999px;
}

.pular:focus {
    left: 20px;
    top: 20px;
    z-index: 99;
    padding: 10px 16px;
    background: #fff;
    border-radius: var(--raio-sm);
    box-shadow: var(--sombra);
}

.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --- Cabeçalho ---------------------------------------------------------- */

.cabecalho {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(220, 231, 235, .75);
}

.cabecalho__linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 76px;
}

.cabecalho__marca img { width: 152px; }

.cabecalho__nav {
    display: flex;
    align-items: center;
    gap: 26px;
}

.cabecalho__link {
    font-size: .91rem;
    font-weight: 650;
    text-decoration: none;
}

.cabecalho__link:hover,
.cabecalho__link--atual { color: var(--teal); }

/* O último item do menu é o convite: contorno, não link solto. */
.cabecalho__link--destaque {
    padding: 10px 16px;
    border: 1px solid var(--teal);
    border-radius: var(--raio-sm);
    color: var(--teal);
}

.cabecalho__botao {
    display: none;
    border: 0;
    background: none;
    color: inherit;
    font-size: 1.5rem;
    cursor: pointer;
}

/* --- Abertura ----------------------------------------------------------- */

.hero { padding: 82px 0 58px; overflow: hidden; }

.hero__grade {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 70px;
}

.chapeu {
    color: var(--teal);
    font-size: .73rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.hero h1,
.pagina-hero h1 {
    margin: 16px 0 22px;
    font-size: clamp(2.55rem, 5vw, 5.25rem);
    line-height: 1.02;
    letter-spacing: -.055em;
}

.hero h1 em { font-style: normal; color: var(--teal); }

.lead {
    max-width: 650px;
    color: var(--muted);
    font-size: 1.12rem;
}

.acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.selos {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 28px;
    color: var(--muted);
    font-size: .82rem;
}

.selos span::before {
    content: "\2713";
    margin-right: 7px;
    color: var(--teal);
    font-weight: 900;
}

/* --- Botões ------------------------------------------------------------- */

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border: 1px solid var(--teal);
    border-radius: var(--raio-sm);
    background: var(--teal);
    color: #fff;
    font: inherit;
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}

.botao:hover { background: #067d80; border-color: #067d80; }

.botao--contorno {
    background: #fff;
    border-color: var(--line);
    color: var(--ink);
}

.botao--contorno:hover { background: var(--soft); border-color: var(--teal); }

/* --- A entrega, na abertura --------------------------------------------
   A captura real de um site publicado, dentro de uma moldura de navegador.
   O documento de integração é explícito: nada de mockup genérico. Se a
   imagem falhar, entra a substituta e o quadro continua inteiro — nunca um
   retângulo branco. */

.entrega {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 26px;
    box-shadow: var(--sombra);
    transform: rotate(.6deg);
}

.entrega__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 42px;
    padding: 0 16px;
    background: #edf3f5;
    color: #738690;
}

.entrega__pontos { display: flex; gap: 6px; }

.entrega__pontos i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9fb0b9;
}

.entrega__topo small { font-size: .7rem; font-weight: 750; }

.entrega__imagem {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #dfe8ec;
    object-fit: cover;
    object-position: top;
}

.entrega__legenda {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 3px 15px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
}

.entrega__legenda strong { font-size: 1.08rem; }
.entrega__legenda small { grid-column: 1; color: var(--muted); }

.entrega__situacao {
    grid-row: 1 / 3;
    grid-column: 2;
    padding: 6px 9px;
    border-radius: 20px;
    background: var(--ok-fundo);
    color: var(--ok);
    font-size: .62rem;
    font-weight: 900;
}

.entrega__fatos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 16px 20px;
    background: #fbfcfc;
}

.entrega__fatos span { display: flex; flex-direction: column; }
.entrega__fatos b { font-size: .72rem; }
.entrega__fatos small { color: var(--muted); font-size: .67rem; }

/* --- Seções ------------------------------------------------------------- */

.secao { padding: 88px 0; }
.secao--clara { background: var(--soft); }
.secao--escura { background: var(--navy); color: #fff; }

.secao__topo {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 38px;
}

.secao__titulo {
    max-width: 760px;
    margin: 8px 0 0;
    font-size: clamp(2rem, 4vw, 3.6rem);
    line-height: 1.08;
    letter-spacing: -.04em;
}

.secao__intro { max-width: 440px; color: var(--muted); }
.secao--escura .secao__intro { color: #abc0cf; }

/* A coluna estreita: texto corrido, artigo do blog, FAQ e páginas de erro.
   Sem ela a linha atravessa o monitor inteiro e a leitura despenca — é a
   diferença entre um texto que se lê e um que se abandona no terceiro
   parágrafo. Estava faltando desde o redesenho, e a conferência de classes só
   passou a enxergá-la depois de eu corrigir o próprio detector. */
.secao__estreito { max-width: 760px; }

/* Título que abre uma página inteira, e não uma seção dentro dela: sozinho no
   topo, sem o `secao__topo` para dar o respiro. */
.secao__titulo--pagina { margin-bottom: 24px; }
.secao__titulo--espacado { margin-top: 40px; }

/* A chamada no fim de uma sequência de etapas. */
.secao__acao { margin-top: 32px; }

.grade { display: grid; gap: 20px; }
.grade--3 { grid-template-columns: repeat(3, 1fr); }
.grade--4 { grid-template-columns: repeat(4, 1fr); }

/* --- Cartões ------------------------------------------------------------ */

.cartao {
    padding: 28px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--raio);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.cartao:hover {
    transform: translateY(-5px);
    border-color: #9fd5d4;
    box-shadow: var(--sombra);
}

.cartao__icone {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--mint);
    color: var(--teal);
    font-size: 1.35rem;
}

.cartao h3 { margin: 30px 0 12px; font-size: 1.28rem; }
.cartao p { color: var(--muted); }

.cartao__elo {
    color: var(--teal);
    font-weight: 800;
    text-decoration: none;
}

.cartao__elo:hover { text-decoration: underline; }

/* Para quem: o cartão numerado, com a etiqueta grudada no rodapé. */
.publico {
    display: flex;
    flex-direction: column;
    min-height: 330px;
}

.publico__numero { margin-left: auto; color: #9eafb8; }
.publico p { font-size: .96rem; }

.publico__etiqueta {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    color: var(--teal);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .12em;
}

/* --- Resultados, sobre o fundo escuro ----------------------------------- */

.resultados {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid #254155;
}

.resultados article {
    padding: 30px 25px;
    border-right: 1px solid #254155;
}

.resultados article:last-child { border-right: 0; }
.resultados span { color: var(--teal-2); font-size: 1.3rem; }
.resultados h3 { margin: 20px 0 8px; color: #fff; }
.resultados p { margin: 0; color: #abc0cf; font-size: .9rem; }

/* --- Portfólio ---------------------------------------------------------- */

.projeto {
    overflow: hidden;
    padding: 0;
}

.projeto__imagem {
    display: block;
    overflow: hidden;
    background: #eaf0f2;
}

.projeto__imagem img {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--navy);
    object-fit: cover;
    transition: transform .35s ease;
}

.projeto:hover .projeto__imagem img { transform: scale(1.025); }

.projeto__corpo { padding: 24px; }

.etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 14px 0;
    padding: 0;
    list-style: none;
}

.etiqueta {
    padding: 6px 9px;
    border-radius: 20px;
    background: var(--mint);
    color: #04787a;
    font-size: .7rem;
    font-weight: 750;
}

.meta {
    color: var(--teal);
    font-size: .75rem;
    font-weight: 800;
}

/* --- Filtros ------------------------------------------------------------ */

.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 28px;
}

/* Os filtros são links de verdade, não botões com script: sem JavaScript o
   filtro continua funcionando, e cada recorte tem endereço próprio. */
.filtro {
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: 30px;
    background: #fff;
    color: inherit;
    font: inherit;
    font-size: .88rem;
    text-decoration: none;
    cursor: pointer;
}

.filtro:hover { border-color: var(--teal); color: var(--teal); }

.filtro--atual {
    background: var(--teal);
    border-color: var(--teal);
    color: #fff;
}

/* As categorias do blog.
   Mesmo desenho de `.filtro`, com nome próprio porque a lista do blog vem de
   uma navegação semântica (`<nav><ul>`) e precisa perder as marcas da lista.
   **Não tinha regra nenhuma**: a barra de categorias do blog público aparecia
   como uma lista com bolinhas, em azul de link. */
.blog-filtros { margin: 0 0 32px; }

.blog-filtros__lista {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.blog-filtro {
    display: inline-block;
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: 30px;
    background: #fff;
    color: inherit;
    font-size: .88rem;
    text-decoration: none;
}

.blog-filtro:hover { border-color: var(--teal); color: var(--teal); }

.blog-filtro--atual {
    background: var(--teal);
    border-color: var(--teal);
    color: #fff;
}

/* --- Conteúdo ----------------------------------------------------------- */

.artigo-cartao { overflow: hidden; padding: 0; }

.artigo-cartao > img,
.artigo-cartao__imagem img {
    width: 100%;
    aspect-ratio: 4 / 5;
    background: #dfe8ec;
    object-fit: cover;
}

.artigo-cartao__corpo { padding: 22px; }
.artigo-cartao h3 { margin: 8px 0 10px; font-size: 1.2rem; }

.artigo-corpo {
    max-width: 820px;
    padding-bottom: 90px;
    margin-inline: auto;
}

.artigo-corpo > img {
    width: 100%;
    max-height: 620px;
    margin-bottom: 34px;
    border-radius: 24px;
    background: #dfe8ec;
    object-fit: cover;
}

.artigo-corpo > * + * { margin-top: 1.35rem; }
.artigo-corpo h2 { margin-top: 2.6rem; font-size: 1.9rem; line-height: 1.2; }
.artigo-corpo h3 { margin-top: 2rem; font-size: 1.35rem; }
.artigo-corpo ul, .artigo-corpo ol { padding-left: 1.4rem; }
.artigo-corpo a { color: var(--teal); }

.artigo-corpo blockquote {
    margin-left: 0;
    padding-left: 1.2rem;
    border-left: 3px solid var(--teal);
    color: var(--muted);
    font-size: 1.1rem;
}

.artigo-corpo code {
    padding: .1em .35em;
    border-radius: 6px;
    background: var(--soft);
    font-family: var(--mono);
    font-size: .9em;
}

.busca {
    min-width: 230px;
    margin-left: auto;
    padding: 9px 16px;
    border: 1px solid var(--line);
    border-radius: 30px;
    font: inherit;
}

.paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 44px;
}

.paginacao__contador { color: var(--muted); font-size: .88rem; }

/* --- Página interna ----------------------------------------------------- */

.pagina-hero {
    padding: 85px 0 50px;
    text-align: center;
}

.pagina-hero h1 {
    max-width: 980px;
    margin-inline: auto;
}

.pagina-hero .lead { margin-inline: auto; }

.trilha { padding: 22px 0 0; }
.trilha__lista {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: .8rem;
}

.trilha__item + .trilha__item::before { content: "›"; margin-right: 8px; }
.trilha a { color: var(--muted); }

/* --- Contato ------------------------------------------------------------ */

.contato-grade {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 54px;
}

.contato-cartao {
    padding: 36px;
    border-radius: 28px;
    background: var(--navy);
    color: #fff;
}

.contato-cartao p { color: #b6cad5; }

.formulario {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.campo {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: .82rem;
    font-weight: 700;
}

.campo--largo { grid-column: 1 / -1; }

.campo input,
.campo select,
.campo textarea {
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    font: inherit;
    font-weight: 400;
}

.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 1px;
}

.campo textarea { min-height: 125px; resize: vertical; }

.campo__ajuda {
    color: var(--muted);
    font-size: .75rem;
    font-weight: 400;
}

/* Campo obrigatório não anunciado é campo que reprova sem explicar. */
.campo__obrigatorio { color: var(--teal); }

.aviso {
    grid-column: 1 / -1;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--mint);
}

.aviso--ok { background: var(--ok-fundo); color: var(--ok); }
.aviso--erro { background: var(--erro-fundo); color: var(--erro); }

/* A isca do formulário: escondida de quem enxerga e de quem usa leitor de
   tela, visível para o robô que preenche tudo. */
.isca {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- WhatsApp flutuante -------------------------------------------------- */

.whats {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 25;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #1ebc67;
    color: #fff;
    font-size: 1.5rem;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(16, 130, 69, .3);
}

.whats:hover { background: #17a659; }

/* --- Rodapé ------------------------------------------------------------- */

.rodape {
    padding: 52px 0 26px;
    background: #061521;
    color: #fff;
}

.rodape__grade {
    display: grid;
    grid-template-columns: 1.2fr .8fr .8fr;
    gap: 50px;
}

.rodape p, .rodape a { color: #9fb4c1; }

.rodape a {
    display: block;
    margin: 8px 0;
    text-decoration: none;
}

.rodape a:hover { color: #fff; }

.rodape strong { display: block; margin-bottom: 4px; color: #fff; }

.rodape__lista { margin: 0; padding: 0; list-style: none; }

.rodape__base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 34px;
    padding-top: 20px;
    border-top: 1px solid #1c3545;
    color: #829aa7;
    font-size: .78rem;
}

.rodape__versao { color: #5d7686; font-family: var(--mono); font-size: .7rem; }

/* --- Estados vazios ----------------------------------------------------- */

.vazio {
    grid-column: 1 / -1;
    padding: 45px;
    color: var(--muted);
    text-align: center;
}

/* --- Erro ---------------------------------------------------------------- */

.erro { text-align: center; }
.erro__codigo { color: var(--teal); font-size: 3rem; font-weight: 900; margin: 0; }
.erro__titulo { margin: 8px 0 16px; }
.erro__acoes { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* --- Telas menores ------------------------------------------------------- */

@media (max-width: 900px) {
    .hero__grade,
    .contato-grade { grid-template-columns: 1fr; }

    .grade--3,
    .grade--4 { grid-template-columns: repeat(2, 1fr); }

    /* Sem JavaScript o menu simplesmente aparece empilhado: o site continua
       navegável se o script não rodar. */
    .cabecalho__nav {
        position: absolute;
        top: 76px;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        background: #fff;
        box-shadow: var(--sombra);
    }

    .cabecalho__nav--aberto { display: flex; }
    .cabecalho__botao { display: block; }

    .secao__topo { flex-direction: column; align-items: flex-start; }
    .hero { padding-top: 52px; }

    .resultados { grid-template-columns: 1fr 1fr; }
    .resultados article:nth-child(2) { border-right: 0; }
    .resultados article { border-bottom: 1px solid #254155; }
}

@media (max-width: 600px) {
    .conteiner { width: min(100% - 28px, var(--max)); }

    .grade--3,
    .grade--4,
    .formulario { grid-template-columns: 1fr; }

    .campo--largo { grid-column: auto; }

    .hero h1 { font-size: 2.8rem; }
    .hero__grade { gap: 50px; }
    .secao { padding: 62px 0; }

    .entrega { transform: none; }
    .entrega__fatos,
    .entrega__legenda { grid-template-columns: 1fr; }

    .entrega__situacao {
        grid-row: auto;
        grid-column: auto;
        width: max-content;
    }

    .resultados { grid-template-columns: 1fr; }
    .resultados article { border-right: 0; }
    .resultados article:last-child { border-bottom: 0; }

    .rodape__grade { grid-template-columns: 1fr; }
    .busca { width: 100%; margin-left: 0; }
}

/* Quem pediu menos movimento ao sistema recebe menos movimento. Exigido pelo
   documento de integração, e é o tipo de coisa que só quem precisa percebe. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .cartao:hover { transform: none; }
    .projeto:hover .projeto__imagem img { transform: none; }
    .entrega { transform: none; }
}

/* ===========================================================================
   BLOCOS QUE VIERAM DA VERSÃO ANTERIOR
   ===========================================================================
   Ao reescrever esta folha no desenho aprovado, os nomes das classes mudaram —
   e sete templates que não foram tocados ficaram apontando para regras que
   deixaram de existir. O resultado seria página sem estilo nenhum, sem erro em
   lugar nenhum.

   Foi a conferência 6, ampliada, que pegou. Estas regras trazem os blocos para
   o desenho novo, usando os mesmos tokens do resto da folha.
   =========================================================================== */

/* Abertura antiga: hoje o `hero` cobre a Home, mas páginas de conteúdo ainda
   podem trazer este bloco. */
.abertura { padding: 82px 0 48px; background: var(--navy); color: #fff; }
.abertura--compacta { padding: 56px 0 40px; }
.abertura__caixa { max-width: 900px; }
.abertura__titulo { margin: 16px 0 18px; font-size: clamp(2.2rem, 4.5vw, 4rem); line-height: 1.06; letter-spacing: -.045em; }
.abertura__texto { color: #abc0cf; font-size: 1.1rem; }
.abertura__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.chapeu--claro { color: var(--teal-2); }

/* Texto corrido */
.texto { color: var(--muted); }
.lista-marcada { margin: 1rem 0; padding-left: 1.3rem; color: var(--muted); }
.lista-marcada li + li { margin-top: .4rem; }
.lista-marcada--compacta { font-size: .95rem; }
.nota { margin-top: 1.25rem; padding: 1rem 1.25rem; border-left: 3px solid var(--teal); background: var(--soft); color: var(--muted); font-size: .95rem; }

/* Cartões simples */
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.cartoes--duas { grid-template-columns: repeat(2, 1fr); }
.cartao__titulo { margin: 0 0 .6rem; font-size: 1.2rem; }
.cartao__texto { margin: 0; color: var(--muted); }

/* Duas listas lado a lado */
.colunas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.coluna { min-width: 0; }
/* As variantes vêm do conteúdo (`coluna--positiva`, `coluna--negativa`), e o
   painel oferece as duas. Marcam a lista com cor e sinal diferentes. */
.coluna--positiva .coluna__lista li::marker { color: var(--ok); }
.coluna--negativa .coluna__lista li::marker { color: var(--erro); }
.coluna__titulo { margin: 0 0 1rem; font-size: 1.3rem; }
.coluna__lista { margin: 0; padding-left: 1.3rem; color: var(--muted); }
.coluna__lista li + li { margin-top: .5rem; }

/* Etapas numeradas */
.etapas { counter-reset: etapa; margin: 0; padding: 0; list-style: none; }
.etapa { display: grid; grid-template-columns: 68px 1fr; gap: 22px; padding: 26px 0; border-top: 1px solid var(--line); }
.etapa__numero { color: var(--teal); font-size: 1.5rem; font-weight: 800; }
.etapa__titulo { margin: 0 0 .5rem; font-size: 1.25rem; }
.etapa__texto { margin: 0; color: var(--muted); }
.etapa__voce { margin: .6rem 0 0; color: var(--muted); font-size: .92rem; }
.etapa__corpo { min-width: 0; }
.etapas--detalhadas .etapa { padding: 32px 0; }

/* Perguntas frequentes */
.perguntas { margin: 0; padding: 0; list-style: none; }
.pergunta { padding: 22px 0; border-top: 1px solid var(--line); }
.pergunta__titulo { margin: 0 0 .5rem; font-size: 1.15rem; }
.pergunta__resposta { margin: 0; color: var(--muted); }

/* Chamada final */
.chamada { padding: 72px 0; background: var(--navy); color: #fff; text-align: center; }
.chamada__caixa { max-width: 720px; margin-inline: auto; }
.chamada__titulo { margin: 0 0 .8rem; font-size: clamp(1.8rem, 3.5vw, 2.8rem); line-height: 1.15; }
.chamada__texto { margin: 0 0 1.6rem; color: #abc0cf; }

/* Canais de contato */
.canais { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.canal { padding: 24px; border: 1px solid var(--line); border-radius: var(--raio); background: #fff; }
.canal__rotulo { margin: 0 0 .4rem; color: var(--teal); font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.canal__valor { margin: 0 0 .5rem; font-size: 1.05rem; font-weight: 600; }
.canal__ajuda { margin: 0; color: var(--muted); font-size: .9rem; }

/* Link de texto com seta */
.elo { color: var(--teal); font-weight: 700; text-decoration: none; }
.elo:hover { text-decoration: underline; }

/* Separador entre metadados */
.projeto__separador { margin: 0 .35rem; color: var(--cinza-300, #C7CED3); }

/* ---------------------------------------------------------------------------
   A PÁGINA DO ARTIGO
   ---------------------------------------------------------------------------
   O template do artigo usa `artigo__*`, e a folha nova só trazia
   `artigo-cartao__*` e `artigo-corpo`. A página do artigo apareceria sem
   formatação nenhuma — texto cru numa coluna de largura total.
   --------------------------------------------------------------------------- */
.artigo { padding-top: 48px; }
.artigo__topo { margin-bottom: 28px; }
.artigo__titulo { margin: 12px 0 14px; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.1; letter-spacing: -.04em; }
.artigo__subtitulo { margin: 0 0 14px; color: var(--muted); font-size: 1.25rem; font-weight: 400; }
.artigo__meta, .artigo__atualizado { margin: 0; color: var(--muted); font-size: .88rem; }
.artigo__figura { margin: 0 0 30px; }
.artigo__figura img { width: 100%; height: auto; border-radius: var(--raio); background: #dfe8ec; }
.artigo__figura figcaption { margin-top: .5rem; color: var(--muted); font-size: .78rem; }
.artigo__resumo { margin: 0 0 28px; color: var(--ink); font-size: 1.15rem; font-weight: 500; line-height: 1.6; }
.artigo__voltar { margin-top: 40px; }

.artigo__corpo { color: var(--ink); font-size: 1rem; line-height: 1.75; }
.artigo__corpo > * + * { margin-top: 1.35rem; }
.artigo__corpo h2 { margin-top: 2.6rem; font-size: 1.9rem; line-height: 1.2; }
.artigo__corpo h3 { margin-top: 2rem; font-size: 1.35rem; }
.artigo__corpo ul, .artigo__corpo ol { padding-left: 1.4rem; }
.artigo__corpo li + li { margin-top: .4rem; }
.artigo__corpo a { color: var(--teal); }
.artigo__corpo img { max-width: 100%; height: auto; border-radius: var(--raio-sm); }
.artigo__corpo blockquote { margin-left: 0; padding-left: 1.2rem; border-left: 3px solid var(--teal); color: var(--muted); font-size: 1.1rem; }
.artigo__corpo code { padding: .1em .35em; border-radius: 6px; background: var(--soft); font-family: var(--mono); font-size: .9em; }

.artigo__fontes { margin-top: 40px; padding: 24px; border-radius: var(--raio); background: var(--soft); font-size: .9rem; }
.artigo__fontes-titulo { margin: 0 0 .5rem; font-size: 1rem; }

.artigos { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.artigo-cartao__titulo { margin: 8px 0 10px; font-size: 1.2rem; line-height: 1.3; }
.artigo-cartao__titulo a { color: var(--ink); text-decoration: none; }
.artigo-cartao__titulo a:hover { color: var(--teal); }
.artigo-cartao__resumo { margin: 0; color: var(--muted); font-size: .92rem; }
.artigo-cartao__meta { margin: auto 0 0; color: var(--muted); font-size: .78rem; }

/* Página de erro e diagnóstico */
.erro__texto { margin: 0 0 1.5rem; color: var(--muted); }
.verificacao { padding: 40px 0; }
.verificacao__item { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; padding: .75rem 1rem; border-radius: var(--raio-sm); background: var(--soft); }
.verificacao__item + .verificacao__item { margin-top: .5rem; }
.verificacao__nome { font-weight: 600; }
.verificacao__detalhe { color: var(--muted); font-size: .85rem; }
.lista-arquivos { margin: 1rem 0; padding: 0; list-style: none; font-size: .85rem; }
.lista-arquivos li { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; padding: .5rem .75rem; border-radius: var(--raio-sm); background: var(--soft); }
.lista-arquivos code { font-family: var(--mono); font-size: .78rem; word-break: break-all; }
.seo { margin-top: 1rem; }

@media (max-width: 900px) {
    .colunas, .cartoes--duas { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .etapa { grid-template-columns: 1fr; gap: 8px; }
    .artigo__titulo { font-size: 2rem; }
}