/* =====================================================================
   GRUPO VAREON — landing
   Tokens do módulo 04 (UI/UX Design System) da skill brand-guardian.
   Nenhum hex solto fora do :root.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root{
  /* Marca */
  --v-navy:#0A1323; --v-steel:#2C3E5A; --v-gold:#D4AF37; --v-white:#FFFFFF;
  /* Superfícies (tema escuro, padrão do produto) */
  --v-bg:#0A1323; --v-surface:#101B2E; --v-surface-2:#16243B;
  --v-border:rgba(255,255,255,0.08); --v-border-str:rgba(255,255,255,0.16);
  /* Texto */
  --v-text:#FFFFFF; --v-text-2:rgba(255,255,255,0.72); --v-text-3:rgba(255,255,255,0.48);
  --v-text-on-gold:#0A1323;
  /* Acento */
  --v-accent:#D4AF37; --v-accent-soft:rgba(212,175,55,0.14); --v-accent-brd:rgba(212,175,55,0.32);
  /* Estado */
  --v-pos:#2E9E6B; --v-neg:#C4514B; --v-warn:#D98C2B; --v-info:#4A7FB5;
  /* Raio */
  --v-r-sm:6px; --v-r-md:10px; --v-r-lg:16px; --v-r-pill:999px;
  /* Elevação */
  --v-e1:0 1px 2px rgba(0,0,0,.24); --v-e2:0 4px 16px rgba(0,0,0,.28); --v-e3:0 12px 40px rgba(0,0,0,.36);
  /* Espaço, escala de 4 */
  --v-1:4px; --v-2:8px; --v-3:12px; --v-4:16px; --v-6:24px; --v-8:32px; --v-12:48px; --v-16:64px;

  --maxw:1120px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  background:
    radial-gradient(120% 70% at 50% -10%, #12243C 0%, transparent 60%),
    var(--v-bg);
  color:var(--v-text);
  font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
/* padding-block (não o atalho) para não zerar o respiro lateral do .wrap */
.section{ padding-block:72px; }
.section-sm{ padding-block:48px; }

/* Tipografia (escala do módulo 04) */
/* display 40/48 (padrão módulo 04); no hero deixo respirar até 44 */
.display{ font-weight:300; font-size:clamp(30px,5vw,44px); line-height:1.14; letter-spacing:-.01em; }
h1,h2,h3{ font-weight:500; }
.eyebrow{ font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--v-accent); }
.lead{ font-size:clamp(16px,2.4vw,19px); color:var(--v-text-2); }

/* ---------------- Nav ---------------- */
.nav{
  position:sticky; top:0; z-index:40;
  background:rgba(10,19,35,.78); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--v-border);
}
.nav .row{ display:flex; align-items:center; gap:20px; height:66px; }
.nav img{ height:34px; width:auto; }
.nav .links{ display:none; gap:26px; margin-left:auto; }
.nav .links a{ font-size:14px; color:var(--v-text-2); }
.nav .links a:hover{ color:var(--v-white); }
.nav .cta{ margin-left:auto; }

/* ---------------- Botões ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:46px; padding:0 22px; border-radius:var(--v-r-md);
  font-family:inherit; font-size:15px; font-weight:600; cursor:pointer;
  border:1px solid transparent; transition:transform .16s cubic-bezier(.2,.8,.2,1), background .16s, border-color .16s;
}
.btn:active{ transform:scale(.985); }
.btn-gold{ background:var(--v-gold); color:var(--v-text-on-gold); }
.btn-gold:hover{ background:#E1BE4E; }
.btn-ghost{ background:transparent; color:var(--v-white); border-color:var(--v-border-str); }
.btn-ghost:hover{ border-color:var(--v-accent-brd); }
.btn-sm{ height:40px; padding:0 16px; font-size:13px; }

/* ---------------- Hero (2 colunas + painel) ---------------- */
.hero{ padding-block:52px 40px; }
.herogrid{ display:grid; gap:34px; grid-template-columns:1fr; align-items:center; }
.hero .display{ max-width:16ch; }
.hero .lead{ max-width:50ch; margin-top:18px; }
.hero .acoes{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.hero .chips{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:20px; }
.hero .chip{ font-size:13px; color:var(--v-text-2); display:inline-flex; gap:7px; align-items:center; }
.hero .chip::before{ content:"✓"; color:var(--v-accent); font-weight:700; }
.hero .tag{ margin-top:22px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--v-text-3); }
.hero .tag b{ color:var(--v-accent); font-weight:500; }

