/* ==========================================================================
   PreviGuia — estilos
   Paleta e tipografia da marca. Mobile-first.
   ========================================================================== */

:root{
  --navy:#1E3A5C;
  --azul-profundo:#0B2740;
  --aco:#557799;          /* apoio: ícones, bordas (decorativo) */
  --aco-texto:#4E6E8E;    /* variante do azul-aço p/ texto sobre fundo claro (AA) */
  --aco-claro:#7B9CBB;    /* variante do azul-aço p/ texto sobre fundo escuro (AA) */
  --realce:#A9C3D9;
  --areia:#F7F3EB;
  --verde:#1F7A4E;        /* exclusivo: WhatsApp e selos de garantia */
  --verde-hover:#196340;
  --amarelo:#F7C948;      /* destaques pontuais */
  --amarelo-hover:#F0BC29;
  --grafite:#232830;
  --cinza:#5A6270;        /* texto de apoio sobre fundo claro (AA) */
  --branco:#FFFFFF;

  --serif:'Lora', Georgia, 'Times New Roman', serif;
  --sans:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --max:1180px;
  --radius:14px;
  --shadow:0 10px 30px rgba(30,58,92,.10);
  --shadow-hover:0 18px 44px rgba(30,58,92,.18);
  --nav-h:76px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px);-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);font-weight:400;font-size:1rem;line-height:1.7;
  color:var(--grafite);background:var(--branco);overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit}

/* ---------- acessibilidade ---------- */
:focus-visible{outline:3px solid var(--amarelo);outline-offset:3px;border-radius:4px}
.sec--branco :focus-visible,.sec--areia :focus-visible{outline-color:var(--navy)}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--amarelo);color:var(--navy);
  padding:.75rem 1.25rem;font-weight:600;border-radius:0 0 8px 0;
}
.skip-link:focus{left:0}

/* ---------- tipografia ---------- */
h1,h2{font-family:var(--serif);font-weight:700;line-height:1.16;letter-spacing:-.015em}
h1{font-size:clamp(2.4rem,7vw,4.4rem)}
h2{font-size:clamp(1.65rem,4vw,2.6rem);color:var(--navy);margin-bottom:1.1rem}
h3{font-family:var(--sans);font-weight:600;font-size:1.14rem;line-height:1.4}
p{margin-bottom:1rem}
p:last-child{margin-bottom:0}
strong{font-weight:600;color:var(--navy)}
em{font-style:italic}

.container{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:1.25rem}
.container--estreito{max-width:780px}

/* ---------- estrela de 4 pontas (elemento recorrente) ---------- */
.star{
  display:inline-block;width:14px;height:14px;flex:none;
  background:var(--amarelo);
  clip-path:polygon(50% 0%,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0% 50%,40% 40%);
}
.star--dark{background:var(--aco)}
.star--big{width:32px;height:32px;margin:0 auto 1.5rem}
.star--btn{width:15px;height:15px;background:var(--navy)}

/* ---------- eyebrow ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-weight:500;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--realce);margin-bottom:1rem;
}
.eyebrow--dark{color:var(--aco-texto)}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-weight:500;font-size:.95rem;line-height:1;
  padding:.95rem 1.5rem;border-radius:999px;text-align:center;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,color .18s ease,border-color .18s ease;
}
.btn--lg{padding:1.1rem 1.9rem;font-size:1rem}
.btn--xl{padding:1.25rem 2.4rem;font-size:1.08rem}

.btn--whats{background:var(--verde);color:#fff;box-shadow:0 6px 18px rgba(31,122,78,.32)}
.btn--whats:hover{background:var(--verde-hover);transform:translateY(-2px);box-shadow:0 12px 26px rgba(31,122,78,.42)}

/* ação principal do hero: âmbar sólido, texto navy */
.btn--amarelo{background:var(--amarelo);color:var(--navy);font-weight:600;box-shadow:0 6px 18px rgba(247,201,72,.26)}
.btn--amarelo:hover{background:var(--amarelo-hover);transform:translateY(-2px);box-shadow:0 12px 26px rgba(247,201,72,.36)}

