/* ============================================================
   ASSESCONT — folha de estilo
   O vermelho é o da marca deles (#F01A26), extraído do site atual.
   Trocar as variáveis abaixo reveste o site inteiro.
   ============================================================ */

:root{
  --vermelho:  #f01a26;
  --vermelho-2:#ff4048;
  --grafite:   #17181c;
  --grafite-2: #1f2126;
  --tinta:     #1b1c20;
  --papel:     #ffffff;
  --papel-2:   #f5f6f8;
  --cinza:     #6b7078;
  --linha:     rgba(27,28,32,.12);
  --linha-esc: rgba(255,255,255,.13);

  --display: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --texto:   "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(20px, 5vw, 72px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--texto); font-weight:300; font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--vermelho); color:#fff; }

.wrap{ width:100%; max-width:1220px; margin-inline:auto; padding-inline:var(--gutter); }
.wrap--estreito{ max-width:840px; }

.pular{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--vermelho); color:#fff; padding:12px 20px;
}
.pular:focus{ left:12px; top:12px; }

/* ---------- navegação ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:18px var(--gutter);
  color:#fff;
  transition:background .45s ease, padding .45s ease, color .45s ease, border-color .45s ease;
  border-bottom:1px solid transparent;
}
/* A barra fica escura em todo o site, inclusive sobre as seções claras.
   Não é estilo: a logo tem o caduceu e a assinatura em BRANCO, e sobre
   fundo claro metade da marca desapareceria. */
.nav.is-fixa{
  background:rgba(23,24,28,.78);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--linha-esc);
  padding-block:11px;
}
.nav__brand{ display:flex; align-items:center; flex:none; }
.nav__brand img{ height:52px; width:auto; transition:height .45s ease; }
.nav.is-fixa .nav__brand img{ height:40px; }
@media (max-width:520px){
  .nav__brand img{ height:42px; }
  .nav.is-fixa .nav__brand img{ height:34px; }
}
.nav__links{ display:flex; gap:30px; font-size:13.5px; letter-spacing:.02em; }
.nav__links a{ opacity:.82; transition:opacity .3s; }
.nav__links a:hover{ opacity:1; }
.nav__cta{
  font-size:13px; font-weight:500; padding:11px 20px; border-radius:999px;
  background:var(--vermelho); color:#fff; white-space:nowrap;
  transition:background .3s, transform .3s;
}
.nav__cta:hover{ background:var(--vermelho-2); transform:translateY(-1px); }
@media (max-width:940px){ .nav__links{ display:none; } }
@media (max-width:520px){ .nav__brand small{ display:none; } }

/* ============================================================
   CENA 3D
   ============================================================ */
.cena{ height:520vh; position:relative; background:var(--grafite); }
.cena__fixa{
  position:sticky; top:0; height:100svh; min-height:560px;
  overflow:hidden; display:grid; place-items:center; color:#fff;
}
.cena__brilho{
  position:absolute; inset:0;
  background:
    radial-gradient(52% 44% at 50% 40%, rgba(240,26,38,.15), transparent 72%),
    radial-gradient(80% 60% at 50% 105%, rgba(120,140,190,.10), transparent 70%),
    var(--grafite);
}
.palco3d{ position:absolute; inset:0; }
.palco3d canvas{ display:block; width:100%; height:100%; }

/* plano B sem WebGL: quatro discos em CSS */
.pilha2d{
  position:absolute; inset:0; display:grid; place-content:center; gap:14px;
  perspective:900px;
}
.pilha2d span{
  display:block; width:min(38vh,240px); height:26px; border-radius:50%;
  background:linear-gradient(180deg,#2b2d34,#16171b);
  box-shadow:0 10px 26px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.07);
}
.tem-3d .pilha2d{ display:none; }

