/* ═══ HOME · VISUAL V3 (31/10/2026) — linguagem da referência "NEXOVA" que o dono enviou ═══
   Fundo azul-noite quase preto, tipografia neo-grotesca (Inter Tight) com títulos LEVES e grandes, números em peso
   máximo com brilho branco, rótulos em caixa alta pequena e espaçada, botão principal em degradê esmeralda→ciano,
   botão secundário em "vidro líquido" (fundo quase nulo, desfoque, fio em degradê) e rodapé em colunas apagadas.
   Só CSS e só nesta página (o <link> existe apenas em site/index.html): nenhum texto, número, link ou ordem mudou.
   Carrega por ÚLTIMO, depois do tema e do bloco "HERO com vídeo", e repete o !important deles onde precisa vencer.
   Nota: tema-estrutura.css desliga todo backdrop-filter com "*{...!important}"; o vidro aqui religa com !important.
   Undo: tirar o <link> deste arquivo (e o da Inter Tight) do <head> de site/index.html. */

:root{
  --p-display:'Inter Tight','Helvetica Neue',Helvetica,Arial,sans-serif;
  --p-body:'Inter Tight','Helvetica Neue',Helvetica,Arial,sans-serif;
  --n1:#04060c; --n2:#070a12; --n3:#0b0f19; --n4:#111726;
  --v3-ink:#fff; --v3-80:rgba(255,255,255,.8); --v3-60:rgba(255,255,255,.6); --v3-50:rgba(255,255,255,.5);
  --v3-hair:rgba(255,255,255,.09); --v3-hair2:rgba(255,255,255,.16);
  --v3-esm:#34d399; --v3-cia:#06b6d4; --v3-grad:linear-gradient(90deg,#34d399,#06b6d4);
  --v3-on-grad:#02161a;   /* texto escuro no degradê: branco sobre #34d399 dá 1,9:1, abaixo do mínimo de leitura */
  --v3-glow:0 0 80px rgba(255,255,255,.3),0 0 160px rgba(255,255,255,.1);
}
html body{font-family:var(--p-body)!important;background:var(--n1)!important}
html body .hx{--hx-sora:var(--p-body)}
/* os fios verdes agora vêm prontos nos arquivos de /assets/hero/ (recoloridos no ffmpeg, só os tons
   vermelho/amarelo); a camada em modo "matiz" que fazia isso por CSS saiu: custava quadro a quadro no celular. */

/* sem zoom: duplo toque e pinça não ampliam (o <meta viewport> e o script "sem zoom" fazem o resto) */
html{touch-action:pan-x pan-y}
/* campo com fonte menor que 16px faz o iPhone ampliar a tela ao tocar: no celular os campos vão a 16px */
@media (max-width:699px){ html body :is(.fg input,.fg select,.fg-txt textarea){font-size:16px!important} }

/* ---------- títulos: leves, grandes, apertados; a 2ª linha num branco apagado ---------- */
html body :is(h1,h2,.cta-h){font-family:var(--p-display)!important;font-weight:300!important;letter-spacing:-.035em!important;
  line-height:1.06!important;text-transform:none!important;color:var(--v3-ink)!important}