/* ação secundária sobre fundo escuro */
.btn--linha{border:1.5px solid rgba(169,195,217,.5);color:var(--areia)}
.btn--linha:hover{border-color:var(--realce);background:rgba(169,195,217,.1)}

.btn--texto{color:var(--aco-texto);text-decoration:underline;text-underline-offset:3px;padding:.6rem .5rem}
.btn--texto:hover{color:var(--navy)}

.ico-wpp{width:20px;height:20px;fill:currentColor;flex:none}
.btn--xl .ico-wpp{width:24px;height:24px}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(30,58,92,.10);
  transition:background-color .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.navbar.is-scrolled{box-shadow:0 6px 24px rgba(30,58,92,.10)}
.navbar.is-top{background:transparent;border-color:transparent;backdrop-filter:none}

.navbar__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.navbar__logo{display:flex;align-items:center;flex:none}
.navbar__logo img{height:38px;width:auto}
.logo-escuro{display:none}
.navbar.is-top .logo-claro{display:none}
.navbar.is-top .logo-escuro{display:block}

.navbar__toggle{
  width:44px;height:44px;display:flex;flex-direction:column;
  justify-content:center;align-items:center;gap:5px;flex:none;border-radius:8px;
}
.navbar__toggle span{
  display:block;width:24px;height:2.5px;border-radius:2px;background:var(--navy);
  transition:transform .3s ease,opacity .2s ease,background-color .3s ease;
}
.navbar.is-top .navbar__toggle span{background:var(--areia)}
.navbar__toggle[aria-expanded="true"] span{background:var(--navy)}
.navbar__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.navbar__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navbar__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.navbar__menu{
  position:fixed;top:var(--nav-h);right:0;
  width:min(320px,86vw);height:calc(100dvh - var(--nav-h));
  background:var(--branco);padding:2rem 1.5rem;
  display:flex;flex-direction:column;gap:.5rem;
  transform:translateX(105%);transition:transform .32s cubic-bezier(.4,0,.2,1);
  box-shadow:-8px 0 40px rgba(11,39,64,.18);overflow-y:auto;
}
.navbar__menu.is-open{transform:translateX(0)}
.navbar__menu ul{display:flex;flex-direction:column;gap:.25rem;margin-bottom:1.5rem}
.navbar__menu a:not(.btn){
  display:block;padding:.85rem .5rem;font-weight:500;color:var(--navy);
  border-bottom:1px solid rgba(30,58,92,.08);
  transition:color .2s ease,padding-left .2s ease;
}
.navbar__menu a:not(.btn):hover{color:var(--aco-texto);padding-left:.9rem}
.navbar__cta{width:100%}

.nav-backdrop{
  position:fixed;inset:var(--nav-h) 0 0 0;z-index:99;
  background:rgba(11,39,64,.5);opacity:0;transition:opacity .3s ease;
}
.nav-backdrop.is-visible{opacity:1}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  background:linear-gradient(160deg,#24446B 0%,var(--navy) 42%,var(--azul-profundo) 100%);
  color:var(--areia);
  padding:calc(var(--nav-h) + 3.5rem) 0 3.5rem;
  overflow:hidden;
}
.hero__glow{
  position:absolute;top:-25%;right:-15%;width:min(680px,105vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(169,195,217,.20) 0%,transparent 68%);
  pointer-events:none;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 28%,rgba(247,201,72,.5),transparent),
    radial-gradient(1.5px 1.5px at 78% 18%,rgba(169,195,217,.45),transparent),
    radial-gradient(1.5px 1.5px at 62% 72%,rgba(247,201,72,.3),transparent),
    radial-gradient(1.5px 1.5px at 32% 82%,rgba(169,195,217,.35),transparent);
}
/* ---------- vídeo de fundo ----------
   Camadas do hero, de trás para a frente:
     0  .hero__video   — o vídeo (ou o poster, quando ele não toca)
     1  .hero__mascara — o navy translúcido que devolve legibilidade
     2  .hero::after   — as estrelinhas
     3  .hero__glow / .hero__bussola / .hero__inner — bússola e conteúdo      */
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
  /* o poster é uma foto clara: sem isto, o texto areia nasceria ilegível
     no meio segundo entre o poster aparecer e a máscara pintar por cima */
  background:var(--navy);
}
/* Máscara NAVY, não preta: preto a 60% apagaria a cor da marca justo na
   primeira tela. O gradiente é mais dedo-duro do lado do texto (onde o
   contraste precisa fechar em AA) e mais leve do lado direito, deixando o
   vídeo respirar. */
