/* ==========================================================================
   WEBNOV DESIGN SYSTEM
   Versão 0.2.0

   Organização do arquivo:
     1. Tokens              cores, tipografia, espaçamento, forma
     2. Reset
     3. Utilitários
     4. Layout
     5. Componentes         botão, chapéu, cartão, selo…
     6. Blocos de conteúdo  abertura, etapas, projetos, perguntas…
     7. Cabeçalho e rodapé
     8. Páginas de sistema
     9. Responsivo
    10. Preferências e impressão

   Cores oficiais, conforme o Manual de Aplicação da Marca:
       Primária    #05898B
       Secundária  #6E6F71

   Nenhum valor de cor ou espaçamento é escrito solto fora da seção 1.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* Marca */
    --wn-primaria: #05898B;
    --wn-primaria-escura: #036B6D;
    --wn-primaria-profunda: #024F51;
    --wn-primaria-clara: #4FA7A8;
    --wn-primaria-lavada: #E8F3F3;
    --wn-secundaria: #6E6F71;

    /* Neutros */
    --wn-preto: #14181B;
    --wn-cinza-900: #232A2E;
    --wn-cinza-700: #454D53;
    --wn-cinza-500: #737C83;
    --wn-cinza-400: #98A1A8;
    --wn-cinza-300: #C7CED3;
    --wn-cinza-200: #E2E7EA;
    --wn-cinza-100: #F1F4F6;
    --wn-branco: #FFFFFF;

    /* Estado */
    --wn-sucesso: #17703F;
    --wn-sucesso-fundo: #E7F3EC;
    --wn-atencao: #8A5A12;
    --wn-atencao-fundo: #FBF2E2;
    --wn-erro: #A8221B;
    --wn-erro-fundo: #FAEAE9;

    /* Tipografia */
    --wn-fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --wn-fonte-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --wn-texto-xs: 0.75rem;
    --wn-texto-sm: 0.875rem;
    --wn-texto-md: 1rem;
    --wn-texto-lg: 1.125rem;
    --wn-texto-xl: 1.375rem;
    --wn-texto-2xl: 1.75rem;
    --wn-texto-3xl: 2.25rem;
    --wn-texto-4xl: 3rem;

    --wn-peso-normal: 400;
    --wn-peso-medio: 500;
    --wn-peso-forte: 600;

    /* Espaçamento — escala de 4px */
    --wn-esp-1: 0.25rem;
    --wn-esp-2: 0.5rem;
    --wn-esp-3: 0.75rem;
    --wn-esp-4: 1rem;
    --wn-esp-5: 1.25rem;
    --wn-esp-6: 1.5rem;
    --wn-esp-8: 2rem;
    --wn-esp-10: 2.5rem;
    --wn-esp-12: 3rem;
    --wn-esp-16: 4rem;
    --wn-esp-20: 5rem;
    --wn-esp-24: 6rem;

    /* Forma */
    --wn-raio-sm: 4px;
    --wn-raio: 8px;
    --wn-raio-lg: 14px;
    --wn-sombra-sm: 0 1px 2px rgba(20, 24, 27, .06);
    --wn-sombra: 0 1px 3px rgba(20, 24, 27, .07), 0 8px 24px rgba(20, 24, 27, .06);

    /* Layout */
    --wn-largura-max: 1140px;
    --wn-largura-texto: 720px;
    --wn-altura-cabecalho: 72px;

    /* Movimento */
    --wn-transicao: .18s ease;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--wn-altura-cabecalho) + var(--wn-esp-4));
}

body {
    margin: 0;
    font-family: var(--wn-fonte);
    font-size: var(--wn-texto-md);
    line-height: 1.65;
    color: var(--wn-cinza-900);
    background: var(--wn-branco);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    margin: 0 0 var(--wn-esp-4);
    line-height: 1.2;
    color: var(--wn-preto);
    font-weight: var(--wn-peso-forte);
    letter-spacing: -.015em;
    text-wrap: balance;
}

p { margin: 0 0 var(--wn-esp-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--wn-primaria); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--wn-primaria-escura); }

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

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; }

main { flex: 1; }

:focus-visible {
    outline: 3px solid var(--wn-primaria-clara);
    outline-offset: 2px;
    border-radius: var(--wn-raio-sm);
}

/* --------------------------------------------------------------------------
   3. UTILITÁRIOS
   -------------------------------------------------------------------------- */

