:root{
    /* Paleta amostrada da logo: grafite do circulo + ouro da chama.
       O navy saiu de fundo e virou acento — azul frio de fundo brigava
       com a luz quente, que e o conceito da marca. */
    --grafite:#2E3236;   /* fundo base */
    --breu:#1C1F22;      /* seccoes de respiro, mais fundo que a base */
    --breu-2:#25282C;    /* degrau intermediario */
    --ouro:#C9A063;      /* acao: botoes, links, dados */
    --ouro-cl:#E8C88A;   /* realce e hover */
    --ouro-esc:#8C6239;  /* base do gradiente da chama, fios */
    --tinta:#191934;     /* navy da wordmark — SO acento, nunca fundo */
    --osso:#F2F0EC;
    --osso-2:#DAD6CD;
    --cinza:#8A9099;      /* rotulos sobre fundo escuro */
    --cinza-esc:#53585F;  /* os mesmos rotulos sobre fundo claro (passa AA ate no osso-2) */
    --cinza-cl:#ADB2B8;  /* corpo de texto sobre escuro */
    --poco:#16191C;      /* fundo de janela, mais fundo que o breu */
    --fio-esc:rgba(242,240,236,.14);
    --fio-cl:#D3CEC2;

    /* ── SISTEMA ──
       Antes: 7 clamp() de titulo quase iguais e nenhum repetido, 8 larguras de
       leitura e padding de secao entre 88 e 110px. Nada disso e escolha — e o
       que o olho le como "montado aos poucos". Tres degraus, reaproveitados. */
    --t-display:clamp(30px,4.4vw,52px);   /* so o h1 do hero */
    --t-secao:clamp(25px,3.1vw,38px);     /* todo h2 de secao */
    --t-bloco:clamp(20px,2.3vw,27px);     /* subtitulo interno */

    --m-conteiner:1280px;                 /* limite da pagina */
    --m-largo:880px;                      /* texto largo, manifesto */
    --m-leitura:62ch;                     /* coluna confortavel de leitura */

    /* Ritmo: secoes densas apertam, secoes de respiro abrem. O contraste entre
       elas e o que cria cadencia — com tudo em ~96px a pagina fica chapada. */
    --v-apertado:clamp(56px,7vw,78px);
    --v-normal:clamp(72px,9vw,104px);
    --v-amplo:clamp(96px,13vw,152px);
  }
  *{box-sizing:border-box;margin:0;padding:0;border-radius:0;}
  /* O header e fixed com 62px. Sem isto, clicar em "Serviços" no menu para a
     secao COLADA embaixo da barra, com o titulo cortado pela metade. 78px da
     os 62 do header mais uma folga para nao ficar espremido. */
  html{scroll-padding-top:78px;}
  /* Rolagem suave nos links de ancora. Fora do prefers-reduced-motion, que
     existe justamente para quem passa mal com deslocamento na tela. */
  @media (prefers-reduced-motion: no-preference){
    html{scroll-behavior:smooth;}
  }
  body{font-family:'Archivo',sans-serif;font-weight:300;background:var(--osso);
    color:var(--grafite);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
  a{color:inherit;text-decoration:none;}
  img{display:block;max-width:100%;}
  button,input{font-family:inherit;border-radius:0;}
  .bg{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;letter-spacing:-.015em;}
  .mono{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--cinza);font-weight:400;}
  .lim{max-width:var(--m-conteiner);margin:0 auto;padding:0 32px;}
  .grao{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.2;mix-blend-mode:overlay;}

  /* ── TOPO ── */
  header{position:fixed;top:0;left:0;right:0;z-index:70;
    background:rgba(28,31,34,.90);backdrop-filter:blur(10px);border-bottom:1px solid var(--fio-esc);
    transition:background .4s,border-color .4s;}
  header .in{display:flex;align-items:center;justify-content:space-between;height:62px;
    max-width:var(--m-conteiner);margin:0 auto;padding:0 32px;gap:20px;}
  /* text-decoration:none porque virou <a>: sem isso o nome da marca ganha
     sublinhado do navegador. */
  .marca{display:flex;align-items:center;gap:10px;color:var(--osso);
    text-decoration:none;}
  .marca:focus-visible{outline:2px solid var(--ouro-cl);outline-offset:4px;}
  .marca svg{height:26px;width:auto;}
  .marca b{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:15px;letter-spacing:.01em;}
  header nav{display:flex;gap:26px;}
  header nav a{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--cinza-cl);transition:color .25s;}
  header nav a:hover{color:var(--ouro-cl);}
  .btn{display:inline-block;border:1px solid var(--ouro);background:var(--ouro);color:var(--breu);
    padding:11px 22px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;
    text-transform:uppercase;font-weight:500;transition:background .25s,color .25s;cursor:pointer;}
  .btn:hover{background:transparent;color:var(--ouro-cl);}
  .btn-linha{background:transparent;color:var(--grafite);border:1px solid var(--grafite);}
  .btn-linha:hover{background:var(--grafite);color:var(--osso);}

  /* ── ABERTURA com a tocha ──
     A tocha e efeito do HERO INTEIRO, nao do palco. Ja morou no palco, e era
     de la que vinha a caixa em volta da luz: .breu e o halo sao caixas
     inset:0, o palco so ocupa os 56% da direita, entao os dois gradientes
     terminavam numa reta na borda esquerda dele. E o pointermove tambem
     morava no palco, entao o centro da luz nem conseguia atravessar essa
     linha — ficava trancado na metade direita.
     overflow:visible nao resolvia isso: ele solta o filho posicionado (a
     chama), mas nunca faz um elemento pintar fora da propria caixa.
     Com as camadas aqui em cima a caixa e a tela inteira do hero, e nao
     existe borda para aparecer. */
  .abertura{position:relative;background:var(--breu);color:var(--osso);
    min-height:100vh;display:flex;align-items:center;padding:100px 0 60px;overflow:hidden;
    /* stacking context proprio: o z-index das camadas da tocha nunca disputa
       com o header (70), o aviso de cookies (80) ou o grao (90). */
    isolation:isolate;
    --x:50%; --y:50%; --raio:170px;
    /* --vida (0 a 1) apaga a tocha perto do topo e da base. O overflow:hidden
       aqui em cima e proposital — sem ele a chama vazaria para a secao clara
       de baixo — mas ele fatiava a chama e o halo numa reta horizontal, a
       mesma emenda que o palco fazia na vertical. Em vez de cortar, a luz
       morre antes de encostar. Quem calcula e o pos(), no JS. */
    --vida:1; --luz:calc(var(--raio) * var(--vida));}
  /* O palco agora e so o suporte da ficha, no fundo da pilha. */
  .palco{position:absolute;top:0;right:0;width:56%;height:100%;z-index:0;
    display:flex;align-items:center;justify-content:center;}
  .palco .veu{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
  /* O escuro fica POR CIMA da ficha, com um furo onde a tocha esta.
     O furo e o PROPRIO gradiente de fundo, nao mask-image: a mascara nao
     estava sendo aplicada no Chrome e o veu cobria a ficha inteira, que
     sumia contra o fundo da mesma cor. Gradiente de fundo funciona em
     qualquer navegador, sem prefixo, e repinta muito mais barato.
     Cobrir o hero todo sai de graca: rgba(28,31,34,.93) e a propria cor de
     fundo do hero, entao a metade esquerda nao escurece nada. O que muda e
     que o gradiente passa a ter para onde continuar. */
  .abertura .breu{position:absolute;inset:0;pointer-events:none;z-index:1;
    background:radial-gradient(circle var(--luz) at var(--x) var(--y),
      rgba(28,31,34,0) 0%, rgba(28,31,34,0) 26%,
      rgba(28,31,34,.62) 58%, rgba(28,31,34,.93) 100%);}
  /* Halo ambar em volta da luz. E ELE quem faz o brilho, nao um drop-shadow
     na chama: sendo um radial-gradient, e redondo por construcao, entao
     nenhuma borda de imagem consegue virar brilho reto. */
  .abertura::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
    background:radial-gradient(circle calc(var(--luz) * 1.25) at var(--x) var(--y),
      rgba(232,200,138,.20) 0%, rgba(232,200,138,.06) 45%, transparent 78%);
    animation:brasa 4.5s ease-in-out infinite;}
  /* A chama e fogo filmado: 48 quadros numa folha WebP com alfa de verdade.
     Alfa, e nao mix-blend-mode, porque a folha precisa compor limpa sobre
     qualquer fundo — sem retangulo em volta e sem tapar o halo de baixo.
     A caixa e alta e estreita porque a chama filmada e alta: forcar outra
     proporcao cortava a chama em cima e embaixo.
     Sem filter aqui de proposito: o brilho e do halo acima, e um drop-shadow
     por quadro era a conta mais cara deste elemento. */
  .tocha-chama{position:absolute;left:var(--x);top:var(--y);height:118px;width:38px;
    transform:translate(-50%,-62%);pointer-events:none;z-index:3;opacity:var(--vida);
    background-size:1824px 118px;
    animation:arder 2s steps(48) infinite alternate;}
  /* A folha so e PEDIDA onde a tocha existe. Declarada na regra base, o
     navegador baixava os 357 KB no celular tambem: o elemento nasce no DOM e o
     CSS esta no <head>, entao a imagem entra na fila no primeiro layout — o
     sem-tocha que a esconde so chega la embaixo, quando o JS roda. Eram 357 KB
     para um display:none, metade do peso da pagina. Mesma condicao que o JS
     usa para decidir com-tocha. */
  @media (hover:hover) and (pointer:fine){
    .tocha-chama{background-image:url(../chama-frames.webp);}
  }
  /* alternate: o vai-e-volta fecha o laco sem emenda e dobra o ciclo aparente,
     entao 48 quadros rendem ~4s sem repeticao obvia. */
  @keyframes arder{
    from{background-position-x:0;}
    to  {background-position-x:-1824px;}
  }
  @keyframes brasa{
    0%,100%{opacity:.78;}
    50%    {opacity:1;}
  }
  @media (prefers-reduced-motion: reduce){
    /* Reduzir, nao remover: o fogo continua ardendo, so que bem mais devagar. */
    .tocha-chama{animation-duration:6s;}
    .abertura::after{animation-duration:9s;}
  }

  /* Sem ponteiro fino — celular, teclado, leitor de tela — a ficha aparece
     inteira. A tocha e um bonus para quem tem mouse, nunca um pedagio. */
  .abertura.sem-tocha .breu{display:none;}
  .abertura.sem-tocha::after{display:none;}
  .abertura.sem-tocha .tocha-chama{display:none;}
  .abertura.com-tocha{cursor:none;}
  /* O cursor some para a chama ocupar o lugar dele. Os CTAs sao a excecao:
     sem ponteiro nenhum eles parariam de dizer que sao clicaveis. */
  .abertura.com-tocha a{cursor:pointer;}

  /* ── FICHA ── */
  .ficha{border:1px solid var(--fio-esc);padding:26px 28px 28px;max-width:var(--m-leitura);
    background:rgba(28,31,34,.55);}
  .ficha .nome-ficha{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:25px;
    color:var(--osso);margin:14px 0 12px;line-height:1.15;}
  .ficha .nota{display:flex;align-items:center;gap:9px;margin:0 0 14px;}
  .ficha .nota b{font-family:'Bricolage Grotesque',sans-serif;font-size:17px;color:var(--ouro-cl);}
  .ficha .estrelas{color:var(--ouro-cl);font-size:15px;letter-spacing:2px;}
  .ficha .qtd{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--cinza-cl);}
  .ficha .ender{font-size:14px;color:var(--osso);margin:0 0 10px;}
  .ficha .aberto{font-size:13px;color:#7CC49B;margin:0 0 20px;display:flex;align-items:center;gap:8px;}
  .ficha .aberto::before{content:"";width:7px;height:7px;background:#7CC49B;flex:none;}
  .ficha .rota{display:inline-block;background:var(--ouro);color:var(--breu);
    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;
    text-transform:uppercase;padding:10px 18px;}
  /* z-index 4: acima do veu (1), do halo (2) e da chama (3). O titulo nunca
     escurece nem some atras do fogo — a chama passa por tras dele. */
  .abertura .in{position:relative;z-index:4;max-width:var(--m-conteiner);margin:0 auto;padding:0 32px;width:100%;pointer-events:none;}
  /* Medida propria, nao a --m-leitura. 62ch foi calibrado para texto corrido
     de 16px (~500px); no display de 52px o mesmo 62ch vira 1240px e o titulo
     atravessava o container inteiro, passando por baixo do palco.
     O 40vw e o teto que segura a faixa de ~900 a 1100px, onde o palco de 56%
     mais aperta e o ch sozinho ainda deixava o titulo encostar na ficha. */
  .abertura h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;
    font-size:var(--t-display);line-height:1.12;letter-spacing:-.02em;
    max-width:min(19ch, 40vw);margin:16px 0 20px;}
  .abertura p{font-size:16px;color:var(--cinza-cl);max-width:var(--m-leitura);font-weight:300;}
  .abertura .acoes{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap;pointer-events:auto;}
  .abertura .rodape{position:absolute;left:0;right:0;bottom:0;z-index:4;
    border-top:1px solid var(--fio-esc);}
  .abertura .rodape .in2{max-width:var(--m-conteiner);margin:0 auto;padding:14px 32px;
    display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;}
  .dica-luz{color:var(--ouro-cl);}
  /* Visível para leitor de tela e para o buscador, invisível na tela.
     clip-path em vez de display:none, que o leitor tambem ignoraria. */
  .so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;}

  /* palavra por palavra */
  .sp{display:inline-block;overflow:hidden;vertical-align:bottom;}
  .sp i{display:inline-block;font-style:inherit;transform:translateY(105%);}

  /* ── MANIFESTO com scrub ── */
  .manifesto{background:var(--osso);padding:var(--v-amplo) 0;}
  .manifesto .txt{font-family:'Bricolage Grotesque',sans-serif;font-weight:400;
    font-size:var(--t-bloco);line-height:1.42;max-width:var(--m-largo);letter-spacing:-.012em;}
  /* #736D62 e a cor MAIS CLARA que ainda passa em 4.5:1 sobre o creme
     --osso (#F2F0EC): da 4.51. O #BEB8A8 de antes dava 1.74 e reprovava no
     Lighthouse. Escolhida a mais clara de proposito, para preservar o
     alcance do efeito de revelacao do texto. */
  .manifesto .txt span{color:#736D62;transition:color .25s;}
  .manifesto .txt span.on{color:var(--grafite);}
  .manifesto .assina{margin-top:34px;padding-top:16px;border-top:1px solid var(--fio-cl);
    display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;}

  /* ── SERVIÇOS: índice fixo + conteúdo ── */
  .servicos{background:var(--osso-2);border-top:1px solid var(--fio-cl);}
  .servicos .grade{display:grid;grid-template-columns:300px 1fr;max-width:var(--m-conteiner);margin:0 auto;}
  .servicos .idx{border-right:1px solid var(--fio-cl);padding:var(--v-normal) 28px var(--v-normal) 32px;}
  .servicos .idx .fix{position:sticky;top:110px;}
  .servicos .idx ol{list-style:none;margin-top:18px;}
  .servicos .idx li{padding:10px 0;border-top:1px solid var(--fio-cl);}
  .servicos .idx li:first-child{border-top:0;}
  .servicos .idx li a{display:flex;gap:12px;align-items:baseline;font-size:14px;color:#5E5A50;transition:color .3s;}
  .servicos .idx li a .k{font-family:'JetBrains Mono',monospace;font-size:10px;}
  .servicos .idx li.ativo a{color:var(--grafite);}
  .servicos .corpo{padding:64px 32px 64px 44px;}
  .srv{padding:38px 0;border-top:1px solid var(--fio-cl);}
  .srv:first-child{border-top:0;padding-top:0;}
  .srv .top{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;}
  .srv h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:25px;letter-spacing:-.01em;}
  .srv .tag{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.14em;
    text-transform:uppercase;border:1px solid #7D7768;color:#5E5A50;padding:2px 7px;}
  .srv p{font-size:15px;color:#4C4A44;max-width:var(--m-leitura);margin-top:12px;}
  .srv .det{margin-top:16px;display:grid;grid-template-columns:repeat(2,minmax(0,240px));gap:0 28px;}
  .srv .det div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
    border-bottom:1px solid var(--fio-cl);font-size:13px;}
  .srv .det span:last-child{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:#5E5A50;}

  /* ── PORTFÓLIO horizontal ── */
  .port{position:relative;background:var(--breu);color:var(--osso);}
  .port .trilho{display:flex;align-items:center;width:max-content;height:100vh;padding:0 32px;will-change:transform;}
  .port .trilho.estatico{flex-direction:column;align-items:flex-start;width:100%;height:auto;
    padding:80px 32px;max-width:var(--m-conteiner);margin:0 auto;}
  .port .trilho.estatico .cartao,.port .trilho.estatico .cartao.abre{width:100%;max-width:var(--m-largo);margin:0 0 44px;}
  .port .cartao{flex:none;width:min(76vw,880px);margin-right:44px;}
  .port .cartao.abre{width:min(46vw,440px);}
  .port .cartao.abre h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;
    font-size:var(--t-secao);line-height:1.14;letter-spacing:-.02em;margin:14px 0 16px;}
  .port .cartao.abre p{font-size:15px;color:var(--cinza-cl);max-width:var(--m-leitura);}
  .janela{border:1px solid var(--fio-esc);background:var(--poco);}
  .janela .barra{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--fio-esc);}
  .janela .pt{width:8px;height:8px;border:1px solid var(--fio-esc);}
  .janela .url{flex:1;margin-left:8px;font-family:'JetBrains Mono',monospace;font-size:9.5px;
    color:var(--cinza);letter-spacing:.06em;border:1px solid var(--fio-esc);padding:4px 9px;}
  .janela .tela{aspect-ratio:16/10.5;overflow:hidden;background:var(--poco);}
  .janela .tela img{width:100%;height:100%;object-fit:cover;object-position:top center;
    transition:transform 1.2s cubic-bezier(.2,.8,.2,1);}
  .port .cartao:hover .janela .tela img{transform:scale(1.03);}
  .port .legenda{display:flex;justify-content:space-between;gap:16px;margin-top:12px;flex-wrap:wrap;}
  .port .legenda h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:16px;}
  .port .legenda .tec{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--ouro-cl);}
  .port .prog{position:absolute;left:0;bottom:0;height:2px;background:var(--ouro);width:0;z-index:5;}

  /* ── AUDITORIA ── */
  .audit{background:var(--osso);padding:var(--v-normal) 0;border-top:1px solid var(--fio-cl);}
  .audit .cab{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:end;margin-bottom:34px;}
  .audit h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;
    font-size:var(--t-secao);line-height:1.14;letter-spacing:-.02em;margin-top:10px;}
  .audit .cab p{font-size:14.5px;color:#5A574F;max-width:var(--m-leitura);}
  .forma{display:flex;gap:0;border:1px solid var(--grafite);max-width:var(--m-leitura);}
  .forma input{flex:1;border:0;padding:15px 16px;font-size:15px;background:transparent;color:var(--grafite);outline:none;}
  .forma input::placeholder{color:#95907F;}
  .forma button{border:0;border-left:1px solid var(--grafite);}
  .audit .aviso{margin-top:14px;font-family:'JetBrains Mono',monospace;font-size:11px;
    color:#7A756A;letter-spacing:.02em;line-height:1.6;max-width:var(--m-leitura);}
  /* A espera do PageSpeed e de 20 a 40 segundos. Sem nada acontecendo na tela
     nesse tempo, a pessoa acha que travou — por isso a chama da marca enche
     enquanto o Google mede. */
  .carga{display:flex;align-items:center;gap:16px;margin-top:22px;}
  .carga[hidden]{display:none;}
  .carga-chama{width:34px;height:42px;flex:none;display:block;}
  .carga-txt{font-family:'JetBrains Mono',monospace;font-size:11px;
    color:#7A756A;letter-spacing:.02em;font-variant-numeric:tabular-nums;}
  .carga-txt b{font-weight:500;color:var(--grafite);}
  .placar-fonte{margin-top:14px;color:#7A756A;}
  /* Botao que parece link: e uma acao, nao navegacao, entao nao pode ser <a>
     sem href — leitor de tela anunciaria como link quebrado. */
  .link-btn{background:none;border:0;padding:0;font:inherit;color:var(--grafite);
    text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
  .link-btn:focus-visible{outline:2px solid var(--ouro-esc);outline-offset:2px;}
  .placar{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:34px;
    border:1px solid var(--fio-cl);}
  .placar div{padding:22px 20px;border-left:1px solid var(--fio-cl);}
  .placar div:first-child{border-left:0;}
  .placar b{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:34px;
    display:block;line-height:1;font-variant-numeric:tabular-nums;}
  .placar span{display:block;margin-top:8px;}

  /* ── FUNDADOR ── */
  .fund{background:var(--breu-2);color:var(--osso);padding:var(--v-amplo) 0;}
  .fund .in{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center;}
  .fund .foto{position:relative;overflow:hidden;
    clip-path:inset(0 0 100% 0);transition:clip-path 1.5s cubic-bezier(.16,.9,.2,1);}
  .fund .foto.on{clip-path:inset(0 0 0 0);}
  /* height:auto e obrigatorio aqui. A <img> tem width/height como atributo (o
     que reserva o espaco antes de carregar e evita salto de layout), e o
     atributo entra como presentation hint: sem height no CSS ele vira
     height:816px fixo e, com width:100%, a foto estica na vertical.
     Nas do portfolio isso nao acontece porque .janela .tela img ja define
     height:100%, que sobrescreve o atributo. */
  .fund .foto img{width:100%;height:auto;filter:grayscale(.2) contrast(1.05);}
  .fund h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;
    font-size:var(--t-secao);line-height:1.16;letter-spacing:-.02em;margin:12px 0 18px;}
  .fund p{font-size:15px;color:var(--cinza-cl);max-width:var(--m-leitura);}
  .fund p+p{margin-top:14px;}
  .fund .link{display:inline-block;margin-top:20px;font-family:'JetBrains Mono',monospace;
    font-size:11px;letter-spacing:.1em;color:var(--ouro-cl);border-bottom:1px solid var(--ouro);padding-bottom:2px;}

  /* ── CONTATO ── */
  /* Rótulo .mono tem 10px: sobre fundo claro o cinza claro reprovava em
     contraste (2.83:1). Um tom mais fundo resolve sem mudar a hierarquia. */
  .manifesto .mono, .servicos .mono, .audit .mono, .faq .mono{color:var(--cinza-esc);}

  /* ── PREÇO ── */
  .preco{background:var(--breu-2);color:var(--osso);padding:var(--v-apertado) 0;}
  .preco h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:var(--t-secao);
    line-height:1.12;max-width:var(--m-leitura);}
  .preco .grade{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:44px;border-top:1px solid var(--fio-esc);}
  .preco .item{padding:30px 34px 30px 0;border-bottom:1px solid var(--fio-esc);}
  .preco .item+.item{padding-left:34px;border-left:1px solid var(--fio-esc);}
  .preco .valor{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:34px;
    color:var(--ouro-cl);display:block;margin:10px 0 12px;}
  .preco .item p{font-size:15px;color:var(--cinza-cl);max-width:var(--m-leitura);}
  .preco .ancora{margin-top:40px;border-left:2px solid var(--ouro);padding:6px 0 6px 20px;
    font-size:16px;color:var(--osso);max-width:var(--m-leitura);}
  .preco .nota{margin-top:26px;font-size:14px;color:var(--cinza);max-width:var(--m-leitura);}

  /* ── LUZ QUE SEGUE O CURSOR ──
     Mesma ideia da tocha, aplicada aos blocos que JA sao escuros. Sobre o bege
     de .servicos um halo dourado leria como mancha, nao como luz — por isso
     servicos fica de fora.
     --lx/--ly, e nunca --x/--y: o palco do hero usa --x/--y e variavel CSS
     herda; repetir o nome faria a luz da tocha vazar para ca.
     Tudo pendurado em .com-luz, que so entra no body quando ha ponteiro fino:
     no celular nada disso existe. */
  .preco .item{position:relative;--lx:50%;--ly:50%;}
  .preco .item::before{content:"";position:absolute;inset:0;pointer-events:none;
    opacity:0;transition:opacity .5s ease;
    background:radial-gradient(320px circle at var(--lx) var(--ly),
      rgba(232,200,138,.09) 0%, rgba(232,200,138,.035) 40%, transparent 72%);}
  .com-luz .preco .item:hover::before{opacity:1;}

  /* No portfolio o cartao tem screenshot dentro. Um halo preenchendo tingiria a
     imagem, entao acende so a moldura: gradiente recortado por mask, deixando
     apenas a borda de 1px. O interior nao recebe nada. */
  .port .cartao{--lx:50%;--ly:50%;}
  .janela{position:relative;}
  .janela::after{content:"";position:absolute;inset:0;pointer-events:none;
    opacity:0;transition:opacity .5s ease;padding:1px;
    background:radial-gradient(300px circle at var(--lx) var(--ly),
      var(--ouro-cl) 0%, transparent 70%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;}
  .com-luz .port .cartao:hover .janela::after{opacity:.55;}

  /* ── BOTAO FANTASMA: a borda acende no hover ──
     Era estilo inline no HTML; virou classe. O feixe e um conic-gradient
     girando por transform (nao @property --ang, que ainda nao e universal),
     recortado pela mesma tecnica de mask da moldura acima.
     Gira SO no hover e devagar: em repouso o botao e identico ao de antes. */
  .btn-fantasma{background:transparent;color:var(--osso);border-color:var(--fio-esc);
    position:relative;overflow:hidden;isolation:isolate;
    transition:background .25s,color .25s,border-color .45s;}
  /* Quadrado maior que o botao, girando atras dele. O ::after tapa o miolo com
     a cor da abertura e sobra so 1px de rim — e o rim que fica parado enquanto
     o feixe passa por baixo. Girar a mascara em vez do gradiente faria o anel
     inteiro rodar, que e outra coisa (e feia). */
  .btn-fantasma::before{content:"";position:absolute;z-index:-2;
    left:50%;top:50%;width:190%;aspect-ratio:1;transform:translate(-50%,-50%);
    pointer-events:none;opacity:0;transition:opacity .45s ease;
    background:conic-gradient(from 0deg,transparent 0 76%,
      var(--ouro) 86%,var(--ouro-cl) 91%,var(--ouro) 95%,transparent 100%);}
  .btn-fantasma::after{content:"";position:absolute;z-index:-1;inset:1px;
    background:var(--breu);pointer-events:none;}
  /* o fio de base fica: sem ele o botao parece perder a borda enquanto o
     feixe esta do lado oposto */
  .btn-fantasma:hover{background:transparent;color:var(--ouro-cl);}
  .btn-fantasma:hover::before{opacity:1;
    animation:correr-borda 6s linear infinite;}
  @keyframes correr-borda{
    from{transform:translate(-50%,-50%) rotate(0turn);}
    to  {transform:translate(-50%,-50%) rotate(1turn);}
  }
  @media (prefers-reduced-motion:reduce){
    /* sai o movimento autonomo, fica a resposta ao usuario */
    .btn-fantasma:hover::before{animation:none;opacity:0;}
    .btn-fantasma:hover{border-color:var(--ouro);}
    .btn-fantasma::after{display:none;}
  }

  /* ── PERGUNTAS ── */
  .faq{background:var(--osso);color:var(--grafite);padding:var(--v-apertado) 0;border-top:1px solid var(--fio-cl);}
  .faq h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:var(--t-secao);
    line-height:1.12;max-width:var(--m-leitura);}
  .faq .perguntas{margin-top:44px;border-top:1px solid var(--fio-cl);}
  /* A divisoria mora no <details>, nao na resposta: presa na resposta, ela
     sumia junto com o texto quando a pergunta fecha. */
  .faq .pergunta{border-bottom:1px solid var(--fio-cl);}
  .faq summary{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:18px;
    padding:26px 34px 26px 0;cursor:pointer;position:relative;
    /* Fora o triangulo padrao, que muda de desenho a cada navegador. O sinal
       proprio vem no ::after. */
    list-style:none;}
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary::after{content:"+";position:absolute;right:0;top:50%;
    transform:translateY(-50%);font-family:'JetBrains Mono',monospace;
    font-weight:400;font-size:20px;color:#736D62;line-height:1;
    transition:transform .2s ease;}
  .faq .pergunta[open] > summary::after{content:"–";}
  /* O <summary> passa a ser focavel — o <dt> de antes nao era. Sem contorno
     visivel, quem navega por teclado se perde. */
  .faq summary:focus-visible{outline:2px solid var(--ouro-esc);outline-offset:3px;}
  .faq .resposta{margin:0 0 26px;font-size:15.5px;line-height:1.62;max-width:var(--m-leitura);}
  .faq .resposta b{font-weight:600;}
  @media (prefers-reduced-motion: reduce){
    .faq summary::after{transition:none;}
  }
  @media(max-width:860px){
    .preco .grade{grid-template-columns:1fr;}
    .preco .item+.item{padding-left:0;border-left:0;}
  }

  .contato{background:var(--breu);color:var(--osso);padding:var(--v-normal) 0;}
  .contato .in{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:start;}
  .contato h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;
    font-size:var(--t-secao);line-height:1.12;letter-spacing:-.02em;max-width:var(--m-leitura);margin-top:12px;}
  .contato .campos div{display:grid;grid-template-columns:104px 1fr;gap:16px;padding:13px 0;
    border-top:1px solid var(--fio-esc);font-size:14px;}
  .contato .campos div:first-child{border-top:0;}
  .contato .campos span:first-child{font-family:'JetBrains Mono',monospace;font-size:9.5px;
    letter-spacing:.14em;text-transform:uppercase;color:var(--cinza);padding-top:3px;}
  /* ── FALAR COMIGO ──
     Antes, a unica forma de contato era um mailto. Dona de clinica, no
     celular, a noite, nao abre cliente de e-mail — o caminho simplesmente
     nao existia. */
  .fala{margin-top:26px;max-width:var(--m-leitura);display:grid;gap:14px;}
  .fala label{display:grid;gap:7px;}
  .fala label .mono{color:var(--cinza);}
  .fala input,.fala textarea{width:100%;background:transparent;color:var(--osso);
    border:1px solid var(--fio-esc);padding:12px 14px;font:inherit;font-size:15px;
    border-radius:0;resize:vertical;}
  .fala input:focus,.fala textarea:focus{outline:2px solid var(--ouro);outline-offset:2px;
    border-color:transparent;}
  .fala textarea::placeholder{color:var(--cinza-esc);}
  .fala-acoes{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px;}
  .fala-aviso{color:var(--cinza);}
  /* ── BOTAO FLUTUANTE ──
     Mesmo padrao que ja existe na demo da Evidency, na paleta da Alumia.
     So no celular: no desktop o formulario e o link resolvem, e o flutuante
     comeria area util. O bottom generoso mantem ele acima do aviso de
     cookies, que e fixed no rodape. */
  .wa-flutua{display:none;}
  @media (max-width:880px){
    .wa-flutua{display:inline-flex;align-items:center;gap:9px;
      position:fixed;right:16px;bottom:88px;z-index:60;
      background:var(--ouro);color:var(--breu);
      font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;
      text-transform:uppercase;text-decoration:none;padding:14px 20px;
      box-shadow:0 10px 30px -8px rgba(0,0,0,.6);}
    .wa-flutua:focus-visible{outline:2px solid var(--osso);outline-offset:3px;}
  }

  footer{background:var(--breu);color:var(--cinza);border-top:1px solid var(--fio-esc);padding:22px 0 30px;}
  footer .in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;}

  .rv{opacity:0;transform:translateY(16px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);}
  .rv.in{opacity:1;transform:none;}

  /* Valor literal, nao var(--m-largo): custom property nao e permitida na
     condicao de media query — a regra fica invalida e o bloco inteiro morre.
     Era o que acontecia aqui: o site nao tinha quebra de tela estreita. */
  @media (max-width:880px){
    header nav{display:none;}
    .abertura{min-height:auto;padding:92px 0 0;flex-direction:column;align-items:stretch;}
    .palco{position:relative;width:100%;height:auto;padding:8px 0 4px;}
    .abertura .in{order:-1;padding-bottom:26px;}
    .abertura .rodape{position:relative;}
    .servicos .grade{grid-template-columns:1fr;}
    .servicos .idx{border-right:0;border-bottom:1px solid var(--fio-cl);padding:34px 20px;}
    .servicos .idx .fix{position:static;}
    .servicos .corpo{padding:34px 20px;}
    .srv .det{grid-template-columns:1fr;}
    .port .trilho{flex-direction:column;height:auto;width:100%;padding:56px 20px;}
    .port .cartao,.port .cartao.abre{width:100%;margin:0 0 34px;}
    .lim{padding:0 20px;}
    .audit .cab,.fund .in,.contato .in{grid-template-columns:1fr;gap:22px;}
    .placar{grid-template-columns:1fr 1fr;}
    .placar div:nth-child(3){border-left:0;}
    .placar div:nth-child(3),.placar div:nth-child(4){border-top:1px solid var(--fio-cl);}
    #cookies{max-width:100%;}
  }