.hero__mascara{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(11,39,64,.92) 0%, rgba(11,39,64,.86) 42%, rgba(30,58,92,.62) 100%),
    linear-gradient(180deg, rgba(11,39,64,.55) 0%, rgba(11,39,64,.18) 45%, rgba(11,39,64,.72) 100%);
}
.hero::after{z-index:2}

/* bússola decorativa: fica atrás da foto, só espiando */
.hero__bussola{display:none}
.hero__glow{z-index:3}
.hero__inner{position:relative;z-index:3}
.hero__grid{display:grid;gap:2.5rem}

/* ---------- fotos: moldura comum ---------- */
.hero__foto,.pc__foto,.quem__foto,.cta__foto{margin:0;position:relative}
.hero__foto img,.pc__foto img,.quem__foto img,.cta__foto img{
  width:100%;height:auto;border-radius:18px;
  object-fit:cover;
}
.hero__foto img{
  box-shadow:0 30px 70px rgba(0,0,0,.42);
  border:1px solid rgba(169,195,217,.22);
}
/* estrela âmbar apoiada no canto da foto do hero */
.hero__foto-estrela{
  position:absolute;left:-14px;bottom:28px;width:44px;height:44px;
  background:var(--amarelo);
  clip-path:polygon(50% 0%,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0% 50%,40% 40%);
}

.hero__title{color:var(--areia);margin-bottom:1.5rem}
.hero__sub{font-size:1.05rem;color:var(--realce);max-width:52ch;margin-bottom:2.25rem}
.hero__sub strong{color:var(--areia)}

.hero__actions{display:flex;flex-direction:column;gap:.85rem;margin-bottom:1.75rem}
/* --realce, e não --aco-claro: no ponto mais claro do gradiente do hero
   o azul-aço só alcança 3.46:1, abaixo do mínimo AA para texto pequeno. */
.hero__meta{
  font-size:.85rem;color:var(--realce);letter-spacing:.02em;
  padding-top:1.5rem;border-top:1px solid rgba(169,195,217,.18);
}

/* ==========================================================================
   SEÇÕES
   ========================================================================== */
.sec{padding:4rem 0}
.sec--areia{background:var(--areia)}
.sec--branco{background:var(--branco)}
.sec--navy{background:var(--navy);color:var(--realce)}
.sec--navy h2{color:var(--areia)}
.sec--navy strong{color:var(--areia)}

.sec__head{margin-bottom:2.5rem;max-width:62ch}
.sec__head--centro{margin-inline:auto;text-align:center}
.sec__lead{font-size:1.02rem;color:var(--realce)}
.sec__lead--dark{color:var(--cinza)}
.sec__lead--dark strong{color:var(--navy)}

/* ==========================================================================
   O PONTO CEGO — bloco editorial, sem cards
   ========================================================================== */
.ponto-cego{
  background:var(--branco);
  padding:4.5rem 0;
  position:relative;
}
.pc__grid{display:grid;gap:2.5rem}
.pc__foto img{box-shadow:0 24px 60px rgba(30,58,92,.28)}
.pc__titulo{
  font-size:clamp(1.9rem,4.6vw,3.1rem);
  color:var(--navy);margin-bottom:1.75rem;
  max-width:20ch;
}
.pc__corpo{
  font-size:1.05rem;color:#3D4450;
  border-left:2px solid var(--amarelo);
  padding-left:1.5rem;
  max-width:60ch;
}
.pc__corpo em{color:var(--aco-texto)}
.pc__ressalva{
  display:flex;gap:.75rem;align-items:flex-start;
  margin-top:2.25rem;padding:1.25rem 1.4rem;
  background:var(--areia);border-radius:var(--radius);
  font-size:.92rem;color:var(--cinza);max-width:62ch;
}
.pc__ressalva .star{margin-top:.45rem}

/* ==========================================================================
   ORIENTADOR
   ========================================================================== */
