/* ==================================================================
   GNB Serviços — folha única.

   TIPOGRAFIA: pilha do sistema Apple. Em Mac e iPhone isto renderiza
   SF Pro de verdade; a Inter (Google Fonts) cobre Windows e Android,
   que é o desenho mais próximo. A SF Pro NÃO pode ser hospedada —
   a licença da Apple restringe o uso a interfaces em plataforma Apple.

   TEMA: claro por padrão para todo mundo; o escuro só entra pelo botão
   de lua ([data-theme="dark"]). NÃO usar prefers-color-scheme — pedido
   dela. O color-scheme:light no html impede o navegador de escurecer
   controles por conta própria.

   PALETA: branco puro, preto puro e #ff2e00 — escolha dela.
   REGRA DO LARANJA (aprendida na reprovação de 22/08): pouquíssimos
   pontos, grandes e intencionais. Ele vive em QUATRO lugares:
     1. o campo inteiro da metade direita do hero (a área saturada que
        no modelo epic.new é a imagem de céu);
     2. os botões primários (texto PRETO em cima: 5,64:1; branco reprova);
     3. a bolinha dos eyebrows e os pips de "no ar" (pontos de 5–7px);
     4. a linha de Custo no gráfico (o modelo faz exatamente isso).
   Nada de chip laranja, número laranja, faixa laranja, bolha laranja.
   #ff2e00 sobre branco dá 3,72:1 — NUNCA em texto pequeno.

   MOVIMENTO: entrada em cascata por posição no scroll (site.js — NÃO é
   IntersectionObserver, que deixava elementos presos invisíveis), faixa
   contínua, conversa que se responde, gráficos que se desenham, card do
   hero que flutua. Tudo desligado sob prefers-reduced-motion, e o
   <noscript> das páginas devolve a página inteira visível sem JS.
   ================================================================== */

:root{
  --ground:#ffffff;
  --raised:#ffffff;
  --ink:#000000;
  --ink-soft:#2e2b29;
  --muted:#6e6a67;
  --line:#e6e6e6;
  --line-soft:#f2f2f2;

  --accent:#ff2e00;
  --accent-ink:#000000;
  --accent-hi:#ff5227;

  --grid:rgba(0,0,0,.09);
  --shadow:0 1px 2px rgba(0,0,0,.04),0 14px 36px -18px rgba(0,0,0,.14);
  --shadow-lg:0 2px 5px rgba(0,0,0,.06),0 32px 72px -28px rgba(0,0,0,.28);

  --shell:1240px;
  --pad:clamp(20px,4vw,56px);
  --nav-h:62px;
  --sec-py:clamp(76px,8.5vw,132px);

  --ease:cubic-bezier(.32,.72,.28,1);
  --ease-out:cubic-bezier(.19,1,.22,1);

  /* cores do campo brasa: vivem aqui porque o hero, a seção da agenda e o
     hover dos projetos usam as mesmas. */
  --g-luz:#ffb409; --g-laranja:#f24503; --g-marca:#ff2e00;
  --g-vermelho:#b20300; --g-sombra:#4a0403;
}

:root[data-theme="dark"]{
  --ground:#000000;
  --raised:#0d0d0d;
  --ink:#ffffff;
  --ink-soft:#d0d0d0;
  --muted:#9a9a9a;
  --line:#262626;
  --line-soft:#161616;
  --grid:rgba(255,255,255,.09);
  --shadow:0 1px 2px rgba(0,0,0,.5),0 14px 36px -18px rgba(0,0,0,.8);
  --shadow-lg:0 2px 5px rgba(0,0,0,.5),0 32px 72px -28px rgba(0,0,0,.9);
  color-scheme:dark;
}
/* a bolha do cliente é cinza-claro no tema claro e precisa de um tom próprio no escuro */
:root[data-theme="dark"] .bolha.de-fora{background:#1c1c1c}


*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:light}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter",
              "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:clamp(1.0625rem,1.1vw,1.125rem);
  line-height:1.62;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit}

/* --- tipografia: pouca coisa, mas com degraus GRANDES entre os níveis.
   O modelo vive do contraste entre um título enorme e um rótulo mono
   minúsculo; o meio-termo é o que deixava a página monótona. */
h1,h2,h3,h4{
  margin:0;font-weight:600;line-height:1.04;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
}
h1{font-size:clamp(2.6rem,5.8vw,4.9rem);letter-spacing:-.045em;text-wrap:balance}
.h-sec{font-size:clamp(2.1rem,4.6vw,3.8rem);letter-spacing:-.038em;text-wrap:balance;font-weight:600}
.h-sm{font-size:clamp(1.4rem,2.2vw,1.75rem);letter-spacing:-.03em;font-weight:600}
.mono{
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--muted);margin-bottom:20px}
.eyebrow::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none;
  animation:beat 3s var(--ease) infinite;
}
@keyframes beat{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}}
.lead{color:var(--muted);max-width:46ch;font-size:clamp(1.125rem,1.5vw,1.35rem);line-height:1.5;letter-spacing:-.018em}

/* --- estrutura: a página é uma grade de filetes. As duas linhas
   verticais do .shell emolduram tudo; cada seção é uma célula. --- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;border-inline:1px solid var(--line)}
.pad{padding-inline:var(--pad)}
.sec{padding-block:var(--sec-py)}
.hair{border-top:1px solid var(--line)}
/* textura de pontos, quase invisível — o "papel técnico" do modelo */
.grid-bg{position:relative;isolation:isolate}
.grid-bg::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(var(--grid) 1px,transparent 1.6px);
  background-size:22px 22px;
}

/* --- movimento de entrada ----------------------------------------- */
[data-anim]{opacity:0;transform:translateY(28px);will-change:opacity,transform}
[data-anim].in{
  opacity:1;transform:none;
  transition:opacity .95s var(--ease-out),transform 1.05s var(--ease-out);
  transition-delay:var(--d,0ms);
}
[data-anim="scale"]{transform:translateY(26px) scale(.985)}
[data-anim="left"]{transform:translateX(-18px)}
[data-anim="right"]{transform:translateX(18px)}

