/* ============================================================================
   JúdiceAero — Advocacia em Direito Aéreo · Porto Alegre / RS

   CONCEITO: "CARTÃO DE EMBARQUE"
   A página se veste como um bilhete aéreo premium: céu de madrugada,
   uma linha de horizonte dourada, tipografia de painel de partidas,
   cartões com picote de ticket e luzes de pista.

   Mobile-first. Sem framework, sem build, sem dependência externa
   além das fontes. Um único arquivo CSS.

   ÍNDICE
     01. Tokens (cores, fontes, medidas)
     02. Reset e base
     03. Tipografia e utilitários
     04. Animações de entrada (reveal)
     05. Botões
     06. Cabeçalho
     07. Hero + céu + avião
     08. Painel de partidas (letreiro)
     09. Problemas frequentes (cartões-bilhete)
     10. Como funciona (rota de voo)
     11. Autoridade / quem somos
     12. Prova social (números + depoimentos)
     13. FAQ
     14. Chamada final
     15. Rodapé
     16. Barra fixa do celular + botão flutuante
     17. Páginas legais (privacidade / termos)
     18. Acessibilidade, impressão e movimento reduzido
   ============================================================================ */


/* ============================================================================
   01. TOKENS
   ============================================================================ */
:root{
  /* Céu — do preto-azulado do alto até o azul do horizonte */
  --night:#050F1C;
  --night2:#08192B;
  --night3:#0D2740;
  --night4:#123853;
  --horizon:#1B5378;

  /* Dourado de pista / luz de aproximação */
  --gold:#E0B145;
  --gold-l:#F6DA98;
  --gold-d:#A97F1C;
  --gold-soft:rgba(224,177,69,.13);

  /* Papel — seções claras */
  --paper:#F7F4EC;
  --paper2:#EFEADD;
  --paper3:#E3DBC9;

  /* Texto sobre o céu */
  --t-nig:#EDF3FA;
  --t-nig2:#A9BED6;
  --t-nig3:#7A8FA8;

  /* Texto sobre papel */
  --t-pap:#121E2C;
  --t-pap2:#4C5766;
  --t-pap3:#7B838F;

  --line-nig:rgba(237,243,250,.12);
  --line-pap:rgba(18,30,44,.13);

  --wa:#25D366;
  --wa-d:#0E8A43;
  --wa-ink:#04220F;

  --ease:cubic-bezier(.22,.8,.28,1);
  --pop:cubic-bezier(.2,1.5,.35,1);

  --wrap:1180px;
  --r:16px;
  --safe-b:env(safe-area-inset-bottom,0px);

  /* Granulado sutil: tira o "plástico" dos degradês grandes */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}


/* ============================================================================
   02. RESET E BASE
   ============================================================================ */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:76px;   /* o cabeçalho fixo não cobre a âncora */
}

body{
  margin:0;
  background:var(--night);
  color:var(--t-nig);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16.5px;
  line-height:1.62;
  letter-spacing:-.004em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:700}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}

/* Faixas de seção */
.s-night{background:var(--night2);color:var(--t-nig)}
.s-paper{background:var(--paper);color:var(--t-pap)}
.sec{padding:72px 0}
@media(min-width:900px){.sec{padding:112px 0}}


/* ============================================================================
   03. TIPOGRAFIA E UTILITÁRIOS
   ============================================================================ */

/* Display: serifa com peso — autoridade sem rigidez */
.disp{
  font-family:Fraunces,"Playfair Display",Georgia,"Times New Roman",serif;
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.02em;
  font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 40;
}

/* Mono: tudo que imita bilhete, painel de partidas e código de voo */
.mono{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
  font-variant-numeric:tabular-nums;
}

.gd{color:var(--gold)}

/* Etiqueta de seção — estilo painel do aeroporto */
.kick{
  display:inline-flex;align-items:center;gap:9px;
  font-family:"IBM Plex Mono",monospace;font-weight:600;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:18px;
}
.s-paper .kick{color:var(--gold-d)}
.kick::before{
  content:"";width:22px;height:1px;background:currentColor;opacity:.7;flex:none;
}

/* Ponto que pisca — "atendendo agora" */
.dot{
  width:7px;height:7px;border-radius:50%;background:var(--wa);flex:none;
  box-shadow:0 0 0 0 rgba(37,211,102,.55);
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}
  70%{box-shadow:0 0 0 9px rgba(37,211,102,0)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}

