/* =========================================================
   Nunes Ferreira — LP de distrato
   Mobile-first. Todo bloco novo começa pelo mobile.

   Sistema tipográfico de três papéis:
     display   Archivo Expanded, self-hosted, 18 KB, subset latino
     corpo     pilha do sistema (0 ms, como sempre foi)
     rótulo    monoespaçada do sistema (0 ms) — registro de documento

   REGRA DE COR: o verde é EXCLUSIVO de ação. Nenhum outro elemento da
   página é verde. Antes, a cor da marca (#0F6B5C) e a do CTA (#1FA855)
   eram o mesmo matiz, e o botão não tinha como se destacar de um fundo
   pintado da própria cor dele.
   ========================================================= */

/* ---------- display: a única webfont da página ---------- */
@font-face{
  font-family:"Archivo";
  src:url("/assets/fonts/archivo-display.woff2") format("woff2");
  font-weight:700 800;              /* variável; faixa cortada no subset */
  font-style:normal;
  font-display:swap;
}

/* Fallback com métrica ajustada. Archivo Expanded tem largura média de
   minúscula 0,6706 em; Arial Bold 0,5386 e Segoe UI Bold 0,5356 — medidos,
   não estimados. 124,9% iguala os dois, então a troca da fonte não empurra
   o layout. O H1 é o LCP desta página e CLS entra na nota de qualidade. */
@font-face{
  font-family:"Archivo Fallback";
  src:local("Segoe UI"), local("Arial"), local("Helvetica Neue"), local("Roboto"), local("DejaVu Sans");
  font-weight:700 800;
  size-adjust:124.9%;
  ascent-override:70.3%;
  descent-override:16.8%;
  line-gap-override:0%;
}

:root{
  --carimbo:#2C2E7B;        /* índigo de tinta de carimbo — a marca */
  --carimbo-esc:#1D2560;    /* a única faixa escura da página */
  --carimbo-claro:#ECECF6;  /* fundo de bloco anotado */
  --carimbo-linha:#D3D3E6;

  /* AÇÃO, e só ação.
     Os botões usam texto de 19–20px em negrito. O WCAG classifica ≥18,66px
     bold como "texto grande", cujo limiar AA é 3:1 e não 4,5:1 — por isso dá
     para usar um verde vivo aqui: branco sobre --zap dá 3,39:1 (passa).
     O botão do topo é a exceção: 15px é texto normal, precisa de 4,5:1, e por
     isso usa --zap-compacto, que dá 4,71:1. */
  --zap:#1DA050;
  --zap-esc:#17853F;        /* hover — 4,7:1 */
  --zap-compacto:#17853F;   /* botão pequeno do topo */
  --zap-baixo:#106B32;      /* aresta inferior, o que faz o botão parecer tecla */

  --papel:#FBFAF7;
  --papel-2:#F1EFEA;
  --grafite:#232228;
  --grafite-2:#5B5A63;
  --linha:#DAD6CD;

  --ocre:#8A6410;           /* só o bloco pendente */
  --ocre-fundo:#FBF3DE;

  --raio:6px;
  --larg:1080px;

  --display:"Archivo","Archivo Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --fonte:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"Cascadia Mono","Segoe UI Mono",Consolas,"Liberation Mono",monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--papel);
  color:var(--grafite);
  font-family:var(--fonte);
  font-size:17px;
  line-height:1.6;
  overflow-wrap:break-word;
}
img{max-width:100%;height:auto;display:block}

.container{width:100%;max-width:var(--larg);margin:0 auto;padding:0 20px}

.skip{position:absolute;left:-9999px;top:0;background:var(--carimbo);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:0}

:where(a,button,summary):focus-visible{
  outline:3px solid var(--carimbo);
  outline-offset:2px;
  border-radius:3px;
}

/* ---------- tipografia ---------- */
h1,h2,h3{
  font-family:var(--display);
  margin:0;
  color:var(--grafite);
  text-wrap:balance;
}
h1{font-size:clamp(32px,7.4vw,54px);font-weight:800;line-height:1.05;letter-spacing:-.022em}
h2{font-size:clamp(25px,5.2vw,36px);font-weight:800;line-height:1.1;letter-spacing:-.018em;margin-bottom:16px}
h3{font-size:18px;font-weight:700;line-height:1.25;letter-spacing:-.008em;margin-bottom:6px}
p{margin:0 0 14px}
.lede{font-size:18.5px;color:var(--grafite-2);max-width:56ch}
.fecho{max-width:60ch;color:var(--grafite-2)}

