/* Alpha Fox · LP consultoria de IA (v2, 24/10).
   Uma família só (Saira) usando a largura variável: títulos largos, texto normal.
   Formas com os ângulos da raposa (o "V" do queixo). Um movimento grande só: o fio de energia que desce com a rolagem.
   Mobile primeiro; o computador ganha colunas no @media do fim. */
:root{
  --noite:#0f0d0c;--carvao:#181514;--pedra:#2b2522;--risco:rgba(242,236,230,.1);
  --osso:#f2ece6;--cinza:#a39a93;--cinza2:#776f69;
  --brasa:#EF7E1A;--faisca:#ffb36b;--brasa-fraca:rgba(239,126,26,.14);
  --f:'Saira',system-ui,sans-serif;
  --gut:20px;--max:1200px;--topo:62px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --v:polygon(0 0,100% 0,100% 88%,50% 100%,0 88%);          /* moldura com o queixo da raposa */
  --v-suave:polygon(0 0,100% 0,100% 94%,50% 100%,0 94%);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--topo)}
body{background:var(--noite);color:var(--osso);font:400 17px/1.55 var(--f);font-stretch:100%;overflow-x:clip;-webkit-font-smoothing:antialiased}
html.na-entrada body{overflow:hidden;height:100svh}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--faisca);outline-offset:3px}
.cx{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* tipografia: largura é a voz da marca */
.larga{font-stretch:125%;font-weight:800;letter-spacing:-.02em;line-height:.95;text-wrap:balance}
h2.larga{font-size:clamp(34px,9vw,76px)}
.media{font-stretch:112%;font-weight:700;line-height:1.1;letter-spacing:-.01em}
.sub{color:var(--cinza);font-size:clamp(17px,4.4vw,20px);max-width:58ch;text-wrap:pretty}
.miudo{font-size:14px;color:var(--cinza2)}
.brasa{color:var(--brasa)}

/* botões */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;font:700 16px/1 var(--f);font-stretch:110%;
  clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%);transition:background .25s,color .25s,transform .25s var(--ease)}