/* Visível só para leitor de tela. */
.visualmente-oculto {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Link de acesso rápido ao conteúdo, para navegação por teclado. */
.pular {
    position: absolute;
    left: var(--wn-esp-4);
    top: -100px;
    z-index: 100;
    padding: var(--wn-esp-3) var(--wn-esp-5);
    background: var(--wn-primaria);
    color: var(--wn-branco);
    border-radius: 0 0 var(--wn-raio) var(--wn-raio);
    text-decoration: none;
    transition: top var(--wn-transicao);
}

.pular:focus {
    top: 0;
    color: var(--wn-branco);
}

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.conteiner {
    width: 100%;
    max-width: var(--wn-largura-max);
    margin-inline: auto;
    padding-inline: var(--wn-esp-6);
}

.secao { padding-block: var(--wn-esp-20); }

.secao--alternada { background: var(--wn-cinza-100); }

.secao__estreito { max-width: var(--wn-largura-texto); }

.secao__titulo {
    font-size: var(--wn-texto-2xl);
    margin-bottom: var(--wn-esp-5);
}

.secao__intro {
    max-width: var(--wn-largura-texto);
    color: var(--wn-cinza-700);
    font-size: var(--wn-texto-lg);
    margin-bottom: var(--wn-esp-10);
}

.secao__acao { margin-top: var(--wn-esp-10); }

/* --------------------------------------------------------------------------
   5. COMPONENTES
   -------------------------------------------------------------------------- */

/* 5.1 Chapéu — a etiqueta acima do título */
.chapeu {
    margin: 0 0 var(--wn-esp-3);
    font-size: var(--wn-texto-xs);
    font-weight: var(--wn-peso-forte);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--wn-primaria);
}

.chapeu--claro { color: rgba(255, 255, 255, .82); }

/* 5.2 Botão */
.botao {
    display: inline-block;
    padding: var(--wn-esp-3) var(--wn-esp-6);
    border: 1px solid var(--wn-primaria);
    border-radius: var(--wn-raio);
    background: var(--wn-primaria);
    color: var(--wn-branco);
    font-weight: var(--wn-peso-forte);
    text-decoration: none;
    text-align: center;
    transition: background-color var(--wn-transicao), border-color var(--wn-transicao), color var(--wn-transicao);
}

.botao:hover {
    background: var(--wn-primaria-escura);
    border-color: var(--wn-primaria-escura);
    color: var(--wn-branco);
}

.botao--contorno {
    background: transparent;
    color: var(--wn-primaria);
}

.botao--contorno:hover {
    background: var(--wn-primaria);
    color: var(--wn-branco);
}

.botao--claro {
    background: var(--wn-branco);
    border-color: var(--wn-branco);
    color: var(--wn-primaria-escura);
}

.botao--claro:hover {
    background: var(--wn-cinza-100);
    border-color: var(--wn-cinza-100);
    color: var(--wn-primaria-profunda);
}

.botao--contorno-claro {
    background: transparent;
    border-color: rgba(255, 255, 255, .5);
    color: var(--wn-branco);
}

.botao--contorno-claro:hover {
    background: rgba(255, 255, 255, .12);
    border-color: var(--wn-branco);
    color: var(--wn-branco);
}

/* 5.3 Elo — link com seta */
.elo {
    font-weight: var(--wn-peso-medio);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}

.elo::after { content: " →"; }

/* 5.4 Texto e listas */
.texto {
    max-width: var(--wn-largura-texto);
    color: var(--wn-cinza-700);
    margin-bottom: var(--wn-esp-5);
}

.lista-marcada {
    max-width: var(--wn-largura-texto);
    margin: var(--wn-esp-5) 0 0;
    display: grid;
    gap: var(--wn-esp-3);
}

.lista-marcada li {
    position: relative;
    padding-left: var(--wn-esp-6);
    color: var(--wn-cinza-700);
}

.lista-marcada li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .6em;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--wn-primaria-clara);
}

.lista-marcada--compacta { gap: var(--wn-esp-2); font-size: var(--wn-texto-sm); }

.nota {
    margin-top: var(--wn-esp-6);
    font-size: var(--wn-texto-sm);
    color: var(--wn-cinza-500);
}

/* 5.5 Cartões */
.cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--wn-esp-5);
}

.cartoes--duas { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.cartao {
    position: relative;
    background: var(--wn-branco);
    border: 1px solid var(--wn-cinza-200);
    border-radius: var(--wn-raio-lg);
    padding: var(--wn-esp-6);
    box-shadow: var(--wn-sombra-sm);
    overflow: hidden;
    transition: transform var(--wn-transicao), box-shadow var(--wn-transicao),
                border-color var(--wn-transicao);
}

/* Filete da marca que cresce da esquerda ao passar o mouse. Usa transform,
   e não largura, porque transform não obriga o navegador a recalcular o
   layout — a animação fica suave até em máquina fraca. */
.cartao::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--wn-primaria);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}

.cartao:hover {
    transform: translateY(-4px);
    border-color: var(--wn-cinza-300);
    box-shadow: 0 2px 6px rgba(20, 24, 27, .07), 0 16px 32px rgba(20, 24, 27, .10);
}

.cartao:hover::before { transform: scaleX(1); }

.cartao:hover .cartao__titulo { color: var(--wn-primaria-escura); }

.cartao__titulo { transition: color var(--wn-transicao); }

.cartao__titulo {
    font-size: var(--wn-texto-lg);
    margin-bottom: var(--wn-esp-3);
}

.cartao__texto {
    margin: 0;
    color: var(--wn-cinza-700);
    font-size: var(--wn-texto-sm);
    line-height: 1.7;
}

/* 5.6 Selo de estado */
.selo {
    display: inline-block;
    padding: 2px var(--wn-esp-3);
    border-radius: 999px;
    font-size: var(--wn-texto-xs);
    font-weight: var(--wn-peso-forte);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .06em;
    border: 1px solid transparent;
}

