/* =====================================================================
   Consultoria Fernando de Noronha · folha de estilo do site
   Design system v2.0 · tokens do manual da marca
   Estrutura: 1 tokens · 2 base · 3 layout institucional · 4 trilha
              5 hero · 6 componentes · 7 seções · 8 modal · 9 rodapé
   ===================================================================== */

/* ---------- 1 · TOKENS ---------- */
:root{
  /* paleta oficial */
  --abissal:#062A5A; --atlantico:#1E78FF; --turquesa:#00C2B2; --mata:#00A85A;
  --laranja:#FF6B1A; --ambar:#FF9A1F; --amarelo:#FFC629;
  --areia:#FFF1DC; --raso:#D2F7F2; --grafite:#16161D; --branco:#FFFFFF;
  /* tokens de interface */
  --link:#0B57D0; --link-escuro:#7CC4FF;
  --muted:#4A5D7A; --muted-escuro:#B8C7E0;
  --linha:#E3E8F2; --linha-forte:#CBD5E6; --azul-raso:#E1ECFF;
  --fundo-frio:#F6F9FE;
  /* tipografia */
  --titulo:"Poppins",system-ui,Arial,sans-serif;
  --texto:"Inter",system-ui,Arial,sans-serif;
  /* formas */
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-2xl:36px;
  --sombra:0 24px 48px -28px rgba(6,42,90,.45);
  --sombra-alta:0 44px 90px -40px rgba(6,42,90,.6);
  --ease:cubic-bezier(.2,.8,.2,1);
  --grao:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='240' height='240' filter='url(%23g)'/></svg>");
  /* medidas */
  --largura:1200px;
  --alt-nav:72px;
  --alt-trilha:46px;
}

/* escala de corpo controlada pela barra de acessibilidade */
html[data-corpo="g"]{font-size:18px}
html[data-corpo="gg"]{font-size:20px}