html body .hx h1.hx-h{font-weight:300!important;letter-spacing:-.04em!important;line-height:1.04!important}
html body .hx-h em{color:#a7f3d0!important;-webkit-text-fill-color:#a7f3d0}
html body :is(.sh2,.cta-h) em{color:var(--v3-50)!important;-webkit-text-fill-color:var(--v3-50)}
html body :is(h3,.bp-h,.vit-name,.form-card-title,.dep-name,.faq-item summary){font-family:var(--p-body)!important;font-weight:500!important;letter-spacing:-.015em!important}

/* ---------- rótulos: caixa alta pequena, negrito, espaçada (os títulos de coluna da referência) ---------- */
html body :is(.stag,.cta-tag,.overline,.hx-k,.foot-col-title,.mt-n,.mt-t,.vit-tag){font-family:var(--p-body)!important;
  font-size:var(--fs-2xs)!important;font-weight:700!important;letter-spacing:.15em!important;text-transform:uppercase!important;color:var(--v3-ink)!important}
html body .hx .hx-k{color:var(--v3-80)!important;font-variation-settings:normal}
html body .hx .hx-k::before{background:var(--v3-esm);box-shadow:0 0 0 4px rgba(52,211,153,.18)}
html body .stag::before{display:none!important}

/* ---------- texto corrido em branco translúcido ---------- */
html body :is(.sp,.hx-sub,.cta-sub,.nat,.vit-p,.dep-txt,.bp-p,.mt p,.faq-item p,.form-card-sub,.vit-mais){color:var(--v3-60)!important}
html body .hx .hx-sub{color:var(--v3-80)!important;font-weight:300;font-variation-settings:normal}

/* ---------- números: peso máximo, apertados, com o brilho do "404" da referência ---------- */
html body :is(.hx-fatos b,.plh-v){font-family:var(--p-display)!important;font-weight:900!important;letter-spacing:-.05em!important;
  color:var(--v3-ink)!important;text-shadow:var(--v3-glow);font-stretch:100%!important}
/* o preço do plano herdava 14px de ".mt p" (regra de texto de card, mais específica que .plh-v) */
html body .mt p.plh-v{font-size:clamp(28px,2.6vw,38px)!important;line-height:1.05!important;margin:8px 0 12px!important}
html body .plh-v small{font-weight:400!important;letter-spacing:0!important;text-shadow:none;color:var(--v3-50)!important}
html body .hx .hx-fatos li{color:var(--v3-60);border-top-color:var(--v3-hair2)}

/* ---------- navegação: transparente, links finos, botão em degradê ---------- */
html body #nav{background:rgba(4,6,12,.35)!important;border-bottom:1px solid transparent!important;
  -webkit-backdrop-filter:blur(14px)!important;backdrop-filter:blur(14px)!important}
html body #nav.scrolled{background:rgba(4,6,12,.78)!important;border-bottom-color:var(--v3-hair)!important}
html body .nav-menu a{font-family:var(--p-body)!important;font-size:var(--fs-md)!important;font-weight:400!important;letter-spacing:.02em!important;
  text-transform:none!important;color:var(--v3-80)!important;transition:color .2s}
html body .nav-menu a:hover{color:var(--v3-ink)!important}

/* menu do celular: itens centralizados, maiores e leves, sobre um painel com desfoque (como o da referência) */
@media (max-width:960px){
  /* quase opaco: o painel fica dentro do #nav, que já tem backdrop-filter, e desfoque aninhado não funciona
     (com .82 o título do hero aparecia através dos itens) */
  html body .nav-menu{background:var(--n1)!important;
    border-bottom:1px solid var(--v3-hair)!important;border-radius:0 0 20px 20px}
  html body .nav-menu a{text-align:center;font-size:var(--fs-lead)!important;font-weight:300!important;letter-spacing:.08em!important;
    border-bottom-color:var(--v3-hair)!important}
  html body .nav-cta-mobile a{font-size:var(--fs-ui)!important;font-weight:600!important;letter-spacing:.01em!important;border-bottom:0!important}
}

/* ---------- botões: principal em degradê, secundário em vidro líquido ---------- */
html body :is(.cta-btn-g,.nav-btn,.form-submit,.ck-ok,.nav-cta-mobile a),html body .hx a.hx-vidro{
  background:var(--v3-grad)!important;color:var(--v3-on-grad)!important;border:0!important;border-radius:999px!important;
  font-family:var(--p-body)!important;font-weight:600!important;letter-spacing:.01em!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;transition:filter .2s,box-shadow .2s}
html body :is(.cta-btn-g,.nav-btn,.form-submit,.ck-ok,.nav-cta-mobile a):hover,html body .hx a.hx-vidro:hover{
  background:var(--v3-grad)!important;color:var(--v3-on-grad)!important;filter:brightness(1.08);
  box-shadow:0 10px 34px -12px rgba(6,182,212,.55)!important}
html body .hx a.hx-vidro::before{display:none}