.selo--ok     { color: var(--wn-sucesso); background: var(--wn-sucesso-fundo); border-color: #BFE0CD; }
.selo--aviso  { color: var(--wn-atencao); background: var(--wn-atencao-fundo); border-color: #EBD9B6; }
.selo--erro   { color: var(--wn-erro);    background: var(--wn-erro-fundo);    border-color: #EFC6C3; }

/* --------------------------------------------------------------------------
   6. BLOCOS DE CONTEÚDO
   -------------------------------------------------------------------------- */

/* 6.1 Abertura */
.abertura {
    background: linear-gradient(140deg, var(--wn-primaria) 0%, var(--wn-primaria-profunda) 100%);
    color: var(--wn-branco);
    padding-block: var(--wn-esp-24);
}

.abertura--compacta { padding-block: var(--wn-esp-16) var(--wn-esp-12); }

.abertura__caixa { max-width: 780px; }

.abertura__titulo {
    color: var(--wn-branco);
    font-size: var(--wn-texto-4xl);
    font-weight: var(--wn-peso-normal);
    letter-spacing: -.03em;
    margin-bottom: var(--wn-esp-5);
}

.abertura--compacta .abertura__titulo { font-size: var(--wn-texto-3xl); }

.abertura__texto {
    font-size: var(--wn-texto-lg);
    color: rgba(255, 255, 255, .9);
    margin-bottom: var(--wn-esp-8);
}

.abertura__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wn-esp-3);
    margin: 0;
}

/* 6.2 Duas colunas contrapostas */
.colunas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--wn-esp-5);
}

.coluna {
    border: 1px solid var(--wn-cinza-200);
    border-radius: var(--wn-raio-lg);
    padding: var(--wn-esp-6);
    background: var(--wn-branco);
}

.coluna--sim { border-top: 3px solid var(--wn-primaria); }
.coluna--nao { border-top: 3px solid var(--wn-cinza-400); }
.coluna--plano { border-top: 3px solid var(--wn-primaria-clara); background: var(--wn-primaria-lavada); }

.coluna__titulo {
    font-size: var(--wn-texto-lg);
    margin-bottom: var(--wn-esp-4);
}

.coluna__lista { display: grid; gap: var(--wn-esp-3); }

.coluna__lista li {
    position: relative;
    padding-left: var(--wn-esp-6);
    color: var(--wn-cinza-700);
    font-size: var(--wn-texto-sm);
    line-height: 1.7;
}

.coluna__lista li::before {
    position: absolute;
    left: 0;
    top: 0;
    font-weight: var(--wn-peso-forte);
}

.coluna--sim .coluna__lista li::before { content: "✓"; color: var(--wn-primaria); }
.coluna--nao .coluna__lista li::before { content: "✕"; color: var(--wn-cinza-400); }
.coluna--plano .coluna__lista li::before { content: "✓"; color: var(--wn-primaria-escura); }

/* 6.3 Etapas */
.etapas {
    display: grid;
    /* Quatro colunas de largura igual. auto-fit deixava a última linha com um
       cartão solto e desproporcional quando o número não fechava a grade. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--wn-esp-6);
    counter-reset: etapa;
}

.etapa {
    padding: var(--wn-esp-5);
    background: var(--wn-branco);
    border: 1px solid var(--wn-cinza-200);
    border-radius: var(--wn-raio-lg);
    transition: transform var(--wn-transicao), box-shadow var(--wn-transicao);
}

.etapas--detalhadas .etapa {
    padding: 0;
    background: transparent;
    border: 0;
}

.etapas:not(.etapas--detalhadas) .etapa:hover {
    transform: translateY(-4px);
    box-shadow: 0 2px 6px rgba(20, 24, 27, .07), 0 16px 32px rgba(20, 24, 27, .10);
}

.etapas--detalhadas {
    grid-template-columns: 1fr;
    max-width: var(--wn-largura-texto);
    gap: var(--wn-esp-8);
}

.etapa { display: grid; gap: var(--wn-esp-3); }

.etapas--detalhadas .etapa {
    grid-template-columns: auto 1fr;
    gap: var(--wn-esp-5);
    align-items: start;
}

.etapa__numero {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--wn-primaria);
    color: var(--wn-branco);
    font-weight: var(--wn-peso-forte);
    font-size: var(--wn-texto-sm);
}

.etapa__corpo { min-width: 0; }

.etapa__titulo { font-size: var(--wn-texto-lg); margin-bottom: var(--wn-esp-2); }

.etapa__texto {
    margin: 0;
    color: var(--wn-cinza-700);
    font-size: var(--wn-texto-sm);
    line-height: 1.7;
}

.etapa__voce {
    margin: var(--wn-esp-3) 0 0;
    padding-left: var(--wn-esp-4);
    border-left: 2px solid var(--wn-primaria-clara);
    color: var(--wn-cinza-500);
    font-size: var(--wn-texto-sm);
}

.etapa__voce strong { color: var(--wn-cinza-700); }

/* 6.4 Projetos
   O card imita a janela de um navegador: barra com endereço e a página dentro.
   Diz "isto é um site no ar" sem precisar de legenda. */
.projetos {
    display: grid;
    /* Teto de 400px por coluna: com um único projeto na lista, 1fr faria o card
       ocupar a largura inteira da tela e parecer um erro de layout. */
    grid-template-columns: repeat(auto-fit, minmax(280px, 400px));
    justify-content: start;
    gap: var(--wn-esp-8);
}

.projetos--detalhados { grid-template-columns: 1fr; gap: var(--wn-esp-10); }
.projetos--detalhados .projeto__corpo { padding-top: var(--wn-esp-2); }

.projeto {
    display: flex;
    flex-direction: column;
    gap: var(--wn-esp-5);
}

.projetos--detalhados .projeto {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--wn-esp-10);
}