/* Títulos de seção */
.h2{
  font-size:clamp(29px,6.2vw,50px);
  max-width:22ch;
}
.lead{
  margin-top:16px;font-size:clamp(16px,3.5vw,18.5px);
  color:var(--t-nig2);max-width:60ch;line-height:1.68;
}
.s-paper .lead{color:var(--t-pap2)}

/* Régua dourada fina */
.rule{height:1px;background:linear-gradient(90deg,var(--gold),transparent);opacity:.5;border:0;margin:0}


/* ============================================================================
   04. ANIMAÇÕES DE ENTRADA
   Só escondem o conteúdo depois que o JavaScript confirmou presença
   (classe .js-rv no <html>). Sem JS, a página aparece inteira.
   ============================================================================ */
.js-rv .rv{
  opacity:0;transform:translateY(24px);
  transition:opacity .75s var(--ease),transform .75s var(--ease);
}
.js-rv .rv.in{opacity:1;transform:none}
.js-rv .rv-1{transition-delay:.08s}
.js-rv .rv-2{transition-delay:.16s}
.js-rv .rv-3{transition-delay:.24s}
.js-rv .rv-4{transition-delay:.32s}
.js-rv .rv-5{transition-delay:.40s}

/* Linha de título que sobe por trás de uma máscara */
.hl{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.hl>span{display:block}
.js-rv .hl>span{transform:translateY(115%);transition:transform .9s var(--ease)}
.js-rv .in .hl:nth-child(1)>span{transition-delay:.05s}
.js-rv .in .hl:nth-child(2)>span{transition-delay:.16s}
.js-rv .in .hl:nth-child(3)>span{transition-delay:.27s}
.js-rv .in .hl>span{transform:none}


/* ============================================================================
   05. BOTÕES
   ============================================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 26px;border-radius:999px;
  font-weight:700;font-size:16px;letter-spacing:-.01em;
  text-align:center;cursor:pointer;position:relative;overflow:hidden;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),background-color .28s;
  -webkit-tap-highlight-color:transparent;
}
.btn svg{flex:none}
.btn:active{transform:translateY(1px) scale(.99)}

/* Brilho que atravessa o botão — chama o olho sem piscar */
.btn::after{
  content:"";position:absolute;top:0;bottom:0;width:42%;
  left:-60%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-18deg);
}
.btn-wa::after{animation:sweep 4.6s var(--ease) 1.6s infinite}
@keyframes sweep{
  0%{left:-60%}
  22%{left:130%}
  100%{left:130%}
}

/* WhatsApp — o botão principal */
.btn-wa{
  background:var(--wa);color:var(--wa-ink);
  box-shadow:0 10px 30px -10px rgba(37,211,102,.55),inset 0 -2px 0 rgba(0,0,0,.13);
}
.btn-wa:hover{background:#2ee06f;transform:translateY(-2px);
  box-shadow:0 16px 38px -12px rgba(37,211,102,.7),inset 0 -2px 0 rgba(0,0,0,.13)}

/* Dourado — ações secundárias em fundo escuro */
.btn-gold{
  background:linear-gradient(180deg,var(--gold-l),var(--gold));
  color:#2A1D00;box-shadow:0 10px 28px -12px rgba(224,177,69,.6);
}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 36px -12px rgba(224,177,69,.75)}

/* Contorno */
.btn-ghost{
  border:1px solid var(--line-nig);color:var(--t-nig);
  background:rgba(255,255,255,.03);backdrop-filter:blur(8px);
}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.s-paper .btn-ghost{border-color:var(--line-pap);color:var(--t-pap);background:rgba(0,0,0,.02)}
.s-paper .btn-ghost:hover{border-color:var(--gold-d);color:var(--gold-d)}

.btn-sm{padding:11px 18px;font-size:14.5px}
.btn-lg{padding:19px 34px;font-size:17.5px}
.btn-block{display:flex;width:100%}
@media(min-width:560px){.btn-block{display:inline-flex;width:auto}}


/* ============================================================================
   06. CABEÇALHO
   ============================================================================ */