.orientador{max-width:760px;margin-inline:auto}

/* --- estado sem JS: a lista crua, que continua informativa --- */
.regioes{display:grid;gap:1rem}
.regiao{
  background:var(--branco);border-radius:var(--radius);
  padding:1.5rem;border:1px solid rgba(30,58,92,.08);
  border-top:3px solid var(--amarelo);
}
.regiao h3{color:var(--navy);margin-bottom:.75rem}
.regiao ul{display:flex;flex-direction:column;gap:.5rem}
.regiao li{position:relative;padding-left:1.4rem;font-size:.9rem;color:var(--cinza)}
.regiao li::before{
  content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;background:var(--aco);
  clip-path:polygon(50% 0%,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0% 50%,40% 40%);
}
.orientador__fallback{
  margin-top:1.5rem;text-align:center;font-size:.9rem;color:var(--cinza);
}
.orientador__fallback a{color:var(--aco-texto);text-decoration:underline;text-underline-offset:3px;font-weight:500}
.orientador__fallback a:hover{color:var(--navy)}

/* --- com JS: o passo a passo --- */
.orientador--js .regioes{display:none}

.ori{
  background:var(--branco);border-radius:20px;
  border:1px solid rgba(30,58,92,.09);
  box-shadow:var(--shadow);
  padding:1.5rem 1.25rem 1.75rem;
}
.ori__topo{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.85rem}
.ori__vazio{display:block}
.ori__voltar{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.85rem;font-weight:500;color:var(--aco-texto);
  padding:.35rem .5rem;margin-left:-.5rem;border-radius:8px;
  transition:color .2s ease;
}
.ori__voltar:hover{color:var(--navy)}
.ori__voltar svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ori__passo{font-size:.78rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--aco-texto)}

.ori__barra{height:4px;background:rgba(30,58,92,.09);border-radius:99px;overflow:hidden;margin-bottom:1.5rem}
.ori__barra i{display:block;height:100%;background:var(--amarelo);border-radius:99px;transition:width .35s cubic-bezier(.4,0,.2,1)}

.ori__titulo{
  font-family:var(--serif);font-weight:700;font-size:clamp(1.25rem,3vw,1.6rem);
  line-height:1.25;color:var(--navy);margin-bottom:.6rem;outline:none;
}
.ori__sub{font-size:.92rem;color:var(--cinza);margin-bottom:1.5rem;max-width:52ch}

.ori__contexto{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.85rem;font-weight:500;color:var(--navy);
  background:var(--areia);border-radius:99px;padding:.4rem .9rem .4rem .45rem;
  margin-bottom:1.25rem;
}

/* chips de escolha */
.ori__chips{display:grid;grid-template-columns:1fr;gap:.7rem}
/* no celular as regiões vão em duas colunas: empilhadas em uma, o passo 1
   viraria 1500px de rolagem — e o celular é de onde vem o tráfego */
.ori__chips:not(.ori__chips--3){grid-template-columns:repeat(2,1fr)}
.chip{
  display:flex;align-items:center;gap:.85rem;text-align:left;
  padding:.9rem 1rem;border-radius:12px;
  border:1.5px solid rgba(30,58,92,.12);background:var(--branco);
  font-weight:500;font-size:.95rem;color:var(--navy);
  transition:border-color .2s ease,background-color .2s ease,transform .15s ease;
}
.chip:hover{border-color:var(--navy);background:var(--areia);transform:translateY(-2px)}
.chip--simples{justify-content:center;padding:1rem}

/* Os chips de região ficam na vertical: em pé, o boneco cabe grande e o rótulo
   ganha a largura toda, sem quebrar em duas linhas. Deitado não dava as duas
   coisas ao mesmo tempo. */
.ori__chips:not(.ori__chips--3) .chip{
  flex-direction:column;text-align:center;gap:.7rem;padding:1.15rem .7rem 1rem;
}
/* foto real (duotone navy) de cada região, preenchendo a caixa do chip */
.chip__ico{
  width:100%;max-width:112px;aspect-ratio:1;flex:none;border-radius:14px;
  overflow:hidden;background:var(--navy);
  display:flex;align-items:center;justify-content:center;
}
.chip__img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .3s ease}
.chip:hover .chip__img{transform:scale(1.05)}
.chip__nome{line-height:1.3}

