/* PONTE — site. Efeitos do modelo (coluna emoldurada, matriz de pontos, texto em arco, faixas de pontos, luz na
   borda dos botões, cartões em grade, esfera, letreiros) com a identidade PONTE: quase-preto neutro, creme, âmbar
   só no que importa e o símbolo da ponte como fio condutor (rótulos das seções, travessia 01→04).
   Títulos em Syne; textos corridos em Inter, que lê melhor em tamanho pequeno. */
:root {
  --fora:#040405; --bg:#09090B; --card:#0F0F12; --card2:#151518; --card3:#1C1C21;
  --linha:rgba(255,255,255,.07); --linha2:rgba(255,255,255,.11); --linha3:rgba(255,255,255,.18);
  --txt:#F2EEE8; --txt2:#CBC5BD; --mut:#9D9891; --mut2:#85807A; --mut3:#5F5B56;
  --ambar:#C8860A; --ambar2:#E3A43A; --verde:#8DB596; --laranja:#E0703A; --azul:#8FA6C9;
  --raio:16px; --larg:1240px;
  --fonte:Syne, system-ui, sans-serif; --ui:Inter, system-ui, sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:72px; }
body { margin:0; background:var(--fora); color:var(--txt); font:16px/1.6 var(--fonte); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
h1, h2, h3, h4 { margin:0; font-weight:500; }
.cinza { color:var(--mut); }
img, svg, canvas { display:block; }

/* foco visível pra quem navega pelo teclado, e atalho pro conteúdo */
:focus-visible { outline:2px solid var(--ambar2); outline-offset:3px; border-radius:8px; }
.bt:focus-visible { border-radius:99px; }
.pular { position:absolute; left:16px; top:-64px; z-index:100; padding:10px 16px; border-radius:10px; background:var(--txt); color:#1B1B1B; font-weight:600; transition:top .2s; }
.pular:focus { top:12px; }

/* coluna emoldurada (duas linhas finas dos lados, como no modelo) */
.moldura { max-width:1398px; margin:0 auto; padding:0 8px; border-inline:1px solid rgba(255,255,255,.04); }
.pagina { position:relative; background:var(--bg); border-inline:1px solid var(--linha); min-height:100vh; }
main { animation:revelar .5s ease both; }
@keyframes revelar { from { opacity:0; filter:blur(4px); } to { opacity:1; filter:none; } }

/* símbolo da marca */
.simbolo .s-vao, .final-ics svg .s-vao { stroke:var(--mut); stroke-width:2.6; stroke-dasharray:.1 6.5; stroke-linecap:round; }
.simbolo .s-arco, .final-ics svg .s-arco { fill:none; stroke:var(--txt); stroke-width:5.2; stroke-linecap:round; }
.simbolo .s-ini, .final-ics svg .s-ini { fill:var(--bg); stroke:var(--txt); stroke-width:4.2; }
.simbolo .s-fim, .final-ics svg .s-fim { fill:var(--ambar); }

/* textos corridos em Inter */
.produto-txt p, .quatro p, .rec-lista li, .pl-c li, .pl-d, .pl-extra, .pg-lista details p,
.rod-marca p, .ef-grade > p, .num-grade span, .rod-cols a, .rod-cols span { font-family:var(--ui); letter-spacing:-.005em; }

/* rótulo das seções: o símbolo da ponte pequeno + o nome da seção */
.olho { display:inline-flex; align-items:center; gap:10px; margin-bottom:18px; font:600 11.5px/1 var(--fonte); letter-spacing:.16em; text-transform:uppercase; color:var(--txt2); }
.olho::before { content:""; width:28px; height:17px; flex:none; background:center / contain no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 56'%3E%3Cline x1='3' y1='37' x2='89' y2='37' stroke='%239D9891' stroke-width='3' stroke-dasharray='.1 7' stroke-linecap='round'/%3E%3Cpath d='M16 37Q46 9 76 37' fill='none' stroke='%23F2EEE8' stroke-width='5.5' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='37' r='6.5' fill='%2309090B' stroke='%23F2EEE8' stroke-width='4.5'/%3E%3Ccircle cx='76' cy='37' r='8.5' fill='%23C8860A'/%3E%3C/svg%3E"); }
.cab-centro { display:flex; flex-direction:column; align-items:center; text-align:center; }
.cab-centro .sec-tit { margin-bottom:0; }
.cab-centro .bt { margin-top:28px; }

/* ---------- botões ---------- */
.bt { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 18px; border-radius:99px; font:500 14px var(--fonte); cursor:pointer; white-space:nowrap; border:none; transition:transform .15s, background .15s, box-shadow .2s; }
.bt.peq { height:34px; padding:0 14px; font-size:13px; }
.bt i { font-style:normal; font-size:15px; line-height:1; color:var(--txt); }
.bt:active { transform:scale(.98); }
.bt.claro { background:var(--txt); color:#2B2A28; }
.bt.claro:hover { background:#fff; }
.bt.branco { background:#F7F4EF; color:#26252A; box-shadow:inset 0 0 0 1px #fff, inset 0 0 0 2px rgba(0,0,0,.22); }
.bt.branco:hover { background:#fff; box-shadow:inset 0 0 0 1px #fff, inset 0 0 0 2px rgba(0,0,0,.22), 0 0 28px rgba(255,255,255,.16); }
.bt.escuro { background:var(--card2); color:var(--txt); font-weight:600; box-shadow:inset 0 0 0 1px var(--linha2); }
.bt.escuro:hover { background:var(--card3); }
/* luz correndo pela borda (efeito "estrela" do modelo): a borda é o fundo de 1px; o miolo cobre o resto */
.bt.estrela { isolation:isolate; overflow:hidden; background:rgba(255,255,255,.14); color:var(--txt); }
.bt.estrela::before { content:""; position:absolute; inset:1px; border-radius:inherit; background:#0A0A0C; z-index:-1; transition:background .2s; }
.bt.estrela:hover::before { background:#141417; }
.bt.estrela .luz { position:absolute; top:0; left:0; width:110px; aspect-ratio:1; z-index:-2; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(250,248,244,.95), transparent 55%, transparent);
  offset-rotate:0deg; animation:luz-borda 3s linear infinite; }
@keyframes luz-borda { from { offset-distance:0%; } to { offset-distance:100%; } }

/* ---------- topo ---------- */
.topo { position:sticky; top:0; z-index:50; height:64px; margin-bottom:-64px; padding:0 24px; display:flex; align-items:center; gap:28px;
  border-bottom:1px solid var(--linha); transition:background .25s, backdrop-filter .25s; }
.topo.rolou { background:rgba(9,9,11,.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.logo { display:flex; align-items:center; gap:10px; font-weight:700; font-size:19px; letter-spacing:.08em; }
.logo .simbolo { width:38px; height:23px; }
.menu { display:flex; gap:30px; margin:0 auto; font-size:14px; color:var(--txt2); }
.menu a { padding:8px 0; transition:color .15s; } .menu a:hover { color:var(--txt); }
.topo-ac { display:flex; gap:10px; }
.menu-bt { display:none; margin-left:auto; width:40px; height:40px; border:1px solid var(--linha2); border-radius:10px; background:none; cursor:pointer; flex-direction:column; justify-content:center; gap:5px; padding:0 11px; }
.menu-bt span { height:1.5px; background:var(--txt); display:block; }

/* ---------- hero ---------- */
.hero { position:relative; min-height:max(760px, 100vh); display:flex; flex-direction:column; align-items:center; justify-content:flex-end; overflow:hidden; padding:150px 24px max(200px, 26vh); }
.hero-luz { position:absolute; inset:0 0 auto; height:420px; pointer-events:none;
  background:linear-gradient(#202024 0%, #131316 42%, var(--bg) 100%);
  -webkit-mask-image:radial-gradient(130% 100% at 50% 0%, #000 0%, #000 42%, rgba(0,0,0,.55) 62%, transparent 78%);
  mask-image:radial-gradient(130% 100% at 50% 0%, #000 0%, #000 42%, rgba(0,0,0,.55) 62%, transparent 78%); }
.hero-luz i { position:absolute; left:50%; transform:translateX(-50%); }
.hero-luz .g1 { top:-40px; width:160%; height:340px; background:radial-gradient(85% 90% at 50% 0%, rgba(255,255,255,.12) 0%, rgba(163,163,163,.07) 48%, transparent 76%); }
.hero-luz .g2 { top:180px; width:587px; height:298px; background:radial-gradient(rgba(255,255,255,.045) 0%, transparent 70%); }
.hero-luz .g3 { top:260px; width:1826px; height:294px; background:radial-gradient(rgba(163,163,163,.03) 0%, transparent 65%); }
.hero-matriz { position:absolute; top:0; left:0; width:100%; height:440px; pointer-events:none; }
.hero-chao { position:absolute; left:-40%; right:-40%; bottom:0; height:120%; transform:perspective(520px) rotateX(66deg); transform-origin:bottom; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px); background-size:110px 110px;
  -webkit-mask-image:linear-gradient(to top, #000 5%, transparent 85%); mask-image:linear-gradient(to top, #000 5%, transparent 85%); }
.hero-in { position:relative; text-align:center; width:100%; max-width:980px; }
.hero h1 { font-size:clamp(34px, 4.1vw, 56px); line-height:1.04; font-weight:400; letter-spacing:-.016em; }
.hero-sub { margin:22px auto 0; max-width:640px; color:var(--mut); font-size:clamp(15.5px, 1.3vw, 17px); }
.hero-ac { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px; }

/* texto em arco: roda de letras girando; as palavras passam por cima da ponte da marca (anel → ponto âmbar) */
.arco { position:relative; width:400px; height:78px; margin:0 0 22px calc(50% - 200px); }
.arco-ponte { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.arco-ponte .a-vao { stroke:var(--mut3); stroke-width:1.6; stroke-dasharray:.1 6; stroke-linecap:round; opacity:.8; }
.arco-ponte .a-arco { fill:none; stroke:url(#arco-g); stroke-width:1.4; stroke-linecap:round; }
.arco-ponte .a-ini { fill:var(--bg); stroke:rgba(242,238,232,.6); stroke-width:1.5; }
.arco-ponte .a-fim { fill:var(--ambar); }
.arco-janela { position:absolute; left:0; right:0; top:0; height:64px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 9%, #000 32%, #000 68%, transparent 89%);
  mask-image:linear-gradient(90deg, transparent 9%, #000 32%, #000 68%, transparent 89%); }
.arco-roda { position:absolute; left:50%; top:8px; width:900px; height:900px; margin-left:-450px; border-radius:50%; animation:girar 38s linear infinite; }
.arco-roda span { position:absolute; left:450px; top:0; width:24px; margin-left:-12px; text-align:center; transform-origin:12px 450px; font:500 15px/1 var(--fonte); color:var(--txt2); white-space:pre; }
@keyframes girar { to { transform:rotate(360deg); } }

/* ---------- vitrine: o app sai do hero inclinado e endireita conforme rola ---------- */
.vitrine { position:relative; z-index:2; margin-top:-130px; padding:0 24px 80px; }
.vitrine::before { content:""; position:absolute; left:50%; top:4%; width:78%; height:70%; transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.07), transparent 68%); filter:blur(24px); }
.vitrine-palco { position:relative; max-width:1180px; margin:0 auto; perspective:1700px; }
.vitrine .app-moldura { transform-origin:50% 0; transform:rotateX(var(--inclina, 0deg)) scale(var(--escala, 1)); will-change:transform;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 50px 140px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.03); }
.vitrine .quatro.mini { max-width:1180px; margin:60px auto 0; }

/* janela de app nos mockups: deixa claro que é uma tela do produto, não um botão do site */
.janela { display:flex; align-items:center; gap:7px; padding:11px 16px; border-bottom:1px solid var(--linha); background:rgba(255,255,255,.02); font:500 12px var(--ui); color:var(--mut); }
.janela i { width:9px; height:9px; border-radius:50%; background:var(--card3); box-shadow:inset 0 0 0 1px var(--linha2); }
.janela span { margin-left:10px; }
.mock-moldura, .app-moldura, .mock-menu, .ef-mock { cursor:default; -webkit-user-select:none; user-select:none; }

/* ---------- seções ---------- */
.sec { max-width:var(--larg); margin:0 auto; padding:88px 24px; }
.sec-tit { font-size:clamp(28px, 2.7vw, 36px); line-height:1.15; font-weight:500; letter-spacing:-.025em; margin-bottom:52px; }
.faixa { width:100%; height:48px; border-block:1px solid var(--linha); background:#0B0B0D; }

/* produto */
.produto { max-width:none; padding:100px 0 0; }
.duas { max-width:var(--larg); margin:0 auto; padding:0 24px; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:70px; align-items:center; }
.produto-txt h2 { font-size:clamp(28px, 2.7vw, 36px); line-height:1.15; font-weight:600; letter-spacing:-.02em; }
.produto-txt p { color:var(--mut); margin:18px 0 28px; max-width:500px; font-size:16px; line-height:1.65; }
.mock-menu { position:relative; height:400px; display:flex; align-items:center; justify-content:center; }
.etq-fundo { position:absolute; inset:0; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; gap:16px 34px; color:var(--mut3); font:500 12.5px var(--ui);
  -webkit-mask-image:radial-gradient(ellipse 60% 50% at 50% 50%, transparent 30%, #000 70%); mask-image:radial-gradient(ellipse 60% 50% at 50% 50%, transparent 30%, #000 70%); }
.mm-card { position:relative; width:270px; padding:10px; background:var(--card); border:1px solid var(--linha2); border-radius:14px; font:500 13px var(--ui);
  box-shadow:0 30px 80px rgba(0,0,0,.55); -webkit-mask-image:linear-gradient(#000 68%, transparent); mask-image:linear-gradient(#000 68%, transparent); }
.mm-it { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px; color:var(--txt2); }
.mm-it.on { background:var(--card3); color:var(--txt); }
.mm-it b { width:18px; text-align:center; color:var(--mut); font-weight:400; } .mm-it .ic-w { color:var(--ambar2); } .mm-it .ic-r { color:var(--laranja); }
.mm-it em { margin-left:auto; font-style:normal; font-size:12px; color:var(--mut); } .mm-it em.q { background:var(--ambar); color:#0B0D12; border-radius:99px; padding:0 7px; font-weight:700; }
.mm-card hr { border:none; border-top:1px solid var(--linha); margin:8px 4px; }
.mm-ac { padding:7px 10px; color:var(--txt2); font-size:12.5px; } .mm-ac.apag { color:var(--mut3); }

/* 01–04 */
.quatro { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); }
.quatro > div { position:relative; }
.quatro small, .quatro h3, .quatro p { position:relative; }
.quatro small { color:var(--mut2); font-size:12px; letter-spacing:.06em; } .quatro h3 { font-size:17.5px; font-weight:600; margin:12px 0 10px; letter-spacing:-.01em; } .quatro p { color:var(--mut); font-size:14.5px; margin:0; line-height:1.6; }
/* passos como uma travessia: linha do anel (01) até o ponto âmbar (04) e uma luz atravessando */
.quatro.passos { position:relative; margin-top:90px; }
.quatro.passos::before { content:""; position:absolute; top:-1px; left:0; right:0; height:1px; background:linear-gradient(90deg, rgba(242,238,232,.28), rgba(242,238,232,.12) 62%, var(--ambar)); }
.quatro.passos::after { content:""; position:absolute; top:-2px; left:0; width:160px; height:3px; border-radius:3px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,236,200,.95), transparent); animation:atravessar 7s ease-in-out infinite; }
@keyframes atravessar { 0% { left:0; opacity:0; } 12% { opacity:1; } 80% { opacity:1; } 100% { left:calc(100% - 160px); opacity:0; } }
.quatro.passos > div { padding:38px 24px 44px; border-right:1px solid var(--linha); } .quatro.passos > div:last-child { border-right:none; }
.quatro.passos > div::before { content:""; position:absolute; z-index:1; top:-5px; left:24px; width:9px; height:9px; border-radius:50%; background:var(--bg); box-shadow:inset 0 0 0 1.5px rgba(242,238,232,.65); }
.quatro.passos > div:last-child::before { background:var(--ambar); box-shadow:0 0 14px rgba(227,164,58,.65); }
.quatro.passos > div:last-child small { color:var(--ambar2); }
.celula-pontos { position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom right, rgba(0,0,0,.03), rgba(0,0,0,.14) 50%, rgba(0,0,0,.05));
  mask-image:linear-gradient(to bottom right, rgba(0,0,0,.03), rgba(0,0,0,.14) 50%, rgba(0,0,0,.05)); }
/* frases curtas logo abaixo do app */
.quatro.mini { gap:0 28px; }
.quatro.mini h3 { font-size:15px; display:inline; margin:0 5px 0 0; } .quatro.mini h3 i { font-style:normal; color:var(--ambar2); margin-right:7px; }
.quatro.mini p { display:inline; font-size:14.5px; }

/* recursos (abas laterais) */
.abas { display:grid; grid-template-columns:200px minmax(0, 1fr); gap:40px; }
.abas-nav { position:sticky; top:110px; align-self:start; display:flex; flex-direction:column; gap:8px; font-size:14px; color:var(--mut); }
.abas-marca { color:var(--txt2); font-weight:600; margin-bottom:8px; }
.abas-nav a { position:relative; padding:4px 0 4px 14px; transition:color .15s; }
.abas-nav a::before { content:""; position:absolute; left:0; top:50%; width:5px; height:5px; margin-top:-2.5px; border-radius:50%; background:var(--mut3); transition:background .2s, box-shadow .2s; }
.abas-nav a:hover, .abas-nav a.on { color:var(--txt); }
.abas-nav a.on::before { background:var(--ambar); box-shadow:0 0 10px rgba(227,164,58,.6); }
.abas-corpo { display:grid; gap:120px; }
.recurso { display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:56px; align-items:center; scroll-margin-top:110px; }
.rec-txt small { color:var(--mut2); font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; }
.rec-frase { font-size:20px; line-height:1.45; margin:12px 0 30px; color:var(--mut); } .rec-frase b { color:var(--txt); font-weight:600; }
.rec-lista { list-style:none; margin:0; padding:0; }
.rec-lista li { display:flex; align-items:center; gap:12px; padding:13px 0; border-top:1px solid var(--linha); color:var(--txt2); font-size:15px; }
.rec-lista li:first-child { border-top:none; }
.rec-lista i { font-style:normal; width:20px; text-align:center; color:var(--mut); }
.mock-moldura { --pad:30px; position:relative; padding:0 var(--pad) var(--pad); background:var(--card); border:1px solid var(--linha); border-radius:20px; font-family:var(--ui); min-height:350px; display:flex; flex-direction:column; gap:14px; overflow:hidden; }
.mock-moldura > .janela { margin:0 calc(var(--pad) * -1) 8px; align-self:stretch; }
.mock-moldura > .janela + * { margin-top:auto; } .mock-moldura > :last-child { margin-bottom:auto; }
.mk-card { background:var(--card2); border:1px solid var(--linha2); border-radius:14px; padding:16px; display:grid; gap:12px; }
.mk-l1 { display:flex; align-items:center; gap:10px; } .mk-l1 b { font-size:14.5px; display:block; } .mk-l1 small { color:var(--mut); font-size:12.5px; }
.av { width:34px; height:34px; border-radius:50%; background:var(--card3); display:grid; place-items:center; font-size:12px; font-weight:600; color:var(--txt2); flex:none; }
.tag-n { margin-left:auto; font-size:11.5px; color:#1b1b1b; background:var(--txt); border-radius:99px; padding:3px 9px; font-weight:600; }
.mk-msg { background:var(--bg); border:1px solid var(--linha); border-radius:10px; padding:12px; font-size:13.5px; line-height:1.55; color:var(--txt2); }
.mk-msg small { display:block; color:var(--ambar2); font-size:11.5px; margin-bottom:6px; }
.mk-bts { display:flex; gap:8px; flex-wrap:wrap; } .mk-bt { font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:8px; border:1px solid var(--linha2); color:var(--txt2); }
.mk-bt.pri { background:var(--ambar); border-color:var(--ambar); color:#16110A; }
.mk-rod { display:flex; justify-content:space-between; font-size:12px; color:var(--mut); } .mk-rod .ok { background:var(--verde); color:#0B0D12; border-radius:99px; padding:1px 9px; font-weight:700; }
.mk-trans { background:var(--card2); border:1px solid var(--linha2); border-radius:12px; padding:14px; font-size:13.5px; color:var(--txt2); font-style:italic; }
.mk-trans small { display:block; font-style:normal; color:var(--mut); font-size:11.5px; margin-bottom:6px; }
.mk-passos { display:grid; gap:2px; padding-left:6px; }
.mk-passos .p { display:grid; grid-template-columns:16px 1fr auto; align-items:center; gap:10px; padding:8px 4px; font-size:13px; color:var(--mut); border-left:2px solid var(--linha2); margin-left:6px; padding-left:12px; }
.mk-passos .p i { width:10px; height:10px; border-radius:50%; border:2px solid var(--mut3); margin-left:-19px; background:var(--card); }
.mk-passos .p.feito i { background:var(--txt2); border-color:var(--txt2); } .mk-passos .p.feito b { color:var(--txt2); font-weight:500; }
.mk-passos .p.atual i { background:var(--ambar); border-color:var(--ambar); box-shadow:0 0 0 4px rgba(200,134,10,.2); } .mk-passos .p.atual b { color:var(--txt); }
.mk-passos .p.atual span { color:var(--ambar2); font-weight:600; } .mk-passos .p b { font-weight:500; }
.mock-moldura.pilha { min-height:390px; align-items:center; gap:30px; }
.mk-notis { width:min(360px, 100%); }
.mk-noti { display:grid; grid-template-columns:1fr auto; gap:2px 12px; padding:12px 14px; background:var(--card2); border:1px solid var(--linha2); border-radius:12px; box-shadow:0 18px 40px rgba(0,0,0,.4); }
.mk-noti b { font-size:12px; color:var(--verde); } .mk-noti span { grid-column:1; font-size:13.5px; color:var(--txt); } .mk-noti small { grid-column:2; grid-row:1; color:var(--mut); font-size:11.5px; text-align:right; }
.mk-noti em { grid-column:2; grid-row:2; font-style:normal; font-size:11.5px; font-weight:700; color:#0B0D12; background:var(--ambar); border-radius:99px; padding:2px 9px; align-self:center; }
.mk-noti.n1 { transform:rotate(-4deg) translateX(-22px); opacity:.6; } .mk-noti.n2 { transform:rotate(-2deg) translateX(-8px); opacity:.82; margin-top:-26px; } .mk-noti.n3 { margin-top:-26px; position:relative; }
/* fileira de canais com o feixe de luz passando (como no modelo) */
.mk-canais { position:relative; display:flex; gap:22px; align-items:center; padding:8px 0; }
.mk-canais span { width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.06); display:grid; place-items:center; animation:pulsar 2.6s ease-in-out infinite; }
.mk-canais span:nth-child(3) { animation-delay:.3s; } .mk-canais span:nth-child(4) { animation-delay:.6s; } .mk-canais span:nth-child(5) { animation-delay:.9s; } .mk-canais span:nth-child(6) { animation-delay:1.2s; }
.mk-canais span.on { width:52px; height:52px; background:rgba(255,255,255,.1); }
.mk-canais svg { width:19px; height:19px; fill:none; stroke:var(--txt2); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.mk-canais span.on svg { stroke:var(--ambar2); }
.mk-canais .feixe { position:absolute; top:-40px; bottom:-40px; left:50%; width:2px; margin-left:-1px;
  background:linear-gradient(to bottom, transparent 0%, rgba(161,161,170,.55) 18%, rgba(250,250,250,.95) 50%, rgba(161,161,170,.55) 82%, transparent 100%); }
@keyframes pulsar { 0%, 100% { transform:scale(1); } 50% { transform:scale(1.06); } }
.mk-alerta { display:flex; align-items:center; gap:12px; padding:14px; border-radius:12px; background:var(--card2); border:1px solid rgba(200,134,10,.45); }
.mk-alerta > span { font-size:20px; } .mk-alerta b { font-size:13.5px; display:block; } .mk-alerta small { color:var(--mut); font-size:12px; }
.mk-alerta em { margin-left:auto; font-style:normal; font-size:12px; font-weight:700; padding:6px 10px; border-radius:99px; background:var(--verde); color:#0B0D12; white-space:nowrap; }
.mk-agenda { display:grid; gap:2px; } .mk-agenda div { display:grid; grid-template-columns:110px 1fr auto; gap:10px; align-items:center; padding:10px 6px; border-top:1px solid var(--linha); font-size:13px; }
.mk-agenda b { color:var(--txt); font-weight:600; } .mk-agenda span { color:var(--txt2); }
.etq { font-style:normal; font-size:11.5px; color:var(--txt2); border:1px solid var(--linha2); border-radius:99px; padding:2px 9px; }

/* app inteiro (na vitrine) */
.app-moldura { display:grid; grid-template-columns:200px minmax(0, 1fr); background:var(--card); border:1px solid var(--linha2); border-radius:20px; overflow:hidden; font-family:var(--ui); }
.app-moldura > .janela { grid-column:1 / -1; }
.ap-lado { background:#0B0B0E; border-right:1px solid var(--linha); padding:14px 10px; display:flex; flex-direction:column; gap:2px; }
.ap-conta { display:flex; align-items:center; gap:9px; padding:4px 6px 14px; border-bottom:1px solid var(--linha); margin-bottom:8px; }
.ap-conta > span { width:30px; height:30px; border-radius:8px; background:rgba(200,134,10,.15); color:var(--ambar2); display:grid; place-items:center; font-size:12px; font-weight:700; }
.ap-conta b { font-size:13px; display:block; } .ap-conta small { font-size:11px; color:var(--mut); }
.ap-it { display:flex; align-items:center; padding:7px 10px; border-radius:8px; font-size:13px; color:var(--txt2); } .ap-it.on { background:var(--card3); color:var(--txt); }
.ap-it em { margin-left:auto; font-style:normal; font-size:11px; color:var(--mut); } .ap-it em.q { background:var(--ambar); color:#0B0D12; border-radius:99px; padding:0 6px; font-weight:700; }
.ap-grupo { color:var(--mut); font-size:11px; padding:12px 10px 4px; }
.ap-corpo { padding:18px 20px 22px; min-width:0; }
.ap-topo { display:flex; align-items:baseline; gap:12px; margin-bottom:16px; } .ap-topo b { font-size:17px; } .ap-topo span { color:var(--mut); font-size:12.5px; }
.ap-cols { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; }
.ap-col h4 { display:flex; align-items:center; gap:7px; font:600 13px var(--ui); margin:0 0 9px; } .ap-col h4 i { width:8px; height:8px; border-radius:50%; } .ap-col h4 em { font-style:normal; color:var(--mut); font-weight:500; }
.ap-c { background:var(--card2); border:1px solid var(--linha); border-radius:10px; padding:10px 11px; margin-bottom:8px; display:grid; gap:3px; }
.ap-c b { font-size:13px; } .ap-c small { color:var(--mut); font-size:11.5px; } .ap-c > span { font-size:11.5px; color:var(--txt2); margin-top:3px; }
.ap-c .lj { color:var(--laranja); } .ap-c .am { color:var(--ambar2); }
.rg { display:flex; gap:3px; } .rg i { flex:1; height:4px; border-radius:2px; background:var(--card3); } .rg i.f { background:#5A5D68; } .rg i.a { background:var(--ambar); }

/* eficiência: cartões com grade de pontos e linhas (20px), texto sobre o degradê de baixo */
.tres { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; }
.ef-card { border:1px solid var(--linha2); border-radius:var(--raio); padding:1px; background:#0B0B0D; transition:border-color .25s, transform .25s; }
.ef-card:hover { border-color:var(--linha3); transform:translateY(-3px); }
.ef-grade { position:relative; height:420px; border-radius:15px; overflow:hidden;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.2) 1px, transparent 1.4px), linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:20px 20px; }
.ef-grade::after { content:""; position:absolute; inset:auto 0 0; height:42%; background:linear-gradient(to top, #09090B 0%, rgba(9,9,11,.85) 50%, transparent 100%); pointer-events:none; }
.ef-mock { position:absolute; inset:0 0 26% 0; display:flex; align-items:center; justify-content:center; gap:14px; padding:20px; font-family:var(--ui); }
.ef-grade > p { position:absolute; z-index:1; left:0; right:0; bottom:0; margin:0; padding:22px 24px 24px; color:var(--mut); font-size:15.5px; line-height:1.55; }
.ef-grade > p b { color:var(--txt); font-weight:600; }
.ef-noti { background:var(--card2); border:1px solid var(--linha2); border-radius:14px; padding:14px 18px; display:grid; gap:3px; min-width:210px; box-shadow:0 18px 40px rgba(0,0,0,.45); }
.ef-noti small { color:var(--ambar2); font-weight:700; font-size:12px; } .ef-noti b { font-size:15px; } .ef-noti span { color:var(--mut); font-size:13px; }
.ef-linhas { display:grid; gap:7px; justify-items:end; }
.ef-linhas i { display:block; height:2px; border-radius:2px; background:var(--txt2); width:44px; } .ef-linhas i:first-child { width:22px; opacity:.5; } .ef-linhas i:nth-child(3) { width:52px; }
.ef-etqs { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; max-width:280px; }
.ef-etqs span { font-size:12.5px; font-weight:600; padding:5px 12px; border-radius:99px; color:var(--txt); background:color-mix(in srgb, var(--c) 18%, #0d0d0f); border:1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.ef-tab { width:100%; max-width:290px; background:var(--card2); border:1px solid var(--linha2); border-radius:14px; padding:8px 16px; box-shadow:0 18px 40px rgba(0,0,0,.45); }
.ef-tab div { display:flex; justify-content:space-between; padding:9px 0; font-size:13px; color:var(--txt2); border-top:1px solid var(--linha); } .ef-tab div:first-child { border-top:none; }
.ef-tab b { color:var(--ambar2); }

/* números sobre a esfera (vidro fosco na base da esfera) */
.numeros { padding-bottom:40px; }
.esfera-area { position:relative; height:640px; overflow:hidden;
  touch-action:pan-y; cursor:grab; -webkit-user-select:none; user-select:none; }
.esfera-area.arrastando { cursor:grabbing; }
/* a luz de trás da esfera (cinza, vinda de baixo) e um leve escurecer no topo, como no modelo */
.esfera-area::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 88% 100% at 50% 100%, rgba(255,255,255,.3) 0%, rgba(255,255,255,.13) 40%, transparent 70%); }
.esfera-area::after { content:""; position:absolute; inset:0; background:linear-gradient(var(--bg), transparent 16%); pointer-events:none; }
.esfera { position:relative; z-index:1; width:100%; height:100%; }
/* fundo da esfera: arcos da ponte em camadas que se desfazem nas bordas, o vão pontilhado e uma luz atravessando */
.esfera-fundo { position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 100% 100% at 50% 90%, #000 45%, transparent 85%); mask-image:radial-gradient(ellipse 100% 100% at 50% 90%, #000 45%, transparent 85%); }
.ef-arcos path { stroke:rgba(242,238,232,.14); stroke-width:1; vector-effect:non-scaling-stroke; }
.ef-arcos path:nth-child(2), .ef-arcos path:nth-child(4) { stroke-dasharray:2 7; stroke:rgba(242,238,232,.2); }
.ef-vao { stroke:rgba(242,238,232,.3); stroke-width:1.2; stroke-dasharray:2 6; vector-effect:non-scaling-stroke; }
.ef-luz { stroke:rgba(227,164,58,.7); stroke-width:1.6; stroke-linecap:round; stroke-dasharray:70 1000; stroke-dashoffset:1070; vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 6px rgba(227,164,58,.6)); animation:ef-atravessa 9s ease-in-out infinite; }
@keyframes ef-atravessa { 0% { stroke-dashoffset:1070; opacity:0; } 10% { opacity:1; } 80% { opacity:1; } 92%, 100% { stroke-dashoffset:0; opacity:0; } }
.num-grade { position:absolute; z-index:3; left:50%; bottom:30px; transform:translateX(-50%); width:min(1100px, calc(100% - 48px)); display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  background:rgba(12,12,15,.58); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--linha2); border-radius:18px; cursor:auto; overflow:hidden; }
.num-grade div { padding:22px 24px; border-right:1px solid var(--linha); } .num-grade div:last-child { border-right:none; }
.num-grade b { display:block; font-size:clamp(24px, 2.2vw, 30px); font-weight:500; letter-spacing:-.02em; margin-bottom:2px; } .num-grade span { color:var(--mut); font-size:13.5px; }
/* os números como as quatro etapas da travessia: linha do anel (01) ao ponto âmbar (04), uma luz atravessando
   e cada etapa acendendo quando a luz passa por ela (8 s por volta; a luz cruza nos primeiros 90%) */
.travessia::before { content:""; position:absolute; top:27px; left:28px; right:28px; height:1px; background:linear-gradient(90deg, rgba(242,238,232,.3), rgba(242,238,232,.12) 62%, var(--ambar)); }
.travessia::after { content:""; position:absolute; top:26px; left:28px; right:28px; height:3px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,236,200,.95), transparent) no-repeat 0 0 / 140px 100%; animation:travessia 8s ease-in-out infinite; }
@keyframes travessia { 0% { background-position:0 0; opacity:0; } 8% { opacity:1; } 84% { opacity:1; } 90%, 100% { background-position:100% 0; opacity:0; } }
.travessia > div { position:relative; padding-top:50px; }
.travessia > div::before { content:""; position:absolute; z-index:1; top:23px; left:24px; width:9px; height:9px; border-radius:50%; background:#0d0d10; box-shadow:inset 0 0 0 1.5px rgba(242,238,232,.65); animation:etapa 8s ease-in-out infinite; }
.travessia > div:last-child::before { background:var(--ambar); box-shadow:0 0 14px rgba(227,164,58,.65); animation-name:etapa-fim; }
.travessia small { display:block; color:var(--mut2); font-size:12px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px; }
.travessia > div:last-child small { color:var(--ambar2); }
.travessia b { animation:etapa-num 8s ease-in-out infinite; font-size:clamp(22px, 1.9vw, 27px); line-height:1.15; margin-bottom:8px; }
.travessia > div:nth-child(2)::before, .travessia > div:nth-child(2) b { animation-delay:1.8s; }
.travessia > div:nth-child(3)::before, .travessia > div:nth-child(3) b { animation-delay:3.6s; }
.travessia > div:nth-child(4)::before, .travessia > div:nth-child(4) b { animation-delay:5.4s; }
@keyframes etapa { 0%, 6%, 24%, 100% { box-shadow:inset 0 0 0 1.5px rgba(242,238,232,.65); } 13% { box-shadow:inset 0 0 0 1.5px var(--ambar2), 0 0 12px rgba(227,164,58,.55); } }
@keyframes etapa-fim { 0%, 6%, 24%, 100% { box-shadow:0 0 14px rgba(227,164,58,.65); transform:none; } 13% { box-shadow:0 0 22px rgba(227,164,58,.95); transform:scale(1.35); } }
@keyframes etapa-num { 0%, 6%, 26%, 100% { color:var(--txt); } 13% { color:#FFF4E2; text-shadow:0 0 18px rgba(227,164,58,.35); } }

/* falas: letreiro de cartões (frases típicas de lead, não depoimentos) */
.falas { padding-bottom:48px; }
.trilho-mask { overflow:hidden; padding:0 0 96px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.trilho { display:flex; gap:20px; width:max-content; padding:0 8px; animation:rolar 48s linear infinite; }
.trilho:hover, .trilho:focus-within { animation-play-state:paused; }
@keyframes rolar { to { transform:translateX(-50%); } }
.fala { flex:none; width:400px; margin:0; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--linha2); border-radius:14px; overflow:hidden; transition:border-color .25s; }
.fala:hover { border-color:var(--linha3); }
.fala blockquote { margin:0; padding:26px 24px 30px; font-size:20px; line-height:1.4; color:var(--txt); flex:1; min-height:140px; letter-spacing:-.01em; }
.fala figcaption { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 20px; border-top:1px solid var(--linha); font:12.5px var(--ui); color:var(--mut); }
.fala figcaption span { display:flex; align-items:center; gap:10px; white-space:nowrap; }
.fala figcaption span i { font-style:normal; font-weight:600; font-size:11.5px; color:var(--txt2); background:var(--card3); border:1px solid var(--linha2); border-radius:99px; padding:2px 9px; }
.fala figcaption em { font-style:normal; color:var(--txt2); display:flex; align-items:center; gap:7px; white-space:nowrap; }
.fala figcaption em::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--ambar); flex:none; }


/* planos */
.pl-topo { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:44px; } .pl-topo .sec-tit { margin-bottom:0; }
.pl-nota { display:inline-flex; align-items:center; gap:8px; font:500 13px var(--ui); color:var(--mut); padding-bottom:6px; }
.pl-nota::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--ambar); }
.pl-grade { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); border:1px solid var(--linha); border-radius:var(--raio); }
.pl-c { position:relative; padding:28px 24px 32px; border-right:1px solid var(--linha); display:flex; flex-direction:column; } .pl-c:last-child { border-right:none; }
.pl-c.dest { background:var(--card2); }
.pl-c.dest::before { content:""; position:absolute; top:-1px; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--ambar2), transparent); }
.pl-c h3 { font-size:17px; font-weight:600; } .pl-d { color:var(--mut); font-size:14px; margin:4px 0 22px; }
.pl-p { display:flex; align-items:baseline; gap:6px; margin-bottom:22px; } .pl-p b { font-size:34px; font-weight:500; letter-spacing:-.02em; } .pl-p span { color:var(--mut); font-size:14px; }
.pl-bt { width:100%; height:40px; margin-bottom:24px; background:var(--card3); color:var(--txt); font-weight:600; font-size:13.5px; }
.pl-bt:hover { background:#25252B; }
.pl-bt.estrela { background:rgba(255,255,255,.14); }
.pl-c ul { list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.pl-c li { font-size:14px; color:var(--txt2); padding-left:24px; position:relative; line-height:1.45; }
.pl-c li::before { content:"✓"; position:absolute; left:0; color:var(--ambar2); opacity:.85; font-size:12.5px; }
.pl-extra { margin:22px 0 0; color:var(--mut); font-size:14.5px; } .pl-extra b { color:var(--txt2); font-weight:600; }

/* perguntas */
.perguntas { display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:60px; align-items:start; }
.pg-esq { position:sticky; top:110px; }
.pg-esq h2 { font-size:clamp(28px, 2.7vw, 36px); line-height:1.15; font-weight:500; letter-spacing:-.025em; }
.pg-lista details { border-top:1px solid var(--linha); } .pg-lista details:last-child { border-bottom:1px solid var(--linha); }
.pg-lista summary { list-style:none; cursor:pointer; padding:22px 52px 22px 0; font-size:16px; font-weight:600; position:relative; transition:color .15s; }
.pg-lista summary:hover { color:#fff; }
.pg-lista summary::-webkit-details-marker { display:none; }
.pg-lista summary::after { content:"+"; position:absolute; right:0; top:50%; width:30px; height:30px; margin-top:-15px; border-radius:50%; box-shadow:inset 0 0 0 1px var(--linha2);
  display:grid; place-items:center; font:300 20px/1 var(--ui); color:var(--txt2); transition:transform .25s, background .2s; }
.pg-lista details[open] summary::after { transform:rotate(45deg); background:var(--card2); }
.pg-lista details p { margin:-6px 0 22px; color:var(--mut); font-size:15px; line-height:1.65; max-width:620px; }

/* chamada final: raios curvos + círculos, letreiro de ícones passando por trás da marca, marca "respirando" */
.final { position:relative; overflow:hidden; text-align:center; padding:120px 24px; background:#050506; }
.final-raios { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.final-ics { position:relative; width:min(660px, 100%); height:100px; margin:0 auto 20px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.final-trilho { position:absolute; top:50%; left:0; display:flex; gap:28px; width:max-content; transform:translateY(-50%); animation:rolar-ic 36s linear infinite; }
@keyframes rolar-ic { from { transform:translate(0, -50%); } to { transform:translate(-50%, -50%); } }
.final-trilho span { width:42px; height:42px; flex:none; border-radius:50%; background:rgba(255,255,255,.06); display:grid; place-items:center; }
.final-trilho svg { width:20px; height:20px; fill:none; stroke:var(--c); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.final-ics .meio { position:absolute; z-index:2; left:50%; top:50%; width:62px; height:62px; margin:-31px 0 0 -31px; border-radius:17px; border:2px solid transparent; display:grid; place-items:center;
  background:linear-gradient(#050506, #050506) padding-box, linear-gradient(135deg, #626262 0%, #F0F0F0 28%, #8B8B8B 50%, #F5F5F5 72%, #5E5E5E 100%) border-box;
  box-shadow:0 0 0 14px #050506, 0 0 40px rgba(255,255,255,.08); animation:respirar 4s ease-in-out infinite; }
.final-ics .meio svg { width:40px; height:25px; }
@keyframes respirar { 0%, 100% { transform:scale(1); box-shadow:0 0 0 14px #050506, 0 0 30px rgba(255,255,255,.05); } 50% { transform:scale(1.05); box-shadow:0 0 0 14px #050506, 0 0 46px rgba(255,255,255,.14); } }
.final h2 { position:relative; font-size:clamp(36px, 4.6vw, 58px); line-height:1.04; font-weight:600; letter-spacing:-.02em; }
.final .hero-ac { position:relative; }

/* rodapé */
.rodape { border-top:1px solid var(--linha); }
.rod-in { max-width:var(--larg); margin:0 auto; padding:64px 24px 44px; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.4fr); gap:40px; }
.rod-marca p { color:var(--mut); font-size:14px; line-height:1.6; max-width:330px; margin:16px 0 0; }
.rod-cols { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:20px; }
.rod-cols h4 { font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--txt2); margin-bottom:14px; }
.rod-cols a, .rod-cols span { display:block; width:fit-content; color:var(--mut); font-size:14px; padding:5px 0; }
.rod-cols a:hover { color:var(--txt); }
.rod-base { max-width:var(--larg); margin:0 auto; padding:18px 24px 26px; border-top:1px solid var(--linha); color:var(--mut2); font-size:13px; }

/* entrada suave: o conteúdo é VISÍVEL por padrão; só some/aparece quando o navegador prova que anima (.anima) */
.anima [data-sobe] { opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.anima [data-sobe].ver { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) {
  .anima [data-sobe] { opacity:1; transform:none; transition:none; } html { scroll-behavior:auto; }
  .arco-roda, .trilho, .final-trilho, .final-ics .meio, .bt.estrela .luz, .mk-canais span, main { animation:none; }
  .quatro.passos::after, .travessia::after { display:none; }
  .ef-luz { animation:none; opacity:0; }
  .travessia > div::before, .travessia b { animation:none; }
  .vitrine .app-moldura { transform:none; }
}

/* ---------- responsivo ---------- */
@media (max-width:1080px) {
  .menu, .topo-ac { display:none; } .menu-bt { display:flex; }
  .topo.aberto { background:rgba(9,9,11,.97); }
  .topo.aberto .menu { display:flex; position:absolute; top:64px; left:0; right:0; flex-direction:column; gap:0; padding:10px 24px 18px; background:rgba(9,9,11,.97); border-bottom:1px solid var(--linha); }
  .topo.aberto .menu a { padding:12px 0; border-bottom:1px solid var(--linha); }
  .duas, .recurso, .perguntas, .rod-in { grid-template-columns:minmax(0, 1fr); gap:40px; }
  .pg-esq { position:static; }
  .abas { grid-template-columns:minmax(0, 1fr); } .abas-nav { display:none; }
  .quatro.mini { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px 28px; }
  /* passos viram uma travessia vertical */
  .quatro.passos { grid-template-columns:minmax(0, 1fr); margin:70px 24px 0; }
  .quatro.passos::before { top:0; bottom:0; left:4px; right:auto; width:1px; height:auto; background:linear-gradient(180deg, rgba(242,238,232,.28), rgba(242,238,232,.12) 62%, var(--ambar)); }
  .quatro.passos::after { display:none; }
  .quatro.passos > div { border-right:none; padding:0 0 34px 34px; }
  .quatro.passos > div::before { top:6px; left:0; }
  .pl-grade { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .pl-c:nth-child(2) { border-right:none; } .pl-c:nth-child(-n+2) { border-bottom:1px solid var(--linha); }
  .tres { grid-template-columns:minmax(0, 1fr); }
  .app-moldura { grid-template-columns:minmax(0, 1fr); } .ap-lado { display:none; }
  .ap-cols { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .esfera-area { height:500px; }
}
@media (max-width:640px) {
  .moldura { padding:0; border:none; } .pagina { border:none; }
  .sec { padding:64px 16px; } .topo { padding:0 16px; } .hero { padding:120px 16px 110px; min-height:680px; }
  .produto { padding:64px 0 0; } .duas { padding:0 16px; }
  .arco { transform:scale(.86); margin-bottom:10px; }
  .vitrine { margin-top:-50px; padding:0 12px 56px; }
  .vitrine .quatro.mini { margin-top:40px; padding:0 4px; }
  /* pipeline do celular: colunas lado a lado, arrastando pro lado, em vez de duas telas de cartões */
  .ap-corpo { padding:14px 0 16px 14px; }
  .ap-topo { padding-right:14px; } .ap-topo span { display:none; }
  .ap-cols { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:10px; padding-right:14px; scrollbar-width:none; }
  .ap-cols::-webkit-scrollbar { display:none; }
  .ap-col { flex:0 0 74%; scroll-snap-align:start; }
  .quatro.mini, .pl-grade, .rod-cols { grid-template-columns:minmax(0, 1fr); }
  .quatro.passos { margin:56px 16px 0; }
  .pl-c { border-right:none !important; border-bottom:1px solid var(--linha); } .pl-c:last-child { border-bottom:none; }
  .pl-topo { flex-direction:column; align-items:flex-start; }
  .etq-fundo { display:none; } .mock-menu { height:300px; }
  .abas-corpo { gap:72px; }
  .mock-moldura { --pad:16px; min-height:0; } .mock-moldura.pilha { min-height:0; }
  .mk-agenda div { grid-template-columns:90px 1fr; } .mk-agenda .etq { grid-column:2; justify-self:start; }
  .mk-canais { gap:12px; } .mk-canais span { width:36px; height:36px; } .mk-canais span.on { width:44px; height:44px; }
  .ef-grade { height:340px; }
  .esfera-area { height:auto; } .esfera { height:300px; }
  .num-grade { position:relative; left:auto; bottom:auto; transform:none; width:auto; margin:-36px 16px 28px; grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .num-grade div { padding:16px; } .num-grade div:nth-child(2) { border-right:none; }
  .travessia::before, .travessia::after { display:none; } .travessia > div { padding-top:40px; } .travessia > div::before { top:18px; left:16px; } .num-grade div:nth-child(-n+2) { border-bottom:1px solid var(--linha); }
  .fala { width:300px; } .fala blockquote { font-size:17.5px; min-height:120px; }
  .final { padding:90px 16px; }
  .hero h1 br, .final h2 br { display:none; }
}

/* ---------- celular: revisão de experiência (10/10) ----------
   menu de tela cheia e opaco, alvos de toque de 44–48px, barra de ação fixa, recursos e planos mais curtos,
   rodapé enxuto. O computador não muda. */
.menu-cta, .barra-acao, .pl-deslize { display:none; }
@media (max-width:1080px) {
  .topo.aberto { background:#09090B; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .topo.aberto .menu { position:fixed; top:64px; bottom:0; overflow-y:auto; overscroll-behavior:contain; background:#09090B; padding:8px 24px 32px; }
  .topo.aberto .menu a { padding:16px 0; font-size:17px; color:var(--txt); }
  .topo.aberto .menu .menu-cta { display:inline-flex; margin-top:28px; height:48px; width:100%; border-bottom:none; color:#2B2A28; font-size:15px; }
}
@media (max-width:640px) {
  .bt { height:48px; padding:0 22px; font-size:15px; } .bt.peq { height:44px; }
  .menu-bt { width:44px; height:44px; }
  .barra-acao { display:flex; position:fixed; z-index:60; left:0; right:0; bottom:0; align-items:center; justify-content:space-between; gap:12px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:rgba(9,9,11,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--linha2); transform:translateY(110%); transition:transform .3s ease; }
  .barra-acao.ver { transform:none; }
  .barra-acao span { color:var(--txt2); font-size:14px; } .barra-acao b { color:var(--txt); font-weight:600; }
  html.menu-aberto .barra-acao { transform:translateY(110%); }
  /* recursos: a lista vira etiquetas, e os blocos ficam mais próximos */
  .abas-corpo { gap:56px; } .recurso { gap:28px; }
  .rec-lista { display:flex; flex-wrap:wrap; gap:8px; }
  .rec-lista li, .rec-lista li:first-child { border:1px solid var(--linha2); border-radius:99px; padding:7px 12px; font-size:13.5px; gap:8px; }
  .rec-lista i { width:auto; }
  /* planos: um cartão por vez, deslizando pro lado, com o próximo aparecendo na borda */
  .pl-deslize { display:block; color:var(--mut2); font-size:13px; margin:-30px 0 14px; }
  .pl-grade { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; margin:0 -16px; padding:0 16px 4px; border:none; border-radius:0; scrollbar-width:none; }
  .pl-grade::-webkit-scrollbar { display:none; }
  .pl-c, .pl-c:last-child { flex:0 0 84%; scroll-snap-align:center; border:1px solid var(--linha) !important; border-radius:var(--raio); }
  .pl-c.dest { border-color:var(--linha3) !important; }
  /* rodapé: duas colunas, só o que é link, com espaço pro dedo */
  .rod-cols { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px 20px; }
  .rod-cols > div:nth-child(2) { display:none; }
  .rod-cols a { padding:11px 0; } .topo .logo, .rod-marca .logo { min-height:44px; display:inline-flex; align-items:center; }
  .rod-base { padding-bottom:96px; }
}
@media (max-width:640px) {
  /* recursos viram abas: etiquetas no topo e um recurso por vez, deslizando pro lado */
  .abas { gap:18px; }
  .abas-nav { display:flex; position:static; flex-direction:row; gap:8px; overflow-x:auto; margin:0 -16px; padding:0 16px 2px; scrollbar-width:none; }
  .abas-nav::-webkit-scrollbar { display:none; }
  .abas-marca { display:none; }
  .abas-nav a { flex:none; display:inline-flex; align-items:center; height:44px; padding:0 16px; border:1px solid var(--linha2); border-radius:99px; color:var(--txt2); font-size:14px; }
  .abas-nav a::before { display:none; }
  .abas-nav a.on { background:var(--txt); border-color:var(--txt); color:#2B2A28; }
  .abas-corpo { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -16px; padding:0 16px; scrollbar-width:none; align-items:flex-start; }
  .abas-corpo::-webkit-scrollbar { display:none; }
  .abas-corpo .recurso { flex:0 0 100%; scroll-snap-align:center; scroll-snap-stop:always; }
}
@media (max-width:1080px) {
  .menu-bt span { transition:transform .2s ease; }
  .topo.aberto .menu-bt span:first-child { transform:translateY(3.25px) rotate(45deg); }
  .topo.aberto .menu-bt span:last-child { transform:translateY(-3.25px) rotate(-45deg); }
}

/* ---------- vitrine viva: a simulação navegável do app (vitrine.js) ---------- */
.vitrine-dica { text-align:center; color:var(--mut); font-size:13px; margin:0 0 14px; font-family:var(--ui); }
.vitrine-dica b { color:var(--txt2); font-weight:500; }
.app-moldura.viva { position:relative; }
.app-moldura.viva .ap-it[data-ir] { cursor:pointer; transition:background .15s, color .15s; }
.app-moldura.viva .ap-it[data-ir]:hover { background:rgba(255,255,255,.04); color:var(--txt); }
.app-moldura.viva .ap-corpo { min-height:452px; max-height:452px; overflow-y:auto; scrollbar-width:thin; }
.ap-corpo.entra { animation:ap-entra .28s ease; } @keyframes ap-entra { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.janela .ap-sim { margin-left:auto; font-style:normal; font-size:11px; color:var(--mut2); }
.app-moldura .ap-tema { margin-left:12px; height:24px; padding:0 10px; border-radius:99px; border:1px solid var(--linha2); background:none; color:var(--txt2); font:500 11.5px var(--ui); cursor:pointer; }
.app-moldura .ap-tema:hover { color:var(--txt); border-color:var(--linha3); }
.app-moldura button { font:inherit; color:inherit; text-align:left; background:none; border:none; padding:0; cursor:pointer; }
.app-moldura .ap-c { background:var(--card2); border:1px solid var(--linha); padding:10px 11px; width:100%; text-align:left; transition:border-color .15s, transform .15s; } .app-moldura .ap-c:hover { border-color:var(--linha3); transform:translateY(-1px); }
.ap-abas { display:none; }
.av { width:30px; height:30px; flex:none; border-radius:50%; background:var(--card3); display:grid; place-items:center; font-size:11px; font-weight:600; color:var(--txt2); }
.ap-tag { font-size:11px; padding:3px 9px; border-radius:99px; background:var(--card3); color:var(--txt2); white-space:nowrap; }
.ap-tag.lj { background:rgba(224,112,58,.14); color:#F0A27C; } .ap-tag.az { background:rgba(143,166,201,.14); color:#B3C4DE; }
.app-moldura .ap-bt { height:32px; padding:0 13px; border-radius:8px; border:1px solid var(--linha2); background:var(--card2); font-size:12.5px; font-weight:600; display:inline-flex; align-items:center; }
.app-moldura .ap-bt.pri { background:var(--ambar); border-color:var(--ambar); color:#16110A; }
.app-moldura .ap-bt.verde { background:#8DB596; border-color:#8DB596; color:#0F1A12; }
.app-moldura .ap-bt.leve { background:none; border-color:transparent; color:var(--mut); }
.app-moldura .ap-bt:disabled { opacity:.45; cursor:wait; }
.ap-kpis { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; margin-bottom:18px; }
.app-moldura .ap-kpis > * { display:grid; gap:4px; padding:14px; border:1px solid var(--linha); border-radius:12px; background:var(--card2); }
.app-moldura .ap-kpis > button:hover { border-color:var(--linha3); }
.ap-kpis small { color:var(--mut); font-size:11.5px; } .ap-kpis b { font-size:26px; font-weight:500; letter-spacing:-.02em; } .ap-kpis b i { font-style:normal; font-size:13px; color:var(--mut); }
.ap-kpis b.lj { color:#F0A27C; } .ap-kpis span { color:var(--mut); font-size:11.5px; }
.ap-seguro { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:9px 12px; margin-bottom:12px; border-radius:10px; background:rgba(141,181,150,.08); border:1px solid rgba(141,181,150,.2); font-size:12px; color:#B5D1BC; }
.ap-seguro span:first-child { display:flex; align-items:center; gap:8px; } .ap-seguro i { width:7px; height:7px; border-radius:50%; background:#8DB596; }
.pulsa { animation:pulsa 1.2s ease 2; } @keyframes pulsa { 50% { box-shadow:0 0 0 4px rgba(227,164,58,.35); border-color:var(--ambar2); } }
.ap-atual { border:1px solid var(--linha2); border-radius:14px; padding:14px; background:var(--card2); margin-bottom:12px; }
.ap-l1 { display:flex; align-items:center; gap:10px; margin-bottom:10px; } .ap-l1 b { display:block; font-size:14px; } .ap-l1 small { color:var(--mut); font-size:12px; } .ap-l1 .ap-tag { margin-left:auto; }
.ap-msg { background:var(--card); border:1px solid var(--linha); border-radius:10px; padding:11px 12px; font-size:13px; line-height:1.55; color:var(--txt2); margin-bottom:10px; }
.ap-msg small { display:block; color:var(--ambar2); font-size:11px; margin-bottom:5px; }
.ap-bts { display:flex; gap:7px; flex-wrap:wrap; }
.ap-lista { display:grid; gap:6px; }
.app-moldura .ap-lista > button { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; grid-template-rows:auto auto; column-gap:10px; align-items:center; padding:9px 11px; border:1px solid var(--linha); border-radius:10px; }
.app-moldura .ap-lista > button:hover { border-color:var(--linha3); }
.ap-lista .av { grid-row:1 / 3; } .ap-lista b { font-size:13px; } .ap-lista small { grid-column:2; color:var(--mut); font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ap-lista .ap-tag { grid-column:3; grid-row:1 / 3; }
.ap-lista.resp small { color:var(--txt2); font-style:italic; white-space:normal; }
.ap-vazio, .ap-nota { color:var(--mut); font-size:12.5px; line-height:1.6; margin:12px 0 0; }
.ap-busca { width:100%; height:36px; margin-bottom:10px; padding:0 12px; border-radius:9px; border:1px solid var(--linha2); background:var(--card2); color:var(--txt); font:13px var(--ui); }
.ap-tab { display:grid; } .app-moldura .ap-tab > * { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr) auto; gap:10px; align-items:center; padding:10px 6px; border-bottom:1px solid var(--linha); font-size:13px; }
.app-moldura .ap-tab > *[hidden] { display:none; } .ap-tab small { color:var(--mut); font-size:12px; } .ap-tab span { font-size:12px; color:var(--txt2); } .ap-tab .lj { color:#F0A27C; } .ap-tab .am { color:var(--ambar2); }
.app-moldura .ap-tab > button:hover { background:rgba(255,255,255,.03); }
.ap-destaque { display:flex; align-items:center; gap:12px; padding:13px; border-radius:12px; border:1px solid rgba(200,134,10,.45); background:rgba(200,134,10,.06); margin-bottom:12px; }
.ap-destaque div { flex:1; } .ap-destaque b { display:block; font-size:13.5px; } .ap-destaque small { color:var(--mut); font-size:12px; }
.ap-agenda > div { display:grid; grid-template-columns:110px minmax(0, 1fr) auto; align-items:center; gap:10px; padding:11px 4px; border-bottom:1px solid var(--linha); font-size:13px; }
.ap-agenda button:hover { color:var(--txt); text-decoration:underline; text-underline-offset:3px; }
.ap-passos { display:grid; gap:0; position:relative; padding-left:18px; }
.ap-passos::before { content:""; position:absolute; left:4px; top:8px; bottom:8px; width:1px; background:linear-gradient(var(--linha3), var(--ambar)); }
.ap-passos > div { position:relative; display:grid; grid-template-columns:52px minmax(0, 1fr) auto; gap:8px; padding:8px 0; font-size:13px; color:var(--txt2); }
.ap-passos i { position:absolute; left:-18px; top:12px; width:9px; height:9px; border-radius:50%; background:#0d0d10; box-shadow:inset 0 0 0 1.5px rgba(242,238,232,.6); }
.ap-passos > div:last-child i { background:var(--ambar); box-shadow:none; }
.ap-passos em { font-style:normal; font-size:11.5px; color:var(--mut); }
.ap-passos .env i { background:var(--mut2); box-shadow:none; } .ap-passos .hoje i { background:var(--ambar); box-shadow:0 0 0 4px rgba(200,134,10,.2); } .ap-passos .hoje em { color:var(--ambar2); font-weight:600; } .ap-passos .hoje { color:var(--txt); }
.ap-barras > div { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr) 40px; gap:12px; align-items:center; padding:9px 0; font-size:12.5px; color:var(--txt2); }
.ap-barras i { height:6px; border-radius:3px; background:linear-gradient(90deg, var(--ambar) var(--v), var(--card3) var(--v)); } .ap-barras b { color:var(--ambar2); font-size:12.5px; text-align:right; }
.ap-ficha .ap-voltar { color:var(--mut); font-size:12.5px; margin-bottom:12px; } .ap-ficha .ap-voltar:hover { color:var(--txt); }
.ap-ficha-g { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:20px; margin:4px 0 12px; }
.ap-rot { display:block; color:var(--mut2); font-size:11px; letter-spacing:.06em; text-transform:uppercase; margin:10px 0 5px; }
.ap-ficha p { margin:0; font-size:13px; color:var(--txt2); line-height:1.55; }
.ap-ficha blockquote { margin:0; padding:9px 11px; border-left:2px solid var(--linha3); background:var(--card2); border-radius:0 8px 8px 0; font-size:12.5px; font-style:italic; color:var(--txt2); line-height:1.55; }
.ap-ficha blockquote.resp { border-left-color:var(--laranja); }
.ap-toast { position:absolute; left:50%; bottom:18px; z-index:6; transform:translate(-50%, 20px); opacity:0; max-width:min(440px, 90%); padding:10px 14px; border-radius:10px; background:#1D1D22; border:1px solid var(--linha3); font-size:12.5px; color:var(--txt); box-shadow:0 14px 34px rgba(0,0,0,.5); transition:opacity .25s, transform .25s; pointer-events:none; }
.ap-toast.ver { opacity:1; transform:translate(-50%, 0); }
.ap-wa { position:absolute; inset:0; z-index:5; display:grid; place-items:center; background:rgba(5,5,7,.6); backdrop-filter:blur(3px); animation:ap-entra .2s ease; }
.ap-wa-c { width:min(360px, 92%); border-radius:16px; overflow:hidden; background:#0B141A; border:1px solid rgba(255,255,255,.08); box-shadow:0 30px 60px rgba(0,0,0,.6); color:#E9EDEF; }
.ap-wa-t { display:flex; align-items:center; gap:10px; padding:11px 13px; background:#1F2C33; } .ap-wa-t b { font-size:13.5px; flex:1; }
.app-moldura .ap-wa-t button { font-size:20px; color:#AEBAC1; padding:0 4px; }
.ap-wa-m { padding:18px 13px; min-height:120px; display:flex; align-items:flex-end; justify-content:flex-end; background:#0B141A; }
.ap-wa-m .bal { max-width:86%; padding:8px 10px; border-radius:9px 0 9px 9px; background:#005C4B; color:#E9EDEF; font-size:13px; line-height:1.5; }
.ap-wa-b { display:flex; align-items:center; gap:10px; padding:11px 13px; background:#1F2C33; } .ap-wa-b span { flex:1; font-size:11.5px; color:#AEBAC1; line-height:1.4; }
/* trunfos clicáveis */
.travessia > div.clicavel { cursor:pointer; transition:background .2s; } .travessia > div.clicavel:hover { background:rgba(255,255,255,.035); }
.travessia > div.clicavel::after { content:"Ver no app \203A"; display:block; margin-top:10px; font:500 12px var(--ui); color:var(--mut2); transition:color .2s; }
.travessia > div.clicavel:hover::after { color:var(--ambar2); }
/* versão clean: a janela do app em tema claro */
.app-moldura.claro { --card:#FFFFFF; --card2:#F7F6F3; --card3:#ECEAE5; --linha:rgba(0,0,0,.07); --linha2:rgba(0,0,0,.1); --linha3:rgba(0,0,0,.18);
  --txt:#1C1B1A; --txt2:#4A4744; --mut:#85807A; --mut2:#9D9891; background:#FFFFFF; color:#1C1B1A; border-color:rgba(0,0,0,.12); }
.app-moldura.claro .ap-lado { background:#FAF9F7; } .app-moldura.claro .janela { background:#F3F2EF; }
.app-moldura.claro .ap-passos i { background:#fff; box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.35); }
.app-moldura.claro .ap-toast { background:#1C1B1A; color:#F2EEE8; }
.app-moldura.claro .ap-seguro { color:#3F6B4A; background:rgba(141,181,150,.14); }
.app-moldura.claro .ap-tag.lj, .app-moldura.claro .ap-kpis b.lj, .app-moldura.claro .ap-tab .lj { color:#B4501F; } .app-moldura.claro .ap-tag.az { color:#3F5A80; }
.app-moldura.claro .ap-c .lj { color:#B4501F; } .app-moldura.claro .ap-c .am, .app-moldura.claro .ap-tab .am, .app-moldura.claro .ap-msg small { color:#9A6400; }
.app-moldura.claro .ap-ficha blockquote { background:#F7F6F3; }
@media (max-width:1080px) {
  .ap-abas { display:flex; gap:6px; overflow-x:auto; padding:10px 14px 0; scrollbar-width:none; grid-column:1 / -1; } .ap-abas::-webkit-scrollbar { display:none; }
  .app-moldura .ap-abas button { flex:none; height:34px; padding:0 13px; border-radius:99px; border:1px solid var(--linha2); font-size:12.5px; color:var(--txt2); }
  .app-moldura .ap-abas button.on { background:var(--txt); color:#2B2A28; border-color:var(--txt); }
  .app-moldura.claro .ap-abas button.on { color:#fff; }
  .ap-kpis { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ap-ficha-g { grid-template-columns:minmax(0, 1fr); gap:6px; }
}
@media (max-width:640px) {
  .app-moldura.viva .ap-corpo { min-height:430px; max-height:430px; }
  .janela .ap-sim { display:none; } .app-moldura .janela .ap-tema { margin-left:auto; }
  .ap-agenda > div { grid-template-columns:84px minmax(0, 1fr); } .ap-agenda .ap-tag { grid-column:2; justify-self:start; }
  .ap-destaque { flex-wrap:wrap; }
  .app-moldura .ap-tab > * { grid-template-columns:minmax(0, 1fr) auto; } .ap-tab > * small { display:none; }
  .app-moldura .ap-abas button { height:40px; }
}

/* ---------- captura antes do site (captura.js) ---------- */
.captura { position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:16px; overflow-y:auto; overscroll-behavior:contain;
  background:rgba(7,7,9,.72); backdrop-filter:blur(12px) saturate(.8); -webkit-backdrop-filter:blur(12px) saturate(.8); animation:cap-entra .4s ease; transition:opacity .45s ease; }
.captura.sai { opacity:0; pointer-events:none; }
@keyframes cap-entra { from { opacity:0; } to { opacity:1; } }
.cap-card { width:min(460px, 100%); padding:26px 26px 22px; border-radius:22px; background:linear-gradient(180deg, #121215, #0C0C0F); border:1px solid var(--linha2);
  box-shadow:0 40px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04); font-family:var(--ui); }
.cap-topo { display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.cap-topo .simbolo { width:34px; height:auto; } .cap-topo > span { font:700 15px var(--fonte); letter-spacing:.12em; }
.cap-prog { margin-left:auto; display:flex; gap:5px; } .cap-prog i { width:22px; height:3px; border-radius:2px; background:var(--card3); transition:background .3s; } .cap-prog i.on { background:var(--ambar); }
.cap-olho { display:block; color:var(--mut2); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px; }
.cap-passo h2 { font:500 24px/1.2 var(--fonte); letter-spacing:-.015em; margin:0 0 8px; }
.cap-sub { color:var(--mut); font-size:14px; line-height:1.55; margin:0 0 18px; }
.cap-ops { display:grid; gap:8px; }
.cap-ops button, .cap-chips button { text-align:left; cursor:pointer; color:var(--txt); background:var(--card2); border:1px solid var(--linha2); border-radius:14px; font:inherit; transition:border-color .15s, background .15s, transform .1s; }
.cap-ops button { display:grid; gap:3px; padding:14px 16px; min-height:64px; }
.cap-ops button b { font-size:15px; font-weight:600; } .cap-ops button span { color:var(--mut); font-size:13px; }
.cap-ops button:hover, .cap-chips button:hover { border-color:var(--linha3); background:var(--card3); }
.cap-ops button:active, .cap-chips button:active { transform:scale(.99); }
.cap-chips { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin-top:14px; }
.cap-chips button { min-height:48px; padding:0 14px; font-size:14.5px; font-weight:500; }
.cap-passo label { display:grid; gap:6px; margin-top:12px; font-size:13px; color:var(--txt2); }
.cap-passo input { height:48px; padding:0 14px; border-radius:12px; border:1px solid var(--linha2); background:var(--card2); color:var(--txt); font:15px var(--ui); transition:border-color .15s; }
.cap-passo input:focus { outline:none; border-color:var(--ambar2); box-shadow:0 0 0 3px rgba(227,164,58,.18); }
.cap-passo input[aria-invalid="true"] { border-color:var(--laranja); }
.cap-passo input::placeholder { color:var(--mut3); }
.cap-mel { position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.cap-erro { min-height:18px; margin:10px 0 0; color:#F0A27C; font-size:13px; }
.cap-ir { width:100%; height:50px; margin-top:6px; font-size:15.5px; } .cap-ir:disabled { opacity:.6; cursor:wait; }
.cap-lgpd { color:var(--mut2); font-size:12px; line-height:1.5; margin:12px 0 0; }
.cap-voltar { display:block; margin:14px auto 0; background:none; border:none; color:var(--mut); font:13px var(--ui); cursor:pointer; min-height:36px; }
.cap-voltar:hover { color:var(--txt); }
@media (max-width:640px) { .cap-card { padding:22px 18px 18px; border-radius:20px; } .cap-passo h2 { font-size:22px; } .captura { place-items:start center; padding-top:max(16px, 6vh); } }
@media (prefers-reduced-motion:reduce) { .captura { animation:none; transition:none; } }

/* ---------- segmentos: duas faixas rolando em sentidos opostos (quem vende com reunião) ---------- */
.segmentos { padding:72px 0 64px; border-top:1px solid var(--linha); }
.segmentos .cab-centro { margin-bottom:34px; padding:0 16px; }
.seg-mask { overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.seg-mask + .seg-mask { margin-top:22px; }
.seg-trilho { display:flex; gap:64px; width:max-content; padding:0 32px; animation:rolar 60s linear infinite; }
.seg-trilho.volta { animation-direction:reverse; animation-duration:70s; }
.seg-mask:hover .seg-trilho { animation-play-state:paused; }
.seg { display:flex; align-items:center; gap:12px; height:56px; color:rgba(242,238,232,.42); white-space:nowrap; transition:color .2s; }
.seg:hover { color:var(--txt); }
.seg svg { width:28px; height:28px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.seg span { font:600 19px var(--fonte); letter-spacing:-.01em; } .seg span i { font-style:normal; font-weight:400; }
@media (max-width:640px) { .segmentos { padding:56px 0 48px; } .seg-trilho { gap:40px; } .seg span { font-size:16px; } .seg svg { width:24px; height:24px; } }
@media (prefers-reduced-motion:reduce) { .seg-trilho { animation:none; flex-wrap:wrap; width:auto; justify-content:center; } }

/* ---------- pilares vivos dos Recursos (recursos.js) ---------- */
.mock-moldura.vivo { cursor:auto; }
.mock-moldura button { font:inherit; color:inherit; background:none; border:none; padding:0; cursor:pointer; text-align:left; }
.mock-moldura .janela .mk-dica { margin-left:auto; font-style:normal; font-size:11px; color:var(--mut2); }
.mock-moldura .janela button.mk-dica:hover { color:var(--txt); }
.mock-moldura .janela span b { font-weight:inherit; }
.mock-moldura .mk-bt { font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:8px; border:1px solid var(--linha2); background:var(--card); transition:filter .15s, opacity .15s; }
.mock-moldura .mk-bt.pri { background:var(--ambar); border-color:var(--ambar); color:#16110A; }
.mock-moldura .mk-bt:hover { filter:brightness(1.12); }
.mock-moldura.espera .mk-bt { opacity:.45; cursor:wait; }
.mock-moldura.espera .mk-rod .ok { background:var(--card3); color:var(--txt2); }
.troca { animation:troca .35s ease; } @keyframes troca { from { opacity:0; transform:translateX(10px); } to { opacity:1; transform:none; } }
/* cadência: os dias são clicáveis e o selecionado mostra a mensagem */
.mock-moldura .mk-passos .p { width:100%; text-align:left; border-radius:0 8px 8px 0; transition:background .15s; }
.mock-moldura .mk-passos .p:hover { background:rgba(255,255,255,.03); }
.mock-moldura .mk-passos .p.sel { background:rgba(200,134,10,.08); } .mock-moldura .mk-passos .p.sel b { color:var(--txt); }
.cd-msg { margin:0; }
/* respostas: a conversa recebe a resposta e o lead sobe pro topo */
.rs-chat { border:1px solid var(--linha2); border-radius:14px; overflow:hidden; background:#0B141A; }
.rs-topo { display:flex; align-items:center; gap:10px; padding:9px 12px; background:#1F2C33; } .rs-topo b { font-size:13px; color:#E9EDEF; } .rs-topo .av { width:28px; height:28px; font-size:10.5px; }
.rs-status { margin-left:auto; font-size:11px; color:#8696A0; }
.rs-msgs { display:flex; flex-direction:column; gap:6px; padding:12px; min-height:118px; }
.bal { max-width:84%; padding:7px 10px; border-radius:9px; font-size:12.5px; line-height:1.45; color:#E9EDEF; }
.bal.eu { align-self:flex-end; background:#005C4B; border-top-right-radius:2px; }
.bal.ela { align-self:flex-start; background:#202C33; border-top-left-radius:2px; }
.rs-dig, .rs-resp { display:none; }
.dig .rs-dig { display:flex; gap:4px; padding:10px 12px; } .rs-dig i { width:6px; height:6px; border-radius:50%; background:#8696A0; animation:dig 1s infinite; }
.rs-dig i:nth-child(2) { animation-delay:.15s; } .rs-dig i:nth-child(3) { animation-delay:.3s; }
@keyframes dig { 0%, 60%, 100% { opacity:.3; transform:none; } 30% { opacity:1; transform:translateY(-2px); } }
.resp .rs-resp { display:block; animation:troca .3s ease; }
.rs-seta { display:flex; justify-content:center; opacity:0; transition:opacity .3s; } .seta .rs-seta { opacity:1; }
.rs-seta span { font-size:11.5px; color:var(--ambar2); padding:3px 10px; border-radius:99px; background:rgba(200,134,10,.1); }
.rs-fila { display:grid; gap:6px; }
.rs-it { display:flex; align-items:center; gap:10px; padding:8px 11px; border:1px solid var(--linha); border-radius:10px; background:var(--card2); font-size:12.5px; }
.rs-it b { display:block; font-size:12.5px; } .rs-it small { color:var(--mut); font-size:11.5px; } .rs-it .av { width:28px; height:28px; font-size:10.5px; }
.rs-it em { margin-left:auto; font-style:normal; font-size:11px; font-weight:600; color:#F0A27C; background:rgba(224,112,58,.14); padding:3px 9px; border-radius:99px; white-space:nowrap; }
.rs-novo { display:none; }
.sobe .rs-novo { display:flex; border-color:rgba(224,112,58,.5); animation:sobe .45s cubic-bezier(.2,.8,.2,1); }
@keyframes sobe { from { opacity:0; transform:translateY(-12px) scale(.97); } to { opacity:1; transform:none; } }
/* gestão: aviso com contagem, etiquetas que filtram e resposta por toque */
.gs-alerta.agora { border-color:var(--ambar2); animation:pulsa 1.2s ease 2; }
.mock-moldura .mk-alerta em { cursor:pointer; }
.gs-etqs { display:flex; flex-wrap:wrap; gap:6px; }
.mock-moldura .gs-etqs button { font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:99px; border:1px solid var(--linha2); color:var(--txt2); transition:background .15s, border-color .15s; }
.mock-moldura .gs-etqs button:hover { border-color:var(--linha3); }
.mock-moldura .gs-etqs button.on { background:color-mix(in srgb, var(--c, #F2EEE8) 20%, transparent); border-color:color-mix(in srgb, var(--c, #F2EEE8) 55%, transparent); color:var(--txt); }
.mk-agenda > div[hidden] { display:none; }
.mk-agenda .etq { border-color:color-mix(in srgb, var(--c) 55%, transparent); background:color-mix(in srgb, var(--c) 14%, transparent); }
.gs-rel { display:grid; gap:6px; padding-top:4px; } .gs-rel small { color:var(--mut2); font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.gs-rel div { display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr) 34px; gap:10px; align-items:center; font-size:12px; color:var(--txt2); }
.gs-rel i { height:5px; border-radius:3px; background:linear-gradient(90deg, var(--ambar) var(--v), var(--card3) var(--v)); background-size:0% 100%, 100% 100%; }
.gs-rel i { background:var(--card3); position:relative; overflow:hidden; }
.gs-rel i::after { content:""; position:absolute; inset:0 auto 0 0; width:0; background:var(--ambar); border-radius:3px; transition:width 1s ease .2s; }
.ver .gs-rel i::after { width:var(--v); }
.gs-rel b { color:var(--ambar2); text-align:right; font-size:12px; }
@media (max-width:640px) { .mock-moldura .janela .mk-dica { display:none; } .rs-msgs { min-height:104px; } }

/* três planos (o Duo saiu em 10/10): três colunas no computador e no tablet */
.pl-grade { grid-template-columns:repeat(3, minmax(0, 1fr)); }
@media (max-width:1080px) { .pl-grade { grid-template-columns:repeat(3, minmax(0, 1fr)); } .pl-c:nth-child(-n+2) { border-bottom:none; } .pl-c:nth-child(2) { border-right:1px solid var(--linha); } .pl-c { padding:24px 18px 28px; } }
@media (max-width:640px) { .pl-c:nth-child(2) { border-right:none; } }

/* ---------- versão demonstração: o botão principal, a seção e o chat (demo-chat.js) ---------- */
.bt.demo { background:var(--ambar); color:#16110A; font-weight:600; padding:0 6px 0 20px; gap:12px; box-shadow:0 0 0 0 rgba(227,164,58,.5); animation:demo-chama 3.2s ease-in-out infinite; }
.bt.demo:hover { background:var(--ambar2); }
.bt.demo .seta { width:30px; height:30px; border-radius:50%; background:#16110A; color:var(--ambar2); display:grid; place-items:center; font-style:normal; font-size:15px; transition:transform .2s; }
.bt.demo:hover .seta { transform:translateX(3px); }
.bt.demo.peq { padding-left:16px; } .bt.demo.peq .seta { width:24px; height:24px; font-size:13px; }
@keyframes demo-chama { 0%, 70%, 100% { box-shadow:0 0 0 0 rgba(227,164,58,0); } 80% { box-shadow:0 0 0 6px rgba(227,164,58,.22); } 92% { box-shadow:0 0 0 12px rgba(227,164,58,0); } }
.hero-prova { margin:16px 0 0; color:var(--mut); font:13px var(--ui); display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.hero-prova span::before { content:"●"; color:var(--ambar); font-size:8px; margin-right:7px; vertical-align:2px; }
.demonstracao .dm-passos { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; margin:40px 0 34px; }
.dm-passos > div { padding:24px; border:1px solid var(--linha2); border-radius:var(--raio); background:var(--card); }
.dm-passos small { color:var(--ambar2); font:600 12px var(--ui); letter-spacing:.06em; } .dm-passos h3 { font-size:18px; margin:10px 0 8px; } .dm-passos p { color:var(--mut); font:14.5px/1.6 var(--ui); margin:0; }
.dm-cta { display:flex; flex-direction:column; align-items:center; gap:12px; } .dm-cta p { color:var(--mut); font:13px var(--ui); margin:0; }
@media (max-width:1080px) { .demonstracao .dm-passos { grid-template-columns:minmax(0, 1fr); } }
@media (prefers-reduced-motion:reduce) { .bt.demo { animation:none; } }

.dc { position:fixed; inset:0; z-index:210; display:grid; place-items:center; padding:16px; background:rgba(7,7,9,.66); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); animation:cap-entra .25s ease; transition:opacity .3s; font-family:var(--ui); }
.dc.sai { opacity:0; pointer-events:none; }
.dc-janela { width:min(460px, 100%); height:min(640px, calc(100vh - 32px)); display:flex; flex-direction:column; border-radius:20px; overflow:hidden; background:#0E0E11; border:1px solid var(--linha2); box-shadow:0 40px 90px rgba(0,0,0,.6); }
.dc-topo { display:flex; align-items:center; gap:10px; padding:13px 14px; border-bottom:1px solid var(--linha); }
.dc-av { width:34px; height:34px; border-radius:50%; background:#16161A; border:1px solid var(--linha2); display:grid; place-items:center; flex:none; }
.dc-av svg { width:22px; } .dc-av .s-arco { fill:none; stroke:var(--txt); stroke-width:4; } .dc-av .s-ini { fill:none; stroke:var(--txt); stroke-width:4; } .dc-av .s-fim { fill:var(--ambar); }
.dc-topo b { display:block; font-size:14px; } .dc-topo small { color:var(--mut); font-size:12px; }
.dc-x { margin-left:auto; width:34px; height:34px; border-radius:8px; border:none; background:none; color:var(--mut); font-size:18px; cursor:pointer; } .dc-x + .dc-x { margin-left:0; } .dc-x:hover { color:var(--txt); background:rgba(255,255,255,.05); }
.dc-msgs { flex:1; overflow-y:auto; padding:16px 14px; display:flex; flex-direction:column; gap:8px; scrollbar-width:thin; }
.dc-b { max-width:84%; padding:10px 13px; border-radius:14px; font-size:14px; line-height:1.5; animation:troca .25s ease; }
.dc-b.ponte { align-self:flex-start; background:#1A1A1F; color:var(--txt2); border-top-left-radius:4px; }
.dc-b.eu { align-self:flex-end; background:var(--txt); color:#1C1B1A; font-weight:500; border-top-right-radius:4px; }
.dc-b b { color:var(--txt); } .dc-aviso { color:var(--ambar2); font-size:13px; }
.dc-dig { display:flex; gap:4px; padding:3px 0; } .dc-dig i { width:6px; height:6px; border-radius:50%; background:var(--mut); animation:dig 1s infinite; } .dc-dig i:nth-child(2) { animation-delay:.15s; } .dc-dig i:nth-child(3) { animation-delay:.3s; }
.dc-rodape { padding:10px 14px 4px; border-top:1px solid var(--linha); }
.dc-rodape:empty { display:none; }
.dc-ops { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; padding-bottom:6px; }
.dc-ops button { min-height:42px; padding:0 15px; border-radius:99px; border:1px solid var(--linha3); background:none; color:var(--txt); font:500 14px var(--ui); cursor:pointer; transition:background .15s, border-color .15s; }
.dc-ops button:hover { background:rgba(255,255,255,.06); border-color:var(--txt2); }
.dc-ops button:only-child { background:var(--ambar); border-color:var(--ambar); color:#16110A; font-weight:600; }
.dc-campo { display:flex; align-items:center; gap:8px; height:50px; padding:0 6px 0 14px; border-radius:14px; border:1px solid var(--ambar2); background:#121216; }
.dc-pre { color:var(--txt2); font-size:13.5px; font-weight:600; white-space:nowrap; }
.dc-campo input { flex:1; min-width:0; height:100%; border:none; background:none; color:var(--txt); font:15px var(--ui); outline:none; }
.dc-campo button { width:38px; height:38px; border-radius:50%; border:none; background:var(--ambar); color:#16110A; font-size:17px; font-weight:700; cursor:pointer; }
.dc-erro { min-height:16px; margin:5px 2px 2px; color:#F0A27C; font-size:12.5px; }
.dc-selos { display:flex; justify-content:center; gap:16px; padding:9px; border-top:1px solid var(--linha); color:var(--mut2); font-size:11.5px; }
.dc-selos span::before { content:"✓"; margin-right:5px; color:var(--verde); }
/* calendário */
.dc-agenda { align-self:stretch; margin-top:4px; padding:16px 14px 12px; border:1px solid var(--linha2); border-radius:16px; background:#121216; animation:troca .3s ease; }
.dc-agenda.feito { opacity:.5; pointer-events:none; }
.dc-mes { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; } .dc-mes b { font-size:15px; }
.dc-mes button { width:34px; height:34px; border-radius:50%; border:none; background:rgba(255,255,255,.06); color:var(--txt); font-size:18px; cursor:pointer; } .dc-mes button:disabled { opacity:.25; cursor:default; }
.dc-sem, .dc-grade { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:4px; text-align:center; }
.dc-sem span { color:var(--mut); font-size:12px; padding:4px 0; }
.dc-grade button, .dc-grade span { aspect-ratio:1; border-radius:50%; border:none; background:none; color:var(--mut3); font:14px var(--ui); }
.dc-grade button.livre { color:var(--txt); background:rgba(255,255,255,.07); cursor:pointer; font-weight:600; } .dc-grade button.livre:hover { background:rgba(255,255,255,.14); }
.dc-grade button.sel { background:var(--ambar) !important; color:#16110A; }
.dc-grade button.hoje { position:relative; } .dc-grade button.hoje::after { content:""; position:absolute; left:50%; bottom:5px; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:var(--ambar); }
.dc-horas { margin-top:14px; padding-top:12px; border-top:1px solid var(--linha); } .dc-horas small { color:var(--txt2); font-size:13px; }
.dc-horas div { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin-top:10px; }
.dc-horas button { height:40px; border-radius:10px; border:1px solid var(--linha3); background:none; color:var(--txt); font:600 14px var(--ui); cursor:pointer; } .dc-horas button:hover { border-color:var(--ambar2); color:var(--ambar2); }
.dc-fuso { margin:12px 0 0; color:var(--mut); font-size:12px; text-align:center; }
.dc-cal { width:100%; height:520px; border:none; border-radius:12px; background:#121216; }
@media (max-width:640px) { .dc { padding:0; place-items:end center; } .dc-janela { height:100%; max-height:none; width:100%; border-radius:0; border:none; } }

/* chat: respostas em lista, uma embaixo da outra (10/10); opções curtas e numerosas em duas colunas */
.dc-ops.lista { display:grid; grid-template-columns:minmax(0, 1fr); gap:8px; justify-content:stretch; }
.dc-ops.lista.dc-2col { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.dc-ops.lista button { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:48px; padding:0 16px; border-radius:12px; text-align:left; border-color:var(--linha2); background:#141418; }
.dc-ops.lista button::after { content:"›"; color:var(--mut); font-size:18px; transition:transform .15s, color .15s; }
.dc-ops.lista button:hover { border-color:var(--ambar2); background:rgba(200,134,10,.08); } .dc-ops.lista button:hover::after { color:var(--ambar2); transform:translateX(2px); }
.dc-ops.lista.unico { grid-template-columns:auto; justify-content:end; }
.dc-ops.lista.unico button { width:auto; border-radius:99px; background:var(--ambar); border-color:var(--ambar); color:#16110A; font-weight:600; }
.dc-ops.lista.unico button::after { color:#16110A; }
.dc-rodape { max-height:52%; overflow-y:auto; }
.dc-msgs, .dc-rodape { scrollbar-width:thin; scrollbar-color:#2A2A30 transparent; }
.dc-msgs::-webkit-scrollbar, .dc-rodape::-webkit-scrollbar { width:6px; } .dc-msgs::-webkit-scrollbar-thumb, .dc-rodape::-webkit-scrollbar-thumb { background:#2A2A30; border-radius:3px; }
.dc-ops.lista:not(.unico) { width:100%; justify-content:stretch; }

/* ---------- pilar 3 com a estética do WhatsApp Web (tema escuro): cores, balões, tiques, datas, barra de digitar ---------- */
.rs-chat.wa { background:#0B141A; border-color:#222D34; }
.wa .rs-topo { background:#202C33; padding:8px 12px; gap:11px; }
.wa .rs-topo b { display:block; font-size:14px; color:#E9EDEF; font-weight:500; }
.wa .rs-status { display:block; margin:0; font-size:12px; color:#8696A0; }
.wa.dig .rs-status, .dig .wa .rs-status { color:#00A884; }
.wa-av { width:36px; height:36px; flex:none; }
.wa-ics { margin-left:auto; display:flex; gap:16px; } .wa-ics svg { width:20px; height:20px; fill:none; stroke:#AEBAC1; stroke-width:1.8; stroke-linecap:round; } .wa-ics svg:last-child { fill:#AEBAC1; stroke:none; }
.wa .rs-msgs { height:250px; overflow:hidden; justify-content:flex-end; gap:3px; padding:10px 14px 12px;
  background:#0B141A url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22140%22%20height%3D%22140%22%20viewBox%3D%220%200%20140%20140%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-opacity%3D%22.032%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%2018h16v11H20l-6%205z%22/%3E%3Cpath%20d%3D%22M58%2014l2.5%205%205.5.8-4%203.9.9%205.5-4.9-2.6-4.9%202.6.9-5.5-4-3.9%205.5-.8z%22/%3E%3Cpath%20d%3D%22M102%2016c3-4%209-2%208%203-1%204-8%208-8%208s-7-4-8-8c-1-5%205-7%208-3z%22/%3E%3Cpath%20d%3D%22M16%2064h12v10a6%206%200%200%201-12%200zM28%2066h3a3%203%200%200%201%200%206h-3%22/%3E%3Ccircle%20cx%3D%2266%22%20cy%3D%2270%22%20r%3D%227%22/%3E%3Cpath%20d%3D%22M66%2058v3M66%2079v3M54%2070h3M75%2070h3%22/%3E%3Cpath%20d%3D%22M100%2062v14M100%2062l10-3v14M100%2076a3%203%200%201%201-3-3M110%2073a3%203%200%201%201-3-3%22/%3E%3Cpath%20d%3D%22M12%20112l10-8%2010%208v12H12z%22/%3E%3Cpath%20d%3D%22M56%20108h20v14H56zM56%20108l10%208%2010-8%22/%3E%3Cpath%20d%3D%22M98%20104a8%208%200%201%201%200%2016%208%208%200%200%201%200-16zM98%20108v4l3%202%22/%3E%3C/svg%3E") 0 0 / 140px 140px; }
.wa-data { align-self:center; margin:8px 0 5px; padding:4px 10px; border-radius:7px; background:#182229; color:#8696A0; font-size:11.5px; box-shadow:0 1px .5px rgba(11,20,26,.13); }
.wa .bal { position:relative; max-width:82%; padding:6px 8px 7px 9px; border-radius:7.5px; font-size:13px; line-height:1.4; color:#E9EDEF; box-shadow:0 1px .5px rgba(11,20,26,.13); }
.wa .bal.eu { background:#144D37; } .wa .bal.ela { background:#202C33; }
.wa .bal.cauda.eu { border-top-right-radius:0; } .wa .bal.cauda.ela { border-top-left-radius:0; }
.wa .bal.cauda.eu::after { content:""; position:absolute; top:0; right:-7px; border-left:8px solid #144D37; border-bottom:8px solid transparent; }
.wa .bal.cauda.ela::after { content:""; position:absolute; top:0; left:-7px; border-right:8px solid #202C33; border-bottom:8px solid transparent; }
.wa-h { float:right; display:inline-flex; align-items:center; gap:3px; margin:6px 0 -4px 10px; font-size:10.5px; color:rgba(233,237,239,.6); }
.tk { width:15px; height:10px; fill:#53BDEB; }
.wa .rs-dig { padding:9px 12px; } .wa .rs-dig i { background:#8696A0; }
.wa-barra { display:flex; align-items:center; gap:12px; padding:7px 12px; background:#202C33; }
.wa-barra svg { width:22px; height:22px; flex:none; fill:none; stroke:#8696A0; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.wa-barra span { flex:1; padding:8px 12px; border-radius:8px; background:#2A3942; color:#8696A0; font-size:13px; }
@media (max-width:640px) { .wa .rs-msgs { height:230px; } .wa .bal { font-size:12.5px; } }

/* a janela do WhatsApp da simulação do app com o mesmo visual */
.ap-wa-m { background:#0B141A url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22140%22%20height%3D%22140%22%20viewBox%3D%220%200%20140%20140%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-opacity%3D%22.032%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%2018h16v11H20l-6%205z%22/%3E%3Cpath%20d%3D%22M58%2014l2.5%205%205.5.8-4%203.9.9%205.5-4.9-2.6-4.9%202.6.9-5.5-4-3.9%205.5-.8z%22/%3E%3Cpath%20d%3D%22M102%2016c3-4%209-2%208%203-1%204-8%208-8%208s-7-4-8-8c-1-5%205-7%208-3z%22/%3E%3Cpath%20d%3D%22M16%2064h12v10a6%206%200%200%201-12%200zM28%2066h3a3%203%200%200%201%200%206h-3%22/%3E%3Ccircle%20cx%3D%2266%22%20cy%3D%2270%22%20r%3D%227%22/%3E%3Cpath%20d%3D%22M66%2058v3M66%2079v3M54%2070h3M75%2070h3%22/%3E%3Cpath%20d%3D%22M100%2062v14M100%2062l10-3v14M100%2076a3%203%200%201%201-3-3M110%2073a3%203%200%201%201-3-3%22/%3E%3Cpath%20d%3D%22M12%20112l10-8%2010%208v12H12z%22/%3E%3Cpath%20d%3D%22M56%20108h20v14H56zM56%20108l10%208%2010-8%22/%3E%3Cpath%20d%3D%22M98%20104a8%208%200%201%201%200%2016%208%208%200%200%201%200-16zM98%20108v4l3%202%22/%3E%3C/svg%3E") 0 0 / 140px 140px; }
.ap-wa-m .bal { background:#144D37; border-radius:7.5px 0 7.5px 7.5px; position:relative; }
.ap-wa-m .bal::after { content:""; position:absolute; top:0; right:-7px; border-left:8px solid #144D37; border-bottom:8px solid transparent; }
.ap-wa-t, .ap-wa-b { background:#202C33; }
.app-moldura .ap-wa-b .ap-bt.pri { background:#00A884; border-color:#00A884; color:#0B141A; }

/* ---------- formatos de toque na fila da simulação (ligação, figurinha, áudio, vídeo, banner, mensagem) ---------- */
.ap-fmt-linha { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:-2px 0 10px; }
.ap-fmt { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:4px 10px; border-radius:99px; background:var(--card3); color:var(--txt); }
.ap-fmt.mini { font-size:11px; font-weight:500; padding:3px 9px; color:var(--txt2); }
.ap-fmt.f-ligacao { background:rgba(141,181,150,.15); color:#B5D1BC; }
.ap-fmt.f-figurinha { background:rgba(201,143,181,.15); color:#E2B9D3; }
.ap-fmt.f-audio { background:rgba(227,164,58,.14); color:var(--ambar2); }
.ap-fmt.f-video { background:rgba(143,166,201,.15); color:#B3C4DE; }
.ap-fmt.f-banner { background:rgba(224,112,58,.14); color:#F0A27C; }
.ap-tent { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--mut); }
.ap-tent i { width:8px; height:8px; border-radius:50%; border:1.5px solid var(--mut3); } .ap-tent i.f { background:var(--mut2); border-color:var(--mut2); } .ap-tent i.a { background:#8DB596; border-color:#8DB596; }
.app-moldura.claro .ap-fmt.f-ligacao { color:#3F6B4A; } .app-moldura.claro .ap-fmt.f-figurinha { color:#8A4775; } .app-moldura.claro .ap-fmt.f-video { color:#3F5A80; } .app-moldura.claro .ap-fmt.f-banner { color:#B4501F; } .app-moldura.claro .ap-fmt.f-audio { color:#9A6400; }
.ap-lista .ap-fmt.mini { grid-column:3; grid-row:1 / 3; }
/* chamada tocando */
.wa-call { display:flex; flex-direction:column; align-items:center; gap:8px; padding:26px 16px 20px; background:#0B141A; color:#E9EDEF; }
.wa-call-av { position:relative; width:84px; height:84px; display:grid; place-items:center; margin-bottom:6px; }
.wa-call-av .av { width:72px; height:72px; font-size:22px; position:relative; z-index:1; background:#2A3942; color:#E9EDEF; }
.wa-call-av i { position:absolute; inset:0; border-radius:50%; border:2px solid rgba(0,168,132,.5); animation:toca 1.8s ease-out infinite; } .wa-call-av i + i { animation-delay:.9s; }
@keyframes toca { from { transform:scale(.85); opacity:1; } to { transform:scale(1.45); opacity:0; } }
.wa-call b { font-size:16px; } .wa-call-st { font-size:12.5px; color:#8696A0; } .wa-call-st em { font-style:normal; font-variant-numeric:tabular-nums; }
.wa-call-bts { display:flex; gap:8px; margin-top:10px; }
/* figurinha (sem balão, como figurinha de verdade) */
.wa-sticker { align-self:flex-end; width:150px; margin-bottom:6px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.4)); transform:rotate(-3deg); }
.wa-fig { width:100%; height:auto; display:block; }
.fmt-figurinha .ap-wa-m, .fmt-video .ap-wa-m, .fmt-banner .ap-wa-m, .fmt-audio .ap-wa-m { flex-direction:column; align-items:flex-end; gap:6px; }
/* áudio */
.ap-wa-m .bal.wa-audio { display:flex; align-items:center; gap:9px; width:250px; max-width:90%; padding:8px 10px; }
.wa-play { font-size:15px; color:#E9EDEF; width:16px; }
.wa-onda { flex:1; display:flex; align-items:center; gap:2px; height:26px; }
.wa-onda i { flex:1; height:var(--h); border-radius:2px; background:rgba(233,237,239,.55); }
.wa-audio.enviando .wa-onda i { animation:onda .8s ease-in-out infinite alternate; } .wa-audio.enviando .wa-onda i:nth-child(odd) { animation-delay:.2s; }
@keyframes onda { to { transform:scaleY(.35); } }
.wa-dur { font-size:11px; color:rgba(233,237,239,.7); } .wa-mic { width:30px; height:30px; font-size:10px; background:#2A3942; color:#E9EDEF; }
.wa-roteiro { margin:0; padding:10px 14px 12px; background:#111B21; color:#AEBAC1; font-size:12.5px; line-height:1.5; border-top:1px solid #222D34; }
.wa-roteiro small { display:block; color:var(--ambar2); font-size:11px; margin-bottom:4px; }
/* vídeo encaminhado e banner */
.ap-wa-m .bal.wa-midia { width:260px; max-width:92%; padding:4px 4px 7px; font-size:12.5px; line-height:1.45; }
.ap-wa-m .bal.wa-midia > :last-child { padding:0 5px; }
.wa-enc { display:block; color:rgba(233,237,239,.6); font-size:11px; font-style:italic; padding:2px 5px 4px; }
.wa-thumb { position:relative; height:140px; border-radius:6px; overflow:hidden; margin-bottom:6px; }
.wa-thumb.video { background:radial-gradient(circle at 25% 30%, rgba(0,200,170,.55), transparent 55%), radial-gradient(circle at 80% 70%, rgba(120,90,220,.6), transparent 60%), #141A2E; }
.wa-titulo { position:absolute; left:10px; top:10px; right:10px; font:700 14px/1.25 var(--fonte); color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.5); }
.wa-bplay { position:absolute; left:50%; top:55%; transform:translate(-50%, -50%); width:44px; height:44px; border-radius:50%; background:rgba(0,0,0,.45); display:grid; place-items:center; color:#fff; font-size:16px; }
.wa-dur2 { position:absolute; left:8px; bottom:6px; font-size:11px; color:#fff; }
.wa-thumb.banner { display:flex; flex-direction:column; justify-content:center; gap:3px; padding:14px 16px; background:linear-gradient(135deg, #1B1408, #0E1016 70%); border:1px solid rgba(200,134,10,.5); }
.wa-thumb.banner small { color:var(--ambar2); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.wa-thumb.banner b { font:700 19px/1.15 var(--fonte); color:#F2EEE8; } .wa-thumb.banner span { font-size:11.5px; color:#CBC5BD; }
.wa-thumb.banner em { align-self:flex-start; margin-top:6px; font-style:normal; font-size:11px; font-weight:700; color:#16110A; background:var(--ambar); padding:3px 9px; border-radius:99px; }
@media (prefers-reduced-motion:reduce) { .wa-call-av i, .wa-audio.enviando .wa-onda i { animation:none; } }
.ap-wa-c { max-height:calc(100% - 24px); display:flex; flex-direction:column; } .ap-wa-c > .ap-wa-m, .ap-wa-c > .wa-call { flex:1 1 auto; overflow-y:auto; min-height:0; } .ap-wa-c > .ap-wa-t, .ap-wa-c > .ap-wa-b, .ap-wa-c > .wa-roteiro { flex:none; }
.wa-sticker { width:124px; }

/* hero com um botão só: o "ver como funciona" vira um convite discreto pra rolar até a simulação do app */
.hero-rolar { display:inline-flex; flex-direction:column; align-items:center; gap:6px; margin-top:30px; color:var(--mut); font:13px var(--ui); transition:color .2s; }
.hero-rolar i { font-style:normal; font-size:16px; animation:rolar-seta 2.2s ease-in-out infinite; }
.hero-rolar:hover { color:var(--txt); }
.hero-prova + .hero-rolar { margin-top:22px; }
@keyframes rolar-seta { 0%, 100% { transform:none; opacity:.6; } 50% { transform:translateY(5px); opacity:1; } }
@media (prefers-reduced-motion:reduce) { .hero-rolar i { animation:none; } }

/* chat da demonstração: etapas visíveis e o resumo do compromisso */
.dc-etapas { display:flex; gap:6px; margin:0; padding:10px 14px; list-style:none; border-bottom:1px solid var(--linha); counter-reset:et; }
.dc-etapas li { flex:1; counter-increment:et; font-size:11.5px; color:var(--mut2); padding-top:7px; border-top:2px solid var(--card3); transition:color .2s, border-color .2s; }
.dc-etapas li::before { content:counter(et) " · "; }
.dc-etapas li.on { color:var(--txt2); border-color:var(--ambar); } .dc-etapas li.atual { color:var(--txt); font-weight:600; }
.dc-compromisso { display:grid; gap:4px; min-width:250px; padding:4px 2px; }
.dc-compromisso small { color:var(--ambar2); font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.dc-compromisso b { font-size:15px; color:var(--txt); margin-bottom:4px; } .dc-compromisso span { font-size:13.5px; color:var(--txt2); }
.dc-compromisso em { margin-top:6px; font-style:normal; font-size:12px; color:var(--mut); }
.dc-b.ponte:has(.dc-compromisso) { border:1px solid rgba(200,134,10,.45); background:#16130C; }
.dc-cal-nota { margin:0 0 10px; font-size:12.5px; color:var(--txt2); }

/* agenda real (Google Agenda) dentro do chat: o iframe ocupa a largura toda e tem altura de calendário */
.dc-agenda:has(.dc-cal) { padding:12px; background:#fff; border-color:rgba(255,255,255,.15); }
.dc-agenda:has(.dc-cal) .dc-cal-nota { color:#3C4043; }
.dc-cal { width:100%; height:560px; border:none; border-radius:10px; background:#fff; }
@media (max-width:640px) { .dc-cal { height:620px; } }

/* horários: 3 opções no visual escuro do PONTE (substitui o calendário branco do Google) */
.dc-slots { padding:14px; }
.dc-slots-st { margin:0 0 12px; color:var(--txt2); font-size:14px; line-height:1.5; }
.dc-slots-g { display:grid; gap:8px; }
.dc-slot { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:56px; padding:0 18px; border-radius:14px; border:1px solid var(--linha3); background:#141418; color:var(--txt); font:inherit; cursor:pointer; text-align:left; transition:border-color .15s, background .15s, transform .1s; }
.dc-slot b { font-size:15px; font-weight:600; } .dc-slot span { font-size:17px; font-weight:600; color:var(--ambar2); font-variant-numeric:tabular-nums; }
.dc-slot:hover { border-color:var(--ambar2); background:rgba(200,134,10,.08); } .dc-slot:active { transform:scale(.99); }
.dc-slot.dc-ok { justify-content:center; background:var(--ambar); border-color:var(--ambar); color:#16110A; font-weight:600; }
.dc-slot.dc-ok:disabled { opacity:.6; cursor:wait; } .dc-slot.dc-fim { justify-content:center; font-weight:500; }
.dc-outros { display:block; width:100%; margin-top:10px; padding:10px; background:none; border:none; color:var(--mut); font:13.5px var(--ui); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.dc-outros:hover { color:var(--txt); }
.dc-conf { padding:16px; border-radius:14px; border:1px solid rgba(200,134,10,.45); background:#16130C; display:grid; gap:4px; margin-bottom:12px; }
.dc-conf b { font-size:16px; } .dc-conf span { color:var(--txt2); font-size:13.5px; }
.dc-conf-bts { display:grid; gap:4px; }
.dc-agenda.dc-slots.feito { opacity:.55; pointer-events:none; }

/* os 3 horários mais próximos do dia, lado a lado */
.dc-slots-g.tres { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.dc-slots-g.tres .dc-slot { justify-content:center; min-height:60px; padding:0; }
.dc-slots-g.tres .dc-slot b { font-size:19px; color:var(--ambar2); font-variant-numeric:tabular-nums; }
.dc-slots-st b { color:var(--txt); }
.dc-slots-g.quatro { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.dc-slots-g.quatro .dc-slot { justify-content:center; min-height:58px; padding:0; }
.dc-slots-g.quatro .dc-slot b { font-size:19px; color:var(--ambar2); font-variant-numeric:tabular-nums; }