.top{
  position:fixed;inset:0 0 auto 0;z-index:70;padding:11px 0;
  background:rgba(5,15,28,.5);backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:background .35s,border-color .35s,padding .35s;
}
.top.stuck{
  background:rgba(5,15,28,.94);
  border-bottom-color:rgba(224,177,69,.26);
  padding:8px 0;
}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* --- logo --- */
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand-mark{
  width:38px;height:38px;flex:none;border-radius:50%;
  display:grid;place-items:center;color:var(--gold);
  background:radial-gradient(circle at 32% 26%,rgba(224,177,69,.28),rgba(224,177,69,.06) 62%);
  border:1px solid rgba(224,177,69,.42);
  transition:transform .5s var(--ease);
}
.brand:hover .brand-mark{transform:rotate(-12deg) scale(1.06)}
.brand-txt b{
  font-family:Fraunces,Georgia,serif;font-size:18px;font-weight:700;
  display:block;line-height:1.1;letter-spacing:-.02em;white-space:nowrap;
}
.brand-txt b i{font-style:normal;color:var(--gold);font-weight:700}
.brand-txt small{
  display:block;font-family:"IBM Plex Mono",monospace;font-size:8.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--t-nig3);margin-top:2px;
}
@media(max-width:360px){.brand-txt small{display:none}}

.top-cta{display:none}
@media(min-width:820px){.top-cta{display:inline-flex}}

/* Link de "ligar" no topo, só no celular */
.top-tel{
  display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line-nig);color:var(--t-nig2);transition:.25s;
}
.top-tel:hover{color:var(--gold);border-color:var(--gold)}
@media(min-width:820px){.top-tel{display:none}}


/* ============================================================================
   07. HERO
   ============================================================================ */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding:118px 0 64px;
  min-height:min(100svh,860px);
  display:flex;align-items:center;
  background:linear-gradient(178deg,
     #030A14 0%,
     var(--night) 22%,
     var(--night2) 48%,
     var(--night3) 74%,
     var(--horizon) 100%);
}
@media(min-width:900px){.hero{padding:150px 0 96px}}

/* --- camada do céu: estrelas, aurora, horizonte --- */
.sky{position:absolute;inset:0;z-index:-2;pointer-events:none}

/* Estrelas: pontos desenhados em degradê radial, custo zero de rede */
.stars{
  position:absolute;inset:0;opacity:.75;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 28% 9%,#EAF2FF,transparent),
    radial-gradient(1.6px 1.6px at 46% 24%,#fff,transparent),
    radial-gradient(1.1px 1.1px at 63% 13%,#D8E6FF,transparent),
    radial-gradient(1.5px 1.5px at 78% 27%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 89% 11%,#EAF2FF,transparent),
    radial-gradient(1.3px 1.3px at 7% 38%,#fff,transparent),
    radial-gradient(1px 1px at 36% 41%,#CFE0FF,transparent),
    radial-gradient(1.4px 1.4px at 57% 35%,#fff,transparent),
    radial-gradient(1.1px 1.1px at 71% 44%,#EAF2FF,transparent),
    radial-gradient(1.2px 1.2px at 94% 39%,#fff,transparent),
    radial-gradient(1px 1px at 20% 52%,#BFD4F0,transparent);
  animation:twinkle 7s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.42}to{opacity:.9}}

/* Aurora fria de fundo — dá profundidade ao topo */
.aurora{
  position:absolute;left:50%;top:-28%;width:150%;aspect-ratio:1/1;
  transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(45,120,175,.24),transparent 72%);
  filter:blur(12px);
}

/* Linha do horizonte + brilho do amanhecer */
.horizon{
  position:absolute;left:0;right:0;bottom:0;height:46%;
  background:
    linear-gradient(180deg,transparent,rgba(224,177,69,.10) 62%,rgba(246,218,152,.20) 100%);
}
.horizon::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-l) 22%,var(--gold) 50%,var(--gold-l) 78%,transparent);
  opacity:.75;
}

/* Granulado por cima de tudo, para o degradê não ficar plástico */
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--grain);opacity:.32;mix-blend-mode:overlay;
}

/* --- avião cruzando o horizonte, com rastro ---
   Fica baixo, junto ao brilho do amanhecer, e bem apagado: a leitura é de
   "aeronave distante", não de objeto em primeiro plano. Isso importa porque
   no celular o texto ocupa a altura toda do hero e o avião passa por trás
   dele — a 50% de opacidade virava ruído em cima da frase. */
.plane{
  position:absolute;z-index:-1;left:-14%;bottom:11%;
  width:clamp(64px,11vw,132px);color:rgba(237,243,250,.3);
  animation:cruise 34s linear infinite;
}
.plane svg{filter:drop-shadow(0 3px 12px rgba(0,0,0,.5))}
.plane::before{  /* rastro de condensação */
  content:"";position:absolute;right:88%;top:52%;width:52vw;height:2px;
  background:linear-gradient(90deg,transparent,rgba(237,243,250,.14));
  filter:blur(1.5px);
}
@media(min-width:900px){
  /* no computador sobra céu de verdade ao lado da coluna de texto */
  .plane{bottom:24%;color:rgba(237,243,250,.42)}
}
@keyframes cruise{
  0%{transform:translate(0,0)}
  100%{transform:translate(128vw,-16vh)}
}

/* --- foto real de fundo, quando o config.js apontar uma --- */
.hero.tem-foto .stars,
.hero.tem-foto .plane,
.hero.tem-foto .aurora{display:none}
.hero-foto{
  position:absolute;inset:0;z-index:-2;
  background-size:cover;background-position:center;
}
.hero-foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,15,28,.86) 0%,rgba(5,15,28,.66) 46%,rgba(5,15,28,.9) 100%);
}