/* Painel de gestão (mock ilustrativo, estilo Vareon) */
.panel{ background:var(--v-surface); border:1px solid var(--v-border); border-radius:var(--v-r-lg); box-shadow:var(--v-e2); padding:20px; }
.panel .phead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.panel .phead h3{ font-size:15px; font-weight:500; }
.panel .live{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--v-accent);
  border:1px solid var(--v-accent-brd); background:var(--v-accent-soft); padding:3px 9px; border-radius:var(--v-r-pill); }
.kpis{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.kpi{ background:var(--v-surface-2); border:1px solid var(--v-border); border-radius:var(--v-r-md); padding:14px; }
.kpi .lab{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--v-text-3); }
.kpi .val{ font-size:22px; font-weight:300; margin-top:4px; font-variant-numeric:tabular-nums; }
.kpi .chg{ font-size:12px; color:var(--v-pos); margin-top:2px; }
.chart{ background:var(--v-surface-2); border:1px solid var(--v-border); border-radius:var(--v-r-md); padding:14px 14px 12px; }
.chart .lab{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--v-text-3); margin-bottom:12px; }
.bars{ display:flex; align-items:flex-end; gap:8px; height:92px; }
.barcol{ flex:1; border-radius:4px 4px 0 0; background:var(--v-steel); }
.barcol.up{ background:linear-gradient(180deg, var(--v-gold), #B9922E); }

/* Faixa de credibilidade */
.faixa{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--v-border); border:1px solid var(--v-border);
  border-radius:var(--v-r-lg); overflow:hidden; margin-top:44px;
}
.faixa div{ background:var(--v-surface); padding:20px 12px; text-align:center; }
.faixa b{ display:block; font-weight:300; font-size:clamp(22px,4.5vw,28px); color:var(--v-accent); }
.faixa span{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--v-text-3); }

/* ---------------- Diferencial (a espinha: inteligência integrada) ---------------- */
.difs{ display:grid; gap:12px; grid-template-columns:repeat(2,1fr); margin-top:8px; }
.dif{ background:var(--v-surface); border:1px solid var(--v-border); border-radius:var(--v-r-md); padding:18px; }
.dif b{ display:block; color:var(--v-accent); font-weight:600; font-size:15px; margin-bottom:4px; }
.dif span{ font-size:13px; color:var(--v-text-2); }

/* ---------------- Frentes (o coração) ---------------- */
.divs{ display:grid; gap:16px; grid-template-columns:1fr; }
.prod{ color:var(--v-accent); font-weight:600; }
.divcard{
  background:var(--v-surface); border:1px solid var(--v-border);
  border-radius:var(--v-r-lg); padding:28px; box-shadow:var(--v-e1);
  display:flex; flex-direction:column;
  transition:border-color .16s, transform .16s cubic-bezier(.2,.8,.2,1);
}
.divcard:hover{ border-color:var(--v-accent-brd); transform:translateY(-3px); }
.divcard .selo{
  display:inline-flex; align-items:center; gap:9px; align-self:flex-start;
  padding:7px 13px 7px 9px; border-radius:var(--v-r-pill);
  background:var(--v-accent-soft); border:1px solid var(--v-accent-brd);
  font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--v-accent);
}
.divcard .glyph{
  width:22px; height:22px; display:grid; place-items:center;
  border-radius:6px; background:var(--v-gold); color:var(--v-text-on-gold);
  font-size:12px; font-weight:700;
}
.divcard h3{ font-size:18px; line-height:1.3; margin:16px 0 4px; }
.divcard .oq{ font-size:14px; color:var(--v-text-2); }
.divcard ul{ list-style:none; margin:16px 0 22px; }
.divcard li{ position:relative; padding-left:22px; margin-bottom:9px; font-size:14px; color:var(--v-text-2); }
.divcard li::before{
  content:""; position:absolute; left:3px; top:9px; width:6px; height:6px;
  border-radius:50%; background:var(--v-accent);
}
.divcard .btn{ margin-top:auto; }