/* a mesma foto, miúda e redonda, marcando a região escolhida no passo 2 */
.chip__ico--mini{width:32px;max-width:32px;height:32px;border-radius:99px}

/* opções (checkbox) */
.ori__opcoes{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.5rem}
.opcao{
  display:flex;align-items:flex-start;gap:.8rem;cursor:pointer;
  padding:.85rem 1rem;border-radius:12px;
  border:1.5px solid rgba(30,58,92,.12);
  transition:border-color .2s ease,background-color .2s ease;
}
.opcao:hover{border-color:var(--aco);background:var(--areia)}
.opcao input{position:absolute;opacity:0;width:0;height:0}
.opcao__marca{
  width:22px;height:22px;flex:none;margin-top:.1rem;border-radius:6px;
  border:1.5px solid var(--aco);position:relative;
  transition:background-color .15s ease,border-color .15s ease;
}
.opcao__marca::after{
  content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);
  transition:transform .15s ease;
}
.opcao input:checked ~ .opcao__marca{background:var(--verde);border-color:var(--verde)}
.opcao input:checked ~ .opcao__marca::after{transform:rotate(45deg) scale(1)}
.opcao input:focus-visible ~ .opcao__marca{outline:3px solid var(--navy);outline-offset:2px}
.opcao__txt{font-size:.93rem;color:var(--grafite);line-height:1.5}

.ori__acoes{display:flex;justify-content:flex-start}

