/* ==========================================================================
   1. TOKENS
   >>> PARA TROCAR A PALETA, MEXA SÓ NESTE BLOCO. <<<
   Regra que sustenta o desenho: --conforme é marca e ação; --risco é risco.
   Nunca use vermelho para vender — só para alertar.
   ========================================================================== */
:root{
  /* Base institucional */
  --noite:        #0A1F38;
  --noite-2:      #12314F;
  --noite-3:      #1C4368;

  /* Texto */
  --texto:        #17293C;
  --texto-med:    #4A5B6E;
  --texto-fraco:  #7C8A9A;

  /* Superfícies */
  --papel:        #F4F7F9;
  --papel-2:      #E9EFF3;
  --branco:       #FFFFFF;
  --linha:        #DBE3EA;
  --linha-fraca:  #EBF0F4;

  /* Marca e ação — conformidade */
  --conforme:      #0E8F80;
  --conforme-esc:  #0A6F63;
  --conforme-viv:  #35C4B0;
  --conforme-bg:   #E2F2F0;

  /* Risco — uso restrito */
  --risco:     #C42B3E;
  --risco-bg:  #FBE9EC;
  --ambar:     #A87400;

  /* Selo de conclusão */
  --ouro:      #B8892B;
  --ouro-bg:   #F7EFDD;

  --display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --doc:     "Zilla Slab", Georgia, "Times New Roman", serif;

  --larg: 1140px;
  --raio-ui:  10px;   /* camada comercial: arredondada  */
  --raio-doc: 2px;    /* camada documental: canto vivo  */
  --sombra:   0 4px 20px rgba(10,31,56,.07);
  --sombra-f: 0 18px 44px rgba(10,31,56,.16);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--papel); color:var(--texto);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
:focus-visible{outline:3px solid var(--conforme); outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

h1,h2,h3,h4{font-family:var(--display); font-weight:700; line-height:1.14; letter-spacing:-.02em; margin:0 0 .5em}
h2{font-size:clamp(29px,4vw,42px)}
h3{font-size:20px; letter-spacing:-.01em}
p{margin:0 0 1.1em}
.mono{font-family:var(--mono)}

.faixa{padding:80px 32px}
@media (min-width:1024px){ .faixa{padding:92px 40px} }
.faixa-clara{background:var(--branco)}
.faixa-media{background:var(--papel-2)}
.faixa-escura{background:var(--noite); color:#CBD8E4}
.faixa-escura h2,.faixa-escura h3{color:#fff}
.miolo{max-width:var(--larg); margin:0 auto}
.centro{text-align:center}
.centro .chamada{margin-left:auto; margin-right:auto}

.eyebrow{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--conforme); margin-bottom:16px; display:block;
}
.faixa-escura .eyebrow{color:var(--conforme-viv)}
.chamada{font-size:18.5px; color:var(--texto-med); max-width:64ch}
.faixa-escura .chamada{color:#9DB0C2}
.pequeno{font-size:14px; line-height:1.55}

/* ==========================================================================
   2. BOTÕES
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--display); font-weight:600; font-size:15.5px;
  padding:15px 26px; border-radius:var(--raio-ui); border:2px solid transparent;
  text-decoration:none; cursor:pointer; transition:transform .13s ease, background .16s ease, box-shadow .16s ease;
}
.btn-primario{background:var(--conforme); color:#fff; box-shadow:0 4px 14px rgba(14,143,128,.28)}
.btn-primario:hover{background:var(--conforme-esc); transform:translateY(-2px); box-shadow:0 8px 22px rgba(14,143,128,.34)}
.btn-linha{background:transparent; color:var(--texto); border-color:var(--linha)}
.btn-linha:hover{border-color:var(--conforme); color:var(--conforme-esc)}
.btn-claro{background:#fff; color:var(--noite)}
.btn-claro:hover{background:#E9EFF3; transform:translateY(-2px)}
.btn-escuro{background:var(--noite); color:#fff}
.btn-escuro:hover{background:var(--noite-2); transform:translateY(-2px)}
.botoes{display:flex; gap:13px; flex-wrap:wrap}

/* ==========================================================================
   3. BARRA DE STATUS + NAV
   ========================================================================== */
.barra-status{
  background:var(--noite); color:#B7C7D6; font-family:var(--mono);
  font-size:12.5px; padding:10px 32px; text-align:center;
}
@media (min-width:1024px){ .barra-status{padding:10px 40px} }
.barra-status strong{color:#fff; font-weight:500}
.ponto-vivo{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--conforme-viv); margin-right:9px; vertical-align:middle;
  animation:pulsa 2.4s ease-in-out infinite;
}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.3}}

.nav{position:sticky; top:0; z-index:70; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--linha)}
.nav-miolo{max-width:var(--larg); margin:0 auto; padding:13px 32px; display:flex; align-items:center; gap:26px}
@media (min-width:1024px){ .nav-miolo{padding:13px 40px} }
.marca{font-family:var(--display); font-weight:700; font-size:17.5px; letter-spacing:-.03em; text-decoration:none; color:var(--noite)}
.marca span{color:var(--conforme)}
.nav-links{display:flex; gap:24px; margin-left:auto; align-items:center}
.nav-links a{font-size:14.5px; text-decoration:none; color:var(--texto-med); font-weight:500}
.nav-links a:hover{color:var(--conforme-esc)}
.nav-links .btn{padding:10px 18px; font-size:14.5px}
@media (max-width:900px){ .nav-links a:not(.btn){display:none} }