/* --- conteúdo do hero --- */
.hero .wrap{position:relative;z-index:1}
.hero-copy{max-width:860px}

.hero h1{
  font-size:clamp(33px,8.4vw,74px);
  margin-bottom:22px;
}
.hero h1 .l2{color:var(--gold)}

.hero-sub{
  font-size:clamp(16.5px,3.9vw,20.5px);
  color:var(--t-nig2);max-width:56ch;line-height:1.66;
}
.hero-sub strong{color:var(--t-nig);font-weight:600}

.hero-cta{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}

.hero-nota{
  margin-top:16px;display:flex;align-items:flex-start;gap:9px;
  font-size:13.5px;color:var(--t-nig3);max-width:46ch;
}
.hero-nota svg{flex:none;margin-top:4px}

/* --- distintivos de autoridade: canhotos de bilhete --- */
.selos{
  margin-top:44px;display:grid;gap:10px;
  grid-template-columns:1fr;
}
@media(min-width:640px){.selos{grid-template-columns:repeat(3,1fr);gap:12px}}

.selo{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-radius:12px;
  background:rgba(237,243,250,.045);
  border:1px solid var(--line-nig);
  backdrop-filter:blur(10px);
  position:relative;overflow:hidden;
  transition:border-color .3s,transform .3s var(--ease),background .3s;
}
.selo:hover{border-color:rgba(224,177,69,.45);transform:translateY(-3px);background:rgba(237,243,250,.07)}
.selo::before{ /* picote do canhoto */
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:repeating-linear-gradient(180deg,var(--gold) 0 5px,transparent 5px 11px);
  opacity:.6;
}
.selo svg{color:var(--gold);flex:none}
.selo b{display:block;font-size:14.5px;font-weight:600;line-height:1.25}
.selo small{display:block;font-size:12px;color:var(--t-nig3);margin-top:1px}


/* ============================================================================
   08. PAINEL DE PARTIDAS (letreiro rolante)
   ============================================================================ */