/* Rótulo técnico — o registro de documento da página. Só aparece onde
   carrega informação real (OAB, canal de resposta, aviso legal), nunca
   como enfeite de seção. */
.olho{
  font-family:var(--mono);
  font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--carimbo);
  margin:0 0 18px;padding-left:12px;
  border-left:3px solid var(--carimbo);
  line-height:1.5;
}

/* ---------- topo ---------- */
.topo{border-bottom:1px solid var(--linha);background:var(--papel)}
.topo__in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:62px}
.marca{display:inline-flex;align-items:center;text-decoration:none}
.marca img{height:18px;width:auto}
@media (min-width:640px){ .marca img{height:23px} }

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--zap);color:#fff;text-decoration:none;
  font-family:var(--fonte);
  font-weight:700;font-size:19px;line-height:1.2;
  padding:17px 26px;border-radius:var(--raio);
  min-height:58px;
  /* A aresta inferior é o que faz um botão parecer pressionável — mais que
     brilho ou contorno. A segunda sombra só apoia o botão no papel. */
  box-shadow:0 2px 0 var(--zap-baixo), 0 6px 16px rgba(29,37,96,.15);
  transition:background .15s ease, box-shadow .12s ease, transform .08s ease;
}
.btn:hover,.btn:focus-visible{background:var(--zap-esc)}
.btn:active{
  transform:translateY(2px);
  box-shadow:0 0 0 var(--zap-baixo), 0 2px 8px rgba(29,37,96,.15);
}
.btn__zap{width:21px;height:21px;fill:currentColor;flex:none}

.btn--lg{width:100%;font-size:20px;padding:20px 26px;min-height:64px}
.btn--lg .btn__zap{width:23px;height:23px}
@media (min-width:640px){ .btn--lg{width:auto;min-width:340px} }

/* Botão do topo: compacto. Texto pequeno é "texto normal" no WCAG, então precisa
   de 4,5:1 e usa o verde escuro. Sem ícone e sem quebra de linha — no mobile não
   há largura para marca + ícone + duas palavras, e o botão grande da dobra fica
   a menos de 100 px daqui. */
.btn--sm{
  font-size:15px;padding:11px 16px;min-height:44px;
  white-space:nowrap;
  background:var(--zap-compacto);
  box-shadow:none;
}
.btn--sm .btn__zap{display:none}
@media (min-width:640px){
  .btn--sm .btn__zap{display:block;width:17px;height:17px}
}
.btn--sm:active{transform:none;box-shadow:none}

/* ---------- dobra ----------
   ACHADO 04 — CTA dentro da primeira tela.
   Papel em vez de faixa escura: assim o H1 e o botão verde são as duas
   únicas coisas altas da primeira tela, em vez de competirem com um
   fundo saturado. */
.hero{
  background:var(--papel);
  border-bottom:1px solid var(--linha);
  padding:34px 0 40px;
}
.hero__in{display:grid;gap:26px}
.hero__sub{font-size:18px;color:var(--grafite-2);margin:18px 0 26px;max-width:52ch}
.hero__nota{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.01em;
  color:var(--grafite-2);margin:14px 0 0;
}
@media (min-width:900px){
  .hero{padding:52px 0 60px}
  .hero__in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:52px;align-items:start}
}

/* ---------- ASSINATURA: a cláusula riscada ----------
   O gesto que o escritório vende, no alto da página. Sem número de
   cláusula nem percentual inventado: só a oposição entre o que o
   contrato afirma e a frase sobre jurisprudência que já estava no texto.
   O sentido está escrito nos rótulos, não no risco — leitor de tela não
   anuncia line-through. */
.clausula{
  background:var(--carimbo-claro);
  border:1px solid var(--carimbo-linha);
  border-radius:var(--raio);
  padding:20px 20px 22px;
}
.clausula__rot{
  font-family:var(--mono);
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--carimbo);margin:0 0 9px;
}
.clausula__rot--resposta{margin-top:22px;padding-top:20px;border-top:1px solid var(--carimbo-linha)}
.clausula__contrato{
  font-family:var(--display);
  font-size:clamp(19px,4.2vw,23px);font-weight:700;line-height:1.24;letter-spacing:-.012em;
  color:var(--grafite-2);
  margin:0;
  text-decoration-line:line-through;
  text-decoration-thickness:2px;
  text-decoration-color:transparent;
  animation:riscar .45s ease .55s forwards;
}
@keyframes riscar{ to{ text-decoration-color:var(--carimbo) } }
.clausula__justica{
  font-family:var(--display);
  font-size:clamp(19px,4.2vw,23px);font-weight:800;line-height:1.24;letter-spacing:-.012em;
  color:var(--carimbo);
  margin:0;
}