/* Janela de navegador */
.projeto__janela {
    border: 1px solid var(--wn-cinza-300);
    border-radius: var(--wn-raio-lg);
    overflow: hidden;
    background: var(--wn-branco);
    box-shadow: var(--wn-sombra);
    transition: transform var(--wn-transicao), box-shadow var(--wn-transicao);
}

.projetos--detalhados .projeto__janela { flex: 0 0 46%; }

.projeto:hover .projeto__janela {
    transform: translateY(-3px);
    box-shadow: 0 2px 6px rgba(20, 24, 27, .08), 0 18px 40px rgba(20, 24, 27, .12);
}

.projeto__barra {
    display: flex;
    align-items: center;
    gap: var(--wn-esp-3);
    padding: var(--wn-esp-3) var(--wn-esp-4);
    background: var(--wn-cinza-100);
    border-bottom: 1px solid var(--wn-cinza-200);
}

.projeto__botoes { display: flex; gap: 6px; flex: 0 0 auto; }

.projeto__ponto {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--wn-cinza-300);
    display: block;
}

.projeto__ponto:first-child { background: var(--wn-primaria-clara); }

.projeto__endereco {
    flex: 1;
    min-width: 0;
    padding: 3px var(--wn-esp-3);
    background: var(--wn-branco);
    border: 1px solid var(--wn-cinza-200);
    border-radius: 999px;
    font-family: var(--wn-fonte-mono);
    font-size: var(--wn-texto-xs);
    color: var(--wn-cinza-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.projeto__tela {
    aspect-ratio: 16 / 10;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 30% 25%, rgba(79, 167, 168, .22) 0%, transparent 55%),
        linear-gradient(140deg, var(--wn-primaria-lavada) 0%, var(--wn-cinza-100) 100%);
    overflow: hidden;
}

.projeto__tela img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* Enquanto não há captura, a tela mostra o esqueleto de uma página em vez
   de ficar vazia. Área em branco parece defeito; esqueleto parece espera. */
.projeto__esqueleto {
    width: 100%;
    height: 100%;
    padding: 8% 8% 0;
    display: flex;
    flex-direction: column;
    gap: 6%;
}

.projeto__esqueleto span {
    display: block;
    border-radius: 3px;
    background: var(--wn-primaria);
    opacity: .16;
}

.projeto__esqueleto span:nth-child(1) { height: 9%;  opacity: .30; }
.projeto__esqueleto span:nth-child(2) { height: 22%; opacity: .22; }
.projeto__esqueleto span:nth-child(3) { height: 7%;  width: 55%; }
.projeto__esqueleto span:nth-child(4) { height: 7%;  width: 38%; }

.projeto__esqueleto-linha {
    display: flex;
    gap: 4%;
    height: 24%;
}

.projeto__esqueleto-linha span { flex: 1; height: 100%; border-radius: 4px; opacity: .13; }

.projeto__aviso-captura {
    margin: 0;
    padding: var(--wn-esp-2) var(--wn-esp-4);
    font-size: var(--wn-texto-xs);
    color: var(--wn-cinza-500);
    text-align: center;
    background: var(--wn-cinza-100);
    border-top: 1px solid var(--wn-cinza-200);
}

/* Texto do projeto */
.projeto__corpo { flex: 1; min-width: 0; }

.projeto__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wn-esp-2);
    margin: 0 0 var(--wn-esp-2);
    font-size: var(--wn-texto-xs);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--wn-cinza-500);
}

.projeto__separador { color: var(--wn-cinza-300); }

.projeto__situacao {
    padding: 1px var(--wn-esp-2);
    border-radius: 999px;
    background: var(--wn-sucesso-fundo);
    border: 1px solid #BFE0CD;
    color: var(--wn-sucesso);
    font-weight: var(--wn-peso-forte);
    letter-spacing: .04em;
    text-transform: none;
}

.projeto__titulo { font-size: var(--wn-texto-xl); margin-bottom: var(--wn-esp-1); }

.projeto__local {
    margin: 0 0 var(--wn-esp-4);
    font-size: var(--wn-texto-sm);
    color: var(--wn-cinza-500);
}

.projeto__resumo {
    color: var(--wn-cinza-700);
    font-size: var(--wn-texto-sm);
    line-height: 1.75;
    margin-bottom: var(--wn-esp-4);
}

.projeto__rotulo {
    margin: var(--wn-esp-5) 0 0;
    font-size: var(--wn-texto-xs);
    font-weight: var(--wn-peso-forte);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--wn-cinza-500);
}