.board{
  background:#030A14;
  border-block:1px solid rgba(224,177,69,.2);
  padding:13px 0;overflow:hidden;position:relative;
}
.board::before,.board::after{
  content:"";position:absolute;top:0;bottom:0;width:70px;z-index:2;pointer-events:none;
}
.board::before{left:0;background:linear-gradient(90deg,#030A14,transparent)}
.board::after{right:0;background:linear-gradient(270deg,#030A14,transparent)}

.board-track{
  display:flex;align-items:center;gap:0;width:max-content;
  animation:slide 42s linear infinite;
}
.board:hover .board-track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.board-item{
  display:inline-flex;align-items:center;gap:11px;
  padding:0 26px;white-space:nowrap;
  font-family:"IBM Plex Mono",monospace;font-weight:600;
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t-nig2);
}
.board-item i{
  font-style:normal;color:var(--gold);
  font-size:10.5px;letter-spacing:.1em;
  padding:2px 7px;border:1px solid rgba(224,177,69,.35);border-radius:3px;
}
.board-sep{color:rgba(224,177,69,.4);font-size:10px}


/* ============================================================================
   09. PROBLEMAS FREQUENTES — cartões em forma de bilhete
   ============================================================================ */
.probs{
  margin-top:44px;display:grid;gap:14px;
  grid-template-columns:1fr;
}
@media(min-width:680px){.probs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){
  .probs{grid-template-columns:repeat(6,1fr)}
  /* 5 cartões em 6 colunas: 3 em cima (2 col cada), 2 embaixo (3 col cada) */
  .probs>li:nth-child(1),
  .probs>li:nth-child(2),
  .probs>li:nth-child(3){grid-column:span 2}
  .probs>li:nth-child(4),
  .probs>li:nth-child(5){grid-column:span 3}
}

.prob{
  position:relative;display:flex;flex-direction:column;height:100%;
  padding:26px 24px 22px;border-radius:var(--r);
  background:linear-gradient(165deg,rgba(237,243,250,.055),rgba(237,243,250,.018));
  border:1px solid var(--line-nig);
  overflow:hidden;
  transition:transform .38s var(--ease),border-color .38s,box-shadow .38s;
}
.prob:hover{
  transform:translateY(-5px);
  border-color:rgba(224,177,69,.4);
  box-shadow:0 22px 48px -24px rgba(0,0,0,.85);
}

/* picote lateral do bilhete, com as duas meias-luas */
.prob::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:repeating-linear-gradient(180deg,rgba(224,177,69,.55) 0 6px,transparent 6px 13px);
  transition:background .38s;
}
.prob:hover::before{background:repeating-linear-gradient(180deg,var(--gold) 0 6px,transparent 6px 13px)}
.prob::after{
  content:"";position:absolute;left:-8px;top:50%;width:16px;height:16px;
  border-radius:50%;background:var(--night2);transform:translateY(-50%);
  border:1px solid var(--line-nig);
}

.prob-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.prob-ico{
  width:46px;height:46px;flex:none;border-radius:12px;display:grid;place-items:center;
  color:var(--gold);
  background:radial-gradient(circle at 30% 25%,rgba(224,177,69,.22),rgba(224,177,69,.05) 70%);
  border:1px solid rgba(224,177,69,.25);
  transition:transform .45s var(--pop);
}
.prob:hover .prob-ico{transform:translateY(-2px) rotate(-6deg) scale(1.05)}
.prob-cod{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.16em;color:var(--t-nig3);padding-top:6px;
}
.prob h3{font-size:19.5px;line-height:1.24;letter-spacing:-.015em;margin-bottom:9px}
.prob p{font-size:14.8px;color:var(--t-nig2);line-height:1.62;flex:1}

.prob-link{
  margin-top:18px;display:inline-flex;align-items:center;gap:7px;
  font-size:14px;font-weight:600;color:var(--gold);
  padding-top:14px;border-top:1px dashed rgba(224,177,69,.28);
}
.prob-link svg{transition:transform .3s var(--ease)}
.prob:hover .prob-link svg{transform:translateX(4px)}


/* ============================================================================
   10. COMO FUNCIONA — a rota de voo
   ============================================================================ */
.rota{margin-top:52px;position:relative}

.rota-lista{display:grid;gap:0;grid-template-columns:1fr}
@media(min-width:900px){.rota-lista{grid-template-columns:repeat(3,1fr);gap:26px}}

.passo{position:relative;padding:0 0 34px 56px}
@media(min-width:900px){.passo{padding:56px 0 0 0}}

/* linha tracejada — vertical no celular, horizontal no computador */
.passo::before{
  content:"";position:absolute;left:19px;top:34px;bottom:0;width:2px;
  background:repeating-linear-gradient(180deg,rgba(224,177,69,.5) 0 6px,transparent 6px 13px);
}
.passo:last-child::before{display:none}
@media(min-width:900px){
  .passo::before{
    left:40px;right:-26px;top:19px;bottom:auto;width:auto;height:2px;
    background:repeating-linear-gradient(90deg,rgba(224,177,69,.5) 0 6px,transparent 6px 13px);
  }
}

.passo-num{
  position:absolute;left:0;top:0;
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600;
  color:var(--gold);background:var(--night2);
  border:1.5px solid rgba(224,177,69,.5);
  transition:transform .5s var(--pop),box-shadow .5s;
}
.s-paper .passo-num{background:var(--paper);color:var(--gold-d);border-color:rgba(169,127,28,.45)}
.passo.in .passo-num{box-shadow:0 0 0 7px var(--gold-soft)}
.passo:hover .passo-num{transform:scale(1.08)}

.passo h3{font-size:20.5px;line-height:1.26;margin-bottom:9px;letter-spacing:-.015em}
.passo p{font-size:15.2px;color:var(--t-nig2);line-height:1.66;max-width:40ch}
.s-paper .passo p{color:var(--t-pap2)}

/* aviãozinho que percorre a rota (só em telas largas) */
.rota-aviao{display:none}
@media(min-width:900px){
  .rota-aviao{
    display:block;position:absolute;top:2px;left:40px;
    color:var(--gold);pointer-events:none;
  }
  .rota.in .rota-aviao{animation:voar 3.4s var(--ease) .35s both}
  @keyframes voar{
    from{transform:translateX(0);opacity:0}
    12%{opacity:1}
    88%{opacity:1}
    to{transform:translateX(calc(100% + 66vw));opacity:0}
  }
}

.rota-cta{margin-top:34px}
@media(min-width:900px){.rota-cta{margin-top:52px}}


/* ============================================================================
   11. AUTORIDADE / QUEM SOMOS
   ============================================================================ */
.sobre{display:grid;gap:36px;align-items:center}
@media(min-width:960px){.sobre{grid-template-columns:1fr 1fr;gap:64px}}

/* moldura em forma de cartão de embarque */
.sobre-media{
  position:relative;border-radius:var(--r);overflow:hidden;
  aspect-ratio:4/3;
  background:linear-gradient(160deg,var(--night3),var(--night));
  border:1px solid var(--line-pap);
  box-shadow:0 28px 60px -30px rgba(18,30,44,.55);
}
.sobre-media img{width:100%;height:100%;object-fit:cover}

/* céu desenhado, usado enquanto não houver foto */
.sobre-sky{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
.sobre-sky::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 50% 108%,rgba(224,177,69,.4),transparent 62%),
    linear-gradient(180deg,#04101E,#0D2740 62%,#1B5378 100%);
}
.sobre-sky::after{
  content:"";position:absolute;inset:0;background-image:var(--grain);
  opacity:.3;mix-blend-mode:overlay;
}
.sobre-sky svg{position:relative;color:rgba(237,243,250,.62);width:46%;height:auto}

.sobre-tag{
  position:absolute;left:16px;bottom:16px;z-index:2;
  display:flex;align-items:center;gap:10px;
  padding:10px 15px;border-radius:10px;
  background:rgba(5,15,28,.72);backdrop-filter:blur(10px);
  border:1px solid rgba(224,177,69,.3);
  font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-l);
}

.sobre-txt .h2{margin-bottom:18px}
.sobre-txt p+p{margin-top:14px}

.sobre-lista{margin-top:26px;display:grid;gap:13px}
.sobre-lista li{display:flex;gap:12px;align-items:flex-start;font-size:15.4px;line-height:1.55}
.sobre-lista svg{color:var(--gold-d);flex:none;margin-top:4px}
.sobre-lista b{font-weight:600}

.sobre-oab{
  margin-top:28px;padding:16px 18px;border-radius:12px;
  background:var(--paper2);border:1px solid var(--line-pap);
  font-size:13.6px;color:var(--t-pap2);line-height:1.6;
  display:flex;gap:12px;align-items:flex-start;
}
.sobre-oab svg{color:var(--gold-d);flex:none;margin-top:3px}


/* ============================================================================
   12. PROVA SOCIAL — números + depoimentos
   ============================================================================ */
.nums{
  display:grid;gap:1px;margin-top:44px;
  grid-template-columns:repeat(2,1fr);
  background:var(--line-nig);
  border:1px solid var(--line-nig);border-radius:var(--r);overflow:hidden;
}
@media(min-width:860px){.nums{grid-template-columns:repeat(4,1fr)}}

.num{
  background:var(--night2);padding:28px 20px;text-align:center;
  transition:background .35s;
}
.num:hover{background:var(--night3)}
.num b{
  display:block;font-family:Fraunces,Georgia,serif;font-weight:700;
  font-size:clamp(34px,7vw,52px);line-height:1;color:var(--gold);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.num span{
  display:block;margin-top:9px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--t-nig3);
  line-height:1.5;
}

/* depoimentos */
.deps{
  margin-top:20px;display:grid;gap:14px;grid-template-columns:1fr;
}
@media(min-width:760px){.deps{grid-template-columns:repeat(3,1fr)}}

.dep{
  padding:24px 22px;border-radius:var(--r);
  background:rgba(237,243,250,.045);
  border:1px solid var(--line-nig);
  display:flex;flex-direction:column;
  transition:transform .35s var(--ease),border-color .35s;
}
.dep:hover{transform:translateY(-4px);border-color:rgba(224,177,69,.35)}

.dep-stars{display:flex;gap:3px;color:var(--gold);margin-bottom:14px}
.dep p{font-size:15.2px;line-height:1.64;color:var(--t-nig2);flex:1}
.dep-quem{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line-nig);
  display:flex;align-items:center;gap:12px;
}
.dep-av{
  width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-weight:700;font-size:15px;color:var(--night);
  background:linear-gradient(180deg,var(--gold-l),var(--gold));
}
.dep-quem b{display:block;font-size:14.5px;font-weight:600;line-height:1.25}
.dep-quem small{display:block;font-size:12px;color:var(--t-nig3);margin-top:1px}