/* resultado */
.ori__res-selo{
  display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:.35rem .75rem;border-radius:99px;margin-bottom:1rem;
}
.ori__res--indicio .ori__res-selo{background:rgba(31,122,78,.12);color:#155F3C}
.ori__res--atencao .ori__res-selo{background:rgba(247,201,72,.22);color:#7A5B00}
.ori__res--neutro .ori__res-selo{background:rgba(85,119,153,.15);color:#3F5E78}

.ori__res-titulo{
  font-family:var(--serif);font-weight:700;font-size:clamp(1.3rem,3.2vw,1.75rem);
  line-height:1.25;color:var(--navy);margin-bottom:1rem;outline:none;
}
.ori__res-corpo{font-size:.96rem;color:var(--cinza)}
.ori__aviso{
  background:var(--areia);border-left:2px solid var(--aco);
  padding:.9rem 1.1rem;border-radius:0 10px 10px 0;font-size:.9rem;
}
.ori__res-acoes{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;margin-top:1.75rem}
.ori__res-nota{
  margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid rgba(30,58,92,.09);
  font-size:.8rem;color:var(--cinza);
}

/* ==========================================================================
   BENEFÍCIOS (cards)
   ========================================================================== */
.cards{display:grid;gap:1.25rem}
.card{
  position:relative;background:var(--branco);border-radius:var(--radius);
  padding:1.75rem 1.5rem;border:1px solid rgba(30,58,92,.08);
  box-shadow:var(--shadow);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:var(--realce)}
.card--destaque{border-color:var(--amarelo);border-top-width:3px}
.card__tag{
  position:absolute;top:-11px;left:1.5rem;
  background:var(--amarelo);color:var(--navy);
  font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:.25rem .65rem;border-radius:99px;
}
.card__ico{
  width:52px;height:52px;border-radius:12px;background:var(--navy);color:var(--areia);
  display:flex;align-items:center;justify-content:center;margin-bottom:1.15rem;
}
/* ícones de traço: nunca preencher, senão viram manchas */
.card__ico svg{
  width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.card h3{color:var(--navy);margin-bottom:.55rem}
.card p{font-size:.93rem;color:var(--cinza)}

/* ==========================================================================
   LINHA DO TEMPO ("o que acontece depois")
   ========================================================================== */
.linha{position:relative;display:flex;flex-direction:column;gap:2rem}
.linha::before{
  content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,var(--amarelo),rgba(169,195,217,.25));
}
.linha__item{position:relative;display:flex;gap:1.5rem;padding-left:0}
.linha__marca{
  width:16px;height:16px;flex:none;margin-top:.4rem;z-index:1;
  background:var(--amarelo);
  clip-path:polygon(50% 0%,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0% 50%,40% 40%);
}
.linha__txt h3{color:var(--areia);margin-bottom:.5rem}
.linha__txt p{font-size:.95rem;color:var(--realce)}

/* ==========================================================================
   QUEM SOMOS
   ========================================================================== */
.quem__grid{display:grid;gap:2.5rem}
.quem__pontos{display:flex;flex-direction:column;gap:1.25rem;margin:2rem 0}
.quem__pontos li{position:relative;padding-left:1.75rem}
.quem__pontos li::before{
  content:"";position:absolute;left:0;top:.5em;width:12px;height:12px;background:var(--amarelo);
  clip-path:polygon(50% 0%,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0% 50%,40% 40%);
}
.quem__pontos h3{color:var(--navy);font-size:1rem;margin-bottom:.2rem}
.quem__pontos p{font-size:.92rem;color:var(--cinza)}
.quem__nota{
  font-size:.88rem;color:var(--cinza);
  border-left:3px solid var(--aco);padding:.25rem 0 .25rem 1rem;
}

.quem__lado{display:flex;flex-direction:column;gap:1.25rem}
.quem__foto img{box-shadow:var(--shadow)}
/* enquanto for banco de imagem, esta legenda não pode sair */
.quem__foto figcaption{
  position:absolute;right:10px;bottom:10px;
  background:rgba(11,39,64,.78);color:var(--areia);
  font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.25rem .6rem;border-radius:99px;backdrop-filter:blur(4px);
}

.numeros{display:grid;gap:1rem;align-content:start}
.numeros li{
  background:var(--branco);border-radius:var(--radius);
  padding:1.6rem 1.5rem;border:1px solid rgba(30,58,92,.08);box-shadow:var(--shadow);
  display:flex;align-items:center;gap:1.25rem;
}
.numeros__n{
  font-family:var(--serif);font-weight:700;font-size:2.4rem;line-height:1;
  color:var(--navy);flex:none;min-width:2.6ch;
}
.numeros__l{font-size:.92rem;color:var(--cinza);line-height:1.5}

/* ==========================================================================
   O QUE MUDOU NO INSS
   ========================================================================== */
.novidades{display:flex;flex-direction:column;gap:1rem}
.novidade{
  background:var(--areia);border-radius:var(--radius);
  border:1px solid rgba(30,58,92,.08);border-left:3px solid var(--amarelo);
  padding:1.4rem 1.5rem;
  transition:transform .2s ease,box-shadow .2s ease;
}
.novidade:hover{transform:translateX(3px);box-shadow:var(--shadow)}
.novidade__topo{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:.6rem}
.novidade__data{
  font-size:.78rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--aco-texto);
}
.novidade__tag{
  font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  background:rgba(247,201,72,.22);color:#7A5B00;
  padding:.2rem .6rem;border-radius:99px;
}
.novidade__titulo{color:var(--navy);margin-bottom:.5rem;font-size:1.08rem}
.novidade__resumo{font-size:.94rem;color:var(--cinza);margin-bottom:.9rem}
.novidade__fonte{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.86rem;font-weight:500;color:var(--aco-texto);
  transition:color .2s ease;
}
.novidade__fonte:hover{color:var(--navy)}
.novidade__fonte svg{width:15px;height:15px;flex:none}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{display:flex;flex-direction:column;gap:.75rem}
.faq__item{
  background:var(--areia);border-radius:12px;
  border:1px solid rgba(30,58,92,.08);overflow:hidden;transition:border-color .2s ease;
}
.faq__item:has(.faq__q[aria-expanded="true"]){border-color:var(--realce)}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.15rem 1.25rem;text-align:left;
  font-family:var(--sans);font-weight:500;font-size:1rem;color:var(--navy);
  transition:color .2s ease;
}
.faq__q:hover{color:var(--aco-texto)}
.faq__ico{position:relative;width:18px;height:18px;flex:none;transition:transform .3s ease}
.faq__ico::before,.faq__ico::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--aco);border-radius:2px;
  transform:translate(-50%,-50%);
}
.faq__ico::before{width:16px;height:2.5px}
.faq__ico::after{width:2.5px;height:16px;transition:opacity .3s ease,transform .3s ease}
.faq__q[aria-expanded="true"] .faq__ico{transform:rotate(180deg)}
.faq__q[aria-expanded="true"] .faq__ico::after{opacity:0}
.faq__a{padding:0 1.25rem 1.3rem}
.faq__a p{font-size:.93rem;color:var(--cinza)}