.bt:active{transform:scale(.97)}
.bt-p{background:var(--brasa);color:#1b0c00}
.bt-p:hover{background:var(--faisca)}
.bt-s{background:var(--pedra);color:var(--osso)}
.bt-s:hover{background:#3a322e}
.bt svg{width:20px;height:20px;flex:none}
.bts{display:flex;flex-wrap:wrap;gap:10px}

/* ---------------- entrada (Jarvis) ---------------- */
.entrada{position:fixed;inset:0;z-index:100;background:radial-gradient(70% 60% at 50% 42%,#1d120b,#070605 70%);display:none}
.na-entrada .entrada{display:block}
.entrada canvas{position:absolute;inset:0;width:100%;height:100%}
.entrada-leg{position:absolute;left:var(--gut);right:var(--gut);bottom:calc(132px + env(safe-area-inset-bottom));max-width:760px;margin:0 auto;text-align:center;
  font:700 clamp(22px,6vw,38px)/1.2 var(--f);font-stretch:112%;min-height:2.6em;text-shadow:0 2px 24px #000}
.entrada-leg .cursor{display:inline-block;width:.5em;height:.08em;background:var(--brasa);margin-left:.08em;vertical-align:-.08em;animation:pisca 1s steps(2) infinite}
@keyframes pisca{50%{opacity:0}}
.entrada-quem{position:absolute;top:calc(18px + env(safe-area-inset-top));left:var(--gut);right:var(--gut);display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--cinza)}
.entrada-quem b{color:var(--osso);font-stretch:115%}
.entrada-pular{padding:10px 4px;color:var(--cinza)}
.entrada-pular:hover{color:var(--osso)}
.entrada-acao{position:absolute;left:0;right:0;bottom:calc(46px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:16px}
.entrada-acao .bt{opacity:0;translate:0 12px;transition:opacity .6s,translate .6s var(--ease)}
.entrada-acao.pronta .bt{opacity:1;translate:0 0}
.entrada-barra{width:min(320px,70vw);height:2px;background:var(--risco);overflow:hidden}
.entrada-barra i{display:block;height:100%;width:100%;background:var(--brasa);transform:scaleX(var(--p,0));transform-origin:left}
.entrada-toque{position:absolute;left:0;right:0;text-align:center;bottom:calc(132px + 3.2em + 28px + env(safe-area-inset-bottom));font-size:13px;color:var(--cinza2);opacity:0;transition:opacity 1s}
.entrada-toque.on{opacity:1}
.entrada.saindo{animation:abrir .9s cubic-bezier(.7,0,.3,1) forwards}
@keyframes abrir{to{clip-path:polygon(50% 100%,50% 100%,50% 100%);opacity:.2}}
.entrada-flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,#ffd9b0,var(--brasa) 30%,transparent 70%);opacity:0;pointer-events:none}
.entrada.saindo .entrada-flash{animation:flash .5s ease-out}
@keyframes flash{30%{opacity:.9}to{opacity:0}}

/* ---------------- topo ---------------- */
.topo{position:fixed;inset:0 0 auto;z-index:50;height:var(--topo);display:flex;align-items:center;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.topo.sol{background:rgba(15,13,12,.86);backdrop-filter:blur(12px);border-color:var(--risco)}
.topo .cx{display:flex;align-items:center;justify-content:space-between;gap:16px}
.topo .marca img{height:30px;width:auto}
.topo nav{display:none;gap:26px;font-size:15px;color:var(--cinza)}
.topo nav a:hover{color:var(--osso)}
.topo .bt{min-height:42px;padding:0 20px;font-size:14px}

/* ---------------- fio de energia ---------------- */
.fio{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:1}
.fio path{fill:none;stroke-linejoin:miter}
.fio .base{stroke:var(--risco);stroke-width:1.5}
.fio .luz{stroke:var(--brasa);stroke-width:2.5;filter:drop-shadow(0 0 6px var(--brasa))}
.fio .ponta{fill:#ffd2a6;filter:drop-shadow(0 0 10px var(--brasa)) drop-shadow(0 0 22px var(--brasa))}
.no-fio{position:absolute;width:11px;height:11px;rotate:45deg;border:1.5px solid var(--cinza2);background:var(--noite);z-index:2;transition:background .4s,border-color .4s,box-shadow .4s}
.no-fio.aceso{background:var(--brasa);border-color:var(--brasa);box-shadow:0 0 16px var(--brasa)}
main{position:relative}
main>section{position:relative;z-index:2}

/* ---------------- topo da página ---------------- */
.hero{min-height:100svh;padding:calc(var(--topo) + 8px) 0 36px;display:flex;flex-direction:column}
.hero .cx{flex:1;display:grid;grid-template-rows:auto 1fr;gap:4px}
.hero-raposa{position:relative;height:28svh;min-height:190px;margin:0 calc(var(--gut) * -1)}
.hero-raposa canvas{width:100%;height:100%}
.hero-raposa .poster{position:absolute;inset:0;margin:auto;height:70%;width:auto;opacity:.9;transition:opacity .8s}
.hero-raposa.vivo .poster{opacity:0}
.hero-raposa .fala{position:absolute;left:50%;bottom:4px;translate:-50% 0;font-size:13px;color:var(--cinza);white-space:nowrap}
.hero-tx{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;gap:20px}
.hero-tx .bts,.hero .miudo{justify-content:center}
.hero h1{font-size:clamp(30px,9.8vw,92px)}
.hero h1 span{display:block;white-space:nowrap}
.hero h1 .para{color:var(--brasa)}
.hero .miudo{display:flex;flex-wrap:wrap;gap:6px 14px}

/* ---------------- faixas que passam sozinhas ---------------- */
.faixa{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.faixa-trilho{display:flex;flex-shrink:0;gap:var(--vao,18px);padding-right:var(--vao,18px);animation:passa var(--t,50s) linear infinite}
.faixa.volta .faixa-trilho{animation-direction:reverse}
.faixa:hover .faixa-trilho{animation-play-state:paused}
@keyframes passa{to{transform:translateX(-100%)}}

/* ---------------- clientes ---------------- */
.clientes{padding:52px 0 60px;border-top:1px solid var(--risco);border-bottom:1px solid var(--risco)}
.clientes h2{font:600 15px/1.4 var(--f);color:var(--cinza);margin-bottom:26px}
.faixa-logos{--vao:56px}
.logos{display:flex;align-items:center;gap:56px;list-style:none}
.logos li{flex:none;display:flex;align-items:center;height:64px}
.logos img{height:auto;max-height:46px;max-width:170px;width:auto;opacity:.78}
.logos .so-nome{font:700 17px/1.2 var(--f);font-stretch:115%;color:var(--cinza);white-space:nowrap}

/* ---------------- serviços ----------------
   Celular: cada serviço empilhado (cena em cima, texto embaixo), nada se sobrepõe.
   Computador (@media no fim): palco fixo, a lista à esquerda e um serviço por vez trocando com a rolagem. */
.servicos{padding:84px 0 40px}
.serv-cab{display:grid;gap:6px;margin-bottom:34px}
.serv-cab h2{font-size:clamp(30px,8.4vw,56px)}
.ilustr{font-size:12px;color:var(--cinza2)}
.serv-lista{display:none}
.serv-corpo{display:grid;gap:64px}
.serv{display:grid;gap:18px}
.cena{position:relative;display:grid;place-items:center;height:min(92vw,400px)}
/* cenas que crescem com o conteúdo (cartões e casos): sem altura fixa, nada passa por cima do texto */
.cena-automacoes,.cena-vendas{height:auto}
.serv-prog{display:none}
.serv-tx{display:grid;gap:8px}
.serv-tx h3{font-size:clamp(24px,6.6vw,40px)}
.serv-tx p{color:var(--cinza);font-size:16px}

/* celular com tela que comporta: palco fixo também. A rolagem troca o serviço (desliza de lado);
   o site.js só liga (.fixo) depois de medir que cada serviço cabe inteiro na tela. */
.servicos.fixo{height:calc(var(--n) * 100svh);padding:0}
/* embaixo fica o espaço da barra fixa de agendar, para ela não cobrir o texto */
.fixo .serv-palco{position:sticky;top:0;height:100svh;padding:calc(var(--topo) + 14px) 0 calc(84px + env(safe-area-inset-bottom));overflow:hidden}
.fixo .serv-palco .cx{height:100%;display:flex;flex-direction:column}
.fixo .serv-cab{margin-bottom:14px}
.fixo .serv-cab h2{font-size:clamp(26px,7.4vw,44px)}
.fixo .serv-prog{display:flex;gap:6px;margin-bottom:18px}
.fixo .serv-prog i{flex:1;height:3px;background:var(--pedra);transition:background .4s}
.fixo .serv-prog i.on{background:var(--brasa)}
.fixo .serv-corpo{flex:1;min-height:0;position:relative;display:block}
.fixo .serv{position:absolute;inset:0;align-content:start;gap:14px;opacity:0;translate:48px 0;
  transition:opacity .45s,translate .6s var(--ease);pointer-events:none}
.fixo .serv.on{opacity:1;translate:0 0;pointer-events:auto}
.fixo .serv.saiu{translate:-48px 0}
.fixo .cena{height:min(84vw,40svh)}
.fixo .cena-automacoes,.fixo .cena-vendas,.fixo .cena-sistemas{height:auto}
.fixo .cena-agentes{height:min(92vw,42svh)}
.fixo .conversa{max-height:none;font-size:13px;gap:6px;padding:14px 14px 32px}
.fixo .msg{padding:7px 10px}
.fixo .serv-tx p{font-size:15px}
.fixo .canal{min-height:0;padding:11px 12px}
.fixo .canal span{font-size:12.5px}

/* celular sem palco fixo (tela baixa): cada serviço entra subindo quando aparece */
@media (max-width:899px){
  .servicos:not(.fixo) .serv{opacity:0;translate:0 36px;transition:opacity .6s,translate .8s var(--ease)}
  .servicos:not(.fixo) .serv.on{opacity:1;translate:0 0}
}

/* moldura facetada (o V da raposa) */
.faceta{position:relative;clip-path:var(--v);background:var(--carvao);overflow:hidden}
.faceta::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(239,126,26,.18));pointer-events:none}

/* cena: agente */
.conversa{width:min(100%,420px);height:100%;max-height:430px;padding:22px 18px 46px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;font-size:14px;line-height:1.35}
.conversa .de{display:flex;align-items:center;gap:10px;margin-bottom:auto;font-size:13px;color:var(--cinza)}
.conversa .de b{color:var(--osso)}
.conversa .de i{width:9px;height:9px;rotate:45deg;background:#3ecf6e}
.msg{max-width:82%;padding:9px 12px;opacity:0;translate:0 10px}
.msg.c{align-self:flex-start;background:var(--pedra);clip-path:polygon(0 0,100% 0,100% 100%,10px 100%,0 calc(100% - 8px))}
.msg.a{align-self:flex-end;background:var(--brasa);color:#1b0c00;clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 10px) 100%,0 100%)}
.msg.ok{align-self:center;color:#7ee2a3;font-size:12.5px;padding:4px 0}
.serv.on .msg{animation:entraMsg .5s var(--ease) forwards;animation-delay:calc(.2s + var(--i) * .75s)}
@keyframes entraMsg{to{opacity:1;translate:0 0}}

/* cena: automação */
.automacao{width:min(100%,560px);display:grid;gap:12px}
.fluxo-svg{width:100%;overflow:visible}
.fluxo-svg .trilha-base{fill:none;stroke:var(--pedra);stroke-width:2}
.fluxo-svg .liga{fill:none;stroke:var(--brasa);stroke-width:2.5;stroke-dasharray:6 10;opacity:.8}
.serv.on .fluxo-svg .liga{animation:corre 1s linear infinite}
@keyframes corre{to{stroke-dashoffset:-32}}
.fluxo-svg .losango{fill:var(--carvao);stroke:var(--pedra);stroke-width:2}
.fluxo-svg .no svg path{fill:none;stroke:var(--osso);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fluxo-svg .rot{fill:var(--cinza);font:600 19px var(--f);text-anchor:middle}
.fluxo-svg .pulso{opacity:0;transition:opacity .3s;fill:#ffd2a6;filter:drop-shadow(0 0 6px var(--brasa)) drop-shadow(0 0 14px var(--brasa))}
.serv.on .fluxo-svg .no .losango{animation:acende 6s linear infinite;animation-delay:var(--d)}
.serv.on .fluxo-svg .no svg path{animation:acendeIcone 6s linear infinite;animation-delay:var(--d)}
@keyframes acende{0%{fill:var(--brasa);stroke:var(--faisca)}14%{fill:var(--carvao);stroke:var(--brasa)}30%,100%{fill:var(--carvao);stroke:var(--pedra)}}
.serv.on .fluxo-svg .pulso{opacity:1}
@keyframes acendeIcone{0%{stroke:#1b0c00}14%,100%{stroke:var(--osso)}}

/* cena: sistema */
.tela{width:min(100%,760px);aspect-ratio:16/10}
.tela img{width:100%;height:auto;animation:pan 18s ease-in-out infinite alternate}
@keyframes pan{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(calc(-100% + var(--alt,300px)))}}

/* cena: vendas */
.vendas{width:min(100%,640px);display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.canal{background:var(--carvao);padding:14px;display:grid;gap:4px;align-content:start;min-height:104px}
.canal b{font-stretch:112%;font-size:16px}
.canal span{color:var(--cinza);font-size:13.5px;line-height:1.35}
.canal.foto{display:none;padding:0;grid-column:span 2;min-height:0;aspect-ratio:16/6.4;overflow:hidden;clip-path:var(--v-suave)}
.canal.foto img{width:100%;height:100%;object-fit:cover;object-position:top}

/* cena: treinamento */
/* mosaico: as três turmas inteiras à vista (uma grande e duas menores), nada por cima de nada */
.treinos{width:min(100%,640px);height:100%;max-height:440px;overflow:hidden;display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:8px}
.treinos figure{position:relative;overflow:hidden;background:var(--carvao);min-height:0;opacity:0;translate:0 18px;
  transition:opacity .6s,translate .8s var(--ease);transition-delay:calc(var(--i,0) * .15s)}
.treinos figure:first-child{grid-row:span 2;clip-path:polygon(0 0,100% 0,100% 100%,14px 100%,0 calc(100% - 14px))}
.treinos figure:nth-child(2){--i:1}
.treinos figure:nth-child(3){--i:2;clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
.serv.on .treinos figure{opacity:1;translate:0 0}
.treinos figure img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 6s ease-out}
.serv.on .treinos figure img{transform:scale(1)}
.treinos figcaption{position:absolute;inset:auto 0 0;padding:26px 12px 10px;font-size:12.5px;line-height:1.3;color:var(--cinza);
  background:linear-gradient(180deg,transparent,rgba(15,13,12,.92))}
.treinos figcaption b{display:block;color:var(--osso);font-size:14px;font-stretch:112%}

/* ---------------- feito aqui (duas faixas: sistemas e sites) ---------------- */
.sec{padding:96px 0}
.sec-cab{display:grid;gap:14px;margin-bottom:40px}
.faixa-telas{--vao:16px;margin-bottom:16px}
.tela-card{flex:none;width:min(74vw,440px);display:grid;gap:10px}
.tela-card .faceta{aspect-ratio:16/10}
.tela-card img{width:100%;height:100%;object-fit:cover;object-position:top}
.tela-card figcaption{display:grid;gap:2px;font-size:14px;color:var(--cinza)}
.tela-card figcaption b{font-stretch:115%;font-size:18px;color:var(--osso)}

/* ---------------- como funciona ---------------- */
.passos{display:grid;gap:0;counter-reset:p;border-top:1px solid var(--risco)}
.passo{display:grid;grid-template-columns:56px 1fr;gap:14px;padding:22px 0;border-bottom:1px solid var(--risco)}
.passo b{font:800 34px/1 var(--f);font-stretch:125%;color:var(--brasa)}
.passo h3{font-size:22px;margin-bottom:4px}
.passo p{color:var(--cinza);font-size:16px}

/* ---------------- depoimentos (cards com a marca e o trecho em destaque) ---------------- */
.depos{display:grid;grid-auto-flow:column;grid-auto-columns:min(84vw,360px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gut) * -1);padding:4px var(--gut) 18px;scrollbar-width:none}
.depos::-webkit-scrollbar{display:none}
.depo{scroll-snap-align:start;position:relative;display:flex;flex-direction:column;gap:18px;padding:26px 22px 22px;background:var(--carvao);clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)}
.depo::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--brasa)}
.depo-marca{height:44px;display:flex;align-items:center}
.depo-marca img{max-height:40px;max-width:180px;width:auto;height:auto;opacity:.9}
.depo-nome-marca{font:800 20px/1 var(--f);font-stretch:118%;color:var(--osso)}
.depo blockquote p{font:600 19px/1.4 var(--f);font-stretch:104%;color:var(--osso);text-wrap:pretty}
.depo mark{background:linear-gradient(transparent 58%,rgba(239,126,26,.45) 58%);color:inherit;padding:0 .1em}
.depo figcaption{margin-top:auto;display:grid;gap:2px;font-size:14px;color:var(--cinza);padding-top:14px;border-top:1px solid var(--risco)}
.depo figcaption b{color:var(--osso);font-size:16px}

/* ---------------- quem sou ---------------- */
.sobre{display:grid;gap:30px}
/* retrato: a raposa se desenha atrás, a foto sobe junto com uma linha de energia e acompanha o mouse */
.retrato{position:relative;max-width:470px;width:100%;margin:0 auto;aspect-ratio:844/1200;isolation:isolate}
.retrato::before{content:"";position:absolute;inset:8% -6% 0;z-index:-2;background:radial-gradient(55% 45% at 50% 42%,rgba(239,126,26,.42),rgba(239,126,26,.08) 55%,transparent 72%);opacity:0;transition:opacity 1.6s ease .2s}
.retrato .linhas{position:absolute;left:50%;top:2%;width:96%;translate:calc(-50% + var(--rx,0) * -14px) calc(var(--ry,0) * -10px);z-index:-1;opacity:.85}
.retrato .linhas path{fill:transparent;stroke:var(--brasa);stroke-width:6;stroke-dasharray:var(--len,9000);stroke-dashoffset:var(--len,9000);transition:stroke-dashoffset 2.4s cubic-bezier(.65,0,.35,1)}
.retrato img{position:relative;width:100%;height:100%;object-fit:contain;object-position:bottom;
  clip-path:inset(100% -30% -10% -30%);transition:clip-path 1.5s cubic-bezier(.7,0,.25,1) .35s;
  filter:drop-shadow(-8px -2px 18px rgba(239,126,26,.42));
  translate:calc(var(--rx,0) * 10px) calc(var(--ry,0) * 6px + var(--sp,0) * -24px)}
.retrato .scan{position:absolute;left:4%;right:4%;bottom:0;height:2px;background:var(--faisca);box-shadow:0 0 18px 4px var(--brasa);opacity:0}
.retrato.on::before{opacity:1}
.retrato.on .linhas path{stroke-dashoffset:0}
.retrato.on img{clip-path:inset(-30% -30% -10% -30%)}
.retrato.on .scan{animation:scan 1.5s cubic-bezier(.7,0,.25,1) .35s forwards}
@keyframes scan{0%{bottom:0;opacity:1}90%{opacity:1}100%{bottom:100%;opacity:0}}
.logos .so-nome{font:700 17px/1.2 var(--f);font-stretch:115%;color:var(--cinza);text-align:center}
.sobre-tx{display:grid;gap:16px}
.sobre-tx p{color:var(--cinza)}
.sobre-tx ul{list-style:none;display:grid;gap:10px}
.sobre-tx li{display:flex;gap:12px;align-items:baseline}
.sobre-tx li::before{content:"";flex:0 0 8px;height:8px;rotate:45deg;background:var(--brasa);translate:0 -1px}

/* ---------------- perguntas ---------------- */
.faq{border-top:1px solid var(--risco);max-width:860px}
.faq details{border-bottom:1px solid var(--risco)}
.faq summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;font:700 18px/1.35 var(--f);font-stretch:106%;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:12px;height:12px;border-right:2px solid var(--brasa);border-bottom:2px solid var(--brasa);translate:0 -70%;rotate:45deg;transition:rotate .3s,translate .3s}
.faq details[open] summary::after{rotate:225deg;translate:0 -20%}
.faq details p{padding:0 0 20px;color:var(--cinza);max-width:68ch}

/* ---------------- agendar ---------------- */
.agendar{padding:96px 0 110px;background:linear-gradient(180deg,var(--noite),#1a100a)}
.agendar .cx{display:grid;gap:22px}
.agendar h2{font-size:clamp(36px,10vw,84px)}
.agenda-frame{display:none;width:100%;min-height:720px;border:0;background:transparent;margin-top:10px}
.agenda-frame.on{display:block}

/* ---------------- guias (links da home) e páginas internas ---------------- */
.guias{list-style:none;display:grid;gap:10px}
.guias a{display:grid;gap:4px;padding:18px 18px 18px 20px;background:var(--carvao);border-left:3px solid var(--pedra);transition:border-color .25s,background .25s}
.guias a:hover{border-left-color:var(--brasa);background:#201c1a}
.guias b{font-stretch:112%;font-size:18px;color:var(--osso)}
.guias span{font-size:14.5px;color:var(--cinza);line-height:1.45}
.guia{padding:calc(var(--topo) + 26px) 0 40px}
.trilha{display:flex;gap:8px;font-size:14px;color:var(--cinza2);margin-bottom:22px}
.trilha a{color:var(--cinza)}
.trilha a:hover{color:var(--osso)}
.guia-cab{display:grid;gap:20px;max-width:820px;margin-bottom:52px}
.guia-cab h1{font-size:clamp(34px,9vw,68px)}
.guia-lead{font-size:clamp(18px,4.6vw,22px);line-height:1.5;color:var(--osso);border-left:3px solid var(--brasa);padding-left:18px;text-wrap:pretty}
.guia-corpo{display:grid;gap:44px;max-width:760px}
.guia-corpo h2{font-size:clamp(24px,6vw,34px);margin-bottom:14px}
.guia-corpo p{color:var(--cinza);margin-bottom:12px}
.guia-corpo ul{list-style:none;display:grid;gap:10px;margin-top:6px}
.guia-corpo li{display:flex;gap:12px;align-items:baseline;color:var(--osso)}
.guia-corpo li::before{content:"";flex:0 0 8px;height:8px;rotate:45deg;background:var(--brasa);translate:0 -1px}
.rodape nav[aria-label="Páginas"]{gap:10px 18px}

/* ---------------- rodapé ---------------- */
.rodape{padding:40px 0 calc(100px + env(safe-area-inset-bottom));border-top:1px solid var(--risco);color:var(--cinza2);font-size:14px}
.rodape .cx{display:grid;gap:16px}
.rodape img{height:40px;width:auto}
.rodape nav{display:flex;flex-wrap:wrap;gap:16px}

/* barra fixa do celular */
.barra{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;display:flex;gap:8px;translate:0 150%;transition:translate .45s var(--ease)}
.barra.on{translate:0 0}
.barra .bt{flex:1}
.barra .bt-s{flex:0 0 58px;padding:0}


/* ---------------- computador ---------------- */
@media (min-width:900px){
  :root{--gut:44px;--topo:72px}
  body{font-size:18px}
  .topo nav{display:flex}
  .hero .cx{grid-template-columns:1.05fr .95fr;grid-template-rows:1fr;align-items:center;gap:20px}
  .hero-raposa{order:2;height:min(56svh,520px);margin:0;opacity:.85}
  .hero-tx{justify-content:center;align-items:flex-start;text-align:left}
  .hero-tx .bts,.hero .miudo{justify-content:flex-start}
  .servicos{height:calc(var(--n) * 100svh);padding:0}
  .hero h1{font-size:clamp(48px,4.9vw,92px)}
  .serv-palco{position:sticky;top:0;height:100svh;padding:calc(var(--topo) + 12px) 0 30px;overflow:hidden}
  .serv-palco .cx{height:100%;display:grid;grid-template-columns:.95fr 1.05fr;grid-template-rows:auto minmax(0,1fr);column-gap:56px}
  .serv-cab{grid-column:1/-1;margin-bottom:10px;grid-template-columns:1fr auto;align-items:end}
  .serv-lista{display:flex;grid-column:1;grid-row:2;flex-direction:column;gap:6px;align-self:start;margin-top:6px;position:relative;z-index:2;
    font:700 clamp(20px,2vw,28px)/1.2 var(--f);font-stretch:112%;color:var(--cinza2)}
  .serv-lista button{text-align:left;border-left:3px solid transparent;padding:6px 0 6px 16px;transition:color .3s,border-color .3s}
  .serv-lista button.on{color:var(--osso);border-left-color:var(--brasa)}
  .serv-corpo{grid-column:1/-1;grid-row:2;position:relative;display:block;min-height:0}
  .serv{position:absolute;inset:0;grid-template-columns:.95fr 1.05fr;column-gap:56px;opacity:0;transition:opacity .5s;pointer-events:none}
  .serv.on{opacity:1;pointer-events:auto}
  .serv .cena{grid-column:2;grid-row:1;height:auto;min-height:0}
  .serv-prog{display:none}
  .serv-tx{grid-column:1;grid-row:1;align-self:end;padding-bottom:8px}
  .serv-tx p{font-size:18px}
  .canal.foto{display:block}
  .passos{grid-template-columns:repeat(4,1fr);border-top:0;gap:28px}
  .passo{grid-template-columns:1fr;border-bottom:0;border-top:2px solid var(--pedra);padding-top:22px}
  .passo.on{border-top-color:var(--brasa)}
  .depos{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);grid-auto-columns:auto;overflow:visible;margin:0;padding:0;gap:18px}
  .tela-card{width:480px}
  .sobre{grid-template-columns:.85fr 1.15fr;gap:72px;align-items:center}
  .agendar .cx{grid-template-columns:1.1fr .9fr;align-items:end}
  .agenda-frame{grid-column:1/-1}
  .rodape .cx{grid-template-columns:1fr auto;align-items:center}
  .guias{grid-template-columns:repeat(3,1fr)}
  .barra{display:none}
}

@media (prefers-reduced-motion:reduce){
  .faixa{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .faixa-trilho[aria-hidden]{display:none}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .msg{opacity:1 !important;translate:0 0 !important}
}