.projeto__acao { margin: var(--wn-esp-6) 0 0; }

/* Etiquetas */
.etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wn-esp-2);
    margin-top: var(--wn-esp-5);
}

.etiqueta {
    padding: 3px var(--wn-esp-3);
    border: 1px solid var(--wn-cinza-200);
    border-radius: 999px;
    background: var(--wn-cinza-100);
    font-size: var(--wn-texto-xs);
    color: var(--wn-cinza-700);
}

/* 6.5 Perguntas */
.perguntas { border-top: 1px solid var(--wn-cinza-300); }

.pergunta { border-bottom: 1px solid var(--wn-cinza-300); }

.pergunta__titulo {
    cursor: pointer;
    list-style: none;
    padding: var(--wn-esp-5) var(--wn-esp-10) var(--wn-esp-5) 0;
    font-weight: var(--wn-peso-medio);
    font-size: var(--wn-texto-lg);
    position: relative;
}

.pergunta__titulo::-webkit-details-marker { display: none; }

.pergunta__titulo::after {
    content: "+";
    position: absolute;
    right: var(--wn-esp-2);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--wn-texto-xl);
    font-weight: var(--wn-peso-normal);
    color: var(--wn-primaria);
    line-height: 1;
}

.pergunta[open] .pergunta__titulo::after { content: "−"; }

.pergunta__resposta {
    padding: 0 var(--wn-esp-10) var(--wn-esp-6) 0;
    color: var(--wn-cinza-700);
}

/* 6.6 Chamada final */
.chamada {
    background: var(--wn-primaria-profunda);
    color: var(--wn-branco);
    padding-block: var(--wn-esp-16);
}

.chamada__caixa { max-width: 640px; }

.chamada__titulo {
    color: var(--wn-branco);
    font-size: var(--wn-texto-2xl);
    font-weight: var(--wn-peso-normal);
}

.chamada__texto {
    color: rgba(255, 255, 255, .85);
    margin-bottom: var(--wn-esp-6);
}

/* 6.7 Canais de contato */
.canais { display: grid; gap: var(--wn-esp-4); }

.canal {
    border: 1px solid var(--wn-cinza-200);
    border-left: 3px solid var(--wn-primaria);
    border-radius: var(--wn-raio);
    background: var(--wn-branco);
    padding: var(--wn-esp-5) var(--wn-esp-6);
}

.canal__rotulo {
    margin: 0;
    font-size: var(--wn-texto-xs);
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--wn-cinza-500);
}

.canal__valor {
    margin: var(--wn-esp-1) 0;
    font-size: var(--wn-texto-lg);
    font-weight: var(--wn-peso-medio);
}

.canal__valor a { text-decoration: none; }
.canal__valor a:hover { text-decoration: underline; }

.canal__ajuda {
    margin: 0;
    font-size: var(--wn-texto-sm);
    color: var(--wn-cinza-500);
}

/* --------------------------------------------------------------------------
   7. CABEÇALHO E RODAPÉ
   -------------------------------------------------------------------------- */
.cabecalho {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--wn-cinza-200);
}

.cabecalho__linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wn-esp-4);
    min-height: var(--wn-altura-cabecalho);
}

.cabecalho__marca { display: block; flex: 0 0 auto; }
.cabecalho__marca img { width: 190px; height: auto; }

.cabecalho__botao {
    display: none;
    align-items: center;
    gap: var(--wn-esp-2);
    padding: var(--wn-esp-2) var(--wn-esp-3);
    background: transparent;
    border: 1px solid var(--wn-cinza-300);
    border-radius: var(--wn-raio-sm);
    cursor: pointer;
    font-size: var(--wn-texto-sm);
    font-weight: var(--wn-peso-medio);
}

.cabecalho__botao-traco {
    position: relative;
    width: 16px; height: 2px;
    background: var(--wn-cinza-900);
    display: block;
}

.cabecalho__botao-traco::before,
.cabecalho__botao-traco::after {
    content: "";
    position: absolute;
    left: 0;
    width: 16px; height: 2px;
    background: var(--wn-cinza-900);
}

.cabecalho__botao-texto { line-height: 1; }

.cabecalho__botao-traco::before { top: -5px; }
.cabecalho__botao-traco::after  { top: 5px; }

.cabecalho__lista {
    display: flex;
    align-items: center;
    gap: var(--wn-esp-1);
}

.cabecalho__link {
    display: block;
    padding: var(--wn-esp-2) var(--wn-esp-3);
    border-radius: var(--wn-raio-sm);
    color: var(--wn-cinza-700);
    font-size: var(--wn-texto-sm);
    font-weight: var(--wn-peso-medio);
    text-decoration: none;
    transition: color var(--wn-transicao), background-color var(--wn-transicao);
}

.cabecalho__link:hover { color: var(--wn-primaria); background: var(--wn-cinza-100); }

.cabecalho__link--atual { color: var(--wn-primaria); }

/* Trilha */
.trilha {
    border-bottom: 1px solid var(--wn-cinza-200);
    background: var(--wn-cinza-100);
    font-size: var(--wn-texto-sm);
}

