/* Site institucional do IValida (/site/). Autocontido: sem fontes, imagens ou recursos externos e sem estilos
 * inline, compatível com CSP default-src 'self'. As cores da marca vêm de /static/marca/tokens.css (--iv-*);
 * os valores após a vírgula em var() são o mesmo token, para a página continuar correta se aquele arquivo faltar.
 *
 * Princípio de cor: azul é a estrutura e as ações; vermelho aparece só onde um revisor marcaria algo a corrigir
 * (o "I" da marca, erros e crédito em risco); verde e âmbar só como situação de nota. */

:root {
  --vermelho: var(--iv-vermelho, #D7263D);
  --vermelho-escuro: var(--iv-vermelho-escuro, #A61B2E);
  --azul: var(--iv-azul, #1D4ED8);
  --azul-escuro: var(--iv-azul-escuro, #123A9C);
  --noite: var(--iv-azul-noite, #0B1B3F);
  --azul-claro: var(--iv-azul-claro, #E8EEFC);
  --fundo: var(--iv-fundo, #F7F8FB);
  --superficie: var(--iv-superficie, #FFFFFF);
  --texto: var(--iv-texto, #0F172A);
  --texto-suave: var(--iv-texto-suave, #475569);
  --borda: var(--iv-borda, #E2E8F0);
  --sucesso: var(--iv-sucesso, #15803D);
  --alerta: var(--iv-alerta, #B45309);
  --erro: var(--iv-erro, #B91C1C);
  --info: var(--iv-info, #0369A1);
  --raio: var(--iv-raio, 12px);

  /* derivados do site */
  --linha-pauta: rgba(29, 78, 216, 0.07);
  --vermelho-claro: var(--iv-erro-fundo, #FDECEC);
  --verde-claro: var(--iv-sucesso-fundo, #ECFDF3);
  --ambar-claro: var(--iv-alerta-fundo, #FEF3E2);
  --sombra: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px -12px rgba(15, 23, 42, 0.18);
  --sombra-alta: 0 2px 4px rgba(11, 27, 63, 0.06), 0 24px 48px -20px rgba(11, 27, 63, 0.35);
  --fonte: var(--iv-fonte-texto, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  --fonte-titulo: var(--iv-fonte-titulo, "Avenir Next", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif);
  --mono: var(--iv-fonte-mono, ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace);
  --largura: 1180px;
  --gutter: 20px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #0A1226;
    --superficie: #111C36;
    --texto: #E6ECF8;
    --texto-suave: #A9B6CF;
    --borda: #22304F;
    --azul: #7EA2FF;
    --azul-escuro: #A9C0FF;
    --azul-claro: #16254A;
    --vermelho: #FF6B7D;
    --vermelho-claro: #3A1420;
    --sucesso: #4ADE80;
    --verde-claro: #0F2E1D;
    --alerta: #FBBF24;
    --ambar-claro: #33250C;
    --linha-pauta: rgba(126, 162, 255, 0.06);
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  }
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--fundo); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 400 16px/1.6 var(--fonte); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word; }
h1, h2, h3 { margin: 0 0 14px; font-family: var(--fonte-titulo); color: var(--texto); font-weight: 750; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: clamp(34px, 6.4vw, 58px); line-height: 1.06; letter-spacing: -0.032em; }
h2 { font-size: clamp(26px, 3.6vw, 38px); line-height: 1.14; }
h3 { font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0 0 14px; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--azul); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--azul-escuro); text-decoration-thickness: 2px; }
strong { font-weight: 650; }
code { font-family: var(--mono); font-size: 0.88em; background: var(--azul-claro); color: var(--texto); padding: 1px 6px; border-radius: 6px; }
svg { flex: none; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pular { position: absolute; left: 16px; top: -80px; z-index: 50; background: var(--noite); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 600; }
.pular:focus { top: 12px; color: #fff; }

.interno { max-width: var(--largura); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 720px) { :root { --gutter: 32px; } }

/* ---------- marca (wordmark: I vermelho, Valida azul) ---------- */

.marca { display: inline-flex; align-items: center; padding: 8px 0; line-height: 0; }
.logo { display: block; height: 26px; width: auto; }
.logo-i { fill: var(--vermelho); }
.logo-v { fill: var(--azul); }
.rodape .logo { height: 30px; }
.rodape .logo-v { fill: #FFFFFF; }
.rodape .logo-i { fill: #FF5A6E; }

/* ---------- topo ---------- */

.topo { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--superficie) 92%, transparent); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--borda); }
.topo-interno { max-width: var(--largura); margin: 0 auto; padding: 10px var(--gutter); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 16px; }
.topo nav { grid-column: 1 / -1; order: 3; margin: 0 -8px; }
.nav { list-style: none; display: flex; flex-wrap: wrap; gap: 0 2px; }
.nav a { display: block; padding: 8px; color: var(--texto-suave); text-decoration: none; font-size: 14.5px; font-weight: 550; border-radius: 8px; }
.nav a:hover { color: var(--texto); background: var(--azul-claro); }
.nav a[aria-current="page"] { color: var(--azul); box-shadow: inset 0 -2px 0 var(--azul); border-radius: 0; }
.topo-acao { justify-self: end; }
@media (min-width: 960px) {
  .topo-interno { grid-template-columns: auto 1fr auto; padding-top: 12px; padding-bottom: 12px; }
  .topo nav { grid-column: auto; order: 0; margin: 0; justify-self: center; }
  .nav a { padding: 8px 12px; font-size: 15px; }
}

/* ---------- botões ---------- */

.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 11px 20px; border-radius: 10px; font: 650 15.5px/1.2 var(--fonte); text-decoration: none; border: 1px solid transparent; transition: background-color .15s, border-color .15s, color .15s; }
.botao.primario { background: var(--azul); color: #FFFFFF; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.botao.primario:hover { background: var(--azul-escuro); color: #FFFFFF; }
.botao.secundario { background: var(--superficie); color: var(--texto); border-color: #CBD5E1; }
.botao.secundario:hover { border-color: var(--azul); color: var(--azul); }
.botao.claro { background: #FFFFFF; color: var(--noite); }
.botao.claro:hover { background: var(--azul-claro); color: var(--noite); }
.botao.contorno-claro { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.45); background: transparent; }
.botao.contorno-claro:hover { border-color: #FFFFFF; color: #FFFFFF; background: rgba(255, 255, 255, 0.08); }
.topo-acao { min-height: 40px; padding: 8px 14px; font-size: 14.5px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .botao.primario { background: #2F5BEA; }
  :root:not([data-theme="light"]) .botao.primario:hover { background: #4169F0; }
  :root:not([data-theme="light"]) .botao.secundario { border-color: var(--borda); }
}
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ---------- hero ---------- */

.hero { position: relative; padding: 44px 0 56px; background:
    linear-gradient(180deg, transparent 0, var(--fundo) 100%),
    repeating-linear-gradient(180deg, transparent 0 31px, var(--linha-pauta) 31px 32px); border-bottom: 1px solid var(--borda); overflow: hidden; }
.hero::before { content: ""; display: none; position: absolute; top: 0; bottom: 0; left: max(12px, calc(50% - 640px)); width: 1px; background: rgba(215, 38, 61, 0.22); }
.hero-grade { display: grid; gap: 44px; align-items: center; }
.hero h1 { max-width: 18ch; }
.lead { font-size: clamp(17px, 2vw, 19.5px); line-height: 1.6; color: var(--texto-suave); max-width: 60ch; }
.selos { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 26px; color: var(--texto); font-size: 14.5px; font-weight: 550; }
.selos li { display: inline-flex; align-items: center; gap: 7px; }
.selos svg { color: var(--sucesso); }
@media (min-width: 1000px) {
  .hero { padding: 72px 0 88px; }
  .hero::before { display: block; }
  .hero-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  .hero h1 { font-size: clamp(40px, 3.9vw, 54px); }
}

.hero-curto { padding: 44px 0 48px; }
.hero-curto h1 { max-width: 22ch; font-size: clamp(32px, 5.4vw, 50px); }
@media (min-width: 1000px) { .hero-curto { padding: 64px 0 64px; } }
.trilha { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; font-size: 14px; color: var(--texto-suave); margin-bottom: 18px; }
.trilha li + li::before { content: "/"; margin-right: 6px; color: #94A3B8; }
.trilha a { color: var(--texto-suave); }
.trilha [aria-current] { color: var(--texto); font-weight: 600; }

/* ---------- maquete do produto (ilustração, dados fictícios) ---------- */

.maquete { margin: 0; position: relative; }
.maq-janela { background: #FFFFFF; color: #0F172A; border: 1px solid #DCE3EE; border-radius: 14px; box-shadow: var(--sombra-alta); overflow: hidden; font-size: 13px; line-height: 1.4; }
.maq-barra { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #F1F4F9; border-bottom: 1px solid #E2E8F0; }
.maq-pontos { display: flex; gap: 5px; }
.maq-pontos i { width: 9px; height: 9px; border-radius: 50%; background: #CBD5E1; }
.maq-url { flex: 1; min-width: 0; background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 6px; padding: 3px 10px; color: #64748B; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.maq-corpo { padding: 16px; }
.maq-titulo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.maq-titulo b { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.maq-titulo span { color: #64748B; font-size: 12px; font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.maq-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.maq-kpi { border: 1px solid #E2E8F0; border-radius: 10px; padding: 9px 10px; }
.maq-kpi small { display: block; color: #64748B; font-size: 11.5px; }
.maq-kpi b { display: block; font-size: clamp(15px, 4vw, 18px); white-space: nowrap; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.maq-kpi.risco { border-color: #F5C2C9; background: #FDF2F4; }
.maq-kpi.risco b { color: #B5172C; }
.maq-tabela { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.maq-tabela th { text-align: left; font-weight: 600; color: #64748B; font-size: 11.5px; padding: 6px 8px; border-bottom: 1px solid #E2E8F0; }
.maq-tabela td { padding: 9px 8px; border-bottom: 1px solid #EEF2F7; vertical-align: top; }
.maq-tabela .num { text-align: right; white-space: nowrap; }
.maq-tabela tr.marcada td { background: #FFF7F8; }
.maq-tabela tr.marcada td:first-child { box-shadow: inset 3px 0 0 #D7263D; }
.maq-forn { display: block; font-weight: 600; }
.maq-regra { display: inline-block; margin-top: 4px; font-family: var(--mono); font-size: 11px; color: #A61B2E; background: #FDECEE; border-radius: 5px; padding: 1px 6px; }
.maq-situ { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 12px; white-space: nowrap; }
.maq-situ::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.maq-situ.erro { color: #B91C1C; }
.maq-situ.alerta { color: #B45309; }
.maq-situ.ok { color: #15803D; }
.maq-tabela .risco-valor { color: #B5172C; font-weight: 700; }
.maq-col-sit { display: none; }
@media (min-width: 440px) { .maq-col-sit { display: table-cell; } }

.maq-cartoes { display: grid; gap: 12px; margin-top: 12px; }
.maq-cartao { background: #FFFFFF; color: #0F172A; border: 1px solid #DCE3EE; border-radius: 12px; box-shadow: var(--sombra-alta); padding: 14px; font-size: 12.5px; line-height: 1.45; }
.maq-cartao-titulo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.maq-cartao-titulo svg { color: #1D4ED8; }
.maq-assunto { color: #334155; margin-bottom: 10px; }
.maq-assunto b { font-weight: 600; color: #0F172A; }
.maq-linhas i { display: block; height: 6px; border-radius: 3px; background: #E2E8F0; margin-bottom: 6px; }
.maq-linhas i:nth-child(2) { width: 86%; }
.maq-linhas i:nth-child(3) { width: 64%; }
.maq-botao { display: inline-block; margin-top: 6px; background: #1D4ED8; color: #FFFFFF; border-radius: 7px; padding: 5px 10px; font-weight: 600; font-size: 12px; }
.maq-prontidao { display: flex; align-items: baseline; gap: 6px; }
.maq-prontidao b { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; color: #123A9C; font-variant-numeric: tabular-nums; }
.maq-prontidao span { color: #64748B; }
.maq-barra-pront { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin: 8px 0 6px; background: #E2E8F0; }
.maq-barra-pront i:nth-child(1) { width: 64%; background: #15803D; }
.maq-barra-pront i:nth-child(2) { width: 28%; background: #F59E0B; }
.maq-barra-pront i:nth-child(3) { width: 8%; background: #D7263D; }
.maq-legenda { display: flex; flex-wrap: wrap; gap: 4px 12px; color: #64748B; font-size: 11.5px; }
.maq-legenda span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; background: currentColor; vertical-align: 0; }
.maq-legenda .l-ok::before { background: #15803D; }
.maq-legenda .l-al::before { background: #F59E0B; }
.maq-legenda .l-er::before { background: #D7263D; }
.maq-legenda-fonte { margin-top: 10px; font-size: 13px; color: var(--texto-suave); }

/* marca de revisão: o traço vermelho à margem da linha com erro */
.maq-revisao { display: none; }

@media (min-width: 600px) {
  .maquete { padding: 0 0 128px 0; }
  .maq-cartoes { display: block; margin: 0; }
  .maq-carta { position: absolute; left: -18px; bottom: 0; width: 56%; max-width: 330px; }
  .maq-painel { position: absolute; right: -14px; bottom: 26px; width: 46%; max-width: 280px; }
  .maq-legenda-fonte { position: absolute; left: 0; right: 0; bottom: -40px; margin: 0; text-align: center; }
}
@media (min-width: 1000px) {
  .maquete { padding: 0 0 132px 18px; }
  .maq-carta { left: -24px; }
  .maq-painel { right: -22px; }
  .maq-revisao { display: block; position: absolute; left: -6px; top: 166px; width: 30px; height: 60px; color: #D7263D; }
}

/* ---------- faixa de documentos ---------- */

.docs { padding: 22px 0; border-bottom: 1px solid var(--borda); background: var(--superficie); }
.docs .interno { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.docs p { margin: 0; color: var(--texto-suave); font-size: 14.5px; font-weight: 550; }
.docs ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.doc { display: inline-flex; align-items: baseline; gap: 7px; border: 1px solid var(--borda); background: var(--fundo); border-radius: 999px; padding: 6px 12px; font-weight: 650; font-size: 14px; }
.doc small { font-family: var(--mono); font-weight: 500; font-size: 12px; color: var(--texto-suave); }

/* ---------- seções ---------- */

.secao { padding: 64px 0; }
.secao-alt { background: var(--superficie); border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
@media (min-width: 1000px) { .secao { padding: 96px 0; } }
.cabeca { max-width: 720px; margin-bottom: 36px; }
.cabeca p { color: var(--texto-suave); font-size: 17.5px; }

/* recursos: um painel dividido, não cartões soltos */
.recursos { list-style: none; display: grid; background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; overflow: hidden; }
.recurso { padding: 28px 24px; border-top: 1px solid var(--borda); }
.recurso:first-child { border-top: 0; }
.recurso p { color: var(--texto-suave); margin: 0; }
@media (min-width: 760px) {
  .recursos { grid-template-columns: 1fr 1fr; }
  .recurso { padding: 34px 34px; }
  .recurso:nth-child(2) { border-top: 0; }
  .recurso:nth-child(even) { border-left: 1px solid var(--borda); }
}
.icone { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; margin-bottom: 16px; }
.icone svg { width: 24px; height: 24px; }
.ic-vermelho { background: var(--vermelho-claro); color: var(--vermelho); }
.ic-azul { background: var(--azul-claro); color: var(--azul); }
.ic-verde { background: var(--verde-claro); color: var(--sucesso); }
.ic-ambar { background: var(--ambar-claro); color: var(--alerta); }
.ic-ciano { background: #E0F2FE; color: var(--info); }
.ic-noite { background: #E2E8F5; color: #1E3A8A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ic-ciano { background: #0C2A3C; color: #7DD3FC; }
  :root:not([data-theme="light"]) .ic-noite { background: #1B2A4D; color: #C7D2FE; }
}

/* passos: sequência real, então numerados */
.passos { list-style: none; counter-reset: passo; display: grid; gap: 14px; }
.passo { counter-increment: passo; position: relative; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 24px 22px 22px; }
.passo::before { content: counter(passo); display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--azul); color: #FFFFFF; font-weight: 750; font-size: 15px; margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.passo p { color: var(--texto-suave); margin: 0; font-size: 15.5px; }
.passo h3 { margin-bottom: 8px; }
@media (min-width: 760px) { .passos.quatro { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) {
  .passos.quatro { grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; }
  .passos.quatro .passo { border: 0; border-radius: 0; background: none; padding: 30px 26px; }
  .passos.quatro .passo + .passo { border-left: 1px solid var(--borda); }
}
.link-mais { margin-top: 26px; font-weight: 600; }

/* segmentos */
.segmentos { list-style: none; display: grid; gap: 12px; }
@media (min-width: 640px) { .segmentos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .segmentos { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.segmento { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: start; background: var(--fundo); border: 1px solid var(--borda); border-radius: var(--raio); padding: 20px; transition: border-color .15s, background-color .15s; }
.segmento .icone { grid-row: span 2; margin: 0; }
.segmento h3 { margin: 0; font-size: 17px; }
.segmento h3 a { color: var(--texto); text-decoration: none; }
.segmento h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--raio); }
.segmento p { margin: 0; color: var(--texto-suave); font-size: 15px; }
.segmento:hover { border-color: var(--azul); background: var(--superficie); }
.segmento:hover h3 a { color: var(--azul); }
.segmento:focus-within { outline: 3px solid var(--azul); outline-offset: 2px; }
.segmento h3 a:focus-visible { outline: none; }

/* confiança: bloco escuro */
.confianca { background: var(--noite); color: #DCE4F5; padding: 64px 0; position: relative; overflow: hidden; }
@media (min-width: 1000px) { .confianca { padding: 96px 0; } }
.confianca h2, .confianca h3 { color: #FFFFFF; }
.confianca a { color: #A9C0FF; }
.confianca a:hover { color: #FFFFFF; }
.confianca :focus-visible { outline-color: #FFFFFF; }
.confianca .cabeca p { color: #B8C4DD; }
.pilares { list-style: none; display: grid; gap: 1px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; overflow: hidden; }
@media (min-width: 720px) { .pilares { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .pilares { grid-template-columns: repeat(4, 1fr); } }
.pilar { background: var(--noite); padding: 26px 24px; }
.pilar p { color: #B8C4DD; margin: 0; font-size: 15px; }
.pilar .icone { background: rgba(255, 255, 255, 0.08); color: #FFFFFF; }
.pilar:first-child .icone { color: #FF8A99; }
.confianca-rodape { display: grid; gap: 28px; margin-top: 44px; }
@media (min-width: 900px) { .confianca-rodape { grid-template-columns: 1fr 1fr; gap: 48px; } }
.confianca-rodape h3 { font-size: 20px; }
.confianca-rodape p { color: #B8C4DD; }

/* listas */
.lista-check { list-style: none; display: grid; gap: 12px; }
.lista-check li { position: relative; padding-left: 30px; }
.lista-check li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--verde-claro); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sucesso) 35%, transparent); }
.lista-check li::after { content: ""; position: absolute; left: 6px; top: 8px; width: 6px; height: 9px; border: solid var(--sucesso); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.confianca .lista-check li::before { background: rgba(74, 222, 128, 0.14); box-shadow: none; }
.confianca .lista-check li::after { border-color: #4ADE80; }
.lista-nao { list-style: none; display: grid; gap: 12px; }
.lista-nao li { position: relative; padding-left: 30px; }
.lista-nao li::before, .lista-nao li::after { content: ""; position: absolute; left: 4px; top: 12px; width: 12px; height: 2px; background: var(--texto-suave); border-radius: 1px; transform: rotate(45deg); }
.lista-nao li::after { transform: rotate(-45deg); }

.duas-colunas { display: grid; gap: 28px; }
@media (min-width: 900px) { .duas-colunas { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; } }
.duas-colunas > div > p { color: var(--texto-suave); }

/* ---------- faixa de chamada ---------- */

.faixa-cta { padding: 0 0 64px; }
@media (min-width: 1000px) { .faixa-cta { padding-bottom: 96px; } }
.secao-alt + .faixa-cta, .confianca + .faixa-cta { padding-top: 64px; }
@media (min-width: 1000px) { .secao-alt + .faixa-cta, .confianca + .faixa-cta { padding-top: 96px; } }
.cta-caixa { position: relative; overflow: hidden; background: var(--azul-escuro); background: linear-gradient(135deg, #123A9C 0%, #1D4ED8 70%); color: #FFFFFF; border-radius: 20px; padding: 40px 26px; }
.cta-caixa::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; border: 36px solid rgba(255, 255, 255, 0.07); }
.cta-caixa h2 { color: #FFFFFF; max-width: 22ch; }
.cta-caixa p { color: #DBE5FF; max-width: 56ch; font-size: 17px; }
.cta-caixa :focus-visible { outline-color: #FFFFFF; }
@media (min-width: 900px) { .cta-caixa { padding: 56px 56px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; } .cta-caixa .acoes { margin: 0; } }

/* ---------- segmento: página ---------- */

.hero-segmento .hero-grade { gap: 32px; }
@media (min-width: 1000px) { .hero-segmento .hero-grade { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }
.segmento-ficha { background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; padding: 24px; box-shadow: var(--sombra); }
.segmento-ficha .icone { width: 56px; height: 56px; border-radius: 14px; }
.segmento-ficha .icone svg { width: 30px; height: 30px; }
.segmento-ficha h2 { font-size: 15px; letter-spacing: 0; font-weight: 650; color: var(--texto-suave); margin-bottom: 10px; }
.segmento-ficha ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.confere { list-style: none; display: grid; gap: 12px; }
@media (min-width: 720px) { .confere { grid-template-columns: 1fr 1fr; } }
.confere li { display: flex; gap: 14px; align-items: flex-start; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px 18px; }
.confere li svg { color: var(--sucesso); margin-top: 2px; }
.outros { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.outros a { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; background: var(--fundo); border: 1px solid var(--borda); border-radius: 999px; color: var(--texto); text-decoration: none; font-weight: 600; font-size: 15px; }
.outros a:hover { border-color: var(--azul); color: var(--azul); }
.outros .icone { width: 30px; height: 30px; border-radius: 50%; margin: 0; }
.outros .icone svg { width: 17px; height: 17px; }

/* ---------- como funciona ---------- */

.linha-tempo { list-style: none; counter-reset: passo; display: grid; gap: 16px; }
.etapa { counter-increment: passo; display: grid; gap: 14px 22px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; padding: 24px 22px; }
.etapa::before { content: counter(passo); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--azul); color: #FFFFFF; font-weight: 800; font-size: 17px; }
.etapa h2 { font-size: clamp(21px, 2.6vw, 26px); margin-bottom: 8px; }
.etapa p { color: var(--texto-suave); margin: 0; }
.etapa strong { color: var(--texto); }
@media (min-width: 800px) { .etapa { grid-template-columns: 40px minmax(0, 1fr) minmax(0, 0.8fr); padding: 30px 32px; align-items: start; } }
.etapa-detalhe { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 13.5px; font-weight: 600; background: var(--azul-claro); color: var(--azul-escuro); }
.chip.mono { font-family: var(--mono); font-weight: 500; font-size: 12.5px; }
.chip.vermelho { background: var(--vermelho-claro); color: var(--vermelho-escuro); }
.chip.verde { background: var(--verde-claro); color: var(--sucesso); }
.chip.ambar { background: var(--ambar-claro); color: var(--alerta); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chip { color: var(--azul-escuro); }
  :root:not([data-theme="light"]) .chip.vermelho { color: var(--vermelho); }
}

/* ---------- preços ---------- */

.planos { list-style: none; display: grid; gap: 16px; }
@media (min-width: 720px) { .planos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .planos { grid-template-columns: repeat(4, 1fr); } }
.plano { display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--borda); border-top: 4px solid var(--azul); border-radius: 16px; padding: 24px 22px; box-shadow: var(--sombra); }
.plano:nth-child(2) { border-top-color: var(--noite); }
.plano:nth-child(3) { border-top-color: var(--info); }
.plano:nth-child(4) { border-top-color: var(--vermelho); }
.plano-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.plano h2 { font-size: 24px; margin: 0; }
.plano > p { color: var(--texto-suave); font-size: 15.5px; min-height: 3.2em; }
.plano .lista-check { gap: 10px; font-size: 15px; margin: 6px 0 20px; }
.plano-preco { margin: auto 0 0; padding-top: 16px; border-top: 1px dashed var(--borda); color: var(--texto-suave); font-weight: 600; font-size: 15px; }
.etiqueta { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--ambar-claro); color: var(--alerta); font-size: 13px; font-weight: 700; white-space: nowrap; }
.nota { margin-top: 28px; color: var(--texto-suave); font-size: 15px; max-width: 80ch; background: var(--superficie); border: 1px solid var(--borda); border-left: 4px solid var(--info); border-radius: 10px; padding: 16px 18px; }
.convite-faixa { display: inline-flex; align-items: center; gap: 10px; background: var(--verde-claro); color: var(--sucesso); font-weight: 700; border-radius: 999px; padding: 6px 14px 6px 8px; margin-bottom: 18px; font-size: 14.5px; }
.convite-faixa svg { background: var(--sucesso); color: #FFFFFF; border-radius: 50%; padding: 3px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .convite-faixa svg { color: #0A1226; } }

/* ---------- perguntas frequentes ---------- */

.faq-grade { display: grid; gap: 32px; }
@media (min-width: 960px) { .faq-grade { grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; } }
.perguntas { display: grid; gap: 10px; }
.pergunta { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); }
.pergunta summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; font-weight: 650; font-size: 17px; line-height: 1.4; border-radius: var(--raio); }
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(var(--azul), var(--azul)) center / 12px 2px no-repeat, linear-gradient(var(--azul), var(--azul)) center / 2px 12px no-repeat, var(--azul-claro); transition: transform .2s; }
.pergunta[open] summary::after { background: linear-gradient(var(--azul), var(--azul)) center / 12px 2px no-repeat, var(--azul-claro); transform: rotate(180deg); }
.pergunta summary:hover { color: var(--azul); }
.pergunta[open] { border-color: color-mix(in srgb, var(--azul) 40%, var(--borda)); }
.pergunta > p { padding: 0 20px 20px; margin: 0; color: var(--texto-suave); max-width: 70ch; }
.lateral { background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; padding: 24px; position: sticky; top: 96px; }
.lateral h2 { font-size: 20px; }
.lateral p { color: var(--texto-suave); font-size: 15px; }
.lateral .botao { width: 100%; margin-top: 4px; }
.lateral .botao + .botao { margin-top: 10px; }

/* ---------- API ---------- */

.doc-grade { display: grid; gap: 32px; }
@media (min-width: 1000px) { .doc-grade { grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: start; } }
.indice { font-size: 14.5px; }
.indice h2 { font-size: 14px; color: var(--texto-suave); letter-spacing: 0; margin-bottom: 8px; font-weight: 650; }
.indice ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.indice a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--texto); text-decoration: none; background: var(--superficie); border: 1px solid var(--borda); }
.indice a:hover { color: var(--azul); border-color: var(--azul); }
@media (min-width: 1000px) {
  .indice { position: sticky; top: 96px; }
  .indice ul { display: grid; gap: 2px; }
  .indice a { background: none; border: 0; border-left: 2px solid var(--borda); border-radius: 0; padding: 6px 12px; }
  .indice a:hover { border-left-color: var(--azul); }
}
.doc-conteudo { max-width: 78ch; min-width: 0; }
.doc-conteudo h2 { font-size: clamp(22px, 2.6vw, 28px); margin-top: 48px; scroll-margin-top: 96px; }
.doc-conteudo > h2:first-of-type { margin-top: 28px; }
.doc-conteudo .lista-check { margin-bottom: 14px; }
.api-aviso { background: var(--ambar-claro); border: 1px solid color-mix(in srgb, var(--alerta) 30%, transparent); border-radius: var(--raio); padding: 16px 18px; }
.api-aviso p { margin: 0; }
.codigo { background: var(--noite); color: #E2E8F5; border-radius: var(--raio); padding: 16px 18px; overflow-x: auto; font: 13.5px/1.6 var(--mono); margin: 0 0 18px; border: 1px solid #1E2E57; }
.codigo code { background: none; color: inherit; padding: 0; font-size: inherit; }
.tabela-api-wrap { overflow-x: auto; margin: 0 0 18px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); }
.tabela-api { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.tabela-api caption { text-align: left; font-weight: 650; padding: 12px 14px; border-bottom: 1px solid var(--borda); }
.tabela-api th, .tabela-api td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--borda); }
.tabela-api tr:last-child td { border-bottom: 0; }
.tabela-api th { color: var(--texto-suave); font-weight: 600; font-size: 13.5px; background: var(--fundo); }
.tabela-api code { white-space: nowrap; }

/* ---------- rodapé ---------- */

.rodape { background: var(--noite); color: #B8C4DD; padding: 56px 0 28px; font-size: 15px; }
.rodape a { color: #DCE4F5; text-decoration: none; }
.rodape a:hover { color: #FFFFFF; text-decoration: underline; }
.rodape :focus-visible { outline-color: #FFFFFF; }
.rodape-interno { max-width: var(--largura); margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: 32px; }
@media (min-width: 720px) { .rodape-interno { grid-template-columns: repeat(3, 1fr); } .rodape-marca { grid-column: 1 / -1; } }
@media (min-width: 1080px) { .rodape-interno { grid-template-columns: 1.6fr 1fr 1fr 1fr; } .rodape-marca { grid-column: auto; } }
.rodape-marca p { margin-top: 12px; max-width: 36ch; }
.rodape-marca .marca { font-size: 27px; }
.rodape h2 { color: #FFFFFF; font-size: 14.5px; font-weight: 650; letter-spacing: 0; margin-bottom: 12px; }
.rodape-links { list-style: none; display: grid; gap: 9px; }
.rodape-base { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--largura) - 2 * var(--gutter)); margin: 40px auto 0; padding: 22px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.rodape-aviso { margin: 0; font-size: 14px; color: #93A2C2; max-width: 90ch; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .passo::before, :root:not([data-theme="light"]) .etapa::before { color: #0A1226; }
}