/* ---------------- Blocos genéricos ---------------- */
.center{ text-align:center; }
.head{ max-width:44ch; margin:0 auto 40px; }
.head h2{ font-size:clamp(22px,3.4vw,28px); font-weight:500; line-height:1.2; margin:12px 0 10px; }
.head p{ color:var(--v-text-2); }

.grid3{ display:grid; gap:16px; grid-template-columns:1fr; }
.pilar{ background:var(--v-surface); border:1px solid var(--v-border); border-radius:var(--v-r-lg); padding:24px; }
.pilar .n{ color:var(--v-accent); font-size:13px; font-weight:600; letter-spacing:.02em; }
.pilar h3{ font-size:17px; margin:10px 0 6px; }
.pilar p{ font-size:14px; color:var(--v-text-2); }

/* Como funciona */
.passos{ display:grid; gap:14px; grid-template-columns:1fr; counter-reset:p; }
.passo{ display:flex; gap:16px; background:var(--v-surface); border:1px solid var(--v-border); border-radius:var(--v-r-lg); padding:20px 22px; }
.passo .num{
  flex:0 0 40px; height:40px; border-radius:var(--v-r-pill); display:grid; place-items:center;
  border:1px solid var(--v-accent-brd); background:var(--v-accent-soft);
  color:var(--v-accent); font-weight:600; font-size:16px;
}
.passo h3{ font-size:17px; }
.passo p{ font-size:14px; color:var(--v-text-2); margin-top:3px; }

/* Diagnóstico interativo */
.quiz{ max-width:640px; margin:0 auto; }
.quizstart{ text-align:center; }

/* Cenários (é hora de nos procurar se...) */
.cenarios{ display:grid; gap:12px; grid-template-columns:1fr; max-width:820px; margin:0 auto; }
.cen{ background:var(--v-surface); border:1px solid var(--v-border); border-left:3px solid var(--v-accent);
  border-radius:var(--v-r-md); padding:16px 18px; font-size:15px; color:var(--v-text); }
.cen b{ color:var(--v-accent); font-weight:600; }
.cta-center{ text-align:center; margin-top:28px; }
.q{ margin-bottom:22px; }
.q h3{ font-size:17px; font-weight:500; margin-bottom:12px; }
.opts{ display:grid; gap:10px; }
.opt{ text-align:left; background:var(--v-surface); border:1px solid var(--v-border-str); color:var(--v-text);
  border-radius:var(--v-r-md); padding:13px 16px; font-family:inherit; font-size:14px; cursor:pointer;
  transition:border-color .16s cubic-bezier(.2,.8,.2,1), background .16s; }
.opt:hover{ border-color:var(--v-accent-brd); }
.opt.sel{ border-color:var(--v-gold); background:var(--v-accent-soft); }
.quiz .go{ margin-top:6px; }
.result{ margin-top:22px; background:linear-gradient(160deg,var(--v-surface-2),var(--v-surface));
  border:1px solid var(--v-accent-brd); border-radius:var(--v-r-lg); padding:28px; text-align:center; }