.capa{
  position:absolute; z-index:3; inset:auto var(--gutter) clamp(46px,7vh,92px) var(--gutter);
  max-width:720px; will-change:opacity, transform;
}
.capa::before{
  content:""; position:absolute; z-index:-1; inset:-60px -40px -60px -40px;
  background:radial-gradient(70% 100% at 22% 60%, rgba(23,24,28,.94), rgba(23,24,28,.55) 55%, transparent 82%);
}
.capa__olho{ margin:0 0 18px; font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--vermelho-2); }
.capa__titulo{
  margin:0; font-family:var(--display); font-weight:300;
  font-size:clamp(30px,4.3vw,54px); line-height:1.12; letter-spacing:-.025em;
}
.capa__titulo em{ font-style:normal; font-weight:600; color:#fff; }
.capa__sub{ margin:18px 0 0; font-size:16px; color:rgba(255,255,255,.72); max-width:44ch; }
.capa__acoes{ display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }

.cue{
  position:absolute; z-index:4; right:var(--gutter); bottom:26px;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.45);
}
.cue i{ display:block; width:1px; height:38px; background:linear-gradient(var(--vermelho), transparent); }
@media (max-width:940px){ .cue{ display:none; } }

.legendas{
  position:absolute; z-index:3; right:var(--gutter); top:50%; transform:translateY(-50%);
  width:min(380px,38vw); display:grid; align-items:center;
}
.legenda{ grid-area:1 / 1; opacity:0; pointer-events:none; will-change:opacity, transform; }
.legenda__num{ display:block; font-family:var(--display); font-size:12px; letter-spacing:.28em; color:var(--vermelho-2); margin-bottom:14px; }
.legenda h2{ margin:0 0 14px; font-family:var(--display); font-weight:500; font-size:clamp(26px,3.2vw,40px); line-height:1.12; letter-spacing:-.02em; }
.legenda p{ margin:0; color:rgba(255,255,255,.66); font-size:15px; max-width:36ch; }

@media (max-width:940px){
  .cena{ height:440vh; }
  .legendas{ right:var(--gutter); left:var(--gutter); width:auto; top:auto; bottom:clamp(46px,9vh,90px); transform:none; align-items:end; }
  .legenda p{ max-width:none; font-size:14px; }
  .capa{ max-width:none; }
  .capa::before{ background:radial-gradient(90% 100% at 50% 60%, rgba(23,24,28,.94), rgba(23,24,28,.5) 60%, transparent 85%); }
}

.trilho{
  position:absolute; z-index:3; left:var(--gutter); top:50%; transform:translateY(-50%);
  width:1px; height:110px; background:var(--linha-esc);
}
.trilho span{ display:block; width:100%; height:100%; background:var(--vermelho); transform:scaleY(0); transform-origin:top; will-change:transform; }
@media (max-width:940px){ .trilho{ display:none; } }

/* ============================================================
   SEÇÕES CLARAS
   ============================================================ */
.secao{ position:relative; z-index:5; background:var(--papel); padding-block:clamp(80px,11vh,140px); }

.olho{ margin:0 0 16px; font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--vermelho); }
.titulo{
  margin:0 0 28px; font-family:var(--display); font-weight:300;
  font-size:clamp(28px,4.2vw,52px); line-height:1.14; letter-spacing:-.025em; max-width:22ch;
}
.corpo{ margin:0 0 20px; color:var(--cinza); max-width:62ch; font-size:16px; }

/* ---------- diferenciais ---------- */
.cartoes{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:1px; background:var(--linha); border:1px solid var(--linha); margin-top:44px; }
.cartao{ background:var(--papel); padding:36px 30px; transition:background .4s ease; }
.cartao:hover{ background:var(--papel-2); }
.cartao__num{ display:block; font-family:var(--display); font-size:12px; letter-spacing:.2em; color:var(--vermelho); margin-bottom:18px; }
.cartao h3{ margin:0 0 12px; font-family:var(--display); font-weight:500; font-size:19px; letter-spacing:-.01em; }
.cartao p{ margin:0; color:var(--cinza); font-size:15px; }

