/* Site da SIA (servicosia.com.br), 24/10/2026. Carregado so no site da SIA, depois do site.css, que continua sendo o do ChatSIA
   e nao muda. Marca: manual oficial (docs/marca/sia/oficial/Manual_Identidade_Visual_SIA_Vetorial.pdf), que manda sobre a
   direcao anterior. Pegada: docs/marca/sia/pegada-layers.html (moldura no heroi, menu de vidro, grao, cartoes em grade,
   revelacao com desfoque), com o acabamento suave pedido pelo Daniel no mesmo dia.
   Cores do manual: laranja #FF5705 (acento e Pulso), preto #050505 (fundo), grafite #151515 (camadas e cartoes), cinza
   #9B9B9B (texto de apoio) e branco. No escuro, branco e laranja. As camadas de dentro das camadas (telas de demonstracao)
   usam o grafite clareado (#1C1C1C, #242424), sem matiz. So a Inter: titulos em ExtraBold e Bold, subtitulos em SemiBold,
   texto em Regular.
   Contraste (WCAG AA), conferido em 24/10/2026: branco sobre o preto, 20:1; cinza #9B9B9B sobre o preto, 7,3:1, e sobre o
   grafite, 6,6:1; laranja sobre o preto, 6,4:1. Branco sobre o laranja da 3,2:1: so nos botoes com letra grande (19 px em
   negrito, acima dos 18,66 px da regra); nos botoes pequenos (menu, "OK" do chat) o texto e #050505 (6,4:1).
   Partes: 1 cores e letras; 2 pele dos componentes do site.css (cores claras escritas a mao trocadas pelas escuras, regra a
   regra); 3 a pegada (grao, menu, botoes, heroi com o Pulso, cartoes, frases); 4 cada componente; 5 celular e "reduzir
   movimento"; 6 a coreografia da rolagem (sia-scroll.js). */