/* ---------- seções ---------- */
.sec{padding:48px 0}
.sec--alt{background:var(--papel-2);border-block:1px solid var(--linha)}
/* CTA de seção ocupa a largura toda no mobile. Antes era width:auto alinhado à
   esquerda, e a ação principal de cada seção acabava lendo como link secundário
   com meia tela vazia ao lado. */
:where(.sec) .btn{margin-top:28px;width:100%}
@media (min-width:640px){ :where(.sec) .btn{width:auto;min-width:320px} }

/* ---------- cartões ----------
   Extratos anotados: o que muda conforme o motivo da desistência. A linha
   do saldo é a carga útil da comparação, então ganha fio e tipo de display. */
.duo{display:grid;gap:16px;margin:28px 0 6px}
@media (min-width:760px){ .duo{grid-template-columns:1fr 1fr;gap:20px} }

.cartao{
  background:var(--papel);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  padding:22px;
}
/* :where() zera a especificidade destes dois, senão `.cartao p` (0,1,1)
   venceria `.cartao__saldo` (0,1,0) e o saldo sairia cinza. */
:where(.cartao) p{color:var(--grafite-2)}
:where(.cartao) p:last-child{margin-bottom:0}
.cartao__saldo{
  margin:16px 0 0;padding-top:16px;
  border-top:1px solid var(--linha);
  font-family:var(--display);
  font-size:17px;font-weight:700;line-height:1.35;letter-spacing:-.01em;
  color:var(--carimbo);
}
.cartao__saldo strong{font-weight:800}

/* ---------- passos ----------
   Aqui a numeração é honesta: é sequência de verdade. O fio vertical diz
   o que a seção promete — o escritório fica do começo ao fim. */
.passos{
  list-style:none;counter-reset:p;
  margin:30px 0 0;padding:0;
  display:grid;gap:28px;max-width:62ch;
}
.passos li{counter-increment:p;position:relative;padding-left:56px}
.passos li::before{
  content:counter(p);
  position:absolute;left:0;top:-5px;width:34px;
  text-align:center;
  font-family:var(--display);font-weight:800;font-size:27px;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  color:var(--carimbo);
}
.passos li::after{
  content:"";position:absolute;left:17px;top:30px;bottom:-28px;
  width:1px;background:var(--linha);
}
.passos li:last-child::after{display:none}
.passos p{margin:0;color:var(--grafite-2)}

/* ---------- casos ----------
   Sem tique verde. São problemas da pessoa, não vantagens do escritório:
   um ✓ em "perda de emprego" está tonalmente errado. */
.casos{
  list-style:none;margin:28px 0 22px;padding:0;
  max-width:62ch;border-top:1px solid var(--linha);
}
.casos li{
  padding:14px 0;
  border-bottom:1px solid var(--linha);
  line-height:1.45;
}

/* ---------- confronto: sozinho × com advogado ----------
   Sem vermelho e sem verde. Verde é só ação, e pintar uma coluna de vermelho
   seria alarme sem conteúdo. O contraste é cinza contra índigo — a mesma
   oposição da cláusula riscada na dobra, que é o argumento da página inteira. */
.confronto{display:grid;gap:16px;margin:28px 0 0}
@media (min-width:760px){ .confronto{grid-template-columns:1fr 1fr;gap:20px} }

.confronto__col{
  background:var(--papel);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  padding:20px 22px;
}
.confronto__col--nos{
  background:var(--carimbo-claro);
  border-color:var(--carimbo-linha);
}
.confronto__rot{
  font-family:var(--mono);
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--grafite-2);margin:0 0 12px;
}
.confronto__col--nos .confronto__rot{color:var(--carimbo)}

.confronto__lista{list-style:none;margin:0;padding:0}
.confronto__lista li{
  position:relative;
  padding:11px 0 11px 26px;
  border-top:1px solid var(--linha);
  font-size:16px;line-height:1.4;color:var(--grafite-2);
}
.confronto__lista li:first-child{border-top:0}
.confronto__lista li::before{
  content:"×";
  position:absolute;left:2px;top:11px;
  font-family:var(--mono);font-weight:700;font-size:15px;line-height:1.4;
  color:var(--grafite-2);
}
.confronto__col--nos .confronto__lista li{border-top-color:var(--carimbo-linha);color:var(--grafite)}
.confronto__col--nos .confronto__lista li::before{content:"✓";color:var(--carimbo)}