.trilha__lista {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wn-esp-2);
    padding-block: var(--wn-esp-3);
    color: var(--wn-cinza-500);
}

.trilha__item + .trilha__item::before {
    content: "/";
    margin-right: var(--wn-esp-2);
    color: var(--wn-cinza-300);
}

/* Rodapé */
.rodape {
    background: var(--wn-preto);
    color: var(--wn-cinza-300);
    padding-block: var(--wn-esp-16) var(--wn-esp-6);
    margin-top: auto;
}

.rodape__grade {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--wn-esp-10);
    padding-bottom: var(--wn-esp-10);
}

.rodape__marca { width: 170px; margin-bottom: var(--wn-esp-5); }

.rodape__resumo {
    max-width: 42ch;
    font-size: var(--wn-texto-sm);
    color: var(--wn-cinza-400);
    line-height: 1.7;
}

.rodape__coluna { min-width: 0; }

.rodape__titulo {
    font-size: var(--wn-texto-xs);
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--wn-branco);
    margin-bottom: var(--wn-esp-4);
    font-weight: var(--wn-peso-forte);
}

.rodape__lista { display: grid; gap: var(--wn-esp-2); font-size: var(--wn-texto-sm); }
.rodape__lista a { color: var(--wn-cinza-300); text-decoration: none; }
.rodape__lista a:hover { color: var(--wn-branco); text-decoration: underline; }

.rodape__redes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wn-esp-4);
    margin-top: var(--wn-esp-5);
    font-size: var(--wn-texto-sm);
}

.rodape__redes a { color: var(--wn-primaria-clara); text-decoration: none; }
.rodape__redes a:hover { color: var(--wn-branco); }

.rodape__base {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--wn-esp-4);
    padding-top: var(--wn-esp-6);
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.rodape__direitos,
.rodape__versao {
    margin: 0;
    font-size: var(--wn-texto-xs);
    color: var(--wn-cinza-500);
}

.rodape__versao { font-family: var(--wn-fonte-mono); }

/* --------------------------------------------------------------------------
   8. PÁGINAS DE SISTEMA
   -------------------------------------------------------------------------- */
.verificacao {
    border: 1px solid var(--wn-cinza-200);
    border-radius: var(--wn-raio-lg);
    overflow: hidden;
}

.verificacao__item {
    display: grid;
    grid-template-columns: 5.5rem 1fr auto;
    align-items: center;
    gap: var(--wn-esp-4);
    padding: var(--wn-esp-3) var(--wn-esp-5);
    border-bottom: 1px solid var(--wn-cinza-100);
}

.verificacao__item:last-child { border-bottom: 0; }

.verificacao__nome { font-weight: var(--wn-peso-medio); }

.verificacao__detalhe {
    color: var(--wn-cinza-500);
    font-family: var(--wn-fonte-mono);
    font-size: var(--wn-texto-sm);
    text-align: right;
}

.erro { text-align: center; padding-block: var(--wn-esp-24); }
.erro .secao__estreito { margin-inline: auto; }

.erro__codigo {
    margin: 0;
    font-size: 4.5rem;
    font-weight: 200;
    color: var(--wn-primaria);
    line-height: 1;
}

.erro__titulo { font-size: var(--wn-texto-2xl); font-weight: var(--wn-peso-normal); }
.erro__texto { color: var(--wn-cinza-700); margin-bottom: var(--wn-esp-8); }

.erro__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wn-esp-3);
    justify-content: center;
}

/* --------------------------------------------------------------------------
   9. RESPONSIVO
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
    .etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .etapas--detalhadas { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .rodape__grade { grid-template-columns: 1fr 1fr; }
    .rodape__marca-bloco { grid-column: 1 / -1; }
    .projetos--detalhados .projeto { flex-direction: column; gap: var(--wn-esp-6); }
    .projetos--detalhados .projeto__janela { flex: 0 0 auto; width: 100%; }
}

@media (max-width: 720px) {
    :root {
        --wn-texto-4xl: 2.125rem;
        --wn-texto-3xl: 1.75rem;
        --wn-texto-2xl: 1.5rem;
    }

    .conteiner { padding-inline: var(--wn-esp-5); }
    .secao { padding-block: var(--wn-esp-12); }
    .abertura { padding-block: var(--wn-esp-16) var(--wn-esp-12); }

    /* O menu só é recolhido se o JavaScript estiver ativo. Sem ele, a lista
       aparece empilhada e o site continua navegável. */
    .js .cabecalho__botao { display: flex; }

    .js .cabecalho__nav {
        display: none;
        position: absolute;
        left: 0; right: 0;
        top: 100%;
        background: var(--wn-branco);
        border-bottom: 1px solid var(--wn-cinza-200);
        box-shadow: var(--wn-sombra);
        padding: var(--wn-esp-3) var(--wn-esp-5) var(--wn-esp-5);
    }

    .js .cabecalho__nav[data-aberto="true"] { display: block; }

    .cabecalho__linha { position: relative; flex-wrap: wrap; }
    .cabecalho__marca img { width: 150px; }

    .cabecalho__lista { flex-direction: column; align-items: stretch; gap: 0; }
    .cabecalho__link { padding: var(--wn-esp-3) var(--wn-esp-2); font-size: var(--wn-texto-md); }

    .rodape__grade { grid-template-columns: 1fr; gap: var(--wn-esp-8); }
    .rodape__base { flex-direction: column; align-items: flex-start; gap: var(--wn-esp-2); }

    .verificacao__item { grid-template-columns: 4.5rem 1fr; }
    .verificacao__detalhe { grid-column: 2; text-align: left; }

    .etapas { grid-template-columns: 1fr; }
    .etapas--detalhadas .etapa { grid-template-columns: 1fr; gap: var(--wn-esp-3); }
}

