/* ============================================================
   VIP FGTS — Qualificação (antecipação do FGTS)
   Stack: HTML + CSS + JS puro. Mobile-first.
   Identidade: Styleguide VIP 2025 — carvão #242424, off-white
   #ECECEC/#E2E2E2, amarelos #FFB703/#FBC92F, fonte única Sora.
   ============================================================ */

/* ---------- Fontes ---------- */
@font-face { font-family:"Sora"; font-weight:400; font-display:swap; src:url("../assets/fonts/Sora-Regular.ttf") format("truetype"); }
@font-face { font-family:"Sora"; font-weight:500; font-display:swap; src:url("../assets/fonts/Sora-Medium.ttf") format("truetype"); }
@font-face { font-family:"Sora"; font-weight:600; font-display:swap; src:url("../assets/fonts/Sora-SemiBold.ttf") format("truetype"); }
@font-face { font-family:"Sora"; font-weight:700; font-display:swap; src:url("../assets/fonts/Sora-Bold.ttf") format("truetype"); }

/* ---------- Tokens (Styleguide VIP 2025) ---------- */
:root {
  --carvao:#242424;
  --carvao-2:#2E2E2E;      /* superfície sobre o carvão */
  --carvao-3:#1C1C1C;      /* rodapé */
  --off:#ECECEC;
  --off-2:#E2E2E2;
  --claro:#F6F6F6;         /* superfície sobre o off-white */
  --amarelo:#FFB703;
  --amarelo-2:#FBC92F;
  --amarelo-grad:linear-gradient(90deg, #FFB703, #FBC92F 52%, #FFB703);

  --tx-escuro:#242424;
  --tx-escuro-2:#5C5C5C;
  --tx-claro:#ECECEC;
  --tx-claro-2:#A9A9A9;
  --linha-clara:rgba(236,236,236,.12);
  --linha-escura:rgba(36,36,36,.14);

  --raio:20px;
  --raio-md:14px;
  --raio-sm:12px;
  --raio-folha:22px 6px;   /* selos: cantos assimétricos */
  --maxw:1180px;

  /* inclinação do traço do V (≈ 22.8° da vertical) */
  --inclinacao:22.8deg;
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--carvao); }
body {
  font-family:"Sora",system-ui,sans-serif;
  color:var(--tx-claro);
  background:var(--carvao);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul,ol { list-style:none; }
:focus-visible { outline:3px solid var(--amarelo); outline-offset:3px; border-radius:6px; }
[tabindex="-1"]:focus { outline:none; }

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

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
}

/* ============================================================
   Elementos da marca
   ============================================================ */
/* Rótulo com as barras diagonais "\\" (derivadas do traço do V) */
.rotulo { display:inline-flex; align-items:center; gap:12px; font-size:13px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--amarelo); }
.barras { display:inline-flex; gap:5px; }
.barras i { width:4px; height:16px; border-radius:2px; transform:skewX(var(--inclinacao)); background:var(--amarelo); }
.barras i + i { background:var(--off); }

/* Selo com cantos assimétricos */
.selo { display:inline-flex; align-items:center; gap:6px; background:var(--amarelo-grad); color:var(--carvao);
  font-size:12px; font-weight:600; letter-spacing:.02em; padding:6px 14px; border-radius:var(--raio-folha); }

/* ============================================================
   Botões
   ============================================================ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:600; font-size:16px; line-height:1.1; letter-spacing:-.01em; border-radius:var(--raio-sm);
  padding:16px 24px; text-align:center;
  transition:transform .15s ease, box-shadow .2s ease, filter .15s ease, background .15s ease; }
.btn svg { width:20px; height:20px; flex:none; }
.btn:active { transform:scale(.985); }
.btn--amarelo { background:var(--amarelo-grad); color:var(--carvao); }
.btn--amarelo:hover { filter:brightness(1.04); box-shadow:0 10px 28px rgba(255,183,3,.32); transform:translateY(-1px); }
.btn--carvao { background:var(--carvao); color:var(--off); }
.btn--carvao:hover { background:#111; transform:translateY(-1px); }
.btn--carvao svg { color:var(--amarelo); }
.btn--sm { padding:11px 16px; font-size:14px; border-radius:10px; }
.btn--lg { padding:19px 28px; font-size:17px; }
.btn--bloco { width:100%; }

/* ============================================================
   Topo
   ============================================================ */