/* ---------- faixa ---------- */
.faixa{ position:relative; z-index:5; background:var(--grafite); color:#fff; padding-block:22px; overflow:hidden; }
.faixa__trilho{ display:flex; align-items:center; width:max-content; will-change:transform; }
.faixa__trilho span{ font-family:var(--display); font-weight:300; font-size:clamp(17px,2vw,25px); letter-spacing:-.01em; padding-inline:24px; white-space:nowrap; }
.faixa__trilho i{ color:var(--vermelho); font-style:normal; font-size:9px; }

/* ---------- como funciona ---------- */
.como{ background:var(--papel-2); }
.passos{ list-style:none; margin:44px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:34px 30px; }
.passo{ position:relative; padding-top:24px; border-top:2px solid var(--linha); }
.passo::after{ content:""; position:absolute; left:0; top:-2px; width:34px; height:2px; background:var(--vermelho); }
.passo span{ display:block; font-family:var(--display); font-size:12px; letter-spacing:.2em; color:var(--vermelho); margin-bottom:12px; }
.passo h3{ margin:0 0 8px; font-family:var(--display); font-weight:500; font-size:17px; }
.passo p{ margin:0; color:var(--cinza); font-size:14.5px; }

/* ---------- utilitários ---------- */
.links{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:1px; background:var(--linha); border:1px solid var(--linha); margin-top:40px; }
.links a{
  background:var(--papel); padding:22px 24px; font-size:14.5px; font-weight:400;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  transition:background .35s ease, color .35s ease;
}
.links a::after{ content:"↗"; color:var(--vermelho); font-size:13px; transition:transform .35s ease; }
.links a:hover{ background:var(--grafite); color:#fff; }
.links a:hover::after{ transform:translate(3px,-3px); }

/* ---------- dúvidas ---------- */
.duvidas{ background:var(--papel-2); }
.faq{ margin-top:40px; border-top:1px solid var(--linha); }
.faq__item{ border-bottom:1px solid var(--linha); }
.faq__item summary{
  cursor:pointer; list-style:none; padding:22px 40px 22px 0; position:relative;
  font-family:var(--display); font-weight:500; font-size:clamp(16px,2vw,19px); letter-spacing:-.01em;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:""; position:absolute; right:6px; top:50%; width:13px; height:13px;
  border-right:2px solid var(--vermelho); border-bottom:2px solid var(--vermelho);
  transform:translateY(-70%) rotate(45deg); transition:transform .35s ease;
}
.faq__item[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.faq__item p{ margin:0 0 24px; color:var(--cinza); font-size:15px; max-width:70ch; }
.duvidas__cta{ margin-top:40px; }

/* ---------- contato ---------- */
.contato__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:32px; margin-top:36px; padding-block:34px; border-block:1px solid var(--linha); }
.contato__bloco h3{ margin:0 0 12px; font-family:var(--display); font-weight:500; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--vermelho); }
.contato__bloco p{ margin:0 0 10px; color:var(--cinza); font-size:15px; }
.link{ color:var(--tinta); border-bottom:1px solid var(--vermelho); padding-bottom:1px; transition:color .3s; }
.link:hover{ color:var(--vermelho); }

.form{ display:grid; grid-template-columns:1fr 1fr; gap:24px 28px; margin-top:48px; }
.campo--largo{ grid-column:1 / -1; }
@media (max-width:640px){ .form{ grid-template-columns:1fr; } }
.campo label{ display:block; margin-bottom:8px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--cinza); }
.campo input,.campo textarea{
  width:100%; background:transparent; color:var(--tinta);
  border:0; border-bottom:1px solid var(--linha); padding:10px 0;
  font-family:var(--texto); font-size:15px; font-weight:300; resize:vertical;
  transition:border-color .35s;
}
.campo input:focus,.campo textarea:focus{ outline:0; border-bottom-color:var(--vermelho); }
.form__aviso{ margin:14px 0 0; font-size:13.5px; color:var(--vermelho); min-height:1.3em; }