/* ==========================================================================
   CTA FINAL
   ========================================================================== */
.cta-final{
  background:var(--azul-profundo);color:var(--realce);
  padding:4.5rem 0;text-align:center;position:relative;overflow:hidden;
}
.cta-final::before{
  content:"";position:absolute;top:-40%;left:50%;transform:translateX(-50%);
  width:min(700px,120vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(31,122,78,.18) 0%,transparent 65%);
  pointer-events:none;
}
.cta-final .container{position:relative;z-index:1}
.cta__grid{display:grid;gap:2.5rem;align-items:center}
.cta__foto img{box-shadow:0 30px 70px rgba(0,0,0,.5);border:1px solid rgba(169,195,217,.18)}
.cta-final h2{color:var(--areia);margin-bottom:1rem}
.cta__txt p{max-width:54ch;margin-inline:auto;margin-bottom:2rem;font-size:1.02rem}
.cta-final__horario{margin-top:1.5rem;font-size:.86rem;color:var(--aco-claro)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{
  background:var(--azul-profundo);color:var(--realce);
  padding:3.5rem 0 2rem;border-top:1px solid rgba(169,195,217,.14);font-size:.92rem;
}
.footer__grid{display:grid;gap:2.5rem;margin-bottom:2.5rem}
/* lockup completo: a tagline já faz parte da imagem */
.footer__brand img{width:170px;height:auto;margin-bottom:1.25rem}
.footer__brand p{font-size:.9rem;line-height:1.65}
.footer__insta{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.1rem;
  font-weight:500;color:var(--realce);transition:color .2s ease;
}
.footer__insta:hover{color:var(--amarelo)}
.footer__insta svg{width:20px;height:20px;fill:currentColor}

.footer__col h3{
  color:var(--areia);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:1.1rem;font-weight:600;
}
.footer__col ul{display:flex;flex-direction:column;gap:.65rem}
.footer__col a{transition:color .2s ease,padding-left .2s ease}
.footer__col a:hover{color:var(--amarelo)}
.footer__col ul:not(.footer__contato) a:hover{padding-left:.35rem}
.footer__contato li{display:flex;align-items:center;gap:.6rem;line-height:1.5}
.footer__contato a{display:flex;align-items:center;gap:.6rem}
.footer__contato svg{width:18px;height:18px;fill:none;flex:none}
.footer__contato .ico-wpp{fill:currentColor}

.footer__legal{border-top:1px solid rgba(169,195,217,.14);padding-top:1.75rem}
.footer__razao{font-size:.84rem;color:var(--aco-claro);margin-bottom:.85rem;font-weight:500}
.footer__aviso{font-size:.78rem;line-height:1.65;color:var(--aco-claro);max-width:92ch;margin-bottom:1.25rem}
.footer__copy{font-size:.8rem;color:var(--aco-claro)}

/* ==========================================================================
   BOTÃO FLUTUANTE WHATSAPP
   ========================================================================== */
.wpp-float{
  position:fixed;right:1rem;bottom:1rem;z-index:90;
  display:flex;align-items:center;gap:.6rem;
  background:var(--verde);color:#fff;border-radius:999px;padding:.9rem;
  box-shadow:0 8px 26px rgba(31,122,78,.45);
  transition:transform .22s ease,box-shadow .22s ease,background-color .22s ease;
}
.wpp-float:hover{background:var(--verde-hover);transform:scale(1.06)}
.wpp-float svg{width:30px;height:30px;fill:currentColor;flex:none}
.wpp-float__txt{
  font-weight:500;font-size:.9rem;white-space:nowrap;
  max-width:0;overflow:hidden;opacity:0;
  transition:max-width .3s ease,opacity .25s ease,margin .3s ease;
}
.wpp-float:hover .wpp-float__txt,
.wpp-float:focus-visible .wpp-float__txt{max-width:160px;opacity:1;margin-right:.4rem}
.wpp-float::after{
  content:"";position:absolute;inset:0;border-radius:999px;border:2px solid var(--verde);
  animation:pulso 2.6s ease-out infinite;pointer-events:none;
}
@keyframes pulso{
  0%{transform:scale(1);opacity:.7}
  70%{transform:scale(1.35);opacity:0}
  100%{transform:scale(1.35);opacity:0}
}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
/* O estado oculto só se aplica quando o JS está ativo (classe .js no <html>).
   Sem JS, ou se o script falhar, o conteúdo permanece visível. */
.js .reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1);
}
.js .reveal.is-visible{opacity:1;transform:none}