/* ---------------------------------------------------------------- 1 cores e letras */
:root{--preto:#050505;--grafite:#151515;--laranja:#FF5705;--cinza:#9B9B9B;--branco:#FFFFFF;
  --s1:#151515;--s2:#1C1C1C;--s3:#242424;
  --bg:#050505;--bg-2:#151515;--ink:#FFFFFF;--text:#FFFFFF;--muted:#9B9B9B;--line:rgba(255,255,255,.07);--line-2:rgba(255,255,255,.12);
  --brand:#FF5705;--brand-hover:#FF5705;--brand-soft:rgba(255,87,5,.12);--brand-tint:rgba(255,87,5,.32);--brand-glow:#FF5705;
  --ok-ink:#4ADE80;--ok-soft:rgba(37,211,102,.12);--warn:#F87171;--warn-soft:rgba(248,113,113,.1);
  --note:rgba(250,204,21,.07);--note-line:rgba(250,204,21,.2);--note-ink:#FDE68A;
  --dark:#050505;--dark-2:#151515;--dark-line:rgba(255,255,255,.07);--dark-text:#FFFFFF;--dark-muted:#9B9B9B;--appbg:#151515;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;--display:var(--font);
  --e:cubic-bezier(.22,1,.36,1);--e-out:cubic-bezier(.22,1,.36,1);
  --cartao:linear-gradient(180deg,#151515 0%,#050505 150%);
  --cartao-sombra:inset 0 1px 0 rgba(255,255,255,.04),0 30px 60px -44px rgba(0,0,0,.9);
  --r-bloco:24px;--r-botao:12px;color-scheme:dark}
html{background:var(--preto)}
body{background:var(--preto);color:var(--text);font-family:var(--font);font-weight:400;caret-color:var(--laranja);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:rgba(255,87,5,.38);color:#fff}
:focus-visible{outline-color:var(--laranja)}
h1,h2,h3{font-family:var(--font);color:#fff;text-transform:none;font-synthesis:none}
h1{font-weight:800;letter-spacing:-.045em}
h2{font-weight:700;font-size:clamp(34px,4.2vw,56px);line-height:1.04;letter-spacing:-.04em}
h3{font-weight:600;letter-spacing:-.02em}
h1 em,h2 em{font-style:normal;color:var(--cinza)}
.lead{color:var(--cinza);font-weight:400;max-width:60ch}

/* ---------------------------------------------------------------- 2 pele dos componentes do site.css
   Feita a partir do site.css de 24/10/2026: cada regra com cor clara (ou o roxo do ChatSIA) escrita a mao, so as que usam
   classes das paginas e dos scripts do site da SIA, com a cor trocada (branco: --s1; cinza claro: --s2; roxo: laranja). Mudou
   uma regra dessas no site.css? Conferir aqui. */
.btn.white{background:var(--s1)}
.btn.white:hover{background:var(--s2)}
.btn.wa{background:var(--s1)}
.btn.wa:hover{background:var(--s1)}
.app{background:var(--s1)}
.app-bar{background:var(--s2)}
.app-bar i{background:var(--s2)}
.app-url{background:var(--s1)}
.cv-pane{background:var(--s1)}
.cv:hover{background:var(--s2)}
.cv-ch{background:var(--s1)}
.cv-tags i,.s-tags i{background:var(--s2)}
.chat{background:var(--s2)}
.chat-head{background:var(--s1)}
.c-status{background:var(--s1)}
.c-status.done{border-color:var(--line-2)}
.msg.in{background:var(--s1)}
.composer{background:var(--s1)}
.side{background:var(--s1)}
.shot{background:var(--s1)}
.kb-head{background:var(--s1)}
.kb-view{background:var(--s2)}
.kb-view i.on{background:var(--s1)}
.kb-cols{background:var(--s2)}
.kb-col h4 i{background:var(--s1)}
.kb-card{background:var(--s1)}
.ladder .n{color:var(--brand)}
input,textarea,select{background:var(--s1)}
select{background:var(--s1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6478' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center/16px no-repeat}
.ops{background:var(--s1)}
.who.sia{background:var(--s2)}
.chat-only .chat{background:var(--s2)}
.li-ic{background:linear-gradient(145deg,var(--brand) 0%,var(--brand) 55%,var(--brand) 100%);box-shadow:0 10px 24px -10px rgba(255,87,5,.55),inset 0 1px 0 rgba(255,255,255,.22)}
.gray .checks.icons i{background:var(--s1)}
.gray .faq .fq-ic{background:var(--s1)}
.drop{background:var(--s1)}
.drop:hover,.drop.over{box-shadow:0 0 0 6px rgba(255,87,5,.06)}
.money{background:var(--s1)}
.diag-hero{background:var(--s1)}
.diag-kpis div{background:var(--s1)}
#ver-agora .diag-list li{background:var(--s1)}
.diag-manual{background:var(--s1)}
.gray .plan{background:var(--s1)}
@media (max-width:760px){.menu{background:var(--s1)}
}.btn.white{background:var(--s1)}
.btn.white:hover{background:var(--s2)}
.rail i.on{background:var(--s1)}
.cv-pane,.chat,.side{background:var(--s1)}
.plan{background:var(--s1)}
.person{background:var(--s1)}
.demo-pause{background:var(--s1)}
.demo-pause:hover{background:var(--s2)}
.cv{background:var(--s1)}
.chap-mode .rail-ind{background:var(--s1)}
.sc-card{background:var(--s1)}
.scn-funnel .kb-cols{background:var(--s1)}
.scn-funnel .kb-col{background:var(--s2)}
.pill{background:var(--s1)}
.ag-alt{background:var(--s1)}
.diag-prog{background:var(--s2)}
.diag-prog::-webkit-progress-bar{background:var(--s2)}
#ver-agora .diag-list{background:var(--s1)}
#ver-agora .diag-list .av{background:var(--s2)}
#ver-agora .diag-list li:nth-child(6n+2) .av{background:rgba(255,87,5,.12)}
#ver-agora .diag-list li:nth-child(6n+3) .av{background:var(--s2)}
#ver-agora .diag-list li:nth-child(6n+4) .av{background:rgba(255,87,5,.12)}
#ver-agora .diag-list li:nth-child(6n+5) .av{background:rgba(37,211,102,.14)}
#ver-agora .diag-list li:nth-child(6n) .av{background:var(--s2)}
.conv{background:var(--s1)}
.conv-av::after{box-shadow:0 0 0 2.5px var(--s1)}
.conv-form{background:var(--s1)}
.conv-fab::after{box-shadow:0 0 0 2.5px var(--s1)}
.conv-fab-t{background:var(--s1)}
.conv-voltar{background:var(--s1)}
.dbar{background:var(--s1)}
.menu-cta::before{background:linear-gradient(135deg,var(--brand),var(--brand))}
.menu-cta.on:hover::before{background:linear-gradient(135deg,var(--brand),var(--brand))}
.fila .diag-list .cv:hover{background:var(--s1)}
.cena{background:linear-gradient(140deg,var(--s2) 0%,var(--s2) 100%)}

/* ---------------------------------------------------------------- 3 a pegada */
/* grao de filme: fino e leve, quase imperceptivel; nunca pega clique */
.grao{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.25' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* menu: faixa que some para baixo e os links numa pilula de vidro (mais translucida, blur maior, borda sutil) */
.nav,.nav.on-dark,.nav.top{background:linear-gradient(180deg,rgba(5,5,5,.88) 0%,rgba(5,5,5,.66) 100%);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid rgba(255,255,255,.04)}
.nav .wrap{height:68px}
.brand{padding:8px;margin-left:-8px}   /* area livre em volta do logo: a largura do quadrado (manual, pagina 10) */
.brand img.sia-logo,.nav .brand img.cs,.nav.on-dark .brand .cs{display:block;height:30px;width:auto}
.menu{gap:12px}
.pilula{display:flex;gap:2px;padding:4px;border-radius:999px;background:rgba(21,21,21,.32);border:1px solid rgba(255,255,255,.06);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%)}
.menu .pilula a:not(.btn){color:var(--cinza);opacity:1;font-size:14.5px;font-weight:500;padding:8px 15px;border-radius:999px;transition:background-color .6s var(--e),color .6s var(--e)}
.menu .pilula a:not(.btn):hover{background:rgba(255,255,255,.05);color:#fff}
.menu .pilula a[aria-current]{background:rgba(255,255,255,.07);color:#fff}
.nav .burger,.nav.on-dark .burger{color:#fff}
.menu-cta::before{display:none}
/* botoes do manual: laranja, cantos arredondados (nao pilula), texto em negrito e a seta da microinteracao. Texto branco so
   com letra grande (19 px, negrito); pequenos com texto #050505 */
.btn{position:relative;background:var(--laranja);color:#fff;font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.1;gap:10px;padding:15px 22px;min-height:52px;border-radius:var(--r-botao);border:1px solid transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 30px -18px rgba(255,87,5,.6);transition:translate .6s var(--e),scale .3s var(--e),box-shadow .6s var(--e),background-color .6s var(--e),border-color .6s var(--e)}
.btn:hover{background:var(--laranja);translate:0 -1px;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 18px 44px -16px rgba(255,87,5,.7)}
.btn:active{translate:0 0;scale:.99}
.btn::after{content:"";flex:none;width:17px;height:17px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .6s var(--e)}
.btn:hover::after{transform:translateX(3px)}
.btn.white,.btn.grad,.btn.grad.cede{background:var(--laranja);color:#fff}
.btn.ghost,.btn.vidro,.dark .btn.ghost,.btn.wa,.dark .btn.wa{background:rgba(255,255,255,.04);color:#fff;border-color:rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.btn.ghost:hover,.btn.vidro:hover,.dark .btn.ghost:hover,.btn.wa:hover,.dark .btn.wa:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 16px 40px -24px rgba(0,0,0,.9)}
.heroi .btn.vidro::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E")}
.heroi .btn.vidro:hover::after{transform:translateY(2px)}
.btn.wa::after,.btn:has(>img)::after,.btn:has(>svg)::after{display:none}
.btn.wa,.btn:has(>img),.btn:has(>svg){font-size:17px;font-weight:600}   /* contorno com icone: texto branco sobre o escuro, sem precisar da letra grande */
.btn.wa:hover{border-color:rgba(37,211,102,.45)}
.btn.sm{min-height:0;padding:9px 14px;font-size:14px;font-weight:600;color:var(--preto);gap:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.btn.sm::after{width:14px;height:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23050505' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.link,.dark .link{color:var(--laranja);font-weight:600;transition:opacity .6s var(--e)}
.link:hover{opacity:.82}
/* heroi: cena de cinema numa moldura de cantos arredondados, com o Pulso SIA animado (sia-cena.js) */
.sia-hero{padding:0;text-align:left;background:var(--preto)}
.moldura{position:relative;margin:8px 16px 0;height:calc(100vh - 92px);height:calc(100svh - 92px);min-height:600px;max-height:1000px;border-radius:28px;border:1px solid rgba(255,255,255,.07);overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  background:radial-gradient(42% 52% at 86% 66%,rgba(255,87,5,.11),transparent 72%),radial-gradient(90% 70% at 20% 0%,rgba(255,255,255,.025),transparent 60%),linear-gradient(180deg,#151515 0%,#050505 100%)}
.sia-cena{position:absolute;inset:0;width:100%;height:100%;display:block}
.heroi{position:relative;z-index:2;height:100%;max-width:880px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:clamp(72px,14vh,150px) clamp(28px,6vw,96px) 48px}
.selo{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:500;line-height:1.3;color:#fff;padding:7px 14px 7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(21,21,21,.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.selo::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--laranja);box-shadow:0 0 12px rgba(255,87,5,.7)}
.sia-hero h1{margin-top:26px;font-size:clamp(48px,6.6vw,100px);line-height:.98;letter-spacing:-.05em}
.laranja{color:var(--laranja)}
.sia-hero .lead{max-width:34em;margin:26px 0 0;font-size:clamp(17px,1.3vw,19px);line-height:1.55}
.sia-hero .ctas{margin-top:34px;gap:12px;justify-content:flex-start}
.sia-hero .hero-note{margin-top:18px;color:var(--cinza);font-size:13.5px}
/* o painel da operacao do dia, logo abaixo, como cartao escuro */
.sia-hero .stage{margin-top:20px;background:transparent;padding:0 0 clamp(64px,8vw,112px)}
.sia-hero .stage .ops{margin-top:0}
/* cartoes em grade: borda fina, degrade do grafite para o preto, brilho interno no topo, cantos de 24 px, mesmo respiro */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.svc-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:24px;padding:30px;border-radius:var(--r-bloco);border:1px solid rgba(255,255,255,.07);background:var(--cartao);box-shadow:var(--cartao-sombra);scroll-margin-top:100px;transition:translate .7s var(--e),border-color .7s var(--e),box-shadow .7s var(--e)}
.svc-card::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;right:-140px;top:-170px;background:radial-gradient(circle,rgba(255,87,5,.16),transparent 68%);filter:blur(30px);opacity:0;transition:opacity .9s var(--e);pointer-events:none}
.svc-card:first-child::before,.bento .svc-card:hover::before,.svc-card:target::before{opacity:1}
.bento .svc-card:hover{translate:0 -3px;border-color:rgba(255,255,255,.11);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 40px 80px -50px rgba(255,87,5,.28)}
.svc-card:target{border-color:rgba(255,87,5,.35)}
.svc-top{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px}
.svc-card small{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--laranja);font-variant-numeric:tabular-nums}
.svc-tag,.plan-badge{display:inline-flex;align-items:center;font-size:12.5px;font-weight:500;line-height:1.2;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:#fff}
.svc-txt{position:relative}
.svc-card h3{font-size:24px;font-weight:700;letter-spacing:-.03em}
.svc-card .svc-txt p{margin-top:8px;color:var(--cinza);font-size:15.5px;line-height:1.55}
.svc-list{position:relative;list-style:none;margin:0;padding:22px 0 0;border-top:1px solid rgba(255,255,255,.06);display:grid;gap:12px}
.svc-list li{font-size:14.5px;line-height:1.55;color:var(--cinza)}.svc-list b{color:#fff;font-weight:600}
/* ---------------------------------------------------------------- 4 componentes */
section{padding:clamp(96px,11vw,160px) 0}
.gray{background:var(--preto);border-top:1px solid rgba(255,255,255,.04)}
.head{max-width:none;margin:0 0 clamp(40px,5vw,64px);text-align:left}
.head h2{max-width:24ch}
.head h2 em{display:block}
.head .ctas,.head .ctas.center{justify-content:flex-start;margin-top:24px}
.list-2,.faq,.narrow,.person{margin-left:0}.list-2{max-width:none}
.head .lead,.split .head .lead{margin-left:0;margin-top:18px;max-width:58ch;font-size:clamp(17px,1.3vw,19px);line-height:1.55}
.hero.plain h1,.contact h1{font-size:clamp(40px,5vw,68px);line-height:1.02;letter-spacing:-.045em}
.offer h2{max-width:16ch}
p,li{text-wrap:pretty}
.prose p,.person p,.faq p,.ladder p,.how-start,.panel p{max-width:65ch}
.sec-logo{margin:0 0 22px}
.note{color:var(--cinza);font-weight:400}
.hero-note,.demo-cap,.demo figcaption{color:var(--cinza)}
/* chamada final: bloco com halo laranja difuso e o Pulso como fundo, discreto */
section.dark.cta{background:var(--preto);padding:clamp(72px,9vw,128px) 0 clamp(48px,6vw,80px)}
section.dark.cta>.wrap{position:relative;overflow:hidden;border-radius:28px;border:1px solid rgba(255,255,255,.07);padding:clamp(64px,8vw,104px) clamp(28px,6vw,80px);text-align:left;box-shadow:var(--cartao-sombra);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 812 370'%3E%3Cpath d='M 7 254 C 180 280 265 252 389 203 C 530 148 591 120 699 138' fill='none' stroke='%23FF5705' stroke-width='8' opacity='.7' stroke-linecap='round'/%3E%3Cpath d='M 0 299 C 177 324 298 300 425 243 C 544 190 626 165 702 175' fill='none' stroke='%23FF5705' stroke-width='5' opacity='.42' stroke-linecap='round'/%3E%3Cpath d='M 50 343 C 225 370 352 327 471 286 C 591 244 654 221 705 217' fill='none' stroke='%23FF5705' stroke-width='3.1' opacity='.22' stroke-linecap='round'/%3E%3C/svg%3E") right clamp(28px,5vw,72px) center/min(440px,36%) auto no-repeat,
  radial-gradient(46% 70% at 84% 50%,rgba(255,87,5,.12),transparent 70%),var(--cartao)}
section.dark.cta>.wrap>*{position:relative;max-width:600px}
section.dark.cta .ctas{justify-content:flex-start}
section.dark.cta h2{font-size:clamp(34px,4.2vw,56px);line-height:1.04;letter-spacing:-.04em}
section.dark.cta .lead{color:var(--cinza);margin-left:0}
.dark .end-ic,.end-ic,.dark.cta .end-ic{display:block;width:auto;height:44px;margin:0 0 36px;border-radius:0}
/* "Vamos montar o seu caminho": o fim da inicial, com a caixa de conversa e o Pulso como grafismo ao lado do texto */
.caminho{border-top:1px solid rgba(255,255,255,.04);background:radial-gradient(40% 50% at 20% 85%,rgba(255,87,5,.07),transparent 70%),var(--preto)}
.caminho .offer{align-items:center}
.caminho h2{max-width:14ch}
.caminho h2 em{display:block}
.caminho .lead{margin-top:20px}
.caminho .checks{margin-top:30px}
.caminho .checks a,.caminho .how-start a,.svc-list a,.faq p a{color:var(--laranja);font-weight:600;text-decoration:none;transition:opacity .6s var(--e)}
.caminho .checks a:hover,.caminho .how-start a:hover,.svc-list a:hover,.faq p a:hover{opacity:.8}
.caminho .how-start{margin-top:26px;color:var(--cinza)}.caminho .how-start b{color:#fff;font-weight:600}
.caminho .how-start .link{font-size:inherit}
.caminho-pulso{margin-top:40px;width:min(340px,78%);aspect-ratio:812/370;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 812 370'%3E%3Cpath d='M 7 254 C 180 280 265 252 389 203 C 530 148 591 120 699 138' fill='none' stroke='%23FF5705' stroke-width='8' opacity='.8' stroke-linecap='round'/%3E%3Cpath d='M 0 299 C 177 324 298 300 425 243 C 544 190 626 165 702 175' fill='none' stroke='%23FF5705' stroke-width='5' opacity='.5' stroke-linecap='round'/%3E%3Cpath d='M 50 343 C 225 370 352 327 471 286 C 591 244 654 221 705 217' fill='none' stroke='%23FF5705' stroke-width='3.1' opacity='.26' stroke-linecap='round'/%3E%3C/svg%3E") left center/contain no-repeat}
.svc-list a{display:inline-block}
/* superficies: grafite com borda fina e brilho no topo */
.app,.ops,.shot,.conv,.diag-hero,.diag-manual,#ver-agora .diag-list,.person,.panel,.plan,.tile,.tiles>div,.credit-card,.fila-tool{border:1px solid rgba(255,255,255,.07);box-shadow:var(--cartao-sombra)}
.app,.ops,.shot{border-radius:20px}
.panel,section:not(.gray) .person,.person{background:var(--cartao);border-radius:var(--r-bloco)}
.person p{color:var(--cinza)}
.plan{background:var(--cartao);border-radius:var(--r-bloco);padding:clamp(28px,3vw,36px);transition:transform .7s var(--e),border-color .7s var(--e),box-shadow .7s var(--e)}
.plans .plan:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.11)}
.plan.featured{transform:none;border-color:rgba(255,87,5,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 40px 90px -50px rgba(255,87,5,.4)}
.plan h3{font-size:22px}
.plan .tagline{color:var(--cinza)}
.plan-badge{border-color:rgba(255,87,5,.3);background:rgba(255,87,5,.08);color:#fff}
.price b{font-weight:800;letter-spacing:-.045em;color:#fff}
.price span{color:var(--cinza)}
.ladder.light li{border-color:rgba(255,255,255,.08)}
.ladder.light .n,.ladder .n{font-weight:800;letter-spacing:-.05em;color:var(--laranja)}
.ladder.light h3{color:#fff}.ladder.light p{color:var(--cinza)}.ladder.light .tag{color:#fff;font-weight:500}.ladder.light .tag::before{background:var(--laranja);box-shadow:0 0 10px rgba(255,87,5,.6)}
.ladder-line i{background:linear-gradient(90deg,rgba(255,87,5,.2),var(--laranja))}
/* icones: traco fino e uniforme, em tile grafite com o mesmo respiro */
svg[stroke="currentColor"]{stroke-width:1.6}
.li-ic{background:linear-gradient(180deg,#1C1C1C,#151515);border:1px solid rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);color:var(--laranja)}
.checks.icons i,.gray .checks.icons i,.faq .fq-ic,.gray .faq .fq-ic{background:rgba(255,87,5,.07);border:1px solid rgba(255,87,5,.14);color:var(--laranja);box-shadow:none}
.faq details[open] .fq-ic{background:rgba(255,87,5,.14);border-color:rgba(255,87,5,.3);color:var(--laranja)}
.checks li::before{background:rgba(255,87,5,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF5705' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/11px no-repeat}
.dots li::before{background:var(--laranja)}
.dots li,.list-2 p,.checks li{color:var(--text)}
.faq summary{color:#fff;font-weight:500;transition:color .6s var(--e)}.faq summary:hover{color:#fff;opacity:.86}
.faq summary::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239B9B9B' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .6s var(--e)}
.faq p{color:var(--cinza)}
.faq details{border-color:rgba(255,255,255,.07)}
/* formularios e caixa de conversa */
input,textarea,select{color:#fff;border-color:rgba(255,255,255,.12)}
::placeholder{color:#8A8A8A;opacity:1}
.conv{background:var(--cartao);border-radius:var(--r-bloco)}
.conv-head{border-bottom-color:rgba(255,255,255,.06)}
.conv-m.ag{background:var(--s2);color:#fff}
.conv-m.eu{background:var(--s3);color:#fff;border:1px solid rgba(255,87,5,.28)}.conv-m.eu a{color:#fff}
.conv-form{background:var(--s2);border-color:rgba(255,255,255,.1)}
.conv-form:focus-within{border-color:rgba(255,87,5,.5);box-shadow:0 0 0 4px rgba(255,87,5,.1)}
.conv-form button{color:#fff;border-radius:12px}
.conv-ok{color:var(--preto);border-radius:12px;font-weight:700}
.conv-acts button{border-radius:12px}
.conv-sug button{color:#fff;border-color:rgba(255,255,255,.1);border-radius:12px}.conv-sug button:hover{border-color:rgba(255,87,5,.45);color:#fff}
.conv-n{color:var(--laranja)}
.conv-fab{background:var(--laranja);box-shadow:0 16px 40px -14px rgba(255,87,5,.55)}
.conv-fab-x{color:#fff}
.conv-fab::after,.conv-av::after{box-shadow:0 0 0 2.5px var(--preto)}
.conv-fab-t{background:var(--s2);color:#fff;border:1px solid rgba(255,255,255,.08)}
.conv-pop .conv{box-shadow:0 30px 80px -24px rgba(0,0,0,.9)}
.conv-voltar{background:transparent;color:#fff}
.dbar{background:rgba(10,10,10,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid rgba(255,255,255,.06);box-shadow:0 -12px 30px -18px rgba(0,0,0,.9)}
/* capitulos do dia a dia e telas de demonstracao: o mesmo painel, no escuro */
.chap,.st-gray,.st-white{background:var(--preto)}
.chap-mode .chap::before{background:var(--preto)}
.app-bar{border-bottom-color:rgba(255,255,255,.06)}
.app-bar i{background:#2E2E2E}
.app-url{color:var(--cinza);border-color:rgba(255,255,255,.06)}
.rail{background:#0B0B0B}
.cv-av,.kb-av,#ver-agora .diag-list .av{color:var(--preto)}
.cv.on,.app.crop .cv.on:hover{background:rgba(255,87,5,.08)}
.msg.out{background:rgba(255,87,5,.16);color:#fff}
.who.ia{background:rgba(255,87,5,.12);color:var(--laranja)}
.who.sia{background:var(--s3);color:#fff}
.ops-live{color:var(--ok-ink);background:var(--ok-soft)}
.demo-pause{color:#fff}
.photo{background:var(--s1)}
/* rodape */
footer{background:var(--preto);border-top:1px solid rgba(255,255,255,.06)}
.foot-brand img.sia-logo{height:34px;width:auto;margin:0 auto;padding:0}
.foot-brand{padding:9px 0}
.foot-brand p{margin-top:16px;color:var(--cinza)}
.foot .foot-h{color:#fff;font-weight:600}
.foot a{color:var(--cinza);transition:color .6s var(--e)}.foot a:hover{color:#fff}
.foot-note,.foot-legal,.foot-legal a{color:var(--cinza)}.foot-legal a:hover{color:#fff}
/* logo em texto (so se o SVG faltar) */
.logo-txt{display:inline-block;font-weight:800;letter-spacing:-.04em;line-height:1;color:#fff}.logo-txt b{color:var(--laranja)}

/* ---------------------------------------------------------------- 5 celular e "reduzir movimento" */
@media (max-width:1000px){.bento{grid-template-columns:1fr}}
@media (max-width:760px){
  .pilula{display:contents}
  .menu{background:rgba(5,5,5,.97);border-bottom:1px solid rgba(255,255,255,.06)}
  .menu .pilula a:not(.btn){padding:6px 0;font-size:17px;background:none;color:#fff}
  .nav.on-dark:has(.menu.open),.nav:has(.menu.open){background:rgba(5,5,5,.97)}
  .nav .wrap{height:62px}
  .brand img.sia-logo,.nav .brand img.cs{height:26px}
  .nav .nav-cta-m{padding:8px 12px;font-size:13.5px}
  section{padding:clamp(80px,20vw,104px) 0}
  .btn{font-size:19px}
  .moldura{margin:4px 10px 0;height:auto;min-height:calc(100svh - 76px);border-radius:24px;
    background:radial-gradient(70% 26% at 82% 6%,rgba(255,87,5,.14),transparent 72%),linear-gradient(180deg,#151515 0%,#050505 100%)}
  /* no celular, o Pulso fica no alto da moldura, acima do selo (sia-cena.js), longe do botao do chat, que fica embaixo */
  .heroi{max-width:none;min-height:calc(100svh - 76px);padding:min(46vw,200px) 20px 56px}
  .caminho-pulso{width:min(260px,70%);margin-top:28px}
  .sia-hero h1{font-size:clamp(42px,12vw,58px)}
  .sia-hero .ctas{flex-direction:column;align-items:stretch;width:100%}
  .sia-hero .ctas .btn{justify-content:space-between}
  .svc-card{padding:24px}
  .dores{grid-template-columns:1fr}
  h2{font-size:clamp(32px,9vw,42px)}
  section.dark.cta h2{font-size:clamp(34px,9.6vw,44px)}
  section.dark.cta>.wrap{margin:0 10px;padding:52px 22px 190px;background-position:right 18px bottom 28px,0 0,0 0;background-size:min(300px,80%) auto,auto,auto}
}
@media (prefers-reduced-motion:reduce){.btn,.btn::after,.svc-card,.no,.mont-chip,.mont-frase,.mp-item{transition:none}}

/* ---------------------------------------------------------------- 6 coreografia da rolagem (sia-scroll.js, 24/10/2026)
   Tudo aqui so muda o desenho; os estados escondidos de antes da revelacao sao postos pelo GSAP, nunca pelo CSS. Sem
   JavaScript, sem o CDN ou com "reduzir movimento", a pagina fica inteira e parada. Nenhuma regra daqui tem transition numa
   propriedade que o GSAP anima (transform e opacity dos elementos da coreografia). */
/* mascara por linha dos titulos: o corte deixa espaco para os acentos e as letras que descem */
.lm{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em .06em .12em 0;margin:-.14em -.06em -.12em 0}
.lm>.li{display:inline-block}
.head h2 em.lm,.caminho h2 em.lm{display:block}
/* o fio do Pulso, atras do conteudo e nas margens */
main{position:relative}
.fio-svg{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:0;overflow:visible}
html.sia-fio main>section{position:relative;z-index:1;background-color:transparent}
html.sia-fio .gray{background:transparent}
html.sia-fio .caminho-pulso{background:none}
/* as tres etapas presas na tela (so em tela larga, com a classe que o sia-scroll.js poe) */
#servicos.pin-on{height:100vh;padding:0;background:var(--preto);overflow:hidden;border-top:0;z-index:2}
#servicos.pin-on>.wrap{height:100%;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto auto 1fr auto;column-gap:clamp(48px,6vw,96px);padding-block:clamp(88px,12vh,128px) clamp(40px,7vh,72px)}
#servicos.pin-on .head{grid-column:1;grid-row:1;margin:0}
#servicos.pin-on .head h2{max-width:12ch}
#servicos.pin-on .head .lead{max-width:34ch}
#servicos.pin-on .etapas-meta{grid-column:1;grid-row:2;align-self:start;margin-top:clamp(28px,5vh,52px)}
#servicos.pin-on>.wrap>.ctas{grid-column:1;grid-row:4;margin:0;align-self:end;justify-content:flex-start}
#servicos.pin-on .bento{grid-column:2;grid-row:1/5;display:grid;grid-template-columns:minmax(0,1fr);align-items:start;align-self:center;gap:0}
#servicos.pin-on .svc-card{grid-area:1/1;transform-origin:50% 0;will-change:transform;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 -30px 60px -40px rgba(0,0,0,.95)}
#servicos.pin-on .svc-card::before{opacity:0}
#servicos.pin-on .svc-card:hover{translate:none}
.svc-veu{position:absolute;inset:0;z-index:3;background:var(--preto);opacity:0;pointer-events:none;border-radius:inherit}
.etapas-meta{display:flex;flex-direction:column;gap:6px}
.etapas-num{display:block;height:1em;overflow:hidden;font-size:clamp(76px,7.4vw,116px);font-weight:800;letter-spacing:-.06em;line-height:1;color:var(--laranja);font-variant-numeric:tabular-nums}
.etapas-nome{display:block;height:1.4em;overflow:hidden;font-size:17px;line-height:1.4;font-weight:600;color:#fff;letter-spacing:-.01em}
.num-col,.nome-col{display:flex;flex-direction:column}
.num-col b{display:block;height:1em;font-weight:800}
.nome-col b{display:block;height:1.4em;font-weight:600}
.etapas-fio{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:rgba(255,255,255,.06);z-index:4}
.etapas-fio>i{position:absolute;inset:0;background:var(--laranja);transform-origin:50% 0}
.etapas-fio>b{position:absolute;left:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:3px;border:1px solid rgba(255,87,5,.45);background:var(--preto);transition:background-color .6s var(--e),box-shadow .6s var(--e)}
.etapas-fio>b.on{background:var(--laranja);box-shadow:0 0 16px rgba(255,87,5,.55)}
/* automacoes: o fio entre os sistemas que a SIA liga */
#automacoes .head h2{max-width:22ch}
.nos{position:relative;display:flex;justify-content:space-between;gap:16px;margin:8px 0 0;padding:6px 0}
.nos-fio{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:rgba(255,255,255,.07)}
.nos-fio i{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,87,5,.2),var(--laranja));transform-origin:0 50%}
.no{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;padding:14px 20px;border-radius:14px;border:1px solid rgba(255,255,255,.09);background:var(--cartao);box-shadow:var(--cartao-sombra);font-size:15px;font-weight:600;color:#fff;letter-spacing:-.01em;transition:border-color .7s var(--e),box-shadow .7s var(--e)}
.no::before{content:"";width:7px;height:7px;border-radius:2px;background:rgba(255,255,255,.25);transition:background-color .7s var(--e)}
.no.on{border-color:rgba(255,87,5,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 34px -18px rgba(255,87,5,.55)}
.no.on::before{background:var(--laranja)}
#automacoes .ctas{margin-top:44px}
/* linhas que se desenham (perguntas) */
.row-linha{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:rgba(255,255,255,.1);transform-origin:0 50%;pointer-events:none}
.row-linha.topo{top:-1px;bottom:auto}
html.sia-mov #perguntas details{border-top-color:transparent;position:relative}
@media (max-width:1000px){.nos{flex-wrap:wrap;justify-content:flex-start}.nos-fio{display:none}}
@media (max-width:760px){
  .nos{flex-direction:column;align-items:flex-start;gap:10px}
  .no{padding:12px 16px}
}

/* ---------------------------------------------------------------- 7 montador de plano, fotos e ritmo das secoes (24/10/2026)
   O montador (sia-montador.js) nao usa o GSAP: as transicoes daqui (cor, borda, sombra, a barra de progresso) sao so dele. As
   entradas dos itens do painel sao animacoes do proprio navegador (Web Animations), em transform e opacity. */
#monte:not(.mont-on) .mont{display:none}
#monte.mont-on .mont-semjs{display:none}
.mont-semjs{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;padding:28px;border-radius:24px;border:1px solid rgba(255,255,255,.08);background:var(--grafite)}
.mont-semjs p{color:var(--cinza);max-width:52ch}
#monte{padding-block:clamp(88px,10vw,140px)}
#monte .head{margin-bottom:clamp(28px,3.5vw,44px)}
/* o painel do montador: o grafite usado de proposito, com a foto do caderno no fundo do passo do contato */
.mont{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding:clamp(22px,3vw,40px);border-radius:28px;border:1px solid rgba(255,255,255,.08);background:var(--grafite);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 40px 90px -60px rgba(0,0,0,.95);overflow:hidden}
@media (min-width:1000px){.mont{grid-template-columns:minmax(0,7fr) minmax(300px,4fr);gap:clamp(32px,4vw,56px);align-items:start}}
.mont-foto{position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity 1s var(--e);pointer-events:none}
.mont-foto img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.mont-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,5,5,.88) 0%,rgba(5,5,5,.8) 55%,rgba(5,5,5,.7) 100%)}
.mont.no-contato .mont-foto,.mont.enviado .mont-foto{opacity:1}
.mont.no-contato,.mont.enviado{background:#0B0B0B}
/* trilha dos passos e a barra fina de progresso */
.mont-topo{margin-bottom:clamp(24px,3vw,36px)}
.mont-trilha{list-style:none;margin:0;padding:0;display:flex;gap:clamp(10px,2vw,28px);flex-wrap:wrap}
.mont-trilha li{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;color:var(--cinza);transition:color .5s var(--e)}
.mont-trilha b{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;border:1px solid rgba(255,255,255,.14);font-size:12px;font-weight:700;color:var(--cinza);transition:background-color .5s var(--e),border-color .5s var(--e),color .5s var(--e)}
.mont-trilha li.agora{color:#fff}.mont-trilha li.agora b{border-color:var(--laranja);color:#fff;background:rgba(255,87,5,.16)}
.mont-trilha li.feito b{border-color:transparent;background:var(--laranja);color:#fff}
.mont-barra{position:relative;height:2px;margin-top:18px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.mont-barra i{position:absolute;inset:0;background:var(--laranja);transform-origin:0 50%;transform:scaleX(.08);transition:transform .9s var(--e)}
/* cada passo */
.mont-passo h3{font-size:clamp(26px,2.5vw,36px);font-weight:700;letter-spacing:-.035em;line-height:1.08;outline:none}
.mont-apoio{margin-top:10px;color:var(--cinza);font-size:15.5px;max-width:56ch}
.mont-frases{margin-top:22px;border-top:1px solid rgba(255,255,255,.08)}
.mont-frase{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:18px 4px;border:0;border-bottom:1px solid rgba(255,255,255,.08);background:none;color:#fff;font:inherit;text-align:left;cursor:pointer;transition:color .4s var(--e),background-color .4s var(--e)}
.mont-frase:hover{background:rgba(255,255,255,.025)}
.mf-t{font-size:clamp(18px,1.7vw,23px);font-weight:600;letter-spacing:-.02em;line-height:1.3}
.mf-e{flex:none;display:inline-flex;align-items:center;gap:12px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cinza);transition:color .4s var(--e)}
.mf-e::after{content:"";width:22px;height:22px;border-radius:6px;border:1px solid rgba(255,255,255,.22);transition:background-color .4s var(--e),border-color .4s var(--e)}
.mont-frase[aria-pressed="true"] .mf-e{color:var(--laranja)}
.mont-frase[aria-pressed="true"] .mf-e::after{border-color:var(--laranja);background:var(--laranja) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/13px no-repeat;animation:acende .6s var(--e)}
.mont-grupo{margin-top:24px}
.mont-grupo h4{margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cinza)}
.mont-chips{display:flex;flex-wrap:wrap;gap:9px}
.mont-chip{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:10px 15px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.02);color:#fff;font:inherit;font-size:15px;font-weight:500;cursor:pointer;transition:background-color .4s var(--e),border-color .4s var(--e),box-shadow .5s var(--e)}
.mont-chip::before{content:"";width:8px;height:8px;border-radius:2px;background:rgba(255,255,255,.22);transition:background-color .4s var(--e)}
.mont-chip:hover{border-color:rgba(255,255,255,.26)}
.mont-chip[aria-pressed="true"]{border-color:rgba(255,87,5,.6);background:rgba(255,87,5,.12);animation:acende .6s var(--e)}
.mont-chip[aria-pressed="true"]::before{background:var(--laranja)}
@keyframes acende{0%{box-shadow:0 0 0 0 rgba(255,87,5,.55)}100%{box-shadow:0 0 0 10px rgba(255,87,5,0)}}
.mont-chat{margin-top:22px}
.mont-chat .conv{max-width:none;height:min(560px,70vh);min-height:440px}
.mont-envia{margin-top:18px}
.mont-falha{margin-top:18px;padding:20px 22px;border-radius:18px;border:1px solid rgba(255,87,5,.3);background:rgba(255,87,5,.06)}
.mont-falha p{margin-bottom:14px;color:#fff}
.mont-nav{display:flex;align-items:center;flex-wrap:wrap;gap:12px 14px;margin-top:30px}
.mont-reacao{min-height:1.5em;font-size:14.5px;font-weight:600;color:var(--laranja)}
.mont-fim{margin:4px 0 26px}
.mf-frase{font-size:clamp(44px,5.4vw,80px);font-weight:800;letter-spacing:-.05em;line-height:1}
.mf-apoio{margin-top:16px;color:var(--cinza);font-size:clamp(16px,1.3vw,19px);max-width:46ch}
.mont-fim-frase{--sia-explosao-apoio:clamp(16px,1.3vw,19px)}
/* "Seu plano": o painel ao vivo, com o Pulso ligando os itens ate o quadrado */
.mont-plano{position:relative;padding:22px;border-radius:22px;border:1px solid rgba(255,255,255,.08);background:var(--preto);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
@media (min-width:1000px){.mont-plano{position:sticky;top:96px}.mp-abre{display:none}}
.mont-plano.pulsa{animation:pulsa-plano .7s var(--e)}
@keyframes pulsa-plano{0%{box-shadow:0 0 0 0 rgba(255,87,5,.35),inset 0 1px 0 rgba(255,255,255,.04)}100%{box-shadow:0 0 0 14px rgba(255,87,5,0),inset 0 1px 0 rgba(255,255,255,.04)}}
.mp-topo{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.mp-topo>b{font-size:15px;font-weight:600}
.mp-conta{margin-left:auto;font-size:14px;color:var(--cinza)}
.mp-conta b{font-size:28px;font-weight:800;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums;margin-right:3px}
.mp-abre{align-self:center;min-height:36px;padding:6px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:none;color:#fff;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.mp-corpo{margin-top:18px}
.mp-vazio{font-size:14.5px;color:var(--cinza)}
.mp-lista{position:relative;list-style:none;margin:0;padding:0 0 0 26px;display:grid;gap:12px}
.mp-lista:not(:empty)::before{content:"";position:absolute;left:6px;top:8px;bottom:-30px;width:2px;border-radius:2px;background:linear-gradient(180deg,rgba(255,87,5,.25),var(--laranja))}
.mp-item{position:relative;display:grid;gap:2px}
.mp-no{position:absolute;left:-25px;top:6px;width:10px;height:10px;border-radius:3px;background:var(--laranja);box-shadow:0 0 0 3px var(--preto)}
.mp-nome{font-size:15.5px;font-weight:600;color:#fff;letter-spacing:-.01em}
.mp-preco{font-size:13px;color:var(--cinza)}
.mp-empresa{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.07);font-size:13.5px;color:var(--cinza)}
.mp-fecho{display:flex;padding:18px 0 0 0}
.mp-quad{width:24px;height:24px;border-radius:6px;background:rgba(255,87,5,.25);transition:background-color .6s var(--e),box-shadow .6s var(--e)}
.mont-plano.cheio .mp-quad{background:var(--laranja);box-shadow:0 8px 24px -8px rgba(255,87,5,.7)}
.mont-plano.pulsa .mp-quad{animation:quad-pulsa .6s var(--e)}
@keyframes quad-pulsa{0%{scale:1}35%{scale:1.18}100%{scale:1}}
@media (max-width:999px){
  /* no celular, o painel fica preso embaixo enquanto o montador esta na tela; abre com "Ver" */
  .mont-plano{position:sticky;bottom:12px;z-index:5;margin-right:72px;padding:14px 16px;box-shadow:0 -16px 40px -18px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05)}
  .mont-plano:not(.aberto) .mp-corpo{display:none}
  .mont.no-contato .mont-plano,.mont.enviado .mont-plano{position:relative;bottom:auto;margin-right:0}
  .mp-conta b{font-size:22px}
}
/* fotos entre as secoes: pausas de cinema, com a frase do lado escuro */
.faixa{position:relative;z-index:1;margin:0 16px;height:clamp(380px,64vh,660px);border-radius:28px;overflow:hidden;background:var(--grafite)}
.faixa-foto,.faixa-foto img{position:absolute;inset:0;width:100%;height:100%}
.faixa-foto img{object-fit:cover;object-position:60% 50%;will-change:transform}
.faixa::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,5,5,.82) 0%,rgba(5,5,5,.5) 38%,rgba(5,5,5,0) 70%),linear-gradient(0deg,rgba(5,5,5,.45),rgba(5,5,5,0) 45%);pointer-events:none}
.faixa-frase{position:absolute;z-index:2;left:clamp(28px,6vw,96px);bottom:clamp(32px,8vh,76px);margin:0;max-width:15ch;font-size:clamp(32px,4.4vw,62px);font-weight:800;letter-spacing:-.045em;line-height:1.02;color:#fff;text-wrap:balance}
@media (max-width:760px){
  .faixa{margin:0 10px;height:340px;border-radius:22px}
  .faixa-padaria .faixa-foto img{object-position:78% 50%}
  .faixa-oficina .faixa-foto img{object-position:72% 50%}
  .faixa::after{background:linear-gradient(0deg,rgba(5,5,5,.9) 0%,rgba(5,5,5,.55) 50%,rgba(5,5,5,.2) 100%)}
  .faixa-frase{left:22px;right:22px;bottom:26px;font-size:30px}
}
/* heroi: quebra planejada ("Do anuncio" / "ao atendimento."), sem o "ao" sozinho */
.h-l{display:block}
@media (max-width:760px){
  .heroi{padding:40px 20px 48px;justify-content:center}
  .sia-hero h1{font-size:clamp(34px,10vw,52px)}
  .h-l{white-space:nowrap}
}
/* botao de conversa sobrio no site da SIA (o mascote fica no ChatSIA) */
.conv-fab-sia{background:var(--grafite);border:1px solid rgba(255,255,255,.14);box-shadow:0 16px 40px -16px rgba(0,0,0,.9)}
.conv-fab-sia .conv-fab-av{display:grid;place-items:center;background:none;color:#fff}
.conv-fab-sia .conv-fab-x{color:#fff}
.conv-fab-sia:hover{border-color:rgba(255,87,5,.5)}
.conv-av{background:var(--grafite);color:#fff;border:1px solid rgba(255,255,255,.1)}
.conv-av svg{width:24px;height:24px}
.err-luz{display:block;width:min(240px,60%);height:2px;margin:0 auto 34px;border-radius:2px;background:linear-gradient(90deg,rgba(255,87,5,0),#FF5705 70%,#fff);box-shadow:0 0 18px rgba(255,87,5,.7)}
/* um so "Pedir proposta" fixo no celular: com a barra de baixo na tela, o botao do topo cede */
@media (max-width:760px){body.dbar-on .nav .nav-cta-m{display:none}}
/* servicos menos catalogo: texto de 15,5 px, a entrega principal de cada etapa em destaque, sem halos */
.svc-card::before{display:none}
.svc-list li{font-size:15.5px}
.svc-list li:first-child{padding:16px 18px;border-radius:14px;border:1px solid rgba(255,87,5,.2);background:rgba(255,87,5,.05);color:#D8D8D8}
.svc-list li:first-child b{display:block;margin-bottom:4px;font-size:17px;color:#fff}
/* automacoes: secao curta */
#automacoes{padding-block:clamp(80px,8vw,112px)}
/* o ChatSIA na agencia: a janela com a aparencia real do produto (claro, roxo), em composicao propria */
#chatsia{padding-block:clamp(88px,9vw,128px)}
#chatsia>.wrap{border-radius:28px;border:1px solid rgba(255,255,255,.07);background:var(--grafite);padding:clamp(28px,4vw,56px);box-shadow:var(--cartao-sombra)}
@media (min-width:1000px){
  #chatsia>.wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);grid-template-rows:auto 1fr;column-gap:clamp(32px,4vw,64px);align-items:start}
  #chatsia .sec-logo{grid-column:1;grid-row:1}
  #chatsia .head{grid-column:1;grid-row:2;margin:0}
  #chatsia .narrow{grid-column:2;grid-row:1/3;max-width:none;margin:0}
}
#chatsia .app{--bg:#FFFFFF;--bg-2:#F4F5FA;--ink:#15151F;--text:#1F2340;--muted:#5F6478;--line:#E4E5EC;--line-2:#CDD0DC;--brand:#4F46E5;--brand-hover:#4338CA;
  --brand-soft:#EEF0FF;--s1:#FFFFFF;--s2:#F7F7FA;--s3:#EEEFF4;--dark:#0B0F20;--ok-ink:#128C4A;--ok-soft:#E6F7EC;--note:#FFF8E6;--note-line:#F3E2B3;--note-ink:#6B5310;
  --appbg:#EEF0F6;color:var(--ink);background:#EEF0F6;border-color:rgba(255,255,255,.1)}
#chatsia .app .rail{background:#EEF0F6}
#chatsia .app .cv.on,#chatsia .app.crop .cv.on:hover{background:var(--brand-soft)}
#chatsia .app .msg.out{background:var(--brand);color:#fff}
#chatsia .app .app-bar i{background:#D5D6DE}
#chatsia .app .who.ia{background:var(--brand-soft);color:var(--brand)}
#chatsia .app h1,#chatsia .app h2,#chatsia .app h3,#chatsia .app b{color:var(--ink)}
#chatsia .demo figcaption{color:var(--cinza)}
/* perguntas compactas: titulo a esquerda, perguntas a direita, so pergunta, divisoria e o sinal de abrir */
#perguntas{padding-block:clamp(80px,8vw,112px)}
#perguntas .fq-ic{display:none}
#perguntas .faq.icons p{padding-left:0}
#perguntas .faq{max-width:none}
@media (min-width:1000px){#perguntas>.wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:clamp(32px,5vw,80px);align-items:start}#perguntas .head{margin:0}#perguntas .faq{margin:0}}
/* o fim da pagina: uma frase, a confianca, a conversa perto do titulo; contato e horario de apoio; o Pulso no fundo */
.caminho{background:var(--preto);padding-block:clamp(80px,8vw,120px)}
.caminho .offer{align-items:start}
.caminho-txt{position:relative;isolation:isolate}
.caminho h2{max-width:none}
.caminho .lead{margin-top:16px}
.caminho-conf{display:flex;gap:12px;margin-top:22px;font-size:15.5px;color:#fff;max-width:46ch}
.caminho-conf::before{content:"";flex:none;width:9px;height:9px;margin-top:7px;border-radius:2px;background:var(--laranja)}
.caminho .how-start{margin-top:22px;font-size:14px;line-height:1.7}
.caminho-mudou{margin-top:16px;color:var(--cinza)}.caminho-mudou a{color:var(--laranja);font-weight:600}
.caminho-pulso{position:absolute;z-index:-1;left:-8%;bottom:-120px;width:min(380px,90%);margin:0;opacity:.5}
html.sia-fio .caminho-pulso{opacity:1}
@media (max-width:760px){.caminho-pulso{display:none}}

[hidden]{display:none!important}

/* ---------------------------------------------------------------- 8 historia em fotos, como funciona, cartoes que viram, lugares de
   foto, abertura e botoes com assinatura (24/10/2026). O GSAP anima clip-path e transform das cenas da historia e o transform
   das linhas; nada aqui tem transition nessas propriedades desses elementos. */
/* abertura: so na primeira visita da sessao (classe sia-intro, posta antes da primeira pintura; cai sozinha em 2,6 s) */
.sia-hero .h-l{overflow:hidden;padding:.08em .04em .1em 0;margin:-.08em -.04em -.1em 0}
.sia-hero .h-l>.li{display:inline-block}
html.sia-intro .sia-hero .h-l>.li{transform:translateY(112%)}
html.sia-intro .sia-hero .selo,html.sia-intro .sia-hero .lead,html.sia-intro .sia-hero .ctas,html.sia-intro .sia-hero .hero-note{opacity:0}
html.sia-intro.sia-intro-on .sia-hero .h-l>.li{transform:none;transition:transform 1.05s cubic-bezier(.22,1,.36,1)}
html.sia-intro.sia-intro-on .sia-hero .h-l+.h-l>.li{transition-delay:.09s}
html.sia-intro.sia-intro-on .sia-hero .selo,html.sia-intro.sia-intro-on .sia-hero .lead,html.sia-intro.sia-intro-on .sia-hero .ctas,html.sia-intro.sia-intro-on .sia-hero .hero-note{opacity:1;transition:opacity .9s var(--e) .35s}
/* lugares de foto, textura ou video: atras do conteudo, com a sobreposicao para o contraste; quadro neutro ate a foto chegar */
.slot-foto{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.slot-foto picture,.slot-foto img,.slot-foto video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slot-foto.neutro{background:radial-gradient(60% 80% at 80% 20%,rgba(255,255,255,.035),transparent 70%),radial-gradient(50% 60% at 10% 90%,rgba(255,87,5,.05),transparent 70%),linear-gradient(160deg,#121212,#070707)}
#servicos,#chatsia,#perguntas{isolation:isolate}
#servicos>.wrap>.slot-foto,#perguntas>.wrap>.slot-foto{inset:-40px 0;border-radius:28px}
#chatsia>.wrap>.slot-foto{border-radius:inherit}
#servicos>.wrap,#perguntas>.wrap,#chatsia>.wrap{position:relative;isolation:isolate}
.mont>.slot-foto{border-radius:inherit}
.slot-foto:not(.neutro)::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,5,5,.9) 0%,rgba(5,5,5,.78) 45%,rgba(5,5,5,.45) 100%)}
.hcena .slot-foto::after{display:none}
/* a cor que o cursor revela: a foto escura e sem cor; o circulo da copia mostra a cor (sia-cena.js) */
.foto-viva{position:relative;overflow:hidden}
.fv-luz{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(circle var(--mr,0px) at var(--mx,50%) var(--my,50%),rgba(255,196,140,.16) 0%,rgba(255,170,110,.06) 55%,transparent 100%)}
/* historia em fotos: em tela larga, presa (pin); estreita, carrossel com rolagem lateral e snap */
.historia{position:relative;z-index:1;padding:0}
.historia-palco{position:relative}
.historia-cab{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:0 24px;margin:0 auto 18px;max-width:var(--max);font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cinza)}
.historia-conta{display:none;font-variant-numeric:tabular-nums}
.historia-cenas{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 16px 8px;scrollbar-width:none;overscroll-behavior-x:contain}
.historia-cenas::-webkit-scrollbar{display:none}
.hcena{position:relative;flex:0 0 min(86vw,560px);height:min(68vh,520px);scroll-snap-align:center;border-radius:24px;overflow:hidden;background:#0B0B0B;isolation:isolate}
.hcena-foto{position:absolute;inset:0;z-index:0}
.hcena-foto>.slot-foto{z-index:0}
.hcena::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(0deg,rgba(5,5,5,.86) 0%,rgba(5,5,5,.74) 38%,rgba(5,5,5,.25) 62%,rgba(5,5,5,0) 78%);pointer-events:none}
/* tela larga: a foto inteira em cor, escura so do lado do texto e um pouco embaixo, para os chips */
.historia.pin-on .hcena::after{background:radial-gradient(60% 55% at 18% 78%,rgba(5,5,5,.5),rgba(5,5,5,0) 70%),linear-gradient(90deg,rgba(5,5,5,.74) 0%,rgba(5,5,5,.66) 32%,rgba(5,5,5,.22) 54%,rgba(5,5,5,0) 68%),linear-gradient(0deg,rgba(5,5,5,.6) 0%,rgba(5,5,5,0) 30%)}
.hcena-txt{position:absolute;z-index:3;left:clamp(20px,5vw,72px);right:clamp(20px,5vw,72px);bottom:clamp(22px,6vh,64px)}
.hcena-txt small{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.hcena-txt small::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--laranja)}
.hcena-frase{margin-top:12px;max-width:22ch;text-shadow:0 2px 24px rgba(5,5,5,.55);font-size:clamp(24px,3.2vw,48px);font-weight:800;letter-spacing:-.04em;line-height:1.06;color:#fff;text-wrap:balance}
.hcena-etapas{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0}
.hcena-etapas li{padding:6px 11px;border-radius:9px;font-size:12.5px;font-weight:600;border:1px solid rgba(255,255,255,.18);color:#fff;background:rgba(5,5,5,.45)}
.hcena-etapas li.on{border-color:rgba(255,87,5,.55);background:rgba(255,87,5,.14)}
.hcena-etapas li.off{color:#C4C4C4;border-color:rgba(255,255,255,.1)}
.historia-portal{display:none}
.historia.pin-on{height:100vh;overflow:hidden;background:var(--preto)}
.historia.pin-on .historia-palco{height:100%}
.historia.pin-on .historia-cenas{position:absolute;inset:0;display:block;overflow:hidden;padding:0}
.historia.pin-on .hcena{position:absolute;inset:0;height:auto;border-radius:0;flex:none}
.historia.pin-on .hcena-txt{bottom:clamp(48px,11vh,110px);left:clamp(28px,7vw,120px)}
.historia.pin-on .historia-portal{display:block;position:absolute;inset:0;z-index:1;background:var(--laranja)}
.historia.pin-on .historia-cab{position:absolute;z-index:3;left:0;right:0;top:92px;margin:0 auto;padding:0 clamp(28px,7vw,120px);max-width:none}
.historia.pin-on .historia-conta{display:inline}
.historia.ativo .hcena,.historia.ativo .historia-cenas,.historia.ativo .historia-portal{will-change:clip-path}
.historia.ativo .hcena-foto{will-change:transform}
/* como funciona: a linha que se monta com a rolagem */
#como{padding-block:clamp(80px,8vw,112px)}
.como{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.como-fio{position:absolute;left:18px;right:18px;top:17px;height:2px;background:rgba(255,255,255,.08)}
.como-fio i{position:absolute;inset:0;background:var(--laranja);transform-origin:0 50%}
.como li{position:relative;z-index:1}
.como-no{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:var(--preto);font-size:14px;font-weight:700;color:var(--cinza);transition:background-color .6s var(--e),border-color .6s var(--e),color .6s var(--e),box-shadow .6s var(--e)}
.como li.on .como-no{background:var(--laranja);border-color:var(--laranja);color:#fff;box-shadow:0 0 22px rgba(255,87,5,.5)}
.como p{margin-top:18px;font-size:clamp(16px,1.35vw,19px);font-weight:600;line-height:1.35;letter-spacing:-.01em;color:#fff;max-width:24ch}
@media (max-width:1000px){
  .como{grid-template-columns:1fr;gap:26px;padding-left:4px}
  .como-fio{left:21px;right:auto;top:18px;bottom:18px;width:2px;height:auto}
  .como-fio i{transform-origin:50% 0}
  .como li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:18px;align-items:center}
  .como p{margin:0}
}
/* cartoes que viram (servicos): frente o servico, verso o que voce recebe */
.flips{list-style:none;margin:0;padding:22px 0 0;border-top:1px solid rgba(255,255,255,.06);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.flips>li{display:flex}
.flip{flex:1;position:relative;min-height:118px;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;perspective:900px}
.flip-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.flip-frente,.flip-verso{position:absolute;inset:0;display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:14px;border:1px solid rgba(255,255,255,.08);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.flip-frente{background:linear-gradient(180deg,#1A1A1A,#121212)}
.flip-frente b{font-size:16px;font-weight:700;color:#fff;letter-spacing:-.01em}
.flip-frente span{font-size:14.5px;line-height:1.45;color:var(--cinza)}
.flip-verso{transform:rotateY(180deg);background:linear-gradient(180deg,rgba(255,87,5,.16),rgba(255,87,5,.06));border-color:rgba(255,87,5,.35)}
.flip-verso small{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--laranja)}
.flip-verso span{font-size:14.5px;line-height:1.45;color:#fff}
.flip[aria-pressed="true"] .flip-in,.flip:focus-visible .flip-in{transform:rotateY(180deg)}
@media (hover:hover) and (pointer:fine){.flip:hover .flip-in{transform:rotateY(180deg)}}
.flip:focus-visible{outline:2px solid var(--laranja);outline-offset:3px;border-radius:14px}
.svc-mais{margin-top:14px;font-size:14.5px}.svc-mais a{color:var(--laranja);font-weight:600}
@media (max-width:560px){.flips{grid-template-columns:1fr}.flip{min-height:104px}}
#servicos.pin-on .flip{min-height:108px}
/* ---- botoes com assinatura (pedido do Daniel, 24/10/2026: "botoes com personalidade") */
@property --bp{syntax:'<percentage>';inherits:false;initial-value:0%}
.btn{overflow:hidden;isolation:isolate;font-variation-settings:'wght' 700}
.bt-rolo{position:relative;display:inline-flex;flex-direction:column;height:1.15em;overflow:hidden;line-height:1.15}
.bt-rolo>span{display:block;white-space:nowrap;transition:transform .55s cubic-bezier(.22,1,.36,1)}
.bt-rolo>span+span{position:absolute;left:0;top:100%}
.btn:hover .bt-rolo>span,.btn:focus-visible .bt-rolo>span{transform:translateY(-100%)}
.btn.sm .bt-rolo{height:1.2em;line-height:1.2}
/* o ponto da marca que cresce do canto e preenche o botao, num laranja mais claro, e o brilho que segue o mouse */
.bt-ponto{position:absolute;z-index:-1;right:10px;bottom:10px;width:6px;height:6px;border-radius:2px;background:#FF7A36;transform:scale(0);transition:transform .7s cubic-bezier(.22,1,.36,1),border-radius .7s var(--e)}
.btn:hover .bt-ponto,.btn:focus-visible .bt-ponto{transform:scale(70);border-radius:1px}
.btn.vidro .bt-ponto,.btn.ghost .bt-ponto,.btn.wa .bt-ponto{display:none}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(160px circle at var(--bx,50%) var(--by,50%),rgba(255,255,255,.22),transparent 60%);opacity:0;transition:opacity .4s var(--e)}
.btn:hover::before{opacity:1}
/* a seta sai pela direita e volta pela esquerda */
@keyframes seta-passa{0%{transform:none}45%{transform:translateX(130%);opacity:0}46%{transform:translateX(-130%);opacity:0}100%{transform:none;opacity:1}}
.btn:hover::after,.btn:focus-visible::after{animation:seta-passa .6s cubic-bezier(.22,1,.36,1)}
/* clique: mola curta e um pulso de luz, como a respiracao do quadrado */
@keyframes bt-pulso{0%{box-shadow:0 0 0 0 rgba(255,87,5,.55)}100%{box-shadow:0 0 0 16px rgba(255,87,5,0)}}
.btn.bt-clique{animation:bt-pulso .6s var(--e)}
.btn:active{scale:.97}
.btn:focus-visible{outline:2px solid var(--laranja);outline-offset:3px}
/* vidro: a borda se desenha em volta, como uma linha do Pulso, e o texto ganha peso */
.btn.vidro,.btn.ghost{font-variation-settings:'wght' 600;transition:translate .6s var(--e),background-color .6s var(--e),border-color .6s var(--e),font-variation-settings .5s var(--e)}
.btn.vidro:hover,.btn.ghost:hover,.btn.vidro:focus-visible,.btn.ghost:focus-visible{font-variation-settings:'wght' 720}
.btn.vidro::before,.btn.ghost::before{inset:-1px;padding:1px;opacity:1;background:conic-gradient(from 210deg,var(--laranja) var(--bp),transparent var(--bp));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:--bp .8s cubic-bezier(.22,1,.36,1)}
.btn.vidro:hover::before,.btn.ghost:hover::before,.btn.vidro:focus-visible::before,.btn.ghost:focus-visible::before{--bp:100%}
/* links: o sublinhado se desenha da esquerda para a direita e sai pela direita; a seta e empurrada de leve */
.link>span:first-child{background:linear-gradient(currentColor,currentColor) 100% 100%/0 1px no-repeat;transition:background-size .55s cubic-bezier(.22,1,.36,1)}
.link:hover>span:first-child,.link:focus-visible>span:first-child{background-position:0 100%;background-size:100% 1px}
.link:hover{opacity:1}
/* chips do montador: acendem com mola, com o quadradinho da marca e um eco */
@keyframes chip-mola{0%{scale:1}40%{scale:1.06}70%{scale:.98}100%{scale:1}}
.mont-chip[aria-pressed="true"],.mont-frase[aria-pressed="true"] .mf-e::after{animation:acende .6s var(--e),chip-mola .5s cubic-bezier(.34,1.56,.64,1)}
.mont-chip:active,.mont-frase:active{scale:.97}
.mont-chip:focus-visible,.mont-frase:focus-visible{outline:2px solid var(--laranja);outline-offset:3px}
/* botao do chat: respira de tempos em tempos; a etiqueta aparece ao passar o mouse */
@keyframes respira-chat{0%,86%{box-shadow:0 16px 40px -16px rgba(0,0,0,.9),0 0 0 0 rgba(255,87,5,0)}92%{box-shadow:0 16px 40px -16px rgba(0,0,0,.9),0 0 0 8px rgba(255,87,5,.18)}100%{box-shadow:0 16px 40px -16px rgba(0,0,0,.9),0 0 0 14px rgba(255,87,5,0)}}
.conv-fab-sia{animation:respira-chat 7s var(--e) 3s infinite}
.conv-fab-sia:focus-visible{outline:2px solid var(--laranja);outline-offset:4px}
@media (hover:none){.btn:active,.mont-chip:active{scale:.96;transition:scale .08s}}
@media (prefers-reduced-motion:reduce){
  .bt-rolo>span,.bt-ponto,.flip-in,.link>span:first-child,.btn::before{transition:none}
  .btn:hover .bt-rolo>span{transform:none}.btn:hover .bt-ponto{transform:scale(0)}
  .btn:hover::after,.btn.bt-clique,.conv-fab-sia,.mont-chip[aria-pressed="true"]{animation:none}
  .btn:hover{background:#FF6A1F}
  .flip-in{transform:none!important}.flip-verso{transform:none;position:relative;margin-top:8px}.flip-frente{position:relative}.flip{min-height:0}.flip-in{position:relative;display:grid}
  html.sia-intro .sia-hero .h-l>.li{transform:none}
}
/* perguntas que abrem com a altura animada (navegadores com ::details-content; nos outros, abre direto) */
#perguntas{interpolate-size:allow-keywords}
#perguntas details::details-content{block-size:0;overflow:hidden;transition:block-size .55s cubic-bezier(.22,1,.36,1),content-visibility .55s allow-discrete}
#perguntas details[open]::details-content{block-size:auto}
.mont-chat .conv{margin:0}
/* passagem entre as paginas da SIA (View Transitions): a pagina nova entra pelo quadrado laranja, que abre do centro. Sem suporte,
   a navegacao e a de sempre */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-sai .5s cubic-bezier(.22,1,.36,1) both}
::view-transition-new(root){animation:vt-entra .7s cubic-bezier(.22,1,.36,1) both}
@keyframes vt-sai{to{opacity:.35;transform:scale(.97)}}
@keyframes vt-entra{from{clip-path:inset(calc(50% - 28px) calc(50% - 28px) calc(50% - 28px) calc(50% - 28px) round 12px)}to{clip-path:inset(0 0 0 0 round 0)}}
html::view-transition-group(root){background:var(--laranja)}
@media (prefers-reduced-motion:reduce){
  #perguntas details::details-content{transition:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* o montador sobe por cima do fim da historia, logo abaixo do quadrado pequeno em que ela termina */
.historia.pin-on+#monte{position:relative;z-index:3;margin-top:-46vh}

/* ---- o mergulho (24/10/2026): o quadrado-janela com a primeira foto, as curvas do Pulso chegando nele, os fantasmas em
   profundidade, o vidro e o titulo no vazio. So na tela larga (pin-on); no celular, o titulo fica como cabecalho do carrossel. */
.mg-titulo{max-width:var(--max);margin:0 auto 22px;padding:0 24px}
.mg-titulo h2{font-size:clamp(34px,4.2vw,56px);line-height:1.04;letter-spacing:-.04em}
.mg-titulo p{margin-top:12px;color:var(--cinza);font-size:clamp(17px,1.3vw,19px)}
.mg-titulo .lm{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em .04em .12em 0;margin:-.1em -.04em -.12em 0}
.mg-titulo .li{display:inline-block}
.mg,.mg-vidro,.mg-curvas,.mg-brilho,.mg-fantasma{display:none}
.historia.pin-on .mg-titulo{position:absolute;z-index:4;left:clamp(28px,7vw,120px);top:22%;margin:0;padding:0;max-width:min(40vw,520px)}
.historia.pin-on .mg-titulo h2{font-size:clamp(44px,5.6vw,88px);line-height:.98;letter-spacing:-.05em}
.historia.pin-on .mg-titulo h2 .lm{display:block}
.historia.pin-on .mg-tilt{position:absolute;inset:0;transform-style:preserve-3d}
.historia.pin-on .mg{display:block;position:absolute;inset:0;z-index:1;transform-style:preserve-3d;pointer-events:none}
.historia.pin-on .mg-curvas{display:block;position:absolute;left:0;top:0;overflow:visible;fill:none;stroke:#FF5705;stroke-linecap:round;pointer-events:none}

.historia.pin-on .mg-fantasma{display:block;position:absolute;left:0;top:0;border-radius:14px;overflow:hidden;opacity:.78;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.historia.pin-on .mg-fantasma>.slot-foto{z-index:0}
.historia.pin-on .mg-fantasma::after{content:"";position:absolute;inset:0;background:rgba(5,5,5,.3)}
.historia.pin-on .mg-brilho{display:block;position:absolute;left:0;top:0;height:2px;border-radius:2px;--acesa:0;background:linear-gradient(90deg,rgba(255,87,5,0),#FF5705 18%,#FFD2B0 60%,#FF5705 92%,rgba(255,87,5,0));box-shadow:0 0 calc(18px + var(--acesa) * 30px) calc(2px + var(--acesa) * 6px) rgba(255,87,5,calc(.55 + var(--acesa) * .4))}
.historia.pin-on .mg-vidro{display:block;position:absolute;z-index:4;left:0;top:0;border-radius:24px;overflow:hidden;pointer-events:none}
.mg-vidro i{position:absolute;top:-20%;left:0;width:200%;height:140%;transform:translateX(-50%);background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.14) 48%,rgba(255,255,255,.04) 53%,transparent 60%)}
.historia.pin-on .historia-cenas{z-index:3}
.historia.pin-on .historia-portal{z-index:2}
.historia.pin-on .historia-cab{justify-content:flex-end}
.historia.ativo .mg-tilt{will-change:transform}

.sia-fagulhas{position:fixed;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}
.mp-quad.recebe{animation:quad-pulsa .5s var(--e)}

/* ---------------------------------------------------------------- 9 o montador em modal, "Carregue o seu plano" (24/10/2026).
   As animacoes de abrir, fechar e trocar de tela sao do proprio navegador (Web Animations, sia-montador.js), em transform e
   opacity; as transicoes daqui sao so de cor, borda e sombra. */
/* a vitrine na pagina: o convite */
#monte{padding-block:clamp(80px,8vw,112px)}
.pm-convite{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(20px,3vw,40px);padding:clamp(24px,3vw,40px);border-radius:28px;border:1px solid rgba(255,255,255,.08);background:var(--grafite);box-shadow:var(--cartao-sombra)}
.pmc-fitas{position:relative;width:150px;height:70px}.pmc-fitas svg{width:100%;height:100%;fill:none;stroke:#FF5705;stroke-linecap:round}
.pmc-fitas path{stroke-width:6;stroke-dasharray:900;animation:pmc-corre 3.6s var(--e) infinite}.pmc-fitas path:nth-child(2){stroke-width:4;opacity:.7;animation-delay:.12s}.pmc-fitas path:nth-child(3){stroke-width:2.6;opacity:.45;animation-delay:.24s}
.pmc-fitas span{position:absolute;left:calc(760 / 812 * 100% - 7px);top:calc(176 / 370 * 100% - 7px);width:14px;height:14px;border-radius:50%;background:radial-gradient(circle,#fff 0,#FFB27F 30%,rgba(255,87,5,0) 70%)}
@keyframes pmc-corre{0%{stroke-dashoffset:900}60%,100%{stroke-dashoffset:0}}
.pmc-t{font-size:clamp(22px,2.2vw,30px);font-weight:800;letter-spacing:-.035em;color:#fff}
.pmc-txt p:not(.pmc-t){margin-top:6px;color:var(--cinza)}
@media (max-width:760px){.pm-convite{grid-template-columns:auto minmax(0,1fr)}.pmc-abre{grid-column:1/-1;justify-content:space-between}}
/* o modal */
html.pm-aberto{overflow:hidden}
.pmod{padding:0;border:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;color:#fff;overflow:visible}
.pmod::backdrop{background:rgba(5,5,5,.62);backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%)}
.pmod[open]{display:grid;place-items:center}
.pm-painel{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(1080px,calc(100vw - 48px));height:min(720px,calc(100vh - 48px));border-radius:28px;border:1px solid rgba(255,255,255,.1);
  background:#0D0D0D;box-shadow:0 60px 140px -40px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden;transform-origin:0 0}
.pm-topo{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:20px;padding:22px 28px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.pm-titulo{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cinza)}
.pm-carga{grid-column:1;margin-top:6px;font-size:17px;font-weight:600;color:#fff}.pm-carga b{font-variant-numeric:tabular-nums;color:var(--laranja)}
.pm-barra{grid-column:1/-1;height:2px;margin-top:14px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.pm-barra i{display:block;height:100%;background:var(--laranja);transform-origin:0 50%;transform:scaleX(0);transition:transform .7s var(--e)}
.pm-x{position:absolute;right:18px;top:18px;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:none;color:#fff;cursor:pointer}
.pm-x:hover,.pm-x:focus-visible{border-color:rgba(255,87,5,.6)}
/* a bateria: as 3 curvas do Pulso levando ao quadrado, que enche */
.pm-bateria{position:absolute;right:84px;top:6px;width:min(360px,38vw);height:110px;pointer-events:none}
.pm-curvas{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-linecap:round}
.pm-fundo{stroke:rgba(255,255,255,.16)}.pm-acesas{stroke:#FF5705;filter:drop-shadow(0 0 6px rgba(255,87,5,.7))}
.pm-curvas path:nth-child(1){stroke-width:6}.pm-curvas path:nth-child(2){stroke-width:4}.pm-curvas path:nth-child(3){stroke-width:2.6}
.pm-acesas path{stroke-dasharray:1;stroke-dashoffset:1}.pm-acesas path:nth-child(2){opacity:.8}.pm-acesas path:nth-child(3){opacity:.6}
.pm-ponto{position:absolute;left:calc(760 / 812 * 100% - 9px);top:calc(176 / 370 * 100% - 9px);width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.9) 0,rgba(255,170,120,.5) 30%,rgba(255,87,5,0) 70%);opacity:.35;transition:opacity .6s var(--e)}
.pm-ponto.marco{animation:quad-pulsa .6s var(--e)}
.pmod.cheio .pm-ponto{opacity:1;box-shadow:0 0 28px 8px rgba(255,87,5,.55);animation:pm-pulsa 1.8s var(--e) infinite}
@keyframes pm-pulsa{0%,100%{scale:1}50%{scale:1.08}}
.pm-fagulhas{position:absolute;left:-20px;top:-20px;width:calc(100% + 40px);height:calc(100% + 40px)}
/* corpo: a tela da pergunta e, ao lado, o cartao do plano */
.pm-corpo{display:grid;grid-template-columns:minmax(0,1fr) 300px;min-height:0}
.pm-telas{position:relative;padding:clamp(28px,3.4vw,48px);overflow-y:auto;overscroll-behavior:contain;background:#0D0D0D}
.pm-q{font-size:clamp(28px,3vw,42px);font-weight:800;letter-spacing:-.04em;line-height:1.05;outline:none;max-width:20ch}
.pm-apoio{margin-top:10px;color:var(--cinza);font-size:15.5px}
.pm-ops{display:grid;gap:10px;margin-top:24px}
.pm-op{display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:12px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.02);color:#fff;font:inherit;font-size:clamp(16px,1.4vw,18px);font-weight:500;text-align:left;cursor:pointer;transition:border-color .35s var(--e),background-color .35s var(--e),box-shadow .5s var(--e)}
.pm-op kbd{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;border:1px solid rgba(255,255,255,.18);font:inherit;font-size:12.5px;font-weight:700;color:var(--cinza);transition:background-color .35s var(--e),color .35s var(--e),border-color .35s var(--e)}
.pm-op:hover{border-color:rgba(255,255,255,.24)}
.pm-op[aria-pressed="true"]{border-color:rgba(255,87,5,.65);background:rgba(255,87,5,.1);animation:acende .6s var(--e),chip-mola .5s cubic-bezier(.34,1.56,.64,1)}
.pm-op[aria-pressed="true"] kbd{background:var(--laranja);border-color:var(--laranja);color:#fff}
.pm-op:focus-visible,.pm-chip:focus-visible,.pm-in:focus-visible{outline:2px solid var(--laranja);outline-offset:3px}
.pm-grupo{margin-top:22px}.pm-grupo h3{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cinza);margin-bottom:10px}
.pm-chips{display:flex;flex-wrap:wrap;gap:9px}
.pm-chip{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:10px 15px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.02);color:#fff;font:inherit;font-size:15px;font-weight:500;cursor:pointer;transition:border-color .35s var(--e),background-color .35s var(--e)}
.pm-chip::before{content:"";width:8px;height:8px;border-radius:2px;background:rgba(255,255,255,.22);transition:background-color .35s var(--e)}
.pm-chip[aria-pressed="true"]{border-color:rgba(255,87,5,.6);background:rgba(255,87,5,.12);animation:acende .6s var(--e),chip-mola .5s cubic-bezier(.34,1.56,.64,1)}
.pm-chip[aria-pressed="true"]::before{background:var(--laranja)}
.pm-campo{display:grid;gap:8px;margin-top:22px;max-width:460px}.pm-campo span{font-size:13.5px;color:var(--cinza)}
.pm-in{height:56px;padding:0 18px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);color:#fff;font:inherit;font-size:19px}
.pm-in:focus{border-color:rgba(255,87,5,.6);box-shadow:0 0 0 4px rgba(255,87,5,.12);outline:none}
.pm-erro{min-height:1.4em;margin-top:10px;color:#FF8A8A;font-size:14px}
.pm-resumo{margin-top:20px;font-size:16px;color:var(--cinza)}.pm-resumo b{font-size:28px;font-weight:800;color:#fff}
.pm-enviar{margin-top:22px}
.pmod.cheio .pm-enviar:not([disabled]){box-shadow:0 0 0 6px rgba(255,87,5,.14),0 18px 50px -14px rgba(255,87,5,.8)}
.pm-enviar[disabled]{opacity:.45;cursor:not-allowed}
.pm-falha{margin-top:18px;padding:18px 20px;border-radius:16px;border:1px solid rgba(255,87,5,.3);background:rgba(255,87,5,.06)}.pm-falha p{margin-bottom:12px}
.pm-fim{padding-top:8px}
.pf-frase{font-size:clamp(44px,5.4vw,78px);font-weight:800;letter-spacing:-.05em;line-height:1}
.pf-apoio{margin-top:16px;color:var(--cinza);font-size:18px;max-width:40ch}
.pm-fim-frase{--sia-explosao-apoio:18px}
/* o cartao do plano */
.pm-cartao{position:relative;padding:22px;border-left:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg,#121212,#0A0A0A);overflow-y:auto}
.pm-ver{display:none}
.pc-nome{font-size:18px;font-weight:700;letter-spacing:-.02em}
.pc-lista{list-style:none;margin:16px 0 0;padding:0 0 0 22px;display:grid;gap:12px;position:relative}
.pc-lista:not(:empty)::before{content:"";position:absolute;left:5px;top:8px;bottom:4px;width:2px;background:linear-gradient(180deg,rgba(255,87,5,.2),var(--laranja))}
.pc-lista li{position:relative;display:grid;gap:2px}
.pc-lista li::before{content:"";position:absolute;left:-21px;top:6px;width:9px;height:9px;border-radius:3px;background:var(--laranja);box-shadow:0 0 0 3px #0D0D0D}
.pc-lista b{font-size:15px;font-weight:600}.pc-lista span{font-size:12.5px;color:var(--cinza)}
.pc-empresa{margin-top:16px;font-size:13px;color:var(--cinza)}
.pm-cartao.trofeu{box-shadow:inset 0 0 0 1px rgba(255,87,5,.35),inset 0 0 60px -20px rgba(255,87,5,.35)}
/* rodape do modal */
.pm-nav{display:flex;align-items:center;gap:14px;padding:16px 28px;border-top:1px solid rgba(255,255,255,.06);background:#0D0D0D}
.pm-reacao{flex:1;min-height:1.4em;font-size:14.5px;font-weight:600;color:var(--laranja)}
.pm-seguir{margin-left:auto}
.svc-quero{position:absolute;right:8px;bottom:8px;z-index:2;padding:5px 10px;border-radius:9px;border:1px solid rgba(255,87,5,.4);background:rgba(5,5,5,.7);color:#fff;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;opacity:.85;transition:background-color .3s var(--e),opacity .3s var(--e)}
.flips>li{position:relative}
.svc-quero:hover,.svc-quero:focus-visible{opacity:1;background:var(--laranja)}
/* celular: o modal ocupa a tela e sobe de baixo; o plano numa aba */
@media (max-width:760px){
  .pm-painel{width:100vw;height:100dvh;border-radius:22px 22px 0 0;border:0}
  .pm-topo{padding:16px 18px 12px}.pm-bateria{right:58px;top:4px;width:170px;height:76px}.pm-x{right:12px;top:12px}
  .pm-corpo{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
  .pm-telas{padding:22px 18px}
  .pm-cartao{border-left:0;border-top:1px solid rgba(255,255,255,.06);padding:10px 18px;max-height:46vh}
  .pm-ver{display:block;width:100%;min-height:44px;border:0;background:none;color:#fff;font:inherit;font-weight:600;text-align:left;cursor:pointer}
  .pm-cartao:not(.aberto) .pm-cartao-in{display:none}
  .pm-nav{padding:12px 18px calc(12px + env(safe-area-inset-bottom))}
  .pm-reacao{display:none}
  .pm-op{min-height:58px}
}
@media (prefers-reduced-motion:reduce){.pmc-fitas path,.pmod.cheio .pm-ponto,.pm-op[aria-pressed="true"],.pm-chip[aria-pressed="true"]{animation:none}.pm-barra i{transition:none}}

/* enviando: tres pontos no lugar da seta; voltar sem a seta para a direita */
.pmod.enviando .pm-enviar::after{display:none}
.pmod.enviando .pm-enviar .bt-rolo>span:first-child::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:pm-pontos 1.2s steps(4) infinite}
@keyframes pm-pontos{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.pm-voltar::after{display:none}

/* ---------------------------------------------------------------- 10 historia em fotos, a composicao (24/10/2026, pedido do Daniel:
   "fotos menores, para os fios irem dancando ao lado das imagens, com informacoes e estrategias de cada negocio"). A foto num quadro
   de 24 px, de um lado; do outro, o negocio, a situacao e as estrategias, cada uma com a etapa. As fitas do Pulso (sia-pulso.js)
   correm por tras, entre a foto e o texto. Celular: foto em cima, estrategias embaixo, sem pin. */
.historia .historia-cenas{display:grid;gap:clamp(56px,9vw,96px);overflow:visible;padding:0 16px;scroll-snap-type:none}
.historia .hcena{flex:none;height:auto;border-radius:0;background:transparent;overflow:visible;display:grid;gap:22px;max-width:var(--max);width:100%;margin:0 auto}
.historia .hcena::after{display:none}
.hcena-quadro{position:relative;margin:0;aspect-ratio:4/3;border-radius:22px;overflow:hidden;isolation:isolate;box-shadow:0 40px 90px -50px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.06)}
.hcena-quadro>.slot-foto{z-index:0}
.historia .hcena-txt{position:static;left:auto;right:auto;bottom:auto;z-index:auto;transform:none}
.hcena-txt small{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.hcena-txt small::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--laranja)}
.historia .hcena-frase{margin-top:14px;max-width:20ch;font-size:clamp(26px,2.6vw,40px);font-weight:800;letter-spacing:-.04em;line-height:1.06;color:#fff;text-shadow:none}
.hcena-estr{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px;max-width:520px}
.hcena-estr li{display:grid;grid-template-columns:12px minmax(0,1fr) auto;align-items:baseline;gap:12px;padding:12px 0;border-top:1px solid rgba(255,255,255,.08);font-size:16px;line-height:1.4;color:#fff}
.hcena-estr li:last-child{border-bottom:1px solid rgba(255,255,255,.08)}
.hcena-estr i{width:9px;height:9px;border-radius:50%;background:var(--laranja);box-shadow:0 0 12px rgba(255,87,5,.7);transform-origin:50% 50%}
.hcena-estr em{font-style:normal;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cinza);white-space:nowrap}
.hcena-plano{margin-top:22px;font-size:15.5px}
.historia-fitas{display:none}
/* tela larga, presa: cada negocio ocupa a tela, foto de um lado (alternando) e o texto do outro */
.historia.pin-on .historia-cenas{position:absolute;inset:0;display:block;padding:0;gap:0;overflow:hidden;z-index:3;background:transparent}
.historia.pin-on .hcena{position:absolute;inset:0;max-width:none;height:100%;grid-template-columns:minmax(0,52fr) minmax(0,48fr);align-items:center;column-gap:clamp(40px,6vw,96px);
  padding:clamp(90px,12vh,120px) clamp(28px,6vw,96px) clamp(40px,8vh,80px);background:transparent}
.historia.pin-on .hcena.lado{grid-template-columns:minmax(0,48fr) minmax(0,52fr)}
.historia.pin-on .hcena.lado .hcena-quadro{order:2}
.historia.pin-on .hcena-quadro{aspect-ratio:auto;height:min(64vh,620px);width:100%;border-radius:24px}
.historia.pin-on .historia-fitas{display:block;position:absolute;inset:0;z-index:2;pointer-events:none}
.historia.pin-on .historia-cab{z-index:4}
.historia.ativo .hcena-quadro{will-change:transform}
@media (max-width:760px){
  .historia{padding-block:24px 72px}
  .hcena-quadro{border-radius:22px}
  .historia .hcena-frase{font-size:26px}
  .hcena-estr li{grid-template-columns:12px minmax(0,1fr);font-size:15.5px}
  .hcena-estr em{grid-column:2;margin-top:-4px}
}

/* ---------------------------------------------------------------- 11 a lista de servicos, a Historia e os ajustes de 24/10/2026
   (a frase em tela cheia saiu com o vendedor guiado, parte 12) */
/* ---- a lista de servicos */
.svl-todas{position:relative;display:grid;gap:clamp(40px,5vw,64px)}
.svl-grupo{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(20px,4vw,64px);align-items:start}
.svl-cab small{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--laranja)}
.svl-cab h3{margin-top:8px;font-size:22px;font-weight:700}
.svl-cab p{margin-top:8px;color:var(--cinza);font-size:15px;max-width:30ch}
.svl-lista{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.08)}
.svl{border-bottom:1px solid rgba(255,255,255,.08)}
.svl-b{display:grid;grid-template-columns:minmax(0,1fr) auto 28px;align-items:center;gap:20px;width:100%;padding:clamp(14px,1.6vw,22px) 0;border:0;background:none;color:#fff;font:inherit;text-align:left;cursor:pointer;transition:opacity .45s var(--e),translate .6s var(--e)}
.svl-n{font-size:clamp(28px,3.6vw,54px);font-weight:700;letter-spacing:-.04em;line-height:1.05}
.svl-f{font-size:15px;color:var(--cinza);text-align:right;max-width:30ch}
.svl-mais{position:relative;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.18);transition:border-color .4s var(--e),background-color .4s var(--e)}
.svl-mais::before,.svl-mais::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.6px;margin:-.8px 0 0 -5.5px;background:#fff;transition:transform .45s var(--e)}
.svl-mais::after{transform:rotate(90deg)}
.svl-b[aria-expanded="true"] .svl-mais{border-color:var(--laranja);background:rgba(255,87,5,.14)}
.svl-b[aria-expanded="true"] .svl-mais::after{transform:rotate(0)}
@media (hover:hover) and (pointer:fine){
  .svl-lista:has(.svl-b:hover) .svl-b:not(:hover){opacity:.32}
  .svl-b:hover{translate:12px 0}
  .svl-b:hover .svl-mais{border-color:var(--laranja)}
}
.svl-b:focus-visible{outline:2px solid var(--laranja);outline-offset:4px;border-radius:8px}
.svl-x{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;padding:0 0 22px}
.svl-x p{max-width:60ch;color:#fff;font-size:17px}.svl-x small{display:block;margin-bottom:6px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--laranja)}
.svl-x .svc-quero{position:static;padding:10px 16px;border-radius:12px;font-size:14px;opacity:1}
.svl-lista{position:relative;z-index:1}
.svl-img{position:absolute;left:0;top:0;z-index:0;width:300px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;pointer-events:none;opacity:0;scale:.86;box-shadow:0 30px 70px -30px rgba(0,0,0,.95);transition:opacity .35s var(--e),scale .5s var(--e)}
.svl-img img{width:100%;height:100%;object-fit:cover;filter:brightness(.78)}
.svl-n{text-shadow:0 2px 24px rgba(0,0,0,.45)}
.svl-img.on{opacity:1;scale:1}
@media (max-width:900px){.svl-grupo{grid-template-columns:1fr}.svl-f{display:none}.svl-b{grid-template-columns:minmax(0,1fr) 28px}.svl-img{display:none}}
/* perguntas e como funciona: resposta viva ao mouse, sem caixa */
#perguntas summary{transition:translate .5s var(--e),color .4s var(--e)}
@media (hover:hover){#perguntas summary:hover{translate:8px 0}}
.como li{transition:translate .5s var(--e)}
@media (hover:hover){.como li:hover{translate:0 -4px}.como li:hover .como-no{box-shadow:0 0 0 6px rgba(255,87,5,.12),0 0 22px rgba(255,87,5,.5)}}
/* Historia: a etapa (Atrair, Converter, Atender e vender) fica numa linha propria, acima da estrategia, em todos os tamanhos;
   assim o texto pode quebrar em duas linhas sem que a etiqueta encoste nele (24/10/2026) */
.hcena-estr li{grid-template-columns:12px minmax(0,1fr);grid-template-rows:auto auto;align-items:start;row-gap:4px;column-gap:12px}
.hcena-estr em{grid-column:2;grid-row:1;margin:0;white-space:normal;line-height:1.3}
.hcena-estr i{grid-column:1;grid-row:2;margin-top:.5em}
.hcena-estr span{grid-column:2;grid-row:2}

/* ---------------------------------------------------------------- 12 o vendedor guiado (24/10/2026): a pilula que acompanha a
   rolagem e o painel "Monte o seu plano" (sia-vendedor.js). Grafite, linhas finas, marcador redondo, uma coisa de cada vez. As
   entradas sao do sia-vendedor.js (transform e opacity); aqui, so transicoes de cor e borda. */
.vd{--vd-g:#151515;--vd-b:rgba(255,255,255,.07);position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none;font-family:inherit}
.vd>*{pointer-events:auto}
.vd-pil{display:flex;flex-direction:column;align-items:stretch;max-width:340px;background:var(--vd-g);border:1px solid var(--vd-b);border-radius:26px;box-shadow:0 18px 48px -18px rgba(0,0,0,.85);overflow:hidden}
.vd-abre{display:flex;align-items:center;gap:10px;min-height:50px;padding:0 18px 0 14px;border:0;background:none;color:#fff;font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;text-align:left}
.vd-abre:focus-visible{outline:2px solid var(--laranja);outline-offset:-4px;border-radius:24px}
.vd-ic{width:22px;height:22px;flex:none;color:#fff}
.vd-ponto{width:7px;height:7px;flex:none;border-radius:50%;background:var(--laranja);box-shadow:0 0 10px rgba(255,87,5,.7)}
.vd-ponto.pulsa{animation:vd-pulso 1.1s cubic-bezier(.16,1,.3,1) 1}
@keyframes vd-pulso{0%{transform:scale(1)}35%{transform:scale(1.9)}100%{transform:scale(1)}}
.vd-linha{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vd-conta{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:rgba(255,87,5,.16);color:#FFB27F;font-size:12px;font-weight:700;line-height:20px;text-align:center}
.vd-q:empty{display:none}
.vd-q{padding:16px 18px 4px;border-bottom:1px solid var(--vd-b)}
.vd-q-t{margin:0;font-size:15px;font-weight:600;line-height:1.4;color:#fff}
.vd-q-r{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.vd-r{min-height:34px;padding:6px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:transparent;color:#fff;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:border-color .3s var(--e),background-color .3s var(--e)}
.vd-r:hover,.vd-r:focus-visible{border-color:var(--laranja);background:rgba(255,87,5,.1);outline:none}
.vd-nao{display:block;margin:10px 0 10px;padding:4px 0;border:0;background:none;color:var(--cinza);font:inherit;font-size:12.5px;cursor:pointer}
.vd-nao:hover,.vd-nao:focus-visible{color:#fff;outline:none;text-decoration:underline}
.vd-q:not(:has(.vd-nao)){padding-bottom:14px}
/* o painel */
.vd-painel{position:relative;width:380px;height:min(520px,calc(100vh - 110px));display:flex;flex-direction:column;background:var(--vd-g);border:1px solid var(--vd-b);border-radius:24px;box-shadow:0 30px 80px -30px rgba(0,0,0,.9);overflow:hidden;color:#fff;transform-origin:100% 100%}
.vd-painel[hidden]{display:none}
.vd-cab{position:relative;display:flex;align-items:center;gap:12px;padding:18px 18px 14px;border-bottom:1px solid var(--vd-b)}
.vd-barra{position:absolute;left:0;right:0;top:0;height:2px;background:rgba(255,255,255,.05)}
.vd-barra i{display:block;height:100%;background:var(--laranja);transform-origin:0 50%;transform:scaleX(0);transition:transform .5s var(--e)}
.vd-cab h2{flex:1;margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em;outline:none}
.vd-passos{margin:0;font-size:13px;color:var(--cinza)}
.vd-x{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--vd-b);background:none;color:#fff;cursor:pointer;transition:border-color .3s var(--e)}
.vd-x svg{width:14px;height:14px}
.vd-x:hover,.vd-x:focus-visible{border-color:rgba(255,255,255,.3);outline:none}
.vd-corpo{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 18px 18px}
.vd-papel{margin:0 0 4px;font-size:12.5px;color:var(--cinza)}
.vd-reage{margin:0;font-size:14px;color:#FFB27F}
.vd-reage:empty{display:none}
.vd-h{margin:14px 0 6px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--cinza)}
.vd-vazio{margin:8px 0;color:var(--cinza);font-size:14.5px;line-height:1.5}
.vd-etapa{margin:14px 0 2px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--laranja)}
.vd-var{display:flex;justify-content:space-between;align-items:baseline;gap:14px;width:100%;padding:11px 0;border:0;border-bottom:1px solid var(--vd-b);background:none;color:#fff;font:inherit;text-align:left;cursor:pointer}
.vd-var span{font-size:13.5px;color:var(--cinza)}
.vd-var b{font-size:15px;font-weight:600;text-align:right}
.vd-var:hover b,.vd-var:focus-visible b{color:#FFB27F}
.vd-var:focus-visible{outline:none}
/* as respostas em linhas, com o marcador redondo */
.vd-ops{border-top:1px solid var(--vd-b);margin-top:16px}
.vd-op{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:50px;padding:12px 6px 12px 2px;border:0;border-bottom:1px solid var(--vd-b);background:none;color:rgba(255,255,255,.86);font:inherit;font-size:17px;line-height:1.35;text-align:left;cursor:pointer;transition:color .25s var(--e),background-color .25s var(--e)}
.vd-sv{font-size:15.5px;min-height:46px}
.vd-op:hover,.vd-op:focus-visible{color:#fff;background:rgba(255,255,255,.025);outline:none}
.vd-op:focus-visible{box-shadow:inset 2px 0 0 var(--laranja)}
.vd-mk{position:relative;flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);transition:border-color .25s var(--e)}
.vd-mk::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--laranja);transform:scale(0);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.vd-op:hover .vd-mk,.vd-op:focus-visible .vd-mk{border-color:var(--laranja)}
.vd-op[aria-checked="true"]{color:#fff}
.vd-op[aria-checked="true"] .vd-mk{border-color:var(--laranja)}
.vd-op[aria-checked="true"] .vd-mk::after{transform:scale(1)}
.vd-op-t{flex:1;min-width:0}
.vd-op-t small{display:block;margin-top:2px;font-size:12.5px;color:var(--cinza)}
.vd-op em{font-style:normal;font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--cinza)}
.vd-op kbd{display:none;font:inherit;font-size:12px;color:rgba(255,255,255,.32)}
@media (hover:hover) and (pointer:fine){.vd-op kbd{display:inline}}
.vd-todos{margin-top:12px;padding:6px 0;border:0;background:none;color:var(--cinza);font:inherit;font-size:13.5px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.vd-todos:hover,.vd-todos:focus-visible{color:#fff;outline:none}
.vd-acoes{margin-top:18px}
.vd-acoes .btn,.vd-pe .btn{min-height:44px;padding:10px 18px;font-size:15px}
/* uma pergunta por vez */
.vd-pq{margin:6px 0 0;font-size:clamp(22px,2vw,26px);font-weight:700;line-height:1.2;letter-spacing:-.02em;outline:none}
.vd-pa{margin:8px 0 0;font-size:14.5px;color:var(--cinza)}
.vd-campo{position:relative;margin-top:26px}
.vd-in{width:100%;padding:18px 0 8px;border:0;border-bottom:1.5px solid rgba(255,255,255,.2);border-radius:0;background:none;color:#fff;font:inherit;font-size:18px;outline:none;transition:border-color .25s var(--e)}
.vd-in:focus{border-bottom-color:var(--laranja)}
.vd-campo label{position:absolute;left:0;top:18px;font-size:17px;color:var(--cinza);pointer-events:none;transform-origin:0 0;transition:transform .25s var(--e),color .25s var(--e)}
.vd-in:focus+label,.vd-in:not(:placeholder-shown)+label{transform:translateY(-20px) scale(.76)}
.vd-in:focus+label{color:var(--laranja)}
.vd-in[aria-invalid="true"]{border-bottom-color:#FF8A5C}
.vd-err{min-height:1.4em;margin:8px 0 0;font-size:13.5px;color:#FFB27F}
.vd-rev{margin-top:14px;border-top:1px solid var(--vd-b)}
.vd-pe{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px}
.vd-voltar{padding:8px 0;border:0;background:none;color:var(--cinza);font:inherit;font-size:14px;cursor:pointer}
.vd-voltar:hover,.vd-voltar:focus-visible{color:#fff;outline:none;text-decoration:underline}
.vd-voltar[hidden]+.vd-seguir,.vd-voltar[hidden]~.vd-enviar{margin-left:auto}
.vd-enviar{position:relative}
.vd-enviar::after,.vd-acoes .btn::after,.vd-pe .btn::after{display:none}
.vd-ind{display:none;gap:5px;align-items:center;justify-content:center}
.vd-ind i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:vd-ind 1s ease-in-out infinite}
.vd-ind i:nth-child(2){animation-delay:.15s}.vd-ind i:nth-child(3){animation-delay:.3s}
@keyframes vd-ind{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.vd-enviar.enviando .vd-rot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.vd-enviar.enviando .vd-ind{display:inline-flex;min-width:7.5em;min-height:1.2em}
.vd-falha{margin-top:16px;font-size:14.5px;line-height:1.5;color:#fff}
.vd-falha .btn{margin-top:10px}
/* o sucesso: o check desenhado e um brilho suave atras dele */
.vd-fim{position:relative;padding:18px 0 6px;outline:none}
.vd-luz{position:absolute;left:-10px;top:-6px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(255,87,5,.28),rgba(255,87,5,0) 70%);opacity:0;pointer-events:none}
.vd-check{position:relative;width:56px;height:56px;fill:none;stroke:var(--laranja);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.vd-check circle{stroke-opacity:.35}
.vd-fim.desenha .vd-check{animation:vd-desenha .6s cubic-bezier(.65,0,.35,1) backwards}
.vd-fim.desenha .vd-luz{opacity:1;animation:vd-luz 1.2s ease-out .2s backwards}
.vd-fim.pronto .vd-luz{opacity:1}
@keyframes vd-desenha{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes vd-luz{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.vd-fim-t{margin:16px 0 0;font-size:28px;font-weight:800;letter-spacing:-.03em}
.vd-fim-a{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--cinza)}
.vd-ver-conversa{margin-top:16px;padding:0;border:0;background:none;font:inherit;font-size:15px;cursor:pointer}
/* a conversa de verdade, dentro do painel */
.vd-volta-plano{margin:0 0 10px;padding:4px 0;border:0;background:none;color:var(--cinza);font:inherit;font-size:13.5px;cursor:pointer}
.vd-volta-plano:hover,.vd-volta-plano:focus-visible{color:#fff;outline:none;text-decoration:underline}
.vd-v-conversa .conv{max-width:none;margin:0;border:0;box-shadow:none;background:none;padding:0}
.vd-v-conversa .conv-head{display:none}
/* o campo para o agente de IA */
.vd-escreve{display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:8px;align-items:end;padding:12px 14px 12px 18px;border-top:1px solid var(--vd-b)}
.vd-escreve[hidden]{display:none}
.vd-escreve textarea{width:100%;min-height:40px;max-height:110px;padding:9px 0;border:0;background:none;color:#fff;font:inherit;font-size:15px;resize:none;outline:none}
.vd-escreve textarea::placeholder{color:rgba(255,255,255,.4)}
.vd-escreve button{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;background:var(--laranja);color:#fff;cursor:pointer}
.vd-escreve button svg{width:18px;height:18px}
.vd-escreve button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.vd-escreve:focus-within{box-shadow:inset 0 1px 0 rgba(255,87,5,.5)}
.vd-nota{grid-column:1/-1;margin:0;font-size:12px;color:var(--cinza)}
.vd.aberto .vd-q{display:none}
/* celular: a pilula embaixo, o painel sobe como folha */
@media (max-width:760px){
  .vd{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));align-items:stretch}
  .vd-pil{max-width:none}
  .vd-abre{justify-content:flex-start}
  .vd-painel{position:fixed;left:0;right:0;bottom:0;width:auto;height:min(88vh,680px);height:min(88dvh,680px);border-radius:24px 24px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom)}
  .vd.aberto .vd-pil{display:none}
  .vd-op{font-size:16.5px}
}
@media (prefers-reduced-motion:reduce){.vd-ponto.pulsa,.vd-ind i,.vd-fim.desenha .vd-check,.vd-fim.desenha .vd-luz{animation:none}.vd-fim.desenha .vd-luz{opacity:1}.vd-mk::after,.vd-barra i,.vd-campo label{transition:none}}

/* ---------------------------------------------------------------- 13 a pagina que se adapta (24/10/2026): um desenho so para as 9
   secoes da inicial (sia_page(), sia-adapta.js). Grade de 12 colunas, um espaco vertical, o mesmo cabecalho (numero e nome,
   titulo, apoio) a esquerda e a interacao a direita; a mesma familia de componentes (linhas com marcador, o botao laranja, o de
   vidro e os links); um efeito de destaque por secao; a fita do indice liga as secoes. Animacoes do sia-adapta.js em transform,
   opacity e clip-path; aqui, so transicoes de cor, borda e opacidade de estado. */
:root{--sx-pad:clamp(96px,11vw,168px);--sx-gap:clamp(20px,2.6vw,40px)}
main>section.sx{position:relative;padding-block:var(--sx-pad);background:#050505;border-top:1px solid rgba(255,255,255,.05)}
.sx-grade{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--sx-gap);align-items:start}
.sx-cab{grid-column:1/6;position:sticky;top:112px}
.sx-corpo{grid-column:7/13;min-width:0}
.sx.sx-larga .sx-cab{grid-column:1/8;position:static}
.sx.sx-larga .sx-corpo{grid-column:1/13;margin-top:clamp(40px,5vw,72px)}
.sx-num{margin:0;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cinza)}
.sx-num b{font-weight:600;color:var(--cinza)}
.sx h2{margin:18px 0 0;font-size:clamp(36px,4.1vw,60px);font-weight:700;line-height:1.04;letter-spacing:-.035em;color:#fff;text-wrap:balance}
.sx-apoio{margin:18px 0 0;max-width:36ch;font-size:clamp(16px,1.25vw,18px);line-height:1.55;color:var(--cinza)}
.sx-nota,.sx-preco{margin:22px 0 0;font-size:14.5px;color:var(--cinza)}
.sx-preco{color:#fff;font-weight:600}
.sx-links{display:flex;flex-wrap:wrap;gap:10px 22px;margin:12px 0 0}
.sx-mais{margin:22px 0 0}
.sx-rot{margin:22px 0 4px;font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--cinza)}
.sx-rot b{color:var(--laranja);font-weight:600;margin-right:6px}
.tl{display:block;overflow:hidden;padding-bottom:.06em}.tl-i{display:block}
/* a linha com marcador: a mesma em toda a pagina */
.adp-linhas{border-top:1px solid rgba(255,255,255,.07)}
.ln-op{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:48px;padding:11px 6px 11px 2px;border:0;border-bottom:1px solid rgba(255,255,255,.07);background:none;color:rgba(255,255,255,.84);font:inherit;font-size:16.5px;line-height:1.35;text-align:left;cursor:pointer;transition:color .25s var(--e),background-color .25s var(--e)}
.ln-op:hover,.ln-op:focus-visible{color:#fff;background:rgba(255,255,255,.025);outline:none}
.ln-op:focus-visible{box-shadow:inset 2px 0 0 var(--laranja)}
.mk{position:relative;flex:none;display:inline-block;width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);transition:border-color .25s var(--e)}
.mk::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--laranja);transform:scale(0);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.ln-op:hover .mk,.ln-op:focus-visible .mk,.ln-op.previa .mk{border-color:var(--laranja)}
.ln-op[aria-checked="true"]{color:#fff}
.ln-op[aria-checked="true"] .mk{border-color:var(--laranja)}
.ln-op[aria-checked="true"] .mk::after{transform:scale(1)}
.ln-t{flex:1;min-width:0}.ln-t small{display:block;margin-top:2px;font-size:12.5px;color:var(--cinza)}
.ln-op em{font-style:normal;font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--cinza)}
.ln-op kbd{display:none;font:inherit;font-size:12px;color:rgba(255,255,255,.3)}
@media (hover:hover) and (pointer:fine){.ln-op kbd{display:inline}}
/* 01 o heroi */
.sx-heroi .heroi{max-width:min(640px,100%)}
.sx-heroi h1{font-size:clamp(46px,6.2vw,92px)}
.sx-heroi .lead{min-height:3.1em}
.adp-pergunta{margin-top:30px;max-width:560px}
.adp-q{margin:0;font-size:15px;font-weight:600;color:#fff}
.adp-q-a{margin:4px 0 10px;font-size:13.5px;color:var(--cinza)}
.adp-dores .ln-op{font-size:15.5px;min-height:44px;padding-block:9px}
.sx-heroi .ctas{margin-top:28px}
/* 02 o negocio */
.adp-negocios{margin-top:30px}
.adp-foto{position:relative;margin:0;aspect-ratio:16/10;border-radius:22px;overflow:hidden;background:#151515;view-transition-name:adp-foto}
.adp-foto-i{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--e)}
.adp-foto-i.on{opacity:1}
.adp-foto-i picture,.adp-foto-i img{display:block;width:100%;height:100%;object-fit:cover}
.adp-fenda{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:linear-gradient(90deg,transparent,#FF5705 20%,#FFB27F 50%,#FF5705 80%,transparent);box-shadow:0 0 18px 3px rgba(255,87,5,.6);opacity:0;pointer-events:none}
.adp-exemplo{margin:22px 0 0;font-size:13px;color:var(--cinza)}.adp-exemplo b{color:#fff;font-weight:600}
.adp-situ{margin:12px 0 0;font-size:clamp(20px,1.7vw,24px);font-weight:600;line-height:1.35;letter-spacing:-.015em;color:#fff}
.adp-exemplo[hidden]+.adp-situ{margin-top:22px}
.adp-estr-curta{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.07)}
.adp-estr-curta li{padding:11px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:15.5px;color:#fff}
.adp-estr-curta small{display:block;margin-bottom:2px;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cinza)}
.adp-estr-curta li.resolve small{color:var(--laranja)}
::view-transition-old(adp-foto),::view-transition-new(adp-foto){animation-duration:.55s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
/* 03 a sua cidade: o mapa em pontos */
.adp-mapa{position:relative;margin:0;perspective:1200px}
.adp-mapa canvas{display:block;width:100%;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--e);cursor:pointer}
.adp-ilustra{position:absolute;right:6px;bottom:4px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.34)}
.adp-atos{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.07)}
.adp-atos li{position:relative;padding:14px 0 14px 22px;border-bottom:1px solid rgba(255,255,255,.07);font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.42);transition:color .45s var(--e)}
.adp-atos li::before{content:"";position:absolute;left:0;top:22px;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2);transition:background-color .45s var(--e),box-shadow .45s var(--e)}
.adp-atos li.on{color:#fff}
.adp-atos li.on::before{background:var(--laranja);box-shadow:0 0 10px rgba(255,87,5,.7)}
.adp-atos+p{margin:18px 0 0}
/* 04 a estrategia */
.adp-estrs{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.07)}
.es{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.es>.mk{align-self:start;margin-top:22px}
.es-t small{display:block;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cinza)}
.es-t small b{color:var(--laranja);font-weight:600}
.es-t p{margin:4px 0 0;font-size:17px;line-height:1.4;color:#fff}
.es-sv{display:block;margin-top:4px;font-size:13px;color:var(--cinza)}
.es.no-plano>.mk{border-color:var(--laranja)}.es.no-plano>.mk::after{transform:scale(1)}
.es.resolve>.mk{border-color:rgba(255,87,5,.6)}
.es-mais{min-height:38px;padding:8px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:transparent;color:#fff;font:inherit;font-size:13.5px;font-weight:600;white-space:nowrap;cursor:pointer;transition:border-color .3s var(--e),background-color .3s var(--e)}
.es-mais:hover,.es-mais:focus-visible{border-color:var(--laranja);background:rgba(255,87,5,.1);outline:none}
.es-mais[aria-pressed="true"]{border-color:rgba(255,87,5,.5);color:#FFB27F}
/* 05 os servicos: a fita (celular: vertical, descendo pela esquerda) */
.fx{position:relative}
.fx-svg{display:none}
.fx-etapas{list-style:none;margin:0;padding:0 0 0 26px;position:relative}
.fx-etapas::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;border-radius:2px;background:linear-gradient(180deg,rgba(255,87,5,.15),rgba(255,87,5,.6),rgba(255,87,5,.15))}
.fx-etapa{margin:0 0 18px}
.fx-marco{position:relative;margin:0;padding:10px 0;font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#fff}
.fx-marco b{color:var(--laranja);margin-right:6px}
.fx-marco::before{content:"";position:absolute;left:-26px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;border:2px solid var(--laranja);background:#050505;box-shadow:0 0 12px rgba(255,87,5,.5)}
.fx-nos{list-style:none;margin:0;padding:0}
.fx-item{position:relative;border-bottom:1px solid rgba(255,255,255,.07)}
.fx-no{display:flex;align-items:center;gap:14px;width:100%;min-height:48px;padding:10px 0;border:0;background:none;color:rgba(255,255,255,.86);font:inherit;font-size:16.5px;font-weight:500;text-align:left;cursor:pointer;transition:color .25s var(--e)}
.fx-no:hover,.fx-no:focus-visible{color:#fff;outline:none}
.fx-no:focus-visible .fx-nome{text-decoration:underline;text-decoration-color:var(--laranja);text-underline-offset:4px}
.fx-pt{position:absolute;left:-23px;width:12px;height:12px;border-radius:50%;border:1.5px solid rgba(255,255,255,.45);background:#050505;transition:transform .35s cubic-bezier(.34,1.56,.64,1),border-color .3s var(--e),background-color .3s var(--e),box-shadow .3s var(--e)}
.fx-item.aceso .fx-pt{border-color:var(--laranja);box-shadow:0 0 10px rgba(255,87,5,.55)}
.fx-item.aceso .fx-no{color:#fff}
.fx-item.no-plano .fx-pt{background:var(--laranja);border-color:var(--laranja)}
.fx-item.aberto .fx-pt,.fx-no:hover .fx-pt{transform:scale(1.35)}
.fx-painel{padding:0 0 16px}
.fx-painel p{margin:0;font-size:14.5px;line-height:1.5;color:#fff}
.fx-painel small{display:block;margin-bottom:4px;font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--laranja)}
.fx-mais{margin-top:12px;min-height:36px;padding:7px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:transparent;color:#fff;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:border-color .3s var(--e),background-color .3s var(--e)}
.fx-mais:hover,.fx-mais:focus-visible{border-color:var(--laranja);background:rgba(255,87,5,.1);outline:none}
.fx-mais[aria-pressed="true"]{border-color:rgba(255,87,5,.5);color:#FFB27F}
.fx-fim{position:relative;margin:0;padding:4px 0 0 26px;font-size:13px;color:var(--cinza)}
.fx-fim .mk{position:absolute;left:3px;top:4px;width:12px;height:12px;border-color:var(--laranja)}
.fx-corre{position:absolute;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#FFB27F;box-shadow:0 0 14px 4px rgba(255,87,5,.8);opacity:0;pointer-events:none}
/* a fita no computador: os nos pendurados na curva (posicoes do sia-adapta.js) */
.fx.fx-on{height:360px}
.fx.fx-on::before{content:"";position:absolute;left:10%;right:10%;top:30%;bottom:30%;background:radial-gradient(ellipse at center,rgba(255,87,5,.07),rgba(255,87,5,0) 70%);pointer-events:none}
.fx.fx-on .fx-svg{display:block;position:absolute;left:0;top:0;overflow:visible}
.fx-base{fill:none;stroke:rgba(255,87,5,.35);stroke-width:2;stroke-linecap:round}
.fx-acesa{fill:none;stroke:#FF5705;stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(255,87,5,.65));clip-path:inset(0 100% 0 0);transition:clip-path .55s var(--e)}
.fx.fx-on .fx-etapas,.fx.fx-on .fx-etapa,.fx.fx-on .fx-nos{display:contents}
.fx.fx-on .fx-etapas::before{display:none}
.fx.fx-on .fx-marco{position:absolute;padding:0;transform:translate(-50%,-50%);white-space:nowrap;z-index:2}
.fx.fx-on .fx-marco::before{position:relative;display:block;left:auto;top:auto;margin:0 auto;width:22px;height:22px}
.fx.fx-on .fx-marco b,.fx.fx-on .fx-marco{line-height:1}
.fx.fx-on .fx-marco{display:flex;flex-direction:column;align-items:center;gap:12px}
.fx.fx-on .fx-marco::before{order:0}
.fx.fx-on .fx-item{position:absolute;width:0;height:0;border:0;z-index:3}
.fx.fx-on .fx-item.aberto{z-index:5}
.fx.fx-on .fx-no{position:absolute;left:0;top:0;width:auto;min-height:0;padding:0;display:block;transform:translate(-50%,-50%)}
.fx.fx-on .fx-pt{position:relative;left:auto;display:block;width:14px;height:14px;margin:0 auto}
.fx.fx-on .fx-nome{position:absolute;left:50%;width:max-content;max-width:150px;transform:translateX(-50%);font-size:14px;line-height:1.3;text-align:center}
.fx.fx-on .fx-item.cima .fx-nome{bottom:24px}
.fx.fx-on .fx-item.baixo .fx-nome{top:24px}
.fx.fx-on .fx-painel{position:absolute;left:0;width:260px;padding:16px 18px;border-radius:16px;background:#151515;border:1px solid rgba(255,255,255,.08);box-shadow:0 22px 60px -24px rgba(0,0,0,.9);transform:translateX(-50%)}
.fx.fx-on .fx-item.cima .fx-painel{top:22px}
.fx.fx-on .fx-item.baixo .fx-painel{bottom:22px}
.fx.fx-on .fx-item.borda-e .fx-painel{transform:translateX(-24px)}
.fx.fx-on .fx-item.borda-d .fx-painel{transform:translateX(calc(-100% + 24px))}
.fx.fx-on .fx-fim{position:absolute;padding:0;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:10px;white-space:nowrap}
.fx.fx-on .fx-fim .mk{position:relative;left:auto;top:auto;width:16px;height:16px}
/* 06 a conversa de exemplo */
.adp-tela{margin:0;border-radius:24px;background:#151515;border:1px solid rgba(255,255,255,.07);overflow:hidden;box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.adp-tela-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.adp-tela-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14)}
.adp-tela-bar span{margin-left:10px;font-size:12px;font-weight:600;color:var(--cinza)}
.adp-tela-cab{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.06)}
.adp-av{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#242424;color:#fff;font-size:13px;font-weight:700}
.adp-tela-cab b{display:block;font-size:15px;color:#fff}.adp-tela-canal{font-size:12.5px;color:var(--cinza)}
.adp-msgs{display:flex;flex-direction:column;gap:10px;padding:22px 20px;min-height:280px}
.adp-m{max-width:82%;margin:0;padding:11px 14px;border-radius:16px;font-size:15px;line-height:1.45}
.adp-m.c{align-self:flex-start;background:#242424;color:#fff;border-bottom-left-radius:6px}
.adp-m.a{align-self:flex-end;background:rgba(255,87,5,.13);border:1px solid rgba(255,87,5,.25);color:#fff;border-bottom-right-radius:6px}
.adp-m small{display:block;margin-bottom:3px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#FFB27F}
.adp-status{display:flex;align-items:center;gap:10px;margin:0 20px 18px;padding:10px 14px;border-radius:12px;background:#1C1C1C;font-size:13.5px;color:#fff}
.adp-status .mk{width:14px;height:14px;border-color:var(--laranja)}.adp-status .mk::after{transform:scale(1);inset:2px}
.adp-tela figcaption{padding:0 20px 16px;font-size:12px;color:var(--cinza)}
/* 07 automacoes */
.adp-nos{position:relative;list-style:none;margin:0;padding:0 0 0 30px}
.adp-nos-fio{position:absolute;left:8px;top:12px;bottom:12px;width:2px;background:rgba(255,255,255,.07)}
.adp-nos-fio i{display:block;height:100%;background:linear-gradient(180deg,#FF5705,rgba(255,87,5,.4));transform-origin:50% 0}
.adp-nos li{position:relative;display:flex;align-items:center;min-height:56px;font-size:18px;font-weight:600;color:rgba(255,255,255,.5);border-bottom:1px solid rgba(255,255,255,.07);transition:color .45s var(--e)}
.adp-nos li .mk{position:absolute;left:-30px;background:#050505}
.adp-nos li.aceso{color:#fff}.adp-nos li.aceso .mk{border-color:var(--laranja)}.adp-nos li.aceso .mk::after{transform:scale(1)}
.adp-auto{margin:24px 0 0;padding:16px 18px;border-radius:16px;background:#151515;border:1px solid rgba(255,255,255,.07);font-size:16px;line-height:1.5;color:#fff}
.adp-auto+p{margin:14px 0 0}
.adp-auto-mais[aria-pressed="true"],.adp-cidade-mais[aria-pressed="true"]{color:#FFB27F}
/* 08 o plano */
.sx-plano .sx-cab{position:static}
.adp-conversa{margin-top:36px}
.adp-conversa h3{margin:0;font-size:20px;font-weight:700;color:#fff}
.adp-conversa>p{margin:8px 0 16px;font-size:15px;color:var(--cinza)}
.adp-conversa .conv{max-width:none;margin:0}
.adp-plano{border-radius:24px;background:#151515;border:1px solid rgba(255,255,255,.07);overflow:hidden}
.adp-plano-cab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:20px 22px 14px}
.adp-plano-cab h3{margin:0;font-size:18px;font-weight:700;color:#fff;outline:none}
.adp-passos{margin:0;font-size:13px;color:var(--cinza)}
.adp-barra{height:2px;background:rgba(255,255,255,.05)}
.adp-barra i{display:block;height:100%;background:var(--laranja);transform-origin:0 50%;transform:scaleX(0);transition:transform .5s var(--e)}
.adp-plano-corpo{padding:16px 22px 24px}
.adp-semjs{margin:0 0 14px;color:var(--cinza)}
.pl-linhas{border-top:1px solid rgba(255,255,255,.07)}
.pl-var{display:flex;justify-content:space-between;align-items:baseline;gap:14px;width:100%;padding:12px 0;border:0;border-bottom:1px solid rgba(255,255,255,.07);background:none;color:#fff;font:inherit;text-align:left;cursor:pointer}
.pl-var span{font-size:13.5px;color:var(--cinza)}.pl-var b{font-size:15px;font-weight:600;text-align:right}
.pl-var:hover b,.pl-var:focus-visible b{color:#FFB27F}.pl-var:focus-visible{outline:none}
.pl-cidade{cursor:text}
.pl-cidade input{flex:1;min-width:0;max-width:60%;padding:2px 0;border:0;border-bottom:1px solid transparent;background:none;color:#fff;font:inherit;font-size:15px;font-weight:600;text-align:right;outline:none;transition:border-color .25s var(--e)}
.pl-cidade input:focus{border-bottom-color:var(--laranja)}
.pl-cidade input::placeholder{color:rgba(255,255,255,.35);font-weight:400}
.pl-h{margin:20px 0 0;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#fff}
.pl-vazio{margin:10px 0;font-size:14.5px;color:var(--cinza)}
.pl-todos{margin-top:12px;padding:6px 0;border:0;background:none;color:var(--cinza);font:inherit;font-size:13.5px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.pl-todos:hover,.pl-todos:focus-visible{color:#fff;outline:none}
.pl-acoes{margin-top:20px}
.pl-q{margin:4px 0 0;font-size:clamp(24px,2.1vw,30px);font-weight:700;line-height:1.2;letter-spacing:-.02em;color:#fff;outline:none}
.pl-a{margin:8px 0 18px;font-size:14.5px;color:var(--cinza)}
.pl-campo{position:relative;margin-top:22px}
.pl-campo input{width:100%;padding:18px 0 8px;border:0;border-bottom:1.5px solid rgba(255,255,255,.2);border-radius:0;background:none;color:#fff;font:inherit;font-size:18px;outline:none;transition:border-color .25s var(--e)}
.pl-campo input:focus{border-bottom-color:var(--laranja)}
.pl-campo label{position:absolute;left:0;top:18px;font-size:17px;color:var(--cinza);pointer-events:none;transform-origin:0 0;transition:transform .25s var(--e),color .25s var(--e)}
.pl-campo input:focus+label,.pl-campo input:not(:placeholder-shown)+label{transform:translateY(-20px) scale(.76)}
.pl-campo input:focus+label{color:var(--laranja)}
.pl-campo input[aria-invalid="true"]{border-bottom-color:#FF8A5C}
.pl-err{min-height:1.4em;margin:8px 0 0;font-size:13.5px;color:#FFB27F}
.pl-pe{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px}
.pl-voltar{padding:8px 0;border:0;background:none;color:var(--cinza);font:inherit;font-size:14px;cursor:pointer}
.pl-voltar:hover,.pl-voltar:focus-visible{color:#fff;outline:none;text-decoration:underline}
.pl-pe .btn,.pl-acoes .btn{min-height:46px;padding:10px 20px;font-size:15.5px}
.pl-enviar{position:relative}
.pl-ind{display:none;gap:5px;align-items:center;justify-content:center}
.pl-ind i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:vd-ind 1s ease-in-out infinite}
.pl-ind i:nth-child(2){animation-delay:.15s}.pl-ind i:nth-child(3){animation-delay:.3s}
.pl-enviar.enviando .pl-rot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.pl-enviar.enviando .pl-ind{display:inline-flex;min-width:7.5em;min-height:1.2em}
.pl-falha{margin-top:16px;font-size:14.5px;line-height:1.5;color:#fff}.pl-falha .btn{margin-top:10px}
.pl-fim{position:relative;padding:12px 0 6px;outline:none}
.pl-luz{position:absolute;left:-14px;top:-10px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(255,87,5,.28),rgba(255,87,5,0) 70%);opacity:1;pointer-events:none}
.pl-check{position:relative;width:56px;height:56px;fill:none;stroke:var(--laranja);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pl-check circle{stroke-opacity:.35}
.pl-fim.desenha .pl-check{animation:vd-desenha .6s cubic-bezier(.65,0,.35,1) backwards}
.pl-fim.desenha .pl-luz{animation:vd-luz 1.2s ease-out .2s backwards}
.pl-fim-t{margin:16px 0 0;font-size:30px;font-weight:800;letter-spacing:-.03em;color:#fff}
.pl-fim-a{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--cinza)}
.pl-frase{margin:18px 0 0;padding-top:16px;border-top:1px solid rgba(255,87,5,.3);font-size:17px;font-weight:600;line-height:1.45;color:#fff}
/* o indice fixo: a fita que liga as secoes (no celular e em tela menor, uma barra fina no topo) */
.adp-indice{position:fixed;left:22px;top:50%;z-index:40;transform:translateY(-50%)}
.adp-indice ol{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.adp-indice a{display:flex;align-items:center;gap:12px;padding:3px 0;color:rgba(255,255,255,.34);text-decoration:none;font-size:11.5px;font-weight:600;letter-spacing:.06em}
.adp-indice a b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#050505;font-weight:600;transition:color .3s var(--e),box-shadow .3s var(--e)}
.adp-indice a span{opacity:0;transform:translateX(-4px);white-space:nowrap;color:#fff;text-transform:uppercase;transition:opacity .25s var(--e),transform .25s var(--e)}
.adp-indice a:hover span,.adp-indice a:focus-visible span{opacity:1;transform:none}
.adp-indice a:focus-visible{outline:none}.adp-indice a:focus-visible b{box-shadow:0 0 0 2px var(--laranja)}
.adp-indice a.on b{color:#fff;box-shadow:0 0 0 1px var(--laranja),0 0 12px rgba(255,87,5,.5)}
.adp-fita{position:absolute;left:10px;top:0;bottom:0;width:2px;background:rgba(255,255,255,.07);z-index:-1}
.adp-fita i{display:block;height:100%;background:linear-gradient(180deg,#FF5705,#FFB27F);transform-origin:50% 0;transform:scaleY(0)}
@media (max-width:1319px){
  .adp-indice{left:0;right:0;top:0;transform:none;height:2px;z-index:70}
  .adp-indice ol{display:none}
  .adp-fita{left:0;right:0;top:0;bottom:auto;width:auto;height:2px;background:transparent}
  .adp-fita i{transform-origin:0 50%;transform:scaleX(0)}
}
/* o seletor do menu: o que pesa, negocio e cidade */
.adp-sel{position:relative;margin-left:auto;margin-right:12px}
.adp-sel-b{display:flex;align-items:center;gap:8px;max-width:340px;height:36px;padding:0 12px 0 14px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(21,21,21,.7);color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:border-color .3s var(--e)}
.adp-sel-b:hover,.adp-sel-b:focus-visible{border-color:var(--laranja);outline:none}
.adp-sel-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adp-sel-c{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:rgba(255,87,5,.18);color:#FFB27F;font-size:12px;font-weight:700;line-height:20px;text-align:center}
.adp-sel-s{width:7px;height:7px;flex:none;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.7}
.adp-sel-p{position:absolute;right:0;top:46px;width:340px;max-height:min(70vh,560px);overflow:auto;padding:6px 18px 16px;border-radius:18px;background:#151515;border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 80px -30px rgba(0,0,0,.95)}
.adp-sel-p .ln-op{font-size:14.5px;min-height:42px;padding-block:8px}
.adp-sel-p .pl-cidade{margin-top:10px;border-top:1px solid rgba(255,255,255,.07)}
.adp-sel-pe{margin:14px 0 0}
@media (max-width:760px){
  main>section.sx{padding-block:clamp(72px,18vw,96px)}
  .sx-grade{display:block}
  .sx-cab{position:static}
  .sx-corpo{margin-top:36px}
  .sx.sx-larga .sx-corpo{margin-top:32px}
  .adp-negocios{margin-top:24px}
  .es{grid-template-columns:18px minmax(0,1fr)}
  .es-mais{grid-column:2;justify-self:start}
  .adp-sel{margin-right:8px}
  .adp-sel-b{max-width:128px;padding:0 10px}
  .adp-sel-p{position:fixed;left:12px;right:12px;top:64px;width:auto}
  .adp-msgs{min-height:0}
}
@media (prefers-reduced-motion:reduce){.adp-foto-i,.fx-acesa,.fx-pt,.adp-atos li,.adp-nos li,.adp-mapa canvas{transition:none}.pl-ind i{animation:none}}
/* as secoes antigas tinham regras pelo id (fundo, moldura, colunas): aqui todas voltam ao desenho unico */
:is(#negocio,#cidade,#estrategia,#servicos,#chatsia,#automacoes,#monte,#perguntas).sx{padding-block:var(--sx-pad);background:#050505}
:is(#negocio,#cidade,#estrategia,#servicos,#chatsia,#automacoes,#monte,#perguntas).sx>.wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--sx-gap);border:0;border-radius:0;background:none;box-shadow:none;padding-block:0;height:auto}
@media (max-width:760px){:is(#negocio,#cidade,#estrategia,#servicos,#chatsia,#automacoes,#monte,#perguntas).sx{padding-block:clamp(72px,18vw,96px)}:is(#negocio,#cidade,#estrategia,#servicos,#chatsia,#automacoes,#monte,#perguntas).sx>.wrap{display:block}}
button.link{padding:0;border:0;background:none;color:var(--laranja);font:inherit;font-size:15px;font-weight:600;cursor:pointer;text-decoration:none}
button.link:hover,button.link:focus-visible{text-decoration:underline;text-underline-offset:4px;outline:none}
.sx-heroi .moldura{height:auto;min-height:100vh;min-height:100svh}
.sx-heroi .heroi{max-width:min(760px,100%);padding-block:clamp(120px,14vh,170px) clamp(56px,8vh,90px)}
.sx-heroi h1{font-size:clamp(44px,5.4vw,82px)}
.adp-ilustra{top:6px;bottom:auto}
.fx.fx-on{height:400px}
.fx.fx-on .fx-marco{flex-direction:column-reverse;transform:translate(-50%,calc(-100% + 11px))}
.fx.fx-on .fx-fim{transform:translate(-50%,-8px)}
.sx-heroi .heroi{padding-block:clamp(104px,12vh,150px) clamp(48px,6vh,80px)}
.sx-heroi h1{font-size:clamp(42px,5vw,76px)}
.sx-heroi .lead{margin-top:20px}
.adp-pergunta{margin-top:24px}
.adp-dores .ln-op{min-height:40px;padding-block:7px;font-size:15px}
.sx-heroi .ctas{margin-top:22px}
.sx.sx-larga .sx-corpo{margin-top:clamp(8px,2vw,24px)}
.sx-heroi .selo{display:inline-block}
@media (max-width:760px){.adp-sel-t{display:none}.adp-sel-b::before{content:"Seu caso"}.adp-sel-b{gap:6px}}
.fx.fx-on .fx-painel::before{content:"";position:absolute;left:0;right:0;height:14px}
.fx.fx-on .fx-item.cima .fx-painel::before{top:-14px}
.fx.fx-on .fx-item.baixo .fx-painel::before{bottom:-14px}
/* ---- 24/10/2026, noite: cada secao e uma tela inteira; os cartoes de vidro nas perguntas */
.vidro{background:rgba(21,21,21,.92);border:1px solid rgba(255,255,255,.08);border-radius:24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 80px -30px rgba(0,0,0,.6)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .vidro{background:rgba(21,21,21,.55);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
  @media (max-width:760px){.vidro{-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%)}}
}
/* no vidro, o texto de apoio fica mais claro (AA sobre qualquer fundo desfocado atras) e a linha escolhida ganha um fundo laranja leve */
.vidro .adp-q-a,.vidro .pl-a,.vidro .pl-var span,.vidro .adp-passos,.vidro .ln-t small,.vidro .pl-todos,.vidro .pl-voltar,.vidro .sx-rot,.vidro .pl-vazio{color:#C4C4C4}
.vidro .ln-op[aria-checked="true"]{background:rgba(255,87,5,.12)}
.vidro .adp-linhas{border-top-color:rgba(255,255,255,.08)}
.adp-pergunta.vidro{padding:22px 22px 14px}
.adp-negocios-c{padding:8px 18px 10px;margin-top:30px}
.adp-negocios-c .adp-negocios{margin-top:0;border-top:0}
.adp-negocios-c .ln-op:last-child{border-bottom:0}
.adp-negocios-c:has(>.adp-negocios[hidden]){display:none}
.adp-plano.vidro{overflow:hidden}
#perguntas .faq{padding:6px 24px;border-radius:24px;background:rgba(21,21,21,.92);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 80px -30px rgba(0,0,0,.6)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){#perguntas .faq{background:rgba(21,21,21,.55);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}}
#perguntas .faq details:last-child{border-bottom:0}
/* tela inteira: cada secao e um capitulo, com o conteudo centrado na vertical (sem scroll-snap) */
main>section.sx,:is(#negocio,#cidade,#estrategia,#servicos,#chatsia,#automacoes,#monte,#perguntas).sx{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding-block:clamp(84px,9vh,120px) clamp(56px,7vh,96px);background:transparent;border-top:0}
main>section.sx>.wrap{width:100%}
.sx-cab{top:96px}
/* o heroi: uma cena so, a tela inteira; titulo e frase a esquerda, o cartao de vidro a direita */
.sx-heroi .moldura{min-height:calc(100vh - 32px);min-height:calc(100svh - 32px);display:flex;align-items:center}
.sx-heroi .heroi{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,64px);align-items:center;width:100%;max-width:var(--max);margin:0 auto;padding:clamp(96px,11vh,130px) clamp(24px,4vw,56px) clamp(40px,6vh,72px);position:relative;z-index:2}
.sx-heroi .heroi-txt{min-width:0}
.sx-heroi .adp-pergunta{margin-top:0;max-width:none}
@media (max-width:900px){.sx-heroi .heroi{grid-template-columns:1fr;padding-top:104px}.sx-heroi .moldura{min-height:auto}}
body{background:#050505}
main>section.sx>.wrap,.sx-heroi .moldura{position:relative;z-index:2}
.sx-heroi .moldura{z-index:2}
footer{position:relative;z-index:2}
/* o indice: so os numeros; a barra fina de progresso fica no celular e em tela menor */
@media (min-width:1320px){.adp-fita{display:none}}
.adp-mapa-exemplo{position:absolute;left:6px;top:6px;padding:4px 10px;border-radius:999px;border:1px solid rgba(255,87,5,.35);background:rgba(21,21,21,.8);font-size:11.5px;font-weight:600;color:#FFB27F}
/* o heroi sem camada propria (o texto e o cartao por cima das fitas) */
.sx-heroi .moldura{z-index:auto;isolation:auto;transform:none}
.sx-heroi .heroi{z-index:2}
/* ---- 24/10/2026, noite (capturas do Daniel): 1 o destaque das opcoes em pilula arredondada; 2 o botao laranja de vidro; 3 o heroi sem moldura */
.ln-op{border-radius:13px;padding-left:12px;padding-right:12px;border-bottom-color:rgba(255,255,255,.07);transition:color .25s var(--e),background-color .25s var(--e),border-color .25s var(--e)}
.ln-op:hover,.ln-op:focus-visible{background:rgba(255,255,255,.05);border-bottom-color:transparent}
.ln-op[aria-checked="true"],.vidro .ln-op[aria-checked="true"]{background:rgba(255,87,5,.13);border-bottom-color:transparent}
.ln-op:has(+.ln-op:hover),.ln-op:has(+.ln-op:focus-visible),.ln-op:has(+.ln-op[aria-checked="true"]){border-bottom-color:transparent}
.ln-op:focus-visible{box-shadow:inset 0 0 0 1.5px rgba(255,87,5,.8)}
.ln-op:last-child{border-bottom-color:transparent}
.adp-linhas{border-top:0}
/* nos cartoes de vidro, a pilula fica a 7 px das bordas */
.adp-pergunta.vidro{padding:22px 7px 8px}
.adp-pergunta.vidro .adp-q,.adp-pergunta.vidro .adp-q-a{padding:0 15px}
.adp-negocios-c{padding:7px}
.adp-plano-corpo .adp-linhas,.adp-sel-p .adp-linhas{margin:0 -15px}
.adp-sel-p{padding:6px 22px 16px}
/* o botao laranja de vidro (o texto branco fica em 4,8:1 sobre o fundo escuro e acima de 3:1 sobre as fitas) */
html body .btn:not(.vidro):not(.ghost):not(.wa){background:rgba(255,87,5,.78);color:#fff;border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.12),0 14px 36px -14px rgba(255,87,5,.65)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){html body .btn:not(.vidro):not(.ghost):not(.wa){-webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%)}}
html body .btn:not(.vidro):not(.ghost):not(.wa):hover,html body .btn:not(.vidro):not(.ghost):not(.wa):focus-visible{background:rgba(255,87,5,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 20px 48px -16px rgba(255,87,5,.75)}
html body .btn.sm:not(.vidro):not(.ghost):not(.wa){color:#fff}
html body .btn.sm:not(.vidro):not(.ghost):not(.wa)::after{filter:none}
/* o heroi: tela cheia de verdade, de borda a borda, sem caixa nem contorno; as fitas atravessam a tela inteira por tras */
.sia-hero.sx-heroi{padding:0}
.sx-heroi .moldura{margin:0;height:auto;min-height:100vh;min-height:100svh;max-height:none;border:0;border-radius:0;box-shadow:none;overflow:hidden;
  background:radial-gradient(42% 52% at 80% 60%,rgba(255,87,5,.09),transparent 72%),linear-gradient(180deg,#0b0b0b 0%,#050505 100%)}
.sx-heroi .heroi{height:auto;max-width:min(var(--max),100%);padding:clamp(88px,12vh,120px) clamp(28px,5vw,64px) clamp(40px,6vh,64px)}
.sx-heroi .adp-pergunta{min-width:0;width:100%;max-width:520px;justify-self:end}
.adp-indice{left:30px}
@media (max-width:900px){.sx-heroi .adp-pergunta{justify-self:stretch;max-width:none}.sx-heroi .heroi{padding:96px 18px 40px}}
/* a trilha que se desenha: o no abre com mola e o nome entra por mascara quando a linha chega nele */
.fx-base{transition:none}
.fx .fx-pt,.fx .fx-marco::before,.fx .fx-fim .mk{transition:transform .5s cubic-bezier(.34,1.56,.64,1),border-color .3s var(--e),background-color .3s var(--e),box-shadow .3s var(--e)}
.fx .fx-nome,.fx .fx-marco,.fx .fx-fim{transition:clip-path .55s cubic-bezier(.16,1,.3,1),opacity .3s var(--e)}
.fx .fx-item:not(.vivo) .fx-pt,.fx .fx-marco:not(.vivo)::before,.fx .fx-fim:not(.vivo) .mk{transform:scale(0)}
.fx .fx-item:not(.vivo) .fx-nome{clip-path:inset(0 0 100% 0)}
.fx .fx-marco:not(.vivo),.fx .fx-fim:not(.vivo){clip-path:inset(0 0 0 100%)}
.fx .fx-marco.vivo,.fx .fx-fim.vivo{clip-path:inset(-20px -40px -20px -40px)}
.fx.fx-on .fx-item.pn-baixo .fx-painel{top:22px;bottom:auto}
.fx.fx-on .fx-item.pn-cima .fx-painel{bottom:22px;top:auto}
.fx.fx-on .fx-item.pn-baixo .fx-painel::before{top:-14px;bottom:auto}
.fx.fx-on .fx-item.pn-cima .fx-painel::before{bottom:-14px;top:auto}
.fx .sob-painel{opacity:.1}
.fx-etapas::before{clip-path:inset(0 0 calc(100% - var(--fx-desenho,100%)) 0)}
@media (prefers-reduced-motion:reduce){.fx .fx-pt,.fx .fx-nome,.fx .fx-marco,.fx .fx-fim{transition:none}}
@media (max-width:760px){.adp-sel-b::before{white-space:nowrap}}
.fx.fx-on .fx-marco{gap:38px}
/* ---- a conversa com o agente sem caixa (24/10/2026, pedido do Daniel: "o texto vai aparecendo na tela, somente uma barra lateral
   para controlar"): sem moldura, sem cabecalho de janela, sem fundo; as perguntas sao texto grande da pagina; as mensagens descem
   como um roteiro; o campo e uma linha grande no pe; a barra lateral fina e propria (sia-cena.js). So no site da SIA. */
html body .conv{position:relative;display:flex;flex-direction:column;max-width:none;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
html body .conv-id{display:flex;align-items:center;gap:9px;margin:0 0 20px;font-size:13px;color:var(--cinza)}
html body .conv-id i{width:7px;height:7px;flex:none;border-radius:50%;background:#2BD46F;box-shadow:0 0 8px rgba(43,212,111,.6)}
html body .conv-id .conv-x{margin-left:auto}
html body .conv-msgs{position:relative;max-height:min(44vh,420px);min-height:0;overflow-y:auto;padding:28px 22px 10px 0;background:none;border:0;scrollbar-width:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 56px);mask-image:linear-gradient(180deg,transparent 0,#000 56px);outline:none}
html body .conv-msgs::-webkit-scrollbar{display:none}
html body .conv-msgs:focus-visible{box-shadow:inset -2px 0 0 var(--laranja)}
html body .conv-m{max-width:94%;margin:0 0 20px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:#fff}
html body .conv-m.ag{font-size:clamp(18px,1.45vw,21px);font-weight:500;line-height:1.45;letter-spacing:-.005em}
html body .conv-m.eu{align-self:flex-end;margin-left:auto;max-width:82%;padding:2px 0 2px 14px;border-left:2px solid var(--laranja);font-size:16.5px;line-height:1.5;color:#CFCFCF;background:none}
html body .conv-m.ag.erro{color:#fff}
html body .conv-m a{color:var(--laranja);text-decoration:underline;text-underline-offset:3px}
html body .conv-dig{display:inline-flex;gap:6px;align-items:center;padding:6px 0}
html body .conv-dig i{width:6px;height:6px;border-radius:50%;background:#FFB27F;animation:vd-ind 1s ease-in-out infinite}
html body .conv-dig i:nth-child(2){animation-delay:.15s}html body .conv-dig i:nth-child(3){animation-delay:.3s}
html body .conv-sug{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0;background:none}
html body .conv-sug button{min-height:36px;padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:transparent;color:#fff;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:border-color .3s var(--e),background-color .3s var(--e)}
html body .conv-sug button:hover,html body .conv-sug button:focus-visible{border-color:var(--laranja);background:rgba(255,87,5,.1);outline:none}
html body .conv-form{position:sticky;bottom:calc(14px + env(safe-area-inset-bottom));z-index:3;display:grid;grid-template-columns:minmax(0,1fr) 52px;gap:14px;align-items:end;margin:10px 0 0;padding:10px 0 0;border:0;background:linear-gradient(180deg,rgba(5,5,5,0),#050505 40%)}
html body .conv-form textarea{width:100%;min-height:48px;max-height:140px;padding:10px 0;border:0;border-bottom:1.5px solid rgba(255,255,255,.22);border-radius:0;background:none;color:#fff;font:inherit;font-size:clamp(18px,1.6vw,22px);resize:none;outline:none;box-shadow:none;transition:border-color .25s var(--e)}
html body .conv-form textarea:focus{border-bottom-color:var(--laranja)}
html body .conv-form textarea::placeholder{color:rgba(255,255,255,.38)}
html body .conv-form button[type=submit]{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,87,5,.82);color:#fff;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 30px -12px rgba(255,87,5,.7);transition:background-color .3s var(--e)}
html body .conv-form button[type=submit]:hover,html body .conv-form button[type=submit]:focus-visible{background:rgba(255,87,5,.95);outline:none}
html body .conv-note{margin:8px 0 0;font-size:12px;color:#BDBDBD}
html body .conv-note a{color:#fff}
/* as tres perguntas antes da conversa, como texto grande da pagina */
html body .conv-pre{margin:0 0 6px;padding:0;border:0;background:none}
html body .conv-bar{height:2px;margin:0 0 22px;background:rgba(255,255,255,.06);border-radius:2px}
html body .conv-bar i{background:var(--laranja)}
html body .conv-n{margin:0;font-size:13px;font-weight:600;color:var(--laranja)}
html body .conv-t{display:block;margin:10px 0 0;font-size:clamp(28px,2.5vw,38px);font-weight:700;line-height:1.15;letter-spacing:-.025em;color:#fff}
html body .conv-a{margin:8px 0 0;font-size:15px;color:var(--cinza)}
html body .conv-in{width:100%;margin-top:18px;padding:12px 0;border:0;border-bottom:1.5px solid rgba(255,255,255,.22);border-radius:0;background:none;color:#fff;font:inherit;font-size:24px;outline:none;box-shadow:none;transition:border-color .25s var(--e)}
html body .conv-in:focus{border-bottom-color:var(--laranja)}
html body .conv-in::placeholder{color:rgba(255,255,255,.3)}
html body .conv-e{min-height:1.3em;margin:8px 0 0;font-size:13.5px;color:#FFB27F}
html body .conv-acts{display:flex;align-items:center;gap:14px;margin-top:14px}
html body .conv-voltar{padding:6px 0;border:0;background:none;color:var(--cinza);font:inherit;font-size:14px;cursor:pointer}
html body .conv-ok{min-height:42px;padding:9px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,87,5,.82);color:#fff;font:inherit;font-size:15px;font-weight:700;cursor:pointer}
html body .conv-dica{font-size:12.5px;color:var(--cinza)}
html body .conv.pre .conv-msgs{max-height:none;padding-top:6px;-webkit-mask-image:none;mask-image:none}
html body .conv.pre .conv-msgs .conv-m.ag{font-size:16px;color:#CFCFCF}
html body .conv-q.entra .conv-t{animation:conv-mascara .7s cubic-bezier(.16,1,.3,1) both}
@keyframes conv-mascara{from{clip-path:inset(0 0 100% 0);transform:translateY(14px)}to{clip-path:inset(-10% 0 -10% 0);transform:none}}
/* a barra lateral propria da conversa: 2 px, o trecho visivel em laranja; engrossa no hover; marcas nas falas do agente */
.conv-barra{position:absolute;right:0;width:12px;cursor:pointer;touch-action:none}
.conv-barra::before{content:"";position:absolute;right:5px;top:0;bottom:0;width:2px;border-radius:2px;background:rgba(255,255,255,.08);transition:width .2s var(--e),right .2s var(--e)}
.conv-barra:hover::before,.conv-barra.arrasta::before{width:4px;right:4px}
.conv-barra .cb-pol{position:absolute;right:5px;width:2px;border-radius:2px;background:var(--laranja);transition:width .2s var(--e),right .2s var(--e)}
.conv-barra:hover .cb-pol,.conv-barra.arrasta .cb-pol{width:4px;right:4px}
.conv-barra .cb-marca{position:absolute;right:1px;width:10px;height:2px;border-radius:1px;background:rgba(255,178,127,.55)}
.conv-barra[hidden]{display:none}
@media (prefers-reduced-motion:reduce){html body .conv-q.entra .conv-t{animation:none}html body .conv-dig i{animation:none}}
html body #chat-sia .conv-m,html body #chat-sia .conv-m.ag{background:none;border:0;border-radius:0;box-shadow:none;padding:0}
html body #chat-sia .conv-m.eu{border:0;border-left:2px solid var(--laranja);border-radius:0;background:none;padding:2px 0 2px 14px;color:#CFCFCF}
html body #chat-sia .conv-form{border:0;border-radius:0;box-shadow:none;background:linear-gradient(180deg,rgba(5,5,5,0),#050505 40%);padding:10px 0 0}
html body #chat-sia .conv-form:focus-within{box-shadow:none;border:0}
html body #chat-sia .conv-note{text-align:left}
html body #chat-sia .conv-form textarea{border:0;border-bottom:1.5px solid rgba(255,255,255,.22);border-radius:0;background:none;box-shadow:none}
html body #chat-sia .conv-form textarea:focus{border-bottom-color:var(--laranja)}
/* ---- 24/10/2026, noite: o cometa saiu (pedido do Daniel). O titulo do heroi ja nasce legivel e so sobe um pouco; o indice marca a
   secao ativa com um ponto laranja simples */
.sx-heroi .h-l>.li{animation:heroi-sobe .55s cubic-bezier(.16,1,.3,1) both}
.sx-heroi .h-l+.h-l>.li{animation-delay:.06s}
@keyframes heroi-sobe{from{transform:translateY(22%)}to{transform:none}}
.adp-indice a b{position:relative;box-shadow:none}
.adp-indice a.on b{color:#fff;box-shadow:none}
.adp-indice a.on b::after{content:"";position:absolute;left:-10px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--laranja)}
.adp-indice a:focus-visible b{box-shadow:0 0 0 2px var(--laranja)}
@media (prefers-reduced-motion:reduce){.sx-heroi .h-l>.li{animation:none}}
/* o campo de escrever cresce com o texto (ate umas 6 linhas) e so entao rola, sem a barra do sistema; o botao fica inteiro, na base */
html body #chat-sia .conv-form{grid-template-columns:minmax(0,1fr) 52px;align-items:end;padding-right:14px}
html body #chat-sia .conv-form textarea{min-height:48px;max-height:none;line-height:1.4;overflow-y:hidden;scrollbar-width:none;transition:height .12s ease-out,border-color .25s var(--e);field-sizing:content}
html body #chat-sia .conv-form textarea::-webkit-scrollbar{display:none}
html body #chat-sia .conv-form button[type=submit]{flex:none;align-self:end;margin:0 0 2px}
@media (prefers-reduced-motion:reduce){html body #chat-sia .conv-form textarea{transition:border-color .25s var(--e)}}
.fx.fx-on{overflow-x:clip}
.fx.fx-on .fx-svg{max-width:100%}
html body #chat-sia .conv-form textarea{font-size:clamp(18px,1.6vw,22px)}