/* ==========================================================================
   4. HERO
   ========================================================================== */
.hero{position:relative; overflow:hidden; padding:76px 32px 88px; background:linear-gradient(168deg,#FFFFFF 0%, var(--papel) 58%, var(--papel-2) 100%)}
@media (min-width:1024px){ .hero{padding:88px 40px 100px} }
.hero-teia{position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; opacity:.85; mask-image:radial-gradient(120% 90% at 60% 40%, #000 35%, transparent 88%); -webkit-mask-image:radial-gradient(120% 90% at 60% 40%, #000 35%, transparent 88%)}
.hero-grade{position:relative; z-index:1; max-width:var(--larg); margin:0 auto; display:grid; grid-template-columns:1.1fr .9fr; gap:58px; align-items:center}
@media (max-width:960px){ .hero-grade{grid-template-columns:1fr; gap:46px} }
.hero h1{font-size:clamp(35px,5.3vw,56px); margin-bottom:22px}
.hero h1 em{font-style:normal; color:var(--conforme)}
.hero-sub{font-size:19px; color:var(--texto-med); max-width:55ch; margin-bottom:32px}
.hero-nota{font-family:var(--mono); font-size:12.5px; color:var(--texto-fraco); margin-top:18px}
.selos-hero{display:flex; gap:18px; flex-wrap:wrap; margin-top:26px; padding-top:22px; border-top:1px solid var(--linha)}
.selo-mini{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--texto-med); font-weight:500}
.selo-mini::before{content:"✓"; color:var(--conforme); font-weight:700}

/* Artefato documental: o processo que não existe */
.formulario-vazio{
  background:var(--branco); border:1px solid var(--linha); border-top:5px solid var(--noite);
  border-radius:var(--raio-doc); padding:30px 30px 34px; position:relative; box-shadow:var(--sombra-f);
}
.formulario-vazio::after{content:"fls. 01"; position:absolute; top:12px; right:16px; font-family:var(--mono); font-size:11px; color:var(--texto-fraco)}
.fv-titulo{font-family:var(--doc); font-weight:600; font-size:15px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:4px}
.fv-orgao{font-family:var(--mono); font-size:11px; color:var(--texto-fraco); letter-spacing:.08em; margin-bottom:24px}
.fv-linha{margin-bottom:19px}
.fv-rotulo{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--texto-fraco); display:block; margin-bottom:5px}
.fv-campo{border-bottom:1px dashed var(--linha); height:23px; font-family:var(--doc); font-size:16px}
.fv-campo.preenchido{border-bottom-style:solid; color:var(--texto-med)}
.carimbo-pendente{
  position:absolute; right:24px; bottom:22px;
  border:2.5px solid var(--risco); color:var(--risco);
  font-family:var(--mono); font-weight:500; font-size:13px; letter-spacing:.11em;
  padding:8px 14px; transform:rotate(-7deg); background:rgba(255,255,255,.65);
  animation:carimbar .5s cubic-bezier(.2,1.4,.4,1) .4s both;
}
.carimbo-pendente small{display:block; font-size:9px; letter-spacing:.05em; opacity:.8; margin-top:2px}
@keyframes carimbar{from{opacity:0; transform:rotate(-16deg) scale(1.5)} to{opacity:1; transform:rotate(-7deg) scale(1)}}

/* ==========================================================================
   5. NÚMEROS DE PROVA
   ========================================================================== */
.faixa-numeros{background:var(--noite); padding:38px 32px}
@media (min-width:1024px){ .faixa-numeros{padding:38px 40px} }
.numeros{max-width:var(--larg); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
@media (max-width:800px){ .numeros{grid-template-columns:repeat(2,1fr); gap:28px} }
.numero{text-align:center}
.numero b{display:block; font-family:var(--display); font-weight:700; font-size:clamp(28px,3.4vw,38px); color:#fff; letter-spacing:-.03em}
.numero span{display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--conforme-viv); margin-top:6px}

/* ==========================================================================
   6. CARTÕES
   ========================================================================== */
.grade-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.grade-2{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
@media (max-width:880px){ .grade-3,.grade-2{grid-template-columns:1fr} }

.cartao{background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio-ui); padding:28px 26px; box-shadow:var(--sombra)}
.cartao p{font-size:15.5px; color:var(--texto-med); margin-bottom:.7em}
.cartao p:last-of-type{margin-bottom:0}
.icone-risco{
  width:38px; height:38px; border-radius:9px; background:var(--risco-bg); color:var(--risco);
  display:flex; align-items:center; justify-content:center; font-size:19px; font-weight:700;
  margin-bottom:16px; font-family:var(--display);
}
.icone-neutro{background:var(--conforme-bg); color:var(--conforme-esc)}
.ref-legal{
  font-family:var(--mono); font-size:12px; color:var(--risco); display:block;
  margin-top:16px; padding-top:13px; border-top:1px solid var(--linha-fraca);
}
.cartao-futuro .ref-legal{color:var(--texto-fraco)}
.aviso{
  background:var(--risco-bg); border:1px solid #F0CDD4; border-radius:var(--raio-ui);
  padding:20px 24px; font-size:15px; color:#7E1C29; margin-top:28px;
}
.aviso-neutro{background:var(--conforme-bg); border-color:#BFDFDB; color:#0A5B52}

/* Linha do tempo */
.linha-tempo{border-left:2px solid var(--linha); margin-top:34px}
.lt-item{position:relative; padding:0 0 30px 30px}
.lt-item::before{content:""; position:absolute; left:-7px; top:6px; width:12px; height:12px; border-radius:50%; background:var(--papel-2); border:2px solid var(--linha)}
.lt-item.feito::before{background:var(--noite); border-color:var(--noite)}
.lt-item.agora::before{background:var(--conforme); border-color:var(--conforme); box-shadow:0 0 0 5px rgba(14,143,128,.16)}
.lt-data{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-fraco)}
.lt-titulo{font-family:var(--display); font-weight:600; font-size:18px; margin:2px 0 4px}
.lt-texto{font-size:15px; color:var(--texto-med); margin:0; max-width:60ch}

/* ==========================================================================
   7. DIAGNÓSTICO
   ========================================================================== */
.diag-grade{display:grid; grid-template-columns:1fr 1fr; gap:36px; margin-top:38px; align-items:start}
@media (max-width:960px){ .diag-grade{grid-template-columns:1fr} }
.painel-perguntas{background:var(--noite-2); border:1px solid var(--noite-3); border-radius:var(--raio-ui); padding:30px 28px}
.progresso{height:5px; background:rgba(255,255,255,.12); border-radius:3px; overflow:hidden; margin-bottom:9px}
.progresso i{display:block; height:100%; width:0; background:var(--conforme-viv); transition:width .3s ease}
.progresso-texto{font-family:var(--mono); font-size:11.5px; color:#8FA6BC; letter-spacing:.08em; margin-bottom:26px}

.pergunta{border:0; padding:0; margin:0 0 22px}
.pergunta:last-of-type{margin-bottom:8px}
.pergunta legend{font-size:16px; color:#E6EDF4; padding:0; margin-bottom:12px; line-height:1.45}
.pergunta legend b{font-family:var(--mono); font-size:11.5px; color:#7E97AF; display:block; margin-bottom:5px; letter-spacing:.11em; font-weight:400}
.opcoes{display:flex; gap:8px; flex-wrap:wrap}
.opcao{flex:1; min-width:94px; position:relative}
.opcao input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.opcao span{
  display:block; text-align:center; padding:10px 6px; font-family:var(--mono); font-size:12.5px;
  border:1px solid var(--noite-3); border-radius:7px; color:#A9BCCE; transition:all .14s ease;
}
.opcao input:hover + span{border-color:#3E6E96; color:#fff}
.opcao input:focus-visible + span{outline:3px solid var(--conforme-viv); outline-offset:2px}
.opcao input[value="2"]:checked + span{background:rgba(53,196,176,.22); border-color:var(--conforme-viv); color:#BFF0E8; font-weight:500}
.opcao input[value="1"]:checked + span{background:rgba(168,116,0,.3); border-color:#C39415; color:#F3DFB4; font-weight:500}
.opcao input[value="0"]:checked + span{background:rgba(196,43,62,.32); border-color:#D9576A; color:#F8CDD3; font-weight:500}

/* Termo — artefato documental dentro da camada comercial */
.termo{
  background:var(--branco); color:var(--texto); border:1px solid var(--linha);
  border-top:5px solid var(--risco); border-radius:var(--raio-doc);
  padding:28px 26px 30px; position:sticky; top:82px; box-shadow:0 20px 46px rgba(0,0,0,.3);
}
@media (max-width:960px){ .termo{position:static} }
.termo-cabeca{border-bottom:1px solid var(--linha); padding-bottom:14px; margin-bottom:18px}
.termo-cabeca h3{font-family:var(--doc); font-weight:600; font-size:15px; letter-spacing:.07em; text-transform:uppercase; margin:0 0 4px}
.termo-cabeca .mono{font-size:11px; color:var(--texto-fraco); letter-spacing:.08em; margin:0}
.campo-orgao{
  width:100%; font-family:var(--doc); font-size:16px; color:var(--texto);
  border:0; border-bottom:1px dashed var(--linha); background:transparent; padding:5px 0; margin-top:12px;
}
.campo-orgao:focus{border-bottom:1px solid var(--conforme); outline:none}
.campo-orgao::placeholder{color:#A9B5C1}

.constatacoes{list-style:none; margin:0; padding:0; min-height:110px}
.constatacoes li{display:flex; gap:12px; padding:11px 0; border-bottom:1px dotted var(--linha-fraca); font-size:14.5px; line-height:1.5; animation:entra .3s ease both}
@keyframes entra{from{opacity:0; transform:translateY(-5px)} to{opacity:1; transform:none}}
.constatacoes .num{font-family:var(--mono); font-size:11px; color:var(--risco); padding-top:3px; flex-shrink:0; letter-spacing:.06em}
.constatacoes li.parcial .num{color:var(--ambar)}
.vazio-termo{font-size:14.5px; color:var(--texto-fraco); font-style:italic; padding:16px 0}

.resultado{margin-top:20px; padding-top:18px; border-top:1px solid var(--linha)}
.selo-resultado{
  display:inline-block; border:2.5px solid var(--risco); color:var(--risco);
  font-family:var(--mono); letter-spacing:.09em; text-transform:uppercase;
  padding:10px 16px; transform:rotate(-2deg); margin-bottom:16px; border-radius:var(--raio-doc);
}
.selo-resultado b{display:block; font-weight:500; font-size:13.5px}
.selo-resultado small{display:block; font-size:10.5px; letter-spacing:.06em; text-transform:none; opacity:.86; margin-top:4px}
.selo-resultado.grau-2{border-color:#C0603F; color:#C0603F}
.selo-resultado.grau-3{border-color:var(--ambar); color:var(--ambar)}
.selo-resultado.grau-4{border-color:var(--conforme); color:var(--conforme-esc)}
.contagem{font-family:var(--mono); font-size:12px; color:var(--texto-med); margin:0 0 16px !important}
.contagem b{color:var(--risco); font-weight:500}
.escala{position:relative; margin:0 0 18px}
.escala-barra{display:flex; height:8px; border-radius:4px; overflow:hidden}
.escala-barra span{display:block; height:100%}
.escala-barra .f1{width:26%; background:var(--risco)}
.escala-barra .f2{width:25%; background:#C0603F}
.escala-barra .f3{width:25%; background:var(--ambar)}
.escala-barra .f4{width:24%; background:var(--conforme)}
.escala .marcador{position:absolute; top:-5px; left:0; width:2px; height:18px; background:var(--noite); transform:translateX(-1px); transition:left .45s cubic-bezier(.3,1,.4,1)}
.escala .marcador::after{content:""; position:absolute; top:-4px; left:-3px; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid var(--noite)}
.escala-legenda{display:flex; justify-content:space-between; margin-top:7px; font-family:var(--mono); font-size:10px; letter-spacing:.05em; color:var(--texto-fraco)}
.resultado p{font-size:14.5px; color:var(--texto-med); margin-bottom:16px}
.acoes-termo{display:flex; gap:10px; flex-wrap:wrap}
.acoes-termo .btn{font-size:14px; padding:12px 18px}

/* ==========================================================================
   8. ETAPAS DO PROGRAMA
   ========================================================================== */
.etapa{display:grid; grid-template-columns:78px 1fr 245px; gap:26px; padding:26px 0; border-bottom:1px solid var(--linha); align-items:start}
.etapa:first-of-type{border-top:1px solid var(--linha)}
@media (max-width:880px){ .etapa{grid-template-columns:58px 1fr; gap:18px} .etapa-entrega{grid-column:2} }
.etapa-num{font-family:var(--mono); font-size:12.5px; color:var(--conforme-esc); letter-spacing:.08em; padding-top:6px}
.etapa h3{margin-bottom:.28em}
.etapa p{font-size:15.5px; color:var(--texto-med); margin:0; max-width:56ch}
.etapa-entrega{font-size:13.5px; color:var(--texto-med); background:var(--conforme-bg); border-left:3px solid var(--conforme); padding:11px 15px; border-radius:0 8px 8px 0}
.etapa-entrega b{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--conforme-esc); margin-bottom:3px; font-weight:500}

.lista-entregaveis{list-style:none; padding:0; margin:26px 0 0; columns:2; column-gap:36px}
@media (max-width:720px){ .lista-entregaveis{columns:1} }
.lista-entregaveis li{break-inside:avoid; padding:12px 0 12px 32px; position:relative; border-bottom:1px dotted var(--linha); font-size:15.5px}
.lista-entregaveis li::before{content:"✓"; position:absolute; left:0; top:12px; color:var(--conforme); font-weight:700}

/* Selo de conclusão */
.caixa-selo{display:grid; grid-template-columns:190px 1fr; gap:32px; align-items:center; background:var(--ouro-bg); border:1px solid #E5D2A8; border-radius:var(--raio-ui); padding:30px 32px; margin-top:44px}
@media (max-width:720px){ .caixa-selo{grid-template-columns:1fr; text-align:center} }
.selo-grafico{
  border:3px double var(--ouro); border-radius:50%; aspect-ratio:1; max-width:170px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  font-family:var(--mono); color:var(--ouro); padding:16px; line-height:1.3;
}
.selo-grafico b{font-family:var(--display); font-size:15px; letter-spacing:.02em; display:block; margin:5px 0}
.selo-grafico span{font-size:9.5px; letter-spacing:.12em; text-transform:uppercase}
.caixa-selo h3{color:#6E5215}
.caixa-selo p{font-size:15.5px; color:#6E5215; margin-bottom:0}

/* ==========================================================================
   9. MODALIDADES
   ========================================================================== */
.planos{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:40px; align-items:start}
@media (max-width:900px){ .planos{grid-template-columns:1fr} }
.plano{background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio-ui); padding:30px 26px 32px; box-shadow:var(--sombra); position:relative; display:flex; flex-direction:column; height:100%}
.plano.destaque{border:2px solid var(--conforme); box-shadow:0 12px 34px rgba(14,143,128,.18)}
.fita{position:absolute; top:-13px; left:26px; background:var(--conforme); color:#fff; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:5px 12px; border-radius:20px}
.plano-etapa{font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--texto-fraco); margin-bottom:10px}
.plano h3{font-size:22px; margin-bottom:10px}
.plano-desc{font-size:15px; color:var(--texto-med); margin-bottom:18px}
.plano ul{list-style:none; padding:0; margin:0 0 22px; flex:1}
.plano li{padding:8px 0 8px 26px; position:relative; font-size:14.5px; border-bottom:1px solid var(--linha-fraca)}
.plano li::before{content:"→"; position:absolute; left:0; color:var(--conforme); font-weight:700}
.plano-valor{font-family:var(--mono); font-size:13px; color:var(--texto-fraco); margin-bottom:16px; padding-top:14px; border-top:1px solid var(--linha)}
.plano .btn{width:100%}

/* ==========================================================================
   10. DEPOIMENTOS / AUTORIDADE / FAQ / CONTATO / RODAPÉ
   ========================================================================== */
.depo{background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio-ui); padding:26px 24px; box-shadow:var(--sombra)}
.depo p{font-size:15.5px; color:var(--texto); font-style:italic; margin-bottom:18px}
.depo footer{font-size:13.5px; color:var(--texto-fraco); border-top:1px solid var(--linha-fraca); padding-top:14px}
.depo footer b{display:block; color:var(--texto); font-style:normal; font-weight:600; font-size:14.5px}

.autor{display:grid; grid-template-columns:1fr 330px; gap:46px; align-items:start}
@media (max-width:880px){ .autor{grid-template-columns:1fr} }
.ficha{background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio-ui); padding:24px; box-shadow:var(--sombra)}
.ficha dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--texto-fraco); margin-top:15px}
.ficha dt:first-child{margin-top:0}
.ficha dd{margin:2px 0 0; font-size:15px}

details.faq{border-bottom:1px solid var(--linha)}
details.faq summary{cursor:pointer; padding:18px 0; font-family:var(--display); font-weight:600; font-size:18px; list-style:none; display:flex; align-items:center; gap:14px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::before{content:"+"; font-family:var(--mono); color:var(--conforme); font-size:21px; flex-shrink:0}
details.faq[open] summary::before{content:"−"}
details.faq p{font-size:15.5px; color:var(--texto-med); max-width:72ch; padding-left:31px}

.form-grade{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:720px){ .form-grade{grid-template-columns:1fr} }
.campo{display:flex; flex-direction:column}
.campo.largo{grid-column:1/-1}
.campo label{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#8FA6BC; margin-bottom:6px}
.campo input,.campo select,.campo textarea{
  font-family:var(--sans); font-size:15.5px; color:#fff; background:var(--noite-2);
  border:1px solid var(--noite-3); border-radius:8px; padding:12px 14px;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--conforme-viv); outline:none}
.campo select option{background:var(--noite-2)}
.campo textarea{resize:vertical; min-height:94px}

.rodape{background:#071829; color:#7F91A4; padding:52px 32px 40px; font-size:14px}
@media (min-width:1024px){ .rodape{padding:52px 40px 40px} }
.rodape-grade{max-width:var(--larg); margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:36px}
@media (max-width:880px){ .rodape-grade{grid-template-columns:1fr; gap:28px} }
.rodape h4{color:#DDE6EF; font-size:15px; margin-bottom:11px}
.rodape ul{list-style:none; padding:0; margin:0}
.rodape li{margin-bottom:7px}
.rodape a{color:#B7C7D6; text-decoration:none}
.rodape a:hover{text-decoration:underline}
.legal{max-width:var(--larg); margin:36px auto 0; padding-top:24px; border-top:1px solid #16293C; font-size:12.5px; line-height:1.6; color:#5E7086}

/* CTA fixa no celular */
.cta-fixa{position:fixed; bottom:0; left:0; right:0; z-index:80; background:rgba(255,255,255,.97); border-top:1px solid var(--linha); padding:10px 32px; display:none; box-shadow:0 -4px 18px rgba(10,31,56,.1)}
@media (min-width:1024px){ .cta-fixa{padding:10px 40px} }
.cta-fixa .btn{width:100%; padding:13px}
@media (max-width:900px){ .cta-fixa{display:block} body{padding-bottom:70px} }

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
/* ==========================================================================
   11. CONTRASTE E GLOW — ajustes de acessibilidade e profundidade
   ========================================================================== */
:root{
  /* Texto secundário mais escuro: AA garantido sobre papel e branco */
  --texto-med:   #3A4B5E;
  --texto-fraco: #5E6E7F;

  /* Verde de marca mais profundo para uso em botões e links sobre claro */
  --conforme:     #0B7A6D;
  --conforme-esc: #075B51;

  /* Glows por paleta de seção */
  --glow-claro:  0 0 0 1px rgba(14,143,128,.16), 0 10px 30px -12px rgba(10,31,56,.22), 0 0 34px -14px rgba(14,143,128,.45);
  --glow-media:  0 0 0 1px rgba(10,31,56,.10), 0 12px 34px -14px rgba(10,31,56,.30), 0 0 38px -16px rgba(14,143,128,.40);
  --glow-escuro: 0 0 0 1px rgba(53,196,176,.24), 0 14px 40px -14px rgba(0,0,0,.55), 0 0 44px -14px rgba(53,196,176,.42);
  --glow-ouro:   0 0 0 1px rgba(184,137,43,.28), 0 12px 32px -14px rgba(110,82,21,.32), 0 0 36px -14px rgba(184,137,43,.45);
}

/* --- Botões: contraste reforçado --- */
.btn-primario{
  background:var(--conforme); color:#fff;
  box-shadow:0 4px 16px rgba(7,91,81,.36), 0 0 0 1px rgba(7,91,81,.25) inset;
}
.btn-primario:hover{background:var(--conforme-esc); box-shadow:0 10px 26px rgba(7,91,81,.44)}
.btn-linha{color:var(--noite); border-color:#C3D0DB; background:#fff}
.btn-linha:hover{border-color:var(--conforme); color:var(--conforme-esc); background:#fff}

/* Botão do topo: destacado sobre a barra branca translúcida */
.nav{background:rgba(255,255,255,.97); border-bottom:1px solid #CDD9E3}
.nav-links a{color:#33475C}
.nav-links a:hover{color:var(--conforme-esc)}
.nav-links .btn-primario{
  background:var(--conforme-esc); color:#fff; font-weight:700;
  border-color:var(--conforme-esc);
  box-shadow:0 3px 12px rgba(7,91,81,.40);
}
.nav-links .btn-primario:hover{
  background:#064A42; border-color:#064A42;
  box-shadow:0 8px 22px rgba(7,91,81,.50);
}

/* --- Glow nos cartões, conforme a paleta da seção --- */
.cartao,.ficha{box-shadow:var(--glow-claro); transition:box-shadow .22s ease, transform .18s ease}
.cartao:hover,.ficha:hover{transform:translateY(-2px); box-shadow:0 0 0 1px rgba(14,143,128,.3), 0 16px 40px -14px rgba(10,31,56,.28), 0 0 46px -12px rgba(14,143,128,.55)}
.faixa-media .cartao,.faixa-media .ficha,.faixa-media .plano{box-shadow:var(--glow-media)}
.faixa-escura .cartao,
.faixa-escura .quiz,
.faixa-escura .resultado,
.faixa-escura .termo{box-shadow:var(--glow-escuro)}
.plano{box-shadow:var(--glow-claro)}
.plano:hover{box-shadow:0 0 0 1px rgba(14,143,128,.32), 0 18px 44px -16px rgba(10,31,56,.32), 0 0 48px -12px rgba(14,143,128,.5)}
.plano.destaque{box-shadow:0 0 0 2px var(--conforme), 0 18px 46px -14px rgba(7,91,81,.42), 0 0 56px -12px rgba(53,196,176,.55)}
.caixa-selo{box-shadow:var(--glow-ouro)}
.formulario-vazio{box-shadow:var(--sombra-f), 0 0 40px -14px rgba(10,31,56,.35)}

/* --- Seção escura: texto mais legível --- */
.faixa-escura{color:#DCE7F1}
.faixa-escura .chamada{color:#B6C7D8}
.rodape{color:#9CB0C4}
.rodape a{color:#D2DFEA}
.legal{color:#8296AA}
.barra-status{color:#D3E0EC}
.hero-nota,.etapa-entrega{color:#3A4B5E}
.ref-legal{color:#A81E31}


/* ===== Marca-texto animado ===== */
.marca-texto{position:relative; font-style:normal; color:var(--conforme); display:inline-block; isolation:isolate}
#quem h2 .marca-texto{color:var(--texto)}
.marca-texto::before{
  content:""; position:absolute; left:-.10em; right:-.10em; top:.08em; bottom:.02em; z-index:-1;
  background:linear-gradient(180deg, rgba(255,226,120,.55) 0%, rgba(255,214,74,.95) 45%, rgba(250,199,44,.85) 100%);
  border-radius:.18em .32em .22em .28em;
  transform:scaleX(0); transform-origin:left center;
  animation:marcaTexto 1.1s cubic-bezier(.65,.02,.28,1) .55s forwards;
}
@keyframes marcaTexto{ from{transform:scaleX(0)} to{transform:scaleX(1)} }
@media (prefers-reduced-motion:reduce){ .marca-texto::before{animation:none; transform:scaleX(1)} }

/* ===== Caixa de destaque (aviso) ===== */
.aviso-destaque{
  display:block; background:linear-gradient(180deg,#FFF7F8 0%, var(--risco-bg) 100%);
  border:1px solid #EFC6CE; border-left:5px solid #C0304A; border-radius:14px;
  padding:26px 30px; margin-top:34px; box-shadow:0 10px 28px -18px rgba(126,28,41,.45);
}
.aviso-destaque .aviso-titulo{
  font-family:var(--display); font-size:20px; line-height:1.3; color:#7E1C29; margin:0 0 10px;
}
.aviso-destaque .aviso-texto{font-size:16px; line-height:1.65; color:#7E1C29; margin:0 0 14px; max-width:68ch}
.aviso-destaque .aviso-remate{
  margin:0; padding-top:13px; border-top:1px dashed #E3AEB8;
  font-family:var(--mono); font-size:13.5px; letter-spacing:.01em; color:#8B2233; text-transform:none;
}

/* ===== Metodologia: zebra nas etapas ===== */
.etapa:nth-of-type(even){background:rgba(11,58,79,.045); box-shadow:inset 3px 0 0 rgba(11,58,79,.18)}
.etapa:nth-of-type(even){padding-left:16px; padding-right:16px; border-radius:8px}

/* ===== Selo / compliance ===== */
.selo-lista{margin:14px 0 16px; padding-left:0; list-style:none}
.selo-lista li{position:relative; padding-left:22px; font-size:14.5px; color:#6E5215; margin-bottom:6px}
.selo-lista li::before{content:"✓"; position:absolute; left:0; font-weight:700; color:#9A7A1E}

/* ===== Currículo do notório especialista ===== */
.curriculo{margin-top:16px; padding-left:0; list-style:none; max-width:64ch}
.curriculo li{position:relative; padding-left:18px; font-size:15px; line-height:1.6; color:var(--texto-med); margin-bottom:7px}
.curriculo li::before{content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--conforme)}

/* ===== Foto do notório especialista ===== */
.foto-especialista{
  display:block; width:100%; max-width:320px; margin:0 auto 22px;
  border-radius:var(--raio-ui); border:1px solid var(--linha);
  background:linear-gradient(180deg, #fff 0%, var(--papel-2) 100%);
  box-shadow:var(--glow-claro); object-fit:cover;
}
@media (max-width:880px){ .foto-especialista{max-width:280px; margin-bottom:18px} }



/* ==========================================================================
   EFEITOS DE ROLAGEM
   ========================================================================== */
.progresso-leitura{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:120; pointer-events:none;
}
.progresso-leitura span{
  display:block; height:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--conforme-esc), var(--conforme-viv), var(--ouro));
  box-shadow:0 0 12px rgba(53,196,176,.55);
  transition:transform .1s linear;
}

body.rolou .nav{
  box-shadow:0 8px 28px -14px rgba(10,31,56,.45);
  background:rgba(255,255,255,.99);
}

.revelar{
  opacity:0; transform:translateY(26px) scale(.995);
  transition:opacity .7s cubic-bezier(.22,.7,.3,1) var(--atraso,0ms),
             transform .7s cubic-bezier(.22,.7,.3,1) var(--atraso,0ms);
  will-change:opacity, transform;
}
.revelar.visivel{opacity:1; transform:none}

@media (prefers-reduced-motion: reduce){
  .revelar{opacity:1 !important; transform:none !important}
  .progresso-leitura{display:none}
}

/* ==========================================================================
   SELO DE CONCLUSÃO — versão refinada
   ========================================================================== */
.caixa-selo{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 140% at 0% 0%, #FFFBF1 0%, var(--ouro-bg) 55%, #F1E3C6 100%);
  border:1px solid #E0C994;
}
.caixa-selo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 90% at 12% 50%, rgba(184,137,43,.10), transparent 70%);
}

.selo-grafico{
  position:relative; z-index:1;
  border:none; max-width:178px; aspect-ratio:1; padding:0;
  background:
    conic-gradient(from 210deg, #F3DFAE, #B8892B, #7A5714, #D9B463, #F3DFAE);
  border-radius:50%;
  box-shadow:
    0 14px 30px -12px rgba(122,87,20,.55),
    inset 0 0 0 1px rgba(255,255,255,.45);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.86) rotate(-8deg);
  transition:opacity .8s ease, transform .9s cubic-bezier(.2,.8,.25,1);
}
.selo-grafico.selo-ativo{opacity:1; transform:none}

.selo-grafico::before{
  content:""; position:absolute; inset:7px; border-radius:50%;
  background:linear-gradient(160deg, #FFFDF7 0%, #FBF2DC 60%, #F3E4C2 100%);
  box-shadow:inset 0 0 0 1px rgba(184,137,43,.55), inset 0 2px 12px rgba(122,87,20,.12);
}
.selo-grafico::after{
  content:""; position:absolute; inset:15px; border-radius:50%;
  border:1px dashed rgba(184,137,43,.45);
}
.selo-grafico > *{position:relative; z-index:2}
.selo-grafico b{
  font-family:var(--display); font-size:16px; line-height:1.25; color:#7A5714;
  letter-spacing:.01em; display:block; margin:6px 0;
}
.selo-grafico span{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.16em;
  text-transform:uppercase; color:#9A7A1E;
}
.selo-nucleo{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 22px; width:100%;
}
.selo-nucleo .selo-estrela{
  font-size:13px; color:var(--ouro); letter-spacing:.28em; line-height:1;
}
.selo-nucleo .selo-regua{
  width:44px; height:1px; background:linear-gradient(90deg, transparent, var(--ouro), transparent);
  margin:8px 0 6px;
}
.caixa-selo h3{
  color:#5F4610; letter-spacing:-.01em;
}
.caixa-selo h3::after{
  content:""; display:block; width:56px; height:3px; border-radius:3px; margin-top:10px;
  background:linear-gradient(90deg, var(--ouro), rgba(184,137,43,.15));
}