/* ---------- perfis ---------- */
.perfil{
  background:var(--papel);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  padding:22px;
}
.perfil__foto{
  width:96px;height:96px;border-radius:4px;object-fit:cover;
  margin-bottom:15px;background:var(--carimbo-claro);
}
.perfil__oab{
  font-family:var(--mono);
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--carimbo);margin:0 0 10px;
}
:where(.perfil) p:last-child{margin-bottom:0;color:var(--grafite-2)}

/* Credenciais como evidência, não como frase corrida. Mesma informação de
   antes — só que legível de relance, que é como esta seção é lida. */
.perfil__rot{
  font-family:var(--mono);
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--grafite-2);margin:16px 0 10px;
}
.perfil__cred{list-style:none;margin:0;padding:0}
.perfil__cred li{
  padding:10px 0;border-top:1px solid var(--linha);
  font-size:15.5px;line-height:1.35;color:var(--grafite);
}
.perfil__cred li:first-child{border-top:0;padding-top:0}
.perfil__cred li:last-child{padding-bottom:0}
.perfil__cred span{display:block;margin-top:3px;font-size:14px;color:var(--grafite-2)}

/* ---------- faq ----------
   ACHADO 05. Fio em vez de caixa: seis caixas empilhadas pesam mais que
   as seis respostas que elas guardam. */
.faq{border-bottom:1px solid var(--linha)}
.faq:first-of-type{border-top:1px solid var(--linha)}
.faq summary{
  cursor:pointer;list-style:none;
  padding:18px 44px 18px 0;position:relative;
  font-family:var(--display);
  font-weight:700;font-size:17px;line-height:1.35;letter-spacing:-.008em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:22px;font-weight:400;line-height:1;
  color:var(--carimbo);
}
.faq[open] summary::after{content:"–"}
.faq__resp{padding:0 0 20px}
.faq__resp p{margin:0;color:var(--grafite-2);max-width:62ch}
.pendente{
  background:var(--ocre-fundo);border-left:3px solid var(--ocre);
  padding:12px 15px;border-radius:0 var(--raio) var(--raio) 0;
  color:#5E4408 !important;
}

/* ---------- cta final ----------
   A única faixa escura da página inteira, guardada para o último pedido. */
.cta-final{
  background:var(--carimbo-esc);color:#fff;
  padding:52px 0 58px;text-align:center;
}
.cta-final h2{color:#fff}
.cta-final p{color:#C9CBE8;margin:0 auto 28px;max-width:46ch}

/* ---------- rodapé ---------- */
.rodape{
  padding:36px 0 110px;background:var(--papel-2);
  border-top:1px solid var(--linha);
  font-size:14.5px;color:var(--grafite-2);
}
.rodape p{margin:0 0 12px;max-width:70ch}
.rodape__mini{font-family:var(--mono);font-size:12px;line-height:1.65;letter-spacing:.01em}

/* ---------- botão flutuante ---------- */
/* ACHADO 04 — presente do início ao fim */
.flutuante{
  position:fixed;right:16px;bottom:16px;z-index:50;
  display:inline-flex;align-items:center;gap:9px;
  background:var(--zap);color:#fff;text-decoration:none;
  font-weight:700;font-size:15px;
  padding:13px 18px;border-radius:999px;
  box-shadow:0 6px 22px rgba(29,37,96,.28);
}
.flutuante:hover,.flutuante:focus-visible{background:var(--zap-esc)}
.flutuante .btn__zap{width:22px;height:22px}

/* ---------- aviso de cookies ---------- */
/* ACHADO 02 — barra fina no rodapé, nunca sobre a dobra */
.aviso{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--carimbo-esc);color:#DDDEF0;
  padding:11px 16px;font-size:13.5px;line-height:1.45;
}
.aviso p{margin:0;flex:1 1 240px}
.aviso button{
  background:#fff;color:var(--carimbo-esc);border:0;border-radius:var(--raio);
  padding:9px 16px;font-weight:700;font-size:13.5px;cursor:pointer;
  font-family:inherit;
}
.aviso[hidden]{display:none}
body.tem-aviso .flutuante{bottom:74px}

/* ---------- movimento ----------
   Um único momento animado na página inteira: o fio que risca a cláusula.
   O H1 não anima — ele é o LCP e precisa pintar na primeira oportunidade.
   Com movimento reduzido, o risco já nasce desenhado. */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .clausula__contrato{text-decoration-color:var(--carimbo)}
}