/* ---------- botões ---------- */
.botao{
  display:inline-block; position:relative; overflow:hidden; isolation:isolate;
  border:1px solid currentColor; border-radius:999px;
  font-family:var(--texto); font-size:13.5px; font-weight:500;
  padding:14px 28px; cursor:pointer; background:transparent; color:inherit;
  will-change:transform;
}
.botao--cheio{ border-color:var(--vermelho); background:var(--vermelho); color:#fff; }
.botao__fundo{
  position:absolute; z-index:-1; border-radius:50%; background:#fff; pointer-events:none;
  transform:translate(-50%,-50%) scale(0);
  transition:transform .55s cubic-bezier(.65,0,.35,1);
}
.botao--cheio .botao__fundo{ background:var(--grafite); }
.botao:not(.botao--cheio) .botao__fundo{ background:var(--vermelho); }
.botao.is-dentro .botao__fundo{ transform:translate(-50%,-50%) scale(1); }
.botao__texto{ position:relative; transition:color .35s ease .06s; }
.botao.is-dentro .botao__texto{ color:#fff; }

/* ---------- rodapé ---------- */
.rodape{ position:relative; z-index:5; background:var(--grafite); color:#fff; padding-top:64px; }
.rodape__grid{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:48px; }
.rodape__marca{ width:200px; height:auto; margin-bottom:18px; }
.rodape__end{ margin:0; font-size:14px; color:rgba(255,255,255,.6); max-width:44ch; }
.rodape__cols{ display:flex; gap:26px; flex-wrap:wrap; font-size:13.5px; color:rgba(255,255,255,.7); }
.rodape__cols a:hover{ color:#fff; }
.rodape__base{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  border-top:1px solid var(--linha-esc); padding-block:22px;
  font-size:12.5px; color:rgba(255,255,255,.42);
}

/* ---------- botão flutuante do WhatsApp ---------- */
.zap{
  position:fixed; right:20px; bottom:20px; z-index:40;
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center; color:#fff; background:#25d366;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
  transition:transform .3s ease;
}
.zap svg{ width:28px; height:28px; }
.zap:hover{ transform:scale(1.07); }

/* ============================================================
   EFEITOS (portados da Originkit)
   ============================================================ */
.ok-palavra{ display:inline-block; white-space:nowrap; }
.ok-letra{ display:inline-block; will-change:transform, opacity; }
[data-ok]{ visibility:hidden; }
[data-ok].ok-pronto, [data-ok="mask"]{ visibility:visible; }

.cortina{
  position:fixed; inset:0; z-index:60; background:var(--grafite);
  display:grid; place-items:center;
  transition:transform 1.05s cubic-bezier(.76,0,.24,1), opacity .5s ease .55s;
}
.cortina.is-fora{ transform:translateY(-100%); opacity:0; pointer-events:none; }
.cortina__marca{
  width:min(240px, 56vw); height:auto;
  animation:pulsar 1.4s ease-in-out infinite;
}
@keyframes pulsar{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }

.nav__links a, .rodape__cols a{ position:relative; }
.nav__links a::after, .rodape__cols a::after{
  content:""; position:absolute; left:0; right:0; bottom:-5px; height:1px;
  background:var(--vermelho); transform:scaleX(0); transform-origin:right;
  transition:transform .42s cubic-bezier(.65,0,.35,1);
}
.nav__links a:hover::after, .rodape__cols a:hover::after{ transform:scaleX(1); transform-origin:left; }

[data-revelar]{
  opacity:0; transform:translateY(20px);
  transition:opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1);
}
[data-revelar].is-visivel{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .cena{ height:360vh; }
  [data-revelar]{ opacity:1; transform:none; transition:none; }
}