@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 .reveal{opacity:1;transform:none}
  .wpp-float::after{display:none}
}

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */
@media (min-width:560px){
  .hero__actions{flex-direction:row;flex-wrap:wrap}
  .cards{grid-template-columns:repeat(2,1fr)}
  .regioes{grid-template-columns:repeat(2,1fr)}
  .ori__chips--3{grid-template-columns:repeat(3,1fr)}
  .ori{padding:2rem 1.75rem 2.25rem}
  .ori__res-acoes{flex-direction:row;align-items:center;gap:1rem}
}

@media (min-width:900px){
  :root{--nav-h:84px}
  .sec{padding:5.5rem 0}
  .ponto-cego{padding:6rem 0}
  .hero{padding:calc(var(--nav-h) + 5.5rem) 0 5rem}
  .hero__sub{font-size:1.15rem}
  .hero__meta{font-size:.88rem}

  /* A bússola vira textura sobre o vídeo, não desenho: com gente em cena ela
     cai em cima de rosto, e a 20% competia. A 11% só marca a marca. */
  .hero__bussola{
    display:block;position:absolute;z-index:3;
    top:62%;right:5%;transform:translateY(-50%);
    width:min(300px,22vw);height:auto;opacity:.11;pointer-events:none;
  }
  /* sem a foto ao lado, o texto fica numa coluna só, à esquerda */
  .hero__grid{grid-template-columns:minmax(0,660px);gap:3.5rem;align-items:center}
  .hero__foto img{max-height:560px}
  .pc__grid{grid-template-columns:.82fr 1.18fr;gap:3.5rem;align-items:center}
  .cta__grid{grid-template-columns:.62fr 1.38fr;gap:3.5rem;text-align:left}
  .cta-final{text-align:left}
  .cta__txt .star--big{margin-left:0}
  .cta__txt p{margin-inline:0}

  /* navbar desktop */
  .navbar__toggle{display:none}
  .navbar__menu{
    position:static;transform:none;height:auto;width:auto;
    flex-direction:row;align-items:center;gap:1.75rem;
    background:transparent;padding:0;box-shadow:none;overflow:visible;
  }
  .navbar__menu ul{flex-direction:row;gap:1.4rem;margin:0}
  .navbar__menu a:not(.btn){padding:.35rem 0;border-bottom:0;font-size:.9rem;position:relative}
  .navbar__menu a:not(.btn):hover{padding-left:0}
  .navbar__menu a:not(.btn)::after{
    content:"";position:absolute;left:0;bottom:0;width:0;height:2px;
    background:var(--amarelo);transition:width .25s ease;
  }
  .navbar__menu a:not(.btn):hover::after{width:100%}
  .navbar.is-top .navbar__menu a:not(.btn){color:var(--areia)}
  .navbar__cta{width:auto}
  .nav-backdrop{display:none}

  .cards{grid-template-columns:repeat(3,1fr)}
  .regioes{grid-template-columns:repeat(3,1fr)}
  /* precisa repetir o :not() daqui: a regra base usa ele e, sem isso, vence
     esta por especificidade e o desktop fica preso em 2 colunas */
  .ori__chips:not(.ori__chips--3){grid-template-columns:repeat(3,1fr)}
  .quem__grid{grid-template-columns:1.3fr .8fr;gap:4rem;align-items:start}
  .footer__grid{grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:3rem}
  .wpp-float{right:1.75rem;bottom:1.75rem;padding:1rem}
  .linha__item{gap:1.75rem}
}