/* Base, tipografia, botões e seções simples. Preto e branco brilhante, com cor onde ela explica (verde = ganho, vermelho = perda, cada time com a sua cor). */
:root {
  --bg: #050505;
  --painel: #0f0f0f;
  --linha: rgba(255, 255, 255, .09);
  --linha2: rgba(255, 255, 255, .16);
  --texto: #f4f4f4;
  --suave: #a3a3a3;
  --apagado: #6b6b6b;
  --verde: #22c55e;
  --verde-claro: #4ade80;
  --vermelho: #ef4444;
  --c-marketing: #fb923c;
  --c-vendas: #22c55e;
  --c-gestao: #a78bfa;
  --c-apps: #38bdf8;
  --c-servicos: #facc15;
  --raio: 18px;
  --raio-g: 28px;
  --cromo: linear-gradient(100deg, #8d8d8d 0%, #ffffff 22%, #d6d6d6 38%, #ffffff 52%, #9a9a9a 70%, #ffffff 88%, #bdbdbd 100%);
  --display: "Inter Tight", "Manrope", Arial, sans-serif;
  --corpo: "Manrope", Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font: 400 16px/1.6 var(--corpo);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(800px 500px at 0% 30%, rgba(255,255,255,.04), transparent 60%),
    var(--bg);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
svg { width: 1em; height: 1em; flex: none; }
::selection { background: #fff; color: #000; }

.wrap { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }
.section { padding-block: 120px; position: relative; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -.025em; margin: 0; line-height: 1.08; }
h2 { font-size: clamp(32px, 4.6vw, 56px); }
h3 { font-size: 21px; line-height: 1.25; }
p { margin: 0; }

.cromo {
  background: var(--cromo);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: cromo 7s linear infinite;
}
@keyframes cromo { to { background-position: -220% 0; } }
.verde { color: var(--verde-claro); }
.cor-viva { background: linear-gradient(90deg, var(--c-marketing), var(--c-servicos), var(--c-vendas), var(--c-apps), var(--c-gestao)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 12px/1.5 var(--corpo); letter-spacing: .16em;
  color: var(--suave); margin: 0 0 22px; text-transform: uppercase;
}

.cab { max-width: 780px; margin-bottom: 56px; }
.cab-centro { margin-inline: auto; text-align: center; }
.cab-centro .eyebrow { justify-content: center; }
.sub { color: var(--suave); font-size: 18px; margin-top: 20px; }
.h3-grande { font-size: clamp(26px, 3vw, 36px); }

/* Botão: branco brilhante; o de compra é verde */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 18px 28px; border-radius: 14px; border: 0;
  background: linear-gradient(180deg, #ffffff 0%, #e9e9e9 55%, #cfcfcf 100%);
  color: #050505; font: 800 16px/1 var(--corpo); text-decoration: none; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 10px 40px -6px rgba(255,255,255,.35), inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn svg { width: 22px; height: 22px; padding: 4px; border-radius: 7px; background: #050505; color: #fff; transition: transform .25s; }
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%);
  transform: translateX(-120%); animation: reflexo 4.5s ease-in-out infinite;
}
@keyframes reflexo { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg { transform: rotate(45deg); }
.btn-verde {
  background: linear-gradient(180deg, #4ade80 0%, #22c55e 55%, #16a34a 100%);
  color: #04130a;
  box-shadow: 0 0 0 1px rgba(74,222,128,.7), 0 14px 50px -8px rgba(34,197,94,.65), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-verde:hover { box-shadow: 0 0 0 1px #4ade80, 0 18px 70px -6px rgba(34,197,94,.85), inset 0 1px 0 rgba(255,255,255,.5); }
.btn-verde svg { background: #04130a; color: #4ade80; }
.btn:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.btn-grande { padding: 22px 34px; font-size: 18px; }

.card {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border: 1px solid var(--linha); border-radius: var(--raio-g); padding: 32px;
  position: relative; overflow: hidden;
}
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(400px 160px at var(--mx, 50%) 0%, rgba(255,255,255,.08), transparent 70%);
}
.card .num { font: 700 13px var(--display); color: var(--apagado); letter-spacing: .1em; }
.card h3 { margin: 18px 0 10px; }
.card p { color: var(--suave); }
.grade3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.tag {
  display: inline-flex; align-items: center; gap: 7px; width: fit-content;
  padding: 6px 12px; border-radius: 999px; font: 700 11px var(--corpo); letter-spacing: .12em; text-transform: uppercase;
  background: rgba(255,255,255,.08); border: 1px solid var(--linha2); color: #fff;
}
.led { width: 7px; height: 7px; border-radius: 50%; background: var(--vermelho); box-shadow: 0 0 10px 2px rgba(239,68,68,.8); animation: pisca 1.4s ease-in-out infinite; }
@keyframes pisca { 50% { opacity: .25; } }

/* Revelar ao rolar */
.revela { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.revela.visivel { opacity: 1; transform: none; }

/* ---------- TOPO ---------- */
.topo { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background .3s, border-color .3s; border-bottom: 1px solid transparent; }
.topo.rolou { background: rgba(5,5,5,.72); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px); border-color: var(--linha); }
.topo-in { display: flex; align-items: center; height: 72px; }
.topo-marca img { height: 32px; width: auto; }

/* ---------- HERO ---------- */
.hero { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 52px; min-height: 100vh; padding-top: 110px; padding-bottom: 60px; }
.titulo-hero { font-size: clamp(38px, 4.8vw, 66px); line-height: 1.04; letter-spacing: -.035em; font-weight: 800; }
.lead { color: var(--suave); font-size: 19px; max-width: 560px; margin-top: 26px; }

.ias-lista { list-style: none; margin: 36px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.ias-lista img { width: 52px; height: 52px; border-radius: 14px; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 8px 24px -8px rgba(0,0,0,.8); transition: transform .3s; }
.ias-lista li:hover img { transform: translateY(-4px); }

.hero-foto { position: relative; perspective: 1200px; }
.hero-video { position: relative; }
.hero-video .vsl { max-width: none; box-shadow: 0 0 0 8px rgba(255,255,255,.03), 0 40px 120px -20px rgba(255,255,255,.2); }
.moldura {
  position: relative; border-radius: 34px; overflow: hidden; aspect-ratio: 4 / 5.4;
  border: 1px solid var(--linha2);
  box-shadow: 0 0 0 8px rgba(255,255,255,.03), 0 40px 120px -20px rgba(255,255,255,.18);
  transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform .3s ease-out;
}
.moldura img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.moldura-brilho { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 58%, rgba(0,0,0,.85)), linear-gradient(115deg, rgba(255,255,255,.12), transparent 35%); }
.moldura-legenda { position: absolute; left: 24px; bottom: 22px; display: grid; }
.moldura-legenda strong { font: 700 22px var(--display); }
.moldura-legenda span { color: #cfcfcf; font-size: 14px; }

.flutua {
  position: absolute; display: block;
  padding: 13px 17px; border-radius: 16px;
  background: rgba(15,15,15,.75); border: 1px solid var(--linha2);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 20px 50px -10px rgba(0,0,0,.8);
  animation: boia 6s ease-in-out infinite;
}
.flutua small { display: block; color: var(--suave); font-size: 12px; }
.flutua b { font: 700 18px var(--display); display: block; }
.f1 { top: -9%; left: -7%; border-color: rgba(34,197,94,.5); }
.f1 b { color: var(--verde-claro); }
.f2 { bottom: -14%; right: -5%; animation-delay: -2s; min-width: 190px; }
.f2 b { font-size: 24px; }
.mini-graf { width: 100%; height: 34px; margin-top: 8px; filter: drop-shadow(0 0 6px rgba(34,197,94,.6)); }
.mini-graf path { stroke-dasharray: 300; stroke-dashoffset: 300; animation: desenha 2.4s .6s ease forwards; }
@keyframes desenha { to { stroke-dashoffset: 0; } }
.f3 { top: 42%; left: -12%; animation-delay: -4s; }
@keyframes boia { 50% { transform: translateY(-10px); } }

.faixa { border-block: 1px solid var(--linha); overflow: hidden; padding: 22px 0; background: rgba(255,255,255,.015); }
.faixa-trilho { display: flex; align-items: center; gap: 28px; width: max-content; animation: trilho 38s linear infinite; font: 700 20px var(--display); color: #d9d9d9; white-space: nowrap; }
.faixa-trilho i { width: 6px; height: 6px; border-radius: 50%; background: #555; }
@keyframes trilho { to { transform: translateX(-50%); } }

/* ---------- JANELA ---------- */
.citacoes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.citacao { margin: 0; display: grid; grid-template-columns: 180px 1fr; border: 1px solid var(--linha); border-radius: var(--raio-g); overflow: hidden; background: var(--painel); }
.citacao img, .citacao video { width: 100%; height: 100%; object-fit: cover; min-height: 240px; }
.citacao figcaption { padding: 30px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.quem { font: 700 12px var(--corpo); letter-spacing: .14em; text-transform: uppercase; color: var(--suave); }
.citacao blockquote { margin: 0; font: 600 23px/1.3 var(--display); }
.frase-grande { text-align: center; font: 700 clamp(26px, 3.4vw, 42px)/1.15 var(--display); max-width: 880px; margin: 70px auto 0; letter-spacing: -.02em; }

/* ---------- PRA QUEM É ---------- */
.dois-tipos { margin-top: 90px; text-align: center; }
.tipos { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 20px; text-align: left; }
.tipo { padding: 38px; border-radius: var(--raio-g); border: 1px solid var(--linha2); background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.01) 60%); }
.tipo-n { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: #000; font: 800 20px var(--display); box-shadow: 0 0 30px rgba(255,255,255,.35); }
.tipo h3 { font-size: 28px; margin: 22px 0 10px; }
.tipo p { color: var(--suave); }
.tipo-ou { align-self: center; font: 700 14px var(--display); color: var(--apagado); text-transform: uppercase; letter-spacing: .14em; }
.tipos-fim { margin-top: 36px; font-size: 20px; color: var(--suave); }
.tipos-fim strong { color: #fff; }

/* ---------- O QUE ISSO FEZ NA EMPRESA ---------- */
.empresa { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center; }
.empresa-foto { margin: 0; position: relative; border-radius: var(--raio-g); overflow: hidden; border: 1px solid var(--linha2); aspect-ratio: 4 / 5; box-shadow: 0 50px 120px -40px rgba(255,255,255,.22); }
.empresa-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.empresa-foto figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 20px 18px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.85)); font: 700 16px var(--display); }
.empresa-txt h2 { margin-bottom: 18px; }
.empresa-lead { color: var(--suave); font-size: 18px; margin-bottom: 26px; }
.tabela-ad { border-radius: 20px; border: 1px solid var(--linha2); overflow: hidden; background: var(--painel); }
.ad-linha { display: grid; grid-template-columns: 1.4fr 1fr 1fr; align-items: center; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--linha); }
.ad-linha:first-child { border-top: 0; }
.ad-cab { padding-block: 12px; background: rgba(255,255,255,.03); }
.ad-cab span { font: 700 12px var(--corpo); letter-spacing: .14em; text-transform: uppercase; color: var(--suave); }
.ad-linha > span:first-child { font-weight: 600; color: #ddd; }
.ad-linha s { font: 700 20px var(--display); color: #f87171; text-decoration-color: rgba(239,68,68,.8); text-decoration-thickness: 2px; }
.ad-linha b { font: 800 24px var(--display); color: var(--verde-claro); text-shadow: 0 0 24px rgba(34,197,94,.35); }
.nota { color: var(--apagado); font-size: 13px; margin-top: 14px; }

/* ---------- NA SUA ÁREA ---------- */
.profs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.prof { padding: 22px; border-radius: 18px; border: 1px solid var(--linha); background: var(--painel); transition: border-color .3s, transform .3s; }
.prof:hover { border-color: rgba(255,255,255,.35); transform: translateY(-4px); }
.prof h3 { font-size: 17px; }
.prof p { color: var(--suave); font-size: 15px; margin-top: 10px; line-height: 1.5; }
.prof b { color: #fff; }

/* ---------- SOZINHO (vermelho) × PLATAFORMA (verde) ---------- */
.caos-ordem { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.co-card { padding: 34px; border-radius: var(--raio-g); border: 1px solid var(--linha); background: var(--painel); }
.caos { border-color: rgba(239,68,68,.35); background: linear-gradient(160deg, rgba(239,68,68,.10), rgba(239,68,68,.01) 70%); }
.ordem-card { border-color: rgba(34,197,94,.5); background: linear-gradient(160deg, rgba(34,197,94,.14), rgba(34,197,94,.01) 70%); box-shadow: 0 30px 80px -30px rgba(34,197,94,.35); }
.co-rot { display: flex; align-items: center; gap: 10px; font: 700 13px var(--corpo); letter-spacing: .14em; text-transform: uppercase; }
.co-rot svg { width: 26px; height: 26px; padding: 5px; border-radius: 8px; }
.caos .co-rot { color: #fca5a5; }
.caos .co-rot svg { background: var(--vermelho); color: #fff; }
.ordem-card .co-rot { color: var(--verde-claro); }
.ordem-card .co-rot svg { background: var(--verde); color: #04130a; }
.pecas { display: flex; flex-wrap: wrap; gap: 10px; min-height: 190px; align-content: center; margin: 24px 0; }
.pecas span { padding: 9px 14px; border-radius: 10px; font-size: 14px; font-weight: 700; border: 1px solid var(--linha2); background: rgba(255,255,255,.04); transition: transform 1s cubic-bezier(.3,1.4,.4,1); }
.caos .pecas span { color: #f8b4b4; border-color: rgba(239,68,68,.3); }
.caos .pecas span:nth-child(odd) { transform: rotate(-9deg) translateY(8px); }
.caos .pecas span:nth-child(3n) { transform: rotate(12deg) translateY(-10px); }
.caos .pecas span:nth-child(4n) { transform: rotate(-4deg) translateX(14px); }
.ordem-card .pecas span { background: var(--verde); color: #04130a; border-color: var(--verde); }
.co-res { font-size: 17px; color: var(--suave); }
.co-res b { font: 700 26px var(--display); display: block; margin-bottom: 4px; }
.caos .co-res b { color: var(--vermelho); }
.ordem-card .co-res b { color: var(--verde-claro); }

/* ---------- PLATAFORMA: vídeo estilo VSL ---------- */
.titulo-plataforma { font-size: clamp(44px, 8.6vw, 116px); letter-spacing: -.045em; line-height: .95; font-weight: 800; }
.vsl { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--linha2); background: #000; box-shadow: 0 60px 140px -40px rgba(255,255,255,.22); aspect-ratio: 16 / 9; max-width: 960px; margin-inline: auto; }
.vsl video, .vsl iframe { width: 100%; height: 100%; display: block; object-fit: cover; background: #000; border: 0; cursor: pointer; }
.vsl-aviso { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; padding: 22px 30px; border-radius: 20px; border: 2px solid #fff; background: rgba(0,0,0,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; cursor: pointer; animation: pulsa 1.8s ease-in-out infinite; }
.vsl-aviso svg { width: 40px; height: 40px; }
.vsl-aviso b { font: 800 20px var(--display); }
.vsl-aviso span { font-size: 15px; color: #ddd; }
.vsl.com-som .vsl-aviso { display: none; }
.vsl-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(255,255,255,.12); }
.vsl-barra span { display: block; height: 100%; width: 0; background: var(--verde); box-shadow: 0 0 10px rgba(34,197,94,.8); }
@keyframes pulsa { 50% { box-shadow: 0 0 0 12px rgba(255,255,255,.08); } }

/* Módulos: um embaixo do outro; ao rolar, cada um para no topo e o próximo sobe por cima */
.modulos-cab { margin-top: 110px; margin-bottom: 28px; }
.modulos-cab .eyebrow { margin-bottom: 12px; }
.modulos-pilha { display: grid; gap: 22px; padding-bottom: 20px; }
.modulo { position: sticky; top: calc(96px + var(--i) * 14px); display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 30px; padding: 18px; border-radius: 26px; border: 1px solid var(--linha2); background: linear-gradient(160deg, #161616, #0b0b0b); box-shadow: 0 -20px 60px -20px rgba(0,0,0,.9); }
.modulo img, .modulo video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 16px; max-height: 360px; object-position: top; }
.mod-txt span { font: 700 12px var(--corpo); letter-spacing: .14em; text-transform: uppercase; color: var(--suave); }
.mod-txt h4 { font: 700 clamp(22px, 2.6vw, 32px)/1.2 var(--display); margin: 10px 0; letter-spacing: -.02em; }
.mod-txt p { color: var(--apagado); font-weight: 700; }

/* ---------- ESCRITÓRIO VIRTUAL ---------- */
.escritorio-sec { border-block: 1px solid var(--linha); }
.escritorio-tela { border-radius: 26px; overflow: hidden; border: 1px solid var(--linha2); background: #0b0b14; box-shadow: 0 50px 140px -40px rgba(255,255,255,.2); aspect-ratio: 16 / 9; max-width: 1000px; margin-inline: auto; }
.escritorio-tela video { width: 100%; height: 100%; display: block; object-fit: cover; }
.escritorio-pontos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 20px auto 0; max-width: 1000px; }
.esc-ponto { padding: 24px; border-radius: 20px; border: 1px solid var(--linha); background: var(--painel); }
.esc-ponto b { font: 700 19px var(--display); display: block; margin-bottom: 8px; color: #fff; }
.esc-ponto p { color: var(--suave); font-size: 15px; }

/* ---------- ALÉM ---------- */
.bento { display: grid; grid-template-columns: 1.1fr 1fr; grid-template-rows: auto auto; gap: 18px; }
.b-card { border-radius: var(--raio-g); border: 1px solid var(--linha); background: var(--painel); overflow: hidden; position: relative; }
.b-arsenal { grid-row: span 2; padding: 30px; display: flex; flex-direction: column; gap: 20px; }
.b-cab h3 { font-size: 26px; margin: 16px 0 8px; }
.b-cab p { color: var(--suave); }
.ars-topo { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--linha); background: #000; }
.ars-topo i { font-style: normal; color: var(--suave); }
.ars-cont { margin-left: auto; font: 700 13px var(--display); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--linha2); }
.interruptor { width: 46px; height: 26px; border-radius: 999px; border: 1px solid var(--linha2); background: #1a1a1a; cursor: pointer; position: relative; padding: 0; transition: background .3s; }
.interruptor span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #777; transition: transform .3s, background .3s; }
.interruptor[aria-pressed="true"] { background: var(--verde); box-shadow: 0 0 18px rgba(34,197,94,.5); }
.interruptor[aria-pressed="true"] span { transform: translateX(20px); background: #fff; }
.ars-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ars-lista button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--linha); background: rgba(255,255,255,.02); cursor: pointer; text-align: left; font-weight: 600; font-size: 15px; color: var(--suave); transition: all .3s; }
.ars-check { width: 22px; height: 22px; border-radius: 7px; border: 1px solid var(--linha2); display: grid; place-items: center; transition: all .3s; }
.ars-check svg { width: 14px; height: 14px; opacity: 0; transform: scale(.4); transition: all .3s; }
.ars-lista button[aria-pressed="true"] { color: #fff; border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.06); }
.ars-lista button[aria-pressed="true"] .ars-check { background: var(--verde); color: #04130a; border-color: var(--verde); }
.ars-lista button[aria-pressed="true"] .ars-check svg { opacity: 1; transform: none; }
.ars-msg { color: var(--apagado); font-size: 14px; text-align: center; min-height: 22px; transition: color .3s; }
.ars-msg.cheio { color: var(--verde-claro); }
.b-foto { min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; }
.b-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: .5; transition: opacity .5s, transform 1.2s; }
.b-foto:hover img { opacity: .7; transform: scale(1.04); }
.b-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,5,5,.1), rgba(5,5,5,.95) 75%); }
.b-txt { position: relative; z-index: 1; padding: 26px; }
.b-txt h3 { margin: 12px 0 6px; }
.b-txt p { color: var(--suave); font-size: 15px; }

/* ---------- VS ---------- */
.vs { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--raio-g); border: 1px solid var(--linha2); overflow: hidden; }
.vs-col { padding: 38px; }
.vs-sim { background: linear-gradient(160deg, rgba(34,197,94,.14), rgba(34,197,94,.01) 70%); }
.vs-nao { background: linear-gradient(160deg, rgba(239,68,68,.10), rgba(239,68,68,.01) 70%); border-left: 1px solid var(--linha); }
.vs-rot { display: flex; align-items: center; gap: 10px; font: 700 13px var(--corpo); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 22px; }
.vs-rot svg { width: 26px; height: 26px; padding: 5px; border-radius: 8px; }
.vs-sim .vs-rot { color: var(--verde-claro); }
.vs-sim .vs-rot svg { background: var(--verde); color: #04130a; }
.vs-nao .vs-rot { color: #fca5a5; }
.vs-nao .vs-rot svg { background: var(--vermelho); color: #fff; }
.vs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.vs li { font: 600 19px/1.35 var(--display); padding-bottom: 16px; border-bottom: 1px solid var(--linha); }
.vs li:last-child { border: 0; padding: 0; }
.vs-nao li { color: #b98b8b; text-decoration: line-through; text-decoration-color: rgba(239,68,68,.6); }

/* ---------- OBJEÇÕES: conversa ---------- */
.chat { max-width: 720px; margin-inline: auto; display: grid; gap: 22px; }
.msg-par { display: grid; gap: 10px; }
.msg-ela, .msg-eu p { max-width: 82%; padding: 13px 17px; border-radius: 20px; font-size: 16px; line-height: 1.45; opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .5s; }
.msg-ela { justify-self: end; background: #1d1d1d; border: 1px solid var(--linha2); border-bottom-right-radius: 6px; color: #eee; }
.msg-eu { display: flex; align-items: flex-end; gap: 10px; }
.msg-eu img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid rgba(255,255,255,.2); opacity: 0; transition: opacity .5s; }
.msg-eu p { background: linear-gradient(180deg, #ffffff, #e2e2e2); color: #0b0b0b; font-weight: 600; border-bottom-left-radius: 6px; box-shadow: 0 10px 30px -12px rgba(255,255,255,.3); }
.msg-par.lida .msg-ela { opacity: 1; transform: none; }
.msg-par.respondida .msg-eu p, .msg-par.respondida .msg-eu img { opacity: 1; transform: none; }
.digitando { display: inline-flex; gap: 4px; padding: 14px 16px; border-radius: 18px; background: #e2e2e2; }
.digitando i { width: 7px; height: 7px; border-radius: 50%; background: #555; animation: digita 1s infinite; }
.digitando i:nth-child(2) { animation-delay: .15s; } .digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes digita { 50% { opacity: .3; transform: translateY(-3px); } }

/* ---------- ESCOLHA ---------- */
.escolhas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.esc { padding: 36px; border-radius: var(--raio-g); border: 1px solid var(--linha); }
.esc-nao { border-color: rgba(239,68,68,.35); background: linear-gradient(160deg, rgba(239,68,68,.10), rgba(239,68,68,.01) 70%); }
.esc-sim { border-color: rgba(34,197,94,.5); background: linear-gradient(160deg, rgba(34,197,94,.14), rgba(34,197,94,.01) 70%); box-shadow: 0 40px 100px -40px rgba(34,197,94,.4); }
.esc-rot { display: flex; align-items: center; gap: 10px; font: 700 22px var(--display); margin-bottom: 22px; }
.esc-rot svg { width: 30px; height: 30px; padding: 6px; border-radius: 9px; }
.esc-nao .esc-rot { color: #fca5a5; }
.esc-nao .esc-rot svg { background: var(--vermelho); color: #fff; }
.esc-sim .esc-rot { color: var(--verde-claro); }
.esc-sim .esc-rot svg { background: var(--verde); color: #04130a; }
.esc ul { margin: 0; padding-left: 18px; display: grid; gap: 12px; }
.esc-nao li { color: #c9a3a3; }
.esc-sim li { color: #eee; }

/* ---------- GUIA (última etapa) ---------- */
.guia { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: center; }
.guia-foto { border-radius: 240px 240px 30px 30px; overflow: hidden; border: 1px solid var(--linha2); aspect-ratio: 4 / 5.4; box-shadow: 0 50px 120px -40px rgba(255,255,255,.28); position: relative; }
.guia-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.guia-dez { font: 600 22px/1.3 var(--display); margin-top: 18px; color: var(--suave); }
.guia-dez b { display: block; font-size: clamp(40px, 5vw, 60px); line-height: 1; letter-spacing: -.03em; color: var(--verde-claro); text-shadow: 0 0 40px rgba(34,197,94,.35); margin-bottom: 6px; }
.guia-cargo { color: var(--suave); font-size: 17px; margin: 16px 0 28px; }
.linha-tempo { list-style: none; margin: 0 0 30px; padding: 0 0 0 26px; position: relative; display: grid; gap: 14px; }
.linha-tempo::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, var(--linha2), #fff); }
.linha-tempo li { position: relative; color: var(--suave); }
.linha-tempo li::before { content: ""; position: absolute; left: -24px; top: 8px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid #fff; background: var(--bg); }
.linha-tempo li:last-child { color: #fff; font-weight: 700; }
.linha-tempo li:last-child::before { background: #fff; box-shadow: 0 0 12px #fff; }
.numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.numeros div { padding: 18px; border-radius: 16px; border: 1px solid var(--linha); background: var(--painel); }
.numeros b { font: 800 26px var(--display); display: block; white-space: nowrap; }
.numeros small { color: var(--suave); font-size: 13px; display: block; margin-top: 4px; }
.fita-fotos { display: grid; grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-inline: auto; gap: 14px; margin-top: 50px; }
.fita-fotos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 30%; border-radius: 18px; border: 1px solid var(--linha); }
.fita-fotos img:nth-child(even) { transform: translateY(26px); }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: start; }
.faq-lista details { border-bottom: 1px solid var(--linha); }
.faq-lista summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font: 600 18px var(--display); }
.faq-lista summary::-webkit-details-marker { display: none; }
.faq-lista summary svg { width: 22px; height: 22px; transition: transform .3s; color: var(--suave); }
.faq-lista details[open] summary svg { transform: rotate(45deg); color: #fff; }
.faq-lista p { color: var(--suave); padding: 0 40px 22px 0; }

/* ---------- FECHAMENTO E RODAPÉ ---------- */
.fecha { text-align: center; padding-block: 110px; position: relative; }
.fecha::before { content: ""; position: absolute; inset: 10% 15%; z-index: -1; background: radial-gradient(closest-side, rgba(255,255,255,.10), transparent); }
.fecha .eyebrow { justify-content: center; }
.rodape { border-top: 1px solid var(--linha); padding-block: 40px 120px; display: grid; gap: 14px; color: var(--apagado); font-size: 13px; }
.rodape img { height: 28px; width: auto; opacity: .8; }
.aviso { max-width: 760px; }

/* Botão flutuante: só depois do preço */
.cta-fixo { position: fixed; z-index: 60; right: 24px; bottom: 22px; transform: translateY(160%); opacity: 0; pointer-events: none; transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .3s; }
.cta-fixo.mostra { transform: none; opacity: 1; pointer-events: auto; }

/* ---------- POP-UP ---------- */
.popup { width: min(480px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--linha2); border-radius: 26px; background: linear-gradient(180deg, #151515, #090909); color: var(--texto); box-shadow: 0 40px 120px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.04); overflow: auto; }
.popup::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.popup[open] { animation: popupEntra .35s cubic-bezier(.2,.8,.2,1); }
@keyframes popupEntra { from { opacity: 0; transform: translateY(24px) scale(.97); } }
.popup-form { position: relative; padding: 34px 28px 26px; display: grid; gap: 14px; }
.popup-form .eyebrow { margin: 0; color: var(--verde-claro); }
.popup-form h2 { font-size: 26px; line-height: 1.15; }
.popup-preco { color: var(--suave); font-size: 15px; margin-bottom: 4px; }
.popup-preco b { color: #fff; }
.popup-fechar { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--linha2); background: rgba(255,255,255,.04); cursor: pointer; display: grid; place-items: center; }
.popup-fechar svg { width: 18px; height: 18px; }
.campo { display: grid; gap: 6px; }
.campo span { font-size: 13px; font-weight: 700; color: var(--suave); }
.campo input { width: 100%; padding: 15px 16px; border-radius: 13px; border: 1px solid var(--linha2); background: #000; color: #fff; font: 600 17px var(--corpo); outline: none; transition: border-color .2s, box-shadow .2s; }
.campo input::placeholder { color: #555; }
.campo input:focus { border-color: var(--verde); box-shadow: 0 0 0 4px rgba(34,197,94,.18); }
.campo .erro { display: none; color: #fca5a5; font-size: 12px; }
.campo.invalido input { border-color: var(--vermelho); }
.campo.invalido .erro { display: block; }
.popup-form .btn { width: 100%; margin-top: 6px; }
.popup-seguro { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--apagado); font-size: 13px; }
.popup-seguro svg { width: 15px; height: 15px; }

/* ---------- RESPONSIVO ---------- */
@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 110px; gap: 60px; }
  .hero-foto { max-width: 420px; margin-inline: auto; width: 100%; }
  .hero-video { max-width: 720px; margin-inline: auto; width: 100%; }
  .f1 { left: -6%; } .f2 { right: -6%; } .f3 { left: -4%; }
  .empresa, .guia, .faq { grid-template-columns: 1fr; }
  .empresa-foto { max-width: 460px; }
  .guia-foto { max-width: 440px; }
  .profs { grid-template-columns: 1fr 1fr; }
  .bento { grid-template-columns: 1fr 1fr; }
  .b-arsenal { grid-row: auto; grid-column: span 2; }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 32px); }
  .section { padding-block: 80px; }
  .cab { margin-bottom: 38px; }
  .sub { font-size: 16px; }
  .lead { font-size: 17px; }
  .ias-lista { gap: 9px; margin-top: 28px; }
  .ias-lista img { width: 40px; height: 40px; border-radius: 11px; }
  .grade3, .citacoes, .caos-ordem, .vs, .escolhas, .escritorio-pontos { grid-template-columns: 1fr; }
  .citacao { grid-template-columns: 120px 1fr; }
  .citacao figcaption { padding: 20px; }
  .citacao blockquote { font-size: 18px; }
  .tipos { grid-template-columns: 1fr; }
  .tipo { padding: 28px; }
  .empresa { gap: 30px; }
  .empresa-foto { aspect-ratio: 4 / 4.4; }
  .empresa-lead { font-size: 16px; }
  .ad-linha { grid-template-columns: 1.3fr .9fr .9fr; padding: 13px 14px; gap: 8px; }
  .ad-linha > span:first-child { font-size: 13px; }
  .ad-linha s { font-size: 15px; }
  .ad-linha b { font-size: 17px; }
  .profs { grid-template-columns: 1fr; gap: 10px; }
  .prof { padding: 18px; }
  .bento { grid-template-columns: 1fr; }
  .b-arsenal { grid-column: auto; }
  .vs-nao { border-left: 0; border-top: 1px solid var(--linha); }
  .vs-col, .esc { padding: 26px; }
  .vs li { font-size: 17px; }
  .numeros div { padding: 14px; }
  .numeros b { font-size: 20px; }
  .fita-fotos { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 36px; }
  .fita-fotos img { border-radius: 12px; }
  .fita-fotos img:nth-child(even) { transform: translateY(14px); }
  .modulos-cab { margin-top: 80px; }
  .modulo { top: calc(76px + var(--i) * 10px); grid-template-columns: 96px 1fr; gap: 16px; padding: 12px; border-radius: 20px; }
  .modulo img, .modulo video { border-radius: 12px; }
  .mod-txt h4 { font-size: 17px; margin: 6px 0; }
  .mod-txt span { font-size: 10px; }
  .mod-txt p { font-size: 13px; }
  .escritorio-tela { border-radius: 18px; }
  .vsl { border-radius: 16px; }
  .vsl-aviso { padding: 14px 18px; gap: 3px; }
  .vsl-aviso svg { width: 28px; height: 28px; }
  .vsl-aviso b { font-size: 16px; }
  .vsl-aviso span { font-size: 13px; }
  .msg-ela, .msg-eu p { max-width: 88%; font-size: 15px; }
  .msg-eu img { width: 34px; height: 34px; }
  .hero-video .flutua { display: none; }
  .flutua { padding: 10px 13px; }
  .f2 { min-width: 160px; } .f2 b { font-size: 19px; }
  .btn { padding: 16px 22px; }
  .btn-grande { padding: 19px 22px; font-size: 16px; width: 100%; }
  .cta-fixo { left: 16px; right: 16px; bottom: max(14px, env(safe-area-inset-bottom)); }
  .popup { width: 100%; max-width: none; margin: auto 0 0; border-radius: 24px 24px 0 0; max-height: 100dvh; }
  .popup[open] { animation-name: popupSobe; }
  @keyframes popupSobe { from { transform: translateY(100%); } }
  .popup-form { padding: 28px 20px max(20px, env(safe-area-inset-bottom)); gap: 12px; }
  .popup-form h2 { font-size: 22px; padding-right: 40px; }
  .campo input { font-size: 16px; padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .revela { opacity: 1; transform: none; }
}