.deps-nota{
  margin-top:20px;font-size:12.6px;color:var(--t-nig3);
  line-height:1.6;max-width:78ch;
}


/* ============================================================================
   13. FAQ
   ============================================================================ */
.faq{margin-top:40px;max-width:860px;border-top:1px solid var(--line-pap)}

.fq{border-bottom:1px solid var(--line-pap)}

.fq-btn{
  width:100%;display:flex;align-items:flex-start;gap:16px;
  padding:22px 0;text-align:left;
  transition:color .25s;
}
.fq-btn:hover{color:var(--gold-d)}

.fq-q{
  flex:1;font-size:17px;font-weight:600;line-height:1.45;letter-spacing:-.012em;
}
@media(min-width:700px){.fq-q{font-size:18.5px}}

.fq-chev{
  flex:none;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;margin-top:-2px;
  border:1px solid var(--line-pap);color:var(--gold-d);
  transition:transform .38s var(--ease),background .28s,border-color .28s;
}
.fq-btn:hover .fq-chev{background:var(--gold-soft);border-color:rgba(169,127,28,.4)}
.fq.open .fq-chev{transform:rotate(180deg);background:var(--gold-soft);border-color:rgba(169,127,28,.45)}

/* abertura suave sem medir altura no JavaScript */
.fq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--ease)}
.fq.open .fq-a{grid-template-rows:1fr}
.fq-a>div{overflow:hidden}
.fq-a-in{
  padding:0 46px 24px 0;font-size:15.6px;line-height:1.72;color:var(--t-pap2);
  max-width:68ch;
}
.fq-a-in strong{color:var(--t-pap);font-weight:600}
.fq-a-in p+p{margin-top:12px}