.result .lab{ color:var(--v-accent); font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.result h3{ font-size:22px; font-weight:400; margin:8px 0; }
.result p{ color:var(--v-text-2); margin-bottom:18px; }
.hidden{ display:none; }

/* Depoimentos */
.depos{ display:flex; gap:14px; overflow-x:auto; padding-bottom:10px; scroll-snap-type:x mandatory; scrollbar-width:none; }
.depos::-webkit-scrollbar{ display:none; }
.depo{ flex:0 0 84%; scroll-snap-align:start; background:var(--v-surface); border:1px solid var(--v-border); border-radius:var(--v-r-lg); padding:22px; }
.depo .estrelas{ color:var(--v-accent); letter-spacing:2px; font-size:13px; }
.depo blockquote{ font-size:15px; margin:12px 0 14px; color:var(--v-text); }
.depo cite{ font-style:normal; font-size:13px; color:var(--v-accent); font-weight:500; }

/* CTA final */
.finalcta{
  text-align:center; background:linear-gradient(160deg, var(--v-surface-2), var(--v-surface));
  border:1px solid var(--v-accent-brd); border-radius:var(--v-r-lg); padding:48px 28px;
}
.finalcta h2{ font-size:clamp(24px,3.6vw,28px); font-weight:400; line-height:1.2; }
.finalcta p{ color:var(--v-text-2); margin:12px auto 26px; max-width:46ch; }

/* Rodapé */
footer{ border-top:1px solid var(--v-border); padding:44px 0 40px; margin-top:24px; }
footer .top{ display:flex; flex-direction:column; gap:24px; }
footer img{ height:40px; width:auto; }
footer .tri{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--v-text-3); }
footer .tri b{ color:var(--v-accent); font-weight:500; }
footer .contato a{ display:block; color:var(--v-text-2); font-size:14px; margin-bottom:8px; }
footer .contato a:hover{ color:var(--v-white); }
footer .fim{ margin-top:28px; padding-top:20px; border-top:1px solid var(--v-border); font-size:12px; color:var(--v-text-3); }

/* Barra WhatsApp fixa (mobile) */
.bar{ position:fixed; left:0; right:0; bottom:0; z-index:45; padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(10,19,35,.9); backdrop-filter:blur(12px); border-top:1px solid var(--v-border); }
.bar .btn{ display:flex; width:100%; }

/* Movimento discreto (módulo 04: 240ms, cubic-bezier(.2,.8,.2,1), nada pisca/quica/gira) */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.barcol{ transition:height .7s cubic-bezier(.2,.8,.2,1); }

/* Foco visível */
:where(a,button,summary):focus-visible{ outline:2px solid var(--v-accent); outline-offset:3px; border-radius:6px; }

body{ padding-bottom:76px; } /* espaço p/ barra fixa */

/* ---------------- Desktop ---------------- */
@media (min-width:760px){
  .nav .links{ display:flex; }
  .nav .cta{ margin-left:0; }
  .herogrid{ grid-template-columns:1.05fr .95fr; }
  .divs{ grid-template-columns:repeat(3,1fr); }
  .cenarios{ grid-template-columns:repeat(2,1fr); }
  .grid3{ grid-template-columns:repeat(3,1fr); }
  .passos{ grid-template-columns:repeat(2,1fr); }
  .depo{ flex-basis:44%; }
  .footer-grid{ display:flex; justify-content:space-between; align-items:flex-start; }
  .bar{ display:none; }
  body{ padding-bottom:0; }
  .hero{ padding-top:80px; }
}
/* Título em uma linha só a partir de 600px (no celular estreito ainda quebra) */
@media (min-width:600px){ .oneline{ white-space:nowrap; } }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; scroll-behavior:auto; } }
/* =====================================================================
   Base de empilhamento — 24/08/2026
   O que sobrou do bloco da marca d'água (leque), removida a pedido
   da Patricia. As duas regras abaixo não desenhavam nada: seguram o
   fundo do hero no lugar e evitam barra de rolagem lateral. Se saírem,
   a camada de fotos vaza para fora da primeira dobra.
   ===================================================================== */

/* clip, e não hidden, para não quebrar o position:sticky da .nav */
body{ overflow-x:clip; }

.hero,
.section,
.section-sm,
footer{ position:relative; isolation:isolate; }

/* =====================================================================
   HERO COM FUNDO VIVO — 24/08/2026
   As fotos da coleção "site" (Unsplash) entram como pano de fundo da
   primeira dobra, em transição contínua com um leve avanço de câmera.
   Lê como vídeo, mas pesa como imagem.

   O texto continua em branco puro sobre o véu navy, então o contraste
   não depende da foto que estiver na vez.
   ===================================================================== */

:root{
  --v-navy-rgb:10,19,35;      /* mesmo #0A1323, em canal, para os véus */
  --v-nav-h:67px;             /* altura da nav + a borda de 1px */
  --hero-fade:1.1s;           /* cruzamento entre uma foto e a outra */
  --hero-ken:5.8s;            /* avanço de câmera, casado com o intervalo */
}