html body :is(.cta-btn-o,.ck-rec,.mq-pause){position:relative;overflow:hidden;color:var(--v3-ink)!important;border:0!important;border-radius:999px!important;
  background:rgba(255,255,255,.01)!important;background-blend-mode:luminosity;
  -webkit-backdrop-filter:blur(4px)!important;backdrop-filter:blur(4px)!important;box-shadow:inset 0 1px 1px rgba(255,255,255,.1)!important;
  font-family:var(--p-body)!important;font-weight:500!important;letter-spacing:.04em!important}
html body :is(.cta-btn-o,.ck-rec,.mq-pause)::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.4px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,.15) 20%,rgba(255,255,255,0) 40%,
    rgba(255,255,255,0) 60%,rgba(255,255,255,.15) 80%,rgba(255,255,255,.45) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}
html body :is(.cta-btn-o,.ck-rec,.mq-pause):hover{background:rgba(255,255,255,.06)!important}

/* ---------- cards: quase transparentes, fio fino e brilho de 1px no topo ---------- */
html body :is(.card,.mt,.mt-col,.vit-card,.dep-card,.form-card,.faq-item,.bloco-porta){border-radius:20px!important;
  background:rgba(255,255,255,.02)!important;border:1px solid var(--v3-hair)!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.08)!important}
html body :is(.card,.mt,.vit-card,.dep-card,.faq-item,.bloco-porta):hover{border-color:var(--v3-hair2)!important;background:rgba(255,255,255,.035)!important}
html body .bp-c,html body .vit-cta{color:var(--v3-ink)!important;font-weight:600}
html body .bloco-porta:hover .bp-c{color:var(--v3-esm)!important}

/* cases em lista (01/11): uma linha por case, sem imagem; etiqueta, nome, resumo e seta, com fio entre as linhas */
html body .case-lista{list-style:none;margin:8px 0 0;padding:0;border-top:1px solid var(--v3-hair)}
html body .case-lista a{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,11rem) minmax(0,1fr) auto;align-items:baseline;gap:8px 28px;
  padding:22px 8px;border-bottom:1px solid var(--v3-hair);text-decoration:none;transition:background .2s,padding .2s}
html body .case-lista a:hover{background:rgba(255,255,255,.025);padding-left:16px;padding-right:16px}
html body .cl-tag{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--v3-50)}
html body .cl-nome{font-size:var(--fs-lead);font-weight:500;letter-spacing:-.015em;color:var(--v3-ink)}
html body .cl-desc{font-size:var(--fs-md);line-height:1.55;color:var(--v3-60)}
html body .cl-seta{color:var(--v3-50);transition:color .2s,transform .2s}
html body .case-lista a:hover .cl-seta{color:var(--v3-esm);transform:translateX(3px)}
html body .case-mais{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 24px;margin:22px 0 0;
  font-size:var(--fs-sm);color:var(--v3-50)}
html body .case-mais a{font-weight:600;color:var(--v3-ink);text-decoration:none}
html body .case-mais a:hover{color:var(--v3-esm)}
/* GreenRadar como diferencial proprietário: faixa com o selo em degradê */
html body .case-gr{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px;margin:26px 0 0;padding:18px 22px;border-radius:16px;
  background:rgba(52,211,153,.05);border:1px solid rgba(52,211,153,.22);font-size:var(--fs-md);line-height:1.6;color:var(--v3-80)}
html body .case-gr b{flex:none;padding:4px 10px;border-radius:999px;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;background:var(--v3-grad);color:var(--v3-on-grad)}
html body .case-gr span{flex:1 1 320px;min-width:0}
html body .case-gr a{color:var(--v3-ink);font-weight:600;text-decoration:none;white-space:nowrap}
html body .case-gr a:hover{color:var(--v3-esm)}
html body .case-ig{margin:16px 0 0;font-size:var(--fs-sm);color:var(--v3-50)}
html body .case-ig a{color:var(--v3-80);text-decoration:none}
html body .case-ig a:hover{color:var(--v3-esm)}
html body .case-sub{margin:40px 0 10px;font-size:var(--fs-2xs)!important;font-weight:700!important;letter-spacing:.15em!important;
  text-transform:uppercase;color:var(--v3-50)!important}