.faq-cta{
  margin-top:34px;padding:24px;border-radius:var(--r);
  background:var(--paper2);border:1px solid var(--line-pap);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
}
.faq-cta b{display:block;font-size:17.5px;line-height:1.35;letter-spacing:-.015em}
.faq-cta small{display:block;font-size:14px;color:var(--t-pap2);margin-top:4px}


/* ============================================================================
   14. CHAMADA FINAL
   ============================================================================ */
.final{
  position:relative;isolation:isolate;overflow:hidden;
  padding:84px 0;text-align:center;
  background:linear-gradient(178deg,var(--night) 0%,var(--night2) 46%,var(--night3) 100%);
}
@media(min-width:900px){.final{padding:124px 0}}

.final::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(90% 60% at 50% 118%,rgba(224,177,69,.3),transparent 66%);
}
.final::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--grain);opacity:.3;mix-blend-mode:overlay;
}
.final-foto{
  position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;
}
.final-foto::after{
  content:"";position:absolute;inset:0;background:rgba(5,15,28,.8);
}

.final h2{font-size:clamp(30px,6.8vw,56px);margin-inline:auto;max-width:20ch}
.final p{margin:18px auto 0;max-width:52ch;color:var(--t-nig2);font-size:clamp(16px,3.6vw,18.5px)}
.final .btn{margin-top:32px}

/* luzes de pista sob a chamada final */
.pista{
  margin-top:44px;display:flex;justify-content:center;gap:10px;
}
.pista i{
  width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:.25;
  animation:pista 2.6s linear infinite;
}
.pista i:nth-child(1){animation-delay:0s}
.pista i:nth-child(2){animation-delay:.16s}
.pista i:nth-child(3){animation-delay:.32s}
.pista i:nth-child(4){animation-delay:.48s}
.pista i:nth-child(5){animation-delay:.64s}
.pista i:nth-child(6){animation-delay:.8s}
.pista i:nth-child(7){animation-delay:.96s}
@keyframes pista{
  0%,100%{opacity:.18;box-shadow:none}
  18%{opacity:1;box-shadow:0 0 12px 2px rgba(224,177,69,.65)}
}


/* ============================================================================
   15. RODAPÉ
   ============================================================================ */