.hero{ overflow:visible; }
.heroinner{ position:relative; z-index:1; }

/* --- camada das fotos: sangra a largura toda e sobe por trás da nav --- */
.heromedia{
  position:absolute;
  left:0; right:0; bottom:0;
  top:calc(-1 * var(--v-nav-h));
  z-index:-2;                 /* atrás do conteúdo do hero */
  overflow:hidden;
  pointer-events:none;
}

.heroslide{
  position:absolute; inset:0;
  background-image:var(--img);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transform:scale(1.06);
  transition:opacity var(--hero-fade) ease-in-out;
  will-change:opacity, transform;
}
.heroslide.is-on{
  opacity:1;
  animation:heroKen var(--hero-ken) ease-out forwards;
}
@keyframes heroKen{
  from{ transform:scale(1.06); }
  to  { transform:scale(1.14); }
}

/* --- véu: garante o texto branco legível sobre qualquer foto --- */
.heroveil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,
      rgba(var(--v-navy-rgb),.70) 0%,
      rgba(var(--v-navy-rgb),.22) 26%,
      rgba(var(--v-navy-rgb),.62) 78%,
      rgba(var(--v-navy-rgb),1)   100%),
    linear-gradient(92deg,
      rgba(var(--v-navy-rgb),.93) 0%,
      rgba(var(--v-navy-rgb),.82) 34%,
      rgba(var(--v-navy-rgb),.42) 62%,
      rgba(var(--v-navy-rgb),.28) 100%);
}

/* respiro do texto sobre a foto */
.hero .display,
.hero .lead{ text-shadow:0 1px 26px rgba(0,0,0,.38); }

/* --- painel e faixa viram vidro, para não parecerem colados na foto --- */
.hero .panel{
  background:rgba(var(--v-navy-rgb),.62);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
          backdrop-filter:blur(14px) saturate(1.15);
  border-color:var(--v-border-str);
  box-shadow:var(--v-e3);
}
.hero .kpi,
.hero .chart{ background:rgba(255,255,255,.05); }

.hero .faixa{
  -webkit-backdrop-filter:blur(14px);
          backdrop-filter:blur(14px);
  border-color:var(--v-border-str);
  box-shadow:var(--v-e2);
}
.hero .faixa div{ background:rgba(var(--v-navy-rgb),.58); }

/* --- marcadores das fotos --- */
.herodots{
  display:flex; gap:10px; justify-content:center;
  margin-top:26px;
}
.herodots button{
  width:26px; height:3px; padding:0; border:0;
  border-radius:var(--v-r-pill);
  background:var(--v-border-str);
  cursor:pointer;
  transition:background .35s ease, width .35s ease;
}
.herodots button:hover{ background:var(--v-accent-brd); }
.herodots button.on{ background:var(--v-accent); width:44px; }

/* --- celular: arquivo menor e véu mais fechado, o texto ocupa a largura toda --- */
@media (max-width:759px){
  .heroslide{ background-image:var(--img-sm); }
  .heroveil{
    background:
      linear-gradient(180deg,
        rgba(var(--v-navy-rgb),.88) 0%,
        rgba(var(--v-navy-rgb),.70) 26%,
        rgba(var(--v-navy-rgb),.86) 72%,
        rgba(var(--v-navy-rgb),1)   100%);
  }
  .herodots{ margin-top:22px; }
}

/* --- movimento reduzido: sai o avanço de câmera, fica só o cruzamento ---
   A regra geral do arquivo zera toda transição nesse modo; aqui devolvo
   apenas a do fundo, porque um fade não é movimento na tela e é o que
   mantém a troca das fotos suave em vez de virar corte seco. */
@media (prefers-reduced-motion:reduce){
  .heroslide{
    animation:none !important;
    transform:none !important;
    transition:opacity 1.3s ease-in-out !important;
  }
  .herodots button{ transition:background .35s ease !important; }
}

@media print{
  .heromedia, .herodots{ display:none; }
}