/* --------------------------------------------------------------------------
   10. PREFERÊNCIAS E IMPRESSÃO
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

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

@media print {
    .cabecalho, .rodape, .pular, .chamada, .trilha { display: none; }
    .abertura { background: none; color: var(--wn-preto); padding-block: var(--wn-esp-6); }
    .abertura__titulo, .chapeu--claro { color: var(--wn-preto); }
    body { font-size: 11pt; }
}

/* --------------------------------------------------------------------------
   12. FORMULÁRIO DE CONTATO
   -------------------------------------------------------------------------- */
.formulario { max-width: var(--wn-largura-texto); }

.formulario .campo { margin-bottom: var(--wn-esp-5); }

.campo__rotulo {
    display: block;
    margin-bottom: var(--wn-esp-2);
    font-weight: var(--wn-peso-medio);
    font-size: var(--wn-texto-sm);
    color: var(--wn-cinza-700);
}

.campo__opcional { font-weight: var(--wn-peso-normal); color: var(--wn-cinza-500); }

.campo__entrada {
    width: 100%;
    padding: var(--wn-esp-3) var(--wn-esp-4);
    border: 1px solid var(--wn-cinza-300);
    border-radius: var(--wn-raio);
    background: var(--wn-branco);
    font: inherit;
    color: inherit;
    transition: border-color var(--wn-transicao);
}

.campo__entrada:focus { border-color: var(--wn-primaria); }
textarea.campo__entrada { resize: vertical; min-height: 120px; }

.campo__ajuda { margin: var(--wn-esp-2) 0 0; font-size: var(--wn-texto-sm); color: var(--wn-cinza-500); }

/* Campo isca: precisa existir no HTML para o robô encontrar, e ser
   invisível para a pessoa. display:none faria robôs mais espertos ignorá-lo. */
.isca {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.aviso {
    padding: var(--wn-esp-4) var(--wn-esp-5);
    border-radius: var(--wn-raio);
    border: 1px solid transparent;
    margin-bottom: var(--wn-esp-6);
}

.aviso--ok   { background: var(--wn-sucesso-fundo); border-color: #BFE0CD; color: var(--wn-sucesso); }
.aviso--erro { background: var(--wn-erro-fundo);    border-color: #EFC6C3; color: var(--wn-erro); }

/* --------------------------------------------------------------------------
   13. CONFERÊNCIA DA INSTALAÇÃO
   -------------------------------------------------------------------------- */
.secao__titulo--espacado { margin-top: var(--wn-esp-12); }

.aviso--aviso { background: var(--wn-atencao-fundo); border-color: #EBD9B6; color: var(--wn-atencao); }

.lista-arquivos {
    display: grid;
    gap: var(--wn-esp-2);
    margin: 0 0 var(--wn-esp-6);
    font-size: var(--wn-texto-sm);
}

.lista-arquivos li {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wn-esp-3);
    justify-content: space-between;
    padding: var(--wn-esp-2) var(--wn-esp-3);
    background: var(--wn-cinza-100);
    border-radius: var(--wn-raio-sm);
}

.lista-arquivos code {
    font-family: var(--wn-fonte-mono);
    font-size: var(--wn-texto-xs);
    word-break: break-all;
}

.lista-arquivos span { color: var(--wn-cinza-500); font-size: var(--wn-texto-xs); white-space: nowrap; }

/* ===========================================================================
   BLOG
   ===========================================================================
   Reaproveita os tokens e o ritmo do resto do site. Nada de tipografia nova:
   um blog que parece outro site dentro do site é o jeito mais rápido de a
   pessoa achar que clicou errado.
   =========================================================================== */

/* Filtros por categoria ---------------------------------------------------- */
.blog-filtros {
    margin: var(--wn-esp-6) 0 var(--wn-esp-8);
}

.blog-filtros__lista {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wn-esp-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-filtro {
    display: inline-block;
    padding: var(--wn-esp-2) var(--wn-esp-4);
    border: 1px solid var(--wn-cinza-300);
    border-radius: 999px;
    color: var(--wn-cinza-700);
    font-size: var(--wn-texto-sm);
    text-decoration: none;
}

.blog-filtro:hover,
.blog-filtro:focus-visible {
    border-color: var(--wn-primaria);
    color: var(--wn-primaria-escura);
}

.blog-filtro--atual {
    background: var(--wn-primaria);
    border-color: var(--wn-primaria);
    color: var(--wn-branco);
}

/* Lista de artigos --------------------------------------------------------- */
.artigos {
    display: grid;
    gap: var(--wn-esp-6);
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.artigo-cartao {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--wn-branco);
    border: 1px solid var(--wn-cinza-200);
    border-radius: var(--wn-raio);
}

.artigo-cartao__imagem {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--wn-cinza-100);
}

.artigo-cartao__imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.artigo-cartao__corpo {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--wn-esp-2);
    padding: var(--wn-esp-5);
}

.artigo-cartao__titulo {
    margin: 0;
    font-size: var(--wn-texto-lg);
    font-weight: var(--wn-peso-forte);
    line-height: 1.3;
}

.artigo-cartao__titulo a {
    color: var(--wn-cinza-900);
    text-decoration: none;
}

.artigo-cartao__titulo a:hover,
.artigo-cartao__titulo a:focus-visible {
    color: var(--wn-primaria-escura);
}

.artigo-cartao__resumo {
    margin: 0;
    color: var(--wn-cinza-700);
    font-size: var(--wn-texto-sm);
}

.artigo-cartao__meta {
    margin: auto 0 0;
    color: var(--wn-cinza-500);
    font-size: var(--wn-texto-xs);
}

/* Paginação ---------------------------------------------------------------- */
.paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wn-esp-4);
    margin-top: var(--wn-esp-8);
}