.topo { position:sticky; top:0; z-index:50; background:rgba(36,36,36,.88);
  backdrop-filter:saturate(160%) blur(10px); -webkit-backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--linha-clara); }
.topo__inner { display:flex; align-items:center; justify-content:space-between; gap:16px; height:68px; }
.topo__logo img { height:26px; width:auto; }

/* ============================================================
   Hero
   ============================================================ */
.hero { position:relative; overflow:hidden; background:var(--carvao); padding-top:40px; }
.hero__linhas { display:none; }
.hero__grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr); }
.hero__texto { padding-bottom:8px; }
.hero h1 { font-size:clamp(36px,9vw,62px); line-height:1.02; font-weight:700; letter-spacing:-.045em;
  color:var(--off); margin-top:18px; max-width:15ch; }
.hero h1 .hl { color:var(--amarelo); }
.hero__sub { font-size:clamp(16px,4.2vw,18px); color:var(--tx-claro-2); margin:18px 0 28px; max-width:520px; }

/* Figura: embaixador dentro do V */
.hero__figura { position:relative; width:100%; max-width:400px; margin:36px auto 0; aspect-ratio:656/694; }
.hero__v { position:absolute; left:-4%; top:3%; width:108%; height:auto; }
.hero__v-traco { fill:var(--off); opacity:.08; }
.hero__v-aba { fill:var(--amarelo); }
.hero__figura img { position:relative; z-index:1; width:100%; height:auto; }
.badge { position:absolute; z-index:2; display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px; border-radius:var(--raio-folha); font-size:13px; font-weight:600; color:var(--carvao);
  box-shadow:0 12px 30px rgba(0,0,0,.35); white-space:nowrap; }
.badge svg { width:15px; height:15px; }
.badge--off { background:var(--off); left:-2%; top:52%; }
.badge--amarelo { background:var(--amarelo-grad); right:-2%; top:74%; }

/* ============================================================
   Cartão de qualificação
   ============================================================ */
.cartao { position:relative; background:var(--off); color:var(--tx-escuro); border-radius:var(--raio);
  padding:26px 20px; box-shadow:0 24px 60px rgba(0,0,0,.35); scroll-margin-top:88px; max-width:560px; }
.cartao__rotulo { font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--tx-escuro-2); }
.cartao__titulo { font-size:clamp(22px,5.6vw,27px); font-weight:700; letter-spacing:-.035em; line-height:1.15; margin-top:8px; }
.cartao__dica { color:var(--tx-escuro-2); font-size:14.5px; margin-top:8px; }

/* Telas */
.screen { display:none; flex-direction:column; animation:entrar .35s ease; }
.screen.active { display:flex; }
@keyframes entrar { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* Opções */
.opcoes { display:grid; gap:10px; margin-top:22px; }
.opcao { display:flex; align-items:center; gap:14px; width:100%; padding:14px 16px;
  background:var(--claro); border:1.5px solid transparent; border-radius:var(--raio-md);
  font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--tx-escuro); text-align:left;
  transition:border-color .15s, background .15s, transform .12s, box-shadow .2s; }