.rodape{background:#030A14;padding:56px 0 0;font-size:14.6px;color:var(--t-nig2)}

.rod-grid{display:grid;gap:34px}
@media(min-width:820px){.rod-grid{grid-template-columns:1.25fr 1fr 1fr;gap:48px}}

.rod-brand{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.rod h4{
  font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:15px;
}
.rod-lista{display:grid;gap:11px}
.rod-lista li{display:flex;gap:11px;align-items:flex-start;line-height:1.55}
.rod-lista svg{color:var(--gold);flex:none;margin-top:4px}
.rod-lista a{transition:color .25s}
.rod-lista a:hover{color:var(--gold)}
.rod-lista address{font-style:normal}

.rod-nav{display:grid;gap:10px}
.rod-nav a{color:var(--t-nig2);transition:color .25s;width:fit-content}
.rod-nav a:hover{color:var(--gold)}

.rod-oab{
  margin-top:40px;padding:20px 0;
  border-top:1px solid var(--line-nig);
  font-size:12.8px;line-height:1.68;color:var(--t-nig3);
}
.rod-oab b{color:var(--t-nig2);font-weight:600}

.rod-fim{
  padding:18px 0 calc(96px + var(--safe-b));
  border-top:1px solid var(--line-nig);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;
  font-size:12.6px;color:var(--t-nig3);
}
@media(min-width:820px){.rod-fim{padding-bottom:26px}}
.rod-fim a{transition:color .25s}
.rod-fim a:hover{color:var(--gold)}


/* ============================================================================
   16. BARRA FIXA DO CELULAR + BOTÃO FLUTUANTE
   O objetivo: a partir do momento em que o botão do hero sai da tela,
   nunca mais existe um instante sem um caminho de contato visível.
   ============================================================================ */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  padding:10px 16px calc(10px + var(--safe-b));
  background:rgba(5,15,28,.93);backdrop-filter:blur(16px);
  border-top:1px solid rgba(224,177,69,.24);
  display:flex;gap:10px;align-items:center;
  transform:translateY(115%);
  transition:transform .42s var(--ease);
}
.dock.show{transform:none}
.dock .btn{flex:1}
.dock-tel{
  width:48px;height:48px;flex:none;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-nig);color:var(--t-nig);
}
@media(min-width:820px){.dock{display:none}}

.fab{
  display:none;position:fixed;right:24px;bottom:24px;z-index:80;
  width:58px;height:58px;border-radius:50%;place-items:center;
  background:var(--wa);color:var(--wa-ink);
  box-shadow:0 14px 34px -10px rgba(37,211,102,.65);
  transform:scale(0);transition:transform .4s var(--pop),box-shadow .3s;
}
.fab.show{transform:scale(1)}
.fab:hover{box-shadow:0 18px 42px -10px rgba(37,211,102,.85)}
.fab::before{ /* halo que respira */
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--wa);opacity:0;
  animation:halo 2.8s var(--ease) infinite;
}
@keyframes halo{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(1.5);opacity:0}
  100%{opacity:0}
}
@media(min-width:820px){.fab{display:grid}}


/* ============================================================================
   17. PÁGINAS LEGAIS (privacidade / termos)
   ============================================================================ */
.legal{padding:118px 0 72px;background:var(--paper);color:var(--t-pap);min-height:100vh}
.legal .wrap{max-width:780px}
.legal h1{font-size:clamp(30px,6.5vw,46px);margin-bottom:10px}
.legal .legal-data{
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--t-pap3);margin-bottom:34px;
}
.legal h2{font-size:21px;margin:38px 0 12px;letter-spacing:-.015em}
.legal p,.legal li{font-size:15.6px;line-height:1.74;color:var(--t-pap2)}
.legal p+p{margin-top:13px}
.legal ul{margin-top:12px;display:grid;gap:9px}
.legal ul li{padding-left:20px;position:relative}
.legal ul li::before{
  content:"";position:absolute;left:0;top:10px;width:7px;height:7px;
  border-radius:50%;background:var(--gold);
}
.legal a{color:var(--gold-d);text-decoration:underline;text-underline-offset:3px}
.legal-voltar{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:30px;
  font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-d);
}
.legal-voltar:hover{text-decoration:underline}


/* ============================================================================
   18. ACESSIBILIDADE, IMPRESSÃO E MOVIMENTO REDUZIDO
   ============================================================================ */

/* Link "pular para o conteúdo" — aparece só ao navegar por teclado */
.pula{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gold);color:#2A1D00;padding:12px 18px;
  border-radius:0 0 10px 0;font-weight:700;
}
.pula:focus{left:0}

:focus-visible{
  outline:2.5px solid var(--gold);
  outline-offset:3px;border-radius:6px;
}

.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Quem pediu menos movimento recebe a página inteira, parada. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js-rv .rv,.js-rv .hl>span{opacity:1 !important;transform:none !important}
}

@media print{
  .top,.dock,.fab,.board,.pula,.hero-cta,.rota-cta,.faq-cta{display:none !important}
  body{background:#fff;color:#000}
  .s-night,.hero,.final,.rodape{background:#fff !important;color:#000 !important}
  .fq-a{grid-template-rows:1fr !important}
}