.paginacao__contador {
    color: var(--wn-cinza-500);
    font-size: var(--wn-texto-sm);
}

/* O artigo ----------------------------------------------------------------- */
.artigo__topo {
    margin-bottom: var(--wn-esp-6);
}

.artigo__titulo {
    margin: 0 0 var(--wn-esp-3);
    font-size: var(--wn-texto-3xl);
    line-height: 1.15;
}

.artigo__subtitulo {
    margin: 0 0 var(--wn-esp-3);
    color: var(--wn-cinza-700);
    font-size: var(--wn-texto-xl);
    font-weight: var(--wn-peso-normal);
}

.artigo__meta,
.artigo__atualizado {
    margin: 0;
    color: var(--wn-cinza-500);
    font-size: var(--wn-texto-sm);
}

.artigo__figura {
    margin: 0 0 var(--wn-esp-6);
}

.artigo__figura img {
    width: 100%;
    height: auto;
    border-radius: var(--wn-raio);
}

.artigo__figura figcaption {
    margin-top: var(--wn-esp-2);
    color: var(--wn-cinza-500);
    font-size: var(--wn-texto-xs);
}

.artigo__resumo {
    margin: 0 0 var(--wn-esp-6);
    color: var(--wn-cinza-900);
    font-size: var(--wn-texto-lg);
    font-weight: var(--wn-peso-medio);
    line-height: 1.6;
}

/* O corpo do artigo é HTML vindo do editor. As regras são por elemento, e não
   por classe, porque quem escreve não põe classe em nada — e não deveria
   precisar. */
.artigo__corpo {
    color: var(--wn-cinza-900);
    font-size: var(--wn-texto-md);
    line-height: 1.75;
}

.artigo__corpo > * + * { margin-top: var(--wn-esp-5); }

.artigo__corpo h2 {
    margin-top: var(--wn-esp-8);
    font-size: var(--wn-texto-2xl);
    line-height: 1.25;
}

.artigo__corpo h3 {
    margin-top: var(--wn-esp-6);
    font-size: var(--wn-texto-xl);
    line-height: 1.3;
}

.artigo__corpo ul,
.artigo__corpo ol { padding-left: var(--wn-esp-6); }
.artigo__corpo li + li { margin-top: var(--wn-esp-2); }

.artigo__corpo a { color: var(--wn-primaria-escura); }

.artigo__corpo img {
    max-width: 100%;
    height: auto;
    border-radius: var(--wn-raio-sm);
}

.artigo__corpo blockquote {
    margin-left: 0;
    padding-left: var(--wn-esp-5);
    border-left: 3px solid var(--wn-primaria);
    color: var(--wn-cinza-700);
    font-size: var(--wn-texto-lg);
}

.artigo__corpo code {
    padding: 0.1em 0.35em;
    background: var(--wn-cinza-100);
    border-radius: var(--wn-raio-sm);
    font-family: var(--wn-fonte-mono);
    font-size: 0.9em;
}

.artigo__fontes {
    margin-top: var(--wn-esp-8);
    padding: var(--wn-esp-5);
    background: var(--wn-cinza-100);
    border-radius: var(--wn-raio);
    font-size: var(--wn-texto-sm);
}

.artigo__fontes-titulo {
    margin: 0 0 var(--wn-esp-2);
    font-size: var(--wn-texto-md);
}

.artigo__voltar { margin-top: var(--wn-esp-8); }

@media (max-width: 40rem) {
    .artigo__titulo { font-size: var(--wn-texto-2xl); }
}

/* Título de página que é a própria página (blog, categoria), e não título de
   seção dentro de uma. Precisa do peso de um H1 sem herdar o recuo de seção. */
.secao__titulo--pagina {
    margin-top: 0;
    font-size: var(--wn-texto-3xl);
    line-height: 1.15;
}

@media (max-width: 40rem) {
    .secao__titulo--pagina { font-size: var(--wn-texto-2xl); }
}