.opcao__txt { flex:1; }
.opcao__ico { width:42px; height:42px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; }
.opcao__ico svg { width:20px; height:20px; }
.opcao__ico--sim { background:var(--amarelo); color:var(--carvao); }
.opcao__ico--nao { background:var(--carvao); color:var(--off); }
.opcao__ico--talvez { background:var(--off-2); color:var(--carvao); }
.opcao__seta { width:20px; height:20px; flex:none; color:var(--tx-escuro-2); transition:transform .15s, color .15s; }
.opcao:hover { border-color:var(--amarelo); background:#fff; box-shadow:0 8px 22px rgba(36,36,36,.08); }
.opcao:hover .opcao__seta { color:var(--carvao); transform:translate(2px,-2px); }
.opcao:active { transform:scale(.99); }

/* Resultados */
.resultado { align-items:center; text-align:center; }
.resultado .cartao__titulo { max-width:440px; }
.resultado__ico { width:62px; height:62px; border-radius:50%; margin-bottom:14px;
  display:flex; align-items:center; justify-content:center; }
.resultado__ico svg { width:30px; height:30px; }
.resultado__ico--sim { background:var(--amarelo); color:var(--carvao); }
.resultado__ico--nao { background:var(--carvao); color:var(--off); }
.resultado__ico--talvez { background:var(--off-2); color:var(--carvao); }
.resultado > .selo { margin-bottom:4px; }
.resultado__txt { color:var(--tx-escuro-2); font-size:15.5px; margin:12px auto 24px; max-width:420px; }
.voltar { margin-top:14px; padding:8px 12px; border-radius:8px; font-size:14px; font-weight:500; color:var(--tx-escuro-2); }
.voltar:hover { color:var(--carvao); background:var(--off-2); }

/* Cross-sell CLT */
.clt { width:100%; text-align:left; background:var(--carvao); color:var(--off); border-radius:var(--raio-md);
  padding:22px 20px; position:relative; overflow:hidden; }
.clt::after { content:""; position:absolute; right:-18px; bottom:-26px; width:90px; height:110px;
  background:var(--amarelo); opacity:.14; clip-path:polygon(38% 0,100% 0,62% 100%,0 100%); }
.clt h3 { font-size:20px; font-weight:700; letter-spacing:-.03em; margin-top:12px; }
.clt p { color:var(--tx-claro-2); font-size:14px; margin:6px 0 18px; position:relative; z-index:1; }
.clt .btn { position:relative; z-index:1; }

/* Antifraude */
.antifraude { display:flex; gap:8px; align-items:flex-start; margin-top:18px; max-width:560px;
  font-size:12.5px; color:var(--tx-claro-2); line-height:1.5; }
.antifraude svg { width:15px; height:15px; flex:none; margin-top:2px; color:var(--amarelo); }

/* ============================================================
   Marca / números (fundo off-white)
   ============================================================ */
.marca { position:relative; overflow:hidden; background:var(--off-2); color:var(--tx-escuro); padding:72px 0; }
.marca__v { position:absolute; right:-30%; top:50%; width:110%; max-width:none; transform:translateY(-50%); fill:#EFEFEF; }
.marca .container { position:relative; z-index:1; }
.marca__grid { display:grid; gap:22px; }
.marca__titulo { font-size:clamp(40px,11vw,92px); font-weight:700; letter-spacing:-.055em; line-height:.95; max-width:10ch; }
.marca__txt { font-size:16px; font-weight:500; color:var(--tx-escuro-2); max-width:430px; }
.numeros { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 20px; margin-top:52px;
  padding-top:28px; border-top:1px solid var(--linha-escura); }
.numeros li::before { content:""; display:block; width:16px; height:20px; margin-bottom:14px;
  background:var(--amarelo); clip-path:polygon(38% 0,100% 0,62% 100%,0 100%); }
.numeros strong { display:block; font-size:clamp(26px,6.4vw,40px); font-weight:700; letter-spacing:-.04em; line-height:1; }
.numeros span { display:block; font-size:14px; color:var(--tx-escuro-2); margin-top:8px; }

/* ============================================================
   Como funciona (fundo carvão)
   ============================================================ */
.passos { background:var(--carvao); padding:72px 0; }
.titulo-secao { font-size:clamp(30px,7vw,52px); font-weight:700; letter-spacing:-.045em; line-height:1.02;
  color:var(--off); margin-top:16px; max-width:14ch; }
.passos__lista { display:grid; gap:28px; margin-top:44px; counter-reset:passo; }
.passos__lista li { border-top:1px solid var(--linha-clara); padding-top:22px; }
.passos__num { display:block; font-size:clamp(38px,8vw,52px); font-weight:700; letter-spacing:-.05em; line-height:1; color:var(--amarelo); }
.passos__lista h3 { font-size:19px; font-weight:600; letter-spacing:-.02em; margin-top:16px; color:var(--off); }
.passos__lista p { color:var(--tx-claro-2); font-size:15px; margin-top:6px; max-width:320px; }

/* ============================================================
   Sonho — CTA (fundo amarelo com as letras VIP gigantes)
   ============================================================ */
.sonho { position:relative; overflow:hidden; background:var(--amarelo); color:var(--carvao); padding:84px 0 200px; }
/* "VIP" gigante em off-white, cortado na borda direita (capa do guia) */
.sonho__letras { position:absolute; left:18%; bottom:-6%; height:190px; width:auto;
  aspect-ratio:348.46/131.31; max-width:none; color:var(--off); }
.sonho__inner { position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; gap:28px; }
.sonho h2 { font-size:clamp(38px,10vw,76px); font-weight:700; letter-spacing:-.055em; line-height:.96; max-width:8ch; }

/* ============================================================
   Rodapé
   ============================================================ */
.rodape { background:var(--carvao-3); color:var(--tx-claro-2); padding:56px 0 32px; font-size:14px; }
.rodape__logo { height:26px; width:auto; margin-bottom:18px; }
.rodape__grid { display:grid; gap:32px; }
.rodape__sobre p { max-width:380px; }
.rodape__hashtag { margin-top:16px; font-size:18px; font-weight:700; letter-spacing:-.03em; color:var(--off); }
.rodape__titulo { color:var(--off); font-size:14px; font-weight:600; margin-bottom:14px; }
.rodape__links { display:grid; gap:10px; }
.rodape a:hover { color:var(--off); }
.rodape__social { display:flex; gap:14px; margin-top:14px; }
.rodape__social img { height:20px; width:auto; opacity:.75; transition:opacity .15s; }
.rodape__social a:hover img { opacity:1; }
.rodape__legal { border-top:1px solid var(--linha-clara); margin-top:36px; padding-top:22px;
  font-size:12px; color:#858585; line-height:1.65; display:grid; gap:12px; }

/* ============================================================
   Breakpoints
   ============================================================ */
@media (min-width:600px) {
  .cartao { padding:34px 32px; }
  .opcao { padding:16px 18px; }
  .clt { padding:24px; }
}
@media (min-width:768px) {
  .numeros { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .passos__lista { grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
  .rodape__grid { grid-template-columns:2fr 1fr 1fr; }
  .marca, .passos { padding:104px 0; }
  .sonho { padding:128px 0; }
  .sonho__letras { left:44%; top:50%; bottom:auto; transform:translateY(-50%); height:78%; }
}
@media (min-width:960px) {
  .hero { padding-top:64px; }
  .hero__grid { grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:48px; align-items:end; }
  .hero__texto { padding-bottom:64px; }
  .hero__figura { max-width:520px; margin:0 0 0 auto; align-self:end; }
  .badge { font-size:14px; padding:10px 18px; }
  .badge--off { left:-8%; }
  /* linhas finas amarelas no fundo, na inclinação do V */
  .hero__linhas { display:block; position:absolute; inset:0; pointer-events:none; }
  .hero__linhas span { position:absolute; top:-20%; height:140%; width:1.5px; background:var(--amarelo);
    opacity:.3; transform:rotate(calc(var(--inclinacao) * -1)); }
  .hero__linhas span:nth-child(1) { left:68%; }
  .hero__linhas span:nth-child(2) { left:79%; }
  .marca__grid { grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); align-items:end; gap:48px; }
  .marca__v { right:-12%; width:62%; }
}