/* --- botões ------------------------------------------------------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:50px;padding-inline:26px;border-radius:999px;border:1px solid transparent;
  font-size:1rem;font-weight:500;letter-spacing:-.018em;text-decoration:none;cursor:pointer;
  transition:transform .25s var(--ease),background-color .25s var(--ease),
             border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
/* O CTA (22/08/2026): miolo preto, escrita branca, e um arco de luz
   laranja correndo pela borda. O laranja saiu do preenchimento e virou
   contorno — continua sendo o mesmo ponto de cor da regra lá de cima,
   só que agora é ele que se move, e é a única coisa que se move no botão.
   Como funciona: ::before é um conic-gradient MAIOR que o botão, girando;
   ::after é o miolo preto por cima, deixando 1,6px de anel à vista. Nada
   de @property aqui — rotação de elemento roda em todo navegador, e o
   texto fica acima dos dois porque pseudo com z-index negativo pinta
   atrás do conteúdo e na frente do fundo. */
/* No tema CLARO o botão é BRANCO com texto preto (pedido dela); no escuro
   ele é preto com texto branco. O anel laranja girando é o mesmo nos dois —
   é ele que dá contorno ao botão branco sobre o fundo branco da página. */
.btn-accent{
  background:#fff;color:#000;isolation:isolate;overflow:hidden;
  border-color:transparent;box-shadow:var(--shadow);
}
:root[data-theme="dark"] .btn-accent{background:#000;color:#fff}
.btn-accent::before{
  content:"";position:absolute;z-index:-2;left:50%;top:50%;width:230%;aspect-ratio:1;
  background:
    conic-gradient(from 0turn,
      rgba(255,46,0,0) 0turn, rgba(255,46,0,0) .46turn,
      var(--g-marca) .60turn, var(--g-luz) .66turn, var(--g-marca) .72turn,
      rgba(255,46,0,0) .84turn, rgba(255,46,0,0) 1turn),
    linear-gradient(rgba(255,46,0,.34), rgba(255,46,0,.34));
  transform:translate(-50%,-50%);
  animation:anel-corre 4.2s linear infinite;
}
.btn-accent::after{
  content:"";position:absolute;z-index:-1;inset:1.6px;border-radius:inherit;
  background:#fff;
  transition:background-color .25s var(--ease);
}
:root[data-theme="dark"] .btn-accent::after{background:#000}
@keyframes anel-corre{to{transform:translate(-50%,-50%) rotate(1turn)}}
.btn-accent:hover{
  background:#000;
  box-shadow:var(--shadow-lg),0 0 0 1px rgba(255,46,0,.28),0 10px 34px -14px rgba(255,46,0,.65);
}
.btn-accent:hover::before{animation-duration:1.9s;filter:saturate(1.15) brightness(1.12)}
.btn-accent:hover::after{background:#f4f4f4}
:root[data-theme="dark"] .btn-accent:hover::after{background:#141414}
@media (prefers-reduced-motion:reduce){
  /* sem giro: o anel vira contorno fixo, e o botão continua sendo um botão */
  .btn-accent::before{animation:none;background:var(--g-marca)}
}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-line:hover{border-color:var(--muted);background:var(--raised)}
.btn-sm{height:38px;padding-inline:18px;font-size:.875rem}
.btn .arrow{transition:transform .3s var(--ease-out)}
.btn:hover .arrow{transform:translateX(4px)}

/* --- header ------------------------------------------------------- */
.top{
  position:sticky;top:0;z-index:60;border-bottom:1px solid transparent;
  background:color-mix(in srgb,var(--ground) 82%,transparent);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.top.stuck{border-bottom-color:var(--line)}
.nav{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-fim{display:flex;align-items:center;gap:10px}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{height:23px;width:auto;transition:opacity .25s var(--ease)}
.logo:hover img{opacity:.6}
.nav-mid{display:flex;align-items:center;gap:30px}
.nav-mid a{
  position:relative;text-decoration:none;font-size:.9375rem;color:var(--muted);
  letter-spacing:-.015em;transition:color .2s var(--ease);
}
.nav-mid a::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease-out);
}
.nav-mid a:hover{color:var(--ink)}
.nav-mid a:hover::after{transform:scaleX(1);transform-origin:left}
@media (max-width:940px){.nav-mid{display:none}}

/* --- hero ----------------------------------------------------------
   Metade esquerda: texto sobre branco. Metade direita: O campo laranja
   — a única área grande da cor na página, no papel que a foto de céu
   tem no modelo. O card branco da conversa flutua sobre ele. */
.hero{display:grid;grid-template-columns:1.02fr .98fr;min-height:min(720px,88vh)}
@media (max-width:980px){.hero{grid-template-columns:1fr;min-height:0}}
.hero-l{padding:clamp(44px,6vw,84px) var(--pad);display:flex;flex-direction:column;justify-content:center}
.hero h1{max-width:16ch}
.hero .lead{margin-top:26px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}
.hero-note{margin-top:18px;color:var(--muted);font-size:.8125rem;letter-spacing:-.01em}

.hero-r{
  display:grid;place-items:center;padding:clamp(32px,4.5vw,60px);min-height:440px;
}
/* O campo PARA na linha do site (22/08/2026 — pedido dela). Ele sangrava
   até a borda direita da janela com um margin negativo calculado em 100vw:
   ficava colado no vidro e a régua vertical do .shell, que organiza a
   página inteira, morria ali. Agora o gradiente termina onde termina a
   coluna, alinhado com todas as outras seções. */


/* ==================================================================
   CAMPO BRASA — o gradiente que ela enviou em vídeo.
   Cores amostradas quadro a quadro do arquivo: do vermelho profundo
   #A40100 no canto inferior esquerdo, passando pelo #ff2e00 da marca no
   meio, até o salmão #FC7F5E no canto superior direito.

   É CSS e não o vídeo: o arquivo original tem 25 MB em 4K, o que num
   celular com dados custa mais que a página inteira. Aqui o mesmo desenho
   sai em algumas linhas, desliza igual e não gasta banda.

   Sem a trama de pontos da versão anterior — o vídeo dela é limpo, e ela
   já havia pedido menos textura.
   ================================================================== */
.brasa{
  position:relative;isolation:isolate;overflow:hidden;
  --g-fundo:#a40100; --g-marca:#ff2e00; --g-luz:#fc7f5e;
  background:linear-gradient(135deg,
    #a40100 0%, #b30906 10%, #e7220d 24%,
    #fc3100 36%, #fb2500 50%, #fd2200 60%,
    #fc5b30 76%, #fc7f5e 92%, #fc8a6b 100%);
  background-size:230% 230%;
  background-position:0% 50%;
  animation:desliza 26s ease-in-out infinite alternate;
}
@keyframes desliza{
  from{background-position:0% 50%}
  to  {background-position:100% 50%}
}
@media (prefers-reduced-motion:reduce){.brasa{animation:none}}
.brasa > *{position:relative;z-index:2}

/* --- demonstração: a conversa se respondendo sozinha ---------------
   Card branco sobre o campo laranja. Dentro dele NÃO entra laranja:
   a bolha da casa é preta (no escuro, branca) — o contraste do card
   com o campo já faz o trabalho. */

.demo{
  position:relative;width:min(400px,100%);background:var(--raised);
  border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;
}
/* levita depois que a entrada termina (delay > duração da transição) */
.demo.in{animation:flutua 7s ease-in-out 1.4s infinite}
@keyframes flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.demo-top{
  padding:13px 16px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.demo-top .mono{color:var(--muted)}
.demo-fluxo{
  padding:16px;display:flex;flex-direction:column;gap:10px;
  min-height:210px;justify-content:flex-end;
}
.bolha{
  max-width:86%;padding:10px 13px;border-radius:14px;font-size:.875rem;
  line-height:1.4;letter-spacing:-.012em;
  animation:sobe .42s var(--ease-out) both;
}
@keyframes sobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.bolha.de-fora{align-self:flex-start;background:#f4f4f4;border-bottom-left-radius:5px;color:var(--ink)}
.bolha.da-casa{
  align-self:flex-end;background:var(--ink);color:var(--ground);
  border-bottom-right-radius:5px;font-weight:500;
}
.bolha .cursor{
  display:inline-block;width:2px;height:.95em;background:currentColor;
  vertical-align:-2px;margin-left:2px;animation:pisca 1s steps(2) infinite;
}
@keyframes pisca{0%,49%{opacity:1}50%,100%{opacity:0}}
.pensando{
  align-self:flex-end;display:inline-flex;gap:4px;padding:12px 14px;background:var(--ink);
  border-radius:14px;border-bottom-right-radius:5px;animation:sobe .3s var(--ease-out) both;
}
.pensando i{
  width:5px;height:5px;border-radius:50%;background:var(--ground);opacity:.55;
  animation:pulo 1.25s var(--ease) infinite;
}
.pensando i:nth-child(2){animation-delay:.16s}
.pensando i:nth-child(3){animation-delay:.32s}
@keyframes pulo{0%,60%,100%{transform:translateY(0);opacity:.55}30%{transform:translateY(-4px);opacity:1}}
.demo-pe{
  padding:12px 16px;border-top:1px solid var(--line);display:flex;align-items:center;gap:9px;
  color:var(--muted);
}
.demo-pe .marca{color:var(--ink);font-weight:500}
.pip{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;position:relative}
.pip-on::after{
  content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--accent);
  animation:ping 2.4s var(--ease-out) infinite;
}
@keyframes ping{0%{transform:scale(1);opacity:.8}100%{transform:scale(3.2);opacity:0}}

/* As cenas da demonstração: cada uma é o estado FINAL — pergunta, resposta
   e o artefato pronto (a reserva, o PDF, a segunda via). Sem JavaScript só
   a .fixa aparece, inteira. Com o site.js no comando (.vivo) as três se
   revezam: .atual é a da vez, .esc é o que a cena ainda não revelou e
   .gerando é o artefato em produção — rótulo via attr(data-espera) e uma
   barra que enche. O artefato mora DENTRO da bolha, como anexo de
   WhatsApp: nada de segundo cartão dentro do card. */
.demo-fluxo .cena{display:none;flex-direction:column;gap:10px}
.demo-fluxo .cena.fixa{display:flex}
.demo.vivo .demo-fluxo .cena.fixa:not(.atual){display:none}
.demo.vivo .demo-fluxo .cena.atual{display:flex}
.demo.vivo .esc{display:none}
.feito{
  display:flex;align-items:center;gap:8px;margin-top:9px;padding:8px 10px;
  border-radius:9px;background:rgba(255,255,255,.14);position:relative;font-weight:400;
}
/* no escuro a bolha da casa inverte (fica clara), o anexo escurece junto */
:root[data-theme="dark"] .bolha.da-casa .feito{background:rgba(0,0,0,.08)}
.feito b{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.75rem;font-weight:500}
.feito i{font-style:normal;font-size:.6875rem;opacity:.62;margin-left:auto;white-space:nowrap}
.feito .f-ico{
  width:15px;height:15px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
/* o artefato em produção: o conteúdo segura o lugar invisível, ficam o
   rótulo e a barra de progresso — é o "gerando" acontecendo na tela */
.demo.vivo .feito.gerando > *{visibility:hidden}
.demo.vivo .feito.gerando::before{
  content:attr(data-espera);position:absolute;left:10px;top:7px;
  font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.6875rem;opacity:.8;
}
.demo.vivo .feito.gerando::after{
  content:"";position:absolute;left:10px;right:10px;bottom:6px;height:2px;
  border-radius:2px;background:currentColor;transform-origin:left;
  animation:enche 1.1s var(--ease) both;
}
@keyframes enche{from{transform:scaleX(0)}60%{transform:scaleX(.72)}to{transform:scaleX(1)}}
.demo.vivo .feito.pronto{animation:pop .38s var(--ease-out)}
/* na cena da reserva o check se desenha quando o artefato fica pronto */
.demo.vivo .f-ico .tico{stroke-dasharray:13;stroke-dashoffset:13;transition:stroke-dashoffset .5s var(--ease-out) .12s}
.demo.vivo .feito.pronto .f-ico .tico{stroke-dashoffset:0}
/* troca de cena: o fluxo apaga, o laço arruma no escuro e reacende */
.demo.vivo .demo-fluxo{transition:opacity .3s var(--ease)}
.demo.vivo .demo-fluxo.some{opacity:0}

/* --- faixa contínua: logos monocromáticos, separador neutro -------- */
.marquee{border-block:1px solid var(--line);overflow:hidden;padding-block:22px;position:relative}
.marquee::before,.marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(to right,var(--ground),transparent)}
.marquee::after{right:0;background:linear-gradient(to left,var(--ground),transparent)}
.marquee-track{display:flex;width:max-content;animation:roll 78s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes roll{to{transform:translateX(-50%)}}
.marquee-track span{
  display:inline-flex;align-items:center;gap:14px;padding-inline:44px;
  color:var(--ink-soft);font-size:1.0625rem;letter-spacing:-.02em;white-space:nowrap;
}
.marquee-track span::after{content:"";width:3px;height:3px;border-radius:50%;background:var(--line);flex:none}

/* --- células de exemplo --------------------------------------------
   O desenho do modelo: célula ALTA fechada por filetes, rótulo mono no
   alto, mockup pequeno flutuando em muito ar — ar que funciona porque é
   delimitado —, e a legenda grande em duas vozes presa no rodapé:
   o problema em preto, a solução em cinza. */
.cases{display:grid;grid-template-columns:1fr 1fr}
@media (max-width:880px){.cases{grid-template-columns:1fr}}
.case{
  padding:clamp(28px,3vw,40px) var(--pad) clamp(32px,3.4vw,46px);
  border-top:1px solid var(--line);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  min-height:clamp(420px,44vw,560px);
}
.cases .case:nth-child(2n){border-right:0}
@media (max-width:880px){.case{border-right:0;min-height:0}}
.case > .mono{color:var(--muted)}
.case-art{flex:1;min-height:230px;display:grid;place-items:center;padding-block:clamp(26px,3vw,40px)}
.case:hover .mini,.case:hover .tasks{transform:translateY(-5px)}
.mini,.tasks{transition:transform .5s var(--ease-out)}
.case-line{
  font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1.3;letter-spacing:-.03em;
  font-weight:600;max-width:30ch;text-wrap:balance;
}
.case-line .fix{color:var(--muted);font-weight:400}

.mini{width:min(340px,100%);background:var(--raised);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.mini-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line)}
.mini-url{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.6875rem;color:var(--muted);letter-spacing:.02em}
.mini-body{padding:14px}
.mini-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:8px;border-bottom:1px solid var(--line-soft);font-size:.875rem;letter-spacing:-.012em}
.mini-row:last-child{border-bottom:0}
.mini-row .v{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.75rem;color:var(--muted)}
.mini-row .v.forte{color:var(--ink);font-weight:500}
/* chip NEUTRO — o "gerado" do modelo é bege sobre bege, nunca a cor da marca */
.chip{
  display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;
  background:var(--line-soft);color:var(--ink-soft);
  font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;
}
.check{width:19px;height:19px;border-radius:50%;background:var(--line-soft);display:grid;place-items:center;flex:none}
.check svg{width:10px;height:10px;stroke:var(--ink);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.tasks{width:min(340px,100%)}
.task{
  display:flex;align-items:center;gap:11px;padding:12px 14px;border:1px solid var(--line);
  border-radius:12px;background:var(--raised);font-size:.8125rem;margin-bottom:8px;box-shadow:var(--shadow);
  letter-spacing:-.012em;
}
.task:last-child{margin-bottom:0}
.task b{font-weight:500;display:block}
.task span span{color:var(--muted);font-size:.75rem}

/* --- os quatro cartões em cena -------------------------------------
   O HTML de cada mockup é o estado FINAL: sem JavaScript (noscript) e sob
   prefers-reduced-motion o cartão fica pronto e legível, parado. Com
   movimento, o site.js assume, marca .vivo e conta a cena em laço — por
   isso TUDO aqui embaixo é escopado em .vivo: sem o script, nada pega. */

/* cartão 2: a conversa dentro do mini reusa as bolhas do hero, menores */
.mini-chat{display:flex;flex-direction:column;gap:9px;min-height:150px;justify-content:flex-end}
.mini-chat .bolha{font-size:.8125rem;padding:8px 12px;max-width:88%}
.chat-pe{display:flex;padding-top:2px}
.mini.vivo .chat-pe{animation:sobe .45s var(--ease-out) both}
.mini-chat .pensando{padding:10px 12px}

/* troca de cena: o corpo do mini apaga, o laço arruma tudo e reacende */
.mini.vivo .mini-body{transition:opacity .32s var(--ease)}
.mini.vivo .mini-body.some{opacity:0}

/* cartão 1: as linhas do orçamento existem desde o início (a altura não
   pula), mas entram uma a uma quando a cena as revela */
.mini.vivo .mini-row{transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.mini.vivo .mini-row.esc{opacity:0;transform:translateY(7px)}
.chip{transition:opacity .3s var(--ease)}
.chip.espera{animation:espera 1.15s var(--ease) infinite}
@keyframes espera{50%{opacity:.45}}
.chip.pop{animation:pop .38s var(--ease-out)}
@keyframes pop{0%{transform:scale(.82)}60%{transform:scale(1.06)}100%{transform:scale(1)}}

/* cartão 3: com o laço no comando as barras deixam a animação de entrada
   e passam a transicionar; .baixa é a leitura da semana anterior */
.mini.vivo .chart .barra{animation:none;transform:scaleY(1);transition:transform .85s var(--ease-out)}
.mini.vivo .chart .barra.baixa{transform:scaleY(.55)}
.kpi{font-variant-numeric:tabular-nums}

/* cartão 4: a fila anda — a pendente gira um anel discreto, o check se
   desenha ao concluir, a mais antiga sai por cima e recolhe a altura */
.tasks.vivo .task{transition:opacity .45s var(--ease),transform .45s var(--ease-out),height .45s var(--ease-out),margin-bottom .45s var(--ease-out),padding .45s var(--ease-out),border-width .45s var(--ease-out)}
.tasks.vivo .check{position:relative}
.tasks.vivo .check svg path{stroke-dasharray:12.5;stroke-dashoffset:0;transition:stroke-dashoffset .45s var(--ease-out) .1s}
.tasks.vivo .task.pend{opacity:.5}
.tasks.vivo .task.pend .check{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line)}
.tasks.vivo .task.pend .check svg path{stroke-dashoffset:12.5}
.tasks.vivo .task.pend .check::after{
  content:"";position:absolute;inset:2.5px;border-radius:50%;
  border:1.5px solid transparent;border-top-color:var(--ink-soft);
  animation:anel 1s linear infinite;
}
@keyframes anel{to{transform:rotate(1turn)}}
.tasks.vivo .task.sai{opacity:0;transform:translateY(-10px);height:0 !important;margin-bottom:0;padding-block:0;border-width:0;overflow:hidden}
.tasks.vivo .task.chega{animation:sobe .5s var(--ease-out) both}

/* --- gráficos: preto para receita, laranja para custo — o único
   lugar da página onde a cor desenha dado, igual ao modelo. --- */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart .grade{stroke:var(--line);stroke-width:1;stroke-dasharray:2 6}
.chart .eixo{stroke:var(--line);stroke-width:1}
.chart .receita{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.chart .custo{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.chart .folga{fill:var(--accent);opacity:0;transition:opacity 1s var(--ease) .9s}
.chart .marca{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:9px;fill:var(--muted);letter-spacing:.06em}
.chart .barra{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0)}
.in .chart .receita,.in .chart .custo{animation:tracar 1.5s var(--ease-out) forwards}
.in .chart .custo{animation-delay:.22s}
.in .chart .folga{opacity:.12}
.in .chart .barra{animation:crescer .8s var(--ease-out) forwards}
.chart .receita,.chart .custo{stroke-dasharray:600;stroke-dashoffset:600}
@keyframes tracar{to{stroke-dashoffset:0}}
@keyframes crescer{to{transform:scaleY(1)}}
/* no mini-gráfico de barras a cor não entra: só tons do papel */
.mini .chart .barra{fill:var(--line)}
.mini .chart .barra.alta{fill:var(--ink-soft)}
/* --- a cena do "cresça sem que o custo suba junto" ------------------
   O HTML do gráfico é o estado FINAL (recorte na largura cheia): sem
   JavaScript e sob prefers-reduced-motion ele fica completo e parado.
   Com movimento, o site.js marca .vivo e passa a dirigir — por isso TUDO
   aqui é escopado em .vivo, como nos cartões de Soluções. Quem revela é
   a frente do recorte, que avança no eixo x pelas mãos do script; o
   traço por dash da entrada sai de cena. */
.why.vivo .chart .receita,.why.vivo .chart .custo{animation:none;stroke-dashoffset:0}
.why.vivo .chart .folga{transition:none;opacity:.12}
/* troca de cena: o desenho apaga, o laço rearma no escuro e reacende —
   a grade e o eixo ficam, são o papel */
.why .chart .cena{transition:opacity .32s var(--ease)}
.why.vivo .chart .cena.some{opacity:0}
/* o ponto da virada: marca no custo o lugar exato de onde o rótulo fala */
.chart .virada{fill:var(--accent);transform-box:fill-box;transform-origin:center}
.why.vivo .chart .virada{opacity:0}
.why.vivo .chart .virada.ligada{opacity:1;animation:pulso .55s var(--ease-out)}
@keyframes pulso{0%{transform:scale(.3)}55%{transform:scale(1.6)}100%{transform:scale(1)}}
/* o rótulo sobe DO ponto quando o traço chega nele, não antes */
.why.vivo .chart .marca{opacity:0;transform:translateY(6px);transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)}
.why.vivo .chart .marca.ligada{opacity:1;transform:none}

.legend{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:20px}
.legend span{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.625rem;letter-spacing:.1em;text-transform:uppercase}
.legend i{width:16px;height:2px;border-radius:2px;display:block}
.why{display:grid;grid-template-columns:1fr 1.2fr;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--raised)}
@media (max-width:920px){.why{grid-template-columns:1fr}}
.why > div{padding:clamp(30px,3.6vw,52px)}
.why-r{border-left:1px solid var(--line)}
@media (max-width:920px){.why-r{border-left:0;border-top:1px solid var(--line)}}

/* --- passos: linhas de tabela com título GRANDE, como no modelo ---- */
.step{
  display:grid;grid-template-columns:minmax(150px,240px) 1fr;gap:24px;
  padding:26px var(--pad);border-top:1px solid var(--line);align-items:start;
  --rotulo:22px;
  transition:background-color .35s var(--ease);
}
.step:hover{background:var(--line-soft)}
@media (max-width:720px){.step{grid-template-columns:1fr;gap:8px}}
.step .mono{color:var(--muted);display:block;margin-bottom:10px}
.step .h-sm{font-size:clamp(1.5rem,2.4vw,1.9rem);letter-spacing:-.032em}
.step p{color:var(--muted);max-width:52ch;letter-spacing:-.014em;padding-top:var(--rotulo)}

/* --- fundadora ---------------------------------------------------- */
.center{text-align:center;display:flex;flex-direction:column;align-items:center}
.center .lead{max-width:46ch}
.founder{
  display:grid;grid-template-columns:260px 1fr;margin-top:clamp(36px,4vw,52px);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--raised);
  text-align:left;box-shadow:var(--shadow);max-width:820px;align-items:stretch;
}
@media (max-width:680px){.founder{grid-template-columns:1fr}}
.founder-ph{position:relative;background:var(--line-soft);height:100%;min-height:100%;overflow:hidden}
.founder-ph img{width:100%;height:100%;object-fit:cover;object-position:center 20%;transition:transform 1.2s var(--ease-out)}
.founder:hover .founder-ph img{transform:scale(1.04)}
.founder-txt{padding:clamp(26px,3.2vw,38px);display:flex;flex-direction:column;gap:12px;justify-content:center}
.founder-name{font-size:1.5rem;font-weight:600;letter-spacing:-.03em}
.founder-role{color:var(--muted);font-size:.875rem;margin-top:3px;letter-spacing:-.01em}
.founder-txt p{color:var(--ink-soft);letter-spacing:-.014em}

/* --- projetos: células na grade, não cartões soltos ---------------- */
.works{display:grid;grid-template-columns:repeat(2,1fr)}
@media (max-width:820px){.works{grid-template-columns:1fr}}
.work{
  padding:clamp(26px,3vw,38px) var(--pad);border-top:1px solid var(--line);border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:10px;text-decoration:none;
  transition:background-color .35s var(--ease);
}
.works .work:nth-child(2n){border-right:0}
@media (max-width:820px){.work{border-right:0}}
/* HOVER DOS PROJETOS (22/08/2026): o campo brasa sobe sob o cursor.
   Ele entra por baixo, em escala, e não pisca — quem some é o cinza. A
   diagonal foi virada de propósito: a parte profunda (#1a0100) fica em
   cima e à esquerda, onde estão o nome e o texto, e a luz vai para o
   canto de baixo à direita, longe de tudo que é escrito. É o que deixa
   o branco legível em cima do laranja sem sombra em texto.
   Só no ponteiro fino: em toque o :hover fica preso aceso. */
.work{position:relative;isolation:isolate;overflow:hidden}
.work > *{position:relative;z-index:1}
/* Os cards de projeto tinham o campo laranja subindo no hover e o texto
   virando branco. Ela pediu para tirar: o rastro do cursor já percorre o
   site inteiro, e virar a cor do texto sob o ponteiro atrapalha a leitura.
   Fica só o realce discreto de fundo, igual ao das linhas dos passos. */
a.work:hover{background:var(--raised)}

.work-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.work-name{font-size:clamp(1.25rem,1.8vw,1.5rem);font-weight:600;letter-spacing:-.03em}
.work-kind{color:var(--muted);font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;text-align:right;flex:none}
.work p{color:var(--muted);max-width:44ch;font-size:.9375rem;letter-spacing:-.014em}
.work-foot{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:8px;color:var(--muted);font-size:.8125rem}
a.work .work-foot .seta{transition:transform .3s var(--ease-out);opacity:.5}
a.work:hover .work-foot .seta{transform:translateX(4px);opacity:1}

/* --- agenda ------------------------------------------------------- */
/* A FAIXA DA AGENDA (22/08/2026). O calendário não é um cartão dentro do
   campo: ele É o fim da seção, de linha a linha do shell. Por isso não
   tem borda, nem raio, nem sombra — o que separa do gradiente é a mesma
   régua de 1px que separa tudo no site. O fundo é o da página porque o
   iframe do cal.com pinta o dele por cima, e um branco atrás evita o
   pisca-laranja enquanto o iframe não chega. */
.agenda-campo{
  width:100%;max-width:960px;border-radius:14px;overflow:hidden;
  background:rgba(255,255,255,.96);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.6);
}
/* No tema escuro o cal.com se pinta de escuro por dentro; um cartão branco
   em volta virava uma placa clara no meio do gradiente. */
:root[data-theme="dark"] .agenda-campo{
  background:#0d0d0d;
  box-shadow:0 24px 60px -28px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08);
}
#cal-inline{width:100%;min-height:620px}
#cal-inline iframe{display:block;width:100%!important}
.book-fallback{
  padding:clamp(40px,6vw,72px) var(--pad);text-align:center;color:var(--muted);
  font-size:.9375rem;display:flex;flex-direction:column;align-items:center;gap:18px;
}
.book-fallback a{color:#fff}
#cal-inline:has(iframe) .book-fallback,#cal-inline.is-loaded .book-fallback{display:none}

/* --- faq ---------------------------------------------------------- */
.faq{max-width:780px;margin-inline:auto;margin-top:clamp(30px,3.4vw,48px);width:100%;text-align:left}
details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
summary{
  padding:21px 2px;cursor:pointer;list-style:none;display:flex;gap:24px;align-items:center;
  justify-content:space-between;font-size:1.125rem;font-weight:500;letter-spacing:-.024em;
  transition:color .25s var(--ease);
}
summary:hover{color:var(--muted)}
summary::-webkit-details-marker{display:none}
.plus{position:relative;width:12px;height:12px;flex:none}
.plus::before,.plus::after{content:"";position:absolute;background:var(--muted);transition:transform .35s var(--ease-out),opacity .3s var(--ease)}
.plus::before{top:5.5px;left:0;width:12px;height:1.5px}
.plus::after{left:5.5px;top:0;width:1.5px;height:12px}
details[open] .plus::after{transform:rotate(90deg);opacity:0}
details p{padding:0 2px 22px;color:var(--muted);max-width:64ch;letter-spacing:-.014em;animation:abrir .45s var(--ease-out)}
@keyframes abrir{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* --- rodapé ------------------------------------------------------- */
.foot{border-top:1px solid var(--line)}
.foot-in{
  display:flex;flex-wrap:wrap;gap:24px 32px;align-items:center;
  justify-content:space-between;padding-block:30px;
}
.foot-logo img{height:20px;width:auto;opacity:.8}
.foot-nav{display:flex;flex-wrap:wrap;gap:20px}
.foot-nav a{color:var(--muted);text-decoration:none;font-size:.875rem;letter-spacing:-.014em;transition:color .2s var(--ease)}
.foot-nav a:hover{color:var(--ink)}
.foot-right{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-left:auto}
@media (max-width:760px){.foot-right{margin-left:0}}
.copy{color:var(--muted);font-size:.75rem;letter-spacing:-.01em}

.skip{position:absolute;left:-9999px}
.skip:focus{left:10px;top:10px;z-index:100;background:var(--ink);color:var(--ground);padding:9px 15px;border-radius:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* Movimento é enfeite: quem pede menos movimento recebe a página inteira, parada. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  [data-anim]{opacity:1 !important;transform:none !important}
  .chart .receita,.chart .custo{stroke-dashoffset:0}
  .chart .barra{transform:scaleY(1)}
  .chart .folga{opacity:.12}
}

/* Texto que existe só para leitor de tela. Não usar display:none — isso o
   esconde de todo mundo, inclusive de quem precisa dele. */
.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* --- logotipo por tema ---------------------------------------------
   São dois arquivos dela (preto e branco), e não um filtro CSS: invert()
   num PNG deixa a borda suja e some com o antisserrilhado. As duas <img>
   ficam no HTML e o CSS mostra a certa — assim não pisca na troca. */
.logo img,.foot-logo img{display:none}
.logo .no-claro,.foot-logo .no-claro{display:block}
:root[data-theme="dark"] .logo .no-claro,
:root[data-theme="dark"] .foot-logo .no-claro{display:none}
:root[data-theme="dark"] .logo .no-escuro,
:root[data-theme="dark"] .foot-logo .no-escuro{display:block}

/* --- botão de tema: sol e lua --------------------------------------- */
.tema-btn{
  display:inline-grid;place-items:center;width:38px;height:38px;flex:none;
  border:1px solid var(--line);border-radius:999px;background:transparent;
  color:var(--ink);cursor:pointer;padding:0;
  transition:border-color .25s var(--ease),background-color .25s var(--ease);
}
.tema-btn:hover{border-color:var(--muted);background:var(--raised)}
.tema-btn svg{width:17px;height:17px;grid-area:1/1;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:opacity .3s var(--ease),transform .45s var(--ease-out)}
/* No claro aparece a LUA (o que o clique faz: escurecer). No escuro, o sol. */
.tema-btn .lua{opacity:1;transform:rotate(0) scale(1)}
.tema-btn .sol{opacity:0;transform:rotate(-70deg) scale(.5)}
:root[data-theme="dark"] .tema-btn .lua{opacity:0;transform:rotate(70deg) scale(.5)}
:root[data-theme="dark"] .tema-btn .sol{opacity:1;transform:rotate(0) scale(1)}

/* --- marcas na faixa ------------------------------------------------
   Os logos entram monocromáticos: coloridos, cada marca puxa a atenção
   para um lado e a faixa vira colcha de retalhos. O SVG segue o tema por
   currentColor; o PNG da AI Shoes, que não tem como, é achatado por
   filtro — brightness(0) leva tudo a preto e o invert devolve branco no
   tema escuro. */
.marca-logo{display:inline-flex;align-items:center;color:var(--ink-soft)}
.marca-logo svg{height:23px;width:auto;display:block}

/* --- lockup do EOG --------------------------------------------------
   O arquivo de logo deles escreve "EYE OF GOD" por extenso, e ela pediu a
   sigla. Aqui o símbolo (o olho) vem do favicon.svg deles e a sigla é
   tipografada ao lado, no peso do resto da faixa. */
/* GAP 6px, não 9px (24/08/2026). Ela reclamou que símbolo e sigla estavam
   "muito espaçados" nas duas marcas. Metade da folga era invisível: vinha do
   viewBox do EOG, que sobrava 8% de cada lado, e do quadrado laranja da AI
   Shoes, recortado com margem. Agora as duas artes estão coladas na própria
   tinta e o respiro é só este gap. Mexeu num viewBox? confira o par. */
.marca-eog,.marca-lockup{display:inline-flex;align-items:center;gap:6px}
.marca-eog svg,.marca-lockup svg,
.marca-eog .marca-simbolo,.marca-lockup .marca-simbolo{height:25px;width:auto;display:block;flex:none}
.marca-eog b,.marca-lockup b{font-weight:600;font-size:1.0625rem;letter-spacing:-.02em}

/* Alien e BRAZCO só existem em PNG (o da Alien ainda traz um retângulo
   verde no meio do "E"). Mesmo tratamento da AI Shoes: brightness(0)
   achata a arte inteira em preto e o invert devolve branco no escuro —
   o invert não mexe no canal alfa, então a borda não suja.
   AS ALTURAS SÃO DIFERENTES DE PROPÓSITO: o que precisa bater é o
   tamanho ÓPTICO, não o número. A Alien vem com espinhos que sobem e
   descem muito além das letras (a palavra ocupa ~3/4 da caixa) e o
   pinguim da BRAZCO é o dobro da altura do "BRAZCO" escrito ao lado.
   Igualar a caixa deixaria a palavra ALIEN gigante e o BRAZCO ilegível.
   Os valores abaixo foram medidos no render até a mancha de cada marca
   ficar na mesma faixa das outras — mexeu num, confira os cinco. */
/* opacity .82: preto a 82% sobre o branco dá #2e2b29 e branco a 82%
   sobre o preto dá #d0d0d0 — exatamente os dois valores de --ink-soft,
   que é a cor das outras marcas. Sem isso o PNG fica mais escuro. */
.marca-png{width:auto;display:block;filter:brightness(0);opacity:.82}
/* o S da AI Shoes é branco DENTRO do quadrado laranja: o PNG aqui é o
   recorte do vazado, então já nasce preto e o brightness(0) só o normaliza */
:root[data-theme="dark"] .marca-png{filter:brightness(0) invert(1)}
/* Medido no render em 24/08/2026, com a tinta e não com a caixa: NORAH a
   19px escrevia o nome com 11px de altura enquanto "EOG" e "AI Shoes",
   tipografados, davam 13px — a Norah lia menor que todo o resto da faixa.
   23px empata os três. A Alien é wordmark de display com espinhos: a caixa
   é 24px mas as LETRAS ficam em ~14,5px, que é onde o nome dela pesa igual
   aos vizinhos. Refez algum asset? refaça a medida, não confie no olho. */
.marca-alien{height:24px}

/* --- CTA final (a agenda saiu da página e virou popup) -------------- */
.cta-fim{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:clamp(26px,3vw,38px)}
.btn-lg{height:58px;padding-inline:34px;font-size:1.0625rem}
.cta-nota{color:var(--muted);font-size:.9375rem;letter-spacing:-.014em}

/* --- seção da agenda sobre o campo brasa ----------------------------
   Primeira tentativa foi texto PRETO sobre o mesh: medido no render, dava
   1,18:1 atrás do título e 1,00:1 atrás do parágrafo — ilegível, porque as
   sombras do mesh caíam justamente atrás do texto. Invertido: o lado do
   texto é a parte profunda do gradiente, a luz vai para o lado oposto, e o
   texto é branco. O botão fica laranja (texto preto, 5,64:1), que sobre o
   fundo escuro é o elemento mais claro da seção. */
/* Mesmo gradiente do hero (a classe .brasa já entrega), a pedido dela.
   O texto continua branco e fica na metade ESQUERDA, que é a parte profunda
   do mesh — a luz dourada nasce à direita, onde vai o calendário. */
/* O bloco escuro atrás do texto saiu a pedido dela. Sem ele o branco caía
   para 3,7:1 e o parágrafo reprovava. A saída foi ENQUADRAR o mesmo
   gradiente: fixando o início em 0% 0%, a parte profunda dele fica atrás
   do texto e a medição sobe para 4,89:1. Aqui o gradiente não desliza de
   propósito — com a animação, o contraste variava ao longo do ciclo e
   caía abaixo do mínimo em parte dele. No hero ele continua se movendo. */
.secao-brasa{color:#fff;background-position:0% 0%;animation:none}
.secao-brasa .h-sec{color:#fff}
.secao-brasa .lead{color:rgba(255,255,255,.82)}
.secao-brasa .cta-nota{color:rgba(255,255,255,.72)}
/* o CTA sobre o campo é o MESMO botão preto de anel correndo: laranja
   sobre laranja apagava o botão, e o preto é o contraste que o campo pede */
/* O fundo desta seção é escuro nos dois temas, então o botão é branco
   sempre — preto sobre o gradiente profundo praticamente somia. */
.secao-brasa .btn-accent,
:root[data-theme="dark"] .secao-brasa .btn-accent{background:#fff;color:#000}
.secao-brasa .btn-accent::after,
:root[data-theme="dark"] .secao-brasa .btn-accent::after{background:#fff}
.secao-brasa .btn-accent:hover::after{background:#f4f4f4}

/* O título da seção corria até onde o gradiente clareia, e ali o branco caía
   para 3,40:1. Encurtar a linha o mantém sobre a parte profunda — ganha
   contraste e melhora a composição, já que a luz fica livre à direita. */
.secao-brasa .h-sec{max-width:15ch}
.secao-brasa .lead{max-width:38ch}

/* --- rastro do cursor ------------------------------------------------
   O canvas é desenhado pelo site.js e fica POR CIMA da página. Os modos de
   mistura são o que deixa isso seguro: em multiply, texto preto continua
   preto; em screen, texto branco continua branco. Só o fundo se tinge. */
#rastro{
  position:fixed;inset:0;z-index:40;pointer-events:none;
  mix-blend-mode:multiply;
}
:root[data-theme="dark"] #rastro{mix-blend-mode:screen;opacity:.85}
@media (hover:none){#rastro{display:none}}
@media (prefers-reduced-motion:reduce){#rastro{display:none}}

/* --- e-mail no rodapé ------------------------------------------------ */

/* --- CTA e agenda no mesmo bloco ------------------------------------
   Eram duas peças soltas (texto numa faixa, agenda em outra). Agora
   dividem a mesma linha: o convite à esquerda, o calendário à direita.
   Abaixo de 1000px empilha, senão o mês do cal.com fica ilegível. */
.agenda-junto{
  display:grid;grid-template-columns:1fr;
  gap:clamp(28px,3.4vw,44px);justify-items:center;
}

.agenda-texto{text-align:center}
.agenda-texto .h-sec{max-width:none}
.agenda-texto .lead{max-width:42ch;margin-inline:auto}
#cal-inline{width:100%;min-height:560px}

/* --- rodapé: identidade à esquerda, contato à direita ---------------- */
.foot-esq{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.foot-dir{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
/* No celular a linha do rodapé empilha, mas os ÍCONES continuam lado a
   lado: são quatro alvos pequenos, cabem numa linha só e empilhados
   viravam uma coluna comprida no fim da página. */
@media (max-width:640px){
  .foot-in{flex-direction:column;align-items:flex-start;gap:18px}
  .foot-dir{flex-direction:row;align-items:center;gap:4px;margin-left:-8px}
}

.agenda-texto{position:relative;z-index:1}

/* --- rodapé: só ícones -----------------------------------------------
   Sem rótulo escrito, a pedido dela. Cada link leva aria-label e title,
   senão vira um punhado de desenhos sem nome para leitor de tela e para
   quem passa o mouse.
   WhatsApp e LinkedIn são os logos oficiais (preenchidos); e-mail e
   Instagram são traço. O tamanho é igualado no CSS para os quatro terem
   o mesmo peso na linha. */
.foot-ico{
  display:inline-grid;place-items:center;width:38px;height:38px;
  border-radius:50%;color:var(--muted);
  transition:color .25s var(--ease),background-color .25s var(--ease);
}
.foot-ico:hover{color:var(--accent);background:var(--raised)}
.foot-ico svg{fill:currentColor;stroke:none}
.foot-ico .ico-zap,.foot-ico .ico-in{width:17px;height:17px}      /* desenho cheio */
.foot-ico .ico-insta{width:21px;height:21px}                       /* desenho 18/24 */
.foot-ico .ico-mail{width:21px;height:21px}                        /* envelope achatado */
.foot-ico .ico-traco{
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.foot-dir{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
@media (max-width:640px){.foot-dir{gap:4px}}

/* --- respiro antes de uma seção com fundo próprio --------------------
   Entre duas seções brancas, o espaço interno de cada uma já basta. Mas
   quando a seguinte tem campo de cor, a faixa colorida começa onde a
   anterior termina, e a mudança de fundo encosta no conteúdo: medido,
   sobravam 77px entre o último card e o início do gradiente. */
#projetos{padding-bottom:clamp(56px,6vw,96px)}
.secao-brasa .sec{padding-block:clamp(84px,9vw,140px)}

/* --- WhatsApp flutuante ----------------------------------------------
   Preto e branco, a pedido dela: o verde do WhatsApp brigaria com o
   laranja da marca e é a primeira coisa que denuncia botão colado depois.
   Inverte no tema escuro. z-index acima do rastro do cursor (40) e do
   cabeçalho (60), porque tem que continuar clicável em qualquer ponto. */
.zap-flutua{
  position:fixed;right:clamp(18px,2.5vw,32px);bottom:clamp(18px,2.5vw,32px);z-index:70;
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--ink);color:var(--ground);
  box-shadow:0 6px 16px -6px rgba(0,0,0,.35),0 18px 40px -18px rgba(0,0,0,.45);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease),background-color .3s var(--ease);
}
.zap-flutua svg{width:26px;height:26px;fill:currentColor}
.zap-flutua:hover{
  transform:translateY(-3px) scale(1.04);
  box-shadow:0 10px 22px -8px rgba(0,0,0,.4),0 26px 56px -20px rgba(0,0,0,.5);
}
.zap-flutua:active{transform:translateY(0) scale(.98)}
/* Some quando o rodapé aparece: ali embaixo ele tapava o contato e o CNPJ,
   que é justamente a informação que a pessoa foi procurar no fim da página. */
.zap-flutua.recolhido{
  opacity:0;transform:translateY(14px) scale(.88);pointer-events:none;visibility:hidden;
}
@media (max-width:520px){.zap-flutua{width:52px;height:52px}.zap-flutua svg{width:24px;height:24px}}
@media (prefers-reduced-motion:reduce){.zap-flutua{transition:none}}

/* Os perfis dela usam a MESMA classe dos ícones do rodapé (.foot-ico), para
   ficarem idênticos por construção e não por aproximação. Só o recuo muda,
   para o primeiro ícone alinhar com o texto do cargo em vez de com a
   almofada redonda do link. */
/* Nome à esquerda, redes à direita, na MESMA linha — é o desenho do
   cartão de pessoa na referência que ela aprovou. Soltos abaixo do cargo
   eles ficavam boiando entre o cargo e a bio, sem nada que os prendesse. */
/* Abaixo do texto, a pedido dela: assinatura fecha o cartão em vez de
   competir com o nome no alto. O recuo negativo alinha o primeiro ícone
   com o texto, e não a almofada redonda do link. */
.founder-redes{display:flex;align-items:center;gap:2px;margin-left:-9px;margin-top:14px}