@media (max-width:760px){
  html body .case-lista a{grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:18px 4px}
  html body .cl-tag{grid-column:1/-1}
  html body .cl-nome{grid-column:1}
  html body .cl-seta{grid-column:2;grid-row:2}
  html body .cl-desc{grid-column:1/-1}
}

/* planos por estágio (01/11): a frase do momento da empresa; o RVM Build marcado como projeto, fora da mensalidade */
html body .mt-est{margin:6px 0 2px!important;font-size:var(--fs-sm)!important;font-style:italic;line-height:1.45!important;color:var(--v3-80)!important}
html body .mt-build{border-style:dashed!important;background:transparent!important}

/* método: "de onde vem o seu próximo cliente?" em quatro linhas */
html body .origem{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:960px;margin:8px auto 28px;padding:0}
html body .origem li{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:18px;border:1px solid var(--v3-hair);background:rgba(255,255,255,.02);text-align:left}
html body .origem b{font-size:var(--fs-lead);font-weight:500;color:var(--v3-ink)}
html body .origem span{font-size:var(--fs-md);line-height:1.5;color:var(--v3-60)}
html body .origem li:first-child{border-color:rgba(52,211,153,.3)}
@media (max-width:760px){ html body .origem{grid-template-columns:repeat(2,minmax(0,1fr))} }
html body #metodo .sp{margin-left:auto;margin-right:auto;text-align:center}
html body #metodo .mt-cta{text-align:center;justify-content:center}

/* marcas e etiquetas */
html body .chip{border-radius:999px!important;background:rgba(255,255,255,.02)!important;border:1px solid var(--v3-hair)!important;color:var(--v3-60)!important}
html body .sec p.ganho{background:rgba(255,255,255,.02)!important;border:1px solid var(--v3-hair)!important;color:var(--v3-80)!important}
html body .sec p.ganho b{color:var(--v3-on-grad)!important;background:var(--v3-grad)!important}
html body .dep-av{background:var(--v3-grad)!important;color:var(--v3-on-grad)!important;border:0!important}
html body .faq-item summary::after{color:var(--v3-esm)!important}

/* formulário */
html body :is(.fg input,.fg select,.fg-txt textarea,.ro){background:rgba(255,255,255,.03)!important;border:1px solid var(--v3-hair2)!important;
  border-radius:12px!important;color:var(--v3-ink)!important;font-family:var(--p-body)!important}
html body :is(.fg input,.fg select,.fg-txt textarea):focus{border-color:var(--v3-cia)!important}
html body :is(.fg label,.rg-label){font-size:var(--fs-2xs)!important;font-weight:700!important;letter-spacing:.12em!important;text-transform:uppercase;color:var(--v3-80)!important}

/* ---------- faixas: sem bloco cinza; o chamado final ganha o brilho azul-ciano do vídeo ---------- */
html body :is(section,div)[style*="background:var(--n2)"],html body :is(section,div)[style*="background:var(--n1)"]{background:transparent!important}
html body .mt-cta{border-top-color:var(--v3-hair)!important}
html body #cta{background:radial-gradient(70% 60% at 50% 0%,rgba(6,182,212,.14),transparent 70%),
  linear-gradient(90deg,transparent,rgba(52,211,153,.35),transparent) 50% 0/84% 1px no-repeat!important}

/* ---------- rodapé em colunas apagadas ---------- */
html body footer{background:transparent!important;border-top:1px solid var(--v3-hair)!important}
html body .foot-links a,html body .foot-btn,html body .foot-contact a,html body .foot-contact span{color:var(--v3-50)!important;
  font-size:var(--fs-sm)!important;transition:color .2s}
html body .foot-links a:hover,html body .foot-btn:hover,html body .foot-contact a:hover{color:var(--v3-80)!important}
html body .foot-desc{color:var(--v3-50)!important}
html body .foot-bottom{color:rgba(255,255,255,.4)!important;border-top-color:var(--v3-hair)!important}

/* cookies: vidro escuro */
html body #cookies{background:rgba(7,10,18,.92)!important;border:1px solid var(--v3-hair2)!important}
html body #cookies p{color:var(--v3-60)!important}