/* modo alto contraste (barra institucional) */
html[data-contraste="alto"]{
  --muted:#13223A; --linha:#062A5A; --linha-forte:#062A5A; --link:#0B3EA8;
  --areia:#FFFFFF; --raso:#FFFFFF; --fundo-frio:#FFFFFF; --azul-raso:#FFFFFF;
}
html[data-contraste="alto"] body{background:#fff}
html[data-contraste="alto"] .foto-fundo img{filter:grayscale(1) contrast(1.15)}

/* ---------- 2 · BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
/* o atributo hidden precisa vencer as classes de componente */
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--alt-nav) + var(--alt-trilha) + 12px)}
body{
  margin:0;background:var(--branco);color:var(--abissal);
  font:400 1.0625rem/1.65 var(--texto);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3,h4,h5{font-family:var(--titulo);font-weight:700;line-height:1.08;margin:0;letter-spacing:-.015em}
h2{font-size:clamp(30px,4.2vw,50px)}
h3{font-size:clamp(21px,2.2vw,26px);font-weight:600;line-height:1.25;letter-spacing:-.005em}
h4{font-size:19px;font-weight:600;line-height:1.3;letter-spacing:0}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.15em}
strong,b{font-weight:600}
:focus-visible{outline:3px solid var(--laranja);outline-offset:3px;border-radius:4px}
::selection{background:var(--amarelo);color:var(--abissal)}
button{font-family:inherit}
.visualmente-oculto{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pular{position:absolute;left:12px;top:-60px;z-index:100;background:var(--amarelo);color:var(--abissal);padding:12px 18px;border-radius:0 0 12px 12px;font:600 14px var(--titulo);text-decoration:none;transition:top .2s}
.pular:focus{top:0}

/* ---------- 3 · LAYOUT INSTITUCIONAL ---------- */
.wrap{max-width:var(--largura);margin:0 auto;padding:0 24px}
.wrap-estreito{max-width:860px;margin:0 auto;padding:0 24px}
section{padding:clamp(60px,7.6vw,102px) 0;position:relative}

.escuro{background:var(--abissal);color:#fff}
.escuro h2,.escuro h3,.escuro h4{color:#fff}
.escuro a{color:var(--link-escuro)}
.areia{background:var(--areia)}
.frio{background:var(--fundo-frio)}
.raso-bg{background:var(--raso)}
.azul{background:var(--atlantico);color:#fff}

.grao{position:relative;isolation:isolate}
.grao::after{
  content:"";position:absolute;inset:0;background-image:var(--grao);background-size:240px;
  mix-blend-mode:overlay;opacity:.4;pointer-events:none;border-radius:inherit;z-index:3;
}
.areia.grao::after,.frio.grao::after,.raso-bg.grao::after{mix-blend-mode:multiply;opacity:.1}

/* sobretítulo com o quarto de sol da marca */
.sobre{
  display:inline-flex;align-items:center;gap:10px;
  font:600 13px/1 var(--titulo);letter-spacing:.24em;text-transform:uppercase;
  color:var(--link);margin:0 0 18px;
}
.sobre::before{
  content:"";width:14px;height:14px;flex:none;
  background:conic-gradient(from 0deg at 0 100%,var(--laranja) 0 25%,transparent 0);
  border-radius:0 14px 0 0;
}
.escuro .sobre,.azul .sobre{color:var(--amarelo)}
.escuro .sobre::before,.azul .sobre::before{background:conic-gradient(from 0deg at 0 100%,var(--amarelo) 0 25%,transparent 0)}

/* numeração de seção, no jeito de documento oficial */
.marco{display:flex;align-items:flex-start;gap:20px;margin-bottom:26px}
.marco .num{
  flex:none;width:58px;height:58px;display:grid;place-items:center;
  font:700 20px/1 var(--titulo);color:#fff;background:var(--atlantico);
  border-radius:29px 29px 0 0;position:relative;
}
.marco.t-turquesa .num{background:var(--turquesa);color:var(--abissal);border-radius:0 29px 0 29px}
.marco.t-mata .num{background:var(--mata);border-radius:50%}
.marco.t-laranja .num{background:var(--laranja);color:var(--abissal);border-radius:0 58px 0 0}
.marco.t-amarelo .num{background:var(--amarelo);color:var(--abissal);border-radius:29px 29px 0 0}
.marco.t-abissal .num{background:var(--abissal);border-radius:50% 50% 50% 0}
.escuro .marco.t-abissal .num{background:#fff;color:var(--abissal)}
.marco .tit{flex:1;min-width:0}
.marco .tit .sobre{margin-bottom:8px}

.lead{font-size:clamp(18px,1.6vw,20px);line-height:1.6;max-width:68ch;color:var(--muted)}
.escuro .lead{color:var(--muted-escuro)}
.azul .lead{color:#EAF2FF}
.texto-largura{max-width:68ch}

/* frase de efeito que quebra objeção */
.efeito{
  font:700 clamp(24px,3.2vw,40px)/1.14 var(--titulo);letter-spacing:-.02em;
  margin:0;max-width:26ch;text-wrap:balance;
}
.efeito .realce{color:var(--laranja)}
.escuro .efeito .realce,.azul .efeito .realce{color:var(--amarelo)}
blockquote.faixa-efeito{
  margin:0;padding:clamp(38px,5.6vw,72px) 0;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);
  display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;
}
.escuro blockquote.faixa-efeito{border-color:rgba(255,255,255,.18)}
blockquote.faixa-efeito cite{font:400 14px/1.55 var(--texto);font-style:normal;color:var(--muted);max-width:30ch;text-align:right}
.escuro blockquote.faixa-efeito cite{color:var(--muted-escuro)}
@media (max-width:760px){
  blockquote.faixa-efeito{grid-template-columns:1fr}
  blockquote.faixa-efeito cite{text-align:left}
}

/* ---------- 3.1 · BARRA INSTITUCIONAL ---------- */
.barra-gov{background:var(--abissal);color:#fff;font:500 12px/1 var(--titulo);letter-spacing:.06em;position:relative;z-index:40}
.barra-gov .wrap{display:flex;align-items:center;gap:16px;min-height:38px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.barra-gov .pontos{display:flex;gap:4px}
.barra-gov .pontos i{width:9px;height:9px;display:block}
.barra-gov .sep{opacity:.32}
.barra-gov .dir{margin-left:auto;display:flex;align-items:center;gap:8px}
.barra-gov a{color:#fff;text-decoration:none;opacity:.85}
.barra-gov a:hover{opacity:1;text-decoration:underline}
.barra-gov button{
  all:unset;cursor:pointer;padding:5px 9px;border-radius:6px;border:1px solid rgba(255,255,255,.3);
  font:600 11px/1 var(--titulo);letter-spacing:.08em;
}
.barra-gov button:hover{background:rgba(255,255,255,.14)}
.barra-gov button[aria-pressed="true"]{background:var(--amarelo);color:var(--abissal);border-color:var(--amarelo)}
@media (max-width:860px){.barra-gov .oculta-m{display:none}}

/* ---------- 3.2 · NAVEGAÇÃO ---------- */
.nav-topo{
  position:sticky;top:0;z-index:35;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--linha);
}
.nav-topo .wrap{display:flex;align-items:center;gap:18px;height:var(--alt-nav)}
.nav-topo .marca{display:flex;align-items:center;flex:none}
.nav-topo .marca img{height:44px;width:auto}
.nav-topo .menu{display:flex;gap:2px;list-style:none;margin:0 0 0 auto;padding:0}
.nav-topo .menu a{
  display:block;padding:9px 12px;border-radius:999px;text-decoration:none;color:var(--abissal);
  font:500 14px/1 var(--titulo);white-space:nowrap;transition:background .2s var(--ease);
}
.nav-topo .menu a:hover{background:var(--raso)}
.nav-topo .menu a[aria-current="true"]{background:var(--abissal);color:#fff}
.nav-topo .acoes{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}
.nav-topo .menu+.acoes{margin-left:12px}
.nav-abrir{
  all:unset;cursor:pointer;display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--linha-forte);
  place-items:center;
}
.nav-abrir span{display:block;width:20px;height:2px;background:var(--abissal);position:relative}
.nav-abrir span::before,.nav-abrir span::after{content:"";display:block;width:20px;height:2px;background:var(--abissal);position:absolute}
.nav-abrir span::before{top:-6px}
.nav-abrir span::after{top:6px}
@media (max-width:1120px){
  .nav-topo .menu{display:none}
  .nav-abrir{display:grid}
}
@media (max-width:620px){
  .nav-topo .marca img{height:34px}
  .nav-topo .acoes .btn{padding:12px 15px;font-size:14px}
  .so-desktop{display:none!important}
}

/* gaveta mobile */
.gaveta{
  position:fixed;inset:0;z-index:60;background:rgba(6,42,90,.55);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;
}
.gaveta[data-aberta="1"]{opacity:1;visibility:visible}
.gaveta .painel{
  position:absolute;inset:0 0 0 auto;width:min(380px,88vw);background:#fff;
  padding:22px;overflow-y:auto;transform:translateX(100%);transition:transform .34s var(--ease);
  display:flex;flex-direction:column;gap:7px;
}
.gaveta[data-aberta="1"] .painel{transform:none}
.gaveta .painel .topo{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.gaveta .painel img{height:36px;width:auto}
.gaveta .painel a{
  display:block;padding:14px 16px;border-radius:12px;text-decoration:none;color:var(--abissal);
  font:600 16px/1.2 var(--titulo);border:1px solid var(--linha);
}
.gaveta .painel a:hover{background:var(--raso)}
.gaveta .painel .btn{margin-top:10px}
.gaveta .fechar{all:unset;cursor:pointer;width:40px;height:40px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--linha);font:600 20px/1 var(--titulo)}

/* ---------- 4 · TRILHA: o caminho até a ilha ---------- */
.trilha{
  position:sticky;top:var(--alt-nav);z-index:34;background:#fff;
  border-bottom:1px solid var(--linha);height:var(--alt-trilha);
}
.trilha .wrap{display:flex;align-items:center;gap:18px;height:100%}
.trilha .rotulo{
  font:600 11px/1 var(--titulo);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  flex:none;white-space:nowrap;
}
.trilha .barra{position:relative;flex:1;height:4px;background:var(--linha);border-radius:2px;min-width:60px}
.trilha .barra .feito{
  position:absolute;inset:0 auto 0 0;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--atlantico),var(--turquesa) 58%,var(--mata));
  transition:width .16s linear;
}
.trilha .barra .marcos{position:absolute;inset:-5px 0;display:flex;justify-content:space-between;list-style:none;margin:0;padding:0}
.trilha .barra .marcos li{width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--linha-forte);transition:border-color .3s,transform .3s var(--ease),background .3s}
.trilha .barra .marcos li[data-passou="1"]{border-color:var(--atlantico);background:var(--atlantico)}
.trilha .barra .marcos li[data-ativo="1"]{border-color:var(--laranja);background:#fff;transform:scale(1.22)}
.trilha .agora{
  font:600 13px/1 var(--titulo);color:var(--abissal);flex:none;white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px;
}
.trilha .agora .pino{
  width:16px;height:16px;flex:none;
  background:conic-gradient(from 0deg at 0 100%,var(--laranja) 0 25%,transparent 0);
  border-radius:0 16px 0 0;animation:pulsar 2.6s ease-in-out infinite;
}
@media (max-width:760px){
  .trilha .rotulo{display:none}
  .trilha .agora{font-size:12px}
}
@media (max-width:440px){
  .trilha{display:none}
  html{scroll-padding-top:calc(var(--alt-nav) + 12px)}
}

/* você está aqui, dentro das seções */
.aqui{
  display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 9px;border-radius:999px;
  background:var(--raso);color:var(--abissal);font:600 12px/1 var(--titulo);letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:18px;
}
.aqui .ponto{width:10px;height:10px;border-radius:50%;background:var(--turquesa);animation:farol 2.6s ease-out infinite}
.escuro .aqui{background:rgba(255,255,255,.12);color:#fff}
.azul .aqui{background:rgba(255,255,255,.2);color:#fff}

/* ---------- 5 · HERO ---------- */
.hero{padding:0;position:relative;overflow:hidden;background:var(--abissal);color:#fff;isolation:isolate}
.foto-fundo{position:absolute;inset:0;z-index:0}
.foto-fundo img{width:100%;height:100%;object-fit:cover}
.foto-fundo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(104deg,rgba(6,42,90,.96) 0%,rgba(6,42,90,.88) 36%,rgba(6,42,90,.46) 70%,rgba(0,194,178,.2) 100%);
}
.hero .wrap{
  position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:50px;align-items:center;
  min-height:min(650px,80vh);padding-top:clamp(50px,6vw,78px);padding-bottom:clamp(50px,6vw,78px);
}
.hero h1{font-size:clamp(36px,5.4vw,74px);line-height:.98;margin:0 0 16px;text-wrap:balance}
.hero .slogan{font:500 clamp(21px,3.2vw,44px)/1.14 var(--titulo);color:var(--amarelo);margin:0 0 24px;max-width:22ch}
.hero p.intro{font-size:clamp(16.5px,1.5vw,19px);line-height:1.62;color:#E3EEFF;max-width:54ch;margin:0 0 26px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero .selo-honesto{
  margin-top:24px;display:flex;align-items:flex-start;gap:12px;font:400 14px/1.5 var(--texto);color:#BFD6FF;max-width:48ch;
}
.hero .selo-honesto .q{width:24px;height:24px;flex:none;border-radius:0 24px 0 0;background:var(--turquesa);margin-top:2px}
@media (max-width:980px){.hero .wrap{grid-template-columns:1fr;gap:34px}}

/* cartão do mapa do caminho, no hero */
.mapa-caminho{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:var(--r-2xl);
  padding:clamp(22px,3vw,30px);backdrop-filter:blur(8px);
}
.mapa-caminho .cab{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.mapa-caminho .cab b{font:600 12px/1 var(--titulo);letter-spacing:.2em;text-transform:uppercase;color:var(--amarelo)}
.mapa-caminho .cab span{font:400 12px var(--texto);color:#BFD6FF}
.mapa-caminho ol{list-style:none;margin:0;padding:0;display:grid}
.mapa-caminho li{display:grid;grid-template-columns:32px 1fr;gap:14px;align-items:center;padding:10px 0;position:relative}
.mapa-caminho li+li::before{content:"";position:absolute;left:15px;top:-12px;width:2px;height:12px;background:rgba(255,255,255,.28)}
.mapa-caminho li .f{width:32px;height:32px;flex:none}
.mapa-caminho li b{font:600 14.5px/1.25 var(--titulo);display:block;color:#fff}
.mapa-caminho li small{font:400 12.5px/1.4 var(--texto);color:#BFD6FF}
.mapa-caminho .nota{margin:16px 0 0;font:400 13px/1.5 var(--texto);color:#BFD6FF;padding-top:14px;border-top:1px solid rgba(255,255,255,.2)}

/* ---------- 6 · COMPONENTES ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font:600 16px/1 var(--titulo);padding:17px 26px;border-radius:999px;text-decoration:none;
  border:2px solid transparent;cursor:pointer;text-align:center;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,color .25s;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sombra)}
.btn:active{transform:translateY(0)}
.btn .seta{transition:transform .25s var(--ease);flex:none}
.btn:hover .seta{transform:translateX(4px)}
.btn.principal{background:var(--laranja);color:var(--abissal)}
.btn.principal:hover{background:#FF7D33}
.btn.secundario{background:var(--abissal);color:#fff}
.btn.claro{background:#fff;color:var(--abissal)}
.btn.contorno{border-color:currentColor;background:transparent;color:inherit}
.btn.contorno:hover{background:rgba(6,42,90,.07)}
.escuro .btn.contorno:hover,.azul .btn.contorno:hover,.hero .btn.contorno:hover{background:rgba(255,255,255,.14)}
.btn.empresa{background:var(--atlantico);color:#fff;font-size:18px;font-weight:700}
.btn.pequeno{padding:12px 18px;font-size:14px}
.btn.largo{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn-texto{
  all:unset;cursor:pointer;color:var(--link);font:600 15px/1 var(--titulo);
  display:inline-flex;align-items:center;gap:8px;
}
.btn-texto:hover{text-decoration:underline}
.escuro .btn-texto{color:var(--link-escuro)}

.selo{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:999px;font:600 13px/1 var(--titulo);letter-spacing:.04em}
.selo i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none}
.selo.pessoas{background:var(--raso);color:var(--abissal)}
.selo.pessoas i{background:var(--turquesa)}
.selo.empresas{background:var(--azul-raso);color:var(--abissal)}
.selo.empresas i{background:var(--atlantico)}

.etiqueta{display:inline-block;padding:5px 11px;border-radius:6px;font:600 11px/1.4 var(--titulo);letter-spacing:.14em;text-transform:uppercase}
.etiqueta.verde{background:var(--mata);color:#fff}
.etiqueta.turq{background:var(--turquesa);color:var(--abissal)}
.etiqueta.amar{background:var(--amarelo);color:var(--abissal)}
.etiqueta.lar{background:var(--laranja);color:var(--abissal)}
.etiqueta.azul-e{background:var(--atlantico);color:#fff}
.etiqueta.neutra{background:var(--raso);color:var(--abissal)}

/* formas geométricas da marca, usadas no lugar de ícones */
.forma{flex:none;display:block}
.forma.sol{background:conic-gradient(from 0deg at 0 100%,var(--laranja) 0 25%,transparent 0);border-radius:0 100% 0 0}
.forma.sol-3{
  background:
    conic-gradient(from 0deg at 0 100%,var(--amarelo) 0 25%,transparent 0),
    conic-gradient(from 0deg at 0 100%,var(--ambar) 0 25%,transparent 0),
    conic-gradient(from 0deg at 0 100%,var(--laranja) 0 25%,transparent 0);
  background-size:42% 42%,70% 70%,100% 100%;
  background-position:left bottom,left bottom,left bottom;
  background-repeat:no-repeat;border-radius:0 100% 0 0;
}
.forma.partida{background:var(--atlantico);border-radius:var(--r-sm) var(--r-sm) 0 0}
.forma.ilha{background:var(--mata);border-radius:var(--r-sm) var(--r-sm) 0 0}
.forma.ponte{background:var(--turquesa);clip-path:polygon(0 0,42% 0,100% 100%,58% 100%)}
.forma.circulo{background:var(--turquesa);border-radius:50%}
.forma.gota{background:var(--abissal);border-radius:50% 50% 50% 0}
.forma.arco{background:var(--atlantico);border-radius:999px 999px 0 0}
.forma.quarto-inv{background:var(--amarelo);border-radius:0 0 0 100%}
.forma.losango{background:var(--mata);border-radius:0 var(--r-sm) 0 var(--r-sm)}
.forma.meia{background:var(--ambar);border-radius:999px 0 0 999px}

/* cartões */
.cartao{
  background:#fff;border:1px solid var(--linha);border-radius:var(--r-xl);padding:clamp(22px,2.6vw,30px);
  display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.cartao.alca:hover{transform:translateY(-4px);box-shadow:var(--sombra);border-color:var(--linha-forte)}
.cartao p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.6}
.cartao .canto{position:absolute;right:0;top:0;width:76px;height:76px;border-radius:0 0 0 100%;opacity:.16;pointer-events:none;z-index:0}
.cartao>*:not(.canto){position:relative;z-index:1}
.escuro .cartao{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.17)}
.escuro .cartao p{color:var(--muted-escuro)}

.grade{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* número de destaque */
.destaque-num{
  border-radius:var(--r-xl);padding:clamp(22px,2.6vw,28px);position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;min-height:206px;
}
.destaque-num .num{font:700 clamp(42px,5vw,66px)/1 var(--titulo);letter-spacing:-.03em}
.destaque-num .num small{font-size:.44em;font-weight:600;letter-spacing:0}
.destaque-num b{font:600 15px/1.35 var(--titulo);display:block;margin-top:10px}
.destaque-num span{font:400 13.5px/1.5 var(--texto);color:var(--muted);margin-top:4px;display:block}
.destaque-num .q{position:absolute;right:-1px;top:-1px;width:88px;height:88px;border-radius:0 0 0 100%;opacity:.9;z-index:0;pointer-events:none}
.destaque-num>*:not(.q){position:relative;z-index:1}
.escuro .destaque-num span{color:var(--muted-escuro)}

/* aviso honesto */
.aviso{
  display:grid;grid-template-columns:52px 1fr;gap:18px;padding:24px 26px;border-radius:var(--r-lg);
  background:var(--raso);border:1px solid #9BE7DE;
}
.aviso .ic{width:52px;height:52px;border-radius:0 52px 0 0;background:var(--turquesa)}
.aviso b{font:600 17px/1.3 var(--titulo);display:block;margin-bottom:5px}
.aviso p{margin:0;font-size:15px;line-height:1.6}
.escuro .aviso{background:rgba(0,194,178,.15);border-color:rgba(0,194,178,.42);color:#fff}
@media (max-width:560px){.aviso{grid-template-columns:1fr}}

/* FAQ */
.faq details{border-bottom:1px solid var(--linha);padding:2px 0}
.faq summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:flex-start;
  font:600 clamp(16.5px,1.6vw,19px)/1.4 var(--titulo);padding:22px 0;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{
  width:30px;height:30px;flex:none;border-radius:50%;background:var(--raso);position:relative;margin-top:2px;
  transition:transform .3s var(--ease),background .3s;
}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2.4px;background:var(--abissal);transform:translate(-50%,-50%)}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary i{transform:rotate(45deg);background:var(--amarelo)}
.faq .resposta{padding:0 0 26px;max-width:74ch}
.faq .resposta p{margin:0 0 .85em;color:var(--muted)}
.faq .caminho{
  display:inline-flex;align-items:center;gap:9px;margin-top:4px;padding:11px 16px;border-radius:999px;
  background:var(--abissal);color:#fff;text-decoration:none;font:600 14px/1 var(--titulo);
  transition:transform .25s var(--ease),background .25s;
}
.faq .caminho:hover{transform:translateX(3px);background:var(--atlantico)}
.faq .caminho::before{content:"";width:13px;height:13px;flex:none;background:conic-gradient(from 0deg at 0 100%,var(--amarelo) 0 25%,transparent 0);border-radius:0 13px 0 0}

/* campos de formulário */
.campo{display:flex;flex-direction:column;gap:7px}
.campo label{font:600 14px/1.3 var(--titulo)}
.campo .dica{font:400 13px/1.45 var(--texto);color:var(--muted)}
.campo input,.campo select,.campo textarea{
  font:400 16px/1.4 var(--texto);padding:14px 15px;border-radius:12px;border:2px solid var(--linha-forte);
  background:#fff;color:var(--abissal);width:100%;transition:border-color .2s,box-shadow .2s;
}
.campo textarea{min-height:110px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--atlantico);box-shadow:0 0 0 4px rgba(30,120,255,.18);
}
.campo input[aria-invalid="true"],.campo select[aria-invalid="true"]{border-color:#C2340A;box-shadow:0 0 0 4px rgba(194,52,10,.12)}
.campo .erro{font:500 13px/1.4 var(--texto);color:#A32B08}
.campo-linha{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:620px){.campo-linha{grid-template-columns:1fr}}

/* grupo de opções em cartão */
.opcoes{display:grid;gap:10px}
.opcoes.duas{grid-template-columns:1fr 1fr}
.opcoes.tres{grid-template-columns:repeat(3,1fr)}
@media (max-width:620px){.opcoes.duas,.opcoes.tres{grid-template-columns:1fr}}
.opcoes label{
  display:flex;align-items:center;gap:11px;padding:14px 16px;border-radius:12px;border:2px solid var(--linha);
  cursor:pointer;font:500 15px/1.35 var(--texto);background:#fff;transition:border-color .2s,background .2s;
  position:relative;
}
.opcoes label:hover{border-color:var(--turquesa)}
.opcoes input{position:absolute;opacity:0;width:1px;height:1px}
.opcoes label .marca-op{
  width:20px;height:20px;flex:none;border-radius:50%;border:2px solid var(--linha-forte);position:relative;transition:border-color .2s;
}
.opcoes input:checked+.marca-op{border-color:var(--atlantico)}
.opcoes input:checked+.marca-op::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--atlantico)}
.opcoes label:has(input:checked){border-color:var(--atlantico);background:var(--azul-raso)}
.opcoes input:focus-visible+.marca-op{outline:3px solid var(--laranja);outline-offset:3px}

/* animações */
@keyframes pulsar{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.08)}}
@keyframes farol{0%{box-shadow:0 0 0 0 rgba(0,194,178,.65)}70%{box-shadow:0 0 0 11px rgba(0,194,178,0)}100%{box-shadow:0 0 0 0 rgba(0,194,178,0)}}
@keyframes sobe-sol{0%,100%{transform:translateY(5%)}50%{transform:translateY(-5%)}}
@keyframes onda{0%,100%{transform:translateX(0)}50%{transform:translateX(-6%)}}
@keyframes entra{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes viajando{0%{offset-distance:0%}100%{offset-distance:100%}}
@keyframes brilha{0%,100%{opacity:.55}50%{opacity:1}}

.a-sol{animation:sobe-sol 5s var(--ease) infinite}
.a-onda{animation:onda 3.4s ease-in-out infinite}
.a-gira{animation:gira 24s linear infinite;transform-origin:0 100%}
.a-brilha{animation:brilha 3s ease-in-out infinite}

/* revelação discreta ao rolar.
   A classe js é adicionada pelo próprio documento. Sem JavaScript,
   nada fica escondido: a página inteira continua legível.           */
html.js .revela{opacity:0;transform:translateY(22px)}
html.js .revela[data-visivel="1"]{animation:entra .64s var(--ease) both}
.revela[data-atraso="1"]{animation-delay:.07s}
.revela[data-atraso="2"]{animation-delay:.14s}
.revela[data-atraso="3"]{animation-delay:.21s}
.revela[data-atraso="4"]{animation-delay:.28s}
.revela[data-atraso="5"]{animation-delay:.35s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .revela{opacity:1;transform:none}
}

/* topo da 404, sobre a foto escura */
.topo-marca{position:relative;z-index:20}
.topo-marca .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:92px}
.topo-marca img{height:52px;width:auto;display:block}
.topo-marca .volta{
  font:600 14px/1 var(--titulo);color:#fff;text-decoration:none;padding:11px 18px;
  border-radius:999px;border:1px solid rgba(255,255,255,.4);transition:background .2s;
}
.topo-marca .volta:hover{background:rgba(255,255,255,.18)}
@media (max-width:620px){.topo-marca .wrap{min-height:74px}.topo-marca img{height:40px}}