/* Estilos da home (marvee.com.br/). Até 21/10/2026 este bloco vivia dentro de
   src/content/home.html, num <style> de 416 KB que ia junto em todo HTML da
   página. Saiu para um arquivo à parte, na MESMA posição da cascata (o <link>
   fica onde o <style> ficava), para o navegador guardar o CSS entre as visitas
   e o HTML da home encolher. O conteúdo é o mesmo, na mesma ordem: as notas de
   cada bloco continuam valendo e quem mexer na home mexe aqui. */

  /* ===================== A PÁGINA EM TOM CLARO =====================
     O site.css nasce escuro (body em --bg). Aqui a página inteira vira clara e
     os blocos escuros passam a ser exceção deliberada (.ink). */
  /* ===================== QUEBRA DE LINHA (decisão medida) =====================
     Encher a largura e não deixar sobra curta são objetivos que brigam, e a
     medição em 1440px mostra o tamanho do conflito (sobra = largura da última
     linha sobre a mais larga; vazio = quanto do max-width fica sem uso):

       medida 26ch, sem balance   sobra 0,26   vazio 0,11
       medida 26ch, com balance   sobra 0,78   vazio 0,27
       medida 34ch, sem balance   sobra 0,06   vazio 0,25

     Nenhuma medida sozinha resolve: a sobra depende do comprimento de cada
     frase, então varrer de 22ch a 34ch só troca qual título fica ruim.

     REGRA DA CASA: nunca uma palavra sozinha na última linha, sempre duas ou
     mais. Quem faz isso é `text-wrap: pretty`, e é diferente do balance: o
     pretty NÃO encurta o bloco (não abre vazio), ele só empurra a penúltima
     palavra pra baixo quando a última ficaria sozinha. Medida enxuta (26ch nos
     títulos, 56ch nos apoios) pra encher a largura, mais pretty pra garantir as
     duas palavras.
     Onde o navegador não tem pretty, o seguro é um espaço fixo (&nbsp;) entre as
     duas últimas palavras da frase, que gruda as duas em qualquer navegador.
     As quebras manuais que sobraram são pedido explícito de copy, e o
     <br class="br-d"> sai sozinho no mobile (o H1 da hero fecha em uma linha,
     sem quebra fixada). */
  h1,h2,h3,.h2,.lede,.sub,p,small,.tq,.ta,.pb-t,
  .st-sig,.rev blockquote,.rv2 blockquote,.mc small,
  .tp-sig span,.foot-cols .fc-brand p{text-wrap:pretty}

  /* ===================== TIPOGRAFIA DA PÁGINA =====================
     Só a / usa Manrope. A família global (a do site.css e a do Base.astro,
     que servem as outras 51 páginas) continua onde está: aqui ela é sobrescrita
     dentro do <style> desta página, que só é servido nesta página, e o arquivo
     da Manrope entra pelo slot de head do site2.astro. Títulos em 600, texto
     corrido em 400, que é o que o briefing pede.
     A lista abaixo cobre os lugares onde o site.css crava a família na mão
     (h1..h4, .badge-pill, .btn, campos de formulário): sem eles, metade da
     página continuaria na família antiga. */
  body,input,textarea,select,button,.btn,
  h1,h2,h3,h4,.h2,.badge-pill,.st-chip,.acount,.fc-lbl{font-family:'Manrope',sans-serif}
  h1,h2,h3,h4,.h2{font-weight:600;letter-spacing:-.028em}
  body,p,li,.lede,.sub{font-weight:400}

  /* ---- a paleta clara desta página ----
     A autora fechou duas cores para as áreas claras, com papel definido:
     #F2F2F2 é o FUNDO (o que ela chama de "branco absoluto", a superfície base)
     e #EAEFEF é o SEGUNDO PLANO (detalhe, box de destaque, shape).
     A troca é feita nos tokens e não nos usos, porque os três tokens do global
     já carregam exatamente essa distinção de papel: --light-card e --light-bg
     são superfície de base, --light-chrome é a superfície tingida dos boxes.
     E é local: este bloco só existe nesta página, então o `site.css` que serve
     as outras 51 continua com a paleta antiga, intocado. */
  :root{
    --light-bg:#F2F2F2;                  /* fundo */
    --light-card:#F2F2F2;                /* fundo (era #fff) */
    --light-chrome:#EAEFEF;              /* detalhe, box, shape (era #F1F4FB) */
  }

  /* O fundo da página passa a ser o branco dos cartões (--light-card), e não o
     --light-chrome tingido. Sem os painéis, o tingido não teria mais função: ele
     existia pra destacar o cartão branco, e o conteúdo sempre esteve sobre
     branco, então todo contraste de texto medido nas rodadas anteriores continua
     valendo sem recalcular.
     O respiro em volta da hero usa o MESMO branco, e não o tingido: são dois
     brancos diferentes encostados, e o degrau aparecia exatamente na linha onde a
     hero termina (medi rgb(238,241,248) logo acima contra rgb(252,252,252) logo
     abaixo, uma diferença de 14 pontos no vermelho). A sombra do painel ajudava a
     marcar a faixa, escurecendo a moldura de um lado só; com os dois lados na
     mesma cor ela atravessa a emenda sem degrau. */
  body{background:var(--light-card);color:var(--light-tx)}
  /* a moldura da caixa e o claro da pagina, como sempre foi */
  .s2h{background:var(--light-card)}
  .h2{color:var(--light-tx)}
  .lede{color:var(--light-tx2)}
  .badge-pill{color:var(--light-mut)}
  ::selection{background:rgba(91,192,190,.28)}

  /* A página deixa de ser uma pilha de painéis brancos e passa a ser folha
     corrida: sai a caixa de cada seção (fundo, traço, raio e sombra), fica o
     conteúdo. Como o espaçamento ERA o vão entre painéis (por isso o .pad estava
     em 9px), o ritmo vertical volta a ser padding de seção de verdade: o mesmo
     clamp das outras páginas do repo, num valor um pouco mais contido porque
     aqui são doze seções seguidas.
     O que sobra do antigo painel é só a grade: a mesma medida de 1320px e o
     mesmo respiro lateral, agora servindo de gutter do texto. */
  section.pad{padding:clamp(46px,5.6vw,78px) 0}
  section.pad > .wrap{
    max-width:1320px;
    padding:0 clamp(24px,4vw,58px);
  }

  /* Sem transição de página: a pilha sticky e o bloco que crescia (.sec-grow)
     foram testados aqui e removidos por decisão de design. A página rola normal;
     o que se move é só o reveal, a digitação do Marvin e a contagem dos números. */

  /* botão sólido escuro: no claro o traçado gradiente do .btn-grad desapareceria */
  .btn-ink{background:var(--bg);border:1px solid var(--bg);color:var(--white)}
  .btn-ink:hover{transform:translateY(-2px);background:#0B1330;box-shadow:0 14px 34px -16px rgba(4,8,31,.5)}
  .btn-line{background:transparent;border:1.5px solid var(--light-line2);color:var(--light-tx)}
  .btn-line:hover{background:var(--light-card);border-color:var(--light-mut)}

  /* ===================== BLOCO ESCURO (o ritmo da página) ===================== */
  .ink{
    position:relative;overflow:hidden;border-radius:clamp(20px,2.2vw,30px);color:var(--white);
    background:
      radial-gradient(110% 90% at 78% 8%, rgba(57,114,253,.26), transparent 60%),
      radial-gradient(90% 80% at 12% 92%, rgba(91,192,190,.18), transparent 58%),
      linear-gradient(180deg,#071031,var(--bg));
    box-shadow:0 40px 90px -50px rgba(4,8,31,.75);
  }
  .ink .h2{color:var(--white)}
  .ink .lede{color:var(--muted)}
  .ink .badge-pill{color:var(--teal)}
  .ink-pad{padding:clamp(28px,3.6vw,54px)}

  /* ===================== TOPO DE SEÇÃO EM DUAS COLUNAS ===================== */
  /* A coluna do rótulo é estreita: com 40% da largura sobrava um vazio grande à
     esquerda e o texto ficava solto. E o rótulo sai da caixa alta espaçada (que
     no claro fica larga e dura) para caixa baixa com um traço na frente. */
  /* ===================== ESCALA DE TÍTULO (padrão único) =====================
     Quatro níveis, e nada fora deles. O que quebrava o padrão era cada seção ter
     nascido com o seu tamanho: havia cinco corpos de h3 diferentes e três
     medidas de linha, então cada dobra parecia de um site.
       nível 1  título de seção   clamp(29,3.4vw,44)   medida 22ch
       nível 2  apoio de seção    clamp(16,1.6vw,19)   medida 52ch
       nível 3  título de painel  clamp(21,2.2vw,27)
       nível 4  título de cartão  19px
     A medida em ch é o que dá ritmo: com 22ch todo título de seção quebra em
     duas linhas, independente de ter 37 ou 52 caracteres. */
  .sec-head{display:grid;grid-template-columns:minmax(0,.27fr) minmax(0,1fr);gap:clamp(16px,2.6vw,44px);align-items:start;text-align:left}
  .sec-head .sh-label{padding-top:12px}
  .badge-pill{text-transform:none;letter-spacing:-.01em;font-size:13.5px;font-weight:600;gap:9px}
  .sec-head .sh-label .badge-pill::before{
    content:"";flex:none;width:20px;height:2px;border-radius:2px;background:var(--light-line2);
  }
  .h2,.sec-head .h2{margin-top:0;font-size:clamp(29px,3.4vw,44px);max-width:26ch}
  .lede,.sec-head .lede{margin:16px 0 0;font-size:clamp(16px,1.6vw,19px);max-width:56ch;text-align:left}
  /* nível 3: título de painel */
  /* nível 4: título de cartão */
  .sec-head + .sec-body{margin-top:clamp(32px,4vw,58px)}
  @media(max-width:900px){
    .sec-head{grid-template-columns:1fr;gap:12px}
    .sec-head .sh-label{padding-top:0}
  }

  /* ===================== HERO: UM ESTADO SÓ, E O MENU FIXO ==================
     O painel já nasce dentro da caixa: raio, traço e o respiro uniforme dos
     quatro lados valem desde o topo, e nada disso muda com o scroll. A hero não
     recua para a grade das outras seções e não compacta pro centro.
     Quem tem estados é só o menu, e são três: no topo da hero, rolando dentro
     dela, e depois dela (sobre as seções claras). Nos três ele é a mesma barra
     compacta, com vidro e desfoque: o que muda é a intensidade e a cor da
     camada, pra ele continuar legível quando o fundo troca de escuro pra claro.
     Quem escreve os estados são dois IntersectionObserver: um sentinela de 44px
     resolve a geometria e as seções declaram o tema sob a barra. Não há listener
     de scroll nem leitura de layout por evento.
     Prefixo .s2h- porque .hero, .nav, .num e .via já existem no site.css. */
  .s2h{
    /* a caixa VOLTOU (03/09, ordem da autora): mesmo inset, raio, traco e
       sombra de sempre. O que nao voltou foi o fundo .ink: dentro da caixa
       quem aparece e a mesma seda da pagina, clipada pelo raio. */
    --s2h-inset:clamp(6px,.9vw,12px);
    --s2h-r:clamp(20px,2.2vw,30px);
    --s2h-bw:1px;
    --s2h-bc:rgba(255,255,255,.18);
    --s2h-sh:0 26px 60px -46px rgba(16,24,40,.5);
    --s2h-pad:clamp(24px,4vw,58px);            /* respiro interno (texto e nav) */
    /* No topo da hero a barra não é caixa: é o logotipo, os links e a CTA soltos
       sobre o painel, ocupando a largura útil inteira. A caixa de vidro só entra
       quando a página rola (o .is-boxed logo abaixo). Os valores neutros ficam
       aqui, e não em `none`, para a ida e a volta interpolarem: `backdrop-filter`
       não transiciona de `none` para `blur()`. */
    --s2h-navblur:0px;
    --s2h-navsat:100%;
    /* O brilho fica neutro: a camada escura já dá corpo ao vidro sem clarear o
       shader por trás, preservando o contraste dos links nos dois fundos da
       hero. No estado claro, o ajuste específico continua logo abaixo. */
    --s2h-navbri:1;
    --s2h-dark-op:0;
    --s2h-light-op:0;
    --s2h-navpl:19px;                          /* respiro da barra até o logo */
    --s2h-navpr:19px;                          /* e até a CTA, o mesmo (rodada 2) */
    --s2h-navpy:8px;                           /* o piso vertical; a altura vem do min-height */
    --s2h-navh:72px;                           /* a altura da barra */
    --s2h-navr:36px;                           /* pílula plena (metade dos 72px): a caixa
                                                  conversa com a CTA, que sempre foi pílula.
                                                  Pedido da autora em 26/08 ("mais
                                                  arredondado"); era 16px. */
    /* A barra fica a este tanto do topo do PAINEL, e não da janela: por isso a
       conta soma o respiro da caixa. Antes eram 7px, e nessa distância ela
       encostava na curva do canto (o painel tem raio 30). */
    --s2h-navdotopo:clamp(20px,1.8vw,24px);
    --s2h-navtop:calc(var(--s2h-inset) + var(--s2h-navdotopo));
    --s2h-navmax:100%;                         /* solta no topo; compacta ao rolar */
    --s2h-gapw:clamp(16px,2.2vw,30px);         /* o vão entre logo, links e CTA */
    /* .84 e não .8: com o vidro mais presente da rodada 7 e a barra 17px mais
       baixa, os links precisavam desse degrau pra não ficarem abaixo do contraste
       medido na rodada 6, que é trava. */
    --s2h-navtx:rgba(255,255,255,.84);         /* cor dos links */
    --s2h-navtxh:var(--white);
    --s2h-navhov:rgba(255,255,255,.12);
    --s2h-ctabg:#fff;                          /* e a CTA, o único bloco com fundo próprio */
    --s2h-ctatx:var(--bg);
    --s2h-ease:.55s var(--ease-soft);
    --s2h-theme-ease:.3s cubic-bezier(.22,1,.36,1);
    position:relative;padding:var(--s2h-inset);
    /* O site.css dá `section{position:relative;z-index:1}` a toda seção, e isso
       cria contexto de empilhamento: sem subir o z-index daqui, a barra fixa
       (que vive dentro desta seção) ficaria presa no contexto da hero e as
       seções seguintes, também em z-index 1, passariam por cima dela. */
    z-index:60;
  }
  /* Momento 2: rolando dentro da hero. O painel não muda nada; o que muda é a
     camada da barra, que passa de um véu claro para um navy translúcido. É o
     conteúdo da hero (o H1 grande, claro) que passa por trás dela aqui, e o véu
     claro sozinho deixava a leitura suja. */
  .s2h.is-boxed{
    --s2h-navblur:24px;
    --s2h-navsat:145%;
    --s2h-navbri:1.01;
    --s2h-dark-op:1;
    --s2h-navmax:var(--s2h-natw,max-content);
  }
  /* Os espaçadores fazem a distribuição do estado solto: eles crescem e empurram
     os links para o centro da barra. O da esquerda leva ainda a diferença de
     largura entre a CTA e o logotipo, que é o que põe os links no centro exato e
     não só entre as duas pontas. Quando a barra compacta, eles voltam a ser um
     vão fixo, e como os dois estados são centrados no mesmo eixo, os links não
     mudam de lugar: a largura da caixa muda em volta deles. */
  .s2h .s2h-sp{flex-basis:0;flex-grow:1}
  .s2h .s2h-sp-e{flex-basis:var(--s2h-navdelta,0px);flex-grow:1}
  .s2h.is-boxed .s2h-sp,.s2h.s2h-medindo .s2h-sp{flex-basis:var(--s2h-gapw);flex-grow:0}
  .s2h.is-boxed .s2h-sp-e,.s2h.s2h-medindo .s2h-sp-e{flex-basis:calc(var(--s2h-gapw) + var(--s2h-navdelta,0px));flex-grow:0}
  /* O terceiro momento: a barra fixa passou da hero e está sobre as seções
     claras. Sem isto, o texto claro do estado rolado sumiria no branco. As cores
     saem dos tokens --light-* que a página já usa (a mesma família do .sec-light),
     e a CTA inverte: no escuro ela é o bloco branco, no claro é o bloco navy.
     O lockup escuro permanece nos dois momentos sobre a hero; ao chegar ao
     fundo claro entra a composição positiva, sem filtro nem recoloração. */
  /* is-light e so TEMA (cores de texto e CTA): desde que a hero virou clara
     ele liga ja no topo, e se trouxesse a caixa junto a barra nasceria
     compacta. A caixa (largura, veu, blur) e do is-boxed, que so vem com o
     scroll: solto no topo, encaixado depois (ordem da autora, 04/09). */
  .s2h.is-light{
    --s2h-navtx:var(--light-tx2);
    --s2h-navtxh:var(--light-tx);
    --s2h-navhov:rgba(16,24,40,.06);
    --s2h-ctabg:var(--bg);
    --s2h-ctatx:var(--white);
  }
  /* encaixada sobre tela clara, o veu e o claro (e nao o navy do is-boxed) */
  .s2h.is-boxed.is-light{
    --s2h-dark-op:0;
    --s2h-light-op:1;
  }
  /* o sentinela nao desenha nada: marca os 44px que separam os dois estados
     geometricos da hero. O tema de cor agora vem das secoes da pagina. */
  .s2h-cue{position:absolute;top:0;left:0;width:1px;height:44px;pointer-events:none}
  /* O traço é sombra interna, não `border`: assim ele entra e sai sem tirar 1px
     de cada lado da caixa (o painel não muda de tamanho por causa dele).
     A altura desconta os dois respiros, então respiro + painel fecha 100dvh nos
     dois estados e a página não salta na troca. */
  /* O fundo animado (WebGL2), de volta em 04/09 por ordem da autora, nas
     cores originais (navy, azul e teal dos tokens). Fica atras de tudo no
     painel e herda o raio. Enquanto nao sobe (sem WebGL2, ou movimento
     reduzido antes do primeiro quadro), o que se ve e o gradiente do .ink. */
  .s2h-bg{
    position:absolute;inset:0;width:100%;height:100%;display:block;
    border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .8s var(--ease-soft);
  }
  .s2h.tem-fundo .s2h-bg{opacity:1}
  @media(prefers-reduced-motion: reduce){.s2h-bg{transition:none}}
  .s2h-bgclip{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
  .s2h-panel{
    /* a caixa e o bloco navy do .ink, como sempre foi (a veste clara de
       04/09 durou uma rodada): o fundo, o raio e a sombra vem de la */
    display:flex;flex-direction:column;min-width:0;
    min-height:calc(100dvh - var(--s2h-inset) * 2);
    border-radius:var(--s2h-r);
    box-shadow:inset 0 0 0 var(--s2h-bw) var(--s2h-bc), var(--s2h-sh);
  }
  /* O conteúdo não é centralizado: ele fica ancorado do meio da tela pra baixo,
     alinhado à esquerda. É o ritmo das referências, e é o que deixa a curva de
     luz do fundo respirar na metade de cima. */
  .s2h-body{
    position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:flex-start;
    justify-content:flex-end;text-align:left;
    padding:clamp(104px,11vw,152px) var(--s2h-pad) clamp(38px,5vw,72px);
    transition:padding var(--s2h-ease);
  }
  /* ===================== A HERO OFICIAL =====================
     Uma coluna: titulo em duas linhas, subtitulo e os tres numeros na base. */
  .s2v-v2{display:flex;flex:1;width:100%;min-width:0}
  .s2v-t{margin:0;font-weight:600;color:var(--white);letter-spacing:-.035em;line-height:1.02}
  /* a palavra-chave do titulo: teal da marca, em COR SOLIDA. Gradiente em
     texto e reprovacao automatica no repo, entao o destaque e a cor e nada
     mais: sem sublinhado, sem peso extra, sem fundo. */
  .s2v-sub{margin:22px 0 0;line-height:1.5;color:rgba(255,255,255,.74)}
  .s2v-sub b{font-weight:600;color:rgba(255,255,255,.92)}

  /* ---- v2: o texto no terço de cima, os números na base ----
     O miolo distribui os dois blocos nas pontas (é o `space-between`), e é daí
     que vem o ar do meio: entre o fim do subtítulo e o começo dos números sobra
     a altura que a hero tiver. O texto e o subtítulo ficam num bloco só para que
     a distribuição enxergue dois grupos, e não três elementos soltos. */
  /* O bloco da v2 tem a altura do próprio conteúdo, e quem o centra na hero é o
     miolo. Se ele esticasse (flex:1) e distribuísse por conta própria, todo o ar
     que sobra iria parar num vão só, entre o subtítulo e os números. */
  .s2v-v2{flex-direction:column;justify-content:flex-start;flex:none}
  .s2v-texto{width:100%;min-width:0}
  /* Quem quebra as duas frases é a MEDIDA, não uma quebra fixada: assim elas
     partem sozinhas em qualquer largura. A regua foi refeita em 01/09, quando
     a copy da hero cresceu (o titulo foi de 30 para 68 caracteres e o
     subtitulo de 62 para 139): o corpo desceu e a medida abriu, para o titulo
     assentar em tres linhas e o subtitulo em tres, sem virar bloco de texto. */
  .s2v-v2 .s2v-t{
    font-size:clamp(40px,5.6vw,104px);white-space:normal;max-width:19ch;
    line-height:1.06;
    /* balance reparte as palavras entre as linhas em vez de encher cada uma
       ate o limite: sem ele a ultima linha ficava com uma palavra so */
    text-wrap:balance;
  }
  .s2v-v2 .s2v-sub{
    font-size:clamp(16px,1.25vw,25px);white-space:normal;max-width:46ch;
    margin-top:var(--v2-b);
  }
  /* Os vaos internos sao medidos em altura de janela, porque equilibram a
     coluna. Os dados seguem na base, e o bloco de texto deixa de
     ficar pendurado na barra. O respiro que sobra na coluna é repartido entre
     dois vãos elásticos, na proporção do --v2-r: um acima do título (o ::before)
     e outro entre o fim do texto e os números (a sobra que o .s2v-texto recebe
     por ser o único a crescer). Repartir em vez de fixar é o que faz o
     equilibrio sobreviver a qualquer altura de tela.
     Antes o de cima era fixo (--v2-a) e o de baixo comia toda a sobra pelo
     `margin-top:auto`, e o vazio empoçava no meio da hero.
     O padding de cima é `navdotopo + navh`, e não `navtop + navh`: o --s2h-navtop
     já embute o --s2h-inset, que é a margem do painel, e o .s2h-body começa
     depois dela. Somar os dois contava o inset duas vezes e sobrava um degrau
     fixo (12px em 1366) que entrava no vão de cima sem entrar na repartição. Num
     vão de 190px isso é ruído; num de 75px são 16%, e era o que empurrava a razão
     para 1,15 em tela curta. Com o degrau fora, a razão medida é o --v2-r em
     qualquer altura. Ele é um fio menor que 1 porque o centro óptico pede o texto
     um pouco acima do centro geométrico. */
  .s2h-body{
    --v2-a:clamp(28px,3.4vh,44px);    /* piso do vão de cima, para tela curta */
    --v2-e:clamp(52px,8.6vh,104px);   /* dos números até a borda de baixo */
    --v2-r:.95;                       /* vão de cima dividido pelo vão de baixo */
    justify-content:flex-start;
    padding-top:calc(var(--s2h-navdotopo) + var(--s2h-navh));
    padding-bottom:var(--v2-e);
  }
  .s2v-v2{flex:1}
  .s2v-v2::before{content:'';flex:var(--v2-r) 1 0;min-height:var(--v2-a)}
  .s2v-v2 .s2v-texto{flex:1 1 auto}
  /* A margem de base do .s2v-nums (que o antigo `margin-top:auto` escondia) sai
     daqui: no desktop quem separa o texto dos números é o vão elástico, e uma
     margem fixa por cima dele desequilibraria a razão. No toque a media query
     mais abaixo devolve o `auto` que empurra os números para a base. */
  .s2v-v2 .s2v-nums{margin-top:0}
  /* ---- os números dentro da hero ----
     Número e rótulo são texto solto sobre o fundo, separados por régua de 1px:
     nada de cartão em volta do dado, que é o que a página vem tirando rodada
     após rodada. A única caixa aqui é a do ícone, pequena, logo abaixo.
     O .stat entra porque o count-up do site.js só enxerga `.stat .n[data-count]`,
     e as linhas seguintes desfazem o que o .stat global traz de herança (centro,
     traço azul entre irmãos, Maven Pro e o brilho roxo atrás do número).
     O bloco de defs dos ícones não desenha nada e sai do fluxo. */
  .s2v-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
  /* As três colunas têm a largura do próprio conteúdo e se distribuem nas
     pontas: a primeira encosta na margem esquerda e a terceira na direita, em vez
     de as três dividirem a largura em partes iguais e sobrar um vazio grande
     depois da última. A régua continua sendo o traço à esquerda de cada coluna,
     então ela cai entre elas do mesmo jeito. */
  .s2v-nums{
    display:grid;grid-template-columns:repeat(3,max-content);justify-content:space-between;
    gap:clamp(14px,2vw,30px);width:100%;margin-top:clamp(52px,8.4vw,148px);
  }
  /* O dado se lê em duas linhas: a caixinha do ícone e o número lado a lado em
     cima, o rótulo embaixo ocupando as duas colunas. Vale em toda largura. */
  .s2v-num{
    display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:0 12px;
    text-align:left;padding-left:clamp(16px,2vw,30px);border-left:1px solid rgba(255,255,255,.2);
  }
  .s2v-num:first-child{padding-left:0;border-left:0}
  .s2v-num + .s2v-num::before{content:none}
  .s2v-l{grid-column:1 / -1}
  /* A caixinha do icone e neutra: o numero continua protagonista. */
  .s2v-icb{
    display:grid;place-items:center;width:36px;height:36px;border-radius:11px;
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  }
  .s2v-ic{display:block;width:19px;height:19px;fill:none;color:rgba(255,255,255,.66)}
  .s2v-num .n{
    font-family:'Manrope',sans-serif;font-size:clamp(30px,3.1vw,58px);font-weight:600;
    line-height:1;letter-spacing:-.03em;color:var(--white);text-shadow:none;
    /* Os dígitos são PROPORCIONAIS, e não tabulares. O tabular dava ao "1" a
       mesma caixa de um "5" (23,5px contra os 17,17px que ele pede), e como o
       glifo é estreito ele boiava no meio dela: medi 7px de vão de tinta depois
       do 1, contra 1 e 2px entre os outros dígitos. É o buraco que a autora
       apontou no "15".
       O que o tabular protegia continua protegido, e não por ele: quem impede a
       coluna de crescer durante a contagem é a largura reservada com o valor
       final, no `segurarContagem`. E ele protegia pouco: com a contagem indo de
       um para quatro dígitos, o "+" anda 70,45px em tabular contra 64,83px em
       proporcional, ou seja o tabular economizava 5,6px de um movimento que é
       de 65 de qualquer jeito. */
    font-variant-numeric:proportional-nums;
  }
  /* O proporcional resolve dois terços do buraco (o vão de tinta depois do 1 cai
     de 7,67px para 3,67px), mas os 2px que sobram são o sidebearing do próprio
     glifo: apertar o `letter-spacing` não adianta, porque ele move todos os
     pares junto e a DIFERENÇA fica travada em 2,0px (medi em -.03 e em -.035, e
     deu 2,0 nos dois). Então é ajuste manual no dígito, que é o que a autora
     pediu: os dois dados que começam com 1 puxam a primeira letra.
     O alvo é por `data-count`, e não por posição, porque o terceiro dado começa
     com 7 e não pode ser apertado. Durante a contagem o valor intermediário pode
     começar com outro dígito e levar o aperto por alguns quadros; no valor final,
     que é o estado parado que se lê, o dígito é sempre o 1. */
  .s2v-num .n[data-count="1500"]::first-letter,
  .s2v-num .n[data-count="150"]::first-letter{margin-right:-.035em}
  /* No desktop os três rótulos ficam em UMA linha, e isso é regra e não sorte:
     com a medida em `ch` e as colunas do tamanho do conteúdo, existia uma faixa
     de larguras em que o rótulo mais longo passava dos 30ch e quebrava sozinho,
     enquanto o mais curto continuava inteiro. O resultado eram três dados com
     alturas diferentes e as bases desencontradas (medi 1,2,2 em 1200 e em 1366).
     O `nowrap` tira a variável: os três medem uma linha em qualquer largura de
     desktop, e a soma das três colunas ocupa cerca de 46% da largura útil, então
     sobra folga. No toque a medida volta, porque lá cada dado tem a largura
     inteira e a quebra é a leitura certa. */
  .s2v-l{margin:10px 0 0;font-size:clamp(12.5px,.92vw,15px);line-height:1.4;color:rgba(255,255,255,.62);white-space:nowrap}

  /* No toque vale a regra da casa: compacta, nao esconde. As duas frases voltam
     a quebrar e os numeros viram uma coluna so, com a regua deitada. */
  @media(max-width:820px){
    .s2v-v2{justify-content:center}
    .s2v-v2 .s2v-t{
      white-space:normal;max-width:19ch;font-size:clamp(30px,8.1vw,44px);
      line-height:1.08;letter-spacing:-.03em;
    }
    .s2v-v2 .s2v-sub{white-space:normal;max-width:52ch;font-size:clamp(15.5px,4.2vw,18px)}
    /* No toque a coluna não sobra altura para repartir: a hero cresce com o
       conteúdo. Os dois vãos elásticos do desktop saem de cena e voltam os
       respiros fixos, com o de cima em padding e no mesmo valor de antes. */
    .s2h-body{padding-top:calc(var(--s2h-navtop) + var(--s2h-navh) + clamp(58px,10vh,120px))}
    .s2v-v2::before{display:none}
    .s2v-v2 .s2v-texto{flex:0 0 auto}
    .s2v-v2 .s2v-sub{margin-top:clamp(30px,4.4vh,44px)}
    /* No toque os números seguem colados na base pela margem automática, que é
       o que a hero de lá já fazia: a regra de desktop que zera esta margem tem a
       mesma especificidade. O antigo `clamp(34px,5vh,50px)` nunca chegou a
       valer: a
       antiga regra de desktop, mais específica, já impunha o `auto`.) */
    .s2v-v2 .s2v-nums{margin-top:auto}
    /* No toque os três dados empilham e a régua deita: o traço passa a ficar em
       cima de cada um, em vez de à esquerda. O arranjo de dentro do dado é o
       mesmo do desktop (caixinha à esquerda, número à direita, rótulo embaixo). */
    .s2v-nums{grid-template-columns:minmax(0,1fr);gap:0;margin-top:clamp(36px,10vw,52px)}
    .s2v-num{
      padding:16px 0 0;margin-top:16px;border-left:0;border-top:1px solid rgba(255,255,255,.16);
    }
    .s2v-num:first-child{padding-top:0;margin-top:0;border-top:0}
    .s2v-num .n{font-size:clamp(30px,8.6vw,38px)}
    .s2v-icb{width:32px;height:32px;border-radius:10px}
    .s2v-ic{width:17px;height:17px}
    .s2v-l{margin-top:8px;white-space:normal;max-width:none}
    .s2v-l{max-width:none}
  }

  /* ===================== A ENTRADA DA HERO =====================
     A hero entra coreografada, em quatro tempos: o ambiente (o fundo animado
     assentando e a barra descendo), o título palavra por palavra saindo de trás
     de uma linha, o subtítulo inteiro com um desfoque que resolve, e os três
     dados um a um. A contagem dos números é o quinto tempo, e quem a segura é o
     script, que agora espera o fim do terceiro dado.
     Três regras de ouro aqui:
       1. só `transform`, `opacity`, `filter` e `clip-path` animam, então não
          existe reflow e o layout não se mexe;
       2. o estado final é o padrão, e o estado inicial só existe quando o
          `data-entrada` está no <html>. Sem JS, sem `data-entrada`: o texto
          nasce visível e legível;
       3. cada etapa preserva o estado final como padrao do CSS.
     Os tempos vivem nas variáveis abaixo. A conta que importa: o último dado
     termina em 1950 + 2x160 + 800 = 3070ms, e é aí que a contagem começa. */
  :root{
    /* A curva: começo sem tranco (o primeiro ponto quase não inclina) e cauda
       longa (o segundo encosta no fim), que é o que faz o movimento parecer que
       está chegando em vez de se exibindo. */
    --e-ease:cubic-bezier(.2,0,0,1);
    --e-amb:1800ms;                       /* o fundo assentando */
    --e-barra:600ms;                      /* a barra, que fecha antes do título */
    --e-t0:620ms;    --e-tw:900ms;   --e-tstep:58ms;    /* título, por palavra */
    --e-sub0:1500ms; --e-subd:1000ms;                   /* subtítulo */
    --e-num0:1950ms; --e-numd:800ms; --e-numstep:160ms; /* os três dados */
    --e-rotulo:160ms;                                   /* o rótulo, atrás do número */
    /* As distancias sairam dos keyframes e viraram tokens da hero oficial. */
    --e-distbarra:-6px;                   /* a barra desce */
    --e-distsub:8px;                      /* o subtítulo sobe */
    --e-dist:10px;                        /* o campo e os dados sobem */
    --e-distpalavra:118%;                 /* a palavra, atrás da máscara */
  }
  /* ---- o vocabulario de movimento da hero ----
     A autora escolheu uma referência e pediu "as mesmas transições". O que a
     referência tem de próprio não é a ordem das peças (essa é dela e não muda):
     é a QUALIDADE do movimento. Três coisas, e só elas mudam aqui:
     1. a curva vira easeOutQuint: dispara rápido e passa a maior parte do tempo
        assentando, que é o que faz o movimento parecer caro em vez de apressado;
     2. as durações dobram, para a faixa de 1200 a 1800ms;
     3. o deslocamento deixa de ser em px e passa a ser metade da altura da
        própria peça, então cada uma entra na medida do que ela é.
     Os dois tempos que a autora fechou (o passo de 160ms da
     escada e o rótulo 160ms atrás do número) não aparecem aqui, justamente
     porque não se reabrem.
     A palavra do título é a única exceção à regra dos 50%: ela sobe atrás de uma
     máscara, e 118% é o mínimo que a esconde por inteiro. Baixar para 50%
     deixaria meia palavra visível e parada no primeiro quadro, o que desmancha a
     revelação que a autora aprovou. O valor já era proporcional à peça. */
  :root{
    --e-ease:cubic-bezier(.22,1,.36,1);
    --e-barra:1200ms;
    --e-tw:1400ms;
    --e-subd:1300ms;
    --e-numd:1200ms;
    --e-distbarra:-50%;
    --e-distsub:50%;
    --e-dist:50%;
    /* O subtítulo passou a esperar o TÍTULO fechar, em vez de entrar por cima
       dele: a autora pediu a sequência, e a sobreposição de 520ms que havia
       fazia as duas frases dividirem o mesmo instante. O fim do título é uma
       conta, não um número cravado: a última das nove palavras começa em
       `t0 + 8 * tstep` e dura `tw`. Assim, mexer na cascata do título arrasta o
       resto sem ninguém precisar recalcular nada.
       O campo e os dados guardam a defasagem que tinham para o subtítulo (300ms
       e 450ms), então a ordem e o ritmo do conjunto são os mesmos: só a
       sequência inteira desceu no tempo. */
    --e-tfim:calc(var(--e-t0) + 8 * var(--e-tstep) + var(--e-tw));
    --e-sub0:var(--e-tfim);
    --e-num0:calc(var(--e-sub0) + 300ms);   /* o valor do antigo estado sem e-mail */
  }
  :root{--v2-b:clamp(32px,4.7vh,52px)}
  /* a caixa que recorta o canvas enquanto ele assenta */

  /* As distâncias são curtas de propósito: com o tempo alongado, deslocamento
     grande lê como arrastado, e deslocamento pequeno lê como suave. */
  @keyframes s2vBarra{from{opacity:0;transform:translateY(var(--e-distbarra))}to{opacity:1;transform:none}}
  @keyframes s2vBarraVidro{from{opacity:0}to{opacity:1}}
  /* A palavra sobe do próprio bloco. Os 118% não são distância percebida: só o
     fim do trajeto aparece, e o resto está atrás da máscara. É o mínimo que
     esconde a palavra inteira, contando a folga que o recorte deixa embaixo. */
  @keyframes s2vPalavra{from{transform:translateY(var(--e-distpalavra))}to{transform:none}}
  @keyframes s2vSub{
    from{opacity:0;transform:translateY(var(--e-distsub));filter:blur(5px)}
    to{opacity:1;transform:none;filter:blur(0)}
  }
  @keyframes s2vDado{from{opacity:0;transform:translateY(var(--e-dist))}to{opacity:1;transform:none}}
  /* o rótulo não sobe: ele só resolve, atrás do número da mesma coluna */
  @keyframes s2vRotulo{from{opacity:0}to{opacity:1}}

  /* A máscara de cada palavra. O recorte desce 0,16em abaixo da caixa porque o
     H1 tem entrelinha apertada (1,02) e a perna do "g" passa da borda: sem essa
     folga ela sairia cortada com o texto já parado. É `clip-path` e não
     `overflow:hidden` de propósito, porque overflow em inline-block muda a linha
     de base e desalinharia as palavras entre si. */
  .s2v-w{display:inline-block;clip-path:inset(-.6em 0 -.14em 0)}
  .s2v-w > span{display:inline-block;will-change:transform}

  /* A entrada da barra anima o CONTEÚDO dela, e nunca a caixa nem qualquer
     ancestral do .s2h-island. O motivo é duro: o island é quem carrega o
     backdrop-filter, e transform num ancestral faz o desfoque passar a amostrar
     o próprio pai (transparente) em vez da página atrás, ou seja, o vidro morre.
     Pior: com `fill-mode:both` o transform fica retido depois do fim (medi
     `matrix(1,0,0,1,0,0)` no nav, que não é `none`), então o vidro ficava
     quebrado para sempre, e não só durante a entrada.
     Como no topo a barra não tem caixa nenhuma, animar os três elementos dá
     exatamente o mesmo efeito, sem tocar em quem faz o vidro. */
  @keyframes s2vAmbiente{from{opacity:0;transform:scale(1.028)}to{opacity:1;transform:none}}
  [data-entrada] .s2h-bgclip{animation:s2vAmbiente var(--e-amb) var(--e-ease) both}
  [data-entrada] .s2h-island > :not(.s2h-glass){animation:s2vBarra var(--e-barra) var(--e-ease) backwards}
  [data-entrada] .s2h-glass{animation:s2vBarraVidro var(--e-barra) var(--e-ease) backwards}

  [data-entrada] .s2v-v2 .s2v-w > span{
    animation:s2vPalavra var(--e-tw) var(--e-ease) both;
    animation-delay:calc(var(--e-t0) + var(--w) * var(--e-tstep));
  }
  [data-entrada] .s2v-v2 .s2v-sub{
    animation:s2vSub var(--e-subd) var(--e-ease) var(--e-sub0) both;
  }
  [data-entrada] .s2v-v2 .s2v-num{
    /* `backwards` pelo mesmo motivo do campo: o transform retido pelo `both`
       matava o vidro da caixinha do ícone (o `.s2v-icb`), que é descendente. */
    animation:s2vDado var(--e-numd) var(--e-ease) backwards;
    animation-delay:calc(var(--e-num0) + var(--d) * var(--e-numstep));
  }
  /* O rótulo da coluna entra depois do número dela: mesma duração, atraso maior.
     Como a opacidade dele multiplica a do bloco, ele termina de aparecer os
     180ms depois, que é a defasagem pedida. */
  [data-entrada] .s2v-v2 .s2v-l{
    animation:s2vRotulo var(--e-numd) var(--e-ease) both;
    animation-delay:calc(var(--e-num0) + var(--d) * var(--e-numstep) + var(--e-rotulo));
  }
  /* Cada número existe e é lido desde o começo, mas fica sem caixa até a coluna
     dele entrar: é assim que o count-up do site.js, que dispara por interseção,
     espera a vez de cada um. Como a espera é por DADO, e não pelo bloco inteiro,
     as três contagens começam uma depois da outra, no compasso da escada, e o
     número já aparece contando em vez de aparecer parado.
     O script trava a altura de cada dado nesse intervalo, então o 1px de
     diferença do texto solto não vira salto de layout. */
  .s2v-num.s2v-esperando .n{display:contents}

  /* Sem movimento, nada anima: tudo já está no lugar no primeiro quadro, e a
     contagem não é segurada (isso o script também respeita). */
  @media(prefers-reduced-motion: reduce){
    [data-entrada] .s2h-bgclip,
    [data-entrada] .s2h-island > :not(.s2h-glass),
    [data-entrada] .s2h-glass,
    [data-entrada] .s2v-v2 .s2v-w > span,
    [data-entrada] .s2v-v2 .s2v-sub,
    [data-entrada] .s2v-v2 .s2v-num,
    [data-entrada] .s2v-v2 .s2v-l{animation:none !important}
  }

  /* ===================== NAV: vidro adaptativo em camadas =====================
     A barra atravessa o painel de ponta a ponta (é a anatomia da referência), e
     não uma pílula do tamanho do conteúdo: a largura vem do layout, não de
     medição em JS. A margem lateral dela é o respiro interno do painel menos o
     respiro da própria barra, então o logo cai exatamente na prumada do H1.
     Três colunas (1fr auto 1fr) põem o logo na ponta esquerda, a CTA na direita
     e a pílula dos links no centro exato da barra, sem compensação nenhuma.
     "Compacto" aqui é a altura: a barra continua fina. */
  .s2h-nav{
    position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;
    backdrop-filter:none;border-bottom:0;
    padding:var(--s2h-navtop) calc(var(--s2h-inset) + var(--s2h-pad) - var(--s2h-navpl));
  }
  /* A barra é compacta nos três momentos: a largura é a do próprio conteúdo, e
     não muda com o scroll. Os dois espaçadores dão o vão entre logo, links e
     CTA; o da esquerda carrega ainda a diferença de largura entre a CTA e o logo
     (--s2h-navdelta), que é o que põe os links no centro exato da barra, e não
     só entre as duas pontas.
     O traço é sombra interna, não `border`: assim ele muda de cor entre os
     momentos sem tirar 1px de cada lado da caixa. */
  .s2h-island{
    position:relative;display:flex;align-items:center;margin-inline:auto;
    width:100%;max-width:var(--s2h-navmax);min-height:var(--s2h-navh);
    padding:var(--s2h-navpy) var(--s2h-navpr) var(--s2h-navpy) var(--s2h-navpl);
    border-radius:var(--s2h-navr);border:0;
    background:transparent;isolation:isolate;
    transition:max-width var(--s2h-ease);
  }
  /* O vidro e IRMAO do conteudo da barra, nunca ancestral do dropdown. Assim o
     backdrop do painel continua sendo a pagina mesmo quando a barra tambem
     desfoca. O diagnostico desta rodada encontrou transform:none em todos os
     ancestrais: o backdrop-filter no proprio .s2h-island era o backdrop root
     que confinava a amostra do dropdown a pilula. */
  .s2h-glass{
    position:absolute;z-index:-1;inset:0;border-radius:inherit;pointer-events:none;
    backdrop-filter:blur(var(--s2h-navblur)) saturate(var(--s2h-navsat)) brightness(var(--s2h-navbri));
    -webkit-backdrop-filter:blur(var(--s2h-navblur)) saturate(var(--s2h-navsat)) brightness(var(--s2h-navbri));
  }
  .s2h-glass::before,.s2h-glass::after{
    content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;
    background-clip:padding-box;pointer-events:none;will-change:opacity;
    transition:opacity var(--s2h-theme-ease);
  }
  .s2h-glass::before{
    opacity:var(--s2h-dark-op);background:rgba(6,12,34,.62);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 24px 54px -34px rgba(4,8,31,.88),0 5px 15px -12px rgba(4,8,31,.68);
  }
  .s2h-glass::after{
    opacity:var(--s2h-light-op);background:rgba(255,255,255,.72);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.76),0 18px 46px -30px rgba(16,24,40,.38),0 4px 12px -10px rgba(16,24,40,.16);
  }
  .s2h-island .logo{flex:none;min-height:44px;display:grid;place-items:center}
  /* A barra tem uma peça de marca só, em qualquer largura: o logotipo horizontal
     (símbolo mais a palavra Marvee). Não existe versão só-símbolo aqui, nem
     troca por breakpoint.
     São dois arquivos oficiais, um para cada fundo: a duotone teal nos dois
     momentos escuros (wordmark branco) e a positiva colorida no terceiro, onde a
     barra fica branca e o wordmark branco sumiria (corpo #3a506b, ponta teal).
     As duas ficam empilhadas na mesma célula de grid e trocam por opacidade, não
     por display: assim nenhuma sai do DOM, as duas já vêm baixadas (o preload
     está no site2.astro) e a troca não pisca no meio do scroll.
     [CHECK] A proporção interna aqui NÃO é a do lockup oficial: a autora pediu a
     palavra maior em relação ao símbolo, então o conjunto é composto com as duas
     peças oficiais, cada uma escalada por conta. Pendente de validação do design.
     As contas, todas medidas nos próprios arquivos:
       o desenho ocupa 53,04% da altura do viewBox no símbolo teal, 54,99% no
       símbolo colorido e 44,56% na palavra (os arquivos têm margem interna, e ela
       é diferente em cada um, por isso as alturas de <img> não batem entre si);
       a margem lateral vale 24,35% da altura do <img> no símbolo e 27,72% na
       palavra, e é ela que a margem negativa cancela;
       o vão do lockup oficial é 13,49% da altura do símbolo (39 unidades para um
       símbolo de 289), e é essa razão que a composição reproduz.
     O resultado: símbolo com 26px de desenho, palavra com 17,4px (a mesma de
     antes), razão de 0,67 e vão de 3,5px. */
  .s2h-island .logo .s2h-lock{
    grid-area:1/1;display:flex;align-items:center;
    transition:opacity .35s var(--ease-soft);
  }
  .s2h-island .logo img{width:auto;display:block;flex:none}
  /* 26 / 0,5304 e 26 / 0,5499: as duas versões do símbolo têm margem interna
     diferente, então a altura de <img> muda para o desenho sair igual nas duas */
  .s2h-lock-escuro .s2h-sim{height:49.02px}
  .s2h-lock-claro .s2h-sim{height:47.28px}
  .s2h-lock .s2h-tipo{height:39.05px}            /* 17,4 / 0,4456 */
  /* o vão de 3,5px menos as duas margens internas que se encostam */
  .s2h-lock-escuro .s2h-tipo{margin-left:-19.26px}
  .s2h-lock-claro .s2h-tipo{margin-left:-17.83px}   /* 1px a mais: medi o vão por pixel nos dois estados */
  /* a área transparente que sobra em cima e embaixo do símbolo não pode empurrar
     a barra: ela vale (49,02 - 26) / 2 no escuro e (47,28 - 26) / 2 no claro */
  .s2h-lock-escuro .s2h-sim{margin-block:-11.51px}
  .s2h-lock-claro .s2h-sim{margin-block:-10.64px}
  .s2h-lock .s2h-tipo{margin-block:-10.83px}     /* (39,05 - 17,4) / 2 */
  .s2h-island .s2h-lock-claro{opacity:0}
  .s2h.is-light .s2h-island .s2h-lock-escuro{opacity:0}
  .s2h.is-light .s2h-island .s2h-lock-claro{opacity:1}
  @media(prefers-reduced-motion: reduce){.s2h-island .logo .s2h-lock{transition:none}}
  .s2h-sp{flex-grow:0;flex-shrink:0;flex-basis:var(--s2h-gapw)}
  .s2h-sp-e{flex-basis:calc(var(--s2h-gapw) + var(--s2h-navdelta,0px))}
  /* Os seis itens ficam soltos sobre a barra, sem camada nenhuma atrás. Como
     era em parte a caixa que os separava, o vão entre eles abriu (2px de gap
     viraram 8px) e o respiro vertical de cada um voltou aos 9px: o alvo de toque
     continua confortável e o menu não lê como um bloco só. */
  .s2h-links{
    display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:600;
  }
  .s2h-links a{
    color:var(--s2h-navtx);padding:9px 13px;border-radius:99px;white-space:nowrap;
    transition:background .2s, color .2s;
  }
  .s2h-links a:hover{color:var(--s2h-navtxh);background:var(--s2h-navhov)}
  /* ---- submenus: o mega-menu do site.css, adaptado a esta barra ----
     O componente inteiro vem de lá (.mm-item, .mm-trigger, .mm-caret, .mm-panel,
     .mm-cols, .mm-col, .mm-lbl). O que se ajusta aqui é o que o global crava e
     não serve nesta página: a família (Maven Pro na mão, no gatilho e nos itens)
     e a cor do gatilho, que precisa seguir a mesma variável dos outros links da
     barra pra funcionar nos três momentos, inclusive sobre o fundo claro. */
  .s2h-links .mm-item{position:relative}
  .s2h-links .mm-trigger{
    font-family:'Manrope',sans-serif;font-size:14px;font-weight:600;
    color:var(--s2h-navtx);opacity:1;padding:9px 13px;border-radius:99px;
    transition:background .2s, color .2s;
  }
  .s2h-links .mm-trigger:hover,
  .s2h-links .mm-trigger[aria-expanded="true"]{color:var(--s2h-navtxh);background:var(--s2h-navhov)}
  .s2h-links .mm-trigger:focus-visible{outline:2px solid var(--s2h-navtxh);outline-offset:3px}
  .s2h-links .mm-caret{width:14px;height:14px}
  .s2h-links .mm-trigger[aria-expanded="true"] .mm-caret{transform:rotate(180deg)}
  /* o painel abre abaixo da barra e não pode encostar nela */
  .s2h-links .mm-panel{top:calc(100% + 14px);transform:translateX(-50%) translateY(6px)}
  .s2h-links .mm-panel.open{transform:translateX(-50%) translateY(0)}
  .s2h-links .mm-panel{
    background:rgba(6,12,34,.88);border-color:rgba(255,255,255,.16);
    backdrop-filter:blur(24px) saturate(1.35);-webkit-backdrop-filter:blur(24px) saturate(1.35);
    box-shadow:0 30px 72px -28px rgba(0,0,0,.76),inset 0 1px 0 rgba(255,255,255,.06);
    transition:opacity .28s var(--ease-soft),transform .28s var(--ease-soft),background-color var(--s2h-theme-ease),border-color var(--s2h-theme-ease);
  }
  .s2h-links .mm-panel a{
    font-family:'Manrope',sans-serif;color:rgba(255,255,255,.82);
    display:flex;align-items:center;gap:7px;white-space:nowrap;
  }
  .s2h-links .mm-panel a:hover{color:#fff;background:rgba(255,255,255,.06)}
  .s2h-links .mm-lbl{font-family:'Manrope',sans-serif}
  .s2h.is-light .s2h-links .mm-panel{
    background:rgba(255,255,255,.9);border-color:rgba(255,255,255,.92);
    box-shadow:0 28px 66px -32px rgba(16,24,40,.38),inset 0 1px 0 #fff;
  }
  .s2h.is-light .s2h-links .mm-panel a{color:var(--light-tx2)}
  .s2h.is-light .s2h-links .mm-panel a:hover{color:var(--light-tx);background:rgba(16,24,40,.055)}
  .s2h.is-light .s2h-links .mm-lbl{color:var(--light-mut)}
  /* a seta diagonal marca o link que sai desta página; quem não tem seta é
     âncora daqui mesmo */
  .s2h-fora{width:12px;height:12px;flex:none;opacity:.5}
  .s2h-links a:focus-visible,.s2h-cta:focus-visible{outline:2px solid var(--s2h-navtxh);outline-offset:3px}
  /* A CTA sobe de 38 para 46px de altura: ela herdava o .btn-sm do global, que
     serve as outras 51 páginas e não se toca, então o ajuste é local. O padding
     lateral acompanha na mesma proporção (18 -> 22px, a razão de 0,474 que ela
     já tinha), senão a pílula engorda em altura e fica achatada.
     Os 46px cabem dentro dos 72px da barra, então o --s2h-navh NÃO muda e o eixo
     vertical da hero não se mexe. O raio já era maior que a metade da altura, e
     continua pílula.
     O padding lateral é `clamp` e não número fixo por causa de um defeito velho
     que não é desta frente: por volta de 900px a barra já estoura, e os 4px a
     mais de cada lado pioravam o estouro em 16px. Com o clamp, ele vale 22px nas
     larguras em que sobra espaço e volta aos 18px de antes onde não sobra, então
     a altura nova entra em toda largura sem piorar o que já estava quebrado. */
  .s2h-cta{
    flex:none;font-weight:600;white-space:nowrap;
    min-height:46px;padding:12px clamp(18px,1.53vw,22px);border-radius:99px;
    display:inline-flex;align-items:center;
    background:var(--s2h-ctabg);border:1px solid var(--s2h-ctabg);color:var(--s2h-ctatx);
    transition:background-color .3s var(--ease-soft),border-color .3s var(--ease-soft),color .3s var(--ease-soft),transform .2s;
  }
  .s2h-cta:hover{transform:translateY(-1px);opacity:.92}

  /* Abaixo de 1241px os seis itens e a CTA deixam de caber com o respiro da
     pílula. A barra passa a mostrar o lockup e o botão de menu, e os links
     passam a viver na gaveta (o .nav-drawer que o site.css já tem, montado no
     script desta página a partir destes mesmos elementos, sem duplicar markup).
     Assim nenhum item ou a CTA escapa da curva nas larguras intermediárias. */
  .s2h-burger{display:none;flex:none}
  /* No terceiro momento a barra fica branca, e o botão de menu que vem do
     site.css tem os três traços em #fff cravado: sem isto ele some sobre o
     claro. A cor passa a ser a mesma variável do texto da barra, então os três
     momentos ficam coerentes, e a caixa dele ganha o traço claro do sistema. */
  .s2h.is-light .s2h-burger{border-color:var(--light-line2);background:rgba(16,24,40,.04)}
  .s2h.is-light .s2h-burger span{background:var(--s2h-navtx)}
  @media(max-width:1240px){
    .s2h,.s2h.is-boxed,.s2h.s2h-medindo{--s2h-navpl:15px;--s2h-navpr:15px;--s2h-gapw:16px;--s2h-navmax:100vw}
    .s2h-island{flex-wrap:nowrap}
    .s2h-sp,.s2h-sp-e{flex-basis:0;flex-grow:1}
    .s2h-links,.s2h-cta{display:none}
    .s2h-burger{display:flex;margin-left:auto}
  }
  @media(max-width:820px){
    /* No toque o conjunto deixa de ficar ancorado na base: com a barra ocupando
       só 60px, sobra tela em cima, e o bloco centrado no espaço livre acaba com o
       vazio enorme que existia acima do título. O padding de cima é a altura da
       barra mais o respiro dela, pra nada encostar. */
    .s2h-body{
      justify-content:center;
      padding-top:calc(var(--s2h-navh) + var(--s2h-navdotopo) + 24px);
      padding-bottom:clamp(28px,7vw,44px);
    }
    /* no toque as duas frases voltam a quebrar: uma linha só é impossível aqui */
    .s2h-t{line-height:1.06;letter-spacing:-.032em;white-space:normal;max-width:20ch}
    .s2h-sub{white-space:normal;max-width:52ch}
    /* aqui a barra volta a ocupar a faixa: com dois elementos só, a largura de
       conteúdo deixaria uma pílula de 103px boiando no meio da tela. O símbolo
       fica na ponta esquerda e o botão de menu na direita, que é o que o desenho
       pede e o que todo nav de celular faz. */
    .s2h{--s2h-navpl:14px;--s2h-navpr:10px;--s2h-navpy:9px;--s2h-navh:60px;--s2h-navr:30px;--s2h-navmax:100vw}
  }

  /* A gaveta reusa o componente global (.nav-drawer, .nd-backdrop, .nd-panel,
     .nd-back, .nd-cta): ele já entra da direita, já tem o fundo com desfoque e já
     trata movimento reduzido. O que se ajusta aqui é o que o global não cobre: a
     família (o .nd-panel crava a fonte antiga na mão) e a CTA, que nesta página é
     o mesmo botão branco da barra. */
  #s2hGaveta .nd-panel{
    font-family:'Manrope',sans-serif;color:#fff;
    background:rgba(6,12,34,.9);border-left-color:rgba(255,255,255,.15);
    box-shadow:-28px 0 72px -34px rgba(0,0,0,.78);
    backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);
  }
  #s2hGaveta .nd-panel a:not(.nd-cta){font-family:'Manrope',sans-serif;font-weight:600}
  #s2hGaveta .nd-cta{
    background:#fff;border:1px solid #fff;color:var(--bg);font-weight:600;
    border-radius:99px;padding:13px 20px;
  }
  #s2hGaveta .nd-cta:hover{background:rgba(255,255,255,.9);border-color:rgba(255,255,255,.9)}
  html[data-current-nav-theme="light"] #s2hGaveta .nd-panel{
    color:var(--light-tx);background:rgba(255,255,255,.9);
    border-left-color:rgba(255,255,255,.92);
    box-shadow:-26px 0 70px -34px rgba(16,24,40,.34);
    backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);
  }
  html[data-current-nav-theme="light"] #s2hGaveta .nd-panel a:not(.nd-cta),
  html[data-current-nav-theme="light"] #s2hGaveta .nd-group-head{color:var(--light-tx2);border-bottom-color:rgba(16,24,40,.08)}
  html[data-current-nav-theme="light"] #s2hGaveta .nd-sub a{color:var(--light-tx2) !important}
  html[data-current-nav-theme="light"] #s2hGaveta .nd-sub .nd-lbl{color:var(--light-mut)}
  html[data-current-nav-theme="light"] #s2hGaveta .nd-back{color:var(--light-tx);background:rgba(16,24,40,.045);border-color:rgba(16,24,40,.1)}
  html[data-current-nav-theme="light"] #s2hGaveta .nd-cta{background:var(--bg);border-color:var(--bg);color:#fff}
  @media(max-width:520px){
    /* o logotipo não encolhe aqui: a altura é a mesma 26px de qualquer largura,
       e a folga até o botão de menu foi medida (sobram 219,3px em 390, e a barra
       não transborda em nenhuma largura de 320 a 820) */
    .s2h-links{font-size:12.5px;gap:4px}
    .s2h-links a{padding:7px 8px}
  }

  /* Com a barra fixa, todo alvo de âncora precisa parar abaixo dela: são os
     sete da página, e a conta é a altura da barra mais a distância dela até o
     topo, mais um respiro. O .skip-link do site.css já vive em z-index 9999,
     acima da barra (60), então continua aparecendo inteiro ao receber foco. */
  #main,#empresa,#tecnologia,#servicos,#terceirizacao,#educacao,#quem,#contato{
    scroll-margin-top:calc(var(--s2h-navtop, 19px) + var(--s2h-navh, 72px) + 18px);
  }
  /* a mesma conta da barra, repetida aqui porque as seções de âncora vivem fora
     da .s2h e não herdam as variáveis dela */
  :root{--s2h-navtop:calc(clamp(6px,.9vw,12px) + clamp(20px,1.8vw,24px));--s2h-navh:72px}
  @media(max-width:820px){:root{--s2h-navh:60px}}

  /* Sem movimento: os dois estados do nav continuam existindo e corretos, o que
     sai é a interpolação entre eles. */
  @media(prefers-reduced-motion: reduce){
    .s2h,.s2h-panel,.s2h-nav,.s2h-island,.s2h-glass::before,.s2h-glass::after,.s2h-sp,.s2h-cta{transition:none}
  }
  /* enquanto o JS mede a barra (e no primeiro quadro da página) nada anima */
  .s2h.s2h-sem-transicao,.s2h.s2h-sem-transicao *{transition:none !important}

  /* ===================== A PROMESSA (segunda dobra) =====================
     O título de display e a cena do organismo. */
  /* O título ocupa a largura útil da dobra, sem a coluna de etiqueta: ele é a
     única frase da dobra e o display é o argumento. */
  /* Diagramado ao CENTRO, por pedido da autora: texto centralizado e o bloco
     centrado na largura útil. A dobra não tem etiqueta lateral (ela saiu quando
     a dobra virou título e cena), então não houve o que reacomodar na grade.
     A medida é o que segura a quebra: com texto centrado, linhas de larguras
     muito diferentes ficam tortas, e uma linha órfã de uma palavra fica pior
     ainda. É percentual e não `ch` porque o corpo do título é `clamp` em vw:
     medida em ch anda em passos diferentes do corpo e a quebra vira loteria
     por largura. RECALIBRADO para a copy de 27/08 («Uma experiência integrada
     para transformar a sua empresa.», 8 palavras): 82% + text-wrap:balance
     medem 4/4 em 1366, 1440 e 1728 (duas linhas de mesmo peso); no toque o
     bloco toma a largura inteira e o balance fecha 2/2/2/2 de 320 a 430 e
     3/2/3 em 520. Zero órfãs em todas as larguras medidas. O corpo não muda:
     encolher a fonte também resolveria, mas custaria o display, que é o
     argumento da dobra. */
  .s2p-t{
    margin:0 auto;max-width:82%;text-align:center;text-wrap:balance;
    font-size:clamp(34px,4.5vw,64px);line-height:1.12;
    letter-spacing:-.032em;font-weight:600;color:var(--light-tx);
  }
  @media(max-width:520px){
    .s2p-t{max-width:100%}
  }
  /* O efeito só existe com [data-entrada] (JS ligado e movimento permitido):
     sem ele a regra não se aplica e a palavra fica em opacity 1, que é o
     estado final. Cada palavra acende na sua janela de 1/n do progresso:
     clamp segura as vizinhas em 0,2 antes da vez e em 1 depois dela.
     A opacidade anda com --p, que o script escreve UMA vez por quadro no h2. */
  [data-entrada] .s2p-t .s2p-w{
    opacity:clamp(.2, .2 + (var(--p, 1) * var(--n) - var(--i)) * .8, 1);
  }
  /* ---- a cena: o ECOSSISTEMA (box gigante em fluxo por scroll) ----
     O simbolo sobre camadas que respiram e o feixe descendo por scroll FICAM
     (rodadas 1 e 2, com a lapidacao do 4f77fb4 preservada). O destino do fio
     passa a ser diretamente o topo da BOX. Abaixo, uma unica caixa atravessa
     as tres vertentes e mantem os 12 topicos em fluxo normal.

     DECISOES DE DESENHO (carregam o conceito, nao sao ajuste livre):
     1. O fio anda com o SCROLL e regride; o encadeamento com o titulo e por
        construcao (--q parte de onde --p fecha). Nao trocar por delay.
     2. O PALCO do fio tem aspect-ratio fixo e a box e fluxo colado na base
        dele: as nove linhas terminam na borda de baixo do palco, que E o topo
        da box. Cada vertente ocupa um trio de ancoras nessa borda.
     3. O SIMBOLO e o arquivo oficial em <img>, sem filtro, sem clip. A camada
        EXTERNA do suporte nao anima transform (a base dela e a ancora do fio).
     4. TOPICO ATIVO POR SCROLL, NAO IntersectionObserver. A regua usa
        clientHeight/clientWidth e cada passo do runway corresponde a um
        topico. Rolando para tras, o indice regride pela mesma funcao.
     5. NENHUM ancestral do painel pode ganhar overflow:hidden: mata o sticky.
     6. Um unico painel atravessa os 12 topicos e as tres vertentes. O ultimo
        permanece por um passo inteiro; entao o sticky solta e entrega a dobra
        seguinte, sem captura de wheel ou scroll lock.
     7. A troca e VERTICAL e bidirecional: avancando, o atual sobe e o proximo
        assenta de baixo; voltando, o eixo se inverte. Duracoes ficam entre
        300 e 600ms e usam a curva da casa.
     8. Os palcos dos topicos sao MOTIVOS abstratos do vocabulario da casa
        (padrao do #355): marcadores do que a animacao precisa dizer, nao a
        arte final. Nada de foto inventada.
     9. A lista da vertente corrente e o indicador de progresso: o item ativo
        expande descricao e link, os demais preservam numero, icone e titulo.
        Nao existe linha central nem contagem paralela.
    10. Reduced-motion e mobile <= 900px nao pinam: os 12 topicos ficam
        empilhados e acessiveis em fluxo natural. O trio ativo continua sendo
        decidido pela vertente que cruza a linha central da tela.

     A caixa usa #E9EDF6 (adendo de 27/08: o #EAEFEF puxava teal ao lado do
     entorno azul; mesma luminancia medida, 0,846 vs 0,855, base azulada): um
     degrau de destaque sobre #F2F2F2 sem virar painel branco solto. Texto e links mantem contraste AA medido. */
  /* o tom da dobra: sobe UM tom quando a linha conecta (.ligada na section).
     Os tokens vivem NA SECTION (nao no .s2p-eco: ancestral nao herda de
     descendente, e foi assim que a primeira versao nao aplicava nada).
     Leva de 27/08: a familia de detalhes migrou de teal para AZUL institucional
     (--blue #3972FD vivo, #2B55D4 como tinta com contraste 5,6:1 medido);
     o tom ligado vira sussurro de azul. Os alfas ficaram como estavam. */
  /* ===== O ESQUEMA ESCURO (referencia SparkAI, adaptada): o topo inteiro
     permanece no claro da pagina. O ambiente navy so nasce depois do fim da
     conexao e percorre uma rampa vertical continua ate firmar na base. Nao ha
     radial no topo nem contorno lateral: titulo e simbolo ficam no claro
     pleno, enquanto a caixa encontra o navy conforme o scroll avanca.
     A cor: --noite E O NAVY OFICIAL da casa via token --bg (decisao da
     autora: o degrade vai do branco ao azul escuro da pagina do Hub; o
     "sem azul" valia so para o tom da conexao). */
  #empresa{
    --dobra-bg-base:#F2F2F2;
    --dobra-bg-ligada:#F3F6FB;
    --noite:var(--bg,#04081F);
    /* A TRANSICAO LUMINAI (adendo 27/08, substitui a receita 21st.dev):
       tres zonas invertidas: claro quase branco -> AZUL VIVO LUMINOSO
       (#2E6BFF) com a BANDA DE HORIZONTE curva -> navy profundo. Ela vive
       na MESMA janela de 86c4489 (810 a 1090px da section, medidos na
       referencia): comeca na atracacao do feixe, que e onde a box de
       Tecnologia abre, e o navy so aparece por tras dela, pelas laterais
       vazias, 300px abaixo do topo da caixa. As paradas internas sao as da
       receita Luminai reescaladas para essa janela. O horizonte e um BRILHO
       LOCAL declarado (a monotonicidade vale fora da banda). No trecho
       escuro: estrelas e riscos verticais no ::before. */
    --lum-q:810px;          /* a atracacao (799): o claro pleno termina aqui */
    --lum-a:840px;          /* quase branco azulado */
    --lum-b:895px;          /* dissolucao sedosa */
    --lum-vivo:938px;       /* o coracao azul luminoso */
    --lum-c:999px;          /* descendo */
    --lum-d:1047px;         /* pre-navy */
    --lum-navy:1090px;      /* navy pleno */
    --lum-horizonte-y:960px;
    /* O TOM TROCA SECO de proposito: transicionar o background repinta a
       section de 3298px a cada quadro (medi 18 quadros acima de 20ms; sem a
       transition, 1). O delta do tom e de 2 niveis, a troca seca e
       imperceptivel; o evento visual e do glow e da caixa. */
    /* 04/09: a dobra e CLARA de novo (a seda de 03/09 saiu inteira). A
       rampa Luminai (.s2p-noite) segue desligada: a costura com a dobra 3
       hoje e um corte seco, como o da referencia entre o branco e o cartao
       escuro. Os tokens ficam: --noite ainda alimenta a dobra 3. */
    background:var(--dobra-bg,var(--dobra-bg-base));
    position:relative;isolation:isolate;
    transition:none;
  }
  /* o degrade do entorno vive num FILHO com layer propria (will-change), e
     nao no background da section: um campo de 3298px pintado por
     tile durante o scroll custava 22 quadros acima de 20ms; numa layer ele
     pintam UMA vez e o scroll vira composicao (medido: 0 acima de 20ms). O
     z-index -1 com isolation na section poe a camada atras do conteudo e na
     frente do fundo dela. */
  .s2p-noite{
    /* desligada em 03/09: a rampa claro->azul->navy era a costura com a
       dobra 3 quando o #empresa era claro; sobre a seda ela pintava um campo
       proprio por cima da imagem. O bloco fica para reativar facil. */
    display:none;
    position:absolute;inset:0;z-index:-1;pointer-events:none;
    will-change:transform;
    background:
      /* a banda de horizonte: arco largo e achatado de luz concentrada na
         crista do azul, dissolvendo pros dois lados (brilho local). O raio
         vertical cabe na janela da referencia: com 300px o brilho subia ate
         606px da section e pintava de azul o interior do quadro da cena,
         que na 4313 e claro ate a atracacao. Com 130px o alcance de cima
         para em 830, abaixo do fim do claro pleno (810). */
      radial-gradient(ellipse 1700px 130px at 50% var(--lum-horizonte-y),
        rgba(214,232,255,.62) 0,rgba(140,182,255,.34) 26%,
        rgba(46,107,255,.16) 46%,transparent 66%),
      linear-gradient(180deg,
        var(--dobra-bg-base) 0,var(--dobra-bg-base) var(--lum-q),
        #F4F8FF var(--lum-a),#9DC0FF var(--lum-b),
        #2E6BFF var(--lum-vivo),#1B3FA8 var(--lum-c),
        #0A1440 var(--lum-d),var(--noite) var(--lum-navy),
        var(--noite) 100%);
  }
  /* o ceu tecnologico do trecho escuro: estrelas organicas (tile primo, sem
     fase com nada) e TRES riscos verticais de luz finos e esparsos; tudo
     paint estatico na mesma layer, restrito a faixa escura pela mascara */
  .s2p-noite::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background-image:
      linear-gradient(180deg,transparent 0,rgba(157,185,255,.14) 30%,rgba(157,185,255,.14) 70%,transparent 100%),
      linear-gradient(180deg,transparent 0,rgba(157,185,255,.10) 34%,rgba(157,185,255,.10) 62%,transparent 100%),
      linear-gradient(180deg,transparent 0,rgba(214,232,255,.12) 26%,rgba(214,232,255,.12) 74%,transparent 100%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='521' height='479'%3E%3Cg fill='%23FFFFFF'%3E%3Ccircle cx='37' cy='61' r='1.1' opacity='.28'/%3E%3Ccircle cx='143' cy='19' r='.7' opacity='.18'/%3E%3Ccircle cx='251' cy='97' r='1.4' opacity='.32'/%3E%3Ccircle cx='331' cy='41' r='.6' opacity='.14'/%3E%3Ccircle cx='433' cy='127' r='.9' opacity='.22'/%3E%3Ccircle cx='89' cy='193' r='.8' opacity='.2'/%3E%3Ccircle cx='197' cy='239' r='1.2' opacity='.26'/%3E%3Ccircle cx='307' cy='191' r='.6' opacity='.15'/%3E%3Ccircle cx='401' cy='283' r='1' opacity='.24'/%3E%3Ccircle cx='61' cy='331' r='.7' opacity='.16'/%3E%3Ccircle cx='173' cy='389' r='1.3' opacity='.3'/%3E%3Ccircle cx='283' cy='337' r='.8' opacity='.18'/%3E%3Ccircle cx='367' cy='433' r='.6' opacity='.14'/%3E%3Ccircle cx='467' cy='373' r='1.1' opacity='.26'/%3E%3Ccircle cx='503' cy='221' r='.7' opacity='.17'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat:no-repeat,no-repeat,no-repeat,repeat;
    background-size:2px 190px,2px 130px,2px 240px,521px 479px;
    background-position:22% calc(var(--lum-navy) + 210px),57% calc(var(--lum-navy) + 430px),81% calc(var(--lum-navy) + 120px),0 var(--lum-c);
    -webkit-mask-image:linear-gradient(180deg,transparent var(--lum-c),#000 calc(var(--lum-navy) + 60px),#000 calc(var(--lum-navy) + 1100px),transparent calc(var(--lum-navy) + 1500px));
    mask-image:linear-gradient(180deg,transparent var(--lum-c),#000 calc(var(--lum-navy) + 60px),#000 calc(var(--lum-navy) + 1100px),transparent calc(var(--lum-navy) + 1500px));
  }
  /* O GRAIN da receita: feTurbulence em data-URI, duas passadas (tiles de 120
     e 240px, a segunda quebra a repeticao do tile), opacity .11 e overlay.
     O ruido cru do fractalNoise fica centrado no cinza medio, que em overlay
     e NEUTRO (medi: std por linha subia so 0,14): o feComponentTransfer
     dessatura e estica o histograma (slope 2,4) com alpha cheio, e o grain
     passa a existir de fato sem mexer na opacidade nem no blend da receita.
     Ele vive num pseudo do proprio .s2p-noite: paint estatico na mesma layer
     composta (pinta uma vez), e o blend fica contido no stacking context que
     o will-change do pai ja cria. A mascara restringe o ruido a faixa da
     rampa e ao navy da base: sobre o claro do topo ele nao existe. */
  .s2p-noite::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.4' intercept='-0.7'/%3E%3CfeFuncG type='linear' slope='2.4' intercept='-0.7'/%3E%3CfeFuncB type='linear' slope='2.4' intercept='-0.7'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.4' intercept='-0.7'/%3E%3CfeFuncG type='linear' slope='2.4' intercept='-0.7'/%3E%3CfeFuncB type='linear' slope='2.4' intercept='-0.7'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size:120px 120px,240px 240px;
    opacity:.11;mix-blend-mode:overlay;
    /* o fade da base: o grain morre 120px antes do fim da section, senao a
       emenda com o navy do #porque ganha um degrau de 2 niveis no azul */
    -webkit-mask-image:linear-gradient(180deg,transparent calc(var(--lum-q) - 40px),#000 var(--lum-a),#000 calc(100% - 120px),transparent 100%);
    mask-image:linear-gradient(180deg,transparent calc(var(--lum-q) - 40px),#000 var(--lum-a),#000 calc(100% - 120px),transparent 100%);
  }

  /* O glow da conexao acende por tras do topo da box gigante quando a linha
     conecta. A troca e seca como a do tom: animar o radial junto da cortina
     de chegada produzia quadros de 24 a 48ms. Sem pin, ele mora na
     propria box (no topo dela, que e onde a linha chega). */
  .mg-box::before{
    content:"";position:absolute;z-index:-1;inset:-130px -80px auto;height:520px;
    /* Quatro paradas: nucleo branco quente, veu claro, azul e o navy que
       reaparece quando a ultima parada fica transparente. */
    background:radial-gradient(ellipse 52% 58% at 50% 58%,
      var(--glow-core) var(--glow-p0),var(--glow-veil) var(--glow-p1),
      var(--glow-cor) var(--glow-p2),transparent var(--glow-p3));
    opacity:0;transform:none;
    will-change:auto;transition:none;
    pointer-events:none;
  }
  .ligada .mg-box::before{opacity:1}
  .ligada .mg-box::before{opacity:1}
  #empresa.ligada{--dobra-bg:var(--dobra-bg-ligada)}
  /* o respiro atras do simbolo acompanha o tom (o stop do SVG aponta pro token) */
  #s2p-malha-respiro stop{stop-color:var(--dobra-bg,#F2F2F2)}
  .s2p-eco{
    --eco-ease:cubic-bezier(.22,1,.36,1);
    --glow-core:rgba(255,252,241,.88);
    --glow-veil:rgba(248,251,247,.44);
    --glow-cor:rgba(57,114,253,.18);
    --glow-p0:0%;--glow-p1:25%;--glow-p2:52%;--glow-p3:78%;
    --eco-ink:#2B55D4;
    --eco-ink-dim:rgba(43,85,212,.30);
    --eco-list-dim:rgba(43,85,212,.22);
    /* ===== O FUNDO EM SEIS CAMADAS (referencia da autora, adaptada ao claro).
       A grade e TUDO que precisa alinhar a ela vive em PX DE TELA com origem
       no canto do palco: celulas em multiplos de --eco-grid-step por
       construcao, e as luzes correm em trilhos k*44+0,5 (o centro da linha de
       1px). O SVG esticado (viewBox 1200x330) NAO serve para isso: la as
       coordenadas escalam e a grade nao, e os trilhos descolam das linhas. */
    --eco-grid:rgba(43,85,212,.075);
    --eco-grid-clara:rgba(57,114,253,.07);  /* a zona escura (spec C) */
    --eco-grid-step:44px;
    /* O tile de 44px troca a linha continua por tracejado fino. As cruzes
       aparecem a cada quatro celulas, sempre sobre um no real da grade. */
    --eco-grid-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M.5 0V44M0 .5H44' fill='none' stroke='%232B55D4' stroke-opacity='.075' stroke-width='1' stroke-dasharray='2 5'/%3E%3C/svg%3E");
    --eco-grid-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='176' height='176' viewBox='0 0 176 176'%3E%3Cpath d='M82.5 88.5H94.5M88.5 82.5V94.5' fill='none' stroke='%232B55D4' stroke-opacity='.16' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
    --eco-grid-escura-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M.5 0V44M0 .5H44' fill='none' stroke='%233972FD' stroke-opacity='.07' stroke-width='1' stroke-dasharray='2 5'/%3E%3C/svg%3E");
    --eco-grid-escura-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='176' height='176' viewBox='0 0 176 176'%3E%3Cpath d='M82.5 88.5H94.5M88.5 82.5V94.5' fill='none' stroke='%233972FD' stroke-opacity='.19' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
    --eco-grid-pulse-w:2.1px;
    --eco-grade-noite-y:93%;
    --eco-grade-noite-fim:100%;
    /* A grade chega a alfa zero nos quatro limites; detalhes pontuais usam
       uma rampa um pouco mais aberta para sobreviver na periferia. */
    --eco-campo-mask:radial-gradient(ellipse 50% 50% at 50% 50%,#000 0%,#000 45%,rgba(0,0,0,.74) 65%,rgba(0,0,0,.28) 84%,transparent 100%);
    --eco-detalhe-mask:radial-gradient(ellipse 62% 58% at 50% 46%,#000 22%,rgba(0,0,0,.78) 52%,rgba(0,0,0,.38) 78%,transparent 100%);
    /* camada 4: contorno, preenchimento baixo e preenchimento presente */
    --cel-contorno:rgba(43,85,212,.22);
    --cel-fraca:rgba(57,114,253,.09);
    --cel-media:rgba(57,114,253,.14);
    --cel-forte:rgba(57,114,253,.24);
    --feixe-cauda:rgba(57,114,253,.34);
    --feixe-nucleo:#2B55D4;
    /* camada 2: o arco */
    --arco-traco:rgba(43,85,212,.16);
    --arco-glow:rgba(57,114,253,.20);
    /* camada 1: vinheta (clarao central + bordas frias, delta minimo) */
    --vin-claro:rgba(255,255,255,.55);
    --vin-frio:rgba(58,80,107,.045);
    /* camada 6: poeira quase invisivel */
    --poeira:rgba(43,85,212,.05);
    /* a extensao do fundo (ajuste "a grade cresce"): SEMPRE multiplos do passo
       de 44px, senao a fase da grade desloca e celulas e trilhos desalinham.
       Sobe 6 celulas pela faixa do titulo e desce 2. A lateral cresce em
       degraus inteiros de 44px nos media queries: nunca muda a fase e nunca
       cria largura rolavel fora do viewport. */
    --fundo-ext-t:264px;
    --fundo-ext-l:44px;
    --fundo-ext-b:88px;
    --eco-base:#101828;
    --eco-muted:rgba(16,24,40,.68);
    --eco-divider:rgba(16,24,40,.08);
    --eco-focus:#101828;
    /* O feixe (item A da leva de 27/08): linha-base inteira visível desde a
       chegada em cinza-azulado leve; o scroll NÃO desenha a linha, ele CARREGA
       a cor: um segmento azul institucional percorre a base conforme --q
       (comportamento da referência codex.io). 2,2px calibrado por foto. */
    --eco-feixe-w:2.2px;
    --eco-feixe-off:rgba(58,80,107,.32);
    --eco-feixe-on:rgba(58,80,107,.52);
    --eco-carga:#3972FD;
    /* Item C da leva de 27/08: as faces migram do teal para a familia azul do
       item B, a camada EXTERNA fica quase flat (so um assentamento leve) e as
       duas do MEIO ganham a profundidade: luz de aresta, sombra de contato e
       drop mais presentes, tudo na propria face, sem pintar o simbolo. */
    --eco-ly-e-bg:linear-gradient(180deg,rgba(255,255,255,.66),rgba(57,114,253,.055));
    --eco-ly-m-bg:linear-gradient(180deg,rgba(255,255,255,.88),rgba(57,114,253,.15));
    --eco-ly-i-bg:linear-gradient(180deg,#FFFFFF,rgba(224,236,255,.94));
    --eco-ly-e-bd:rgba(16,24,40,.08);--eco-ly-m-bd:rgba(57,114,253,.28);--eco-ly-i-bd:rgba(57,114,253,.36);
    --eco-ly-e-r:28%;--eco-ly-m-r:26%;--eco-ly-i-r:24%;
    --eco-pulso-t:8.4s;                  /* periodo longo: respira, nao pisca */
    --eco-pulso-m:calc(var(--eco-pulso-t) / -3);
    --eco-pulso-i:calc(var(--eco-pulso-t) / -1.5);
    --eco-card-bg:#FFFFFF;               /* o palco de cada topico reusa a familia */
    --eco-card-bd:rgba(16,24,40,.12);
    --eco-card-r:24px;
    --eco-card-shadow:0 1px 2px rgba(16,24,40,.04),0 24px 58px -34px rgba(16,24,40,.30);
    --eco-fade-t:280ms;
    --eco-topic-py:clamp(38px,4.4vw,62px);
    --eco-topic-gap:clamp(52px,7.2vw,112px);
    /* box gigante e palco sticky */
    --mg-bg:#E9EDF6;
    --mg-bd:rgba(16,24,40,.13);
    --mg-pad-x:clamp(54px,4.6vw,72px);
    --eco-sup-w:17.6%;                   /* item C: conjunto ~17% maior que os 15% anteriores */
    --eco-sup-y:17.6923%;                /* centro do suporte (92/520 do viewBox) */
    margin-top:clamp(30px,4vw,56px);
  }
  /* Item 2 (27/08 noite): o palco desktop cresce pra 1200x520 e o feixe ganha
     percurso longo antes de atracar na box (ref codex.io). O simbolo fica no
     MESMO y de tela (92 un.): so o sup-y percentual reancora. */
  .s2p-palco{position:relative;aspect-ratio:1200/520;isolation:isolate}
  @media(min-width:1384px){.s2p-eco{--fundo-ext-l:88px}}
  @media(min-width:1648px){.s2p-eco{--fundo-ext-l:220px}}
  @media(min-width:1912px){.s2p-eco{--fundo-ext-l:352px}}
  /* camada 3: a rampa radial longa apaga os quatro limites do campo. A
     segunda mascara preserva a troca de linha escura para azul claro sobre o navy. */
  .s2p-palco::before{
    content:"";position:absolute;z-index:0;pointer-events:none;
    inset:calc(-1 * var(--fundo-ext-t)) calc(-1 * var(--fundo-ext-l)) calc(-1 * var(--fundo-ext-b));
    background-image:var(--eco-grid-svg),var(--eco-grid-plus);
    background-size:var(--eco-grid-step) var(--eco-grid-step),calc(4 * var(--eco-grid-step)) calc(4 * var(--eco-grid-step));
    -webkit-mask-image:var(--eco-campo-mask),linear-gradient(180deg,#000 0,#000 var(--eco-grade-noite-y),transparent var(--eco-grade-noite-fim));
    -webkit-mask-composite:source-in;
    mask-image:var(--eco-campo-mask),linear-gradient(180deg,#000 0,#000 var(--eco-grade-noite-y),transparent var(--eco-grade-noite-fim));
    mask-composite:intersect;
  }
  /* a SEGUNDA ZONA da grade (spec C): onde o campo continuo ganha navy, a
     linha escura some. Esta camada tem as MESMAS linhas em claro (azul alfa
     baixo) e mascara irma no eixo do campo: a grade nao troca de identidade e
     o alinhamento e o mesmo por construcao (mesmo passo, origem e inset). */
  .s2p-palco .s2p-grade-escura{
    position:absolute;z-index:0;pointer-events:none;
    inset:calc(-1 * var(--fundo-ext-t)) calc(-1 * var(--fundo-ext-l)) calc(-1 * var(--fundo-ext-b));
    background-image:var(--eco-grid-escura-svg),var(--eco-grid-escura-plus);
    background-size:var(--eco-grid-step) var(--eco-grid-step),calc(4 * var(--eco-grid-step)) calc(4 * var(--eco-grid-step));
    -webkit-mask-image:var(--eco-campo-mask),linear-gradient(180deg,transparent 0,transparent var(--eco-grade-noite-y),#000 var(--eco-grade-noite-fim));
    -webkit-mask-composite:source-in;
    mask-image:var(--eco-campo-mask),linear-gradient(180deg,transparent 0,transparent var(--eco-grade-noite-y),#000 var(--eco-grade-noite-fim));
    mask-composite:intersect;
  }
  /* camadas 1 e 6: vinheta (clarao atras do simbolo + bordas mais frias) e a
     poeira, num unico paint estatico. Os passos da poeira sao primos entre si
     e primos com 44, para o padrao nao entrar em fase com a grade. */
  .s2p-palco::after{
    content:"";position:absolute;z-index:0;pointer-events:none;
    inset:calc(-1 * var(--fundo-ext-t)) calc(-1 * var(--fundo-ext-l)) calc(-1 * var(--fundo-ext-b));
    background-image:
      radial-gradient(ellipse 440px 250px at 50% 26%,var(--vin-claro),transparent 72%),
      radial-gradient(ellipse 130% 130% at 50% 45%,transparent 58%,var(--vin-frio) 100%),
      radial-gradient(circle 1px at 31px 47px,var(--poeira) 99%,transparent),
      radial-gradient(circle 1px at 143px 121px,var(--poeira) 99%,transparent);
    background-size:100% 100%,100% 100%,187px 167px,241px 209px;
  }
  /* camada 2: o arco que emoldura a cena. Um circulo grande centrado no eixo
     do suporte, do qual so a coroa superior aparece (mask com fade); o glow e
     o ::after borrado por tras do traco. Sempre centrado porque e CSS
     (left 50%), em qualquer largura de pagina. */
  .s2p-arco{
    position:absolute;z-index:0;left:50%;top:-40px;width:min(1240px,96%);
    aspect-ratio:1;transform:translateX(-50%);pointer-events:none;
  }
  .s2p-arco::before,.s2p-arco::after{
    content:"";position:absolute;inset:0;border-radius:50%;
    -webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 9%,transparent 17%);
    mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 9%,transparent 17%);
  }
  .s2p-arco::before{border:1.5px solid var(--arco-traco)}
  .s2p-arco::after{border:3px solid var(--arco-glow);filter:blur(7px)}
  /* camada 4: cada destaque ocupa UMA celula da grade. Contorno, preenchido
     baixo e preenchido presente se alternam em clusters assimetricos, sem
     cruzar titulo, suporte ou caixa. */
  .s2p-cel{
    position:absolute;z-index:0;pointer-events:none;
    inset:calc(-1 * var(--fundo-ext-t)) calc(-1 * var(--fundo-ext-l)) calc(-1 * var(--fundo-ext-b));
    overflow:clip;
    -webkit-mask-image:var(--eco-detalhe-mask);
    mask-image:var(--eco-detalhe-mask);
  }
  .s2p-cel i{
    position:absolute;
    left:calc(var(--gx) * var(--eco-grid-step));
    top:calc(var(--gy) * var(--eco-grid-step));
    width:var(--eco-grid-step);height:var(--eco-grid-step);
    box-sizing:border-box;
    background:transparent;
    border:1px solid var(--cel-contorno);
  }
  .s2p-cel i.s{background:var(--cel-fraca);border-color:rgba(43,85,212,.08)}
  .s2p-cel i.m{background:var(--cel-media);border-color:rgba(43,85,212,.10)}
  .s2p-cel i.f{background:var(--cel-forte);border-color:rgba(43,85,212,.13)}
  /* camada 5: as luzes que correm NOS TRILHOS da grade. SVG sem viewBox: as
     coordenadas dos paths sao px do palco, entao um H em y=k*44+0,5 corre
     exatamente sobre o centro da linha de 1px, em qualquer largura. Fora do
     desktop elas saem (o custo do 390 fica zero). */
  .s2p-luzes{
    position:absolute;z-index:1;
    inset:auto;
    top:calc(-1 * var(--fundo-ext-t));left:calc(-1 * var(--fundo-ext-l));
    width:calc(100% + 2 * var(--fundo-ext-l));
    height:calc(100% + var(--fundo-ext-t) + var(--fundo-ext-b));
    overflow:hidden;pointer-events:none;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .s2p-malha{position:absolute;z-index:1;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
  .s2p-feixe{
    stroke-dashoffset:100;opacity:0;
    animation:s2pMalhaViaja var(--feixe-t,8.8s) linear var(--feixe-d,0s) infinite;
  }
  .s2p-malha-pulso{
    fill:none;stroke:var(--feixe-nucleo);stroke-width:var(--eco-grid-pulse-w);
    stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:8 92;
    vector-effect:non-scaling-stroke;
    filter:drop-shadow(0 0 2px rgba(57,114,253,.42));
  }
  .s2p-malha-pulso.cauda{
    stroke:var(--feixe-cauda);stroke-width:4.6px;stroke-dasharray:22 78;
    filter:none;
  }
  .s2p-feixe.p1{--feixe-t:8.8s;--feixe-d:-.6s}
  .s2p-feixe.p2{--feixe-t:10.2s;--feixe-d:-2s}
  .s2p-feixe.p3{--feixe-t:11.6s;--feixe-d:-5.1s}
  .s2p-feixe.p4{--feixe-t:13s;--feixe-d:-8.4s}
  @keyframes s2pMalhaViaja{
    0%,8%{stroke-dashoffset:100;opacity:0}
    14%{opacity:.96}
    54%{stroke-dashoffset:0;opacity:.96}
    61%,100%{stroke-dashoffset:0;opacity:0}
  }
  .s2p-fios2{position:absolute;z-index:2;inset:0;width:100%;height:100%;overflow:visible;fill:none}
  .s2p-fios2-v{display:none}
  .s2p-ef{
    stroke:var(--eco-feixe-off);stroke-width:var(--eco-feixe-w);
    stroke-linecap:round;stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
  }
  /* A carga tem dois planos com a MESMA frente: uma cauda de 48% larga e
     translúcida nasce por baixo; o núcleo de 34% assenta por cima. Os 14%
     extras fazem o azul desaparecer gradualmente sem mudar o --q ou o ponto
     de chegada. Com pathLength=1, cada período é maior que caminho + traço,
     então nunca aparece uma segunda carga. O brilho de 1px no núcleo apenas
     separa a frente do cinza, sem transformar o feixe em laser. */
  .s2p-carga-cauda{
    fill:none;stroke:rgba(57,114,253,.13);stroke-width:4px;
    stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:.48px 1.18px;stroke-dashoffset:-.52px;
    vector-effect:non-scaling-stroke;
  }
  .s2p-carga{
    stroke:var(--eco-carga);stroke-width:var(--eco-feixe-w);
    stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:.34px 1.32px;stroke-dashoffset:-.66px;
    vector-effect:non-scaling-stroke;
    filter:drop-shadow(0 0 1px rgba(57,114,253,.24));
  }
  [data-entrada] .s2p-eco .s2p-carga-cauda{
    stroke-dashoffset:calc((.48 - var(--q,1)) * 1px);
  }
  [data-entrada] .s2p-eco .s2p-carga{
    stroke-dashoffset:calc((.34 - var(--q,1)) * 1px);
  }
  /* Nove arcos, tres por vertente, seguem a mesma familia de 90 graus: mesmo
     ponto de origem, entrada vertical e saida horizontal. Todos mantem a
     espessura do token; a hierarquia acontece por alfa, nunca no meio do fio. */
  .s2p-linha-pulso{
    fill:none;stroke:rgba(255,255,255,.88);stroke-width:var(--eco-feixe-w);stroke-linecap:round;
    stroke-dasharray:22 100;stroke-dashoffset:22;opacity:0;
    filter:drop-shadow(0 0 2px rgba(57,114,253,.62));
  }
  @keyframes s2pLinhaPulsa{from{stroke-dashoffset:22}to{stroke-dashoffset:-100}}

  /* Tres planos em passos regulares de 10,5%: a externa ancora o fio e
     respira em luz; media e interna dividem a espessura e o pulso. */
  .s2p-sup{
    position:absolute;z-index:3;left:50%;top:var(--eco-sup-y);width:var(--eco-sup-w);aspect-ratio:1;
    transform:translate(-50%,-50%);
    display:grid;place-items:center;
  }
  .s2p-ly{position:absolute;pointer-events:none;transform-origin:center}
  /* A externa e FLAT: sem luz de aresta nem sombra de corpo, so um
     assentamento raso pro conjunto nao flutuar solto. */
  .s2p-ly.e{
    inset:0;border-radius:var(--eco-ly-e-r);
    background:var(--eco-ly-e-bg);border:1px solid var(--eco-ly-e-bd);
    box-shadow:0 10px 26px -22px rgba(16,24,40,.20);
    animation:s2pRespiraLuz var(--eco-pulso-t) var(--eco-ease) infinite;
  }
  /* As duas do meio carregam o 3D: aresta de luz mais alta, sombra interna de
     contato mais funda e drop em dois planos. */
  .s2p-ly.m{
    --eco-layer-amp:1.018;inset:10.5%;border-radius:var(--eco-ly-m-r);
    background:var(--eco-ly-m-bg);border:1px solid var(--eco-ly-m-bd);
    box-shadow:inset 0 2px 0 rgba(255,255,255,.98),inset 0 -14px 20px -16px rgba(16,24,40,.34),0 26px 48px -28px rgba(16,24,40,.38),0 4px 10px -6px rgba(16,24,40,.28);
    animation:s2pRespira var(--eco-pulso-t) var(--eco-ease) var(--eco-pulso-m) infinite;
  }
  .s2p-ly.i{
    --eco-layer-amp:1.010;inset:21%;border-radius:var(--eco-ly-i-r);
    background:var(--eco-ly-i-bg);border:1px solid var(--eco-ly-i-bd);
    box-shadow:inset 0 2px 0 #fff,inset 0 -11px 16px -12px rgba(16,24,40,.32),0 18px 36px -20px rgba(16,24,40,.44),0 4px 9px -5px rgba(16,24,40,.34);
    animation:s2pRespira var(--eco-pulso-t) var(--eco-ease) var(--eco-pulso-i) infinite;
  }
  @keyframes s2pRespira{0%,100%{transform:scale(1)}50%{transform:scale(var(--eco-layer-amp,1.014))}}
  @keyframes s2pRespiraLuz{0%,100%{opacity:.88}50%{opacity:1}}
  .s2p-sup img{position:relative;z-index:1;width:40%;height:auto;display:block;filter:none}

  /* ===================== A FOLHA DAS AVALIACOES =====================
     Clara, com cantos superiores generosos e sombra na borda de cima: e a
     volta do escuro para o claro. Ela SUBIA por cima da tela navy sticky ate
     01/09; hoje a veste e a mesma e o movimento nao existe mais. A folha
     termina com as avaliacoes; logos, contato e rodape seguem em dobras
     claras independentes. */
  .folha{
    position:relative;z-index:2;
    background:var(--light-bg,#F2F2F2);
    border-radius:36px 36px 0 0;
    border-top:1px solid rgba(255,255,255,.82);
    box-shadow:0 -1px 0 rgba(255,255,255,.56),0 -12px 28px -22px rgba(4,8,31,.52),0 -38px 78px -44px rgba(4,8,31,.72);
  }
  section.pad.folha{padding-bottom:clamp(88px,7vw,112px)}
  /* Cabecalho da folha em um unico eixo: eyebrow, titulo e selo passam a ser
     lidos como o mesmo bloco, alinhado aos cards logo abaixo. */
  #avaliacoes .sec-head{grid-template-columns:minmax(0,1fr);gap:14px;max-width:900px}
  #avaliacoes .sec-head .sh-label{padding-top:0}
  #avaliacoes .sec-head .h2{max-width:24ch;text-wrap:balance}
  #contato{position:relative;z-index:2;background:var(--light-bg,#F2F2F2)}
  .rv2-selo{
    display:inline-flex;align-items:center;gap:9px;margin:14px 0 0;
    font-size:14.5px;color:var(--light-tx2);
  }
  .rv2-selo svg{width:18px;height:18px;flex:none}
  .rv2-selo b{color:var(--light-tx);font-weight:600}
  /* o marquee: a fila anda por transform (composited); a copia decorativa
     fecha o loop no -50% */
  .rv2-mq{
    display:flex;gap:20px;overflow:hidden;margin-top:clamp(28px,3.4vw,44px);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
  }
  .rv2-fila{--mq-gap:20px;display:flex;gap:var(--mq-gap);flex:none;animation:rv2Anda 96s linear infinite}
  .rv2-mq:hover .rv2-fila,.rv2-mq:focus-within .rv2-fila{animation-play-state:paused}
  @keyframes rv2Anda{from{transform:translateX(0)}to{transform:translateX(calc(-100% - var(--mq-gap,20px)))}}
  .rv2{
    flex:none;width:min(372px,78vw);margin:0;
    display:flex;flex-direction:column;gap:12px;
    background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.78);border-radius:22px;
    padding:22px 24px;
    -webkit-backdrop-filter:blur(12px) saturate(1.08);
    backdrop-filter:blur(12px) saturate(1.08);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 3px 8px -6px rgba(16,24,40,.2),0 22px 52px -34px rgba(16,24,40,.38);
    transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s ease;
  }
  .rv2:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 #fff,0 6px 14px -10px rgba(16,24,40,.25),0 28px 58px -32px rgba(16,24,40,.42)}
  .rv2 .stars{display:flex;gap:2px;color:#FBBC05}
  .rv2 .stars svg{width:15px;height:15px}
  .rv2 blockquote{margin:0;font-size:14.5px;line-height:1.6;color:var(--light-tx2)}
  .rv2 figcaption{display:flex;align-items:center;gap:10px;margin-top:auto}
  .rv2-av{
    width:34px;height:34px;border-radius:50%;flex:none;
    display:grid;place-items:center;
    background:rgba(91,192,190,.16);color:#236F6D;
    font-family:'Manrope',sans-serif;font-weight:600;font-size:14px;
  }
  .rv2 figcaption b{display:block;font-size:13.5px;color:var(--light-tx);font-weight:600}
  .rv2 .fonte{display:block;font-size:11.5px;color:var(--light-mut)}
  /* Os logos agora ocupam uma dobra propria entre avaliacoes e contato. O mesmo
     F2F2F2 preserva o fluxo claro; respiro e reguas marcam a nova secao. */
  .logos-dobra{
    position:relative;z-index:2;
    background:var(--light-card,#FCFCFC);
    border-block:1px solid rgba(58,80,107,.08);
  }
  section.logos-dobra{padding:clamp(96px,8.5vw,132px) 0}
  .lg-bloco{margin:0;padding:0}
  .lg-titulo{
    margin:0 0 clamp(28px,3vw,40px);text-align:center;
    font-family:'Manrope',sans-serif;font-size:12.5px;font-weight:600;
    letter-spacing:.12em;text-transform:uppercase;color:var(--light-mut);
  }
  .lg-mq{
    display:flex;gap:72px;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  }
  .lg-mq:focus-visible{outline:2px solid #236F6D;outline-offset:10px;border-radius:8px}
  .lg-fila{--mq-gap:72px;display:flex;gap:var(--mq-gap);flex:none;align-items:center;animation:rv2Anda 74s linear infinite}
  .lg-mq:hover .lg-fila,.lg-mq:focus-within .lg-fila{animation-play-state:paused}
  .lg-item{
    flex:none;display:inline-flex;align-items:center;gap:12px;
    font-family:'Manrope',sans-serif;font-size:16px;font-weight:600;
    letter-spacing:-.015em;color:rgba(16,24,40,.55);white-space:nowrap;
  }
  .lg-mark{
    position:relative;width:38px;height:38px;display:grid;place-items:center;flex:none;
    overflow:hidden;border:1px solid rgba(58,80,107,.15);border-radius:12px;
    background:rgba(255,255,255,.5);color:rgba(58,80,107,.68);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 9px 22px -18px rgba(16,24,40,.42);
  }
  .lg-mark::before,.lg-mark::after{content:"";position:absolute;background:rgba(91,192,190,.2);border-radius:99px;transform:rotate(-34deg)}
  .lg-mark::before{width:9px;height:28px;left:8px;top:8px}
  .lg-mark::after{width:8px;height:22px;right:7px;top:3px;background:rgba(58,80,107,.13)}
  .lg-mon{position:relative;z-index:1;font-size:10px;font-weight:600;letter-spacing:.04em}
  .lg-item:nth-child(3n+2) .lg-mark{border-radius:50%}
  .lg-item:nth-child(3n) .lg-mark{border-radius:10px 16px 10px 16px}
  @media(prefers-reduced-motion:reduce){
    .rv2-fila,.lg-fila{animation:none}
    .rv2-mq,.lg-mq{overflow-x:auto}
    .lg-mq{mask-image:none;-webkit-mask-image:none}
    .lg-fila[aria-hidden="true"]{display:none}
  }
  @media(max-width:520px){
    section.pad.folha{padding-bottom:72px}
    section.logos-dobra{padding:76px 0}
  }

  /* ===================== POR QUE A MARVEE (tela navy) =====================
     A secao reaproveitada da v1, vestida para o navy. Era uma tela sticky
     que ficava parada enquanto a folha subia por cima; o sticky saiu em
     01/09 (ordem da autora) e ela passou a rolar como qualquer outra dobra.
     A tela cheia continua: e a pausa escura antes do claro voltar. */
  #porque{
    min-height:100vh;display:flex;align-items:center;
    background:var(--bg,#04081F);
  }
  #porque .h2{color:#fff}
  #porque .lede{color:rgba(255,255,255,.72)}
  /* Titulo e lede compartilham a mesma prumada. O balance cuida da quebra sem
     criar uma segunda linha curta e recuada. */
  #porque .why-head{
    display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,2vw,28px);
    max-width:900px;margin:0;text-align:left;
  }
  #porque .why-head .h2{margin:0;max-width:21ch;text-align:left;text-wrap:balance}
  #porque .why-head .lede{margin:0;max-width:62ch;text-align:left}
  /* contraste medido sobre o navy: os cards .why-card sao dark-first do
     site.css e ja nasceram para este fundo */

  /* Cada trio termina diretamente no topo da box. A base é visível desde a
     chegada nas nove vias (item A2); a vertente ativa só escurece um degrau,
     preservando espessura uniforme. */
  .s2p-ef.linha.lv{transition:stroke .35s ease}
  .s2p-ef.linha.lv.on{stroke:var(--eco-feixe-on)}
  .s2p-linha-pulso{opacity:0}
  .s2p-linha-pulso[data-l="2"]{--pulso-d:-.18s}
  .s2p-linha-pulso[data-l="3"]{--pulso-d:-.36s}
  .ligada .s2p-linha-pulso.on{opacity:1;animation:s2pLinhaPulsa 3.4s cubic-bezier(.45,.05,.55,.95) var(--pulso-d,0s) infinite}


  /* ===================== A BOX GIGANTE (.mg-*) =====================
     Um container unico e alto, claro, do comeco da dobra ate o fim de
     Educacao. As margens laterais (o min() abaixo) sao vazias de proposito:
     e por elas que o navy de tras aparece. O fim da box e visivel: borda,
     raio e sombra fecham a folha, nada desmancha no nada. */
  .mg-box{
    --mg-w:min(92vw,1600px);
    --mg-cap-max:780px;
    --mg-pad-y:clamp(64px,6vw,96px);
    --mg-cap-gap:clamp(48px,4.4vw,68px);
    --mg-stack-gap:clamp(54px,4.8vw,76px);
    position:relative;
    width:var(--mg-w);
    margin-left:calc((100% - var(--mg-w)) / 2);
    margin-right:calc((100% - var(--mg-w)) / 2);
    background:var(--mg-bg,#EAEFEF);
    border:1px solid rgba(255,255,255,.52);
    border-radius:32px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.86),inset 0 3px 0 rgba(57,114,253,.16),0 3px 10px -8px rgba(16,24,40,.24),0 38px 96px -52px rgba(4,8,31,.62);
    /* A caixa vive no fluxo e entra com o proprio scroll, sem classe de
       liberacao. Isso a desacopla da conexao e evita animar uma superficie de
       mais de 5 mil px ou criar um ancestral transformado para o sticky. */
  }
  .mg-sec{
    padding:var(--mg-pad-y) var(--mg-pad-x);
    scroll-margin-top:calc(var(--s2h-navtop,19px) + var(--s2h-navh,72px));
    border-top:1px solid rgba(16,24,40,.06);
  }
  .mg-sec:first-child{border-top:0}
  .mg-sec[data-v]{--tv:var(--blue);--tv-ink:var(--eco-ink);--tv-soft:rgba(57,114,253,.14)}
  /* abertura CENTRADA (D1): titulo e resumo centrados na box */
  .mg-abertura{
    max-width:min(100%,var(--mg-cap-max));
    margin:0 auto var(--mg-cap-gap);
    text-align:center;
  }
  .mg-abertura h3{
    margin:0 0 clamp(14px,1.5vw,20px);
    font-family:'Manrope',sans-serif;font-size:clamp(36px,3.8vw,56px);
    font-weight:600;line-height:1.04;letter-spacing:-.045em;
    color:var(--eco-base);text-wrap:balance;
  }
  .mg-abertura p{
    max-width:62ch;margin:0 auto;
    font-size:clamp(18px,1.55vw,22px);line-height:1.55;
    color:rgba(16,24,40,.72);text-wrap:pretty;
  }
  .mg-grid{
    display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    gap:clamp(40px,4.4vw,72px);align-items:center;
  }
  /* O palco deixou de ser sticky: com UM topico por vez a secao cabe numa
     tela e a imagem convive parada ao lado do texto. */
  .mg-palco{
    position:relative;
    display:grid;aspect-ratio:1.2;border-radius:24px;
    background:rgba(255,255,255,.64);border:1px solid rgba(255,255,255,.72);
    -webkit-backdrop-filter:blur(18px) saturate(1.12);
    backdrop-filter:blur(18px) saturate(1.12);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.94),0 4px 12px -9px rgba(16,24,40,.25),0 28px 62px -40px rgba(16,24,40,.42);
    overflow:hidden;
  }
  .mg-cena{
    grid-area:1/1;display:grid;place-items:center;align-content:center;gap:12px;
    opacity:0;transform:translateY(12px) scale(.985);pointer-events:none;
    transition:opacity .36s ease,transform .42s var(--eco-ease);
    color:var(--eco-ink-dim);
  }
  .mg-cena.is-on{opacity:1;transform:none;pointer-events:auto}
  .mg-slot-ic{display:block;width:56px;height:56px;opacity:.5}
  .mg-slot-ic svg{width:100%;height:100%}
  .mg-cena .cap{
    margin:0;font-family:'Manrope',sans-serif;font-size:9.5px;
    text-transform:uppercase;letter-spacing:.15em;font-weight:600;
    color:rgba(16,24,40,.35);
  }
  /* ===================== UM TOPICO POR VEZ (D1) =====================
     Base SEM JS (e em reduced-motion): os topicos ficam empilhados com uma
     regua entre eles e as abas nem aparecem: nada depende de script pra ler.
     Com [data-entrada] o JS poe .vez-on no container: os topicos empilham no
     MESMO modulo (grid 1/1) e so o ativo existe; as abas-segmento em cima
     carregam a barrinha do autoplay (o relogio E a animacao: animationend
     avanca, hover/focus no conjunto pausa, clique troca na hora e zera).
     A conducao de pagina morreu com a estrutura: nada rola a pagina pelo
     usuario, o scroll e sempre dele. */
  /* ============ O MODO SCROLL (item 1): pista + pin ============
     So existe com .vez-scroll (JS armado, movimento permitido, desktop):
     a pista da 64vh de estrada por topico alem da altura do pin; o pin e
     sticky centrado por --pin-h (medido por ResizeObserver, nunca chutado).
     A barrinha da aba ativa vira posicao: scaleX(--frac), sem relogio.
     Faixas ja percorridas ficam cheias (.done). */
  .vez-scroll .mg-pista{height:calc(var(--mg-faixas,5) * 64vh + var(--pin-h,620px))}
  .vez-scroll .mg-pin{
    position:sticky;
    top:max(84px,calc((100vh - var(--pin-h,620px)) / 2));
  }
  .vez-scroll .mg-tab i::after{animation:none;transition:none;transform:scaleX(0)}
  /* reforco da autora: a troca e SUAVE como nas referencias (fade + slide
     curto), nunca seca nem longa a ponto de virar borrao no dedo */
  .vez-scroll .mg-um .mg-top{
    transform:translateY(14px);
    transition:opacity .3s ease,transform .34s cubic-bezier(.22,1,.36,1),visibility 0s .34s;
  }
  .vez-scroll .mg-tab.done i::after{transform:scaleX(1)}
  .vez-scroll .mg-tab.ativa i::after{transform:scaleX(var(--frac,0))}
  .mg-vez{display:flex;flex-direction:column;gap:clamp(18px,2vw,26px);min-width:0}
  .mg-tabs{display:none;gap:10px}
  .vez-on .mg-tabs{display:flex}
  .mg-tab{
    flex:1;display:flex;align-items:center;min-width:0;height:22px;
    padding:9px 0;margin:0;border:0;background:none;cursor:pointer;
  }
  .mg-tab i{
    position:relative;display:block;width:100%;height:4px;border-radius:99px;
    background:rgba(16,24,40,.10);overflow:hidden;
  }
  .mg-tab i::after{
    content:"";position:absolute;inset:0;border-radius:99px;
    background:var(--tv-ink);transform:scaleX(0);transform-origin:left;
  }
  .mg-tab.ativa i{background:var(--tv-soft)}
  .roda .mg-tab.ativa i::after{animation:mgProgX var(--mg-topo-t,5s) linear forwards}
  .mg-vez:hover .mg-tab.ativa i::after,
  .mg-vez:focus-within .mg-tab.ativa i::after{animation-play-state:paused}
  .mg-tab:focus-visible{outline:2px solid var(--eco-focus);outline-offset:3px;border-radius:6px}
  @keyframes mgProgX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .mg-top{position:relative;padding:clamp(16px,1.8vw,22px) 0}
  .mg-vez:not(.vez-on) .mg-top + .mg-top{border-top:1px solid rgba(16,24,40,.055)}
  .vez-on .mg-um{display:grid}
  .vez-on .mg-um .mg-top{
    grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);
    transition:opacity .36s ease,transform .42s var(--eco-ease),visibility 0s .42s;
  }
  .vez-on .mg-um .mg-top.ativa{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .s2p-txt .kick{
    display:inline-flex;align-items:center;gap:8px;margin:0 0 11px;
    font-family:'Manrope',sans-serif;font-size:11px;text-transform:uppercase;
    letter-spacing:.15em;font-weight:600;color:var(--tv-ink);
  }
  .s2p-meta{display:flex;align-items:center;gap:8px;margin:0 0 12px;color:var(--eco-ink)}
  .s2p-num{font-family:'Manrope',sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.12em;white-space:nowrap}
  .s2p-ic{
    width:32px;height:32px;display:grid;place-items:center;flex:none;border-radius:9px;
    color:var(--eco-ink);background:rgba(57,114,253,.10);border:1px solid rgba(43,85,212,.16);
  }
  .s2p-ic img,.s2p-ic svg{display:block;width:17px;height:17px;object-fit:contain}
  /* icone de arquivo recolorido para a familia da dobra SEM inline (a ordem e
     cor unica da secao e os light/*.svg carregam a cor da propria area): o span usa o
     svg como MASCARA e pinta em currentColor, o mesmo espirito do costume da
     casa. O arquivo nunca e alterado. */
  .s2p-ic-m{
    display:block;width:17px;height:17px;background:currentColor;
    -webkit-mask:var(--ic) center / contain no-repeat;
    mask:var(--ic) center / contain no-repeat;
  }
  .s2p-txt h4{
    margin:0 0 12px;font-size:clamp(22px,2.15vw,28px);font-weight:600;
    letter-spacing:-.03em;line-height:1.14;color:var(--eco-base);text-wrap:balance;
  }
  .s2p-txt p{margin:0 0 18px;font-size:16px;line-height:1.65;color:var(--light-tx2);max-width:43ch}
  .s2p-txt a{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--eco-base);text-decoration:none}
  .s2p-txt a .arr{transition:transform .18s ease;display:inline-block}
  .s2p-txt a:hover .arr{transform:translateX(3px)}
  .s2p-txt a:focus-visible{outline:2px solid var(--eco-focus);outline-offset:3px;border-radius:4px}

  .s2p-arte{
    position:relative;width:min(100%,470px);aspect-ratio:16/11;justify-self:end;
    display:grid;place-items:center;overflow:hidden;
    background:rgba(255,255,255,.92);
    border:1px solid color-mix(in srgb,var(--tv) 18%,var(--eco-card-bd));
    border-radius:var(--eco-card-r);
    box-shadow:inset 0 1px 0 #fff,inset 0 3px 0 var(--tv-soft),0 2px 4px -2px rgba(16,24,40,.10),var(--eco-card-shadow);
  }
  .s2p-arte .art{position:relative;width:68%;height:68%;display:grid;place-items:center;color:var(--tv-ink)}
  .s2p-arte .cap{
    position:absolute;left:16px;bottom:12px;margin:0;
    font-family:'Manrope',sans-serif;font-size:9.5px;text-transform:uppercase;
    letter-spacing:.15em;font-weight:600;color:rgba(16,24,40,.48);
  }

  .mg-top.s2p-fecho .s2p-txt{position:relative;z-index:2}
  .s2p-fecho .s2p-txt p{max-width:48ch;font-size:16.5px}
  .s2p-fecho .n{
    display:block;font-family:'Manrope',sans-serif;font-size:clamp(42px,4.2vw,58px);
    font-weight:600;letter-spacing:-.045em;line-height:.96;color:var(--tv-ink);margin-bottom:10px;
  }
  .s2p-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start;margin:2px 0 22px}
  .s2p-chips span{
    display:inline-flex;align-items:center;min-height:30px;padding:5px 13px;
    font-size:12.5px;font-weight:600;color:var(--light-tx2);background:var(--eco-card-bg);
    border:1px solid var(--eco-card-bd);border-radius:999px;
    box-shadow:0 5px 14px -13px rgba(16,24,40,.55);
  }
  .s2p-fecho a.btn-f{
    display:inline-flex;align-items:center;justify-content:center;min-height:46px;margin:0 auto;padding:11px 26px;
    font-size:14px;font-weight:600;color:#fff;text-decoration:none;
    background:var(--bg);border-radius:999px;box-shadow:0 12px 28px -18px rgba(16,24,40,.72);
    transition:opacity .18s ease,transform .18s ease,box-shadow .18s ease;
  }
  .s2p-fecho a.btn-f:hover{opacity:.94;transform:translateY(-1px);box-shadow:0 16px 30px -18px rgba(16,24,40,.78)}
  .s2p-fecho a.btn-f:focus-visible{outline:2px solid var(--eco-focus);outline-offset:3px}

  /* ================= O MOCKUP DO HUB (D2): a box termina aqui =============
     Moldura de navegador minima (tres pontos, sem URL inventada) segurando o
     SCREENSHOT estatico do prototipo de Suporte. A imagem tem width/height
     no markup (sem layout shift) e loading lazy. O tema CLARO do prototipo
     e decisao declarada: dentro da box clara ele se integra; o navy comeca
     na secao seguinte. */
  /* moldura em tratamento escuro (adendo da noite): vidro navy com o traco
     azul; serve aos dois screenshots, como o chrome de um navegador real */
  .mg-mock{
    position:relative;
    margin:var(--mg-stack-gap) auto 0;max-width:1080px;
    border-radius:22px;overflow:hidden;
    background:#0A0F26;border:1px solid rgba(157,185,255,.20);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.09),
      0 3px 8px -5px rgba(0,0,0,.5),
      0 18px 42px -28px rgba(0,0,0,.62),
      0 48px 96px -56px rgba(0,0,0,.8);
  }
  .mk-chrome{
    display:flex;align-items:center;gap:6px;height:38px;padding:0 16px;
    background:#0D1330;border-bottom:1px solid rgba(255,255,255,.08);
  }
  .mk-chrome i{
    width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  }
  .mk-chrome i:nth-child(2){opacity:.82}
  .mk-chrome i:nth-child(3){opacity:.64}
  /* o toggle sol/lua: discreto na ponta direita da barra; so existe com JS */
  .mk-tema{
    position:absolute;top:6px;right:10px;z-index:1;
    display:none;align-items:center;justify-content:center;
    width:26px;height:26px;padding:0;border:0;border-radius:8px;
    background:transparent;color:rgba(255,255,255,.55);cursor:pointer;
    transition:background .18s ease,color .18s ease;
  }
  .tem-toggle .mk-tema{display:inline-flex}
  .mk-tema:hover{background:rgba(255,255,255,.08);color:#fff}
  .mk-tema:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .mk-tema svg{width:15px;height:15px}
  .mg-mock[data-tema="dark"] .mk-lua{display:none}
  .mg-mock[data-tema="claro"] .mk-sol{display:none}
  .mg-mock img{display:block;width:100%;height:auto;background:#0A0F26}
  .mg-mock[data-tema="claro"] img{background:#fff}

  /* ============== SERVICOS E EDUCACAO NO NAVY (D1 da leva) ==============
     Fora da box, sobre o navy oficial: a emenda com a base do #empresa e
     navy com navy (sem linha por construcao). Os topicos reusam .s2p-txt
     com as cores invertidas; contraste medido na prova da rodada. */
  section.pad.sv-sec,section.pad.ed-sec{
    --navy-pad-y:clamp(64px,6.2vw,100px);
    position:relative;z-index:1;padding-block:var(--navy-pad-y);
    background:var(--bg,#04081F);
  }
  /* Da educacao para baixo a pagina rola reta, por ordem da autora (01/09):
     nada gruda e nada sobe por cima. O que era sticky aqui (a educacao
     parando na base da janela e o por-que subindo como folha) saiu; o que
     ficou dessas dobras e so a veste, sem comportamento de scroll. O
     overflow-x:clip saiu junto: ele existia para o video que ocupava a
     viewport inteira, e o quadro de hoje vive dentro do wrap. */
  .sv-sec[data-v],.ed-sec[data-v]{--tv:var(--blue);--tv-ink:#9DB9FF;--tv-soft:rgba(57,114,253,.30)}
  .sv-abertura,.ed-abertura{max-width:min(100%,780px);margin:0 0 clamp(44px,4vw,60px)}
  .sv-abertura h3,.ed-abertura h3{
    margin:0 0 clamp(14px,1.5vw,20px);
    font-family:"Manrope",sans-serif;font-size:clamp(36px,3.8vw,56px);
    font-weight:600;line-height:1.04;letter-spacing:-.045em;
    color:#fff;text-wrap:balance;
  }
  .sv-abertura p,.ed-abertura p{
    max-width:62ch;margin:0;
    font-size:clamp(18px,1.55vw,22px);line-height:1.55;
    color:rgba(255,255,255,.72);text-wrap:pretty;
  }
  /* ============ A VESTE NAVY (.vez-navy): Tecnologia e Servicos ============
     Toda inversao de cor pro fundo escuro mora aqui, uma casa so. Contrastes
     medidos na prova da rodada (branco .74 sobre navy ~13:1; #9DB9FF ~9,8). */
  .vez-navy .mg-abertura h3{color:#fff}
  .vez-navy .mg-abertura p{color:rgba(255,255,255,.72)}
  .vez-navy .s2p-txt h4{color:#fff}
  .vez-navy .s2p-txt p{color:rgba(255,255,255,.74)}
  .vez-navy .s2p-txt a{color:#fff}
  .vez-navy .s2p-txt .kick,.vez-navy .s2p-meta{color:#9DB9FF}
  .vez-navy .s2p-ic{color:#9DB9FF;background:rgba(57,114,253,.16);border-color:rgba(57,114,253,.32)}
  .vez-navy .mg-tab i{background:rgba(255,255,255,.14)}
  .vez-navy .mg-tab.ativa i{background:rgba(57,114,253,.34)}
  .vez-navy .mg-tab i::after{background:#9DB9FF}
  .vez-navy .mg-tab:focus-visible{outline-color:#fff}
  .vez-navy .mg-vez:not(.vez-on) .mg-top + .mg-top{border-top-color:rgba(255,255,255,.12)}
  /* o palco de imagem vira vidro escuro; slot e legenda claros */
  .vez-navy .mg-palco{
    background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.13);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 4px 12px -9px rgba(0,0,0,.5),0 28px 62px -40px rgba(0,0,0,.7);
  }
  .vez-navy .mg-cena{color:rgba(157,185,255,.5)}
  .vez-navy .mg-cena .cap{color:rgba(255,255,255,.38)}
  /* o fecho +13 no escuro: chips de vidro e o botao invertido (nunca navy
     sobre navy) */
  .vez-navy .s2p-fecho .n{color:#9DB9FF}
  .vez-navy .s2p-chips span{
    color:rgba(255,255,255,.82);background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.15);box-shadow:none;
  }
  .vez-navy .s2p-fecho a.btn-f{background:#fff;color:var(--bg,#04081F)}
  .vez-navy .s2p-txt a:focus-visible,.vez-navy .s2p-fecho a.btn-f:focus-visible{outline-color:#fff}
  /* ============== O QUADRO DA FOTO (item 8 + adendo) ==============
     O painel copia o vocabulario da HERO: mesmo inset, raio e traco
     (--s2h-inset/--s2h-r nao alcancam aqui, entao os valores sao os MESMOS
     clamps, nomeados de novo). A foto cobre o quadro LIMPA, sem veu (ajuste
     da autora); o conteudo vive na coluna direita.
     No modo scroll o quadro ocupa a tela (pin em cima do inset) e a coluna
     troca resumo -> topicos por posicao. */
  .sv-sec{--q-inset:clamp(6px,.9vw,12px);--q-r:clamp(20px,2.2vw,30px)}
  section.pad.sv-sec{padding-block:var(--navy-pad-y) 0}
  .sv-quadro{
    position:relative;isolation:isolate;overflow:hidden;
    margin-inline:var(--q-inset);
    border-radius:var(--q-r);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 26px 60px -46px rgba(0,0,0,.7);
  }
  .vez-scroll .sv-quadro{height:calc(100vh - 2 * var(--q-inset))}
  .sv-sec.vez-scroll .mg-pin{top:var(--q-inset)}
  .sv-sec{--mg-faixas:4}   /* resumo + 3 topicos */
  /* AJUSTE DA AUTORA: SEM veu/scrim sobre a foto: ela fica limpa. O texto se
     apoia nas areas naturalmente escuras do proprio enquadramento (object-
     position calibrado por medicao) e num text-shadow sutil: nunca um
     gradiente por cima da imagem.
     [FLAG PRA AUTORA] SEM veu o contraste NAO fecha: varri 9 enquadramentos
     e o pior pixel sob o texto fica entre 0,76 e 0,80 de luminancia (a
     metade direita da foto 48 e toda clara: mesa, telas). Melhor caso 1,2:1
     contra o piso de 4,5. Ficou o melhor enquadramento (60% 50%) +
     text-shadow, SEM gradiente, aguardando a decisao dela (foto no relato). */
  .sv-foto{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
  .sv-direita .s2p-txt h4,.sv-direita .s2p-txt p,.sv-direita .s2p-txt a,
  .sv-abertura h3,.sv-abertura p{text-shadow:0 1px 2px rgba(4,8,31,.55),0 6px 22px rgba(4,8,31,.45)}
  .sv-direita{
    position:relative;height:100%;
    display:flex;justify-content:flex-end;align-items:center;
    padding:clamp(24px,4vw,58px);
  }
  .sv-direita > *{width:min(460px,100%)}
  .sv-abertura{margin:0}
  /* os dois estados da direita empilham no modo scroll e trocam por classe */
  .vez-scroll .sv-direita{display:grid;justify-content:end;align-items:center}
  .vez-scroll .sv-direita > *{grid-area:1/1}
  .vez-scroll .sv-passo,
  .vez-scroll .sv-vez{transition:opacity .28s ease,visibility 0s .28s}
  .vez-scroll.mostra-resumo .sv-vez{opacity:0;visibility:hidden}
  .vez-scroll.mostra-resumo .sv-passo{opacity:1;visibility:visible;transition-delay:0s}
  .vez-scroll:not(.mostra-resumo) .sv-passo{opacity:0;visibility:hidden}
  .vez-scroll:not(.mostra-resumo) .sv-vez{opacity:1;visibility:visible;transition-delay:0s}
  @media(max-width:900px){
    /* no toque o quadro tem altura natural: a foto vira faixa, o resumo fica
       sempre visivel e os topicos rodam por tempo sobre o navy pleno */
    .sv-quadro{margin-inline:0;border-radius:24px}
    .sv-foto{position:static;display:block;aspect-ratio:16/10;height:auto}
    .sv-direita{height:auto;display:block;padding:26px 18px 8px}
    .sv-direita > *{width:100%}
    .sv-abertura{margin-bottom:26px}
  }
  /* ============== EDUCACAO COM PRESENCA (D4) ==============
     Titulo em display grande com o resumo deslocado a direita (a diagramacao
     dinamica da referencia conceptzilla). O video que crescia com o scroll
     saiu por ordem da autora (01/09): entrou no lugar a cena da /imersao, no
     tamanho final desde a primeira pintura. A costura de
     cor DECLARADA: educacao segue no navy continuo (do servico ao por-que a
     pagina vive um ato escuro; quem devolve o claro e a folha das
     avaliacoes). */
  .ed-abertura{
    display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
    gap:clamp(24px,3.4vw,64px);align-items:end;
    max-width:none;margin:0 0 clamp(52px,4.8vw,76px);
  }
  .ed-abertura h3{font-size:clamp(44px,6.4vw,92px);line-height:.98;letter-spacing:-.05em;margin:0}
  .ed-abertura p{padding-bottom:.5em}
  @media(max-width:760px){.ed-abertura{grid-template-columns:1fr;align-items:start}.ed-abertura p{padding-bottom:0}}
  /* ---- a cena da sede, a mesma peca da /imersao ----
     O video e a moldura vem de la (lp.css, bloco .sede-*): mesma anatomia
     (vidro por camadas, luz atras, scrim, etiqueta, legenda e o botao de
     parar), na cor desta pagina. O vidro e feito por camadas e nao por
     backdrop-filter de proposito: quem anima na entrada e o proprio quadro,
     e transform em ancestral mata o desfoque de fundo.
     A escala que crescia com o scroll saiu por ordem da autora (01/09): o
     quadro nasce no tamanho final. */
  .ed-quadro{
    position:relative;margin:0 0 clamp(64px,5.8vw,92px);
    display:flex;flex-direction:column;
    padding:clamp(8px,.9vw,14px);
    border-radius:clamp(24px,2.8vw,38px);
    border:1px solid rgba(255,255,255,.12);
    background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.02) 46%,rgba(255,255,255,.05));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.35);
  }
  .ed-glow{
    position:absolute;z-index:-1;inset:12% -5% -14%;pointer-events:none;
    background:radial-gradient(56% 62% at 50% 64%,rgba(57,114,253,.40),rgba(57,114,253,.12) 52%,transparent 76%);
    filter:blur(72px);
  }
  .ed-cena{
    position:relative;isolation:isolate;
    border-radius:clamp(18px,2vw,28px);overflow:hidden;
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 40px 90px -50px rgba(0,0,0,.85);
  }
  /* o video e ambiente (mudo, em repeticao, sem controles), entao nao recebe
     clique: quem manda e o botao da cena. A capa vem DEPOIS dele no DOM e
     segura o quadro ate o arquivo rodar de verdade. */
  .ed-yt{
    position:relative;display:block;width:100%;overflow:hidden;
    aspect-ratio:16/9;max-height:78vh;background:#0A0F26;
  }
  .ed-yt video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
  .ed-capa{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s ease}
  .ed-yt.ed-on .ed-capa{opacity:0}
  /* tocar/pausar o video: desenho do .sede-pausa da /imersao (lp.css). Um
     icone por estado: rodando mostra a pausa, parado mostra o play. Fica no
     alto do card porque a base e do texto. */
  .ed-pausa{
    position:absolute;top:16px;right:16px;z-index:3;width:44px;height:44px;padding:0;
    display:grid;place-items:center;border-radius:50%;cursor:pointer;
    color:rgba(255,255,255,.92);background:rgba(6,12,34,.5);border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .2s,border-color .2s;
  }
  .ed-pausa:hover{background:rgba(6,12,34,.72);border-color:rgba(255,255,255,.32)}
  .ed-pausa:focus-visible{outline:2px solid var(--teal,#5BC0BE);outline-offset:3px}
  .ed-pausa svg{grid-area:1/1;width:16px;height:16px}
  .ed-pausa .ed-ic-pausa{display:none}
  .ed-pausa[aria-pressed="false"] .ed-ic-pausa{display:block}
  .ed-pausa[aria-pressed="false"] .ed-ic-play{display:none}
  .ed-scrim{
    position:absolute;inset:0;pointer-events:none;
    background:
      linear-gradient(180deg,rgba(4,8,31,.5) 0%,transparent 26%),
      linear-gradient(0deg,rgba(4,8,31,.88) 0%,rgba(4,8,31,.5) 28%,transparent 54%);
  }
  .ed-tag{
    position:absolute;left:clamp(16px,2vw,26px);top:clamp(16px,2vw,24px);
    display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;
    font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
    color:rgba(255,255,255,.86);background:rgba(6,12,34,.5);
    border:1px solid rgba(255,255,255,.16);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  }
  .ed-legenda{
    position:absolute;left:clamp(16px,2.4vw,32px);bottom:clamp(16px,2.4vw,30px);
    display:flex;flex-direction:column;gap:8px;max-width:min(56%,760px);
  }
  .ed-onde{
    font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
    color:rgba(255,255,255,.66);
  }
  .ed-frase{
    /* o limite vive AQUI, e nao na caixa: `ch` na caixa vale a fonte dela */
    max-width:16ch;font-size:clamp(28px,3.4vw,50px);font-weight:600;
    line-height:1.2;letter-spacing:-.025em;color:#fff;
  }
  @media(max-width:640px){
    /* no celular o 16:9 vira uma faixa: aqui o quadro volta a ter altura */
    .ed-yt{aspect-ratio:4/3}
    .ed-frase{font-size:24px;max-width:14ch}
    .ed-legenda{max-width:76%}
  }
  /* educacao: cards SEM box em grade de 3, separados por reguas finas
     horizontais (referencia da autora). Com 4 cursos o quarto abre a
     segunda linha: a regua superior de cada card mantem a leitura. */
  /* item 9b: os 4 cursos FIXOS lado a lado; 2x2 no tablet, pilha no toque */
  .ed-cards{
    display:grid;grid-template-columns:repeat(4,1fr);
    column-gap:clamp(22px,2.6vw,44px);row-gap:clamp(10px,1.2vw,18px);
  }
  .ed-card{
    position:relative;display:flex;flex-direction:column;align-items:flex-start;
    padding:clamp(22px,2.4vw,30px) 0;border:0;
    transition:transform .32s cubic-bezier(.22,1,.36,1);
  }
  .ed-card::before{
    content:"";position:absolute;inset:0 0 auto;height:1px;
    background:linear-gradient(90deg,rgba(157,185,255,.28),rgba(255,255,255,.10));
    opacity:.72;transition:opacity .28s ease;
  }
  .ed-card .s2p-ic{
    color:#9DB9FF;background:rgba(57,114,253,.16);border-color:rgba(57,114,253,.32);
    margin-bottom:14px;transition:transform .32s cubic-bezier(.22,1,.36,1),background-color .28s ease;
  }
  .ed-card h4{margin:0 0 10px;font-size:clamp(19px,1.6vw,22px);font-weight:600;letter-spacing:-.025em;line-height:1.2;color:#fff;text-wrap:balance}
  .ed-card p{margin:0 0 16px;font-size:15px;line-height:1.6;color:rgba(255,255,255,.72)}
  .ed-card a{display:inline-flex;align-items:center;gap:7px;margin-top:auto;font-size:14px;font-weight:600;color:#fff;text-decoration:none}
  .ed-card a .arr{transition:transform .18s ease;display:inline-block}
  .ed-card a:hover .arr{transform:translateX(3px)}
  .ed-card a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}
  @media(hover:hover) and (pointer:fine){
    .ed-card:hover{transform:translateY(-3px)}
    .ed-card:hover::before{opacity:1}
    .ed-card:hover .s2p-ic{transform:translateY(-1px);background:rgba(57,114,253,.22)}
  }
  @media(max-width:1060px){.ed-cards{grid-template-columns:1fr 1fr}}
  @media(max-width:640px){.ed-cards{grid-template-columns:1fr}}


  /* ===== os motivos (vocabulario do #355, adaptado ao claro: presenca por
     cor cheia e traco, nunca brilho, que sobre F2F2F2 vira mancha) ===== */
  .m-orbit .ring{position:absolute;border:1.5px solid currentColor;border-radius:50%;opacity:.5}
  .m-orbit .r1{inset:14%;animation:s2pSpin 14s linear infinite}
  .m-orbit .r2{inset:0;border-style:dashed;opacity:.3;animation:s2pSpin 26s linear infinite reverse}
  .m-orbit .nucleus{width:22%;aspect-ratio:1;border-radius:50%;background:currentColor;animation:s2pPulse 3.4s ease-in-out infinite}
  .m-orbit .sat{position:absolute;top:6%;left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:currentColor}
  .m-nodes svg{width:100%;height:100%}
  .m-nodes line{stroke:currentColor;stroke-width:1.2;opacity:.35}
  .m-nodes circle{fill:currentColor}
  .m-nodes .p1{animation:s2pPulse 3s ease-in-out infinite}
  .m-nodes .p2{animation:s2pPulse 3s ease-in-out .6s infinite}
  .m-nodes .p3{animation:s2pPulse 3s ease-in-out 1.2s infinite}
  .m-flow{display:flex;flex-direction:column;gap:12px;width:100%}
  .m-flow .fstep{display:flex;align-items:center;gap:10px}
  .m-flow .bul{width:9px;height:9px;border-radius:50%;border:1.5px solid currentColor;flex:none}
  .m-flow .bar{height:9px;border-radius:5px;background:currentColor;opacity:.25;flex:1}
  .m-flow .fstep:nth-child(1) .bar{opacity:.9}
  .m-flow .fstep:nth-child(2) .bar{width:78%;flex:none;animation:s2pGrow 4.2s ease-in-out infinite}
  .m-flow .fstep:nth-child(3) .bar{width:56%;flex:none;animation:s2pGrow 4.2s ease-in-out .7s infinite}
  .m-flow .fstep:nth-child(4) .bar{width:34%;flex:none;animation:s2pGrow 4.2s ease-in-out 1.4s infinite}
  .m-bars{display:flex;align-items:flex-end;gap:10px;width:100%;height:100%}
  .m-bars i{flex:1;border-radius:6px 6px 2px 2px;background:currentColor;opacity:.55;transform-origin:bottom}
  .m-bars i:nth-child(1){height:38%;animation:s2pStretch 4s ease-in-out infinite}
  .m-bars i:nth-child(2){height:62%;animation:s2pStretch 4s ease-in-out .4s infinite}
  .m-bars i:nth-child(3){height:46%;animation:s2pStretch 4s ease-in-out .8s infinite}
  .m-bars i:nth-child(4){height:82%;opacity:.95;animation:s2pStretch 4s ease-in-out 1.2s infinite}
  .m-bars i:nth-child(5){height:56%;animation:s2pStretch 4s ease-in-out 1.6s infinite}
  .m-stage2{display:flex;flex-direction:column;gap:16px;width:100%;align-items:center}
  .m-stage2 .screen{width:88%;height:52px;border-radius:10px;border:1.5px solid currentColor;opacity:.75}
  .m-stage2 .crowd{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;width:88%}
  .m-stage2 .crowd i{height:9px;border-radius:50%;background:currentColor;opacity:.3}
  .m-stage2 .crowd i:nth-child(3n){opacity:.7;animation:s2pPulse 3.6s ease-in-out infinite}
  .m-board{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;height:100%}
  .m-board .col{display:flex;flex-direction:column;gap:8px;border:1px solid var(--eco-card-bd);border-radius:10px;padding:8px}
  .m-board .cd{height:14px;border-radius:5px;background:currentColor;opacity:.22}
  .m-board .col:nth-child(1) .cd:nth-child(1){opacity:.75;animation:s2pRise 4s ease-in-out infinite}
  .m-board .col:nth-child(2) .cd:nth-child(1){opacity:.55;animation:s2pRise 4s ease-in-out .8s infinite}
  .m-board .col:nth-child(3) .cd:nth-child(1){opacity:.9;animation:s2pRise 4s ease-in-out 1.6s infinite}
  .m-sheets{position:relative;width:78%;height:82%}
  .m-sheets i{position:absolute;inset:0;border:1.5px solid currentColor;border-radius:10px;opacity:.3}
  .m-sheets i:nth-child(1){transform:translate(-9%,-9%) rotate(-4deg)}
  .m-sheets i:nth-child(2){transform:translate(0,0) rotate(1deg);opacity:.55}
  .m-sheets i:nth-child(3){transform:translate(9%,9%) rotate(5deg);opacity:.85;animation:s2pFade2 4.6s ease-in-out infinite}
  .m-grid2{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:9px;width:100%;height:100%}
  .m-grid2 i{width:100%;height:100%;border-radius:7px;background:currentColor;opacity:.18;animation:s2pFade2 5s ease-in-out infinite}
  .m-grid2 i:nth-child(1),.m-grid2 i:nth-child(6),.m-grid2 i:nth-child(11){opacity:.85;border-radius:9px}
  .m-grid2 i:nth-child(2){animation-delay:.3s}
  .m-grid2 i:nth-child(4){animation-delay:.7s}
  .m-grid2 i:nth-child(7){animation-delay:1.1s}
  .m-grid2 i:nth-child(9){animation-delay:1.5s}
  .m-grid2 i:nth-child(12){animation-delay:1.9s}
  .m-grid2 i:nth-child(14){animation-delay:2.3s}
  .m-grid2 i:nth-child(16){animation-delay:2.7s}
  @keyframes s2pSpin{to{transform:rotate(360deg)}}
  @keyframes s2pPulse{0%,100%{opacity:.45;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
  @keyframes s2pRise{0%,100%{opacity:.3;transform:translateY(3px)}50%{opacity:.9;transform:translateY(-3px)}}
  @keyframes s2pGrow{0%,100%{opacity:.2}50%{opacity:.8}}
  @keyframes s2pStretch{0%,100%{transform:scaleY(.86)}50%{transform:scaleY(1.08)}}
  @keyframes s2pFade2{0%,100%{opacity:.25}50%{opacity:.85}}


  @media(max-width:900px){
    /* Em 390px o pin disputaria altura com as barras do navegador e deixaria
       o texto sem area digna. A mesma marcacao vira uma pilha natural: nao ha
       captura de gesto, e os 12 topicos continuam integralmente acessiveis. */
    .s2p-palco{aspect-ratio:1200/560}
    /* as luzes sao desktop: no toque somem e o custo novo do fundo e zero
       (grade, vinheta, arco e celulas sao paint estatico). As extensoes
       LATERAIS zeram: o container estendido vazava 88px pela direita. */
    .s2p-luzes{display:none}
    .s2p-eco{--fundo-ext-l:0px}
    .s2p-eco{--eco-sup-y:21.4286%;--eco-sup-w:26%}
    .s2p-fios2-h{display:none}
    .s2p-fios2-v{display:block}
    /* a box no toque: uma coluna, palco acima da lista (sem sticky: a tela e
       curta e o palco grudado comeria a lista), margens menores */
    .mg-box{width:100%;margin-inline:0;border-radius:24px}
    /* O glow continua maior que a box, mas cabe no viewport: o -80px desktop
       era o ultimo overflow visual depois de conter as celulas decorativas. */
    .mg-box::before{inset-inline:-24px}
    .mg-sec{padding:34px clamp(16px,4vw,24px)}
    .mg-abertura{max-width:none;margin-bottom:32px}
    .mg-abertura h3{margin-bottom:12px;font-size:32px;line-height:1.08}
    .mg-abertura p{font-size:17px;line-height:1.55}
    .mg-grid{grid-template-columns:1fr;gap:20px}
    /* reforco da autora: o texto NUNCA fica abaixo da imagem: no toque o
       bloco de topicos vem primeiro e o palco desce */
    #tecnologia .mg-palco{order:2}
    #tecnologia .mg-vez{order:1}
    .mg-palco{position:static;aspect-ratio:16/10}
    .mg-top.s2p-fecho .s2p-txt{padding:0 4px}
    /* Em 390px estas sao as descricoes que o pretty ainda fechava com palavra
       isolada. O balance local redistribui as mesmas linhas sem mudar copy ou
       estreitar a coluna. */
    #tecnologia .mg-top[data-i="2"] .s2p-txt > p:not(.kick),
    #servicos .mg-top[data-i="2"] .s2p-txt > p:not(.kick){text-wrap:balance}
    .s2p-fecho .s2p-txt{text-align:left;justify-self:start}
    .s2p-chips{justify-content:flex-start}
    .s2p-fecho a.btn-f{margin:0}
    section.pad.sv-sec,section.pad.ed-sec{--navy-pad-y:52px}
    .ed-quadro{margin-bottom:56px}
  }
  @media(prefers-reduced-motion:reduce){
    /* a base já é inteira por padrão; o segmento de carga fica atracado */
    .s2p-eco .s2p-carga-cauda,[data-entrada] .s2p-eco .s2p-carga-cauda{stroke-dashoffset:-.52px}
    .s2p-eco .s2p-carga,[data-entrada] .s2p-eco .s2p-carga{stroke-dashoffset:-.66px}
    .s2p-ly.e,.s2p-ly.m,.s2p-ly.i,.s2p-feixe,.s2p-linha-pulso{animation:none}
    .s2p-feixe,.s2p-malha-pulso,.s2p-linha-pulso{display:none}
    /* o estado de referencia do reduced-motion e o CONECTADO: linha inteira
       (o dashoffset 0 ja e forcado acima) e o tom da dobra ja subido */
    #empresa{--dobra-bg:var(--dobra-bg-ligada);transition:none}
    .mg-box::before{opacity:1;transform:none;transition:none}
    /* Tudo visivel e parado. O JS nao aplica o pin neste modo, e esta regra
       garante o mesmo resultado se a preferencia mudar durante a visita. */
    .s2p-pin{position:static !important;height:auto !important}
    .mg-palco{position:static}
    .mg-cena{opacity:1;transform:none;transition:none}
    .rv2,.mg-top{transition:none}
    .rv2:hover,.mg-top:not(.ativa):hover{transform:none}
    /* sem autoplay: o JS nao arma o .vez-on neste modo, os topicos ficam
       empilhados pelo CSS base e as abas nem aparecem */
    .mg-tab i::after{animation:none !important}
    .s2p-arte .art *,.s2p-arte .art{animation:none !important}
  }

  /* ===================== A OFERTA (bloco escuro) =====================
     A dobra que era a tese passa a abrir com a frase da oferta e três cartões,
     um por frente. Diagramada com a ETIQUETA LATERAL da página, e não centrada
     como a dobra anterior: são duas dobras seguidas e o olho precisa ler as
     duas em ritmos diferentes.
     Ela FICA NO BLOCO ESCURO que já era desta seção, e isso é decisão de
     projeto: a #frentes, logo abaixo, também nomeia Tecnologia, Serviços e
     Educação em três cartões, e aqueles são claros. Se esta virasse cartão
     claro também, seriam duas grades iguais coladas uma na outra. Escuro aqui,
     claro lá, e a repetição vira ritmo em vez de eco. A colisão de TEXTO
     continua existindo e está no relato, porque não se resolve com cor.
     A tese não morre com a troca: ela se distribui, uma linha por cartão, e a
     assinatura fecha o bloco. É a frase que a `voz/marvee/sobre.md` guarda como
     posicionamento da empresa, e era a única coisa na página que dizia por que
     as três juntas, e não só quais são. */
  /* A DOBRA EM NAVY (adendo: a pagina mergulha no azul e nao volta). Forma,
     nao conteudo: a section carrega o navy oficial, o texto inverte para o
     claro e o wrapper .ink se dissolve (caixa sobre caixa leria como moldura
     dupla). Os cartoes ja nasceram no vocabulario navy do Hub (borda branca
     de alfa baixo) e ficam como estao. A costura de cima emenda navy com
     navy na base da dobra 2. */
  /* o alfa do fecho de cartao sobe de .52 para .66: sobre o navy puro o .52
     media 4,1:1, abaixo do piso de 4,5 */
  /* O cartão é caixa, não coluna com filete: dentro do escuro o filete some e
     três colunas soltas leem como parágrafo em três partes. */
  /* `margin-top:auto` alinha a linha da tese na mesma base nos três cartões,
     mesmo com descrições de alturas diferentes. */
  @media(max-width:820px){
  }

  /* ===================== BLOCO DE TESE ===================== */
  .stmt .st-chip{
    display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:99px;margin-bottom:20px;
    font-size:12.5px;font-weight:600;color:var(--teal);
    background:rgba(91,192,190,.12);border:1px solid rgba(91,192,190,.3);
  }
  .stmt p{font-size:clamp(19px,2.2vw,28px);font-weight:400;letter-spacing:-.028em;line-height:1.36;color:var(--white)}
  .stmt p b{font-weight:600;color:var(--teal)}
  .stmt .st-sig{margin-top:16px;font-size:15px;color:rgba(255,255,255,.6);font-weight:400}

  /* ===================== O QUE OFERECEMOS (as três frentes à vista) =========
     Três cartões lado a lado, um por frente. O seletor de pílulas saiu: com ele,
     só a frente aberta aparecia (Tecnologia), e Serviços e Educação ficavam
     invisíveis pra quem só rola a página. */
  @media(max-width:980px){.frentes-grid{grid-template-columns:1fr;gap:14px}}

  /* índice das frentes: cartão curto que aponta pra dobra de cada uma. A foto e
     a lista de produtos saíram daqui e viraram a dobra própria, senão o mesmo
     conteúdo apareceria duas vezes na página. */

  /* ===================== DOBRA DE FRENTE (uma por frente) =====================
     Mesma espinha nas três: cabeça de seção, foto de um lado, produtos do outro,
     e a porta de saída. A foto troca de lado a cada dobra pra dar ritmo. */
  a.fr-item:hover{border-color:var(--fc);background:var(--light-card)}
  a.fr-item:hover .fi-go{color:var(--light-tx);border-color:var(--light-mut)}
  @media(max-width:900px){
  }
  /* ===================== ABAS DE PÚBLICO =====================
     Os controles vivem na ponta direita da própria régua de abas, que é o que
     eles navegam. Soltos embaixo do rótulo, à esquerda, não tinham referência. */
  /* O bloco inteiro é um cartão escuro com as abas DENTRO dele, e o conteúdo em
     duas superfícies que conversam: texto no escuro à esquerda, a frase de
     virada num cartão CLARO à direita. É o padrão das quatro referências (o
     painel é fechado, não solto no fundo da página); antes estava sem cartão e
     sem inversão, o que dava cara de artigo. */
  .quem-card{padding:clamp(22px,2.6vw,34px)}
  .quem-top{display:flex;align-items:center;gap:16px;padding-bottom:clamp(18px,2.2vw,26px);border-bottom:1px solid rgba(255,255,255,.1)}
  .quem-top .arrows{margin:0;flex:none}
  @media(max-width:760px){
    .quem-top{flex-direction:column;align-items:stretch;gap:12px}
    .quem-top .arrows{justify-content:flex-end}
  }
  /* pílulas sobre o escuro: a ativa é a branca preenchida */
  .quem-card .abtn{border-color:rgba(255,255,255,.22);color:#fff;background:transparent}
  .quem-card .abtn:hover{background:rgba(255,255,255,.1)}
  .quem-card .abtn.solid{background:#fff;color:var(--bg);border-color:#fff}
  .quem-card .abtn.solid:hover{background:rgba(255,255,255,.86)}
  .quem-card .acount{color:rgba(255,255,255,.55)}
  /* O painel do perfil não é artigo: nada de dois blocos de texto lado a lado
     dentro de mais um cartão. Vira uma faixa só: ícone e título em cima, os
     sintomas como etiquetas (é o que se lê de relance) e a frase de virada numa
     tira escura no pé, com a nota ao lado dela em vez de virar outro parágrafo. */
  .tp-sig{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(18px,2.2vw,24px)}
  .tp-sig span{
    display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:99px;
    font-size:12.5px;font-weight:400;color:rgba(255,255,255,.7);
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  }
  .tp-sig span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tc,var(--teal));flex:none}
  /* a virada vira o cartão claro do lado direito: é a inversão de superfície que
     dá a leitura de "painel", em vez de texto sobre texto */

  /* ===================== CONTROLES CIRCULARES ===================== */
  .arrows{display:flex;gap:8px;margin-top:20px}
  .abtn{
    width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
    background:transparent;border:1px solid var(--light-line2);color:var(--light-tx);
    transition:background .2s, transform .2s, border-color .2s;
  }
  .abtn:hover{background:var(--light-card);border-color:var(--light-mut);transform:translateY(-1px)}
  .abtn.solid{background:var(--bg);border-color:var(--bg);color:#fff}
  .abtn.solid:hover{background:#0B1330}
  .abtn svg{width:15px;height:15px}
  .abtn[disabled]{opacity:.3;cursor:default}
  .abtn[disabled]:hover{background:transparent;transform:none;border-color:var(--light-line2)}
  .abtn.solid[disabled]:hover{background:var(--bg)}
  .acount{align-self:center;margin-right:6px;font-size:12.5px;font-weight:600;letter-spacing:.06em;color:var(--light-mut)}

  /* ===================== POR QUE A MARVEE (bento) =====================
     Três colunas, e a do meio é a prova, num cartão escuro que ocupa as duas
     linhas. Antes eram duas coisas empilhadas (um bloco navy solto e quatro
     cartões chapados embaixo); agora a prova é o centro e os diferenciais se
     organizam em volta dela.
     A ordem no HTML é card, DESTAQUE, card, card, card: com três colunas e o
     destaque ocupando duas linhas na coluna do meio, o posicionamento
     automático distribui os outros quatro nas laterais sem nenhuma regra a mais. */
  /* grid-auto-rows: as duas linhas ficam com a mesma altura; sem isso, a linha
     de baixo encolhia e os cartões laterais desalinhavam do cartão central. */
  .wgrid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:14px;align-items:stretch}
  /* A PROVA. É a única fala sobre nós mesmos no bento, então é o cartão
     diferenciado: ganha a BORDA EM GRADIENTE (a assinatura da marca; gradiente
     em borda é permitido, em texto e logo não) e os rostos reais da rede no pé,
     que dão lastro à frase das 150 pessoas.
     Técnica da borda: duas camadas em padding-box para o fundo e o gradiente em
     border-box, com a borda transparente. É o mesmo padrão do .btn-grad. */
  @media(max-width:980px){
    .wgrid{grid-template-columns:repeat(2,1fr)}
  }
  @media(max-width:700px){.wgrid{grid-template-columns:1fr}}

  /* ===================== AVALIAÇÕES =====================
     Três colunas iguais. Sem foto de perfil (uso de imagem de terceiro), a
     inicial do nome faz o papel do avatar. As estrelas são cor sólida.
     O layout antigo tinha cartão de citação, foto e dois tiles de número: saiu
     porque o número de resultado de cliente ainda não existe autorizado. */
  /* dobra compacta: cartão mais baixo (padding e vãos menores), texto 14,5px,
     estrela e avatar menores. A assinatura fica na mesma linha do nome, em vez
     de empilhada, o que corta duas linhas de altura por cartão. */
  /* duas colunas: com seis cartões a dobra virava um mural. Quatro em 2x2
     mantêm a leitura de conjunto sem pedir que ninguém leia tudo. */
  .revs{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-items:start}
  .rev{
    display:flex;flex-direction:column;gap:12px;margin:0;height:100%;
    background:var(--light-chrome);border:1px solid var(--light-line2);
    border-radius:16px;padding:clamp(18px,1.9vw,22px);
  }
  .rev .stars{display:flex;gap:2px;color:var(--orange)}
  .rev .stars svg{width:14px;height:14px}
  .rev blockquote{margin:0;font-size:14.5px;line-height:1.55;color:var(--light-tx);letter-spacing:-.01em}
  .rev figcaption{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:14px;border-top:1px solid var(--light-line)}
  .rev-av{
    width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;
    font-family:'Manrope',sans-serif;font-size:13.5px;font-weight:600;letter-spacing:-.02em;
    color:var(--light-tx);background:color-mix(in srgb, var(--fc) 20%, var(--light-card));
  }
  .rev figcaption b{font-size:14px;font-weight:600;color:var(--light-tx);letter-spacing:-.015em}
  .rev figcaption .fonte{font-size:12.5px;color:var(--light-mut);margin-left:7px}
  @media(max-width:900px){.revs{grid-template-columns:1fr}}
  /* ===================== CONTATO ===================== */
  .cta-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(24px,3vw,48px);align-items:center}
  .cta-grid .h2{margin-top:0}
  .cta-grid .lede{margin:16px 0 0;text-align:left;max-width:46ch}
  .cform{
    text-align:left;background:var(--light-chrome);border:1px solid var(--light-line2);border-radius:clamp(18px,2vw,26px);
    padding:clamp(24px,2.6vw,32px);
  }
  .cform .field{margin-bottom:14px}
  .cform .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .cform label{display:block;font-size:12.5px;font-weight:600;color:var(--light-tx);margin-bottom:6px;letter-spacing:-.01em}
  .cform label .req{color:#2E8C8A}
  .cform input,.cform select,.cform textarea{
    width:100%;font-family:'Manrope',sans-serif;font-size:14.5px;color:var(--light-tx);
    background:var(--light-card);border:1px solid var(--light-line2);border-radius:11px;
    padding:11px 14px;transition:border-color .2s, background .2s;
  }
  .cform textarea{resize:vertical;min-height:88px}
  .cform input::placeholder,.cform textarea::placeholder{color:var(--light-mut)}
  .cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--teal);background:var(--light-card)}
  .cform select{appearance:none;-webkit-appearance:none;cursor:pointer}
  .cform-submit{width:100%;margin-top:4px}
  .cform-msg{margin-top:12px;font-size:13px;color:var(--light-mut);text-align:center;min-height:16px}
  .cform-msg.err{color:#B23B00}
  .cform-done{display:none;text-align:center;padding:34px 20px;background:var(--light-card);border:1px solid var(--light-line);border-radius:26px}
  .cform-done.show{display:block}
  .cform-done .ok{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;background:color-mix(in srgb,var(--green) 16%, var(--light-card));color:#1E8C63}
  .cform-done h3{font-size:19px;font-weight:600;margin-bottom:8px;color:var(--light-tx)}
  .cform-done p{font-size:14.5px;color:var(--light-tx2);max-width:420px;margin:0 auto}
  .contato-alt{margin-top:22px;font-size:14px;color:var(--light-mut)}
  .contato-alt a{color:var(--light-tx);font-weight:600;border-bottom:1px solid var(--light-line2)}
  @media(max-width:900px){.cta-grid{grid-template-columns:1fr}}
  @media(max-width:560px){.cform .two{grid-template-columns:1fr;gap:14px}}

  /* ===================== RODAPÉ ===================== */
  footer{border-top:0;padding:0;color:rgba(255,255,255,.62)}
  .foot-cols{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:clamp(32px,4vw,58px);padding:clamp(62px,6vw,82px) 0 54px}
  .foot-cols .fc-lbl{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-bottom:18px}
  .foot-cols a{display:block;font-size:14px;color:rgba(255,255,255,.7);padding:6px 0;transition:color .2s,transform .2s}
  .foot-cols a:hover{color:#fff;transform:translateX(2px)}
  .foot-cols .fc-brand p{font-size:14px;color:rgba(255,255,255,.7);line-height:1.65;margin-top:20px;max-width:30ch}
  /* Logo oficial do conjunto (marca/logos): logotipo horizontal, positiva
     colorida, na variante do fundo. Antes a página montava o lockup à mão
     (símbolo legado + "Marvee" em texto), que não é a logo oficial.
     No nav e no rodape ela vai sobre navy: variante dark, com wordmark branco
     solido e simbolo oficial colorido. */
  nav .logo img{height:38px;width:auto;display:block}
  footer .logo img{height:54px;width:auto;display:block}
  footer .logo{min-height:0}
  .foot-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:24px 0 40px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:rgba(255,255,255,.6)}
  @media(max-width:900px){.foot-cols{grid-template-columns:1fr 1fr;gap:36px 28px}}
  @media(max-width:520px){.foot-cols{grid-template-columns:1fr}}

  /* ===== REGUA TIPOGRAFICA DA PAGINA (item 5 da rodada) =====
     So DOIS pesos computados na pagina inteira, tudo Manrope: 600 para
     titulos e elementos de enfase/acao (nav, botoes, labels, kick, numeros,
     nomes) e 400 para texto corrido. A varredura computada media 500/650/700
     em nav/gatilhos/links/labels e um Maven Pro 500 vazando do global na
     gaveta do toque: as regras abaixo zeram tudo pra regua. */
  body :is(h1,h2,h3,h4,.h2,.lg-titulo,.fc-lbl){font-weight:600;font-synthesis:none}
  body :is(h1,h2,h3,h4,.h2,.lg-titulo,.fc-lbl) :is(b,strong){font-weight:inherit}
  body :is(a,button,b,strong,.kick,.s2p-num,.mm-lbl,.nd-lbl,.rv2-av,.lg-item,.badge-pill,.cap){font-weight:600}
  body .nd-group-head{font-family:"Manrope",sans-serif;font-weight:600}
  /* o rotulo da gaveta vem de .nd-sub .nd-lbl no global: id vence */
  #s2hGaveta .nd-sub .nd-lbl{font-weight:600}

  /* =============================================================
     RECONSTRUCAO DA DOBRA 2 E DA DOBRA 3 (28/08, ordem da autora)
     Diagramacao extraida da referencia salix.framer.website em 1280:
     container 1060 (aqui o .wrap de 1180), grade de 3 colunas com gap 24,
     figura do card com raio 16 e proporcao 337x306, 24px entre a figura e
     o texto, titulo do card 18/600 com -0.3px, texto 16/400 em #46484D.
     Na secao "Key Tools": coluna fixa de 320 a esquerda, 84 de vao e 616
     a direita, 28px dentro do bloco e o topico ativo em azul.
     O prefixo .mv- e proprio destas duas dobras: nao colide com o global
     (.hero, .via, .num ja existem la) nem com o que sobrou do site2. */
  :root{
    --mv-ink:#181818;          /* texto principal */
    --mv-mut:#46484D;          /* texto de apoio */
    --mv-linha:rgba(16,24,40,.08);
    --mv-fig:#F4F5F7;          /* fundo da figura do card */
    --mv-azul:#2E6BFF;         /* o azul institucional ja usado na dobra */
    /* o azul do simbolo (#3A506B) suavizado um tom: mesma familia, menos
       peso no claro da dobra, e longe do royal #3972FD da paleta */
    --mv-fio-on:#4E6E92;
  }

  /* os cards: nao o branco pleno, um claro lavado de azul (escolha da
     autora de 03/09, que ficou quando a dobra voltou a ser clara em 04/09) */
  .mv-eco .mv-face{
    background:linear-gradient(180deg,#F0F4FD,#E2EAF9);
    border-color:rgba(255,255,255,.6);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 24px 48px -28px rgba(0,0,0,.55);
  }
  .mv-eco .mv-verso{background:linear-gradient(180deg,#F4F7FE,#DDE6F8)}
  .mv-eco .mv-card-ic{color:#2B55D4;background:#DCE6FB;border-color:rgba(43,85,212,.18)}
  .mv-eco .mv-card-lista{border-top-color:rgba(20,32,62,.10)}
  .mv-eco .mv-card-lista li::before{background:rgba(43,85,212,.38)}

  /* ---- cabecalho comum as duas dobras ---- */
  .mv-pill{
    display:inline-flex;align-items:center;gap:8px;
    padding:9px 16px;border-radius:100px;
    background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.06);
    font-family:'Manrope',sans-serif;font-size:14px;font-weight:600;
    letter-spacing:-.01em;color:var(--mv-ink);white-space:nowrap;
    align-self:flex-start;width:fit-content;
  }
  .mv-pill svg{width:16px;height:16px;flex:none;color:var(--mv-azul)}
  /* nas telas escuras a mesma pilula vira vidro: translucida, com a borda
     clara e o brilho de topo. O seletor pega qualquer secao marcada como
     escura, entao vale para as proximas dobras tambem. */
  [data-nav-theme="dark"] .mv-pill{
    background:rgba(255,255,255,.10);
    -webkit-backdrop-filter:blur(16px) saturate(1.4);
    backdrop-filter:blur(16px) saturate(1.4);
    border:1px solid rgba(255,255,255,.20);
    color:#fff;
    box-shadow:0 10px 28px -14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.16);
  }
  [data-nav-theme="dark"] .mv-pill svg{color:#6FA8FF}

  /* ---- DOBRA 2: o ecossistema ---- */
  .mv-eco{background:#F2F2F2;padding:132px 0 128px;position:relative;scroll-margin-top:120px;isolation:isolate}
  /* o fundo: grade tracejada de 44px + cruz a cada quatro celulas, com a
     mesma gramatura de antes. A mascara radial apaga os quatro limites do
     campo para a grade nunca terminar em corte reto. */
  .mv-fundo{
    position:absolute;inset:0;z-index:0;pointer-events:none;overflow:clip;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M.5 0V44M0 .5H44' fill='none' stroke='%232B55D4' stroke-opacity='.085' stroke-width='1' stroke-dasharray='2 5'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='176' height='176' viewBox='0 0 176 176'%3E%3Cpath d='M82.5 88.5H94.5M88.5 82.5V94.5' fill='none' stroke='%232B55D4' stroke-opacity='.18' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size:44px 44px,176px 176px;
    -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 46%,#000 0,#000 46%,rgba(0,0,0,.72) 68%,rgba(0,0,0,.24) 86%,transparent 100%);
    mask-image:radial-gradient(ellipse 62% 58% at 50% 46%,#000 0,#000 46%,rgba(0,0,0,.72) 68%,rgba(0,0,0,.24) 86%,transparent 100%);
  }
  .mv-cel{position:absolute;inset:0}
  .mv-cel i{
    position:absolute;box-sizing:border-box;
    left:calc(var(--gx) * 44px);top:calc(var(--gy) * 44px);width:44px;height:44px;
    border:1px solid rgba(43,85,212,.14);background:transparent;
  }
  .mv-cel i.s{background:rgba(57,114,253,.05);border-color:rgba(43,85,212,.10)}
  .mv-cel i.m{background:rgba(57,114,253,.09);border-color:rgba(43,85,212,.13)}
  .mv-eco > .wrap{position:relative;z-index:1}
  .mv-cab{
    max-width:780px;margin:0 auto;text-align:center;
    display:flex;flex-direction:column;align-items:center;gap:22px;
  }
  .mv-cab .mv-pill{align-self:center}
  .mv-cab h2{
    margin:0;font-family:'Manrope',sans-serif;
    font-size:clamp(34px,3.7vw,52px);font-weight:600;
    line-height:1.14;letter-spacing:-.035em;color:var(--mv-ink);
    text-wrap:balance;
  }
  /* tres linhas, por ordem da autora (04/09): a medida abre de 660 para 800
     e o balance reparte a frase por igual */
  .mv-lede{
    margin:0;max-width:800px;font-size:17px;line-height:1.68;
    color:var(--mv-mut);text-wrap:balance;
  }

  /* a cena dos fios: altura fixa, o simbolo no topo e os tres fios
     descendo ate a borda de baixo, que encosta no topo dos cards */
  /* a cena: a trilha comeca 96px abaixo do topo, na base do simbolo, e o
     palco tem altura para o fluxo dar a volta pelas bordas */
  .mv-cena{position:relative;height:396px;margin:48px 0 0}
  .mv-painel{position:absolute;left:0;right:0;top:96px;bottom:0}
  .mv-simbolo{
    position:absolute;left:50%;top:0;transform:translateX(-50%);
    width:168px;height:168px;display:grid;place-items:center;z-index:3;
    --eco-ease:cubic-bezier(.22,1,.36,1);
    --eco-ly-e-bg:linear-gradient(180deg,rgba(255,255,255,.66),rgba(57,114,253,.055));
    --eco-ly-m-bg:linear-gradient(180deg,rgba(255,255,255,.88),rgba(57,114,253,.15));
    --eco-ly-i-bg:linear-gradient(180deg,#FFFFFF,rgba(224,236,255,.94));
    --eco-ly-e-bd:rgba(16,24,40,.08);--eco-ly-m-bd:rgba(57,114,253,.28);--eco-ly-i-bd:rgba(57,114,253,.36);
    --eco-ly-e-r:28%;--eco-ly-m-r:26%;--eco-ly-i-r:24%;
    --eco-pulso-t:8.4s;
    --eco-pulso-m:calc(var(--eco-pulso-t) / -3);
    --eco-pulso-i:calc(var(--eco-pulso-t) / -1.5);
  }
  .mv-simbolo img{position:relative;z-index:1;width:40%;height:auto;display:block}

  .mv-fios{position:absolute;inset:0;width:100%;height:100%}
  .mv-fios-base path{
    fill:none;stroke:rgba(16,24,40,.26);stroke-width:1.5;
    stroke-dasharray:2 6;vector-effect:non-scaling-stroke;stroke-linecap:round;
  }
  .mv-fio{
    stroke:var(--mv-fio-on);stroke-width:2.2;
    vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;
    /* o gap e MAIOR que o traco de proposito: com dasharray:1 o padrao se
       repete em 2, e o dash seguinte comecava exatamente no fim do path,
       onde o linecap round pintava um pontinho aceso mesmo com a trilha
       toda apagada */
    stroke-dasharray:1 1.5;stroke-dashoffset:1;
    filter:drop-shadow(0 0 6px rgba(78,110,146,.26));
  }

  /* o pino: bolinha de vidro na entrada do shape da vertente */
  .mv-pino{
    position:absolute;left:var(--px);top:var(--py);transform:translate(-50%,-50%);
    width:15px;height:15px;border-radius:50%;
    background:rgba(255,255,255,.6);
    -webkit-backdrop-filter:blur(8px) saturate(1.4);
    backdrop-filter:blur(8px) saturate(1.4);
    border:1px solid rgba(255,255,255,.9);
    box-shadow:0 3px 10px -3px rgba(16,24,40,.28),inset 0 1px 0 rgba(255,255,255,.95);
    display:grid;place-items:center;z-index:2;
  }
  .mv-pino::before{
    content:'';width:5px;height:5px;border-radius:50%;
    background:rgba(16,24,40,.22);
    transition:background .5s ease,box-shadow .5s ease;
  }
  .mv-pino.on::before{background:var(--mv-fio-on);box-shadow:0 0 0 3px rgba(78,110,146,.16)}

  /* os nos: cartao de vidro com o chip do icone, ancorado na trilha. O
     --dir diz de que lado da trilha ele encosta, para a composicao abrir
     para dentro da dobra e nao passar por cima da propria linha. */
  .mv-no{
    position:absolute;left:var(--x);top:var(--y);
    display:grid;grid-template-columns:auto auto;align-items:center;
    column-gap:12px;row-gap:2px;padding:12px 16px;border-radius:18px;
    background:rgba(255,255,255,.58);
    -webkit-backdrop-filter:blur(14px) saturate(1.3);
    backdrop-filter:blur(14px) saturate(1.3);
    border:1px solid rgba(255,255,255,.86);
    box-shadow:0 12px 32px -16px rgba(16,24,40,.30),inset 0 1px 0 rgba(255,255,255,.9);
    font-family:'Manrope',sans-serif;white-space:nowrap;
    box-sizing:border-box;
    opacity:.6;transition:opacity .5s ease,box-shadow .5s ease,transform .5s ease;
  }
  /* o no fica CENTRADO no vao aberto no traco: a linha entra de um lado e
     sai do outro. A largura e em % do palco (e nao em px) para o vao do
     desenho continuar batendo quando a dobra encolhe. */
  .mv-no{width:22%;justify-content:start;transform:translate(-50%,-50%)}
  .mv-no b{
    grid-column:2;font-size:14.5px;font-weight:600;letter-spacing:-.015em;
    color:var(--mv-ink);line-height:1.2;
  }
  .mv-no em{
    grid-column:2;font-style:normal;font-size:12px;font-weight:400;
    line-height:1.3;color:var(--mv-mut);
  }
  .mv-no-ic{
    grid-row:1 / span 2;width:34px;height:34px;border-radius:11px;
    display:grid;place-items:center;color:rgba(16,24,40,.42);
    background:rgba(255,255,255,.7);border:1px solid rgba(16,24,40,.07);
    transition:color .5s ease,background .5s ease,border-color .5s ease;
  }
  .mv-no-ic svg{width:18px;height:18px}
  .mv-no.on{opacity:1;box-shadow:0 18px 40px -18px rgba(16,24,40,.34),inset 0 1px 0 rgba(255,255,255,.95)}
  .mv-no.on{transform:translate(-50%,-50%) translateY(-2px)}
  .mv-no[data-i="0"].on .mv-no-ic{color:#4E6E92;background:rgba(78,110,146,.10);border-color:rgba(78,110,146,.22)}
  .mv-no[data-i="1"].on .mv-no-ic{color:#3E9B99;background:rgba(91,192,190,.12);border-color:rgba(91,192,190,.26)}
  .mv-no[data-i="2"].on .mv-no-ic{color:#4E6E92;background:rgba(78,110,146,.10);border-color:rgba(78,110,146,.22)}

  /* ---- os cards: a promessa de cada frente ---- */
  .mv-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  /* o card vira no hover: a frente traz a promessa e o verso a chamada.
     O flip e 3D de verdade (preserve-3d + backface), com a frente em fluxo
     para ela ditar a altura das duas faces. */
  .mv-card{position:relative;perspective:1400px}
  .mv-card-in{
    position:relative;height:100%;
    transform-style:preserve-3d;
    transition:transform .72s cubic-bezier(.22,1,.36,1);
  }
  .mv-card:hover .mv-card-in,
  .mv-card:focus-within .mv-card-in{transform:rotateY(180deg)}
  .mv-face{
    display:flex;flex-direction:column;
    background:#fff;border:1px solid rgba(16,24,40,.08);border-radius:22px;
    padding:30px 28px 32px;
    box-shadow:0 1px 2px rgba(16,24,40,.04);
    -webkit-backface-visibility:hidden;backface-visibility:hidden;
    transition:border-color .55s ease,box-shadow .55s ease;
  }
  .mv-frente{position:relative;height:100%}
  .mv-verso{
    position:absolute;inset:0;transform:rotateY(180deg);
    justify-content:center;text-decoration:none;
    background:linear-gradient(180deg,#fff,#F7F9FC);
  }
  /* o verso nao repete a frente: ele traz a promessa e a chamada */
  /* precisa vencer o `.mv-face > p` (0,1,1), que e mais especifico que a
     classe sozinha e estava achatando a promessa para 15,5px */
  .mv-face > p.mv-card-promessa{
    margin:22px 0 0;font-family:'Manrope',sans-serif;
    font-size:22px;font-weight:600;line-height:1.24;letter-spacing:-.028em;
    color:var(--mv-ink);text-wrap:balance;
  }
  .mv-verso > p{margin-top:12px}
  .mv-btn{
    display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
    margin-top:26px;padding:13px 22px;border-radius:100px;
    background:var(--mv-ink);color:#fff;
    font-size:14.5px;font-weight:600;letter-spacing:-.01em;
    box-shadow:0 10px 24px -12px rgba(16,24,40,.55);
    transition:transform .3s ease,box-shadow .3s ease;
  }
  .mv-btn .arr{transition:transform .3s ease}
  .mv-card:hover .mv-btn{box-shadow:0 14px 30px -12px rgba(16,24,40,.6)}
  .mv-card:hover .mv-btn .arr{transform:translateX(4px)}
  .mv-card-ic{
    width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
    background:#F4F5F7;border:1px solid rgba(16,24,40,.06);
    color:rgba(16,24,40,.45);
    transition:color .55s ease,background .55s ease,border-color .55s ease;
  }
  .mv-card-ic svg{width:22px;height:22px}
  .mv-card-kick{
    margin:22px 0 0;font-size:11px;font-weight:600;letter-spacing:.15em;
    text-transform:uppercase;color:var(--mv-mut);
  }
  .mv-card h3{
    margin:8px 0 0;font-family:'Manrope',sans-serif;
    font-size:21px;font-weight:600;line-height:1.28;letter-spacing:-.025em;
    color:var(--mv-ink);text-wrap:balance;
  }
  .mv-face > p{
    margin:12px 0 0;font-size:15.5px;line-height:1.62;color:var(--mv-mut);
    text-wrap:pretty;
  }
  .mv-card-lista{
    list-style:none;margin:22px 0 0;padding:20px 0 0;
    border-top:1px solid rgba(16,24,40,.07);
    display:flex;flex-direction:column;gap:10px;
  }
  .mv-card-lista li{
    position:relative;padding-left:22px;font-size:14.5px;line-height:1.45;
    color:var(--mv-ink);
  }
  .mv-card-lista li::before{
    content:'';position:absolute;left:2px;top:.55em;width:7px;height:7px;
    border-radius:50%;background:rgba(16,24,40,.22);
    transition:background .55s ease,box-shadow .55s ease;
  }
  /* o card acende quando a trilha dele chega */
  .mv-card.aceso .mv-face{
    border-color:rgba(78,110,146,.40);
    box-shadow:0 18px 44px -18px rgba(16,24,40,.22);
  }
  .mv-card.aceso{transform:translateY(-2px);transition:transform .55s ease}
  .mv-card.aceso .mv-card-ic{color:#4E6E92;background:rgba(78,110,146,.09);border-color:rgba(78,110,146,.20)}
  .mv-card.aceso .mv-card-lista li::before{background:#4E6E92}
  .mv-card.aceso::after{
    content:'';position:absolute;inset:-1px;border-radius:23px;pointer-events:none;
    border:1px solid rgba(78,110,146,.50);
    animation:mv-pulso 1.5s cubic-bezier(.22,.61,.36,1) 1 forwards;
  }
  @keyframes mv-pulso{
    0%{transform:scale(1);opacity:.9}
    60%{transform:scale(1.012);opacity:.35}
    100%{transform:scale(1);opacity:0}
  }

  /* ---- DOBRA 3: Tecnologia, layout de topicos ---- */
  /* o fundo e o MESMO da dobra 2: as duas correm no #F2F2F2 e a unica
     troca de cor da tela e a box, nao a pagina atras dela */
  /* 04/09: a dobra e o cartao escuro da referencia, so que full-bleed (a
     caixa saiu em 03/09 e nao voltou): navy pleno com a luz azul subindo do
     topo, no lugar da seda que passava por baixo */
  .mv-kt{
    background:
      radial-gradient(70% 46% at 50% 0,rgba(57,114,253,.22),transparent 70%),
      linear-gradient(180deg,#0A1233 0,var(--noite,#04081F) 58%);
    padding:56px 0 96px;scroll-margin-top:120px;
  }
  /* a box vai quase de ponta a ponta: o gutter dela e um respiro curto,
     nao a margem de texto das outras dobras. O seletor precisa de mais
     peso que o `section.pad > .wrap` da propria pagina (0,2,1), que crava
     1320px com ate 58px de cada lado; por isso o `section.pad.mv-kt`.
     O respiro sai do padding de um bloco que ja ocupa a largura do body,
     nunca de 100vw: assim a barra de rolagem nao entra na conta e a pagina
     nao ganha scroll horizontal. */
  section.pad.mv-kt > .wrap{max-width:none;padding:0 clamp(18px,3vw,44px)}
  /* a box: o azul escuro da identidade do Hub, com um halo frio por tras
     para ela nao ficar recortada em cima do branco da pagina */
  /* 04/09, ordem da autora: a CAIXA saiu e o azul do gradiente continua.
     O bloco vira palco transparente sobre a seda: sem fundo, sem raio, sem
     traco, sem sombra; os paddings ficam, que sao o respiro do conteudo. */
  .mv-kt-box{
    position:relative;
    padding:88px clamp(28px,4.4vw,72px) 96px;
  }
  .mv-kt-box > *{position:relative}
  /* dentro da box, o conteudo mantem as medidas da referencia (coluna de
     320, vao de 84 e bloco de 616) e fica CENTRADO: a box e larga, mas o
     texto e o mockup nao se espalham ate as bordas dela. */
  /* ---- a pilha: cabeca centrada e os cinco cartoes numerados ----
     Os cartoes sao os da referencia (traco fino, raio 24, texto de um lado e
     a peca do outro, alternando), so que sobre o navy: vidro escuro com
     hairline, sem backdrop-filter. Os lados alternam por :nth-child(even). */
  .mv-kt-pilha{max-width:1180px;margin-inline:auto;display:flex;flex-direction:column;gap:clamp(44px,4.4vw,64px)}
  .mv-kt-cab{margin-inline:auto}
  .mv-kt-lede{margin:0;max-width:62ch;font-size:17px;line-height:1.68;color:rgba(255,255,255,.72);text-wrap:balance}
  .mv-kt-lista{display:flex;flex-direction:column;gap:28px}
  .mv-kt-bloco{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:64px;align-items:center;
    padding:clamp(32px,4vw,64px);border-radius:24px;
    border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035);
    scroll-margin-top:132px;
  }
  .mv-kt-bloco:nth-child(even) .mv-kt-txt{order:2}
  .mv-kt-txt{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
  .mv-num{
    display:grid;place-items:center;width:56px;height:56px;border-radius:14px;
    border:1px solid rgba(255,255,255,.28);
    font-family:'Manrope',sans-serif;font-size:22px;font-weight:400;letter-spacing:-.02em;
    color:rgba(255,255,255,.72);
  }
  .mv-kt-txt p{margin:14px 0 0;max-width:520px;font-size:16px;line-height:1.7;color:rgba(255,255,255,.72);text-wrap:pretty}
  .mv-kt-bloco:first-child{padding-top:0}
  .mv-kt-bloco h3{
    margin:22px 0 0;font-family:'Manrope',sans-serif;
    font-size:clamp(22px,1.7vw,26px);font-weight:400;line-height:1.3;letter-spacing:-.02em;
    color:#fff;text-wrap:balance;
  }
  /* o slot: gradiente pastel no fundo e a tela ENCOSTADA nas bordas de
     baixo e da direita, com o respiro so em cima e a esquerda, como no
     draft da autora. As cores sao as oficiais de area do design system,
     puxadas para pastel, e cada topico tem o seu angulo. */
  .mv-kt-fig{
    position:relative;aspect-ratio:616/440;border-radius:18px;overflow:hidden;
    border:1px solid rgba(255,255,255,.10);
    padding:48px 0 0 48px;
    display:flex;align-items:stretch;justify-content:flex-end;
  }
  /* Hub: o gradiente do Hub inteiro em pastel, na ordem canonica do
     [[marca/gradiente]] (azul, roxo, laranja, verde, teal) */
  .mv-kt-fig[data-g="1"]{background:linear-gradient(135deg,#B7CDFE 0%,#D6C0FF 27%,#FFD8A3 52%,#B2EBD4 78%,#B8E4E3 100%)}
  /* Marvin: a mesma familia colorida, mas em outro angulo e outra entrada */
  .mv-kt-fig[data-g="2"]{background:linear-gradient(305deg,#FFD8A3 0%,#FFC0D8 24%,#D6C0FF 50%,#B7CDFE 74%,#B8E4E3 100%)}
  /* Brain: so o roxo de Tecnologia, em variacoes */
  .mv-kt-fig[data-g="3"]{background:linear-gradient(158deg,#EDE4FF 0%,#D6C0FF 42%,#BFA1F7 74%,#A98AF0 100%)}
  /* CRM: so o azul de Receita, em variacoes */
  .mv-kt-fig[data-g="4"]{background:linear-gradient(112deg,#E1EAFE 0%,#C3D6FE 40%,#A6C0FC 74%,#8EAEFA 100%)}
  /* os 13 apps: o gradiente do Hub inteiro, no angulo oposto ao do Hub */
  .mv-kt-fig[data-g="5"]{background:linear-gradient(224deg,#B7CDFE 0%,#D6C0FF 24%,#FFD8A3 48%,#FFC0D8 70%,#B2EBD4 88%,#B8E4E3 100%)}
  .mv-kt-fig::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(80% 54% at 10% 6%,rgba(255,255,255,.28),transparent 60%);
  }
  /* A TELA: reconstruida em HTML, no tema claro do produto, com a mesma
     anatomia das cenas das LPs de cada app (a conversa do Marvin, a caixa
     de sugestoes do Brain, o kanban do CRM). Encosta na borda de baixo e
     na da direita; o respiro do gradiente fica em cima e a esquerda. */
  .mv-tela{
    position:relative;z-index:1;width:100%;display:flex;flex-direction:column;
    background:#fff;border-radius:14px 0 0 0;
    border:1px solid rgba(255,255,255,.9);border-right:0;border-bottom:0;
    box-shadow:-18px -18px 40px -26px rgba(16,24,40,.45);
    overflow:hidden;font-family:'Manrope',sans-serif;
  }
  .mv-tela-top{
    display:flex;align-items:center;gap:10px;flex:none;
    padding:9px 14px;background:#F4F5F7;border-bottom:1px solid rgba(16,24,40,.07);
  }
  .mv-dots{display:flex;gap:5px}
  .mv-dots i{width:7px;height:7px;border-radius:50%;background:rgba(16,24,40,.16)}
  .mv-url{font-size:10px;color:rgba(16,24,40,.42);letter-spacing:.01em}
  .mv-tela-corpo{
    flex:1;min-height:0;padding:20px 20px 0;display:flex;flex-direction:column;gap:10px;
    color:var(--mv-ink);text-align:left;
  }
  /* entrada em cascata, o mesmo .vm das cenas das LPs */
  .mv-tela .vm{opacity:0;transform:translateY(8px);animation:mvSobe .6s cubic-bezier(.22,1,.36,1) var(--d,0s) forwards}
  @keyframes mvSobe{to{opacity:1;transform:none}}

  /* Hub */
  .mv-ola{margin:6px 0 0;font-size:17px;font-weight:600;letter-spacing:-.02em;text-align:center}
  .mv-campo{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:11px 14px;border-radius:12px;background:#F7F8FA;
    border:1px solid rgba(16,24,40,.08);font-size:11.5px;color:rgba(16,24,40,.5);
  }
  .mv-campo b{
    width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
    background:rgba(16,24,40,.06);font-size:11px;color:rgba(16,24,40,.45);
  }
  .mv-apps{display:grid;grid-template-columns:repeat(6,1fr);gap:10px 6px;margin-top:4px}
  .mv-apps.grade{grid-template-columns:repeat(6,1fr);gap:14px 6px}
  .mv-app{display:flex;flex-direction:column;align-items:center;gap:6px}
  .mv-app img{width:26px;height:26px;border-radius:8px}
  .mv-app i{font-style:normal;font-size:8.5px;color:rgba(16,24,40,.5);text-align:center;line-height:1.2}

  /* Marvin */
  .mv-msg{
    max-width:74%;padding:10px 13px;border-radius:13px;font-size:11.5px;line-height:1.45;
    background:#F1F3F7;border:1px solid rgba(16,24,40,.06);
  }
  .mv-msg.u{align-self:flex-end;background:#EAF0FF;border-color:rgba(57,114,253,.18)}
  .mv-msg.a{align-self:flex-start}
  .mv-tool{
    display:flex;align-items:center;gap:8px;align-self:flex-start;
    padding:8px 12px;border-radius:100px;background:#F7F8FA;
    border:1px solid rgba(16,24,40,.07);font-size:11px;color:rgba(16,24,40,.62);
  }
  .mv-ok{
    width:15px;height:15px;border-radius:50%;flex:none;background:rgba(52,211,153,.16);
    position:relative;
  }
  .mv-ok::after{
    content:'';position:absolute;left:4px;top:4.5px;width:6px;height:3px;
    border-left:1.6px solid #10A87A;border-bottom:1.6px solid #10A87A;transform:rotate(-45deg);
  }

  /* Brain */
  .mv-stt{margin:0;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(16,24,40,.42)}
  .mv-item{
    display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;
    background:#F7F8FA;border:1px solid rgba(16,24,40,.07);
  }
  .mv-item-ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:#fff;border:1px solid rgba(16,24,40,.07);flex:none}
  .mv-item-ic img{width:15px;height:15px}
  .mv-item-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
  .mv-item-txt b{font-size:11px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mv-item-txt i{font-style:normal;font-size:9.5px;color:rgba(16,24,40,.45)}
  .mv-mini{
    flex:none;padding:5px 10px;border-radius:100px;font-size:9.5px;font-weight:600;
    background:rgba(57,114,253,.10);color:#2E5FD0;border:1px solid rgba(57,114,253,.18);
  }

  /* CRM */
  .mv-kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .mv-col{background:#F7F8FA;border:1px solid rgba(16,24,40,.07);border-radius:11px;padding:9px;display:flex;flex-direction:column;gap:6px}
  .mv-col p{margin:0 0 2px;font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(16,24,40,.42)}
  .mv-neg{height:26px;border-radius:7px;background:#fff;border:1px solid rgba(16,24,40,.07)}
  .mv-neg.alt{height:34px}
  .mv-neg.ok{background:rgba(52,211,153,.10);border-color:rgba(52,211,153,.28)}
  .mv-ganho{
    display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:12px;
    background:#fff;border:1px solid rgba(52,211,153,.30);
    box-shadow:0 10px 24px -16px rgba(16,24,40,.35);
  }
  .mv-ganho span{display:flex;flex-direction:column;gap:1px}
  .mv-ganho b{font-size:11px;font-weight:600}
  .mv-ganho em{font-style:normal;font-size:15px;font-weight:600;color:#2E5FD0;letter-spacing:-.02em}
  .mv-ganho i{font-style:normal;font-size:9.5px;color:rgba(16,24,40,.45)}

  @media(prefers-reduced-motion:reduce){
    .mv-tela .vm{animation:none;opacity:1;transform:none}
  }

  /* o link vira a pilula fantasma da referencia */
  .mv-kt-link{
    display:inline-flex;align-items:center;gap:8px;width:fit-content;
    margin-top:26px;padding:12px 18px;border-radius:99px;
    border:1px solid rgba(255,255,255,.28);
    font-size:15px;font-weight:500;color:#fff;text-decoration:none;
    transition:border-color .25s ease,background .25s ease;
  }
  .mv-kt-link:hover{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.06)}
  .mv-kt-link .arr{transition:transform .3s ease}
  .mv-kt-link:hover .arr{transform:translateX(4px)}

  /* ---- tablet e toque: uma coluna, sem esconder nada ---- */
  @media(max-width:900px){
    /* no toque o cartao empilha: texto primeiro, peca embaixo, nos dois lados */
    .mv-kt-bloco{grid-template-columns:minmax(0,1fr);gap:28px}
    .mv-kt-bloco:nth-child(even) .mv-kt-txt{order:0}
  }
  @media(max-width:820px){
    .mv-kt-box{padding:56px 20px 64px}
    .mv-cards{grid-template-columns:1fr;gap:32px}
    .mv-cena{height:250px}
    .mv-simbolo{width:124px;height:124px}
    .mv-painel{top:70px}
    /* no toque a trilha nao cabe: os nos viram uma lista simples embaixo do
       simbolo, sem perder nenhuma informacao */
    .mv-fios,.mv-pino{display:none}
    .mv-no{position:static;transform:none!important;width:100%!important;margin-top:10px;padding:10px 13px;border-radius:14px;opacity:1}
    .mv-no b{font-size:13.5px}
    .mv-painel{display:flex;flex-direction:column;justify-content:flex-start}
    .mv-fundo{background-size:36px 36px,144px 144px}
    .mv-eco{padding:80px 0 88px}
    .mv-kt{padding:80px 0 88px}
    .mv-kt-bloco{padding:28px 20px}
  }

  /* ---- movimento reduzido: tudo ja nasce no estado final ---- */
  @media(prefers-reduced-motion:reduce){
    .mv-fio{stroke-dashoffset:0}
    .mv-card.aceso{transform:none}
    .mv-card.aceso::after{animation:none;opacity:0}
    /* sem movimento: o card nao gira, o verso faz fade por cima */
    .mv-card-in{transition:none}
    .mv-card:hover .mv-card-in,.mv-card:focus-within .mv-card-in{transform:none}
    .mv-verso{transform:none;opacity:0;transition:opacity .3s ease;backface-visibility:visible}
    .mv-card:hover .mv-verso,.mv-card:focus-within .mv-verso{opacity:1}
  }
  /* ---- sem JS: os fios e os cards ja aparecem conectados ---- */
  .no-js .mv-fio{stroke-dashoffset:0}
  /* ===================== O ESQUELETO DA REFERENCIA (04/09) =====================
     Tres decisoes da autora, por cima do que existe: (1) titulos em Manrope
     400 com tracking -.04em (a serifa italica da referencia foi testada e
     reprovada em 04/09: o destaque segue sendo o teal do "gestao"); (2) toda dobra abre com a mesma cabeca (pilula, titulo, lede, peca),
     centrada quando a peca e de largura cheia e a esquerda quando a peca
     divide a linha com o texto; (3) a Tecnologia em cartoes numerados.
     Este bloco vem por ultimo de proposito: vence as reguas antigas de cada
     dobra por ordem, nao por especificidade. */
  .s2v-k{color:var(--teal,#5BC0BE)}
  .s2v-v2 .s2v-t{font-weight:400;letter-spacing:-.04em;line-height:1.06}
  .h2,.mv-cab h2,.mv-kt-cab h2,.sv-abertura h3,.ed-abertura h3{
    font-family:'Manrope',sans-serif;font-weight:400;letter-spacing:-.04em;
    font-size:clamp(34px,3.4vw,50px);line-height:1.14;text-wrap:balance;
  }
  .mv-card h3,.ed-card h4,.why-card h3{font-weight:400;letter-spacing:-.02em}
  .dobra-cab{display:flex;flex-direction:column;gap:0;max-width:none}
  .dobra-cab--c{align-items:center;text-align:center;margin-inline:auto}
  .dobra-cab--e{align-items:flex-start;text-align:left;max-width:62ch}
  .dobra-cab .mv-pill{margin:0 0 22px;align-self:inherit}
  .dobra-cab h2,.dobra-cab h3,.dobra-cab > div{margin:0 0 18px;max-width:none}
  .dobra-cab > div > h2{margin:0}
  .dobra-cab > p,.dobra-cab .lede{margin:0;max-width:62ch;font-size:17px;line-height:1.68;text-wrap:balance}
  .dobra-cab--c > p{margin-inline:auto}
  /* as reguas antigas de cada dobra, neutralizadas */
  .mv-cab{gap:0}
  .mv-cab h2{margin:0 0 18px}
  .mv-lede{margin:0 auto}
  .mv-cab .mv-lede{max-width:800px}
  .ed-abertura{display:flex;gap:0;margin:0 0 clamp(52px,4.8vw,76px)}
  .ed-abertura p{padding-bottom:0}
  .sv-abertura,.ed-abertura{margin-bottom:clamp(44px,4vw,60px)}
  .sv-abertura h3,.ed-abertura h3{margin:0 0 18px;color:#fff}
  .sv-abertura p,.ed-abertura p{margin:0;color:rgba(255,255,255,.72)}
  #porque .why-head{display:flex;max-width:62ch;gap:0}
  #porque .why-head .h2{max-width:none;margin:0}
  #porque .why-head .lede{margin:0}
  #avaliacoes .sec-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;max-width:none;margin-inline:auto}
  #avaliacoes .sec-head .sh-label{padding:0;margin:0 0 22px}
  #avaliacoes .sec-head .h2{max-width:22ch;margin:0 0 18px}
  #avaliacoes .sec-head .rv2-selo{margin:0}
  .cta-grid .dobra-cab .lede{margin:0 0 18px}


  /* ===================== V3 (04/09): PAGINA CLARA DE PRODUTO =====================
     Sintese das referencias (Attio, Vaultiq, Skedway; Tess e Codex so pela
     mecanica): fundo claro, hairline no lugar de sombra, mockup no lugar de
     texto, dois tons no titulo, e escuro em DOIS lugares so (a hero e o
     bloco do Hub). O teal e traco, nunca campo: o sublinhado do H1, a barra
     da aba ativa, a seta do link, o ponto da pilula. Este bloco fecha o
     <style> e vence as vestes anteriores por ordem. */
  :root{
    --v3-bg:#F7F8FA;--v3-ink:#0B1220;--v3-mut:#5B6478;--v3-t2:#7C86A2;
    --v3-hair:0 0 0 1px rgba(11,13,24,.06);
    --v3-hover:0 12px 32px -18px rgba(11,13,24,.18);
    --v3-ease:cubic-bezier(.2,.8,.2,1);
    --v3-teal-tile:rgba(91,192,190,.14);--v3-teal-ink:#2E8B89;
  }
  .s2h,.mv-eco,#empresa,.mv-kt,section.pad.sv-sec,section.pad.ed-sec,#porque,.folha,#contato,.logos-dobra{background:var(--v3-bg)}
  .t2{color:var(--v3-t2);font-weight:inherit}
  .h2,.mv-cab h2,.mv-kt-cab h2,.sv-abertura h2,.ed-abertura h3{
    font-family:'Manrope',sans-serif;font-weight:500;letter-spacing:-.015em;
    font-size:clamp(32px,3vw,40px);line-height:1.2;color:var(--v3-ink);text-wrap:balance;
  }
  .dobra-cab > p,.dobra-cab .lede,.mv-lede{color:var(--v3-mut)}
  .mv-cab .mv-lede{max-width:64ch}
  .mv-pill{background:#fff;box-shadow:var(--v3-hair);color:var(--v3-ink)}
  .mv-pill svg{color:var(--v3-teal-ink)}

  /* ---- os atomos: card, link, botao ---- */
  .v3-card{
    display:flex;flex-direction:column;background:#fff;border-radius:16px;
    box-shadow:var(--v3-hair);text-decoration:none;color:inherit;
    transition:transform 220ms var(--v3-ease),box-shadow 220ms var(--v3-ease);
  }
  .v3-card:hover{transform:translateY(-2px);box-shadow:var(--v3-hair),var(--v3-hover)}
  .v3-link{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:600;color:var(--v3-ink)}
  .v3-link .arr{color:var(--teal,#5BC0BE);transition:transform 220ms var(--v3-ease)}
  .v3-card:hover .v3-link .arr{transform:translate(3px,-3px)}
  .v3-btn{
    display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:99px;
    font-family:'Manrope',sans-serif;font-size:15px;font-weight:600;text-decoration:none;
    transition:transform 220ms var(--v3-ease),box-shadow 220ms var(--v3-ease),background 220ms,border-color 220ms;
  }
  .v3-btn--branco{background:#fff;color:var(--bg,#04081F)}
  .v3-btn--branco:hover{transform:translateY(-1px);box-shadow:0 12px 26px -12px rgba(0,0,0,.55)}
  .v3-btn--fantasma{color:#fff;border:1px solid rgba(255,255,255,.28)}
  .v3-btn--fantasma:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}
  .v3-btn .arr{color:var(--teal,#5BC0BE)}

  /* ---- hero: navy e azul medio, CTAs, o card sangrando pela direita ---- */
  .s2v-v2 .s2v-t{font-weight:600;letter-spacing:-.02em;font-size:clamp(40px,4.4vw,72px);max-width:22ch}
  .s2v-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
  .s2v-k{color:inherit}
  .s2h-body{z-index:2}

  /* ---- ecossistema: cards de uma linha ---- */
  .mv-cards{gap:16px}
  .mv-card.v3-card{padding:24px 24px 22px;perspective:none}
  .mv-card.v3-card .mv-card-ic{width:40px;height:40px;border-radius:12px;background:var(--v3-teal-tile);border:0;color:var(--v3-teal-ink)}
  .mv-card.v3-card .mv-card-kick{margin:18px 0 0;color:var(--v3-mut)}
  .mv-card.v3-card h3{margin:6px 0 0;font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--v3-ink)}
  .mv-card.v3-card > p{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--v3-mut)}
  .mv-card.v3-card .v3-link{margin-top:auto;padding-top:20px}

  /* ---- o Hub: o cartao escuro, abas verticais, mockup que troca ---- */
  .mv-kt{padding:clamp(48px,5vw,80px) 0}
  .mv-kt-box{
    position:relative;overflow:hidden;border-radius:28px;
    background:linear-gradient(160deg,#04081F 0%,#1E3A8A 68%,#2B4BA4 100%);
    padding:clamp(48px,6vw,88px) clamp(24px,5vw,80px);
  }
  .mv-kt-box::before{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(50% 40% at 88% 0,rgba(91,192,190,.14),transparent 70%);
  }
  .mv-kt-pilha{position:relative;z-index:1;max-width:1180px;gap:clamp(36px,4vw,56px)}
  .mv-kt-cab h2{color:#fff}
  .mv-kt-cab .t2{color:rgba(255,255,255,.55)}
  .mv-kt-lede{color:rgba(255,255,255,.72)}
  .mv-kt-box .mv-pill{background:rgba(255,255,255,.10);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 1px rgba(255,255,255,.14)}
  .mv-kt-box .mv-pill svg{color:var(--teal,#5BC0BE)}
  .hub-tl{display:flex;flex-direction:column;gap:clamp(40px,5vw,72px);max-width:940px;margin:0 auto}
  .hub-tl-item{position:relative;display:grid;grid-template-columns:232px minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
  .hub-tl-meta{position:sticky;top:112px;display:flex;align-items:center;gap:12px}
  .hub-tl-ic{
    flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
    background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);
    transition:background 220ms var(--v3-ease),box-shadow 220ms var(--v3-ease),color 220ms;
  }
  .hub-tl-ic img,.hub-tl-ic svg{width:20px;height:20px}
  .hub-tl-item.on .hub-tl-ic{background:rgba(91,192,190,.18);box-shadow:0 0 0 1px rgba(91,192,190,.5);color:var(--teal,#5BC0BE)}
  .hub-tl-meta-tx{display:flex;flex-direction:column;min-width:0}
  .hub-tl-meta b{font-size:15px;font-weight:600;letter-spacing:-.01em;color:rgba(255,255,255,.55);transition:color 220ms}
  .hub-tl-meta small{font-size:12.5px;color:rgba(255,255,255,.4)}
  .hub-tl-item.on .hub-tl-meta b{color:#fff}
  .hub-tl-sentinela{position:absolute;top:-96px;left:0;width:1px;height:48px;opacity:0;pointer-events:none}
  .hub-tl-card{
    display:flex;flex-direction:column;padding:12px 12px 10px;border-radius:20px;
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);
    transition:background 300ms var(--v3-ease),border-color 300ms var(--v3-ease),box-shadow 300ms var(--v3-ease);
  }
  .hub-tl-item.on .hub-tl-card{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
  .hub-tl-card .mv-kt-fig{border-radius:14px;border:1px solid rgba(255,255,255,.12);margin-bottom:16px;aspect-ratio:616/400;padding:36px 0 0 36px}
  .hub-tl-card h3{margin:0 8px;font-family:'Manrope',sans-serif;font-size:18px;font-weight:600;letter-spacing:-.015em;color:rgba(255,255,255,.7);transition:color 200ms}
  .hub-tl-item.on .hub-tl-card h3{color:#fff}
  .hub-tl-desc{
    margin:6px 8px 0;font-size:15px;line-height:1.6;color:rgba(255,255,255,.55);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    transition:color 300ms;
  }
  .hub-tl-item.on .hub-tl-desc{-webkit-line-clamp:unset;display:block;color:rgba(255,255,255,.75)}
  /* o conteudo extra abre por grid-template-rows (0fr -> 1fr), a mesma
     mecanica do componente: altura auto animada sem medir nada */
  .hub-tl-mais{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows 500ms var(--v3-ease),opacity 500ms var(--v3-ease)}
  .hub-tl-item.on .hub-tl-mais{grid-template-rows:1fr;opacity:1}
  .hub-tl-mais > div{overflow:hidden;display:flex;flex-direction:column}
  .hub-tl-lista{
    list-style:none;margin:14px 8px 0;padding:14px 16px;border-radius:12px;
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);
    display:flex;flex-direction:column;gap:8px;
  }
  .hub-tl-lista li{position:relative;padding-left:16px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.72)}
  .hub-tl-lista li::before{content:'';position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--teal,#5BC0BE);opacity:.8}
  .hub-tl-btn{align-self:flex-end;margin:14px 8px 6px;padding:10px 16px;font-size:14px}
  .hub-tl-btn .arr{transition:transform 220ms var(--v3-ease)}
  .hub-tl-btn:hover .arr{transform:translate(2px,-2px)}
  @media(prefers-reduced-motion:reduce){
    .hub-tl-card,.hub-tl-mais,.hub-tl-ic,.hub-tl-desc,.hub-tl-meta b,.hub-tl-card h3{transition:none!important}
  }

  /* ---- servicos: o bento (foto + tres cards) ---- */
  section.pad.sv-sec{padding-block:clamp(56px,6vw,96px);position:relative;z-index:1}
  .sv-abertura{max-width:62ch;margin:0 0 clamp(28px,3vw,44px)}
  .sv3-bento{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:16px;align-items:stretch}
  .sv3-foto{position:relative;margin:0;border-radius:24px;overflow:hidden;min-height:440px;box-shadow:var(--v3-hair);background:#DDE3EE}
  .sv3-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
  .sv3-foto::after{content:'';position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(180deg,transparent,rgba(4,8,31,.6));pointer-events:none}
  .sv3-rotulo{
    position:absolute;left:18px;bottom:18px;z-index:1;margin:0;padding:9px 14px;border-radius:99px;
    background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    color:#fff;font-size:13px;font-weight:600;letter-spacing:-.01em;
  }
  .sv3-rotulo-tx{display:inline-block;transition:opacity 180ms var(--v3-ease)}
  .sv3-rotulo.troca .sv3-rotulo-tx{opacity:0}
  .sv3-cards{display:flex;flex-direction:column;gap:14px}
  .sv3-card{flex:1;flex-direction:row;align-items:center;gap:18px;padding:22px 24px}
  .sv3-ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--v3-teal-tile);color:var(--v3-teal-ink)}
  .sv3-ic .s2p-ic-m{width:22px;height:22px}
  .sv3-ic svg{width:22px;height:22px}
  .sv3-tx{flex:1;min-width:0}
  .sv3-card h3{margin:0;font-family:'Manrope',sans-serif;font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--v3-ink)}
  .sv3-card p{margin:4px 0 0;font-size:14.5px;line-height:1.5;color:var(--v3-mut);text-wrap:pretty}
  .sv3-card .v3-link{flex:none;white-space:nowrap}
  .sv3-card:hover{box-shadow:0 0 0 1px rgba(91,192,190,.5),var(--v3-hover)}

  /* ---- educacao: cabeca clara, o video fica, cards de uma linha ---- */
  .ed-abertura{margin-bottom:clamp(28px,3vw,44px)}
  .ed-abertura h3{color:var(--v3-ink)}
  .ed-abertura p{color:var(--v3-mut)}
  .ed-quadro{background:#fff;border:0;box-shadow:var(--v3-hair);}
  .ed-glow{background:radial-gradient(56% 62% at 50% 64%,rgba(57,114,253,.22),rgba(57,114,253,.06) 52%,transparent 76%)}
  .ed-cena{border-color:rgba(11,13,24,.06);box-shadow:0 30px 60px -40px rgba(11,13,24,.35)}
  .ed-cards{grid-template-columns:repeat(4,1fr);gap:14px;row-gap:14px}
  .ed-card.v3-card{padding:22px 22px 20px;border:0}
  .ed-card.v3-card::before{display:none}
  .ed-card.v3-card .s2p-ic{width:40px;height:40px;border-radius:12px;background:var(--v3-teal-tile);border:0;color:var(--v3-teal-ink)}
  .ed-card.v3-card h4{margin:16px 0 0;font-size:17px;color:var(--v3-ink)}
  .ed-card.v3-card p{margin:6px 0 0;font-size:14.5px;line-height:1.5;color:var(--v3-mut)}
  .ed-card.v3-card > a{margin-top:auto;padding-top:16px;color:var(--v3-ink)}
  .ed-card.v3-card > a .arr{color:var(--teal,#5BC0BE)}
  .ed-card.v3-card > a:focus-visible{outline-color:var(--teal,#5BC0BE)}

  /* ---- por que: claro, grade 3x2 sobre a grade pontilhada (Attio) ---- */
  #porque{min-height:0;display:block;position:relative;padding-block:clamp(56px,6vw,96px)}
  #porque::before{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(rgba(11,13,24,.10) 1px,transparent 1.5px) 0 0/24px 24px;
    -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%);
    mask-image:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%);
  }
  #porque > .wrap{position:relative;z-index:1}
  #porque .h2{color:var(--v3-ink)}
  #porque .lede{color:var(--v3-mut)}
  #porque .hscroll{overflow:visible;padding:0;margin-top:clamp(28px,3vw,44px)}
  #whyScroll .htrack{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0}
  #porque .why-card{
    background:#fff;border:0;border-radius:16px;box-shadow:var(--v3-hair);padding:22px 22px 20px;
    transition:transform 220ms var(--v3-ease),box-shadow 220ms var(--v3-ease);
  }
  #porque .why-card:hover{transform:translateY(-2px);box-shadow:var(--v3-hair),var(--v3-hover)}
  #porque .why-card.glow-card::after,#porque .why-card.glow-card::before{display:none}
  #porque .why-card .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--v3-teal-tile);color:var(--v3-teal-ink);border:0;box-shadow:none}
  #porque .why-card h3{margin:16px 0 0;font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--v3-ink)}
  #porque .why-card p{margin:6px 0 0;font-size:14.5px;line-height:1.5;color:var(--v3-mut)}
  #porque .cdots{display:none!important}
  /* o site.js trata o #whyScroll como carrossel e escreve larguras inline
     nos cards no toque; a grade v3 manda em qualquer largura */
  #porque .hscroll{overflow:hidden}
  #whyScroll .htrack{width:auto!important;transform:none!important}
  #porque .why-card{width:auto!important;min-width:0!important;max-width:none!important;flex:none!important}

  /* ---- avaliacoes: folha lisa, cards brancos ---- */
  .folha{border-radius:0;border-top:0;box-shadow:none}
  #avaliacoes .sec-head .h2{color:var(--v3-ink)}
  .rv2{background:#fff;border:0;box-shadow:var(--v3-hair)}

  /* ---- contato: o container de acento (Vaultiq), form no card branco ---- */
  .v3-acento{
    background:linear-gradient(180deg,#E9F6F6 0%,#F1F5FB 100%);border-radius:24px;
    padding:clamp(28px,4vw,56px);box-shadow:var(--v3-hair);
  }
  .v3-acento .h2{color:var(--v3-ink)}
  .v3-acento .contato-alt{color:var(--v3-mut)}
  .cform{background:#fff;border:0;box-shadow:var(--v3-hair)}

  /* ---- toque e tablet ---- */
  @media(max-width:1000px){
    /* a timeline no toque: a meta vira linha acima do card, sem sticky */
    .hub-tl-item{grid-template-columns:1fr;gap:12px}
    .hub-tl-meta{position:static}
    .hub-tl{gap:32px}
    .sv3-bento{grid-template-columns:minmax(0,1fr)}
    .sv3-foto{min-height:280px}
    .ed-cards{grid-template-columns:repeat(2,1fr)}
    #whyScroll .htrack{grid-template-columns:repeat(2,1fr)}
  }
  @media(max-width:640px){
    /* no toque o card de servico vira duas linhas: icone e texto em cima, o
       link embaixo alinhado ao texto (sem isso o texto era espremido a um
       fio ao lado do link, que nao quebra) */
    .sv3-card{flex-wrap:wrap;gap:14px 16px;padding:20px}
    .sv3-tx{flex:1 1 calc(100% - 60px)}
    .sv3-card .v3-link{flex:0 0 100%;padding-left:60px;white-space:normal}
    .ed-cards{grid-template-columns:1fr}
    #whyScroll .htrack{grid-template-columns:1fr}
    .v3-acento{padding:20px}
  }
  @media(prefers-reduced-motion:reduce){
  }

  /* ===================== V4 (08/09): a rodada de ajustes da autora =====================
     hero sem mockup e sem destaque; os cards do ecossistema de volta ao flip;
     a Tecnologia como lista; Educacao como o carrossel da Stripe; Por que como
     o bento da Stripe. */
  .mv-card h3{font-weight:600}
  .sv-abertura,.ed-abertura{max-width:min(100%,920px)}

  /* ---- Tecnologia: lista fixa + cards empilhados ---- */
  /* a coluna dos cards tem teto (640px): sem ele o mockup enchia a calha e
     ficava grande demais (ajuste da autora, 08/09) */
  .hub-lista{display:grid;grid-template-columns:260px minmax(0,640px);justify-content:center;gap:clamp(28px,4vw,64px);align-items:start;margin:0 auto}
  .hub-lista-nav{display:flex;flex-direction:column;gap:4px}
  .hub-lista-item{
    display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;
    text-decoration:none;color:inherit;
    transition:background 220ms var(--v3-ease);
  }
  .hub-lista-item:hover .hub-tl-meta b{color:rgba(255,255,255,.85)}
  .hub-lista-item.on{background:transparent}
  /* so os titulos (ajuste da autora, 08/09): sem o tile do icone e sem o
     subtitulo, na lista e na meta do toque */
  .hub-lista .hub-tl-ic,.hub-lista .hub-tl-meta small{display:none}
  .hub-lista-item{padding:6px 0}
  .hub-lista-nav{gap:2px}
  .hub-lista-item .hub-tl-meta b,.hub-tl-meta--mob b{font-size:17px}
  .hub-lista-item.on .hub-tl-ic{background:rgba(91,192,190,.18);box-shadow:0 0 0 1px rgba(91,192,190,.5);color:var(--teal,#5BC0BE)}
  .hub-lista-item .hub-tl-meta{position:static;top:auto}
  .hub-lista-item .hub-tl-meta b{color:rgba(255,255,255,.55)}
  .hub-lista-item .hub-tl-meta small{color:rgba(255,255,255,.4)}
  .hub-lista-item.on .hub-tl-meta b{color:#fff}
  .hub-lista-item:focus-visible{outline:2px solid var(--teal,#5BC0BE);outline-offset:2px}
  /* um PALCO so (ajuste da autora, 08/09): os cinco cards empilham na mesma
     celula e so o ativo aparece; a lista fica parada e o mockup troca com
     fade e um deslize curto. A altura do palco e a do card mais alto, entao
     a dobra nao salta na troca. */
  .hub-lista-cards{display:grid;min-width:0}
  .hub-lista-cards > .hub-tl-item{grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none;transform:translateX(12px);transition:opacity 420ms var(--v3-ease),transform 420ms var(--v3-ease),visibility 0s 420ms}
  .hub-lista-cards > .hub-tl-item.on{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}
  .hub-lista{align-items:start}
  .hub-lista-nav{padding-top:8px}
  .hub-tl-item{display:block;grid-template-columns:none;scroll-margin-top:128px}
  .hub-tl-meta--mob{display:none;margin-bottom:12px}

  /* ---- Por que: o bento da Stripe, com os nossos elementos ----
     Card branco com hairline; titulo no alto a esquerda e o botao de abrir
     no canto direito; o corpo e um MOCKUP sangrando pelo canto inferior
     direito (as cenas do Hub, Marvin, CRM e Brain, o frame do video da
     imersao e a foto da equipe), sobre manchas radiais suaves nas cores do
     Hub que dissolvem para o branco no topo. Grade 4+2, 2+2+2 e um cheio. */
  .pq-bento{
    display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;
    grid-template-areas:"a a a a b b" "c c d d e e";
    margin-top:clamp(28px,3vw,44px);
  }
  .pq-card{
    grid-area:var(--pq-area);position:relative;isolation:isolate;overflow:hidden;
    display:flex;flex-direction:column;
    background:#fff;border-radius:16px;box-shadow:var(--v3-hair);padding:24px 24px 0;
    min-height:360px;
    transition:transform 220ms var(--v3-ease),box-shadow 220ms var(--v3-ease);
  }
  .pq-card:hover{transform:translateY(-2px);box-shadow:var(--v3-hair),var(--v3-hover)}
  .pq-card[style*="--pq-area:f"]{min-height:320px}
  .pq-card h3{position:relative;z-index:2;margin:0 48px 0 0;font-family:'Manrope',sans-serif;font-size:clamp(19px,1.5vw,22px);font-weight:500;letter-spacing:-.02em;line-height:1.25;color:var(--v3-ink);text-wrap:balance;max-width:22ch}
  .pq-card p{position:relative;z-index:2;margin:8px 0 0;font-size:14.5px;line-height:1.5;color:var(--v3-mut);max-width:40ch;text-wrap:pretty}
  .pq-ir{
    position:absolute;top:16px;right:16px;z-index:3;width:30px;height:30px;border-radius:8px;
    display:grid;place-items:center;color:var(--v3-teal-ink);background:var(--v3-teal-tile);
    transition:background 220ms,transform 220ms var(--v3-ease);
  }
  .pq-ir svg{width:14px;height:14px}
  .pq-ir:hover{background:rgba(91,192,190,.24);transform:translate(1px,-1px)}
  .pq-ir:focus-visible{outline:2px solid var(--teal,#5BC0BE);outline-offset:2px}
  /* as manchas: radiais nas cores do Hub, concentradas no canto de baixo */
  .pq-wash{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:1}
  .pq-card[data-g="1"] .pq-wash{background:radial-gradient(55% 55% at 80% 95%,rgba(163,100,255,.54),transparent 70%),radial-gradient(50% 50% at 30% 100%,rgba(57,114,253,.44),transparent 70%),radial-gradient(45% 45% at 100% 60%,rgba(250,152,0,.34),transparent 70%)}
  .pq-card[data-g="2"] .pq-wash{background:radial-gradient(60% 55% at 85% 95%,rgba(250,61,133,.42),transparent 70%),radial-gradient(50% 50% at 20% 100%,rgba(163,100,255,.46),transparent 70%)}
  .pq-card[data-g="3"] .pq-wash{background:radial-gradient(60% 55% at 85% 95%,rgba(57,114,253,.48),transparent 70%),radial-gradient(50% 50% at 20% 100%,rgba(91,192,190,.42),transparent 70%)}
  .pq-card[data-g="4"] .pq-wash{background:radial-gradient(60% 55% at 85% 95%,rgba(250,152,0,.42),transparent 70%),radial-gradient(50% 50% at 20% 100%,rgba(250,61,133,.38),transparent 70%)}
  .pq-card[data-g="5"] .pq-wash{background:radial-gradient(60% 55% at 85% 95%,rgba(52,211,153,.42),transparent 70%),radial-gradient(50% 50% at 20% 100%,rgba(57,114,253,.40),transparent 70%)}
  .pq-card[data-g="6"] .pq-wash{background:radial-gradient(45% 70% at 90% 90%,rgba(163,100,255,.48),transparent 70%),radial-gradient(40% 60% at 55% 100%,rgba(91,192,190,.40),transparent 70%)}
  /* o mockup sangra pelo canto inferior direito e o card corta */
  .pq-mock{position:absolute;z-index:1;right:-6%;bottom:-8%;width:78%;pointer-events:none}
  .pq-mock .mv-tela{border-radius:12px 12px 0 0;border:1px solid rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(11,13,24,.06),0 30px 60px -30px rgba(11,13,24,.35);width:100%}
  .pq-mock--foto img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;box-shadow:0 0 0 1px rgba(11,13,24,.06),0 30px 60px -30px rgba(11,13,24,.35)}
  .pq-card[style*="--pq-area:a"] .pq-mock{width:60%;right:-4%;bottom:-16%}
  .pq-card[style*="--pq-area:f"] .pq-mock{width:46%;right:2%;bottom:-18%}
  .pq-card[style*="--pq-area:f"] h3,.pq-card[style*="--pq-area:f"] p{max-width:44%}
  .pq-card .pq-mock .mv-tela-corpo{min-height:0}
  /* o mockup nunca cobre o texto: a area de texto tem respiro reservado */
  .pq-card::after{content:'';display:block;height:170px;flex:none}
  @media(max-width:1000px){
    .hub-lista{grid-template-columns:minmax(0,1fr)}
    /* no toque a lista vira uma fileira de nomes com snap, acima do palco */
    .hub-lista-nav{flex-direction:row;overflow-x:auto;gap:6px;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px;min-width:0;max-width:100%}
    .hub-lista-nav::-webkit-scrollbar{display:none}
    .hub-lista-item{flex:0 0 auto;scroll-snap-align:start;padding:8px 12px;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
    .hub-lista-item.on{box-shadow:inset 0 0 0 1px rgba(91,192,190,.6)}
    .hub-lista-item .hub-tl-meta b{font-size:14.5px;white-space:nowrap}
    .pq-bento{grid-template-columns:1fr 1fr;grid-template-areas:"a a" "b c" "d e"}
    .pq-card[style*="--pq-area:a"] .pq-mock,.pq-card[style*="--pq-area:f"] .pq-mock{width:70%;right:-6%;bottom:-12%}
    .pq-card[style*="--pq-area:f"] h3,.pq-card[style*="--pq-area:f"] p{max-width:none}
  }
  @media(max-width:640px){
    .pq-bento{grid-template-columns:1fr;grid-template-areas:"a" "b" "c" "d" "e"}
    .pq-card{min-height:0}
  }

  /* ---- Educacao: a fila da /imersao ("Quem conduz") ----
     Porte do bloco .experts do lp.css: cards altos de largura igual, o
     aberto mais largo, a midia cobrindo o card, o texto na base sobre um
     scrim. A largura do card fechado e a sobra da calha repartida em tres. */
  .ed-fila-topo{display:flex;justify-content:flex-end;margin:-52px 0 0}
  .ed-fila-setas{display:flex;gap:10px}
  .ed-fila-seta{
    width:44px;height:44px;display:grid;place-items:center;border-radius:50%;cursor:pointer;
    color:var(--v3-ink);background:#fff;border:0;box-shadow:var(--v3-hair);
    transition:background 220ms,box-shadow 220ms var(--v3-ease),opacity 220ms,transform 220ms var(--v3-ease);
  }
  .ed-fila-seta:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--v3-hair),var(--v3-hover)}
  .ed-fila-seta:disabled{opacity:.35;cursor:default}
  .ed-fila-seta svg{width:17px;height:17px}
  .ed-fila-seta:focus-visible{outline:2px solid var(--teal,#5BC0BE);outline-offset:3px}
  .ed-fila{
    --ef-vao:14px;
    --ef-h:clamp(420px,56vh,560px);
    /* os QUATRO cabem na calha (ajuste da autora, 08/09, como os
       colaboradores da imersao): o aberto e .95 da altura e o fechado e a
       sobra repartida em tres, com um piso baixo (.36) que so vale em
       calha curta; o piso antigo (.5) vencia a conta e empurrava o quarto
       card pra fora */
    --ef-w-aberto:calc(var(--ef-h) * .95);
    --ef-n:3;
    --ef-w:max(calc(var(--ef-h) * .36),calc((100cqw - var(--ef-w-aberto) - var(--ef-n) * var(--ef-vao)) / var(--ef-n)));
    container-type:inline-size;position:relative;margin-top:22px;
  }
  .ed-fila-scroll{
    position:relative;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
    padding:6px 0 12px;scroll-snap-type:x proximity;cursor:grab;
  }
  .ed-fila-scroll::-webkit-scrollbar{display:none}
  .ed-fila-scroll.drag{cursor:grabbing}
  .ed-fila-scroll:focus-visible{outline:2px solid var(--teal,#5BC0BE);outline-offset:4px;border-radius:12px}
  .ed-fila-track{display:flex;width:max-content}
  .ed-fila-card{
    position:relative;isolation:isolate;display:block;
    flex:0 0 var(--ef-w);height:var(--ef-h);margin-right:var(--ef-vao);
    scroll-snap-align:start;border-radius:20px;overflow:hidden;
    background:#0D1330;box-shadow:var(--v3-hair);text-decoration:none;color:#fff;
    transition:flex-basis .55s var(--v3-ease),box-shadow .25s ease;
  }
  .ed-fila-card:last-child{margin-right:0}
  .ed-fila-card.show{flex-basis:var(--ef-w-aberto)}
  .ed-fila-card:hover{box-shadow:var(--v3-hair),var(--v3-hover)}
  .ed-fila-card:focus-visible{outline:2px solid var(--teal,#5BC0BE);outline-offset:3px}
  /* a midia cobre o card inteiro: o video da imersao FULL, sem faixa branca */
  .ed-fila-ph{position:absolute;inset:0;border:0;border-radius:0;box-shadow:none;background:#0A0F26;overflow:hidden}
  .ed-fila-ph .ed-yt{position:absolute;inset:0;aspect-ratio:auto;height:100%;max-height:none}
  .ed-fila-ph .ed-yt video,.ed-fila-ph .ed-capa{transition:transform .45s ease}
  .ed-fila-card.show .ed-fila-ph .ed-yt video,.ed-fila-card.show .ed-capa{transform:scale(1.03)}
  .ed-fila-ph--icone{display:grid;place-items:center}
  .ed-fila-ph--icone .s2p-ic{width:64px;height:64px;border-radius:18px;background:rgba(255,255,255,.7);border:0;color:var(--v3-teal-ink);box-shadow:0 10px 30px -18px rgba(11,13,24,.4);transform:translateY(-14%)}
  .ed-fila-ph--icone .s2p-ic svg,.ed-fila-ph--icone .s2p-ic .s2p-ic-m{width:28px;height:28px}
  .ed-fila-ph--icone[data-g="1"]{background:linear-gradient(135deg,#B7CDFE 0%,#D6C0FF 50%,#B8E4E3 100%)}
  .ed-fila-ph--icone[data-g="2"]{background:linear-gradient(305deg,#FFD8A3 0%,#FFC0D8 50%,#D6C0FF 100%)}
  .ed-fila-ph--icone[data-g="3"]{background:linear-gradient(158deg,#EDE4FF 0%,#C3D6FE 55%,#B2EBD4 100%)}
  /* o scrim que segura o texto sobre a midia: mais fundo no card aberto */
  .ed-fila-card::after{
    content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,rgba(7,11,30,0) 40%,rgba(7,11,30,.5) 64%,rgba(7,11,30,.92) 100%);
    transition:opacity .3s ease;
  }
  .ed-fila-info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 20px 20px}
  .ed-fila-info b{
    display:flex;align-items:flex-end;min-height:2.36em;
    font-family:'Manrope',sans-serif;font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.18;color:#fff;
    transition:font-size .45s var(--v3-ease);text-wrap:balance;
  }
  .ed-fila-card.show .ed-fila-info b{font-size:clamp(22px,2vw,28px);min-height:0}
  .ed-fila-role{
    display:block;margin-top:6px;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.8);
    max-height:0;opacity:0;overflow:hidden;transition:max-height .45s ease,opacity .3s ease,margin-top .35s ease;
  }
  .ed-fila-card.show .ed-fila-role{max-height:120px;opacity:1;margin-top:8px}
  .ed-fila-link{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:14px;font-weight:600;color:#fff}
  .ed-fila-link .arr{color:var(--teal,#5BC0BE);transition:transform 220ms var(--v3-ease)}
  .ed-fila-card:hover .ed-fila-link .arr{transform:translate(2px,-2px)}
  @media(max-width:1000px){
    .ed-fila-topo{margin-top:0;justify-content:flex-start}
    .ed-fila{--ef-h:clamp(400px,64vh,500px);--ef-w:min(56vw,220px);--ef-w-aberto:min(82vw,360px)}
  }
  @media(prefers-reduced-motion:reduce){
    .ed-fila-card,.ed-fila-info b,.ed-fila-role,.ed-fila-ph .ed-yt video,.ed-capa{transition:none!important}
  }
  /* Refinamento institucional: demais seções. */

  :root{
    --v3-bg:#F7F9F9;--v3-ink:#0B132B;--v3-mut:#536477;--v3-t2:#63788A;
    --v3-teal-ink:#287D7B;--v3-teal-tile:rgba(91,192,190,.12);
    --light-bg:#F7F9F9;--light-card:#FFFFFF;--light-chrome:#EDF3F3;
    --v3-hair:0 0 0 1px rgba(11,19,43,.08);
    --v3-hover:0 18px 42px -26px rgba(11,19,43,.24);
    --v3-ease:cubic-bezier(.22,1,.36,1);
  }
  body{background:var(--v3-bg);color:var(--v3-ink)}
  .wrap,section.pad > .wrap{width:calc(100% - clamp(40px,8vw,112px));max-width:1180px;padding-inline:0}
  .h2,.mv-cab h2,.sv-abertura h2,.ed-abertura h2{
    font-size:clamp(30px,3.4vw,48px);font-weight:400;line-height:1.18;letter-spacing:-.035em;text-wrap:balance;
  }
  .dobra-cab > p,.dobra-cab .lede{font-size:clamp(16px,1.35vw,18px);line-height:1.75}
  .dobra-cab .mv-pill{margin-bottom:24px}
  .mv-pill{box-shadow:none;background:transparent;padding-inline:0;color:var(--v3-teal-ink);font-weight:600}
  .mv-cab{max-width:820px}
  .mv-cab .mv-lede{max-width:66ch}
  #empresa{padding-block:clamp(80px,9vw,136px) clamp(56px,6vw,88px)}
  section.pad.sv-sec,section.pad.ed-sec,#porque,#avaliacoes{padding-block:clamp(72px,8vw,112px)}
  .sv-abertura,.ed-abertura{margin-bottom:clamp(32px,4vw,56px);max-width:800px}
  .s2h-panel{box-shadow:none}

  [data-entrada] .s2h.is-boxed .s2h-island > *{animation:none;opacity:1}
  .s2v-v2 .s2v-t{font-weight:400;line-height:1.1;letter-spacing:-.042em;max-width:22ch}
  .s2v-sub{line-height:1.75;color:rgba(249,249,249,.8)}
  .s2v-acoes{gap:14px;margin-top:32px}
  .s2v-l{color:rgba(249,249,249,.72)}
  .v3-btn{min-height:48px;justify-content:center;transition-duration:300ms}
  .v3-btn--branco{background:var(--teal);color:var(--v3-ink)}
  .v3-btn--branco:hover{background:#80CECC}
  :where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--v3-teal-ink);outline-offset:5px}
  .ink :where(a,button):focus-visible,button):focus-visible{outline-color:var(--teal)}
  .reveal{transform:translateY(18px);filter:none;transition:opacity .65s var(--v3-ease),transform .65s var(--v3-ease);transition-delay:0s!important}
  .reveal.in{transform:none}
  .reveal .reveal{transform:none;opacity:1}
  .mv-fundo{opacity:.42}
  .mv-no{opacity:1;background:rgba(255,255,255,.94);box-shadow:0 12px 32px -24px rgba(11,19,43,.3)}
  .mv-cards{gap:24px}
  .mv-eco .mv-face{background:#fff;border-color:rgba(11,19,43,.1);box-shadow:0 12px 28px -24px rgba(11,19,43,.22);padding:30px}
  .mv-card.aceso .mv-face{border-color:rgba(91,192,190,.4);box-shadow:var(--v3-hover)}
  .mv-card.aceso .mv-card-ic{color:var(--v3-teal-ink);background:var(--v3-teal-tile);border-color:transparent}
  .mv-card.aceso .mv-card-lista li::before{background:var(--v3-teal-ink)}
  .mv-card-in{transition:transform .65s var(--v3-ease)}
  .sv3-bento{gap:24px;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
  .sv3-cards{gap:18px}
  .sv3-card{padding:28px;flex-wrap:wrap;gap:16px;border-radius:20px}
  .sv3-card .v3-link{flex-basis:100%;padding-left:62px}
  .sv3-card p{line-height:1.65;margin-top:8px}
  .sv3-foto{border-radius:24px}
  section.pad.ed-sec{background:#EEF3F3}
  .ed-abertura h2{color:var(--v3-ink);margin:0 0 18px}
  .ed-fila{--ef-vao:20px;--ef-h:clamp(400px,52vh,500px)}
  .ed-fila-topo{margin-top:0}
  .ed-fila-ph--icone[data-g]{background:linear-gradient(145deg,#203B50,#0B132B)}
  .ed-fila-ph--icone[data-g="2"]{background:linear-gradient(145deg,#467E85,#142D41)}
  .ed-fila-ph--icone[data-g="3"]{background:linear-gradient(145deg,#3A506B,#142D41)}
  .ed-fila-ph--icone .s2p-ic{background:rgba(91,192,190,.12);color:#A4DBD8;box-shadow:none;border:1px solid rgba(91,192,190,.24);border-radius:20px;width:76px;height:76px}
  .ed-fila-info{padding:24px}
  .ed-fila-info b{line-height:1.3}
  .ed-fila-role{line-height:1.65}
  .ed-fila-link{min-height:44px;text-decoration:none}
  .pq-bento{gap:24px}
  #porque::before{opacity:.24}
  .pq-card{border-radius:24px;padding:30px 30px 0;min-height:380px;transition-duration:350ms}
  .pq-card h3{line-height:1.3;font-weight:600}
  .pq-card p{font-size:15px;line-height:1.7}
  .pq-card[data-g] .pq-wash{background:radial-gradient(ellipse at 75% 100%,rgba(91,192,190,.24),transparent 70%)}
  .pq-card[data-g="2"] .pq-wash,.pq-card[data-g="6"] .pq-wash{background:radial-gradient(ellipse at 85% 100%,rgba(58,80,107,.2),transparent 75%)}
  .pq-ir{width:44px;height:44px;border-radius:50%;top:20px;right:20px}
  .pq-mock{transition:translate .6s var(--v3-ease)}
  .pq-card:hover .pq-mock{translate:0 -5px}
  .rv2{border-radius:22px}
  #contato{padding-block:32px clamp(64px,7vw,96px)}
  .v3-acento{background:linear-gradient(135deg,#0B132B,#193B49);border-radius:32px;gap:clamp(32px,5vw,72px);align-items:center}
  .v3-acento .dobra-cab,.v3-acento .h2{text-align:left}
  .v3-acento .h2{color:#fff;font-size:clamp(30px,3vw,42px)}
  .v3-acento .h2 .t2{color:#A7C7CD}
  .v3-acento .mv-pill{color:var(--teal);background:none}
  .v3-acento .contato-alt{color:#BCCFD6}
  .v3-acento .contato-alt a{color:#A4DBD8;text-underline-offset:4px}
  .cform{padding:clamp(22px,3vw,36px);border-radius:24px}
  .cform label{font-size:13px;margin-bottom:8px}
  .cform input,.cform select,.cform textarea{font-size:16px;min-height:48px;background:#F7F9F9;border-radius:10px}
  .cform input:focus,.cform select:focus,.cform textarea:focus{box-shadow:0 0 0 3px rgba(91,192,190,.18)}
  .cform .field{margin-bottom:18px}
  @media(max-width:1000px){
    .sv3-bento{grid-template-columns:1fr}
    .ed-fila{--ef-w:min(56vw,220px);--ef-w-aberto:min(82vw,360px)}
    .pq-bento{gap:20px}
  }
  @media(max-width:640px){.v3-acento{border-radius:24px}
    .mv-cards{gap:20px}
    .mv-eco .mv-face{padding:24px}
    .sv3-card{padding:24px}
    .sv3-card .v3-link{padding-left:60px}
    .pq-card{padding:24px 24px 0;min-height:360px}
    .pq-ir{top:16px;right:16px}
    .pq-card::after{height:190px}
    .v3-acento{padding:28px 20px}
    .cform .two{grid-template-columns:1fr;gap:0}
    .s2v-acoes{gap:12px}
    .s2v-acoes .v3-btn{font-size:14px;padding-inline:18px}
  }
  @media(hover:none){
    .mv-card .mv-card-in,.mv-card:hover .mv-card-in,.mv-card:focus-within .mv-card-in{transform:none}
    .mv-card .mv-verso{position:relative;transform:none;opacity:1;backface-visibility:visible;border-top:0;border-radius:0 0 22px 22px;padding-top:0}
    .mv-card .mv-verso > :not(.mv-btn){display:none}
    .mv-card .mv-frente{height:auto;border-bottom:0;border-radius:22px 22px 0 0}
    .mv-card .mv-btn{margin-top:4px}
  }
  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto!important}
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
    .reveal{opacity:1;transform:none}
    .pq-card:hover .pq-mock{translate:none}
  }


  .mv-eco .mv-face,.mv-eco .mv-card.aceso .mv-face{
    background:linear-gradient(135deg,rgba(255,255,255,.66),rgba(233,243,243,.38));
    border:0;box-shadow:0 16px 44px -32px rgba(11,19,43,.22);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  }
  .mv-card.aceso{transform:none}
  .mv-card.aceso::after{display:none;animation:none}
  .mv-card.aceso .mv-card-in{animation:none}


  .rv2-mq{display:block;overflow:visible;mask-image:none;-webkit-mask-image:none}
  .rv2-fila{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;animation:none;transform:none}
  .rv2-fila .rv2{width:auto;min-width:0;padding:28px;gap:20px}
  .rv2 blockquote{font-size:15px;line-height:1.75}
  .rv2 figcaption{padding-top:12px}
  .rv2:hover{transform:none}


  .v3-acento .cform{
    background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.055));
    border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 56px -36px rgba(0,0,0,.45);
    -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  }
  .cform label{color:#F4F8FA}
  .cform label .req{color:#9CDCD8}
  .cform input,.cform select,.cform textarea{color:#fff;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2)}
  .cform input::placeholder,.cform textarea::placeholder{color:#C1CED7}
  .cform input:focus,.cform select:focus,.cform textarea:focus{background:rgba(255,255,255,.12);color:#fff;border-color:var(--teal)}
  .cform select{color-scheme:dark}
  .cform select option{background:#19303F;color:#fff}
  .cform .cform-submit{background:var(--teal);color:#0B132B;border-color:transparent}
  .cform-msg{color:#C1D0DA}
  .cform-msg.err{color:#FFD0BC}
  @media(max-width:1000px){
    .rv2-fila{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media(max-width:640px){
    .rv2-fila{grid-template-columns:1fr;gap:18px}
    .rv2-fila .rv2{padding:24px}
  }
  .rv2-mq{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding:4px 0 20px}
  .rv2-mq::-webkit-scrollbar{display:none}
  .rv2-fila{display:flex;gap:24px}
  .rv2-fila .rv2{flex:0 0 calc((100% - 48px)/3);scroll-snap-align:start}
  .rv2-controls{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:16px}
  .rv2-controls button{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(11,19,43,.12);background:rgba(255,255,255,.65);color:#142D41;cursor:pointer;transition:background .2s,opacity .2s}
  .rv2-controls button:hover{background:#E2F1F0}
  .rv2-controls button:disabled{opacity:.3;cursor:default}
  .rv2-controls span{font-size:13px;color:#526572;min-width:70px;text-align:center}
  @media(max-width:1000px){.rv2-fila .rv2{flex-basis:calc((100% - 24px)/2)}}
  @media(max-width:640px){.rv2-fila .rv2{flex-basis:100%}.rv2-controls{justify-content:center}}
  @media(prefers-reduced-motion:reduce){}

  /* Base original do Hub: azul profundo com azul médio, independente da logo. */
  #tecnologia .mv-kt-cab > p{color:rgba(255,255,255,.72)}
  section.pad.mv-kt > .wrap{width:100%;max-width:none;padding:0 clamp(18px,3vw,44px)}
  .mv-kt-box{background:linear-gradient(160deg,#04081F 0%,#1E3A8A 68%,#2B4BA4 100%)}
  /* Ilustrações próximas do texto, centralizadas e recortadas pelo card. */
  #porque .pq-card::after{display:none}
  #porque .pq-card .pq-mock{position:relative;right:auto;bottom:auto;width:100%;max-width:700px;max-height:250px;flex-shrink:0;margin:24px auto -36px}
  #porque .pq-card[data-g="1"] > p{max-width:none;text-wrap:initial}
  #porque .pq-card[data-g="1"] h3{max-width:none}
  #porque .pq-mock--foto img{height:250px;object-fit:cover;object-position:center}
  @media(min-width:1001px){#porque .pq-card[data-g="1"] > p{white-space:nowrap;font-size:15px}}
  @media(max-width:640px){#porque .pq-card .pq-mock{margin-top:20px;max-height:230px}#porque .pq-mock--foto img{height:250px}}

  /* Educação em duas linhas; avaliações com abertura alinhada à esquerda. */
  .ed-abertura{max-width:none}
  #ed-titulo{font-size:clamp(28px,3.25vw,44px);max-width:none;text-wrap:initial}
  #avaliacoes .sec-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 48px;text-align:left;align-items:end}
  #avaliacoes .sh-label{grid-column:1/-1;text-align:left}
  #avaliacoes .h2{max-width:24ch;margin:0;text-align:left;font-size:clamp(30px,3.3vw,44px);line-height:1.2}
  #avaliacoes .rv2-selo{justify-content:flex-start;margin:20px 0 0;flex-wrap:wrap}
  #avaliacoes .rv2-controls{margin:0;gap:14px;justify-content:flex-end;padding-bottom:4px}
  #avaliacoes .rv2-controls button{width:52px;height:44px;border:0;border-bottom:1px solid #89969F;border-radius:0;background:transparent}
  #avaliacoes .rv2-controls button:hover:not(:disabled){background:rgba(91,192,190,.08);border-color:#142D41}
  #avaliacoes .rv2-controls svg{width:30px;height:24px}
  #avaliacoes .rv2-fila .rv2{flex-basis:calc((100% - 24px)/2);padding:28px 28px 8px 0;border:0;border-top:1px solid #CCD7DA;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;gap:24px}
  #avaliacoes .rv2 blockquote{font-size:17px;line-height:1.75;color:#384B5D;text-align:left}
  #avaliacoes .rv2 figcaption{padding-top:8px;margin-top:0}
  #avaliacoes .rv2-av{display:none}
  #avaliacoes .stars{color:#AB8847;gap:3px}
  @media(max-width:640px){
    #avaliacoes .sec-head{grid-template-columns:minmax(0,1fr);gap:20px}
    #avaliacoes .rv2-controls{justify-content:flex-end;margin-top:4px}
    #avaliacoes .rv2-fila .rv2{flex-basis:100%;padding-right:0}
    #avaliacoes .rv2 blockquote{font-size:16px}
  }
  #tecnologia .hub-tl-btn{background:transparent;color:#fff;border:0;border-bottom:1px solid rgba(255,255,255,.35);border-radius:0;box-shadow:none;padding:10px 0;gap:14px}
  #tecnologia .hub-tl-btn:hover{background:transparent;box-shadow:none;border-bottom-color:#fff;transform:none}
  #tecnologia .hub-tl-btn .arr{display:inline-block;color:inherit}
  /* Refinamento inicial da Tecnologia, preservando o azul profundo da box. */
  .mv-kt{padding:24px 0 0}
  .mv-kt-box{
    border-radius:32px;background:linear-gradient(160deg,#04081F 0%,#1E3A8A 68%,#2B4BA4 100%);
    padding:clamp(48px,6vw,88px) clamp(24px,5vw,72px);
  }
  .mv-kt-box::before{background:radial-gradient(ellipse at 100% 0,rgba(91,192,190,.14),transparent 58%)}
  .mv-kt-box .mv-pill{background:transparent;box-shadow:none;color:var(--teal)}
  .mv-kt-cab .t2{color:#9CB8C7}
  .mv-kt-cab.dobra-cab > p{color:#BACDD6;max-width:none}
  @media(min-width:1024px){#tecnologia .mv-kt-cab>.mv-kt-lede{font-size:clamp(14px,1.4vw,20px);white-space:nowrap}}
  .hub-lista{grid-template-columns:210px minmax(0,640px);gap:clamp(28px,4vw,56px)}
  .hub-lista-nav{gap:8px;padding-top:4px}
  .hub-lista-item{position:relative;min-height:48px;padding:10px 0 10px 20px;border-radius:0;border-left:1px solid rgba(255,255,255,.16)}
  .hub-lista-item::before{content:'';position:absolute;left:-1px;top:10px;bottom:10px;width:2px;background:var(--teal);transform:scaleY(0);transition:transform .4s var(--v3-ease)}
  .hub-lista-item.on::before{transform:scaleY(1)}
  .hub-lista-item .hub-tl-meta b{color:#A5BBC8;font-weight:400}
  .hub-lista-item.on .hub-tl-meta b{color:#fff}
  .hub-lista-cards > .hub-tl-item{transform:translateY(10px);transition-duration:.5s,.5s,0s}
  .hub-lista-cards > .hub-tl-item.on{transform:none}
  .hub-tl-card{padding:12px 12px 16px;border-radius:24px}
  .hub-tl-card .mv-kt-fig[data-g]{background:linear-gradient(135deg,#DBE9ED,#B6DAD8);border-radius:16px;}
  .hub-tl-card h3{margin-top:8px;font-size:21px}
  .hub-tl-item.on .hub-tl-desc{color:#C1D0DA;line-height:1.75}
  .hub-tl-lista{background:transparent;border:0;border-top:1px solid rgba(255,255,255,.12);border-radius:0;padding:16px 0 0;gap:10px}
  .hub-tl-lista li{color:#C1D0DA}

  .mv-kt-cab h2{font-size:clamp(30px,3.4vw,48px);font-weight:400;line-height:1.18;letter-spacing:-.035em;text-wrap:balance}
  @media(max-width:1000px){
    .hub-lista{grid-template-columns:minmax(0,1fr)}
    .hub-lista-nav{gap:8px;padding-bottom:10px}
    .hub-lista-item{padding:10px 16px;border:0;border-radius:99px}
    .hub-lista-item::before{display:none}
    .hub-lista-item.on{background:rgba(91,192,190,.12)}
  }
  @media(max-width:640px){.mv-kt-box{border-radius:24px;padding-inline:20px}}
  /* Fundo profundo; azul médio restrito a um reflexo localizado. */
  #tecnologia .mv-kt-box{background:linear-gradient(145deg,#04081F 0%,#09132E 100%)}
  #tecnologia .mv-kt-box::before{background:radial-gradient(ellipse 38% 32% at 100% 100%,rgba(43,75,164,.22),transparent 100%)}
  #porque .pq-card[data-g="1"] .pq-mock{flex:1;display:flex;max-height:none;margin-bottom:-36px}
  #porque .pq-card[data-g="1"] .pq-mock .mv-tela{display:flex;flex-direction:column;min-height:300px;border-bottom:0;box-shadow:0 0 0 1px rgba(11,13,24,.06),0 24px 48px -30px rgba(11,13,24,.2)}
  #porque .pq-card[data-g="1"] .mv-tela-corpo{flex:1}
  #porque .pq-card .pq-brasil{max-height:none;max-width:360px;margin:12px auto 0;flex:1;display:flex;align-items:center}
  .pq-brasil svg{display:block;width:100%;height:auto;max-height:290px;overflow:visible}
  .pq-brasil .br-flow{stroke-dasharray:10 90;animation:br-connect 7s linear infinite;animation-delay:var(--br-delay)}
  @keyframes br-connect{from{stroke-dashoffset:100}to{stroke-dashoffset:-100}}
  @media(prefers-reduced-motion:reduce){.pq-brasil .br-flow{animation:none;stroke-dasharray:none;opacity:.35}}
  /* Teal reservado a ícones, conexões e indicadores; superfícies neutras. */
  :root{--v3-teal-tile:rgba(11,19,43,.045)}
  .mv-eco .mv-face,.mv-eco .mv-card.aceso .mv-face{background:linear-gradient(135deg,rgba(255,255,255,.7),rgba(239,242,246,.45))}
  #porque .pq-card[data-g] .pq-wash{background:radial-gradient(ellipse at 75% 100%,rgba(33,48,77,.09),transparent 70%)}
  .hub-tl-card .mv-kt-fig[data-g]{background:linear-gradient(135deg,#F1F3F7,#DDE3ED)}
  section.pad.ed-sec{background:#F0F2F5}
  .ed-fila-ph--icone[data-g]{background:linear-gradient(145deg,#101D3B,#04081F)}
  .ed-fila-ph--icone .s2p-ic{background:rgba(255,255,255,.06)}
  .v3-acento{background:linear-gradient(135deg,#04081F,#101D3B)}
  .v3-btn--branco,.v3-btn--branco:hover{background:#F4F6F9;color:#0B132B}
  .cform .cform-submit,.cform .cform-submit:hover{background:#F4F6F9;color:#0B132B}
  .pq-ir:hover{background:rgba(11,19,43,.08)}
  #avaliacoes .rv2-controls button:hover:not(:disabled){background:rgba(11,19,43,.04)}
  .hub-lista-item.on{background:transparent}
  .pq-brasil > svg > path:first-of-type{fill:#EDF0F5;stroke:#CDD5E0}
  #pq-br-dots circle{fill:#718096}

  /* Palco centralizado na área útil; seleção acompanha o progresso do scroll. */
  #tecnologia .mv-kt-box{overflow:clip}
  .hub-scroll-track{width:100%}
  .hub-scroll-track .hub-lista{align-items:center}
  .hub-scroll-track .hub-lista-nav{align-self:center}
  .hub-scroll-track .hub-tl-desc{display:block;-webkit-line-clamp:unset;overflow:visible;color:#C1D0DA}
  .hub-scroll-track .hub-tl-mais{grid-template-rows:1fr;opacity:1;transition:none}
  .hub-scroll-track.is-stage{height:calc(420vh + 600px)}
  .is-stage .hub-lista{position:sticky;top:var(--hub-top);height:calc(100dvh - var(--hub-top) - 24px)}
  .is-stage .hub-lista-cards{align-items:center}
  .is-stage .hub-tl-card .mv-kt-fig{aspect-ratio:auto;height:230px;margin-bottom:12px;padding:20px 0 0 20px}
  .is-stage .hub-tl-card .mv-tela-corpo{min-height:0;padding:20px}
  .is-stage .hub-tl-card h3{margin-top:0}
  .is-stage .hub-tl-lista{margin-top:12px;padding-top:12px;gap:6px}
  .is-stage .hub-tl-btn{margin-top:10px;margin-bottom:0}
  .hub-scroll-track:not(.is-stage) .hub-lista-cards{display:flex;flex-direction:column;gap:48px}
  .hub-scroll-track:not(.is-stage) .hub-tl-item{opacity:1;visibility:visible;pointer-events:auto;transform:none;scroll-margin-top:140px}
  .hub-scroll-track:not(.is-stage) .hub-lista-nav{position:sticky;top:calc(50vh - 130px);align-self:start}
  @media(max-width:1000px){
    .hub-scroll-track:not(.is-stage) .hub-lista-nav{position:static}
    .hub-scroll-track .hub-tl-meta--mob{display:flex}
    .hub-scroll-track .hub-tl-meta--mob b{color:#fff}
  }
  /* Cards discretos preservam a diagramação das avaliações. */
  #avaliacoes .rv2-fila .rv2{padding:30px;border:1px solid rgba(11,19,43,.09);border-radius:16px;background:rgba(255,255,255,.72);box-shadow:0 10px 28px -24px rgba(11,19,43,.16)}
  #avaliacoes .rv2 figcaption{margin-top:auto;padding-top:8px}
  @media(max-width:640px){#avaliacoes .rv2-fila .rv2{padding:24px}}
  #porque .pq-card .pq-team{max-height:none;max-width:400px;flex:1;margin:20px auto 0;display:flex;align-items:center}
  .pq-team svg{width:100%;height:auto;max-height:290px;overflow:visible}
  .pq-team-link{stroke:#9CAFC0;stroke-width:1.3;stroke-dasharray:2 4;animation:team-link 16s linear infinite;animation-delay:var(--delay)}
  .pq-team-link:nth-of-type(3n){stroke:#5A9F9D}
  @keyframes team-link{to{stroke-dashoffset:-48}}
  @media(prefers-reduced-motion:reduce){.pq-team-link{animation:none}}
  .pq-sla{position:relative;z-index:3;margin:24px 0 20px;min-width:0}
  .sla-switch{display:flex;padding:4px;border:1px solid #DDE2E9;border-radius:10px;background:#F0F2F5;gap:4px}
  .sla-switch button{flex:1;border:0;border-radius:7px;background:transparent;color:#536477;padding:10px 5px;font:inherit;font-size:12px;line-height:1.3;cursor:pointer}
  .sla-switch button[aria-pressed="true"]{background:#fff;color:#0B132B;box-shadow:0 1px 4px #0B132B12}
  .sla-switch button:focus-visible{outline:2px solid #287D7B;outline-offset:2px}
  .sla-main{display:flex;flex-direction:column;gap:10px;margin-top:24px}
  .sla-main > span{font-size:13px;color:#536477}
  .sla-main strong{font-size:44px;line-height:1.1;font-weight:600;letter-spacing:-.04em;color:#0B132B}
  .sla-main strong span{font-size:24px;margin-left:3px;font-weight:400}
  .sla-bar{height:4px;background:#E1E5EB;border-radius:3px;overflow:hidden;margin:14px 0 20px}
  .sla-bar i{display:block;height:100%;width:58%;background:#172B50;transition:width .6s cubic-bezier(.22,1,.36,1)}
  .sla-metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}
  .sla-metrics dt{font-size:11px;color:#637082;line-height:1.4}
  .sla-metrics dd{margin:6px 0 0;font-size:20px;color:#0B132B}
  #porque .pq-card .sla-note{font-size:10px;line-height:1.5;color:#6B7686;margin:18px 0 0;max-width:none}
  #porque .pq-card .sla-chart-title{font-size:12px;margin:22px 0 10px;line-height:1.5}
  .sla-chart{display:block;width:100%;overflow:visible}
  .sla-chart rect{fill:#172B50;transition:y .45s ease,height .45s ease}
  .sla-chart text{font-family:inherit;font-size:10px;fill:#172B50}
  .sla-chart .sla-axis{font-size:9px;fill:#6B7686}
  #avaliacoes .rv2-controls button{width:44px;height:44px;border:0;border-radius:50%;background:#fff;box-shadow:var(--v3-hair);transition:transform .22s,box-shadow .22s,opacity .22s}
  #avaliacoes .rv2-controls button:hover:not(:disabled){background:#fff;transform:translateY(-1px);box-shadow:var(--v3-hair),var(--v3-hover)}
  #avaliacoes .rv2-controls button:disabled{opacity:.35;cursor:default}
  #avaliacoes .rv2-controls svg{width:18px;height:18px}
  #educacao .ed-abertura{margin-bottom:20px}
  #educacao .ed-abertura .mv-pill{margin-bottom:16px}
  #educacao #ed-titulo{margin-bottom:0}
  #educacao .ed-fila-topo{margin-top:-44px;justify-content:flex-end}
  #educacao .ed-fila{margin-top:20px}
  @media(max-width:1000px){#educacao .ed-abertura{margin-bottom:12px}#educacao .ed-fila-topo{margin-top:0}#educacao .ed-fila{margin-top:16px}}
  .sla-legend{display:flex;flex-wrap:wrap;gap:10px 16px;font-size:11px;color:#536477}
  .sla-legend span{display:flex;align-items:center;gap:6px}
  .sla-legend i{width:9px;height:9px;background:#A8B3C3;border-radius:2px}
  .sla-legend span:last-child i{background:#172B50}
  .sla-chart .sla-series-0{fill:#A8B3C3}
  .sla-chart .sla-series-1{fill:#172B50}
  .sla-chart .sla-bar-label{font-size:8px}
  #educacao .ed-abertura{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:16px 24px;margin:0}
  #educacao .ed-abertura .mv-pill{grid-column:1/-1;margin:0}
  #educacao .ed-abertura .ed-fila-topo{margin:0;align-self:end;padding-bottom:4px}
  #educacao .ed-fila{margin-top:24px}
  @media(max-width:1000px){
    #educacao .ed-abertura{grid-template-columns:minmax(0,1fr);gap:12px}
    #educacao .ed-abertura .ed-fila-topo{justify-self:end;padding:0}
    #educacao .ed-fila{margin-top:16px}
  }
  #porque .pq-card .hub-demo{pointer-events:auto;z-index:3}
  .hub-demo .mv-tela-top{gap:10px}
  .demo-label{margin-left:auto;font-size:9px;color:#6B7686;padding-right:8px}
  .demo-nav{display:flex;gap:4px;padding:8px 12px;border-bottom:1px solid #E6E9EF;overflow-x:auto}
  .demo-nav button,.demo-actions button{border:0;background:transparent;font:inherit;font-size:12px;color:#536477;padding:8px 12px;border-radius:6px;cursor:pointer}
  .demo-nav button[aria-pressed="true"]{background:#EDF0F5;color:#101D3B}
  .hub-demo button:focus-visible,.hub-demo input:focus-visible{outline:2px solid #287D7B;outline-offset:2px}
  .demo-viewport{height:300px;overflow:auto;padding:22px;background:#fff}
  .demo-screen[hidden]{display:none}
  .demo-screen h4{font-size:18px;line-height:1.4;color:#101D3B;margin:0;font-weight:600}
  #porque .pq-card .demo-sub{font-size:12px;margin:4px 0 18px;color:#68788B;max-width:none}
  .demo-screen[data-demo-screen="home"] h4,.demo-screen[data-demo-screen="home"] .demo-sub{text-align:center}
  .demo-prompt{width:100%;padding:12px;border:1px solid #E1E5EB;border-radius:10px;background:#F7F8FA;text-align:left;font:inherit;font-size:12px;color:#536477;cursor:pointer;display:flex;justify-content:space-between;gap:12px}
  .demo-apps{display:flex;justify-content:center;gap:20px;margin:20px 0}
  .demo-apps button{display:flex;flex-direction:column;align-items:center;gap:7px;padding:4px;border:0;background:none;font:inherit;font-size:11px;color:#536477;cursor:pointer}
  .demo-summary{display:flex;gap:16px;justify-content:space-between;border-top:1px solid #E6E9EF;padding-top:14px;margin-top:16px;font-size:10px;color:#68788B}
  .demo-summary b{display:block;font-size:16px;color:#172B50;margin-bottom:3px}
  .demo-task{display:flex;align-items:center;gap:10px;border-bottom:1px solid #E9ECF1;padding:13px 0;font-size:12px;color:#172B50;cursor:pointer}
  .demo-task input{accent-color:#172B50;width:16px;height:16px}
  .demo-task input:checked+span{text-decoration:line-through;color:#7D8795}
  .demo-task small,.demo-suggestion small{display:block;font-size:10px;color:#68788B;margin-top:5px;line-height:1.5}
  .demo-bubble{background:#F0F2F6;border-radius:10px;padding:12px;font-size:12px;color:#172B50}
  #porque .pq-card .demo-answer{font-size:12px;line-height:1.7;margin:14px 0;max-width:none}
  .demo-actions{display:flex;gap:8px}.demo-actions button{border-bottom:1px solid #CAD2DE;border-radius:0;padding-inline:0;margin-right:16px}
  .demo-pipeline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .demo-pipeline>div{background:#F4F6F9;border-radius:8px;padding:8px}
  .demo-pipeline small{font-size:10px;color:#68788B}
  .demo-pipeline article{background:#fff;padding:10px 8px;border-radius:6px;margin-top:8px;font-size:11px;color:#172B50}
  .demo-pipeline article span{display:block;margin-top:8px;font-size:10px}
  .demo-suggestion{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid #E6E9EF;font-size:12px;color:#172B50}
  .demo-suggestion button{border:1px solid #DCE2EB;border-radius:6px;background:#fff;color:#172B50;padding:7px;font:inherit;font-size:10px;cursor:pointer}
  #porque .pq-card .demo-feedback{font-size:11px;margin-top:12px;color:#287D7B}
  @media(max-width:640px){.demo-viewport{height:310px;padding:16px}.demo-nav{padding:6px}.demo-nav button{padding:8px;font-size:11px}.demo-apps{gap:16px}.demo-pipeline{gap:4px}.demo-pipeline>div{padding:5px}}
  .hub-demo .demo-viewport{padding-bottom:60px}

  /* ===================== V5 (08/09): a hero CENTRADA, como na demo do efeito Apple =====================
     Titulo, subtitulo e os dois CTAs no eixo central, com o titulo em medida
     curta (15ch) para fechar em tres linhas repartidas. A caixa navy, o
     fluido e os tres numeros na base continuam. */
  .s2v-v2 .s2v-texto{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;margin-inline:auto}
  .s2v-v2 .s2v-t{max-width:16ch;margin-inline:auto;font-size:clamp(40px,5.2vw,86px);letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
  .s2v-v2 .s2v-sub{max-width:44ch;margin-inline:auto;text-align:center;text-wrap:balance}
  .s2v-acoes{justify-content:center}
  @media(max-width:820px){
    .s2v-v2 .s2v-t{max-width:14ch}
  }
  .s2v-v2{justify-content:center}
  .s2v-v2::before{display:none}
  .s2v-v2 .s2v-texto{flex:0 1 auto}
  #tecnologia .mv-pill{padding:9px 16px;gap:8px;width:fit-content;flex-shrink:0;line-height:1.4;box-sizing:border-box}

/* Uma única tela do Hub, conduzida pela rolagem. */
.mv-kt-pilha>.hs-track{display:block;width:100%;height:440vh;position:relative;--hs-top:120px}
.hs-stage{position:sticky;top:var(--hs-top);height:calc(100svh - var(--hs-top) - 24px);min-height:480px;display:flex;align-items:center;gap:clamp(20px,4vw,56px)}
.hs-nav{flex:0 0 180px;display:grid;gap:10px;transition:flex-basis .6s,opacity .4s}
.hs-nav button{display:flex;gap:14px;align-items:center;text-align:left;border:0;border-left:1px solid #ffffff25;padding:14px 0 14px 16px;background:none;color:#8290aa;font:inherit;font-size:11px;cursor:pointer}
.hs-nav button span{font-size:15px;color:#b4bdce;white-space:nowrap}.hs-nav button[aria-current]{border-color:#5bc0be;color:#5bc0be}.hs-nav button[aria-current] span{color:#fff}
.hs-main{flex:1;min-width:0;max-width:100%;transition:width .6s}.hs-intro{margin-bottom:20px}.hs-intro h3{font-size:clamp(22px,2.4vw,30px);color:#fff;margin:0 0 8px;font-weight:600}.hs-intro p{font-size:15px;line-height:1.5;color:#aeb8cc;margin:0}
.hs-window{background:#04081f;border:0;border-radius:18px;overflow:hidden;box-shadow:0 24px 70px #0003;color:#142039}
.hs-chrome{display:flex;align-items:center;gap:18px;background:#f1f3f6;border-bottom:1px solid #e4e7ed;padding:10px 16px;color:#8b93a0;font-size:10px}.hs-chrome>span:first-child{font-size:9px;letter-spacing:3px;color:#c7ccd4}.hs-chrome small{margin-left:auto;font-size:9px}
.hs-toolbar{height:44px;display:flex;align-items:center;gap:8px;padding:0 18px;border-bottom:1px solid #edf0f4;font-size:13px}.hs-toolbar>span{margin-left:auto;color:#8992a1;font-size:10px}.hs-toolbar small{border-radius:50%;padding:5px;background:#f0f2f6;font-size:9px}
.hs-screen{height:clamp(290px,43svh,420px);overflow:auto;overscroll-behavior:contain;padding:24px}.hs-view[hidden]{display:none}.hs-view{animation:hs-in .35s ease}.hs-welcome{text-align:center}.hs-welcome small,.hs-document>small{font-size:9px;letter-spacing:.12em;color:#8992a1}.hs-screen h4{font-size:21px;line-height:1.3;margin:8px 0;color:#17223b}.hs-screen p{font-size:12px;line-height:1.6;color:#768093;margin:6px 0}.hs-composer{display:flex;justify-content:space-between;border:1px solid #e6e9ef;background:#f8f9fb;border-radius:10px;padding:13px;margin:18px 0;color:#98a0ad;font-size:11px}.hs-apps{display:grid;grid-template-columns:repeat(8,1fr);gap:20px 8px;padding:8px 0}.hs-apps>div{display:flex;align-items:center;flex-direction:column;gap:8px;font-size:9px;color:#768093}
.hs-app-heading{display:flex;align-items:center;gap:12px;margin-bottom:18px}.hs-app-heading h4{font-size:18px;margin:0}.hs-app-heading small{font-size:11px;color:#8b93a0}.hs-request{margin-left:12%;padding:12px 16px;background:#f0f3f8;border-radius:12px;font-size:12px}.hs-execution{padding:10px 4px}.hs-execution>div{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid #edf0f4}.hs-execution>div>span,.hs-saved{color:#288b8b}.hs-screen b{font-weight:600;font-size:12px}.hs-execution small{display:block;color:#8b93a0;font-size:10px;margin-top:4px}
.hs-document{border:1px solid #e7eaf0;border-radius:10px;padding:16px}.hs-document>div{padding-top:12px}.hs-saved{font-size:11px}.hs-view [data-reveal]{transition:opacity .4s,transform .4s}.hs-view [data-reveal].pending{opacity:.12;transform:translateY(8px)}
.hs-bottom{display:flex;justify-content:space-between;gap:12px;margin-top:16px;font-size:11px;color:#8f9bb1}.hs-bottom a{color:#e2e6ed;text-decoration:none;border-bottom:1px solid #ffffff40;padding-bottom:5px}.hs-stage[data-chapter="explore"] .hs-nav{flex-basis:130px}.hs-stage[data-chapter="explore"] .hs-nav button{gap:8px;padding-left:8px}.hs-stage[data-chapter="explore"] .hs-nav button span{font-size:12px}
.hs-cases{display:flex;gap:6px;border-bottom:1px solid #e7eaf0;padding-bottom:12px}.hs-cases button{font:inherit;font-size:11px;border:0;background:transparent;padding:8px 10px;border-radius:6px;color:#8190a4;cursor:pointer}.hs-cases button[aria-pressed="true"]{background:#eef1f6;color:#142039}.hs-case-body{padding-top:14px}.hs-case-body h4{font-size:18px}.hs-metrics{display:flex;gap:24px;margin:14px 0}.hs-metrics span{font-size:10px;color:#8992a1}.hs-metrics strong{display:block;color:#17223b;font-size:22px;font-weight:600;margin-top:4px}.hs-rows{display:grid;gap:6px}.hs-rows>div{display:flex;justify-content:space-between;gap:12px;background:#f7f8fa;padding:10px;border-radius:6px;font-size:11px}.hs-rows small{color:#8992a1;font-size:10px}.hs-case-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px}.hs-case-footer>small{font-size:9px;color:#98a0ad}.hs-action{background:#142039;color:white;border:0;border-radius:7px;padding:9px 12px;font:inherit;font-size:10px;cursor:pointer}.hs-action:disabled{opacity:.5;cursor:default}.hs-feedback{min-height:18px}.hs-stage button:focus-visible{outline:2px solid #5bc0be;outline-offset:3px}
@keyframes hs-in{from{opacity:.3;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:760px){.hs-track{height:380vh}.hs-stage{flex-direction:column;justify-content:center;gap:14px;min-height:0}.hs-nav,.hs-stage[data-chapter="explore"] .hs-nav{flex:none;display:flex;width:100%;gap:4px;justify-content:space-between}.hs-nav button,.hs-stage[data-chapter="explore"] .hs-nav button{padding:8px 5px;border-left:0;border-bottom:1px solid #ffffff25;gap:4px;font-size:9px}.hs-nav button span,.hs-stage[data-chapter="explore"] .hs-nav button span{font-size:10px;white-space:normal}.hs-main{flex:none;width:100%}.hs-intro{margin-bottom:12px}.hs-intro h3{font-size:20px}.hs-intro p{font-size:12px}.hs-screen{height:370px;padding:14px}.hs-apps{grid-template-columns:repeat(4,1fr);gap:8px 6px;padding:2px 0}.hs-apps img{width:22px;height:22px}.hs-apps>div{font-size:8px;gap:4px}.hs-welcome small{display:none}.hs-welcome h4{font-size:18px}.hs-welcome p{display:none}.hs-composer{margin:12px 0;font-size:9px;padding:10px}.hs-chrome{padding:8px 10px;gap:8px;font-size:8px}.hs-chrome small{font-size:8px}.hs-toolbar{height:34px}.hs-bottom{font-size:9px}.hs-hint{max-width:110px}.hs-cases{gap:0}.hs-cases button{padding:7px 5px;font-size:9px}.hs-case-footer{align-items:flex-start}.hs-case-footer>small{max-width:110px}.hs-metrics{gap:18px}.hs-metrics strong{font-size:20px}}
@media(max-height:700px){.hs-screen{height:230px}.hs-intro p{display:none}.hs-stage{min-height:0}.hs-intro{margin-bottom:10px}.hs-bottom{margin-top:8px}}
@media(prefers-reduced-motion:reduce){.hs-stage *{animation:none!important;transition:none!important}}

/* Texto à esquerda, somente a tela à direita. */
.hs-copy{flex:0 0 clamp(240px,27%,320px);min-width:0;transition:flex-basis .6s}
.hs-copy .hs-intro{margin-bottom:28px}.hs-copy .hs-intro h3{font-size:clamp(24px,2.6vw,34px);line-height:1.2;margin-bottom:14px}.hs-copy .hs-intro p{font-size:14px;line-height:1.65}
.hs-copy .hs-nav{display:grid;gap:4px}.hs-copy .hs-nav button,.hs-stage[data-chapter="explore"] .hs-copy .hs-nav button{padding:11px 0 11px 14px;gap:12px}.hs-copy .hs-nav button span,.hs-stage[data-chapter="explore"] .hs-copy .hs-nav button span{font-size:14px}
.hs-copy .hs-bottom{flex-direction:column;align-items:flex-start;gap:18px;margin-top:26px;line-height:1.6}.hs-copy .hs-bottom a{font-size:12px}
.hs-stage[data-chapter="explore"] .hs-copy{flex-basis:240px}
@media(max-width:760px){.hs-copy,.hs-stage[data-chapter="explore"] .hs-copy{flex:none;width:100%}.hs-copy .hs-intro{margin-bottom:12px}.hs-copy .hs-intro h3{font-size:20px;margin-bottom:6px}.hs-copy .hs-intro p{font-size:12px;display:block}.hs-copy .hs-nav{display:flex;gap:4px}.hs-copy .hs-nav button,.hs-stage[data-chapter="explore"] .hs-copy .hs-nav button{padding:7px 3px;gap:4px}.hs-copy .hs-nav button span,.hs-stage[data-chapter="explore"] .hs-copy .hs-nav button span{font-size:10px}.hs-copy .hs-bottom{display:none}}
@media(max-height:700px) and (min-width:761px){.hs-copy .hs-intro p{display:block}.hs-copy .hs-bottom{margin-top:14px;gap:10px}}

.hs-real{background:#f5f6fa}.hs-frame-wrap{height:clamp(350px,52svh,570px);overflow:hidden;position:relative}.hs-frame{display:block;border:0;transform-origin:top left;pointer-events:none;background:#f5f6fa}.hs-stage[data-chapter="explore"] .hs-frame{pointer-events:auto}.hs-real .hs-cases{padding:8px 14px;margin:0;background:#fff}.hs-real .hs-cases[hidden]{display:none}
@media(max-width:760px){.hs-frame-wrap{height:380px}.hs-real .hs-cases{padding:5px 10px}.hs-real .hs-cases button{font-size:11px;padding:8px 12px}}
@media(max-height:700px){.hs-frame-wrap{height:280px}}

/* A box ocupa a tela na entrada e volta à moldura na saída. */
body{background:color-mix(in srgb,#04081F calc(var(--tech-wash,0)*100%),#F7F8F9)!important}
#tecnologia{--tech-grow:0;--tech-gutter:clamp(18px,3vw,44px)}
section.pad.mv-kt>.wrap{padding-inline:calc(var(--tech-gutter)*(1 - var(--tech-grow)))}
#tecnologia .mv-kt-box{border-radius:calc(32px*(1 - var(--tech-grow)));padding-inline:calc(clamp(24px,5vw,72px) + var(--tech-gutter)*var(--tech-grow))}
#tecnologia .mv-kt-pilha{gap:32px}
#tecnologia .hs-stage{height:auto;min-height:0}
#tecnologia .mv-kt-cab{margin-bottom:0}
@media(max-width:760px){#tecnologia .mv-kt-pilha{gap:24px}#tecnologia .mv-kt-box{padding-inline:calc(20px + var(--tech-gutter)*var(--tech-grow))}}

/* Histórias de empresas: a fala ocupa o primeiro plano. */
.stories-heading{margin-bottom:36px}.stories-heading .mv-pill{margin-bottom:22px}.stories-heading h2{font-size:clamp(30px,4vw,52px);line-height:1.15;letter-spacing:-.04em;font-weight:600;color:#0b1530;margin:0}.stories-heading h2 span{color:#667c8b}
.stories-brands{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:28px}.stories-brands button{border:0;border-bottom:2px solid #dfe3e8;background:none;padding:24px 12px;color:#a3acb7;cursor:pointer;transition:color .3s,border-color .3s}.stories-brands button[aria-selected=true]{color:#132340;border-color:#132340}.story-logo{display:inline-flex;align-items:center;gap:10px;text-align:left}.story-logo i{font-size:38px;line-height:1;font-style:normal}.story-logo>span{font-size:27px;letter-spacing:-.05em;font-weight:600}.story-logo small{display:block;font-size:8px;letter-spacing:.24em;margin-top:2px}.story-logo--vertice>span{font-family:Georgia,serif}.story-logo--elo>span{font-weight:400;letter-spacing:.04em}
.story-panel{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:clamp(24px,5vw,72px);padding:clamp(28px,4.5vw,64px);min-height:380px;border:1px solid #e5e7eb;border-radius:22px;background:linear-gradient(135deg,#fff,#f0f2f5);box-shadow:0 12px 40px #14203904;animation:story-enter .35s ease}.story-panel[hidden]{display:none}.story-topic{font-size:12px;color:#667c8b}.story-content blockquote{padding:0;margin:18px 0 30px;border:0;font-size:clamp(22px,2.6vw,34px);line-height:1.42;letter-spacing:-.025em;color:#142039;font-weight:400}.story-author{display:grid;gap:5px;font-size:13px}.story-author b{color:#142039;font-weight:600}.story-author span{color:#778495}.story-photo{margin:0;text-align:center}.story-photo img{display:block;width:200px;height:260px;object-fit:cover;border-radius:50%;filter:saturate(.5);box-shadow:0 12px 32px #1323400c}.story-photo figcaption{font-size:10px;color:#8b96a4;margin-top:12px}.stories-footer{background:transparent;padding:0;border:0;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:20px}.stories-footer>small{font-size:11px;color:#8b96a4}.stories-controls{display:flex;align-items:center;gap:16px;flex-shrink:0}.stories-controls button{width:44px;height:44px;display:grid;place-items:center;border:1px solid #dfe3e8;border-radius:50%;background:#fff;color:#183349;font-size:22px;cursor:pointer}.stories-controls button:disabled{opacity:.3;cursor:default}.stories-controls span{font-size:12px;color:#778495}.stories-brands button:focus-visible,.stories-controls button:focus-visible{outline:2px solid #288b8b;outline-offset:4px}@keyframes story-enter{from{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:760px){.stories-brands{gap:8px;margin-bottom:18px}.stories-brands button{padding:16px 3px}.story-logo{gap:4px}.story-logo i{font-size:22px}.story-logo>span{font-size:17px}.story-logo small{font-size:6px;letter-spacing:.1em}.story-panel{grid-template-columns:1fr;gap:22px;min-height:0;padding:26px}.story-content blockquote{font-size:24px;margin-bottom:22px}.story-photo{display:flex;align-items:center;gap:12px}.story-photo img{width:84px;height:106px}.story-photo figcaption{text-align:left;margin:0}.stories-footer{align-items:flex-start;gap:12px}.stories-footer>small{max-width:180px;font-size:10px}.stories-controls{gap:9px}.stories-controls button{width:38px;height:38px}.stories-heading{margin-bottom:22px}}
@media(prefers-reduced-motion:reduce){.story-panel{animation:none}.stories-brands button{transition:none}}

/* Tópico editorial: texto aberto, sem painel no fundo. */
.hs-copy .hs-nav{background:transparent!important;box-shadow:none!important;border:0!important;backdrop-filter:none!important;display:flex;justify-content:flex-start;gap:10px}
.hs-copy .hs-nav::before,.hs-copy .hs-nav::after{display:none!important}
.hs-copy .hs-nav button,.hs-stage[data-chapter="explore"] .hs-copy .hs-nav button{display:block;position:relative;border:0;border-bottom:1px solid #ffffff25;padding:9px 12px;background:transparent!important;font-size:12px;min-width:40px}
.hs-copy .hs-nav button[aria-current]{border-color:#5bc0be}.hs-copy .hs-nav button span{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hs-benefits{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:15px}.hs-benefits li{position:relative;padding-left:22px;color:#aeb8cc;font-size:14px;line-height:1.65}.hs-benefits li::before{content:'✓';position:absolute;left:0;color:#73899b;font-size:12px}
.hs-copy .hs-intro h3{font-size:clamp(28px,3vw,38px)}.hs-copy .hs-intro{margin-bottom:22px}.hs-copy .hs-bottom{margin-top:18px}
@media(max-width:760px){.hs-copy .hs-intro h3{font-size:22px}.hs-benefits{margin-top:12px;gap:5px}.hs-benefits li{font-size:11px;line-height:1.4;padding-left:16px}.hs-copy .hs-intro{margin-bottom:8px}.hs-copy .hs-nav button,.hs-stage[data-chapter="explore"] .hs-copy .hs-nav button{padding:5px 10px}.hs-frame-wrap{height:330px}}
@media(max-height:700px){.hs-benefits{gap:7px;margin-top:12px}.hs-benefits li{font-size:12px}.hs-copy .hs-intro{margin-bottom:10px}.hs-frame-wrap{height:230px}}

/* A janela é a própria interface, sem barra de navegador adicional. */
.hs-frame-wrap{width:100%;height:auto;aspect-ratio:16/10;max-height:58svh}.hs-real{border-radius:16px}.hs-real .hs-cases{background:#0d1530;border-bottom-color:#ffffff18}.hs-real .hs-cases button{color:#aeb8cc}.hs-real .hs-cases button[aria-pressed=true]{background:#ffffff0c;color:#fff}
@media(max-width:760px){.hs-frame-wrap{height:auto;aspect-ratio:4/5;max-height:42svh}.hs-real{border-radius:12px}}
@media(max-height:700px){.hs-frame-wrap{max-height:36svh}}

/* Três tópicos e uma demonstração ampla ao final. */
.hs-explore-heading{display:none}.hs-stage[data-chapter="explore"]{top:max(120px,12svh);gap:0}.hs-stage[data-chapter="explore"] .hs-copy{display:none}.hs-stage[data-chapter="explore"] .hs-main{width:100%;flex:1}.hs-stage[data-chapter="explore"] .hs-explore-heading{display:block;margin-bottom:20px}.hs-explore-heading h3{font-size:clamp(24px,3vw,36px);font-weight:600;color:#fff;margin:0 0 8px}.hs-explore-heading p{font-size:14px;color:#aeb8cc;margin:0}.hs-main>.hs-cases{margin-bottom:16px;border-bottom:1px solid #ffffff20;gap:10px;padding:0 0 12px}.hs-main>.hs-cases[hidden]{display:none}.hs-main>.hs-cases button{color:#aeb8cc;font-size:13px;padding:10px 16px}.hs-main>.hs-cases button[aria-pressed="true"]{background:#ffffff0c;color:white}.hs-stage[data-chapter="explore"] .hs-frame-wrap{aspect-ratio:16/9;max-height:55svh}.hs-stage[data-chapter="explore"] .hs-window{animation:hs-in .45s ease}
@media(max-width:760px){.hs-stage[data-chapter="explore"]{top:110px}.hs-main>.hs-cases{display:grid;grid-template-columns:1fr 1fr;gap:6px}.hs-main>.hs-cases button{font-size:11px;padding:9px 6px;text-align:left}.hs-stage[data-chapter="explore"] .hs-frame-wrap{aspect-ratio:4/5;max-height:48svh}.hs-explore-heading p{font-size:12px}}
@media(max-height:700px){.hs-stage[data-chapter="explore"] .hs-frame-wrap{max-height:40svh}.hs-stage[data-chapter="explore"] .hs-explore-heading{margin-bottom:10px}}

/* Lista vertical: apenas o tópico ativo revela seu conteúdo. */
.hs-copy .hs-topic-list{display:flex;flex-direction:column;gap:0;align-items:stretch}.hs-topic{padding:15px 0;border-bottom:1px solid #ffffff15}.hs-topic:first-child{padding-top:0}.hs-topic h3{margin:0}.hs-copy .hs-topic-list button,.hs-stage[data-chapter="explore"] .hs-copy .hs-topic-list button{display:block;width:100%;padding:0;border:0!important;text-align:left;min-width:0;line-height:1.25;color:#7e8aa1}.hs-topic-list button b{font-size:23px;font-weight:400;letter-spacing:-.025em}.hs-topic-list button[aria-current] b{color:white;font-weight:600}.hs-topic-detail[hidden]{display:none}.hs-topic-detail{padding-top:14px;animation:hs-in .35s ease}.hs-topic-detail p{font-size:13px;line-height:1.6;color:#aeb8cc;margin:0}.hs-topic-detail .hs-benefits{margin-top:16px;gap:10px}.hs-topic-detail .hs-benefits li{font-size:12px;line-height:1.55}.hs-copy .hs-bottom{margin-top:22px}
@media(max-width:760px){.hs-topic{padding:8px 0}.hs-topic-list button b{font-size:18px}.hs-topic-detail{padding-top:8px}.hs-topic-detail p{font-size:11px}.hs-topic-detail .hs-benefits{margin-top:8px;gap:4px}.hs-topic-detail .hs-benefits li{font-size:10px;line-height:1.4}.hs-frame-wrap{max-height:34svh}}
.hs-topic-cta{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:6px 0;color:#e4e7ee;background:transparent;font-size:13px;font-weight:500;text-decoration:none;border-bottom:1px solid #ffffff30}.hs-topic-cta:hover{color:#fff;border-bottom-color:#fff}.hs-topic-cta:focus-visible{outline:2px solid #e4e7ee;outline-offset:5px}
@media(prefers-reduced-motion:reduce){.hs-topic-detail{animation:none}}

.mv-kt-pilha>.hs-track{height:340vh}.mv-kt-pilha>.hu-explore{display:block;width:100%;margin-top:48px}.hu-explore header{background:none;padding:0;margin:0 0 28px}.hu-explore h3{color:#fff;font-size:clamp(26px,3.5vw,42px);line-height:1.2;margin:0 0 12px;font-weight:600}.hu-explore header p{color:#aeb8cc;font-size:15px;margin:0}.hu-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:28px}.hu-options button{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:22px;border:0;border-right:1px solid #ffffff18;border-bottom:2px solid transparent;background:transparent;color:#aeb8cc;text-align:left;cursor:pointer;font:inherit}.hu-options button:last-child{border-right:0}.hu-options button[aria-pressed=true]{background:#ffffff04;border-bottom-color:#5bc0be}.hu-options b{color:white;font-weight:600;font-size:15px}.hu-options span{font-size:12px;line-height:1.6}.hu-options button:focus-visible{outline:2px solid #5bc0be;outline-offset:3px}#tecnologia .mv-kt-box{padding-bottom:0}.hu-explore>.hs-window{border:0;border-radius:16px 16px 0 0;background:#04081f}.hu-frame-wrap{position:relative;width:100%;height:auto;aspect-ratio:16/9;overflow:hidden;background:#04081f}.hu-frame-wrap iframe{display:block;max-width:none;border:0;transform-origin:top left;background:#04081f}.hs-frame-wrap{width:100%!important;background:#04081f}
@media(max-width:760px){.mv-kt-pilha>.hu-explore{margin-top:24px}.hu-options{grid-template-columns:1fr 1fr}.hu-options button{padding:15px;gap:9px}.hu-options b{font-size:13px}.hu-options span{font-size:11px}.hu-frame-wrap{height:auto;aspect-ratio:9/16}}

/* Mockups sem moldura de navegador; contato no fundo claro da página. */
#porque .pq-mock .mv-tela-top{display:none}
#porque .pq-card .pq-hub-story{display:block;position:relative;flex:1;min-height:340px;max-height:none;margin-bottom:-36px;overflow:hidden;border-radius:12px 12px 0 0;background:#04081f}
.pq-hub-story iframe{display:block;width:100%;height:100%;min-height:340px;border:0;position:absolute;inset:0}
#porque .pq-card[data-g="2"] .pq-mock{flex:1;max-height:none;display:flex;margin-bottom:-36px}
#porque .pq-card[data-g="2"] .mv-tela{flex:1;border-bottom:0;background:white}
#porque .pq-card:hover .pq-mock{translate:none}
#contato .v3-acento{background:none;border:0;border-radius:0;box-shadow:none;padding-inline:0}
#contato .v3-acento .h2{color:#0b1530}#contato .v3-acento .h2 .t2{color:#667c8b}
#contato .contato-alt{color:#667c8b}#contato .contato-alt a{color:#142039}
#contato .cform{background:#fff;border:1px solid #e1e5eb;box-shadow:0 12px 40px #14203906;backdrop-filter:none}
#contato .cform label{color:#142039}#contato .cform input,#contato .cform select,#contato .cform textarea{background:#f7f8fa;color:#142039;border-color:#dce1e8;color-scheme:light}
#contato .cform input::placeholder,#contato .cform textarea::placeholder{color:#7b8797}#contato .cform select option{background:#fff;color:#142039}
#contato .cform .cform-submit{background:#142039;color:#fff}#contato .cform-msg{color:#667c8b}#contato .cform-msg.err{color:#a33636}

.hu-options{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid #ffffff18}
.hu-options button{display:inline-flex;flex-direction:row;align-items:center;padding:10px 16px;border:0;border-radius:7px;background:transparent;color:#aeb8cc;gap:0}
.hu-options b{font-size:13px;font-weight:400;color:inherit}
.hu-options button[aria-pressed=true]{background:#ffffff09;color:#fff}
.hu-options button:hover{color:#fff;background:#ffffff06}
@media(max-width:760px){.hu-options{gap:6px}.hu-options button{padding:9px 11px}.hu-options b{font-size:12px}}
.stories-top-controls{display:flex;justify-content:flex-end;margin:0 0 16px}.stories-footer{justify-content:flex-start}


.stories-controls{gap:10px}
  .stories-controls button{
    width:44px;height:44px;display:grid;place-items:center;border-radius:50%;cursor:pointer;
    color:var(--v3-ink);background:#fff;border:0;box-shadow:var(--v3-hair);
    transition:background 220ms,box-shadow 220ms var(--v3-ease),opacity 220ms,transform 220ms var(--v3-ease);
  }
  .stories-controls button:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--v3-hair),var(--v3-hover)}
  .stories-controls button:disabled{opacity:.35;cursor:default}
  .stories-controls button svg{width:17px;height:17px}
  .stories-controls button:focus-visible{outline:2px solid var(--teal,#5BC0BE);outline-offset:3px}
/* Logos oficiais: máscara neutra e cores originais no hover/foco. */
#logos.logos-dobra{padding-block:40px 64px;border:0}
#logos .lg-item{position:relative;justify-content:center;width:180px;height:88px;border-radius:12px;transition:background .3s ease}
#logos .lg-item::before{content:"";position:absolute;inset:12px;background:#7b8794;mask:var(--logo) center/contain no-repeat;-webkit-mask:var(--logo) center/contain no-repeat;transition:opacity .3s ease}
#logos .lg-item img{display:block;max-width:156px;max-height:64px;width:auto;height:auto;object-fit:contain;opacity:0;transition:opacity .3s ease}
#logos .lg-item:is(:hover,:focus-visible)::before{opacity:0}
#logos .lg-item:is(:hover,:focus-visible) img{opacity:1}
#logos .lg-item--light:is(:hover,:focus-visible){background:#142039}
#logos .lg-item:focus-visible{outline:2px solid #667c8b;outline-offset:4px}
@media(max-width:640px){#logos .lg-item{width:144px;height:76px}#logos .lg-item img{max-width:120px;max-height:52px}}
@media(prefers-reduced-motion:reduce){#logos .lg-item,#logos .lg-item img,#logos .lg-item::before{transition:none}}

  /* ===================== V7 (08/09): a moldura da /lp-crm nas janelas do Hub =====================
     O mesmo mockup da LP do CRM: vidro translucido em volta (o ::before em
     -12px), a tela sem toolbar com traco claro, sombra funda e o brilho na
     cor do capitulo (--luz-mock). Vale para a janela do story e para a dos
     casos de uso. Sem backdrop-filter no vidro de proposito: a janela anima
     na troca de capitulo e o desfoque morreria (divida conhecida). */
  .hs-window.hs-real{
    position:relative;overflow:visible;border-radius:16px;background:#FBFCFF;
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 46px 90px -28px rgba(0,0,0,.92),0 16px 38px -16px rgba(0,0,0,.72),0 0 160px -10px rgba(var(--luz-mock,57,114,253),.55),inset 0 1px 0 rgba(255,255,255,.07);
  }
  .hs-window.hs-real::before{
    content:'';position:absolute;inset:-12px;z-index:0;border-radius:26px;pointer-events:none;
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.13);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  }
  .hs-window.hs-real > *{position:relative;z-index:1}
  .hs-frame-wrap,.hu-frame-wrap{border-radius:15px;overflow:hidden}
  .hs-stage[data-chapter="1"] .hs-window{--luz-mock:91,192,190}
  .hs-stage[data-chapter="2"] .hs-window{--luz-mock:163,100,255}
  .hs-main,.hu-explore .hs-window{margin-left:12px;margin-right:12px}
  /* os titulos da lista: semibold, teal claro; o ativo em branco (ordem da autora) */
  /* o destaque do titulo da dobra, no mesmo teal claro semibold da lista */
  #tecnologia .mv-kt-cab .t2{color:#5BC0BE;font-weight:600}
  .hs-topic-list button b{color:#5BC0BE;font-weight:600}
  .hs-topic-list button[aria-expanded="true"] b,.hs-topic-list button[aria-current="step"] b{color:#fff}
  @media(max-width:760px){.hs-main,.hu-explore .hs-window{margin-left:0;margin-right:0}.hs-window.hs-real::before{inset:-8px;border-radius:20px}}
  /* a palavra-chave da hero: semibold, teal claro (cor solida, nunca gradiente) */
  .s2v-v2 .s2v-t .s2v-k{color:#5BC0BE;font-weight:600}

  /* ===================== V8 (08/09): o lavado da Stripe no bento "Por que" =====================
     O card fica branco em cima e o gradiente colorido (cores do Hub) sobe do
     rodape, como na referencia: roxo, azul e laranja no primeiro, cada card
     com a sua dupla. A tela dentro do card e clara, com moldura branca e
     sombra, para ter contraste sobre o lavado. Layout e markup do Codex
     intactos. Gradiente so em fundo, nunca em texto. */
  #porque .pq-card{background:#fff}
  #porque .pq-card[data-g="1"] .pq-wash{opacity:1;background:
    radial-gradient(40% 42% at 0% 62%,rgba(49,109,255,.48),transparent 100%),
    radial-gradient(65% 70% at 0% 100%,rgba(112,68,238,.62),transparent 90%),
    radial-gradient(70% 55% at 50% 110%,rgba(49,109,255,.65),transparent 100%),
    radial-gradient(48% 65% at 100% 85%,rgba(112,68,238,.50),transparent 95%),
    linear-gradient(180deg,#fff 0%,#fff 25%,#f8f9ff 100%)}
  #porque .pq-card[data-g="2"] .pq-wash{background:
    radial-gradient(90% 60% at 50% 108%,rgba(57,114,253,.66),rgba(57,114,253,0) 100%),
    radial-gradient(70% 50% at 15% 90%,rgba(163,100,255,.48),rgba(163,100,255,0) 100%),
    radial-gradient(70% 55% at 90% 70%,rgba(91,192,190,.40),rgba(91,192,190,0) 100%),
    linear-gradient(180deg,#fff 0%,#fff 28%,rgba(255,255,255,0) 62%)}
  #porque .pq-card[data-g="3"] .pq-wash{background:
    radial-gradient(90% 60% at 50% 108%,rgba(52,211,153,.55),rgba(52,211,153,0) 100%),
    radial-gradient(70% 50% at 15% 90%,rgba(91,192,190,.45),rgba(91,192,190,0) 100%),
    radial-gradient(70% 55% at 90% 70%,rgba(57,114,253,.36),rgba(57,114,253,0) 100%),
    linear-gradient(180deg,#fff 0%,#fff 28%,rgba(255,255,255,0) 62%)}
  #porque .pq-card[data-g="4"] .pq-wash{background:
    radial-gradient(90% 60% at 50% 108%,rgba(250,61,133,.58),rgba(250,61,133,0) 100%),
    radial-gradient(70% 50% at 15% 90%,rgba(250,152,0,.48),rgba(250,152,0,0) 100%),
    radial-gradient(70% 55% at 90% 70%,rgba(163,100,255,.36),rgba(163,100,255,0) 100%),
    linear-gradient(180deg,#fff 0%,#fff 28%,rgba(255,255,255,0) 62%)}
  #porque .pq-card[data-g="5"] .pq-wash{background:
    radial-gradient(90% 60% at 50% 108%,rgba(57,114,253,.62),rgba(57,114,253,0) 100%),
    radial-gradient(70% 50% at 15% 90%,rgba(52,211,153,.45),rgba(52,211,153,0) 100%),
    radial-gradient(70% 55% at 90% 70%,rgba(163,100,255,.34),rgba(163,100,255,0) 100%),
    linear-gradient(180deg,#fff 0%,#fff 28%,rgba(255,255,255,0) 62%)}
  #porque .pq-card[data-g="6"] .pq-wash{background:
    radial-gradient(90% 60% at 50% 108%,rgba(163,100,255,.62),rgba(163,100,255,0) 100%),
    radial-gradient(70% 50% at 15% 90%,rgba(91,192,190,.45),rgba(91,192,190,0) 100%),
    radial-gradient(70% 55% at 90% 70%,rgba(250,61,133,.34),rgba(250,61,133,0) 100%),
    linear-gradient(180deg,#fff 0%,#fff 28%,rgba(255,255,255,0) 62%)}
  /* a tela clara, com moldura branca e sombra, sobre o lavado */
  #porque .pq-card .pq-hub-story{background:#fff;border-radius:14px 14px 0 0;
    box-shadow:0 0 0 1px rgba(20,32,57,.08),0 30px 60px -30px rgba(20,32,57,.35),0 8px 24px -12px rgba(20,32,57,.18)}
  #porque .pq-card .pq-hub-story iframe{background:#fff}
  #porque .pq-card[data-g="1"] .pq-mock .mv-tela,#porque .pq-card .pq-mock--mock .mv-tela{background:#fff;border-radius:14px 14px 0 0;
    box-shadow:0 0 0 1px rgba(20,32,57,.08),0 30px 60px -30px rgba(20,32,57,.35),0 8px 24px -12px rgba(20,32,57,.18)}
  #porque .pq-card h3,#porque .pq-card p{position:relative;z-index:2}

  /* ===================== V9 (08/09): a palavra-chave da hero gira =====================
     transformar, multiplicar e impulsionar (todas com 11 letras: o vao da palavra
     nao muda de largura e o titulo nao reflui). As tres empilhadas na mesma celula
     de uma grade inline; a que sai sobe e some, a que entra vem de baixo. Leitor
     de tela le so "transformar" (.s2v-rot-sr). Com reduced-motion nao gira. */
  .s2v-k.s2v-w{clip-path:inset(-.6em -2em -.14em -2em)}
  .s2v-rot{display:inline-block;position:relative;vertical-align:baseline;white-space:nowrap;clip-path:inset(-.3em -2em -.2em -2em);transition:width .6s cubic-bezier(.16,1,.3,1)}
  .s2v-rw{position:absolute;left:0;top:0;display:inline-block;opacity:0;transform:translateY(.55em);
    transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
  .s2v-rw.is-on{position:relative;opacity:1;transform:none}
  /* A palavra que sai continua DENTRO do fluxo do H1 (largura zero, sem virar
     absolute). Motivo medido em 18/09: como absolute e ainda visivel ela era
     pintada como bloco proprio pela primeira vez, o Chrome a contava como
     conteudo novo e o LCP da home ia parar na 3a troca (10s a 13s no PageSpeed).
     Dentro do fluxo ela pertence ao H1, que ja foi registrado no primeiro paint.
     O script poe a que sai logo antes da que entra, entao as duas partem do
     mesmo ponto e o desenho e identico. */
  .s2v-rw.is-out{position:relative;width:0;opacity:0;transform:translateY(-.5em);transition-duration:.4s,.5s}
  .s2v-rot-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* o subtitulo da hero em uma linha so (no desktop; no celular quebra normal) */
  @media(min-width:900px){.s2v-v2 .s2v-sub{max-width:none;white-space:nowrap;text-wrap:initial}}

  /* ===================== V10 (08/09): as logos dos clientes logo abaixo da hero (teste) =====================
     A mesma secao #logos, movida para depois da hero: uma faixa curta, com o
     titulo pequeno e discreto e o marquee que ja existia. */
  #logos.lg-sob-hero.logos-dobra{position:relative;padding-block:clamp(24px,3.4vw,40px) clamp(8px,1.5vw,16px)}
  #logos.lg-sob-hero .lg-bloco{padding:0;background:none;border:0;box-shadow:none}
  #logos.lg-sob-hero .lg-titulo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
  #logos.lg-sob-hero .lg-item{width:150px;height:64px}
  #logos.lg-sob-hero .lg-item::before{inset:8px}
  #logos.lg-sob-hero .lg-item img{max-width:126px;max-height:46px}
  #logos.lg-sob-hero .lg-fila{--mq-gap:56px}
  @media(max-width:640px){#logos.lg-sob-hero .lg-item{width:120px;height:56px}#logos.lg-sob-hero .lg-item img{max-width:100px;max-height:40px}#logos.lg-sob-hero .lg-fila{--mq-gap:36px}}

  /* ===================== V11 (08/09): os dados da Marvee =====================
     Numero grande em 400, rotulo pequeno, fios finos entre as colunas. */
  section.pad.dm-sec{background:var(--v3-bg);padding-block:clamp(56px,6vw,96px)}
  .dm-grade{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(20,32,57,.10)}
  .dm-item{display:flex;flex-direction:column;gap:12px;padding:clamp(28px,3vw,44px) clamp(18px,2.4vw,36px) 0;border-left:1px solid rgba(20,32,57,.10)}
  .dm-item:first-child{border-left:0;padding-left:0}
  .dm-n{font-size:clamp(46px,5.4vw,88px);font-weight:400;letter-spacing:-.045em;line-height:.95;color:#0b1530;font-variant-numeric:tabular-nums;text-wrap:nowrap}
  .dm-l{font-size:14.5px;line-height:1.45;color:#667c8b;max-width:22ch;text-wrap:pretty}
  @media(max-width:900px){.dm-grade{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}.dm-item:nth-child(3){border-left:0;padding-left:0}}
  @media(max-width:480px){.dm-grade{grid-template-columns:minmax(0,1fr);row-gap:0;border-top:0}.dm-item{border-left:0;padding:22px 0;border-top:1px solid rgba(20,32,57,.10)}.dm-n{font-size:52px}}

  /* V12 (08/09): mais ar na hero: entrelinha do titulo e vaos maiores */
  .s2v-v2 .s2v-t{line-height:1.12}
  .s2v-v2 .s2v-sub{margin-top:clamp(28px,3.2vw,44px);line-height:1.6}
  .s2v-v2 .s2v-acoes{margin-top:clamp(32px,3.6vw,52px)}
  @media(max-width:760px){.s2v-v2 .s2v-t{line-height:1.1}.s2v-v2 .s2v-sub{margin-top:26px}.s2v-v2 .s2v-acoes{margin-top:30px}}

  /* V13 (08/09): os cards "AI-first de verdade" (2) e "Educacao que multiplica" (4)
     voltam ao fundo neutro de antes, sem o lavado colorido (ordem da autora) */
  #porque .pq-card[data-g="2"] .pq-wash,#porque .pq-card[data-g="3"] .pq-wash,#porque .pq-card[data-g="4"] .pq-wash,#porque .pq-card[data-g="5"] .pq-wash,#porque .pq-card[data-g="6"] .pq-wash{background:radial-gradient(ellipse at 75% 100%,rgba(33,48,77,.09),transparent 70%)}

  /* V14 (08/09): dados sem a linha de cima; numero e rotulo centrados na coluna */
  .dm-grade{border-top:0}
  .dm-item{align-items:center;text-align:center;padding-top:clamp(8px,1vw,16px)}
  .dm-item:first-child{padding-left:clamp(18px,2.4vw,36px)}
  .dm-l{margin-inline:auto}
  @media(max-width:900px){.dm-item:nth-child(3){padding-left:clamp(18px,2.4vw,36px)}}
  @media(max-width:480px){.dm-grade{border-top:0}.dm-item{padding:22px 0}.dm-item:first-child{border-top:0;padding-left:0}}

  /* ===================== V15 (08/09): o Hub no modelo da x.ai/build =====================
     Grade de duas colunas: blocos de texto a esquerda (cada um com meia tela
     de altura, centrado, esmaecido quando nao e o ativo) e a janela presa a
     direita, no meio da tela. A janela troca de pagina com o bloco ativo e
     a pagina anima em ciclo por conta propria (o JS envia o progresso). */
  .mv-kt-pilha>.hs-track.hs-xai{height:auto;--hs-top:120px}
  .hs-xai .hs-stage,#tecnologia .hs-xai .hs-stage{position:static;height:auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(24px,4.5vw,72px);align-items:start}
  .hs-xai .hs-copy{flex:none;width:auto;min-width:0;transition:none}
  .hs-blocks{display:flex;flex-direction:column}
  .hs-block{min-height:50vh;display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,4vh,48px) 0;opacity:.22;transition:opacity .5s ease}
  .hs-block.is-on{opacity:1}
  .hs-block:first-child{min-height:0;padding-top:0}
  .hs-block-h{display:flex;align-items:center;gap:12px;margin-bottom:14px}
  .hs-block-ic{display:grid;place-items:center;width:28px;height:28px;color:#5BC0BE;flex:none}
  .hs-block-ic svg{width:26px;height:26px}
  .hs-block h3{margin:0;font-size:clamp(24px,2.3vw,32px);line-height:1.15;letter-spacing:-.03em;font-weight:600;color:#fff}
  .hs-block>p{margin:0;font-size:15.5px;line-height:1.6;color:#aeb8cc;max-width:42ch}
  .hs-block .hs-benefits{margin-top:20px;gap:11px}
  .hs-block .hs-benefits li{font-size:14px;line-height:1.55;color:#c2cadb}
  .hs-block .hs-topic-cta{margin-top:22px}
  .hs-xai .hs-main{position:sticky;top:var(--hs-top);flex:none;width:auto;max-width:none;transition:none;margin-inline:12px}
  .hs-xai .hs-frame-wrap{aspect-ratio:16/10;max-height:calc(100svh - 200px)}
  .hs-xai .hs-frame{pointer-events:none}
  @media(max-width:760px){
    .hs-xai .hs-stage,#tecnologia .hs-xai .hs-stage{grid-template-columns:minmax(0,1fr);gap:18px}
    .hs-xai .hs-main{order:-1;top:78px;margin-inline:0;z-index:2}
    .hs-xai .hs-frame-wrap{aspect-ratio:4/5;max-height:38svh}
    .hs-block{min-height:0;padding:22px 0;opacity:.35}
    .hs-block:first-child{padding-top:8px}
    .hs-block h3{font-size:22px}.hs-block>p{font-size:13.5px}.hs-block .hs-benefits{margin-top:12px;gap:6px}.hs-block .hs-benefits li{font-size:12px}
  }
  @media(prefers-reduced-motion:reduce){.hs-block{opacity:1;transition:none}}

  /* ===================== V16 (08/09): a box do Marvee Hub no menu Solucoes =====================
     Copia do molde .mm-h .mm-feat do menu do Hub (site.css da main), com a
     base navy explicita para viver sobre o painel claro. */
  .s2h-links .mm-panel .mm-feat-hub{
    display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;
    width:236px;margin:0;padding:20px 18px 18px;border-radius:16px;position:relative;overflow:hidden;white-space:normal;
    background:radial-gradient(120% 90% at 12% 0%,rgba(122,160,255,.22),transparent 62%),linear-gradient(158deg,rgba(57,114,253,.26),rgba(57,114,253,.08) 60%,rgba(23,37,82,.2)),#0B1530;
    border:1px solid rgba(122,160,255,.34);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 16px 32px -24px rgba(0,0,0,.68);
  }
  .s2h-links .mm-panel .mm-feat-hub:hover{background:radial-gradient(120% 90% at 12% 0%,rgba(122,160,255,.28),transparent 62%),linear-gradient(158deg,rgba(57,114,253,.32),rgba(57,114,253,.1) 60%,rgba(23,37,82,.24)),#0B1530;border-color:rgba(122,160,255,.5)}
  .s2h-links .mm-panel .mm-feat-hub .mm-ic{width:52px;height:52px;border-radius:15px;margin-bottom:14px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);border:1px solid rgba(122,160,255,.3)}
  .s2h-links .mm-panel .mm-feat-hub .mm-ic img{height:20px;width:auto;display:block}
  .s2h-links .mm-panel .mm-feat-hub .mm-tx{min-width:0}
  .s2h-links .mm-panel .mm-feat-hub .mm-tx b{display:block;font-size:11px;font-weight:700;line-height:1;letter-spacing:.13em;text-transform:uppercase;color:#fff}
  .s2h-links .mm-panel .mm-feat-hub .mf-h{display:block;margin-top:12px;font-size:20px;font-weight:600;line-height:1.2;letter-spacing:-.02em;color:#fff}
  .s2h-links .mm-panel .mm-feat-hub .mm-tx small{display:block;margin-top:11px;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.88)}
  .s2h-links .mm-panel .mm-feat-hub .mm-feat-go{display:inline-flex;align-items:center;justify-content:center;margin-top:18px;padding:9px 15px;border-radius:999px;border:1px solid rgba(220,232,255,.68);background:rgba(9,13,30,.1);font-size:12.5px;line-height:1.2;font-weight:600;color:#F4F7FF}
  .s2h-links .mm-panel .mm-feat-hub:hover .mm-feat-go{background:rgba(255,255,255,.1);border-color:rgba(174,201,255,.75)}
  .s2h.is-light .s2h-links .mm-panel .mm-feat-hub,.s2h.is-light .s2h-links .mm-panel .mm-feat-hub:hover{color:#fff}
  .s2h-links .mm-panel .mm-cols{align-items:flex-start}

  /* V17 (08/09): a secao da hero deixa de criar contexto de empilhamento.
     Com z-index:60 nela, o Chrome pintava o painel do menu (fixed, dentro
     dela) por baixo do titulo da hero, mesmo com o z-index maior; com auto,
     a barra fixa entra no contexto da raiz e o painel fica por cima de tudo. */
  .s2h{z-index:auto}

  /* ===================== V18 (08/09) =====================
     1) Hub: espacamentos. Todos os blocos com meia tela (o primeiro tambem, para
        o centro dele bater com a janela presa), respiro entre as colunas e a
        coluna de texto com margem interna.
     2) Hub: a tela maior, como no card 3 da Auraform: a interface renderiza
        numa base menor (940px) e o quadro corta embaixo, entao o que aparece
        e a parte de cima do app em tamanho legivel. */
  .hs-block,.hs-block:first-child{min-height:50vh;padding:clamp(28px,4vh,48px) 0}
  .hs-xai .hs-stage,#tecnologia .hs-xai .hs-stage{gap:clamp(32px,5.5vw,88px);grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr)}
  .hs-xai .hs-copy{padding-left:clamp(0px,1vw,12px)}
  .hs-blocks{margin-top:-8px}
  .hs-xai .hs-frame-wrap{aspect-ratio:16/11;max-height:calc(100svh - 190px)}
  .hs-xai .hs-frame{transform-origin:top left}
  #tecnologia .mv-kt-box{padding-bottom:clamp(40px,5vw,72px)}
  @media(max-width:760px){.hs-xai .hs-stage,#tecnologia .hs-xai .hs-stage{grid-template-columns:minmax(0,1fr);gap:18px}.hs-xai .hs-copy{padding-left:0}.hs-block,.hs-block:first-child{min-height:0;padding:22px 0}.hs-xai .hs-frame-wrap{aspect-ratio:4/5;max-height:40svh}}

  /* 3) CTAs no molde da imersao: a primaria da hero na pele teal 3D (relevo
        curto, fio claro, sombra inferior) e as demais em vidro (traco claro,
        fundo translucido, blur). Sem gradiente em texto. */
  .s2v-v2 .v3-btn--branco,.s2v-v2 .v3-btn--branco:hover{
    color:#031b22;background:linear-gradient(180deg,#79ddd7 0%,#50c2bd 68%,#3ca49f 100%);
    border:1px solid rgba(218,255,252,.25);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -2px 0 rgba(13,84,84,.42),0 0 24px -8px rgba(91,192,190,.54),0 12px 30px -14px rgba(91,192,190,.56);
    transition:transform .25s ease,filter .25s ease,box-shadow .25s ease}
  .s2v-v2 .v3-btn--branco:hover{transform:translateY(-2px);filter:brightness(1.07);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -2px 0 rgba(13,84,84,.4),0 0 28px -8px rgba(91,192,190,.62),0 17px 36px -15px rgba(91,192,190,.62)}
  .s2v-v2 .v3-btn--branco:active{transform:translateY(1px);filter:brightness(.98)}
  .s2v-v2 .v3-btn--fantasma,.s2v-v2 .v3-btn--fantasma:hover{
    color:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12);transition:background .2s,border-color .2s,color .2s}
  .s2v-v2 .v3-btn--fantasma:hover{color:#fff;background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.34)}
  /* os CTAs dos topicos do Hub (fundo navy): pilula de vidro */
  .hs-block .hs-topic-cta{padding:11px 18px;border-radius:99px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);color:rgba(255,255,255,.9);font-weight:600;font-size:13.5px}
  .hs-block .hs-topic-cta{align-self:flex-start;border-bottom:1px solid rgba(255,255,255,.2)}
  .hs-block .hs-topic-cta:hover{color:#fff;background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.34)}
  /* os botoes dos cards do ecossistema (fundo claro): vidro claro */
  .mv-eco .mv-btn{padding:11px 18px;border-radius:99px;border:1px solid rgba(20,32,57,.14);background:rgba(255,255,255,.55);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 16px -12px rgba(20,32,57,.25);color:#142039;font-weight:600}
  .mv-eco .mv-card:hover .mv-btn{background:rgba(255,255,255,.85);border-color:rgba(20,32,57,.24)}

  /* V19 (09/09): respiro entre a cabeca da dobra e a janela do Hub. A janela
     presa nasce no topo da grade, colada no lede; a grade desce. */
  .mv-kt-pilha>.hs-track.hs-xai{margin-top:clamp(48px,7vw,112px)}
  @media(max-width:760px){.mv-kt-pilha>.hs-track.hs-xai{margin-top:28px}}

  /* V20 (09/09): os mockups do Marvin e do Brain viram video real da tela
     (ritmo de uso, cursor incluso), no lugar do prototipo dirigido pelo
     relogio. A janela cruza em fade entre o iframe e o video. */
  .hs-xai .hs-frame-wrap{position:relative;background:#f5f6fa}
  .hs-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;background:#f5f6fa;opacity:0;transition:opacity .5s ease;pointer-events:none}
  .hs-video.is-on{opacity:1}
  .hs-xai .hs-frame{transition:opacity .5s ease}
  .hs-frame-wrap.has-video .hs-frame{opacity:0;visibility:hidden}

  /* V21 (09/09): sem o rotulo "Tecnologia" sobre a box; Servicos e Educacao
     alinham os rotulos ao topo da box. */
  .s2h-links .mm-panel .mm-cols{align-items:flex-start}
  .s2h-links .mm-panel .mm-col:first-child{padding-top:0}
  .s2h-links .mm-panel .mm-col .mm-lbl{margin-top:2px}

  /* ===================== V22 (09/09): o organismo com mais ar =====================
     Simbolo maior (200px) com as camadas mais afastadas; os shapes ficam
     verticais (icone em cima, titulo embaixo, sem subtitulo); o palco cresce
     de 300 para 400 no desenho, entao os fios descem mais ate os cards; e os
     cards perdem o rotulo da vertente. As trilhas foram redesenhadas para a
     nova altura (o primeiro trecho nasce na base do simbolo, em y=104). */
  .mv-simbolo{width:200px;height:200px}
  .mv-simbolo .s2p-ly.m{inset:13%}
  .mv-simbolo .s2p-ly.i{inset:26%}
  .mv-simbolo img{width:36%}
  .mv-cena{height:576px;margin-top:56px}
  /* V23 (09/09): de volta ao icone a esquerda e titulo a direita, sem subtitulo,
     e o shape em vidro de verdade (translucido, blur, fio claro, brilho). */
  .mv-no,.mv-eco .mv-no{grid-template-columns:auto 1fr;align-items:center;justify-items:start;text-align:left;column-gap:12px;row-gap:0;padding:12px 16px;border-radius:18px;
    background:linear-gradient(160deg,rgba(255,255,255,.62),rgba(255,255,255,.34));
    -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
    border:1px solid rgba(255,255,255,.85);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(16,24,40,.04),0 14px 34px -18px rgba(16,24,40,.28)}
  .mv-no-ic{grid-row:auto;grid-column:1;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #fff}
  .mv-no b{grid-column:2;font-size:15px}
  .mv-no em{display:none}
  .mv-card-kick{display:none}
  .mv-card h3{margin-top:18px}
  @media(max-width:820px){.mv-simbolo{width:124px;height:124px;position:relative;left:auto;transform:none;margin:0 auto}.mv-cena{height:auto;margin:32px 0 28px;display:flex;flex-direction:column}.mv-simbolo{order:-1}.mv-painel{position:relative;top:auto;bottom:auto;margin-top:14px}.mv-no{padding:10px 13px}.mv-no-ic{width:34px;height:34px}}

  /* V24 (09/09): o shape do tamanho do conteudo (17% do palco, antes 22%),
     com icone e titulo centrados; o vao no fio encolheu junto (204..396). */
  .mv-no,.mv-eco .mv-no{width:17%;grid-template-columns:auto auto;justify-content:center;padding:12px 14px}
  @media(max-width:820px){.mv-no,.mv-eco .mv-no{width:100%!important;grid-template-columns:auto 1fr;justify-content:start}}

  /* ===================== V25 (09/09) =====================
     1) Os shapes descem para o meio do palco: 116px abaixo do simbolo e o
        mesmo respiro ate a volta dos fios (trilhas redesenhadas).
     2) O fundo quadriculado mais presente: opacidade cheia, tracos mais
        fortes e a mascara mais aberta.
     3) Os cards do ecossistema como os do bento "Por que": brancos, com o
        fio de cabelo e o raio de 16px. */
  .mv-fundo{opacity:1;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M.5 0V44M0 .5H44' fill='none' stroke='%232B55D4' stroke-opacity='.17' stroke-width='1' stroke-dasharray='2 5'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='176' height='176' viewBox='0 0 176 176'%3E%3Cpath d='M82.5 88.5H94.5M88.5 82.5V94.5' fill='none' stroke='%232B55D4' stroke-opacity='.34' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
    -webkit-mask-image:radial-gradient(ellipse 70% 64% at 50% 46%,#000 0,#000 55%,rgba(0,0,0,.8) 74%,rgba(0,0,0,.3) 90%,transparent 100%);
    mask-image:radial-gradient(ellipse 70% 64% at 50% 46%,#000 0,#000 55%,rgba(0,0,0,.8) 74%,rgba(0,0,0,.3) 90%,transparent 100%)}
  .mv-cel i.s{background:rgba(57,114,253,.08);border-color:rgba(43,85,212,.16)}
  .mv-cel i.m{background:rgba(57,114,253,.13);border-color:rgba(43,85,212,.2)}
  .mv-eco .mv-face,.mv-eco .mv-card.aceso .mv-face{background:#fff;border:0;border-radius:16px;box-shadow:var(--v3-hair)}
  .mv-eco .mv-card:hover .mv-face{box-shadow:var(--v3-hair),var(--v3-hover)}

  /* ===================== V26 (09/09): Servicos na fila da Educacao =====================
     Tres cards; o aberto mais largo (1.3 da altura, contra .95 na Educacao);
     a foto cobre o card; a eclipse com a seta no canto superior direito, em
     vidro sobre a foto. */
  .sv-fila{--ef-n:2;--ef-w-aberto:calc(var(--ef-h) * 1.3);margin-top:clamp(28px,4vw,48px)}
  .sv-fila .ed-fila-ph .ed-capa{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
  .sv-fila .ed-fila-card .pq-ir{position:absolute;top:18px;right:18px;z-index:3;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
    background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);color:#fff;
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .25s ease,transform .25s var(--v3-ease)}
  .sv-fila .ed-fila-card .pq-ir svg{width:15px;height:15px}
  .sv-fila .ed-fila-card:hover .pq-ir{background:rgba(255,255,255,.28);transform:translate(1px,-1px)}
  .sv-fila .ed-fila-info{padding:20px 24px 24px}
  .sv-fila .ed-fila-card.show .ed-fila-info b{font-size:clamp(24px,2.2vw,32px)}
  .sv-fila .ed-fila-card.show .ed-fila-role{max-width:46ch;font-size:15px}
  section.pad.sv-sec{padding-bottom:clamp(56px,6vw,96px)}
  @media(max-width:1000px){.sv-fila{--ef-w:min(56vw,220px);--ef-w-aberto:min(84vw,380px)}}

  /* V27 (09/09): a pilula de Tecnologia sem o shape arredondado, igual a de
     "O ecossistema": so o icone e o texto em teal. */
  #tecnologia .mv-pill,[data-nav-theme="dark"]#tecnologia .mv-pill{background:none;border:0;box-shadow:none;padding:0;color:var(--teal);font-weight:600}

  /* V28 (09/09): shape menor (15% do palco) e o icone encostado na margem
     de seguranca, com o titulo a direita; o vao no fio encolheu junto
     (215..385). O fundo quadriculado com menos presenca (opacidade .55). */
  .mv-no,.mv-eco .mv-no{width:15%;grid-template-columns:auto 1fr;justify-content:start;justify-items:start;column-gap:11px;padding:9px 12px}
  .mv-no-ic{width:36px;height:36px;border-radius:11px}
  .mv-fundo{opacity:.55}
  @media(max-width:820px){.mv-no,.mv-eco .mv-no{width:100%!important;padding:10px 13px}}

  /* ===================== V29 (09/09) =====================
     1) As camadas do simbolo opacas: o quadriculado nao aparece mais atras.
     2) Os cards do ecossistema sem o icone.
     3) O CTA dos cards com sombra curta.
     4) A fila de Servicos com a pele dos cards do bento "Por que": fio de
        cabelo, sombra suave e o levantar no hover; o card sem foto vira
        branco, com o texto escuro e a eclipse cinza com a seta teal.
     5) Os cards de Servicos mais juntos. */
  #empresa .mv-simbolo .s2p-ly{
    -webkit-backdrop-filter:blur(12px) saturate(1.25);backdrop-filter:blur(12px) saturate(1.25);
    border:1px solid rgba(237,252,255,.65);
    box-shadow:inset 0 1px 1px rgba(255,255,255,.65),inset 0 -1px 2px rgba(78,120,149,.12),0 14px 24px -18px rgba(35,76,105,.32);
  }
  .mv-simbolo .s2p-ly.e{background:linear-gradient(145deg,rgba(255,255,255,.4),rgba(248,252,255,.18))}
  .mv-simbolo .s2p-ly.m{background:linear-gradient(145deg,rgba(255,255,255,.55),rgba(246,251,255,.28))}
  .mv-simbolo .s2p-ly.i{background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(245,250,255,.68))}
  .mv-eco .mv-card-ic{display:none}
  .mv-eco .mv-card h3{margin-top:0}
  .mv-eco .mv-btn,.mv-eco .mv-card:hover .mv-btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 6px -3px rgba(20,32,57,.16)}
  .sv-fila{--ef-vao:10px}
  .sv-fila .ed-fila-card{box-shadow:var(--v3-hair);transition:flex-basis .55s var(--v3-ease),transform 220ms var(--v3-ease),box-shadow 220ms var(--v3-ease)}
  .sv-fila .ed-fila-card:hover{transform:translateY(-2px);box-shadow:var(--v3-hair),var(--v3-hover)}
  .sv-fila .ed-fila-card[data-i="2"]{background:#fff;color:#142039}
  .sv-fila .ed-fila-card[data-i="2"] .ed-fila-ph--icone,.sv-fila .ed-fila-card[data-i="2"] .ed-fila-ph--icone[data-g]{background:#fff}
  .sv-fila .ed-fila-card[data-i="2"]::after{opacity:0}
  .sv-fila .ed-fila-card[data-i="2"] .ed-fila-ph--icone .s2p-ic{background:var(--v3-teal-tile);color:var(--v3-teal-ink);border:0;width:64px;height:64px;border-radius:18px}
  .sv-fila .ed-fila-card[data-i="2"] .ed-fila-info b,.sv-fila .ed-fila-card[data-i="2"] .ed-fila-link{color:#142039}
  .sv-fila .ed-fila-card[data-i="2"] .ed-fila-role{color:#667c8b}
  .sv-fila .ed-fila-card[data-i="2"] .pq-ir{background:rgba(11,19,43,.05);border-color:transparent;color:var(--v3-teal-ink);backdrop-filter:none;-webkit-backdrop-filter:none}
  .sv-fila .ed-fila-card[data-i="2"]:hover .pq-ir{background:rgba(91,192,190,.24)}

  /* ===================== V30 (09/09): as linhas no estilo das referencias =====================
     Base tracejada bem leve; a trilha acesa em gradiente (teal, azul, roxo)
     com brilho suave; e, com a carga completa, um pulso curto que corre pelas
     trilhas sem parar. Os shapes laterais sobem (190) e o do meio desce (350). */
  .mv-fios-base path{stroke:rgba(58,80,107,.13);stroke-width:1.5;stroke-dasharray:none}
  .mv-fio{stroke:url(#mvFioGrad);stroke-width:1.6;filter:drop-shadow(0 0 3px rgba(57,114,253,.16))}
  .mv-pulso{fill:none;stroke:#5a9cf0;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;
    stroke-dasharray:.05 .95;stroke-dashoffset:1;opacity:0;filter:drop-shadow(0 0 5px rgba(57,114,253,.9))}
  .mv-eco.mv-carregado .mv-pulso{opacity:.95;animation:mvPulso 3.4s linear infinite}
  .mv-eco.mv-carregado .mv-pulso-sai{animation-delay:1.7s}
  /* Cards laterais acima; o fio central acompanha o deslocamento de Serviços. */
  @media(min-width:821px){
    .mv-fios{overflow:visible}
    .mv-cards{align-items:start}
    .mv-card[data-i="1"]{margin-top:80px}
  }
  @keyframes mvPulso{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  @media(prefers-reduced-motion:reduce){.mv-pulso{display:none}}
  @media(max-width:820px){.mv-pulso{display:none}}
  /* Segunda dobra: azul névoa e cartões claros, inspirados na referência Ordina. */
  #main.s2h,#logos.lg-sob-hero.logos-dobra{background:#d9e6eb}
  #empresa.mv-eco{background:linear-gradient(180deg,#d9e6eb 0%,#dce9ef 48%,#dfebf1 82%,#edf3f5 94%,var(--v3-bg) 100%)}
  #empresa .mv-fundo{opacity:.3}
  #empresa .mv-face,#empresa .mv-card.aceso .mv-face{
    background:linear-gradient(180deg,#fff 0%,#fbfdfe 45%,#f1f6f8 100%);
    border:1px solid rgba(255,255,255,.8);border-radius:20px;
    box-shadow:0 14px 40px -32px rgba(47,76,92,.2);
    padding:36px 30px;
  }
  #empresa .mv-frente{min-height:480px}
  #empresa .mv-card-lista{margin-top:auto;padding-top:28px}
  #empresa .mv-no{
    border-radius:999px;background:linear-gradient(135deg,rgba(255,255,255,.65),rgba(255,255,255,.22));
    border:1px solid rgba(255,255,255,.85);
    -webkit-backdrop-filter:blur(20px) saturate(1.35);backdrop-filter:blur(20px) saturate(1.35);
    box-shadow:inset 0 1px 1px rgba(255,255,255,.95),inset 0 -1px 1px rgba(255,255,255,.3),0 12px 30px -18px rgba(46,76,94,.3);
    opacity:1;
  }
  #empresa .mv-no-ic{border-radius:50%}
  @media(max-width:820px){
    #empresa .mv-frente{min-height:400px}
    #empresa .mv-face{padding:28px 24px}
  }
  #empresa .mv-vertente{
    display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
    padding:7px 11px;margin-bottom:24px;border-radius:8px;
    color:#344650;font-size:13px;font-weight:500;line-height:1.25;
    background:rgba(255,255,255,.64);border:1px solid rgba(58,80,107,.1);
    box-shadow:0 2px 2px rgba(35,56,68,.08),inset 0 1px 0 #fff;
  }
  #empresa .mv-vertente svg{width:16px;height:16px;flex:none}
  /* Composição compacta: uma origem, três conexões e os nomes nos cards. */
  #empresa .mv-cena{height:360px;margin-top:40px}
  #empresa .mv-simbolo{width:160px;height:160px}
  #empresa .mv-painel{top:80px}
  #empresa .mv-fios-base path{stroke:#c9d1d5;stroke-opacity:1;stroke-width:2.2}
  #empresa .mv-fio{stroke:#568fbb;stroke-width:2.2;filter:drop-shadow(0 0 3px rgba(86,143,187,.2))}
  #empresa .mv-pulso{stroke:#91cee4;stroke-width:2.5;stroke-dasharray:.09 .91;filter:drop-shadow(0 0 3px #74b8d455)}
  #empresa.mv-carregado .mv-pulso{opacity:.65;animation-duration:6s}
  #empresa .mv-pulso[data-i="1"]{animation-delay:1.3s}
  #empresa .mv-pulso[data-i="2"]{animation-delay:2.6s}
  #empresa .mv-fundo{opacity:.42}
  @media(max-width:820px){
    #empresa .mv-cena{height:auto;margin:28px 0}
    #empresa .mv-simbolo{width:124px;height:124px}
    #empresa .mv-painel{display:none}
  }
  #empresa .mv-face,#empresa .mv-card.aceso .mv-face,#empresa .mv-card:hover .mv-face{
    border:0;
    background:linear-gradient(180deg,#ffffff 0%,#fdfefe 55%,#f8fbfc 100%);
    -webkit-backdrop-filter:blur(24px) saturate(1.2);backdrop-filter:blur(24px) saturate(1.2);
    box-shadow:none;
  }
  #empresa .mv-vertente{background:#f6fafc}
  @media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
    #empresa .mv-face,#empresa .mv-card.aceso .mv-face,#empresa .mv-card:hover .mv-face{
      background:#f8fbfd;-webkit-backdrop-filter:none;backdrop-filter:none;
    }
  }
  /* Textura pontilhada suave na faixa de números. */
  #dados{position:relative;isolation:isolate}
  #dados::before{
    content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
    background-image:radial-gradient(circle,rgba(87,114,131,.13) 1.25px,transparent 1.65px);
    background-size:20px 20px;
    -webkit-mask-image:radial-gradient(ellipse 70% 62% at 50% 50%,#000 20%,rgba(0,0,0,.6) 60%,transparent 100%);
    mask-image:radial-gradient(ellipse 70% 62% at 50% 50%,#000 20%,rgba(0,0,0,.6) 60%,transparent 100%);
  }
  #empresa .mv-vertente{border-radius:999px;margin-bottom:14px}
  #empresa .mv-frente{min-height:380px}
  #empresa .mv-face,#empresa .mv-card.aceso .mv-face{padding:28px}
  #empresa .mv-card-lista{margin-top:24px;padding-top:20px}
  #empresa .mv-card-lista li{padding-left:26px}
  #empresa .mv-card-lista li::before{
    width:14px;height:14px;left:0;top:.22em;box-sizing:border-box;
    border:1px solid rgba(255,255,255,.95);
    background:radial-gradient(circle,#38aaa5 0 2.5px,rgba(222,246,243,.8) 3px 100%);
    box-shadow:0 0 8px rgba(91,192,190,.22),0 2px 5px rgba(30,100,97,.1),inset 0 1px 1px #fff;
  }
  #empresa .mv-btn,#empresa .mv-card:hover .mv-btn{
    color:#073b40;background:linear-gradient(180deg,#85e0da,#55c2bb);
    border:1px solid rgba(37,143,137,.3);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -2px 0 rgba(23,119,115,.16),0 5px 12px -6px rgba(25,110,106,.4);
  }
  #tecnologia .mv-kt-cab>.mv-pill{color:#fff}
  #tecnologia .hs-block-ic img{display:block;width:28px;height:28px;object-fit:contain}
  @media(max-width:820px){#empresa .mv-frente{min-height:0}#empresa .mv-face,#empresa .mv-card.aceso .mv-face{padding:24px}}
  /* Depoimentos reais: apresentação compacta com texto integral, retratos e logos. */
  #avaliacoes .stories-heading{margin-bottom:20px}
  #avaliacoes .stories-header-row{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:20px}
  #avaliacoes .stories-header-row .stories-heading{margin-bottom:0}
  #avaliacoes .stories-header-row .stories-top-controls{flex-shrink:0;margin:0 0 2px}
  @media(max-width:760px){#avaliacoes .stories-header-row{gap:14px;flex-wrap:wrap}#avaliacoes .stories-header-row .stories-top-controls{margin-left:auto}}
  #avaliacoes .stories-heading h2{font-size:clamp(28px,3.2vw,42px)}
  #avaliacoes .stories-heading .mv-pill{margin-bottom:14px}
  #avaliacoes .stories-top-controls{margin-bottom:4px}
  #avaliacoes .stories-brands{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-bottom:20px}
  #avaliacoes .stories-brands button{padding:8px 12px}
  #avaliacoes .story-brand-image{display:block;width:100%;max-width:200px;height:80px;object-fit:contain;margin:auto}
  @media(max-width:760px){#avaliacoes .stories-brands{grid-template-columns:repeat(2,minmax(0,1fr))}#avaliacoes .story-brand-image{height:76px;max-width:172px}}
  #avaliacoes .story-company{font-size:clamp(16px,2vw,23px);font-weight:600;letter-spacing:-.025em}
  #avaliacoes .story-panel{min-height:0;padding:clamp(24px,2.5vw,36px);background:linear-gradient(135deg,#fff,#f3f7f9);align-items:start}
  #avaliacoes .stories-panels{display:grid}
  #avaliacoes .stories-panels>.story-panel{grid-area:1 / 1}
  #avaliacoes .stories-panels>.story-panel[hidden]{display:grid!important;visibility:hidden;pointer-events:none;animation:none}
  #avaliacoes .story-content{width:100%;max-width:960px;margin-inline:auto}
  #avaliacoes .story-content blockquote{font-size:clamp(16px,1.4vw,20px);line-height:1.5;letter-spacing:-.015em;margin:14px 0 20px}
  #avaliacoes .story-content blockquote p{margin:0}
  #avaliacoes .story-content blockquote p+p{margin-top:12px}
  #avaliacoes .story-topic{font-size:12px;color:#287e7b;font-weight:600}
  #avaliacoes .story-author{padding-top:16px;border-top:1px solid #dfe8eb;gap:6px}
  #avaliacoes .story-author b{font-size:15px}
  #avaliacoes .story-author span{font-size:13px;color:#536477}
  @media(max-width:760px){
    #avaliacoes .stories-brands{gap:8px}
    #avaliacoes .stories-brands button{padding:6px 4px}
    #avaliacoes .story-company{font-size:15px}
    #avaliacoes .story-panel{min-height:0;padding:24px}
  }
  #avaliacoes .story-author{display:flex;align-items:center;gap:18px}
  #avaliacoes .story-avatar{display:block;width:60px;height:60px;flex:0 0 60px;border-radius:50%;object-fit:cover;object-position:center;background:#e6eef2}
  #avaliacoes .story-avatar[src$="luiz-ventura.png"]{object-position:50% 28%}
  #avaliacoes .story-identity{display:grid;gap:6px;min-width:0}
  @media(max-width:760px){
    #avaliacoes .story-author{gap:14px}
    #avaliacoes .story-avatar{width:52px;height:52px;flex-basis:52px}
  }
  /* Serviços: cards panorâmicos conduzidos pelo scroll. */
  #servicos.sv-horizontal{position:relative;padding:0;background:var(--v3-bg);--sv-travel:0px}
  #servicos .sv-sticky{padding:112px 0 40px}
  #servicos.sv-pinned{height:calc(100svh + var(--sv-travel))}
  #servicos.sv-pinned .sv-sticky{position:sticky;top:0;height:100svh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding-top:112px}
  #servicos .sv-abertura{margin-bottom:28px;max-width:none}
  #servicos h2{font-size:clamp(28px,3.2vw,44px);line-height:1.15}
  #servicos .sv-viewport{scroll-behavior:auto;scroll-padding-inline:max(24px,calc((100vw - 1180px)/2));overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;padding:0 max(24px,calc((100vw - 1180px)/2));outline-offset:-4px}
  #servicos .sv-viewport::-webkit-scrollbar{display:none}
  #servicos.sv-pinned .sv-viewport{scroll-snap-type:none}
  #servicos .sv-rail{display:flex;gap:24px;width:max-content}
  #servicos .sv-slide{position:relative;display:grid;grid-template-columns:1fr 1fr;flex:none;width:min(920px,78vw);height:clamp(300px,44svh,460px);overflow:hidden;border-radius:28px;background:linear-gradient(135deg,#111e36,#070d20);color:white;text-decoration:none;scroll-snap-align:start}
  #servicos .sv-media{position:relative;min-width:0;height:100%;overflow:hidden}
  #servicos .sv-photo{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
  #servicos .sv-slide:hover .sv-photo{transform:scale(1.035)}
  #servicos .sv-copy{padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;align-items:flex-start;gap:18px}
  #servicos .sv-number{font-size:12px;letter-spacing:.12em;color:#85b8c1;margin-bottom:auto}
  #servicos .sv-copy b{font-size:clamp(25px,2.5vw,36px);line-height:1.1;letter-spacing:-.035em;font-weight:500}
  #servicos .sv-description{font-size:16px;line-height:1.55;color:#eaf1f3}
  #servicos .sv-link{display:flex;align-items:center;gap:18px;margin-top:auto;font-size:14px;font-weight:600;color:#9ae1dc}
  #servicos .pq-ir{display:none}
  #servicos .sv-media--icone{display:grid;place-items:center;background:radial-gradient(ellipse at 50% 60%,#9dd6db,#dcebef 70%)}
  #servicos .sv-media--icone .s2p-ic{display:grid;place-items:center;width:132px;height:132px;border-radius:36px;background:#ffffff65;border:1px solid #ffffffb0;box-shadow:0 20px 50px #365b7420,inset 0 2px 2px #fff9;color:#267f81;backdrop-filter:blur(14px)}
  #servicos .s2p-ic svg{width:62px;height:62px}
  #servicos .sv-progress{height:2px;margin-top:26px;background:#dce5e9;width:100%}
  #servicos .sv-progress span{display:block;width:33.333%;height:100%;background:#389f9b;transform:translateX(calc(var(--sv-progress,0)*200%))}
  @media(max-width:760px){#servicos .sv-sticky{padding:64px 0 32px}#servicos .sv-slide{width:84vw;height:490px;grid-template-columns:1fr;grid-template-rows:44% 56%}#servicos .sv-copy{padding:24px;gap:12px}#servicos .sv-number{display:none}#servicos .sv-copy b{font-size:26px}#servicos .sv-description{font-size:15px}#servicos .sv-rail{gap:16px}#servicos .sv-media--icone .s2p-ic{width:100px;height:100px}#servicos .sv-abertura{margin-bottom:24px}}
  @media(prefers-reduced-motion:reduce){#servicos .sv-photo{transition:none}}

  #servicos .sv-certificate{display:block;background:#fff;color:#112238}
  #servicos .sv-certificate .sv-media{position:absolute;inset:0 0 20%;height:auto;display:block;background:#3a7e83}
  #servicos .sv-certificate-art{width:100%;height:100%;object-fit:cover;display:block}
  #servicos .sv-certificate .sv-media .s2p-ic{position:absolute;top:24px;left:28px;width:54px;height:54px;border-radius:50%;background:#ffffff26;color:#f2ffff;border:1px solid #ffffff40;box-shadow:none}
  #servicos .sv-certificate .s2p-ic svg{width:28px;height:28px}
  #servicos .sv-certificate .sv-copy{position:absolute;bottom:0;left:0;width:60%;box-sizing:border-box;background:white;border-radius:0 22px 0 0;padding:24px 36px;gap:14px}
  #servicos .sv-certificate .sv-copy::before{content:"";position:absolute;left:0;bottom:100%;width:46%;height:32px;border-radius:0 18px 0 0;background:white}
  #servicos .sv-certificate .sv-number{display:none}
  #servicos .sv-certificate .sv-description{color:#596c79;max-width:32ch}
  #servicos .sv-certificate .sv-link{background:#112238;color:#fff;border-radius:999px;padding:12px 20px;margin-top:4px}
  @media(max-width:760px){#servicos .sv-certificate .sv-copy{width:100%;padding:26px 24px;min-height:53%;border-radius:0 24px 0 0}#servicos .sv-certificate .sv-media{bottom:35%}#servicos .sv-certificate .sv-media .s2p-ic{left:24px;top:24px}}

  #servicos .sv-slide:has(.sv-accounting){background:linear-gradient(115deg,#061c22,#102d32 62%,#244b4d)}
  #servicos .sv-accounting{isolation:isolate;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 65%,#3b777a66,transparent 65%)}
  #servicos .sv-data-field{position:absolute;inset:0 25% 0 -25%;background-image:radial-gradient(ellipse,#bceee77a .8px,transparent 1.2px);background-size:10px 7px;transform:rotate(-15deg);mask-image:radial-gradient(ellipse at 40% 55%,#000,transparent 69%);opacity:.6}
  #servicos .sv-phone{position:relative;width:174px;height:304px;box-sizing:border-box;border:3px solid #76938f;border-radius:28px;padding:6px;background:#031418;box-shadow:-7px 3px 0 #304d50,-10px 6px 0 #122b30,0 25px 38px #0007,inset 1px 0 1px #edffef80;transform:rotate(-12deg) rotateY(-12deg);animation:sv-phone-drift 7s ease-in-out infinite}
  #servicos .sv-phone-camera{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:47px;height:10px;border-radius:20px;background:#020c0f;z-index:2}
  #servicos .sv-phone-screen{height:100%;padding:28px 12px 14px;border-radius:20px;box-sizing:border-box;background:linear-gradient(160deg,#173d42,#071d24);color:#eefaf6;font-size:10px;overflow:hidden}
  #servicos .sv-phone-brand{display:flex;justify-content:space-between;font-size:13px;font-weight:600;margin-bottom:23px}
  #servicos .sv-phone-brand span{color:#6ed7c8;font-size:9px}
  #servicos .sv-phone-label{display:block;font-size:9px;color:#a4c1c1;margin-bottom:5px}
  #servicos .sv-phone-screen strong{font-size:20px;letter-spacing:-.04em;font-weight:500}
  #servicos .sv-phone-chart{display:flex;height:53px;align-items:flex-end;gap:6px;padding:12px 0 16px}
  #servicos .sv-phone-chart i{flex:1;height:30%;border-radius:3px 3px 0 0;background:linear-gradient(#8ae8d8,#3c8c87);transform-origin:bottom;animation:sv-bar-breathe 4s ease-in-out infinite}
  #servicos .sv-phone-chart i:nth-child(2){height:47%;animation-delay:-.4s}#servicos .sv-phone-chart i:nth-child(3){height:38%;animation-delay:-.8s}#servicos .sv-phone-chart i:nth-child(4){height:65%;animation-delay:-1.2s}#servicos .sv-phone-chart i:nth-child(5){height:54%;animation-delay:-1.6s}#servicos .sv-phone-chart i:nth-child(6){height:78%;animation-delay:-2s}#servicos .sv-phone-chart i:nth-child(7){height:100%;animation-delay:-2.4s}
  #servicos .sv-phone-document{display:flex;align-items:center;gap:8px;padding:9px 0;border-top:1px solid #c1e9e21c;font-size:9px}
  #servicos .sv-phone-document>span{color:#8fe2d5;background:#69c9b51c;border-radius:6px;padding:4px}
  #servicos .sv-phone-document small{display:block;color:#91aeaf;font-size:6px;margin-top:3px}
  #servicos .sv-phone-bottom{height:3px;width:48px;background:#b7d4d2;border-radius:3px;margin:10px auto 0}
  #servicos .sv-float{position:absolute;display:flex;align-items:center;justify-content:center;color:#d8f7ef;background:linear-gradient(135deg,#c4e7dd40,#a6dad923);border:1px solid #d4fff32e;box-shadow:0 12px 25px #00191e40,inset 0 1px 0 #effff51f;backdrop-filter:blur(14px);border-radius:16px;animation:sv-badge-drift 6s ease-in-out infinite}
  #servicos .sv-float svg{width:28px;height:28px}
  #servicos .sv-float--document{width:60px;height:60px;right:14%;top:15%;animation-delay:-2s}
  #servicos .sv-float--chart{width:58px;height:58px;left:13%;bottom:15%;animation-delay:-4s}
  #servicos .sv-float--check{right:9%;top:49%;padding:12px 14px;gap:9px;font-size:11px;border-radius:12px}
  #servicos .sv-float--check span{display:grid;place-items:center;width:20px;height:20px;background:#66cbbb;color:#073431;border-radius:6px}
  @keyframes sv-phone-drift{0%,100%{transform:translateY(4px) rotate(-12deg) rotateY(-12deg)}50%{transform:translateY(-5px) rotate(-9deg) rotateY(-12deg)}}
  @keyframes sv-badge-drift{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}
  @keyframes sv-bar-breathe{0%,100%{transform:scaleY(.86);opacity:.75}50%{transform:scaleY(1);opacity:1}}
  @media(max-width:760px){#servicos .sv-phone{width:140px;height:244px;transform-origin:center top;scale:.83;top:15px}#servicos .sv-phone-screen{padding:25px 9px 10px}#servicos .sv-phone-brand{margin-bottom:12px}#servicos .sv-phone-screen strong{font-size:17px}#servicos .sv-phone-chart{height:34px;padding:8px 0}#servicos .sv-float--document{width:44px;height:44px;right:14%;top:12%}#servicos .sv-float--chart{width:42px;height:42px;left:15%;bottom:12%}#servicos .sv-float--check{right:7%;top:51%;font-size:9px;padding:8px 10px}}
  @media(prefers-reduced-motion:reduce){#servicos .sv-phone,#servicos .sv-float,#servicos .sv-phone-chart i{animation:none}}

  #servicos .sv-bpo{display:block;isolation:isolate;background:#101f2a}
  #servicos .sv-bpo .sv-media{position:absolute;inset:0;height:100%;z-index:-2}
  #servicos .sv-bpo .sv-photo{object-position:65% 50%}
  #servicos .sv-bpo::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(4,15,25,.92),rgba(4,15,25,.72) 36%,rgba(4,15,25,.14) 74%),linear-gradient(0deg,rgba(4,15,25,.38),transparent 60%);pointer-events:none}
  #servicos .sv-bpo .sv-copy{width:52%;height:100%;box-sizing:border-box;position:relative}
  #servicos .sv-bpo .sv-description{color:#e1e8ec}
  #servicos .sv-bpo .sv-link{color:#fff;background:#ffffff19;border:1px solid #ffffff42;border-radius:999px;padding:12px 18px;backdrop-filter:blur(12px)}
  @media(max-width:760px){#servicos .sv-bpo .sv-photo{object-position:77% center}#servicos .sv-bpo::after{background:linear-gradient(0deg,rgba(4,15,25,.96),rgba(4,15,25,.75) 40%,rgba(4,15,25,.06) 80%)}#servicos .sv-bpo .sv-copy{width:100%;justify-content:flex-end;padding-top:220px}#servicos .sv-bpo .sv-link{margin-top:12px}}

  /* Acabamento em vidro e mesma seta circular dos cards Por que a Marvee. */
  #servicos .sv-slide{box-shadow:inset 0 0 0 1px #ffffff35,inset 0 2px 1px #ffffff24;transition:box-shadow .25s ease}
  #servicos .sv-slide:hover{box-shadow:inset 0 0 0 1px #bdfff16b,inset 0 2px 1px #ffffff50}
  #servicos .sv-slide:focus-visible{outline:2px solid #42b9b2;outline-offset:-4px}
  #servicos .sv-slide>.pq-ir{display:grid;position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:50%;z-index:4;place-items:center;color:#eafffa;background:linear-gradient(135deg,#ffffff38,#d0fff215);border:1px solid #ffffff40;box-shadow:inset 0 1px 1px #ffffff55,0 6px 18px #051e2526;backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)}
  #servicos .sv-slide>.pq-ir svg{width:16px;height:16px}
  #servicos .sv-slide:hover>.pq-ir{background:#83dbce45;transform:translate(2px,-2px)}
  #servicos .sv-slide .sv-link{background:linear-gradient(135deg,#ffffff24,#ffffff0b);border:1px solid #ffffff35;border-radius:999px;padding:11px 18px;box-shadow:inset 0 1px 0 #ffffff38,0 5px 15px #00000012;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#edfff9}
  #servicos .sv-link .arr{display:none}
  #servicos .sv-slide:has(.sv-accounting) .sv-copy{background:linear-gradient(125deg,#ffffff0d,#c2fff003);box-shadow:inset 1px 0 0 #ffffff12;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  #servicos .sv-bpo .sv-copy{background:linear-gradient(110deg,#162b3540,#10242c0d);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border-right:1px solid #ffffff14}
  #servicos .sv-certificate .sv-copy{background:linear-gradient(135deg,#ffffffef,#f0faf6d9);backdrop-filter:blur(20px) saturate(130%);-webkit-backdrop-filter:blur(20px) saturate(130%);box-shadow:inset 0 1px 0 #fff}
  #servicos .sv-certificate .sv-link{background:linear-gradient(135deg,#e4f4f0,#c5e4de);color:#173e40;border-color:#ffffffa6;box-shadow:inset 0 1px 1px #fff,0 4px 12px #163c4114}
  #servicos .sv-certificate>.pq-ir{color:#17494b;background:linear-gradient(135deg,#ffffffb3,#e0fff36b);border-color:#ffffff80}
  @media(max-width:760px){#servicos .sv-slide>.pq-ir{top:16px;right:16px}#servicos .sv-bpo .sv-copy{backdrop-filter:none;-webkit-backdrop-filter:none;border-right:0;background:none}#servicos .sv-slide:has(.sv-accounting) .sv-copy{box-shadow:inset 0 1px 0 #ffffff12}}
  @media(prefers-reduced-motion:reduce){#servicos .sv-slide,#servicos .sv-slide>.pq-ir{transition:none}}

  #servicos .sv-dashboard{position:relative;width:340px;max-width:84%;border:1px solid #caeee95c;border-radius:16px;background:linear-gradient(145deg,#23464aee,#09262ced);box-shadow:-4px 5px 0 #305055,0 22px 42px #0005,inset 0 1px 1px #edfffa55;color:#e8f8f3;transform:perspective(900px) rotateY(-10deg) rotateZ(-4deg);animation:sv-dashboard-drift 8s ease-in-out infinite}
  #servicos .sv-dash-top{display:flex;align-items:center;gap:12px;border-bottom:1px solid #ddfff01c;padding:11px 15px;font-size:12px}
  #servicos .sv-dash-brand{font-weight:600;margin-right:auto}#servicos .sv-dash-top-dots{color:#9bbcb9;letter-spacing:2px}#servicos .sv-dash-avatar{display:grid;place-items:center;border-radius:50%;width:18px;height:18px;background:#74cabc;color:#163d41;font-size:8px}
  #servicos .sv-dash-body{display:flex}#servicos .sv-dash-nav{width:34px;flex-shrink:0;border-right:1px solid #ddfff01a;padding-top:18px;display:flex;align-items:center;flex-direction:column;gap:17px}#servicos .sv-dash-nav i{width:9px;height:9px;border:1px solid #7fa5a5;border-radius:3px}#servicos .sv-dash-nav i:first-child{background:#76d4c6;box-shadow:0 0 10px #80ebcc45;border-color:#8fdfd3}
  #servicos .sv-dash-main{padding:16px;flex:1;min-width:0}#servicos .sv-dash-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}#servicos .sv-dash-heading small{display:block;font-size:7px;color:#9cbfbe;margin-bottom:4px}#servicos .sv-dash-heading strong{display:block;font-size:15px;font-weight:500;letter-spacing:-.03em}#servicos .sv-dash-heading>span{font-size:6px;border:1px solid #ffffff24;border-radius:5px;padding:5px}
  #servicos .sv-dash-metrics{display:flex;gap:8px;margin-bottom:10px}#servicos .sv-dash-metrics>div{flex:1;border:1px solid #d7ffef22;background:#cefff407;border-radius:8px;padding:9px}#servicos .sv-dash-metrics small{display:block;font-size:7px;color:#a5c8c5;margin-bottom:6px}#servicos .sv-dash-metrics b{font-size:10px;font-weight:500}#servicos .sv-dash-metrics em{color:#85ddc7;font-style:normal;margin-left:5px}
  #servicos .sv-dash-graph{padding:10px;border:1px solid #d7ffef18;border-radius:8px;background:#021c2420}#servicos .sv-dash-graph>span{font-size:7px;color:#a8c7c4}#servicos .sv-dash-graph svg{display:block;width:100%;height:70px;margin-top:6px}#servicos .sv-dash-line{animation:sv-dash-glow 5s ease-in-out infinite}
  #servicos .sv-dash-row{display:flex;justify-content:space-between;font-size:7px;border-bottom:1px solid #ffffff14;padding:9px 0;color:#bfd6d3}#servicos .sv-dash-row span{display:flex;align-items:center;gap:6px}#servicos .sv-dash-row i{width:5px;height:6px;border:1px solid #92b7b1;border-radius:1px}#servicos .sv-dash-row b{color:#76d4b9}
  #servicos .sv-accounting .sv-float--document{top:9%;right:8%}#servicos .sv-accounting .sv-float--check{top:63%;right:5%}#servicos .sv-accounting .sv-float--chart{bottom:11%;left:8%}
  @keyframes sv-dashboard-drift{0%,100%{transform:perspective(900px) translateY(3px) rotateY(-10deg) rotateZ(-4deg)}50%{transform:perspective(900px) translateY(-4px) rotateY(-7deg) rotateZ(-3deg)}}
  @keyframes sv-dash-glow{0%,100%{opacity:.65}50%{opacity:1}}
  @media(max-width:760px){#servicos .sv-dashboard{width:300px;max-width:none;scale:.72;transform-origin:center;flex-shrink:0}#servicos .sv-accounting{display:flex;justify-content:center;align-items:center}#servicos .sv-accounting .sv-float--document{right:8%;top:7%}#servicos .sv-accounting .sv-float--check{right:5%;top:67%}#servicos .sv-accounting .sv-float--chart{left:7%;bottom:9%}}
  @media(prefers-reduced-motion:reduce){#servicos .sv-dashboard,#servicos .sv-dash-line{animation:none}}
  #servicos .sv-dashboard{width:370px;height:320px;box-sizing:border-box;line-height:1.3;overflow:hidden}
  #servicos .sv-dash-top{height:38px;box-sizing:border-box}
  #servicos .sv-dash-main{padding:12px}
  #servicos .sv-dash-heading{margin-bottom:10px}
  #servicos .sv-dash-metrics>div{padding:7px}
  #servicos .sv-dash-graph svg{height:54px}
  #servicos .sv-dash-row{padding:7px 0}
  @media(max-width:760px){#servicos .sv-dashboard{width:330px;scale:.65;max-width:none}#servicos .sv-accounting .sv-float--document{right:18%;top:9%}}

  /* Conteúdo dos três serviços na coluna direita. */
  #servicos .sv-slide .sv-copy{margin-left:auto}
  #servicos .sv-bpo .sv-copy{border-right:0;border-left:1px solid #ffffff14;background:linear-gradient(250deg,#162b3559,#10242c18)}
  #servicos .sv-bpo::after{background:linear-gradient(270deg,rgba(4,15,25,.92),rgba(4,15,25,.72) 36%,rgba(4,15,25,.14) 74%),linear-gradient(0deg,rgba(4,15,25,.38),transparent 60%)}
  #servicos .sv-certificate .sv-copy{left:auto;right:0;border-radius:22px 0 0 0}
  #servicos .sv-certificate .sv-copy::before{left:auto;right:0;border-radius:18px 0 0 0}
  @media(max-width:760px){#servicos .sv-bpo .sv-copy{border-left:0;background:none}#servicos .sv-bpo::after{background:linear-gradient(0deg,rgba(4,15,25,.96),rgba(4,15,25,.75) 40%,rgba(4,15,25,.06) 80%)}}
  #avaliacoes .stories-brands [role="tab"] .story-brand-image{filter:grayscale(1);opacity:.42;transition:filter .25s ease,opacity .25s ease}
  #avaliacoes .stories-brands [aria-selected="true"] .story-brand-image{filter:none;opacity:1}
  @media(prefers-reduced-motion:reduce){#avaliacoes .stories-brands .story-brand-image{transition:none}}
  #educacao .ed-incompany-photo{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 68%}
  #educacao .ed-palestra-photo{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:49% 30%}

  /* Ilustrações integradas ao fundo, sem painéis dividindo os cards. */
  #servicos .sv-slide:has(.sv-accounting) .sv-copy,#servicos .sv-bpo .sv-copy{background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  #servicos .sv-accounting{background:none}
  #servicos .sv-chart-art{position:relative;width:86%;max-width:370px;animation:sv-chart-float 8s ease-in-out infinite}
  #servicos .sv-chart-art svg{display:block;width:100%;height:auto;overflow:visible}
  #servicos .sv-chart-curve{filter:drop-shadow(0 0 6px #70dccc35);animation:sv-dash-glow 5s ease-in-out infinite}
  @keyframes sv-chart-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-4px)}}
  #servicos .sv-certificate .sv-copy{left:0;right:auto;width:60%;margin-left:0;background:#fff;border:0;border-radius:0 22px 0 0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:24px 36px;gap:14px}
  #servicos .sv-certificate .sv-copy::before{left:0;right:auto;background:#fff;border-radius:0 18px 0 0}
  #servicos .sv-certificate .sv-link{background:#112238;color:#fff;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  @media(max-width:760px){#servicos .sv-chart-art{width:78%;max-width:270px}#servicos .sv-certificate .sv-copy{width:100%;padding:26px 24px;min-height:53%;border-radius:0 24px 0 0}}
  @media(prefers-reduced-motion:reduce){#servicos .sv-chart-art,#servicos .sv-chart-curve{animation:none}}

  #educacao .ed-fila-card::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(5,16,44,.64);opacity:1;transition:opacity .4s ease}
  #educacao .ed-fila-card.show::before{opacity:0}
  @media(prefers-reduced-motion:reduce){#educacao .ed-fila-card::before{transition:none}}

  /* Contato em azul profundo; rodapé claro. */
  #contato{background:var(--v3-bg);padding:48px 24px 0}
  #contato>.wrap{position:relative;isolation:isolate;overflow:hidden;max-width:1320px;padding:clamp(32px,5vw,72px);border-radius:32px;background:#07132e;box-sizing:border-box}
  #contato>.wrap::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 0% 100%,#2457ba66,transparent 60%),radial-gradient(ellipse at 42% 10%,#22418544,transparent 62%),linear-gradient(135deg,#060d24,#10234a)}
  #contato .cta-grid{display:grid;padding:0;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:center}
  #contato .dobra-cab{max-width:470px}
  #contato .mv-pill{color:#8bcfdf;margin-bottom:24px}
  #contato .v3-acento .h2{font-size:clamp(32px,3.5vw,48px);line-height:1.14;letter-spacing:-.04em;color:#fff;font-weight:500;text-wrap:balance;margin:0}
  #contato .contact-lede{font-size:clamp(20px,2vw,26px);line-height:1.4;letter-spacing:-.02em;color:#b7c9e3;margin:22px 0 0;max-width:24ch}
  #contato .contato-alt{color:#a5b8d3;font-size:14px;line-height:1.7;margin-top:36px}
  #contato .contato-alt a{display:table;color:#e0efff;border-bottom:1px solid #bcd9ff50;margin-top:5px}
  #contato .cform{padding:28px;background:#fafdff;border:1px solid #ffffffa6;border-radius:24px;box-shadow:0 20px 50px #01081526}
  #contato .cform-msg:empty{display:none}
  #contato .cform-submit{background:#11294b;color:#fff}
  footer[data-nav-theme="light"]{background:var(--v3-bg);color:#627285;border:0}
  footer[data-nav-theme="light"] .fc-lbl{color:#132440}
  footer[data-nav-theme="light"] .foot-cols a,footer[data-nav-theme="light"] .fc-brand p{color:#5a6d80}
  footer[data-nav-theme="light"] .foot-cols a:hover{color:#237f80}
  footer[data-nav-theme="light"] .foot-base{color:#748291;border-color:#dce4e9}
  footer[data-nav-theme="light"] .logo img{filter:none;opacity:1}
  @media(max-width:900px){#contato .cta-grid{grid-template-columns:1fr;gap:32px}#contato .dobra-cab{max-width:560px}#contato .contato-alt{margin-top:22px}}
  @media(max-width:560px){#contato{padding:24px 12px 0}#contato>.wrap{padding:28px 20px;border-radius:24px}#contato .cform{padding:20px}#contato .h2{font-size:32px}#contato .contact-lede{font-size:21px}}
  #contact-velaris{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:0}
  #contact-velaris.ready{opacity:.88}

  /* Marvin: connected apps with soft pulses and floating glass layers. */
  #porque .marvin-network{position:relative;flex:1;min-height:280px;margin:24px -30px -36px;overflow:hidden;background:linear-gradient(180deg,#fff,#eef4ff);border-radius:20px 20px 0 0}
  .marvin-network>svg{display:block;width:100%;height:100%;min-height:280px;max-height:430px}
  .mn-core{filter:drop-shadow(0 12px 12px #558bd044);animation:mn-hover 6s ease-in-out infinite;transform-origin:200px 180px}
  .mn-node{filter:drop-shadow(0 9px 10px #5c7dc32e);animation:mn-hover 6s ease-in-out infinite}
  .mn-node-blue{animation-delay:-2s}.mn-node-purple{animation-delay:-4s}
  .mn-stream{animation:mn-flow 7s linear infinite}
  @keyframes mn-hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  @keyframes mn-flow{to{stroke-dashoffset:-484}}
  @media(prefers-reduced-motion:reduce){.mn-core,.mn-node,.mn-stream{animation:none}}

  /* Translucent contact form over the Velaris background. */
  #contato .cform{background:linear-gradient(135deg,rgba(224,238,255,.17),rgba(160,190,245,.07));border:1px solid rgba(223,237,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 20px 50px rgba(0,5,25,.22);-webkit-backdrop-filter:blur(22px) saturate(125%);backdrop-filter:blur(22px) saturate(125%)}
  #contato .cform label{color:#f1f6ff}
  #contato .cform input,#contato .cform select,#contato .cform textarea{background:rgba(5,17,43,.3);color:#fff;border-color:rgba(210,228,255,.25);color-scheme:dark;transition:background .2s,border-color .2s,box-shadow .2s}
  #contato .cform input::placeholder,#contato .cform textarea::placeholder{color:#c4d1e7;opacity:1}
  #contato .cform input:focus,#contato .cform select:focus,#contato .cform textarea:focus{background:rgba(15,34,70,.5);border-color:#a0ccff;box-shadow:0 0 0 3px rgba(123,182,255,.2);outline:none}
  #contato .cform select option{background:#152647;color:#fff}
  #contato .cform .cform-submit{background:linear-gradient(135deg,#f6faff,#d9e9ff);color:#102443;border:1px solid #ffffffb3;box-shadow:inset 0 1px 0 #fff,0 4px 16px #030b2026}
  #contato .cform .cform-submit:hover{background:#fff;color:#102443}
  #contato .cform-msg{color:#d3e0f3}#contato .cform-msg.err{color:#ffd0c7}

  #contato .contato-alt a{display:inline-flex;align-items:center;gap:14px;margin-top:14px;padding:13px 20px;border:1px solid rgba(216,235,255,.4);border-radius:999px;background:linear-gradient(135deg,rgba(224,238,255,.2),rgba(176,206,255,.08));box-shadow:inset 0 1px 0 #ffffff26,0 6px 20px #02091a26;color:#f3f8ff;font-size:15px;font-weight:500;line-height:1.4;text-decoration:none;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background .2s,border-color .2s,transform .2s}
  #contato .contato-alt a svg{width:18px;height:18px;flex:none}
  #contato .contato-alt a:hover{background:rgba(220,238,255,.25);border-color:#d5eaff99;transform:translateY(-2px)}
  #contato .contato-alt a:focus-visible{outline:2px solid #b4d6ff;outline-offset:4px}
  @media(prefers-reduced-motion:reduce){#contato .contato-alt a{transition:none}#contato .contato-alt a:hover{transform:none}}

  /* A spacious transition from the contact section into a pale blue footer. */
  footer[data-nav-theme="light"]{background:linear-gradient(180deg,var(--v3-bg) 0%,#f4f8fc 20%,#e5effa 55%,#cddff3 100%);padding-top:clamp(48px,6vw,88px)}
  footer[data-nav-theme="light"] .foot-cols{padding-bottom:72px}
  footer[data-nav-theme="light"] .foot-base{padding-bottom:48px;color:#526b87;border-color:#a9bfd680}
  @media(max-width:600px){footer[data-nav-theme="light"]{padding-top:40px}footer[data-nav-theme="light"] .foot-cols{padding-bottom:48px}footer[data-nav-theme="light"] .foot-base{padding-bottom:32px}}

  /* Services: compact copy on the left and distinct sculpted image cutouts. */
  #servicos .sv-slide{border-radius:22px}
  #servicos .sv-slide .sv-copy{margin-left:0;gap:16px;justify-content:center}
  #servicos .sv-slide .sv-link{margin-top:8px}
  #servicos .sv-slide:has(.sv-accounting) .sv-copy{grid-column:1;grid-row:1;width:100%;box-sizing:border-box}
  #servicos .sv-accounting{grid-column:2;grid-row:1}
  #servicos .sv-cutout{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
  #servicos .sv-bpo::after{display:none}
  #servicos .sv-bpo .sv-media{left:40%;z-index:-1}
  #servicos .sv-bpo .sv-photo{object-position:65% center}
  #servicos .sv-bpo .sv-copy{width:49%;height:100%;color:#112238;padding:36px;z-index:1}
  #servicos .sv-bpo .sv-description{color:#596c79}
  #servicos .sv-bpo .sv-link{background:#112238;color:white;backdrop-filter:none;border-color:transparent}
  #servicos .sv-certificate .sv-media{inset:0;height:100%;z-index:0}
  #servicos .sv-certificate .sv-cutout{z-index:1}
  #servicos .sv-certificate .sv-copy{z-index:2;left:0;right:auto;bottom:0;width:58%;height:62%;min-height:0;padding:24px 36px;gap:14px;background:none;border-radius:0;justify-content:center}
  #servicos .sv-certificate .sv-copy::before{display:none}
  #servicos .sv-certificate .sv-media .s2p-ic{top:22px;left:28px;width:48px;height:48px}
  @media(max-width:760px){
    #servicos .sv-slide:has(.sv-accounting){grid-template-rows:48% 52%}
    #servicos .sv-slide:has(.sv-accounting) .sv-copy{grid-column:1;grid-row:2;padding:24px}
    #servicos .sv-accounting{grid-column:1;grid-row:1}
    #servicos .sv-bpo .sv-media{inset:0 0 40%;height:auto}
    #servicos .sv-bpo .sv-cutout{display:none}
    #servicos .sv-bpo .sv-copy{position:absolute;inset:auto 0 0;width:100%;height:auto;min-height:50%;padding:26px 24px;background:white;border-radius:0 44px 0 0}
    #servicos .sv-certificate .sv-copy{width:100%;height:56%;padding:24px;background:#fff;border-radius:0 18px 0 0}
    #servicos .sv-certificate .sv-cutout{height:78%}
  }
  #servicos .sv-accounting .sv-float--document{top:18%;right:20%}
  #educacao .ed-fila{--ef-n:2;--ef-w-aberto:56cqw;--ef-w:calc((100cqw - var(--ef-w-aberto) - 2 * var(--ef-vao)) / 2)}
  @media(max-width:1000px){#educacao .ed-fila{--ef-w-aberto:min(88vw,600px);--ef-w:min(42vw,240px)}}
  #porque .pq-card[data-g="2"]{background:linear-gradient(180deg,#fff 25%,#eef4ff 100%)}
  #porque .pq-card[data-g="2"] .pq-wash{display:none}
  #porque .marvin-network{background:transparent;border-radius:0;mask-image:linear-gradient(180deg,transparent,#000 22%);-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%)}

  #porque .pq-card[data-g="1"] .pq-wash{background:linear-gradient(180deg,#fff 25%,#eef4ff 100%)}
  #porque .sla-chart .sla-series-0{fill:#c8d0d2}
  #porque .sla-chart .sla-series-1{fill:#51aaa7}
  #porque .sla-legend span:first-child i{background:#c8d0d2}
  #porque .sla-legend span:nth-child(2) i{background:#51aaa7}
  #porque .sla-chart .sla-bar-label{fill:#627c7d}
  #porque .pq-brasil>svg>path:first-of-type{fill:#f0f5f4;stroke:#adcfc9}
  #pq-br-dots circle{fill:#64aaa2;opacity:.45}
  #porque .pq-brasil circle[fill="#183458"]{fill:#288f88}
  #porque .pq-brasil path[stroke="#417C91"]{stroke:#64aaa2;stroke-opacity:.45}
  #porque .pq-brasil .br-flow{stroke:#289b92}

  #empresa.eco-editorial{position:relative;isolation:isolate;background:linear-gradient(180deg,#d9e6eb 0%,#dce9ef 48%,#dfebf1 82%,#edf3f5 94%,var(--v3-bg) 100%);padding:96px 0 104px;overflow:hidden}
  #empresa.eco-editorial>.wrap{position:relative;z-index:1}
  #empresa.eco-editorial .mv-cab{max-width:840px;margin:0 auto 52px;text-align:center}
  #empresa.eco-editorial .mv-cab h2{font-size:clamp(32px,4vw,52px);line-height:1.13;letter-spacing:-.04em;max-width:800px;margin:22px auto}
  #empresa.eco-editorial .mv-lede{font-size:17px;line-height:1.65;max-width:760px;margin:0 auto;color:#63788a}
  .eco-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .eco-tile{position:relative;isolation:isolate;min-height:560px;overflow:hidden;border-radius:22px;background:#fff;color:#10243b}
  .eco-content{position:relative;z-index:2;padding:32px}
  .eco-label{display:block;font-size:13px;font-weight:500;margin-bottom:26px}
  #empresa .eco-tile h3{font-size:clamp(25px,2.3vw,33px);line-height:1.14;letter-spacing:-.035em;margin:0 0 20px;font-weight:500;color:inherit}
  #empresa .eco-tile p{font-size:16px;line-height:1.55;color:inherit;opacity:.8;margin:0 0 24px}
  .eco-action{display:inline-flex;gap:14px;align-items:center;padding:12px 17px;border-radius:999px;background:#10243b;color:white;font-size:13px;text-decoration:none;line-height:1.4;font-weight:500}
  .eco-action:focus-visible{outline:2px solid #5bc0be;outline-offset:4px}
  .eco-action:hover{box-shadow:0 5px 20px #00102020}
  .eco-tech{background:linear-gradient(160deg,#e2ebee,#f4f8fa 70%,#fff)}
  .eco-tech::before{content:"";position:absolute;inset:0 0 28%;background:repeating-linear-gradient(90deg,transparent 0 5px,#fff6 6px,transparent 8px),linear-gradient(140deg,#d6e1e8,#edf3f6);z-index:-1}
  .eco-tech::after{content:"";position:absolute;bottom:0;left:0;right:0;height:26%;background:white;border-radius:0 28px 0 0}
  .eco-service{background:linear-gradient(150deg,#0b353b,#20565b 70%,#397d7d);color:white}
  .eco-service::before{content:"";position:absolute;inset:0;background:url('/site/certificado-glass.svg') center/cover;opacity:.17;mix-blend-mode:screen;z-index:-1}
  .eco-service .eco-action{background:#dbfff027;border:1px solid #caffef40;backdrop-filter:blur(12px)}
  .eco-education{background:linear-gradient(150deg,#08132b,#132741);color:white}
  .eco-education .eco-action{background:#edf7ff;color:#10243b}
  .eco-art{position:absolute;bottom:0;left:0;width:100%;height:190px;z-index:1;pointer-events:none}
  .eco-art>svg{width:100%;height:100%;display:block}
  .eco-apps{display:flex;gap:10px;justify-content:center;align-items:center;height:100%;padding:0 22px}
  .eco-apps span{width:48px;height:48px;background:#fff;border:1px solid #e4ebee;border-radius:15px;display:grid;place-items:center;box-shadow:0 8px 18px #34556b12}
  .eco-apps img{width:32px;height:32px}.eco-apps span:nth-child(3){width:66px;height:66px}.eco-apps span:nth-child(3) img{width:48px;height:40px}
  @media(max-width:1000px){.eco-grid{gap:16px}.eco-content{padding:24px}.eco-tile{min-height:600px}.eco-action{font-size:12px}}
  @media(max-width:760px){#empresa.eco-editorial{padding:64px 0}.eco-grid{grid-template-columns:1fr}.eco-tile{min-height:480px}.eco-content{padding:28px}.eco-art{height:160px}#empresa .eco-tile h3{max-width:26ch}.eco-action{font-size:14px}#empresa.eco-editorial .mv-cab{margin-bottom:36px}}

  .eco-tech{background:radial-gradient(ellipse at 55% 85%,#21488766,transparent 65%),linear-gradient(140deg,#060d24,#10234a);color:#fff}
  .eco-tech::before,.eco-tech::after{display:none}
  .eco-tech .eco-action{background:#eaf4ff;color:#10243b}
  .eco-tech .eco-art{height:210px}
  .eco-network-node{filter:drop-shadow(0 5px 8px #0003)}
  .eco-education{background:linear-gradient(160deg,#fff 15%,#f1f7fe 55%,#dcecff);color:#10243b}
  .eco-education .eco-action{background:#10243b;color:#fff}
  .eco-education .eco-art path[stroke="#ffffff"]{stroke:#7394bb;stroke-opacity:.2}
  .eco-education .eco-art path[stroke="#a8ede3"]{stroke:#448eaa}
  @media(max-width:760px){.eco-tech .eco-art{height:180px}}

  /* Services: simple blue glass panel and soft white certificate finish. */
  #servicos .sv-slide{border:1px solid #d5e5f033;box-sizing:border-box;box-shadow:inset 0 1px 0 #ffffff36,0 12px 36px #122c4010}
  #servicos .sv-slide:has(.sv-accounting){background:radial-gradient(ellipse at 65% 85%,#466b8733,transparent 70%),linear-gradient(125deg,#102d36,#21444c)}
  #servicos .sv-bpo{background:#0b1934}
  #servicos .sv-bpo .sv-cutout{display:none}
  #servicos .sv-bpo .sv-media{inset:0;height:100%}
  #servicos .sv-bpo .sv-copy{width:51%;height:100%;padding:36px;color:#fff;background:linear-gradient(125deg,rgba(13,30,61,.96),rgba(30,53,88,.88));border-radius:0 24px 24px 0;border-right:1px solid #d3e5ff40;box-shadow:inset 0 1px 0 #ffffff26;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
  #servicos .sv-bpo .sv-description{color:#cad7e8}
  #servicos .sv-slide .sv-link{background:linear-gradient(135deg,#ffffff26,#ffffff0c);border:1px solid #e0f5ff42;color:#f5fbff;box-shadow:inset 0 1px 0 #ffffff26;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  #servicos .sv-certificate{background:linear-gradient(145deg,#fff 25%,#f9fafb 65%,#eceef1);border-color:#dce1e7;box-shadow:inset 0 1px 0 #fff,0 12px 36px #122c4008}
  #servicos .sv-certificate .sv-cutout{display:none}
  #servicos .sv-certificate .sv-media{left:52%;opacity:.7;mask-image:linear-gradient(90deg,transparent,#000 38%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 38%)}
  #servicos .sv-certificate .sv-certificate-art{opacity:.2;filter:grayscale(.7)}
  #servicos .sv-certificate .sv-media .s2p-ic{top:50%;left:45%;transform:translate(-50%,-50%);width:112px;height:112px;border-radius:28px;background:#ffffff80;border:1px solid #fff;box-shadow:0 20px 40px #4c738525,inset 0 2px 0 #fff;color:#4b9896;backdrop-filter:blur(16px)}
  #servicos .sv-certificate .s2p-ic svg{width:54px;height:54px}
  #servicos .sv-certificate .sv-copy{width:58%;height:100%;background:none;padding:36px}
  #servicos .sv-certificate .sv-link{background:linear-gradient(135deg,#fff,#e9eef2);border-color:#d7dfe5;color:#18334a;box-shadow:inset 0 1px 0 #fff,0 4px 12px #163c4110}
  @media(max-width:760px){#servicos .sv-bpo .sv-copy{inset:auto 0 0;width:100%;height:auto;min-height:50%;padding:26px 24px;border-radius:20px 20px 0 0;border-right:0;border-top:1px solid #d3e5ff40}#servicos .sv-certificate .sv-media{inset:0 0 45%;mask-image:linear-gradient(0deg,transparent,#000 35%);-webkit-mask-image:linear-gradient(0deg,transparent,#000 35%)}#servicos .sv-certificate .sv-copy{width:100%;height:56%;padding:24px}#servicos .sv-certificate .sv-media .s2p-ic{left:50%;top:48%}}
  #servicos .sv-certificate .sv-media{background:transparent}
  @media(max-width:760px){#servicos .sv-certificate .sv-media{height:auto}}

  .eco-service .eco-wave{height:210px;background:linear-gradient(0deg,#06252c99,transparent)}
  .eco-wave-pulse{transform-box:fill-box;transform-origin:center;animation:eco-wave-pulse 4s ease-in-out infinite}
  .eco-wave-haze{animation:eco-wave-haze 6s ease-in-out infinite}
  @keyframes eco-wave-pulse{50%{transform:scale(1.55);opacity:.05}}
  @keyframes eco-wave-haze{50%{opacity:.4}}
  @media(max-width:760px){.eco-service .eco-wave{height:175px}}
  @media(prefers-reduced-motion:reduce){.eco-wave-pulse,.eco-wave-haze{animation:none}}

  .eco-tile{min-height:610px;border:1px solid #e1f0ff33;box-shadow:inset 0 1px 0 #ffffff30,0 16px 36px #234b6510}
  .eco-tech{background:radial-gradient(ellipse at 50% 80%,#24509470,transparent 65%),linear-gradient(145deg,#070e25,#122951)}
  .eco-tech .eco-art{height:265px}
  .eco-tech .eco-art>svg{transform:none}
  .eco-tech .eco-network-node{filter:drop-shadow(0 6px 8px #02081966)}
  .eco-tech .eco-network-node rect{stroke:#b7d7ff;stroke-width:1;fill:#f3f8ff}
  .eco-tech .eco-art>svg>g:first-child{stroke:#80b5ff;stroke-opacity:.5}
  .eco-service{background:radial-gradient(ellipse at 65% 100%,#2a777c77,transparent 70%),linear-gradient(145deg,#092d36,#154852)}
  .eco-service::before{opacity:.06}
  .eco-service .eco-wave{height:250px;background:linear-gradient(0deg,#041c2966,transparent)}
  .eco-service .eco-action{background:linear-gradient(135deg,#c1fff02e,#b1eaff0c);box-shadow:inset 0 1px 0 #e6fffa40,0 6px 20px #001c2220}
  .eco-education .eco-orbit{height:255px}
  .eco-portrait{filter:drop-shadow(0 6px 9px #6483b329);animation:eco-portrait-float 7s ease-in-out infinite;animation-delay:var(--delay)}
  .eco-orbit-center{filter:drop-shadow(0 6px 8px #668ed429)}
  @keyframes eco-portrait-float{50%{transform:translateY(-4px)}}
  @media(max-width:1000px){.eco-tile{min-height:640px}}
  @media(max-width:760px){.eco-tile{min-height:550px}.eco-tech .eco-art{height:225px}.eco-service .eco-wave{height:215px}.eco-education .eco-orbit{height:225px}}
  @media(prefers-reduced-motion:reduce){.eco-portrait{animation:none}}

  #tecnologia .hs-block{opacity:.72}
  #tecnologia .hs-block.is-on{opacity:1}
  #tecnologia .hs-block-h{margin-bottom:22px}
  #tecnologia .hs-block h3{font-size:clamp(27px,2.4vw,34px);line-height:1.2;font-weight:500}
  #tecnologia .hs-block>p{font-size:17px;line-height:1.7;color:#d0d8e8;max-width:42ch}
  #tecnologia .hs-block .hs-benefits{margin-top:26px;gap:16px}
  #tecnologia .hs-block .hs-benefits li{font-size:16px;line-height:1.65;color:#d8dfec}
  #tecnologia .hs-block .hs-topic-cta{margin-top:28px}
  @media(max-width:760px){#tecnologia .hs-block{padding:30px 0}#tecnologia .hs-block>p{font-size:16px}#tecnologia .hs-block .hs-benefits li{font-size:15px}}

  /* Market-inspired compositions: one rounded step, full-strength photography. */
  #servicos .sv-slide:has(.sv-accounting){grid-template-columns:45% 55%}
  #servicos .sv-accounting{overflow:visible}
  #servicos .sv-accounting .sv-data-field{inset:3% -8% 0 -35%;transform:none;opacity:.4;mask-image:radial-gradient(ellipse at 53% 53%,#000 8%,transparent 68%);-webkit-mask-image:radial-gradient(ellipse at 53% 53%,#000 8%,transparent 68%)}
  #servicos .sv-chart-art{width:88%;max-width:400px;left:-5%}
  #servicos .sv-accounting .sv-float--document{top:24%;right:30%}
  #servicos .sv-accounting .sv-float--chart{left:12%;bottom:25%}
  #servicos .sv-accounting .sv-float--check{top:64%;right:16%}
  #servicos .sv-bpo .sv-cutout,#servicos .sv-certificate .sv-cutout{display:block;height:100%}
  #servicos .sv-bpo .sv-media{inset:0 0 0 38%;height:100%}
  #servicos .sv-bpo .sv-copy{width:51%;height:100%;padding:36px;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  #servicos .sv-bpo .sv-description{max-width:34ch}
  #servicos .sv-certificate .sv-media{inset:0;height:100%;opacity:1;mask-image:none;-webkit-mask-image:none}
  #servicos .sv-certificate .sv-certificate-art{opacity:1;filter:none}
  #servicos .sv-certificate .sv-media .s2p-ic{top:24px;left:30px;transform:none;width:48px;height:48px;border-radius:14px;background:#eaffff30;border-color:#ffffff55;color:#e4ffff;box-shadow:inset 0 1px 0 #ffffff50}
  #servicos .sv-certificate .s2p-ic svg{width:26px;height:26px}
  #servicos .sv-certificate .sv-copy{width:56%;height:65%;min-height:0;padding:22px 36px;background:none;gap:14px}
  #servicos .sv-certificate .sv-copy b{font-size:clamp(25px,2.35vw,34px)}
  @media(max-width:760px){
    #servicos .sv-slide:has(.sv-accounting){grid-template-columns:1fr;grid-template-rows:48% 52%}
    #servicos .sv-chart-art{width:80%;max-width:270px;left:-3%}
    #servicos .sv-accounting .sv-float--document{top:22%;right:29%}
    #servicos .sv-accounting .sv-float--chart{left:13%;bottom:23%}
    #servicos .sv-accounting .sv-float--check{top:67%;right:10%}
    #servicos .sv-bpo .sv-media{inset:0 0 40%;height:auto}
    #servicos .sv-bpo .sv-cutout,#servicos .sv-certificate .sv-cutout{display:none}
    #servicos .sv-bpo .sv-copy,#servicos .sv-certificate .sv-copy{position:absolute;inset:auto 0 0;width:100%;height:53%;min-height:0;padding:24px;gap:14px;border-radius:0 18px 0 0}
    #servicos .sv-bpo .sv-copy{background:linear-gradient(125deg,#142645,#2b4564)}
    #servicos .sv-certificate .sv-copy{background:linear-gradient(145deg,#fff,#fafafb 65%,#eceef1)}
    #servicos .sv-bpo .sv-copy::before,#servicos .sv-certificate .sv-copy::before{content:"";display:block;position:absolute;left:0;right:auto;top:-20px;width:42%;height:20px;border-radius:0 14px 0 0;background:#142645}
    #servicos .sv-certificate .sv-copy::before{background:#fff}
    #servicos .sv-certificate .sv-media{inset:0 0 40%;height:auto}
  }

  /* Academy: stronger blue depth, softly lit portraits and the original Academy mark. */
  .eco-education{background:radial-gradient(ellipse at 70% 100%,#8dbaff66,transparent 60%),linear-gradient(160deg,#fff 12%,#edf5ff 44%,#c8dfff 75%,#a9ccfa);border:1px solid #ffffffb3;box-shadow:inset 0 1px 0 #fff,0 14px 32px #4c7caf12}
  .eco-education .eco-orbit{height:265px;bottom:5px;mask-image:linear-gradient(transparent,#000 15%);-webkit-mask-image:linear-gradient(transparent,#000 15%)}
  .eco-education .eco-portrait{filter:drop-shadow(0 5px 6px #5c85c238)}
  .eco-academy-center{filter:drop-shadow(0 6px 8px #477fd64d)}
  @media(max-width:760px){.eco-education .eco-orbit{height:235px;bottom:0}}

  /* Clip composited iframe overlays and videos to the inner glass screen. */
  #tecnologia .hs-window.hs-real .hs-frame-wrap{border-radius:15px;overflow:hidden;isolation:isolate;clip-path:inset(0 round 15px)}

  /* Education CTAs with a visible glass button surface. */
  #educacao .ed-fila-link{display:inline-flex;align-self:flex-start;align-items:center;justify-content:center;gap:10px;width:fit-content;max-width:100%;box-sizing:border-box;min-height:44px;padding:12px 18px;border-radius:999px;border:1px solid #e4f3ff55;background:linear-gradient(135deg,#edf7ff2b,#c0dcff12);box-shadow:inset 0 1px 0 #ffffff40,0 6px 16px #02091e20;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#fff;font-size:14px;line-height:1.4;font-weight:500;text-decoration:none;transition:background .2s ease,border-color .2s ease}
  #educacao .ed-fila-link .arr{flex-shrink:0;color:#bcf4ed}
  #educacao .ed-fila-card:not(.show) .ed-fila-link{padding:10px 13px;font-size:12px;border-radius:22px}
  #educacao .ed-fila-link:hover,#educacao .ed-fila-card:focus-visible .ed-fila-link{background:#e4f3ff35;border-color:#e4f3ff90}
  #educacao .ed-incompany-photo{object-position:50% 65%}

  /* Blue accents throughout the reasons bento. */
  #porque .pq-ir{color:#3972cf}
  #porque .sla-chart .sla-series-1{fill:#568bdd}
  #porque .sla-legend span:nth-child(2) i{background:#568bdd}
  #porque .sla-chart .sla-bar-label{fill:#687f9c}
  #porque .pq-brasil>svg>path:first-of-type{fill:#f0f5fc;stroke:#b7cce8}
  #porque #pq-br-dots circle{fill:#83a9db}
  #porque .pq-brasil circle[fill="#183458"]{fill:#3977cf}
  #porque .pq-brasil path[stroke="#417C91"]{stroke:#83a9db}
  #porque .pq-brasil .br-flow{stroke:#3977cf}
  #porque .pq-team-link{stroke:#a0b9da}
  #porque .pq-team-link:nth-of-type(3n){stroke:#568bdd}

  /* Plain section label and translucent glass above the animated blue field. */
  #contato .mv-pill{padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;min-height:0;color:#9dc5ff;font-size:14px;line-height:1.5;gap:8px}
  #contato .mv-pill::before,#contato .mv-pill::after{display:none}
  #contato .mv-pill svg{color:#79aaff;width:16px;height:16px}
  #contato>.wrap::before{inset:-20%;background:radial-gradient(ellipse at 28% 65%,#2f70eeaa,transparent 55%),radial-gradient(ellipse at 75% 35%,#244fa68c,transparent 50%),#07132e;animation:contact-blue-drift 16s ease-in-out infinite alternate;transition:opacity .6s ease}
  #contato>.wrap:has(#contact-velaris.ready)::before{opacity:0;animation:none}
  #contact-velaris{z-index:0}
  #contact-velaris.ready{opacity:1}
  #contato .cta-grid{position:relative;z-index:1}
  #contato .cform{background:linear-gradient(130deg,#edf6ff1f,#d4e7ff0a 45%,#a4c5ff0f);border-color:#dcecff66;box-shadow:inset 0 2px 0 #ffffff55,inset 1px 0 0 #ffffff26,inset 0 -1px 0 #a1caff26,0 24px 55px #00091d33;backdrop-filter:blur(28px) saturate(145%);-webkit-backdrop-filter:blur(28px) saturate(145%)}
  #contato .cform input,#contato .cform select,#contato .cform textarea{background:#07172b24;border-color:#dfedff40;box-shadow:inset 0 1px 0 #ffffff0d}
  #contato .cform input::placeholder,#contato .cform textarea::placeholder{color:#d0def2}
  @keyframes contact-blue-drift{from{transform:translate(-4%,2%) scale(1)}to{transform:translate(9%,-5%) scale(1.15)}}
  @media(prefers-reduced-motion:reduce){#contato>.wrap::before{animation:none}}

  /* BPO: upper-left copy, with the photo flowing below and up the right side. */
  #servicos .sv-bpo .sv-media{inset:0;height:100%}
  #servicos .sv-bpo .sv-photo{object-position:65% 58%}
  #servicos .sv-bpo .sv-copy{position:absolute;inset:0 auto auto 0;width:56%;height:70%;padding:28px 36px;justify-content:center;gap:14px;background:none}
  #servicos .sv-bpo .sv-copy::before{display:none}
  @media(max-width:760px){
    #servicos .sv-bpo .sv-media{inset:0;height:100%}
    #servicos .sv-bpo .sv-photo{object-position:65% 75%}
    #servicos .sv-bpo .sv-copy{inset:0 0 auto;width:100%;height:51%;padding:24px;border-radius:0 0 18px 0;background:#1b3150}
    #servicos .sv-bpo .sv-copy::before{display:block;top:auto;bottom:-18px;width:42%;height:18px;border-radius:0 0 14px 0;background:#1b3150}
    #servicos .sv-bpo>.pq-ir{top:auto;bottom:18px;right:18px}
  }

  #servicos .sv-abertura{position:relative;padding-right:120px}
  #servicos .sv-controls{position:absolute;right:0;bottom:4px;display:flex;gap:12px}
  #servicos .sv-controls button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #dfe3e8;border-radius:50%;background:#fff;color:#183349;cursor:pointer;transition:background .2s,opacity .2s}
  #servicos .sv-controls svg{width:20px;height:20px}
  #servicos .sv-controls button:disabled{opacity:.3;cursor:default}
  #servicos .sv-controls button:not(:disabled):hover{background:#eaf2fc}
  #servicos .sv-controls button:focus-visible{outline:2px solid #3972cf;outline-offset:4px}
  @media(max-width:760px){#servicos .sv-abertura{padding-right:0;padding-bottom:54px}#servicos .sv-controls{bottom:0}#servicos .sv-controls button{width:38px;height:38px}}

  #porque .why-head{align-items:center;text-align:center;max-width:900px;margin-inline:auto}
  #porque .why-head .h2{max-width:26ch;margin-inline:auto;text-align:center;text-wrap:balance}
  #porque .why-head .lede{max-width:70ch;margin-inline:auto;text-align:center;text-wrap:balance}

  /* Compact Hub menu feature, with a stable appearance on pointer hover. */
  .s2h .s2h-links .mm-panel .mm-feat-hub,.s2h .s2h-links .mm-panel .mm-feat-hub:hover{padding:24px 20px;background:radial-gradient(120% 90% at 12% 0%,#7aa0ff38,transparent 62%),linear-gradient(158deg,#3972fd42,#3972fd14 60%,#17255233),#0b1530;border-color:#7aa0ff57;transform:none;transition:none;color:#fff}
  .s2h-links .mm-panel .mm-feat-hub .mm-tx b{font-size:10px;line-height:1.4;letter-spacing:.1em;color:#c6d9ff}
  .s2h-links .mm-panel .mm-feat-hub .mf-h{margin-top:14px;font-size:21px;line-height:1.25;font-weight:500;text-wrap:balance}
  .s2h-links .mm-panel .mm-feat-hub .mm-tx small{margin-top:16px;font-size:13px;line-height:1.6;color:#dbe5f5}
  .s2h-links .mm-panel .mm-feat-hub .mm-feat-go,.s2h-links .mm-panel .mm-feat-hub:hover .mm-feat-go{margin-top:22px;background:#090d1e1a;border-color:#dce8ffad;transform:none;transition:none}

  /* CTAs de educação compactos e sempre em uma linha. */
  #educacao .ed-fila-link{white-space:nowrap;gap:0;font-size:13px;padding:11px 16px;min-height:42px}
  #educacao .ed-fila-card:not(.show) .ed-fila-link{font-size:12px;padding:10px 13px}

  /* BPO: recorte da foto acima, conteúdo na base esquerda. */
  #servicos .sv-bpo .sv-copy{inset:auto auto 0 0}
  @media(max-width:760px){
    #servicos .sv-bpo .sv-copy{inset:auto 0 0;border-radius:0 18px 0 0}
    #servicos .sv-bpo .sv-copy::before{top:-18px;bottom:auto;border-radius:0 14px 0 0}
    #servicos .sv-bpo>.pq-ir{top:18px;bottom:auto}
  }

  /* Ajuste óptico da marca Imobia na faixa de depoimentos. */
  #avaliacoes #story-tab-3 .story-brand-image{max-width:140px}
  @media(max-width:760px){#avaliacoes #story-tab-3 .story-brand-image{max-width:120px}}

  /* V31: dados da Marvee com tres numeros (reuniao de 10/09: o "700+ ativas"
     saiu porque sugere que metade foi embora). A grade de 4 colunas deixaria
     a ultima vazia, entao vira 3; no tablet tambem 3 (2+1 deixaria um orfao). */
  #dados .dm-grade{grid-template-columns:repeat(3,minmax(0,1fr))}
  @media(max-width:900px){#dados .dm-grade{grid-template-columns:repeat(3,minmax(0,1fr))}#dados .dm-item:nth-child(3){border-left:1px solid rgba(20,32,57,.10)}}
  @media(max-width:480px){#dados .dm-grade{grid-template-columns:minmax(0,1fr)}#dados .dm-item:nth-child(3){border-left:0}}

  /* V32: a dobra Tecnologia por area (reuniao de 10/09). Cinco capitulos,
     um por area do Hub, na ordem Produtividade, Receita, Tecnologia,
     Pessoas, Backoffice. Cada capitulo abre com o painel dos apps da area
     (na cor da area, como a grade do /hub) e depois roda a tela real de
     um ou dois apps quando ela existe no prototipo. */
  .hs-apps{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:clamp(14px,3%,30px);background:#f5f6fa;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s;pointer-events:none}
  .hs-apps.is-on{opacity:1;visibility:visible;transition:opacity .5s ease}
  .hs-frame-wrap.has-panel .hs-frame{opacity:0;visibility:hidden}
  .hs-apps-card{width:100%;max-width:640px;background:rgba(255,255,255,.86);border:1px solid rgba(16,24,40,.10);border-radius:22px;padding:clamp(16px,3.4%,30px) clamp(16px,3.6%,32px);box-shadow:0 30px 80px -30px rgba(16,24,40,.25);color:#1B2A4A}
  .hs-apps-head{display:flex;flex-direction:column;gap:3px;margin-bottom:18px}
  .hs-apps-head b{font-size:clamp(17px,2.1vw,21px);font-weight:600;letter-spacing:-.01em;color:#1B2A4A}
  .hs-apps-head span{font-size:13px;color:#5B6273}
  .hs-apps-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px}
  .hs-apps-grid li{display:flex;align-items:center;gap:13px;padding:9px 10px;border-radius:13px}
  .hs-apps-ic{flex:0 0 48px;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:radial-gradient(125% 120% at 50% -12%,rgba(var(--ac),.20),rgba(var(--ac),.03) 55%,#fff 100%),#fff;border:1px solid rgba(var(--ac),.30);box-shadow:0 6px 16px -8px rgba(var(--ac),.40),inset 0 1px 0 rgba(255,255,255,.9)}
  .hs-apps-ic img{width:26px;height:26px;object-fit:contain;display:block}
  .hs-apps-tx{min-width:0;display:flex;flex-direction:column}
  .hs-apps-tx b{font-size:14.5px;font-weight:600;line-height:1.2;color:#1B2A4A;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .hs-apps-tx small{font-size:12px;color:#5B6273;margin-top:3px;line-height:1.3}
  .hs-apps-tag{font-style:normal;font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgb(var(--ac));background:rgba(var(--ac),.12);border-radius:999px;padding:2px 7px}
  /* o brilho da moldura acompanha a cor da area */
  .hs-stage[data-chapter="0"] .hs-window{--luz-mock:91,192,190}
  .hs-stage[data-chapter="1"] .hs-window{--luz-mock:250,152,0}
  .hs-stage[data-chapter="2"] .hs-window{--luz-mock:57,114,253}
  .hs-stage[data-chapter="3"] .hs-window{--luz-mock:163,100,255}
  .hs-stage[data-chapter="4"] .hs-window{--luz-mock:0,183,180}
  .hs-stage[data-chapter="5"] .hs-window{--luz-mock:250,61,133}
  @media(max-width:760px){
    .hs-apps{padding:10px}
    .hs-apps-card{padding:14px 12px;border-radius:16px}
    .hs-apps-head{margin-bottom:10px}
    .hs-apps-head span{font-size:12px}
    .hs-apps-grid{gap:2px 6px}
    .hs-apps-grid li{gap:9px;padding:6px 4px}
    .hs-apps-ic{flex-basis:36px;width:36px;height:36px;border-radius:11px}
    .hs-apps-ic img{width:20px;height:20px}
    .hs-apps-tx b{font-size:13px}
    .hs-apps-tx small{display:none}
  }
  /* Entre o toque e o desktop largo (761 a 1200px) a janela presa tem
     uns 310px de altura e o painel de seis apps media 380px: o titulo e a
     ultima linha sumiam no recorte. O painel encolhe (icone, respiro e
     descricao) ate caber inteiro na janela, como ja fazia no toque. */
  @media(min-width:761px) and (max-width:1200px){
    .hs-apps{padding:12px}
    .hs-apps-card{padding:14px 16px;border-radius:16px}
    .hs-apps-head{margin-bottom:10px}
    .hs-apps-head b{font-size:17px}
    .hs-apps-head span{font-size:12px}
    .hs-apps-grid{gap:2px 10px}
    .hs-apps-grid li{gap:10px;padding:6px 6px}
    .hs-apps-ic{flex-basis:38px;width:38px;height:38px;border-radius:11px}
    .hs-apps-ic img{width:22px;height:22px}
    .hs-apps-tx b{font-size:13.5px}
    .hs-apps-tx small{font-size:11px;margin-top:1px}
  }

  /* V33: contato no layout de dois paineis (referencia da autora, 10/09):
     painel claro a esquerda com logo, titulo e prova social; formulario
     branco a direita com os mesmos campos. Versao clara. */
  #contato.ct-v2{background:var(--v3-bg);padding:clamp(40px,6vw,88px) 24px clamp(64px,7vw,96px)}
  #contato.ct-v2>.wrap{position:static;isolation:auto;overflow:visible;max-width:1120px;padding:0;border-radius:0;background:none}
  #contato.ct-v2>.wrap::before{display:none}
  #contato.ct-v2 .ct-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 1px 0 rgba(16,24,40,.04),0 30px 80px -30px rgba(16,24,40,.28),0 0 0 1px rgba(16,24,40,.06)}
  #contato.ct-v2 .ct-esq{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:48px;padding:clamp(28px,3.4vw,44px);min-height:560px;color:#0B1530;background:radial-gradient(ellipse at 18% 8%,rgba(91,192,190,.32),transparent 52%),radial-gradient(ellipse at 90% 92%,rgba(57,114,253,.22),transparent 55%),radial-gradient(ellipse at 70% 30%,rgba(163,100,255,.10),transparent 50%),linear-gradient(160deg,#EEF6F7,#E4ECF9)}
  #contato.ct-v2 .ct-esq::after{content:"";position:absolute;inset:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M.5 0V44M0 .5H44' fill='none' stroke='%232B55D4' stroke-opacity='.10' stroke-width='1' stroke-dasharray='2 5'/%3E%3C/svg%3E");mask-image:linear-gradient(180deg,#000 30%,transparent 90%);-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 90%)}
  #contato.ct-v2 .ct-esq>*{position:relative;z-index:1}
  #contato.ct-v2 .ct-logo{display:inline-flex;width:fit-content}
  #contato.ct-v2 .ct-logo img{display:block;width:auto;height:44px}
  #contato.ct-v2 .ct-esq-b{display:flex;flex-direction:column;align-items:flex-start;gap:0}
  #contato.ct-v2 .mv-pill{padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;min-height:0;color:#2E8C8A;font-size:14px;line-height:1.5;gap:8px;margin:0 0 18px}
  #contato.ct-v2 .mv-pill::before,#contato.ct-v2 .mv-pill::after{display:none}
  #contato.ct-v2 .mv-pill svg{width:16px;height:16px;color:#2E8C8A}
  #contato.ct-v2 .ct-esq .h2{margin:0;font-size:clamp(30px,3vw,40px);line-height:1.12;letter-spacing:-.035em;font-weight:500;color:#0B1530;text-wrap:balance;max-width:14ch;text-align:left}
  #contato.ct-v2 .ct-prova{display:flex;align-items:center;gap:14px;margin-top:34px;font-size:14.5px;color:#3E4C63}
  #contato.ct-v2 .ct-avs{display:flex}
  #contato.ct-v2 .ct-avs img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2.5px solid #fff;box-shadow:0 2px 8px rgba(16,24,40,.14);margin-left:-11px;background:#dfe6ee}
  #contato.ct-v2 .ct-avs img:first-child{margin-left:0}
  #contato.ct-v2 .ct-dir{padding:clamp(28px,3.4vw,44px) clamp(28px,3.6vw,48px);display:flex;flex-direction:column;justify-content:center}
  #contato.ct-v2 .ct-t{margin:0;font-size:24px;line-height:1.2;letter-spacing:-.02em;font-weight:600;color:#0B1530}
  #contato.ct-v2 .ct-s{margin:6px 0 24px;font-size:15px;color:#5B6273}
  #contato.ct-v2 .cform{padding:0;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  #contato.ct-v2 .cform .field{margin-bottom:16px}
  #contato.ct-v2 .cform .two{gap:14px}
  #contato.ct-v2 .cform label{color:#142039;font-size:13px;font-weight:600;margin-bottom:7px}
  #contato.ct-v2 .cform label .req{color:#2E8C8A}
  #contato.ct-v2 .cform input,#contato.ct-v2 .cform select,#contato.ct-v2 .cform textarea{background:#fff;color:#142039;border:1px solid #D9DFE7;border-radius:12px;min-height:48px;font-size:15.5px;box-shadow:0 1px 2px rgba(16,24,40,.04);color-scheme:light;transition:border-color .18s,box-shadow .18s}
  #contato.ct-v2 .cform input::placeholder,#contato.ct-v2 .cform textarea::placeholder{color:#8B94A5;opacity:1}
  #contato.ct-v2 .cform input:focus,#contato.ct-v2 .cform select:focus,#contato.ct-v2 .cform textarea:focus{background:#fff;border-color:#142039;box-shadow:0 0 0 3px rgba(20,32,57,.10);outline:none}
  #contato.ct-v2 .cform select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6273' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
  #contato.ct-v2 .cform select option{background:#fff;color:#142039}
  #contato.ct-v2 .cform textarea{min-height:96px}
  #contato.ct-v2 .cform .cform-submit,#contato.ct-v2 .cform .cform-submit:hover{width:100%;margin-top:6px;min-height:52px;border-radius:12px;background:#11294B;color:#fff;border:1px solid #0b1d38;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 20px -10px rgba(17,41,75,.6);font-weight:600;font-size:16px}
  #contato.ct-v2 .cform .cform-submit:hover{background:#0B1D38}
  #contato.ct-v2 .cform-msg{color:#667c8b;text-align:center}
  #contato.ct-v2 .cform-msg.err{color:#a33636}
  #contato.ct-v2 .contato-alt{margin:18px 0 0;text-align:center;font-size:14px;color:#5B6273}
  #contato.ct-v2 .contato-alt a{display:inline;padding:0;margin:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:#0B1530;font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(11,21,48,.3);transform:none}
  #contato.ct-v2 .contato-alt a:hover{background:none;border:0;transform:none;text-decoration-color:#0B1530}
  #contato.ct-v2 .cform-done{background:#fff;border:1px solid #E1E5EB}
  @media(max-width:900px){
    #contato.ct-v2{padding:40px 16px 64px}
    #contato.ct-v2 .ct-card{grid-template-columns:1fr;border-radius:22px}
    #contato.ct-v2 .ct-esq{min-height:0;gap:36px;padding:24px}
    #contato.ct-v2 .ct-esq .h2{font-size:28px;max-width:none}
    #contato.ct-v2 .ct-prova{margin-top:22px;font-size:13.5px}
    #contato.ct-v2 .ct-dir{padding:24px 20px 28px}
    #contato.ct-v2 .cform .two{grid-template-columns:1fr;gap:0}
  }

  /* V34: o card "Feito para o Brasil" vira "Sua empresa no seu bolso"
     (reuniao de 10/09: o Brasil nao e diferencial e trava expansao; o
     resultado no celular, e). A ilustracao e uma conversa com o Marvin,
     leve, sem asset novo. */
  #porque .pq-card .pq-zap{display:flex;align-items:flex-start;justify-content:center;margin:20px auto -36px;max-width:330px;width:100%;max-height:250px;overflow:hidden;border-radius:22px 22px 0 0}
  .pq-zap-tela{width:100%;background:#fff;border:1px solid rgba(16,24,40,.10);border-radius:22px;box-shadow:0 20px 50px -24px rgba(16,24,40,.30),0 1px 0 rgba(16,24,40,.04);overflow:hidden}
  .pq-zap-top{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(16,24,40,.08);background:#FBFCFE}
  .pq-zap-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid rgba(16,24,40,.10);flex:none}
  .pq-zap-av img{width:22px;height:auto;display:block}
  .pq-zap-quem{display:flex;flex-direction:column;line-height:1.15}
  .pq-zap-quem b{font-size:13.5px;font-weight:600;color:#0B1530}
  .pq-zap-quem small{font-size:11px;color:#5B6273}
  .pq-zap-fio{display:flex;flex-direction:column;gap:7px;padding:12px 12px 14px;background:radial-gradient(ellipse at 80% 0%,rgba(91,192,190,.10),transparent 60%),#F5F7FA}
  .pq-zap-b{position:relative;max-width:88%;padding:8px 11px 17px;border-radius:14px;font-size:12px;line-height:1.4;color:#142039;text-align:left}
  .pq-zap-b--m{align-self:flex-start;background:#fff;border:1px solid rgba(16,24,40,.08);border-bottom-left-radius:5px}
  .pq-zap-b--u{align-self:flex-end;background:#DDF3F1;border-bottom-right-radius:5px}
  .pq-zap-b b{font-weight:600}
  .pq-zap-b ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:3px}
  .pq-zap-b li{padding-left:16px;position:relative}
  .pq-zap-b li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:#5BC0BE}
  .pq-zap-b time{position:absolute;right:10px;bottom:5px;font-size:10px;color:#8B94A5}
  @media(max-width:760px){#porque .pq-card .pq-zap{max-width:300px}.pq-zap-b{font-size:12px}}

  /* V35: o card Educacao que multiplica vira escuro (navy do Hub), para
     dar contraste ao bento, que estava todo claro (pedido da autora). */
  #porque .pq-card[data-g="4"]{background:linear-gradient(165deg,#0F1D40 0%,#081431 60%,#060F27 100%);border-color:rgba(255,255,255,.06);box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 30px 70px -40px rgba(4,10,40,.8)}
  #porque .pq-card[data-g="4"] .pq-wash{background:radial-gradient(60% 55% at 90% 100%,rgba(57,114,253,.40),transparent 70%),radial-gradient(45% 45% at 10% 100%,rgba(250,152,0,.16),transparent 70%);opacity:1}
  #porque .pq-card[data-g="4"] h3{color:#fff}
  #porque .pq-card[data-g="4"] p{color:#B7C6E0}
  #porque .pq-card[data-g="4"] .pq-ir{background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  #porque .pq-card[data-g="4"]:hover .pq-ir{background:rgba(255,255,255,.18)}

  /* V36: o card da Educacao deixa o grafico ilustrativo e mostra a
     imersao de verdade (capa do video), com a promessa do doc: o dono
     sai com a IA operando, nao com teoria. */
  #porque .pq-card .pq-imersao{position:relative;max-width:640px;margin:24px auto -36px;border-radius:14px 14px 0 0;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.10),0 30px 60px -30px rgba(0,0,0,.6)}
  #porque .pq-card .pq-imersao img{display:block;width:100%;height:250px;object-fit:cover;object-position:center 30%;border-radius:0;box-shadow:none}
  #porque .pq-card .pq-imersao::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,15,39,0) 40%,rgba(6,15,39,.55) 100%);pointer-events:none}
  .pq-imersao-tag{position:absolute;left:14px;top:14px;z-index:1;padding:6px 11px;border-radius:999px;font-size:12px;font-weight:600;color:#fff;background:rgba(6,15,39,.45);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .pq-imersao-play{position:absolute;left:50%;top:50%;z-index:1;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;display:grid;place-items:center;color:#0B1530;background:rgba(255,255,255,.92);box-shadow:0 10px 30px -10px rgba(0,0,0,.6);transition:transform .35s var(--v3-ease)}
  .pq-imersao-play svg{width:22px;height:22px;margin-left:3px}
  #porque .pq-card[data-g="4"]:hover .pq-imersao-play{transform:scale(1.06)}

  /* V37: o card Tecnologia do ecossistema mostra o Hub de verdade
     (reuniao de 10/09: interface do sistema, nao icones voando). A
     janela e a mesma tela viva do card do case, espiando pela base. */
  .eco-tech .eco-art.eco-mock{height:265px;left:32px;width:auto;right:-36px;bottom:-2px;pointer-events:none}
  .eco-tech .eco-win{position:relative;width:100%;height:100%;border-radius:16px 0 0 0;overflow:hidden;background:#fff;border:1px solid rgba(255,255,255,.22);border-right:0;border-bottom:0;box-shadow:0 0 0 10px rgba(120,170,255,.08),0 0 0 11px rgba(255,255,255,.06),0 -20px 60px -20px rgba(57,114,253,.45),0 30px 60px -30px rgba(0,0,0,.7)}
  .eco-tech .eco-win img{position:absolute;left:-40px;top:-36px;width:760px;height:auto;max-width:none;display:block}
  @media(max-width:760px){.eco-tech .eco-art.eco-mock{height:256px;left:20px;right:-24px}}

  /* V38: Servicos com a foto do time no recorte da referencia (10/09):
     a foto sobe pela base do card e envolve o botao com um entalhe de
     cantos redondos. A cor do card fica; a foto ganha um veu teal. */
  .eco-service .eco-art.eco-foto{height:350px;background:none;overflow:hidden;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 375 350' preserveAspectRatio='none'%3E%3Cpath d='M294 0 H353 Q375 0 375 22 V350 H0 V108 Q0 86 22 86 H250 A22 22 0 0 0 272 64 V22 Q272 0 294 0 Z' fill='black'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 375 350' preserveAspectRatio='none'%3E%3Cpath d='M294 0 H353 Q375 0 375 22 V350 H0 V108 Q0 86 22 86 H250 A22 22 0 0 0 272 64 V22 Q272 0 294 0 Z' fill='black'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
  .eco-service .eco-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 45%}
  .eco-service .eco-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,45,54,.42),rgba(9,45,54,.08) 50%,rgba(9,45,54,.30));pointer-events:none}
  @media(max-width:760px){.eco-service .eco-art.eco-foto{height:313px}}

  /* V39: o card escuro passa a falar do diferencial da Marvee (nao da
     imersao): tecnologia, gente e formacao do mesmo fornecedor. Foto do
     time inteiro, com degrade para o navy do card. */
  #porque .pq-card .pq-time{position:relative;max-width:640px;margin:24px auto -36px;border-radius:14px 14px 0 0;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.10),0 30px 60px -30px rgba(0,0,0,.6)}
  #porque .pq-card .pq-time img{display:block;width:100%;height:250px;object-fit:cover;object-position:center 42%;border-radius:0;box-shadow:none}
  #porque .pq-card .pq-time::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,15,39,.15) 0%,rgba(6,15,39,0) 35%,rgba(6,15,39,.55) 100%);pointer-events:none}
  /* o paragrafo do card grande volta a quebrar linha (a regra antiga o
     travava em uma linha so, e o texto novo e mais longo) */
  @media(min-width:1001px){#porque .pq-card[data-g="1"] > p{white-space:normal;max-width:68ch}}

  /* V40: Educacao como arcos concentricos (referencia da autora): os
     produtos de educacao e retratos da rede apoiados nos arcos, com um
     balanco lento por anel. Sem linhas ligando pontos. */
  .eco-education .eco-orbit svg{overflow:visible}
  .eco-arc-g{transform-box:view-box;transform-origin:180px 246px;animation:eco-arc-sway var(--dur,14s) ease-in-out infinite alternate;animation-direction:var(--dir,alternate)}
  @keyframes eco-arc-sway{from{transform:rotate(-1.2deg)}to{transform:rotate(1.2deg)}}
  .eco-chip{filter:drop-shadow(0 4px 8px #6483b32e);animation:eco-portrait-float 6s ease-in-out infinite;animation-delay:var(--delay)}
  .eco-chip text{font-family:inherit}
  @media(prefers-reduced-motion:reduce){.eco-arc-g,.eco-chip{animation:none}}

  /* V41: menos vao acima de "O ecossistema" e o subtitulo em duas linhas
     (pedido da autora). */
  #empresa{padding-block:clamp(48px,5.5vw,80px) clamp(56px,6vw,88px)}
  #empresa.eco-editorial .mv-lede{max-width:860px;text-wrap:balance}

  /* V42: a cena da Educacao no mesmo limite das outras duas ilustracoes
     (comeca na altura da janela do Hub e da foto, vai ate a base). */
  .eco-education .eco-orbit{height:265px;bottom:0;mask-image:linear-gradient(transparent,#000 6%);-webkit-mask-image:linear-gradient(transparent,#000 6%)}
  @media(max-width:760px){.eco-education .eco-orbit{height:256px}}

  /* V43: inversao pedida pela autora: quem fala do Hub e escuro (o card
     grande, com a tela), e o card do diferencial da casa vira um azul
     intermediario de destaque. Textura de pontos e brilho nos dois,
     como nas referencias. */
  #porque .pq-card[data-g="1"]{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Ccircle cx='1.5' cy='1.5' r='1.1' fill='%23ffffff' fill-opacity='.16'/%3E%3C/svg%3E"),radial-gradient(70% 60% at 85% 0%,rgba(57,114,253,.42),transparent 60%),radial-gradient(50% 45% at 10% 100%,rgba(91,192,190,.18),transparent 60%),linear-gradient(165deg,#0F1D40 0%,#081431 55%,#060F27 100%);border-color:rgba(255,255,255,.06);box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 30px 70px -40px rgba(4,10,40,.8)}
  #porque .pq-card[data-g="1"] .pq-wash{background:radial-gradient(60% 50% at 50% 100%,rgba(57,114,253,.28),transparent 70%);opacity:1}
  #porque .pq-card[data-g="1"] h3{color:#fff}
  #porque .pq-card[data-g="1"] > p{color:#B7C6E0}
  #porque .pq-card[data-g="1"] .pq-ir{background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  #porque .pq-card[data-g="1"]:hover .pq-ir{background:rgba(255,255,255,.18)}
  #porque .pq-card[data-g="1"] .pq-hub-story{border-radius:16px 16px 0 0;box-shadow:0 0 0 1px rgba(255,255,255,.22),0 0 0 10px rgba(120,170,255,.08),0 0 0 11px rgba(255,255,255,.06),0 -20px 60px -20px rgba(57,114,253,.45),0 30px 60px -30px rgba(0,0,0,.7)}
  #porque .pq-card[data-g="4"]{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Ccircle cx='1.5' cy='1.5' r='1.1' fill='%23ffffff' fill-opacity='.16'/%3E%3C/svg%3E"),radial-gradient(60% 50% at 15% 0%,rgba(255,255,255,.20),transparent 55%),radial-gradient(50% 45% at 90% 100%,rgba(163,100,255,.35),transparent 60%),linear-gradient(160deg,#4C86FF 0%,#3169EC 55%,#2456D6 100%);border-color:rgba(255,255,255,.12);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 30px 70px -40px rgba(36,86,214,.7)}
  #porque .pq-card[data-g="4"] .pq-wash{background:none}
  #porque .pq-card[data-g="4"] h3{color:#fff}
  #porque .pq-card[data-g="4"] p{color:rgba(255,255,255,.86)}
  #porque .pq-card[data-g="4"] .pq-ir{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
  #porque .pq-card[data-g="4"]:hover .pq-ir{background:rgba(255,255,255,.26)}
  #porque .pq-card .pq-time{box-shadow:0 0 0 1px rgba(255,255,255,.22),0 0 0 8px rgba(255,255,255,.08),0 30px 60px -30px rgba(0,20,80,.6)}
  #porque .pq-card .pq-time::after{background:linear-gradient(180deg,rgba(36,86,214,.10) 0%,rgba(36,86,214,0) 35%,rgba(36,86,214,.62) 100%)}

  /* V44: o card do Hub no bento igual a caixa da dobra Tecnologia: o
     mesmo navy suave, sem pontos, e a janela com o mesmo aro de vidro
     (pedido da autora: suavizar as cores do Hub). */
  #porque .pq-card[data-g="1"]{background:linear-gradient(145deg,#04081F 0%,#09132E 100%);border-color:rgba(255,255,255,.06);box-shadow:0 30px 70px -40px rgba(4,10,40,.8)}
  #porque .pq-card[data-g="1"] .pq-wash{background:radial-gradient(ellipse 38% 32% at 100% 100%,rgba(43,75,164,.22),transparent 100%),radial-gradient(ellipse at 100% 0,rgba(91,192,190,.10),transparent 58%);opacity:1}
  #porque .pq-card[data-g="1"] .pq-hub-story{position:relative;overflow:visible;border-radius:16px 16px 0 0;background:#FBFCFF;border:1px solid rgba(255,255,255,.16);border-bottom:0;box-shadow:0 46px 90px -28px rgba(0,0,0,.92),0 16px 38px -16px rgba(0,0,0,.72),0 0 160px -10px rgba(91,192,190,.32),inset 0 1px 0 rgba(255,255,255,.07)}
  #porque .pq-card[data-g="1"] .pq-hub-story::before{content:"";position:absolute;inset:-12px -12px 0;z-index:0;border-radius:26px 26px 0 0;pointer-events:none;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.13);border-bottom:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
  #porque .pq-card[data-g="1"] .pq-hub-story iframe{z-index:1;clip-path:inset(0 round 15px 15px 0 0)}
  @media(max-width:760px){#porque .pq-card[data-g="1"] .pq-hub-story::before{inset:-8px -8px 0;border-radius:20px 20px 0 0}}

  /* V45: ajustes da autora no bento. O Hub volta ao azul profundo com o
     glow no canto superior direito; os pontos ficam so nos cantos (nao
     no card inteiro); o card azul ganha respiro entre titulo, texto e
     foto. "Sua empresa no seu bolso" passa para o meio da fileira. */
  #porque .pq-card[data-g="1"]{background:radial-gradient(70% 60% at 100% 0%,rgba(57,114,253,.48),transparent 60%),linear-gradient(165deg,#0F1D40 0%,#081431 55%,#060F27 100%)}
  #porque .pq-card[data-g="1"] .pq-wash,#porque .pq-card[data-g="4"] .pq-wash{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Ccircle cx='1.5' cy='1.5' r='1.1' fill='%23ffffff' fill-opacity='.22'/%3E%3C/svg%3E");opacity:1;-webkit-mask-image:radial-gradient(circle at 100% 0%,#000 0,transparent 42%),radial-gradient(circle at 0% 100%,#000 0,transparent 36%);mask-image:radial-gradient(circle at 100% 0%,#000 0,transparent 42%),radial-gradient(circle at 0% 100%,#000 0,transparent 36%)}
  #porque .pq-card[data-g="4"]{padding:34px 32px 0;background:radial-gradient(60% 50% at 100% 0%,rgba(255,255,255,.22),transparent 55%),radial-gradient(50% 45% at 0% 100%,rgba(163,100,255,.35),transparent 60%),linear-gradient(160deg,#4C86FF 0%,#3169EC 55%,#2456D6 100%)}
  #porque .pq-card[data-g="4"] h3{margin-bottom:4px}
  #porque .pq-card[data-g="4"] p{margin-top:12px;line-height:1.7;max-width:34ch}
  #porque .pq-card[data-g="4"] .pq-time{margin-top:34px}
  @media(max-width:760px){#porque .pq-card[data-g="4"]{padding:26px 24px 0}#porque .pq-card[data-g="4"] p{max-width:none}}

  /* Bento: navy para o Hub, teal para a rede e superfícies claras de respiro. */
  #porque .pq-bento{gap:22px}
  #porque .pq-card{isolation:isolate;border-radius:28px;box-shadow:0 12px 36px -28px #183a4c45}
  #porque .pq-card h3{letter-spacing:-.035em;line-height:1.18}
  #porque .pq-card > p{line-height:1.65}
  #porque .pq-card[data-g="1"]{background:radial-gradient(ellipse at 85% 90%,#244d884d,transparent 65%),linear-gradient(145deg,#101e3b,#070e23);border-color:#9cbeff29}
  #porque .pq-card[data-g="1"] h3,#porque .pq-card[data-g="5"] h3{color:#f6faff}
  #porque .pq-card[data-g="1"] > p{color:#bfcee5}
  #porque .pq-card[data-g="1"] .pq-hub-story{box-shadow:0 26px 65px -22px #020717a6,0 0 70px -28px #4384eb80}
  #porque .pq-card[data-g="2"] .pq-wash{background:none}
  #porque .pq-card[data-g="2"] .marvin-network{background:transparent;overflow:visible}
  #porque .pq-card[data-g="2"] .mn-core > rect:first-child{fill:#91baff18;stroke:#bfdaff66}
  #porque .pq-card[data-g="2"] .mn-core{filter:drop-shadow(0 10px 22px #02091f80)}
  #porque .pq-card[data-g="2"] .mn-node{filter:drop-shadow(0 8px 14px #02091f66)}
  #porque .pq-card[data-g="2"] .marvin-network svg > g[stroke="#b7cff9"]{stroke:#6f9eda;opacity:.4}
  #porque .pq-card[data-g="5"] .pq-ir{background:#ffffff12;border:1px solid #ffffff30;color:#e4f5ff;backdrop-filter:blur(12px)}
  #porque .pq-card[data-g="3"]{background:radial-gradient(ellipse at 90% 100%,#dae6f7,transparent 70%),#f6f8fb;border-color:#dde4ed}
  #porque .pq-card[data-g="3"] .pq-wash{background:none}
  #porque .pq-card .pq-zap{transform:rotate(-3deg);margin-top:30px;border:1px solid #fff;border-radius:26px 26px 0 0;padding:7px;background:#ffffff70;box-shadow:0 20px 40px -20px #243b6655,0 0 0 6px #ffffff50}
  #porque .pq-zap-tela{border-radius:20px 20px 0 0;overflow:hidden}
  #porque .pq-zap-top{background:#10213e;padding:14px;color:white}
  #porque .pq-zap-quem b{color:white}#porque .pq-zap-quem small{color:#b6c9e6}
  #porque .pq-zap-b--u{background:#dce8fa}
  #porque .pq-zap-b--m:last-child{box-shadow:0 7px 18px -10px #40776b66;border-color:#b8dcd5}
  #porque .pq-card[data-g="4"]{background:radial-gradient(ellipse at 0 100%,#c7e6e4,transparent 65%),linear-gradient(145deg,#f4faf8,#e5f2ef);border-color:#d5e5e1;box-shadow:0 12px 36px -28px #183a4c45}
  #porque .pq-card[data-g="4"] h3{color:#123b3d}
  #porque .pq-card[data-g="4"] > p{color:#526d71}
  #porque .pq-card[data-g="4"] .pq-wash{opacity:.15}
  #porque .pq-card[data-g="4"] .pq-ir{background:#ffffff85;color:#236969;border-color:#ffffff;box-shadow:none}
  #porque .pq-card[data-g="4"] .pq-time{transform:rotate(-3deg);margin-top:34px;border:5px solid #ffffff9c;border-radius:20px 20px 0 0;box-shadow:0 20px 45px -25px #215d6170}
  #porque .pq-card[data-g="4"] .pq-time::after{background:linear-gradient(transparent 45%,#113e4980)}
  #porque .pq-card[data-g="4"] .pq-imersao-tag{background:#ffffffd6;color:#15484b;border:1px solid white;backdrop-filter:blur(12px)}
  #porque .pq-card[data-g="5"]{background:radial-gradient(ellipse at 65% 80%,#3b93915c,transparent 65%),linear-gradient(150deg,#154749,#0b3035);border-color:#43858166}
  #porque .pq-card[data-g="5"] > p{color:#bbdbd8}
  #porque .pq-card[data-g="5"] .pq-wash{background:radial-gradient(#a3e3da24 .8px,transparent 1px);background-size:14px 14px;mask-image:linear-gradient(transparent 25%,#000);opacity:.6}
  #porque .pq-team-link{stroke:#86c8c0;stroke-width:1.15;stroke-dasharray:3 6;opacity:.7}
  #porque .pq-team-link:nth-of-type(3n){stroke:#b4efe5}
  #porque .pq-team svg > circle{fill:#b3e8df22;stroke:#b4ece3;stroke-width:1.3;filter:drop-shadow(0 5px 8px #06252b88)}
  #porque .pq-team{position:relative}
  @media(max-width:760px){#porque .pq-bento{gap:18px}#porque .pq-card{border-radius:24px}#porque .pq-card .pq-zap{transform:rotate(-2deg)}#porque .pq-card[data-g="4"] .pq-time{transform:none}}

  /* Serviços com proporção mais alta, inspirada no Markets Overview. */
  #servicos .sv-slide{height:clamp(500px,56svh,620px);border-radius:28px}
  #servicos .sv-copy{padding:44px;gap:22px}
  #servicos .sv-copy b{font-size:clamp(30px,2.7vw,40px);line-height:1.12}
  #servicos .sv-description{max-width:34ch;line-height:1.65}
  #servicos .sv-bpo .sv-copy{padding:36px 44px;gap:20px}
  #servicos .sv-certificate .sv-copy{padding:30px 44px;gap:20px}
  @media(max-width:1000px) and (min-width:761px){#servicos .sv-copy,#servicos .sv-bpo .sv-copy,#servicos .sv-certificate .sv-copy{padding:30px}}
  @media(max-width:760px){
    #servicos .sv-slide{height:580px;border-radius:24px}
    #servicos .sv-copy,#servicos .sv-bpo .sv-copy,#servicos .sv-certificate .sv-copy{padding:26px 24px;gap:16px}
    #servicos .sv-copy b{font-size:28px}
    #servicos .sv-bpo .sv-copy{height:53%}
    #servicos .sv-description{font-size:15px;line-height:1.6}
  }

  /* Mantém a geometria original, com a área gráfica reservada e vazia. */
  #porque .pq-card .pq-mock,#porque .pq-card .marvin-network{visibility:hidden!important;pointer-events:none}
  .s2h-nav.nav-reading-hidden{opacity:0!important;visibility:hidden!important;pointer-events:none!important}

  /* V46: BPO sem a foto por enquanto (pedido da autora, 11/09): fica so
     o fundo navy do card ate vir a foto do time da contabilidade. */
  #servicos .sv-bpo .sv-media{display:none}
  #servicos .sv-bpo{background:radial-gradient(60% 50% at 100% 0%,rgba(57,114,253,.28),transparent 60%),linear-gradient(160deg,#122642 0%,#1b3150 55%,#22406a 100%)}

  /* Traders Hub: aplicação estrutural, preservando identidade e espaços reservados. */
  #empresa .mv-cab,#porque .why-head{margin-bottom:48px}
  #empresa .mv-cab h2,#porque .why-head .h2{font-size:clamp(34px,3.6vw,52px);line-height:1.12;letter-spacing:-.045em}
  /* no celular o título do ecossistema fecha em três linhas (pedido da autora, 16/09) */
  @media(max-width:760px){#empresa.eco-editorial .mv-cab h2{font-size:min(7.6vw,34px)}}
  #empresa .eco-grid{gap:20px}
  #empresa .eco-tile{border-radius:24px;min-height:640px;box-shadow:inset 0 1px 0 #ffffff30,0 18px 40px -32px #18394c50}
  #empresa .eco-content{padding:34px 30px}
  #empresa .eco-label{display:block;padding-bottom:20px;margin-bottom:26px;border-bottom:1px solid #ffffff24;font-size:13px;letter-spacing:.07em;text-transform:uppercase}
  #empresa .eco-education .eco-label{border-color:#234f7c20}
  #empresa .eco-content h3{font-size:clamp(27px,2.3vw,34px);line-height:1.12;letter-spacing:-.04em;margin-bottom:22px}
  #empresa .eco-content p{padding:0;margin-bottom:22px;border:0;border-radius:0;background:none;font-size:15px;line-height:1.6;backdrop-filter:none;box-shadow:none}
  #empresa .eco-education .eco-content p{background:none;border:0;color:#405976}
  #empresa .eco-service{background:radial-gradient(ellipse at 90% 0,#498f8466,transparent 60%),linear-gradient(160deg,#143e3c,#092c30)}
  #empresa .eco-tech{background:radial-gradient(ellipse at 90% 0,#24477966,transparent 65%),linear-gradient(160deg,#0d1b38,#071128)}
  #empresa .eco-action{min-height:44px;padding:12px 19px;font-size:13px}

  /* Institutional: superfícies foscas, hierarquia regular e cores equilibradas. */
  #porque{background:#f7f9f8}
  #porque .pq-bento{gap:20px}
  #porque .pq-card{border-radius:24px;box-shadow:0 1px 0 #ffffff40 inset;transition:transform .25s ease,box-shadow .25s ease}
  #porque .pq-card:hover{transform:translateY(-4px);box-shadow:0 18px 34px -24px #163e4c66}
  #porque .pq-card[data-g="2"],#porque .pq-card[data-g="3"]{background:#edf1f5;border-color:#e1e6ed}
  #porque .pq-card[data-g="4"]{background:linear-gradient(150deg,#e9f1ed,#dcebe5);border-color:#d7e4dc}
  #porque .pq-card[data-g="5"]{background:radial-gradient(ellipse at 100% 0,#528b7750,transparent 60%),#123e3d}
  #porque .pq-card .pq-ir{width:44px;height:44px}

  /* sem o fio no topo (pedido da autora, 18/09): a esteira de fotos logo acima ja separa as dobras */
  #avaliacoes .stories-header-row{padding-top:0;border-top:0}
  #avaliacoes .story-panel{border-radius:24px;border-color:#dbe5e2;background:linear-gradient(135deg,#f2f6f3,#fff);box-shadow:0 16px 36px -32px #183b3555}
  @media(max-width:760px){
    #empresa .eco-content{padding:28px 24px}#empresa .eco-tile{min-height:720px}
    #empresa .eco-label{margin-bottom:22px;padding-bottom:16px}
    #empresa .eco-content h3{font-size:30px}
  }
  /* "Apps conectados." inteiro na primeira linha até 320px. */
  @media(max-width:360px){#empresa .eco-content h3{font-size:28px}}

  /* Vertentes: reservar a área gráfica no fluxo, sempre abaixo do CTA. */
  #empresa .eco-tile{display:flex;flex-direction:column}
  #empresa .eco-content{flex:none}
  #empresa .eco-service .eco-art,#empresa .eco-education .eco-art{position:relative;flex:none;margin-top:auto;bottom:auto;left:0;right:auto;width:100%;transform:none}
  #empresa .eco-service .eco-art{height:313px}
  #empresa .eco-education .eco-art{height:300px}

  /* Contato: faixa teal com transição recortada para o rodapé. */
  #contato.ct-v2{position:relative;isolation:isolate;overflow:hidden;padding:88px 40px 150px;background:var(--mv-teal-gradient);color:#fff}
  /* a seção final numa box, como a de Educação (pedido da autora, 16/09) */
  #contato.ct-v2{margin-inline:clamp(18px,3vw,44px);margin-bottom:clamp(18px,3vw,44px);border-radius:32px;overflow:clip;padding-bottom:88px}
  /* a box preenche a altura da tela, com o conteúdo centrado (pedido da autora, 16/09) */
  #contato.ct-v2{display:flex;align-items:center;min-height:calc(100svh - clamp(18px,3vw,44px) * 2);box-sizing:border-box}
  #contato.ct-v2>.wrap{width:100%}
  /* sem o .ct-cutout no HTML, o rodapé volta ao acabamento próprio (topo arredondado do componente) */
  @media(max-width:760px){#contato.ct-v2{border-radius:24px}}
  /* Fecho da página: o mesmo degradê da hero, espelhado. Azul claro encostado no rodapé, clareando ao subir pela moldura do contato até o branco dos depoimentos (pedido da autora, 16/09). */
  .ct-fim{background:linear-gradient(180deg,var(--v3-bg) 0%,#edf3f5 6%,#dfebf1 18%,#dce9ef 52%,#d9e6eb 100%);padding:0 clamp(18px,3vw,44px) clamp(18px,3vw,44px)}
  .ct-fim #contato.ct-v2{margin:0}
  #contato.ct-v2>.wrap{max-width:1280px;position:relative;z-index:1}
  #contato.ct-v2 .ct-card{grid-template-columns:1fr 1fr;align-items:center;gap:clamp(40px,6vw,96px);background:none;border-radius:0;overflow:visible;box-shadow:none}
  #contato.ct-v2 .ct-esq{padding:0;min-height:500px;background:none;color:#fff;justify-content:center;gap:36px}
  #contato.ct-v2 .ct-esq::after{display:none}
  #contato.ct-v2 .ct-logo img{height:48px}
  #contato.ct-v2 .ct-esq .h2{font-size:clamp(38px,4.3vw,64px);font-weight:400;line-height:1.08;max-width:15ch;color:#fff;letter-spacing:-.04em}
  #contato.ct-v2 .mv-pill,#contato.ct-v2 .mv-pill svg{color:#d4eee6}
  #contato.ct-v2 .ct-prova{color:#e1eee9;max-width:390px;line-height:1.5}
  #contato.ct-v2 .ct-dir{position:relative;padding:32px;border:1px solid #e9fff15c;border-radius:24px;background:linear-gradient(140deg,color-mix(in srgb,var(--mv-teal-paper) 91%,transparent),color-mix(in srgb,var(--mv-teal-paper) 81%,transparent));backdrop-filter:blur(24px);box-shadow:inset 0 1px 0 #fff9,0 24px 60px -35px #08282099}
  #contato.ct-v2 .cform input,#contato.ct-v2 .cform select,#contato.ct-v2 .cform textarea{background-color:#ffffffae;border-color:#90aea466}
  #contato .ct-cutout{position:absolute;bottom:-1px;left:0;width:100%;height:48px;z-index:0;pointer-events:none;background:var(--bg,#04081F);border-radius:48px 48px 0 0}
  @media(max-width:760px){
    #contato.ct-v2{padding:56px 20px 100px}
    #contato.ct-v2 .ct-card{grid-template-columns:1fr;gap:36px}
    #contato.ct-v2 .ct-esq{min-height:0;gap:28px}
    #contato.ct-v2 .ct-esq .h2{font-size:38px}
    #contato.ct-v2 .ct-dir{padding:24px 20px}
    #contato .ct-cutout{height:28px;border-radius:28px 28px 0 0}
  }
  /* BPO: conteúdo diretamente no fundo, sem painel interno. */
  #servicos .sv-bpo .sv-copy{background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  #servicos .sv-bpo .sv-copy::before{display:none}
  /* Vertentes compactas: o recorte acompanha a área do botão. */
  #empresa .eco-tile{min-height:600px}
  #empresa .eco-content{padding-bottom:24px}
  #empresa .eco-service .eco-art.eco-foto{height:250px;margin-top:-74px;flex:1;min-height:250px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 375 250' preserveAspectRatio='none'%3E%3Cpath d='M320 0H375V250H0V100Q0 80 20 80H280Q300 80 300 60V20Q300 0 320 0Z' fill='black'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 375 250' preserveAspectRatio='none'%3E%3Cpath d='M320 0H375V250H0V100Q0 80 20 80H280Q300 80 300 60V20Q300 0 320 0Z' fill='black'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
  #empresa .eco-education .eco-art{height:220px}
  @media(max-width:760px){#empresa .eco-tile{min-height:600px}}
  #porque .why-head .h2,#porque .why-head .h2 .t2{font-weight:400}
  #servicos .sv-service-icon{position:absolute;z-index:4;top:24px;left:30px;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#eaffff30;border:1px solid #ffffff55;color:#e4ffff;box-shadow:inset 0 1px 0 #ffffff50;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);pointer-events:none}
  #servicos .sv-service-icon svg{width:26px;height:26px}
  /* Paleta reutilizável de Serviços — origem: Contabilidade Consultiva. */
  :root{
    --mv-brand-teal:#5BC0BE;
    --mv-teal-dark:color-mix(in srgb,var(--mv-brand-teal) 30%,#000);
    --mv-teal-mid:color-mix(in srgb,var(--mv-brand-teal) 55%,#000);
    --mv-teal-light:color-mix(in srgb,var(--mv-brand-teal) 65%,#fff);
    --mv-teal-paper:color-mix(in srgb,var(--mv-brand-teal) 10%,#fff);
    --mv-services-base:color-mix(in srgb,var(--mv-brand-teal) 24%,#000);
    --mv-services-end:color-mix(in srgb,var(--mv-brand-teal) 36%,#000);
    --mv-services-glow:color-mix(in srgb,var(--mv-brand-teal) 20%,transparent);
    --mv-teal-gradient:linear-gradient(175deg,var(--mv-teal-dark) 0%,var(--mv-teal-mid) 42%,var(--mv-teal-light) 100%);
    --mv-services-surface:var(--mv-teal-gradient);
    --mv-services-border:color-mix(in srgb,var(--mv-brand-teal) 28%,transparent);
    --mv-services-text:color-mix(in srgb,var(--mv-brand-teal) 4%,#fff);
    --mv-services-muted:color-mix(in srgb,var(--mv-brand-teal) 25%,#fff);
  }
  #servicos .sv-slide:has(.sv-accounting),#empresa .eco-service,#porque .pq-card[data-g="5"]{background:var(--mv-services-surface);border-color:var(--mv-services-border);color:var(--mv-services-text)}
  /* Fundo único sob o conteúdo e o recorte: sem emenda na base do botão. */
  #empresa .eco-service{background:linear-gradient(175deg,var(--mv-teal-dark) 0%,var(--mv-teal-mid) 28%,var(--mv-teal-light) 70%)}
  #empresa .eco-service::before{content:none}
  #empresa .eco-service .eco-content{background:transparent}
  /* Pílula sólida e clara como a da Tecnologia: o vidro translúcido sobre o teal deixava o texto sem contraste. */
  #empresa .eco-service .eco-action{background:var(--mv-services-text);color:#10243b;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
  #empresa .eco-service h3,#porque .pq-card[data-g="5"] h3{color:var(--mv-services-text)}
  #empresa .eco-service .eco-content p,#porque .pq-card[data-g="5"] > p{color:var(--mv-services-muted);opacity:1}
  /* Educação na mesma moldura arredondada da seção Tecnologia. */
  #educacao.ed-sec{margin-inline:clamp(18px,3vw,44px);border-radius:32px;overflow:clip}
  @media(max-width:760px){#educacao.ed-sec{border-radius:24px}}
  #contato.ct-v2 .ct-dir{border-color:color-mix(in srgb,var(--mv-teal-paper) 36%,transparent)}
  #contato.ct-v2 .mv-pill,#contato.ct-v2 .mv-pill svg,#contato.ct-v2 .ct-prova{color:var(--mv-teal-paper)}
  #contato.ct-v2 .cform input,#contato.ct-v2 .cform select,#contato.ct-v2 .cform textarea{border-color:color-mix(in srgb,var(--mv-brand-teal) 35%,transparent)}
  #porque .pq-card[data-g="4"]{background:linear-gradient(150deg,color-mix(in srgb,var(--mv-brand-teal) 8%,#fff),color-mix(in srgb,var(--mv-brand-teal) 16%,#fff));border-color:color-mix(in srgb,var(--mv-brand-teal) 22%,#fff)}
  /* Dissolução suave nos limites da leitura de Tecnologia. */
  #tecnologia .hs-edge{position:fixed;left:0;right:0;height:clamp(40px,8vh,88px);z-index:8;pointer-events:none;opacity:0;transition:opacity .25s;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);background:#07102720}
  #tecnologia .hs-edge--top{top:0;mask-image:linear-gradient(#000,transparent);-webkit-mask-image:linear-gradient(#000,transparent)}
  #tecnologia .hs-edge--bottom{bottom:0;mask-image:linear-gradient(transparent,#000);-webkit-mask-image:linear-gradient(transparent,#000)}
  #tecnologia .hs-edge.is-visible{opacity:1}

  /* V47: link da Politica de Privacidade na base do rodape (pagina do
     PR #403, /politica-de-privacidade). */
  footer .foot-base a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.28);transition:color .18s,text-decoration-color .18s}
  footer .foot-base a:hover{color:#fff;text-decoration-color:#fff}
  footer .foot-base a:focus-visible{outline:2px solid #5BC0BE;outline-offset:3px;border-radius:2px}
  #empresa .eco-education .eco-art{margin-bottom:28px;overflow:visible;mask-image:none;-webkit-mask-image:none}
  #tecnologia .hs-block-h{display:flex;align-items:center;gap:16px}
  #tecnologia .hs-block-ic{width:48px;height:48px;border-radius:14px;background:radial-gradient(125% 120% at 50% -12%,rgba(var(--icon-accent),.30),rgba(var(--icon-accent),.04) 60%,#0b1022);border:1px solid rgba(var(--icon-accent),.32);box-shadow:inset 0 1px 0 #ffffff20,0 8px 20px -10px rgba(var(--icon-accent),.45)}
  #tecnologia .hs-block-ic img{width:32px;height:32px;object-fit:contain}
  #tecnologia .hs-block-h h3{margin:0}
  /* BPO: azul profundo com glow e pontilhado que se dissolve. */
  #servicos .sv-bpo{background:radial-gradient(ellipse at 95% 18%,#3972fd99 0%,#285cbb45 38%,transparent 72%),linear-gradient(135deg,#07132b 0%,#122b50 55%,#244d83 100%)}
  #servicos .sv-bpo::after{content:"";display:block;position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle,#b6d3ff55 .8px,transparent 1.2px);background-size:12px 12px;mask-image:linear-gradient(110deg,transparent 20%,#000 80%);-webkit-mask-image:linear-gradient(110deg,transparent 20%,#000 80%)}
  @media(min-width:761px){
    #empresa .eco-content{display:flex;flex-direction:column;min-height:var(--eco-content-height,0px);box-sizing:border-box}
    #empresa .eco-action{align-self:flex-start;margin-top:auto;height:44px;min-height:44px;box-sizing:border-box}
  }
  #tecnologia .hs-block-h{flex-direction:column;align-items:flex-start;gap:18px}
  #tecnologia .hs-topic-icons{display:flex;align-items:center;gap:8px}
  #tecnologia .hs-topic-more{display:grid;place-items:center;width:36px;height:36px;margin-left:4px;border-radius:50%;border:1px solid #ffffff30;background:#ffffff0d;color:#dce7ff;font-size:24px;line-height:1;font-weight:400}
  /* Mesma granulação neutra da hero; gradiente azul preservado. */
  #servicos .sv-bpo::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.4' intercept='-0.7'/%3E%3CfeFuncG type='linear' slope='2.4' intercept='-0.7'/%3E%3CfeFuncB type='linear' slope='2.4' intercept='-0.7'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.4' intercept='-0.7'/%3E%3CfeFuncG type='linear' slope='2.4' intercept='-0.7'/%3E%3CfeFuncB type='linear' slope='2.4' intercept='-0.7'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size:120px 120px,240px 240px;opacity:.11;mix-blend-mode:overlay}
  #servicos .sv-chart-art{width:100%;max-width:480px;left:-3%}
  #servicos .sv-chart-flow{stroke-dasharray:8 92;animation:sv-flow 4s linear infinite;filter:drop-shadow(0 0 5px #c5fff0)}
  #servicos .sv-accounting .sv-float{animation-duration:4.8s}
  #servicos .sv-chart-art circle:last-child{transform-box:fill-box;transform-origin:center;animation:sv-point-pulse 2.6s ease-in-out infinite}
  @keyframes sv-flow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
  @keyframes sv-point-pulse{50%{transform:scale(1.35);filter:drop-shadow(0 0 6px #b2ffe3)}}
  @media(max-width:760px){#servicos .sv-chart-art{width:90%;max-width:310px;left:0}}
  @media(prefers-reduced-motion:reduce){#servicos .sv-chart-flow,#servicos .sv-accounting .sv-float,#servicos .sv-chart-art circle:last-child{animation:none}#servicos .sv-chart-flow{display:none}}
  /* Apps em camadas de vidro, com o primeiro ícone em primeiro plano. */
  #tecnologia .hs-topic-icons{gap:0;isolation:isolate;padding-block:5px}
  #tecnologia .hs-topic-icons .hs-block-ic{position:relative;background:linear-gradient(145deg,rgba(var(--icon-accent),.22),#ffffff08 65%,#07112745);border-color:rgba(var(--icon-accent),.38);backdrop-filter:blur(12px) saturate(130%);-webkit-backdrop-filter:blur(12px) saturate(130%);box-shadow:inset 0 1px 1px #ffffff40,0 8px 18px #02061766}
  #tecnologia .hs-topic-icons .hs-block-ic:nth-child(1){z-index:3;transform:none}
  #tecnologia .hs-topic-icons .hs-block-ic:nth-child(2){z-index:2;margin-left:-13px;transform:none}
  #tecnologia .hs-topic-icons .hs-block-ic:nth-child(3){z-index:1;margin-left:-13px;transform:none}
  #tecnologia .hs-topic-more{margin-left:15px}
  #tecnologia .hs-topic-more{position:relative;z-index:4;margin-left:4px;transform:none;color:#d4d4d8;border-color:#ffffff30;background:linear-gradient(145deg,#ffffff18,#0a1328e8);box-shadow:inset 0 1px 0 #ffffff30,0 3px 12px #00000030;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-weight:600}
/* BPO: formas fluidas estáticas, na paleta azul existente, sem pontilhado. */
#servicos .sv-bpo::after{background:url('/site/bpo-fluid-static.svg') center/cover no-repeat;mask-image:none;-webkit-mask-image:none;opacity:1}
/* Recorte e rodapé compartilham o mesmo azul, sem faixa na transição. */
footer[data-nav-theme="dark"]{background:var(--bg,#04081F)}
/* Depoimentos: uma única dimensão compartilhada, definida pelo maior texto. */
#avaliacoes .stories-panels{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch}
#avaliacoes .stories-panels>.story-panel{grid-area:1 / 1;align-self:stretch;box-sizing:border-box;width:100%;height:100%;min-height:380px;align-items:stretch;animation:none}
#avaliacoes .stories-panels>.story-panel[hidden]{display:grid!important;visibility:hidden;pointer-events:none}
#avaliacoes .story-content{display:flex;flex-direction:column;align-self:stretch}
#avaliacoes .story-author{margin-top:auto}
@media(max-width:760px){#avaliacoes .stories-panels>.story-panel{min-height:380px}}
/* Avatares com separação vazada: o gradiente real aparece entre as fotos. */
#contato.ct-v2 .ct-avs img{border:0;background:transparent;box-shadow:none}
#contato.ct-v2 .ct-avs img:not(:last-child){mask-image:radial-gradient(circle 22px at calc(100% + 8px) 50%,transparent 98%,#000 100%);-webkit-mask-image:radial-gradient(circle 22px at calc(100% + 8px) 50%,transparent 98%,#000 100%)}
/* a prova do contato com as fotos dos empreendedores dos depoimentos (pedido da autora, 16/09) */
/* Os elementos acompanham a órbita sem flutuar para fora da linha. */
#empresa .eco-portrait,#empresa .eco-chip{animation:none}
  /* Preserva o tamanho dos cards; o cabeçalho sobe antes do percurso horizontal. */
  #servicos.sv-pinned{height:calc(var(--sv-stage-height,100svh) + var(--sv-travel))}
  #servicos.sv-pinned .sv-sticky{height:auto;min-height:100svh;top:var(--sv-pin-top,0px);justify-content:flex-start}
  #servicos.sv-pinned .sv-viewport{flex-shrink:0}
/* Ilustrações editoriais do bento; componentes adaptados do Hub, PR #48. */
#porque .pq-illustration{position:absolute;left:14px;right:14px;bottom:0;height:58%;z-index:1;pointer-events:none;display:flex;align-items:flex-end;justify-content:center}
#porque .pq-illustration img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 12px 25px #12354c0a);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
#porque .pq-card:hover .pq-illustration img{transform:translateY(-5px)}
#porque .pq-card[data-g="1"] .pq-illustration{left:24px;right:-20px;height:65%;bottom:-16px}
@media(max-width:760px){#porque .pq-illustration{height:54%}#porque .pq-card[data-g="1"] .pq-illustration{height:58%;left:8px;right:-50px}}
@media(prefers-reduced-motion:reduce){#porque .pq-illustration img{transition:none}#porque .pq-card:hover .pq-illustration img{transform:none}}
/* CRM maior, com recorte lateral de tela e conteúdo preservado acima. */
#porque .pq-card[data-g="1"] .pq-illustration{left:8px;right:-32px;height:80%;bottom:-40px}
#porque .pq-card[data-g="1"] .pq-illustration img{object-fit:cover;object-position:left top}
@media(max-width:760px){#porque .pq-card[data-g="1"] .pq-illustration{left:0;right:-100px;height:60%;bottom:-12px}}

/* Chat do Marvin: adaptação nativa da referência enviada, sem dependência de React. */
#porque .pq-chat-art{pointer-events:auto;left:20px;right:20px;bottom:30px;height:auto}
#porque .pq-card[data-g="2"]{min-height:520px}
.mv-chat-demo{display:flex;flex-direction:column;width:100%;height:340px;overflow:hidden;border:1px solid #40567870;border-radius:18px;background:linear-gradient(155deg,#152a46,#080f22);box-shadow:0 16px 32px #17395825;color:#eff6ff;font-size:11px}
.mv-chat-head{display:flex;align-items:center;gap:9px;padding:11px 12px;border-bottom:1px solid #ffffff12;flex-shrink:0}
#porque .pq-chat-art .mv-chat-head>img{width:28px;height:28px;flex:0 0 28px;transform:none;filter:none}.mv-chat-head b{font-size:12px;font-weight:600}.mv-chat-head small{display:block;color:#9bafc7;font-size:9px;margin-top:2px}
.mv-chat-replay{margin-left:auto;background:#ffffff0a;border:1px solid #ffffff14;border-radius:7px;padding:6px;color:#bdcee3;font:inherit;cursor:pointer;font-size:10px}.mv-chat-replay:hover{background:#ffffff18;color:#fff}.mv-chat-replay:focus-visible{outline:2px solid #5bc0be;outline-offset:2px}
.mv-chat-log{flex:1;min-height:0;overflow:hidden;padding:12px;display:flex;flex-direction:column;gap:9px;scrollbar-width:thin;scrollbar-color:#ffffff24 transparent}
.mv-chat-message{flex-shrink:0;max-width:88%;padding:9px 11px;line-height:1.5;border-radius:12px;animation:mv-chat-enter .35s ease both}
.mv-chat-message[data-sender="user"]{align-self:flex-end;background:linear-gradient(120deg,#275ecc,#347cf0);color:#fff;border-top-right-radius:4px;box-shadow:0 5px 15px #3972fd22}
.mv-chat-message[data-sender="assistant"]{align-self:flex-start;background:#ffffff0b;border:1px solid #b6dcff21;border-top-left-radius:4px;color:#dceaf8;backdrop-filter:blur(12px)}
.mv-chat-message[hidden],.mv-chat-typing[hidden]{display:none}
.mv-chat-typing{display:flex;gap:4px;align-self:flex-start;padding:12px;background:#ffffff0b;border-radius:12px;flex-shrink:0}.mv-chat-typing i{width:5px;height:5px;background:#5bc0be;border-radius:50%;animation:mv-chat-dot .8s ease-in-out infinite}.mv-chat-typing i:nth-child(2){animation-delay:.15s}.mv-chat-typing i:nth-child(3){animation-delay:.3s}
.mv-chat-composer{display:flex;justify-content:space-between;align-items:center;margin:0 10px 10px;padding:9px 10px;border:1px solid #ffffff16;border-radius:9px;color:#8da5bf;font-size:9px;flex-shrink:0;background:#ffffff04}.mv-chat-composer span:last-child{color:#5bc0be;font-size:13px}
@keyframes mv-chat-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes mv-chat-dot{50%{opacity:.4;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.mv-chat-message,.mv-chat-typing i{animation:none}}
/* Mockups como detalhes que sangram para dentro do recorte dos cards. */
#porque .pq-card[data-g="3"] .pq-illustration,#porque .pq-card[data-g="5"] .pq-illustration{left:18px;right:-44px;bottom:-48px;height:64%}
  /* o mock da Implantação maior (pedido da autora, 16/09): o card cresce junto pra não invadir o texto */
  #porque .pq-card[data-g="5"]{min-height:540px}
  #porque .pq-card[data-g="5"] .pq-illustration{left:4px;right:-40px;bottom:-44px;height:76%}
#porque .pq-card[data-g="3"] .pq-illustration img,#porque .pq-card[data-g="5"] .pq-illustration img{object-fit:contain;object-position:right top}
@media(max-width:760px){#porque .pq-card[data-g="3"] .pq-illustration,#porque .pq-card[data-g="5"] .pq-illustration{left:12px;right:-40px;bottom:-48px;height:61%}}
/* O chat também termina além da borda, integrado ao recorte do card. */

/* Conversas: maior e ancorado à esquerda, mantendo o recorte inferior. */
#porque .pq-card[data-g="3"] .pq-illustration{left:-12px;right:-20px;height:70%;bottom:-58px}
#porque .pq-card[data-g="3"] .pq-illustration img{object-position:left top}
@media(max-width:760px){#porque .pq-card[data-g="3"] .pq-illustration{left:-12px;right:-20px;height:67%;bottom:-58px}}
/* Implantação acompanha a escala e o alinhamento do mockup de conversas. */
#porque .pq-card[data-g="5"] .pq-illustration{left:-12px;right:-20px;height:70%;bottom:-58px}
#porque .pq-card[data-g="5"] .pq-illustration img{object-position:left top}
@media(max-width:760px){#porque .pq-card[data-g="5"] .pq-illustration{left:-12px;right:-20px;height:67%;bottom:-58px}}
/* Tela real do Marvin enviada como referência, recortada no card de tecnologia. */
#empresa .eco-tech .eco-marvin-screen{height:245px;left:22px;right:-30px;bottom:-24px;overflow:hidden;border-radius:16px 16px 0 0;border:1px solid #a7c8ff70;background:#f3f4f8;box-shadow:0 0 0 6px #a3c7ff0c,0 0 40px #3972fd26}
#empresa .eco-marvin-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center;max-width:none}
@media(max-width:760px){#empresa .eco-tech .eco-marvin-screen{height:225px;left:20px;right:-30px;bottom:-20px}}
/* Implantação centralizada no card, com a base ainda recortada. */
#porque .pq-card[data-g="5"] .pq-illustration{left:0;right:0}
#porque .pq-card[data-g="5"] .pq-illustration img{object-position:center top;transform:translateX(5.5%)}
#porque .pq-card[data-g="5"]:hover .pq-illustration img{transform:translate(5.5%,-5px)}
@media(prefers-reduced-motion:reduce){#porque .pq-card[data-g="5"]:hover .pq-illustration img{transform:translateX(5.5%)}}
/* Tela de conversas centralizada pela janela principal. */
#porque .pq-card[data-g="3"] .pq-illustration{left:0;right:0}
#porque .pq-card[data-g="3"] .pq-illustration img{object-position:center top;transform:translateX(-2.875%)}
#porque .pq-card[data-g="3"]:hover .pq-illustration img{transform:translate(-2.875%,-5px)}
@media(prefers-reduced-motion:reduce){#porque .pq-card[data-g="3"]:hover .pq-illustration img{transform:translateX(-2.875%)}}
/* Padrão dos cards (pedido da autora, 16/09): texto em cima, o mesmo
   respiro de 18px, e a ilustração em fluxo ocupando o resto do card. Nos
   cards do CRM, do WhatsApp e da Implantação a imagem cobre a largura e é
   recortada pelo fundo do card (o fim do box nunca aparece); nos outros
   ela cabe inteira. O chat do Marvin tem 340px fixos e respiro no pé. */
/* os mocks antigos (iframe do Hub, zap, foto, time) e a rede do Marvin foram substituídos pelas ilustrações; sem o !important a regra da versão anterior os devolvia ao fluxo */
#porque .pq-card .pq-mock,#porque .pq-card .pq-hub-story,#porque .pq-card .marvin-network{display:none!important}
#porque .pq-card[data-g] .pq-illustration{position:relative;inset:auto;left:0;right:0;top:auto;bottom:auto;flex:1 1 0;min-height:240px;height:auto;margin:18px 0 0;display:block;z-index:1;overflow:hidden}
#porque .pq-card[data-g] .pq-illustration>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center top;transform:none}
#porque .pq-card[data-g="1"] .pq-illustration,#porque .pq-card[data-g="3"] .pq-illustration,#porque .pq-card[data-g="5"] .pq-illustration{margin-inline:-6px -30px}
#porque .pq-card[data-g="1"] .pq-illustration>img,#porque .pq-card[data-g="3"] .pq-illustration>img,#porque .pq-card[data-g="5"] .pq-illustration>img{object-fit:cover;object-position:left top}
#porque .pq-card[data-g="3"] .pq-illustration>img,#porque .pq-card[data-g="5"] .pq-illustration>img{object-position:right top}
/* a Implantação: a imagem é mais alta que a caixa, então o fim do box branco e o chip do Brain ficam sob o recorte */
#porque .pq-card[data-g="5"] .pq-illustration>img{height:122%;object-position:left top}
#porque .pq-card[data-g="2"] .pq-chat-art{flex:none;min-height:0;height:auto;margin:18px 0 22px}
#porque .pq-card[data-g="2"]{min-height:0}
#porque .pq-card[data-g="5"]{min-height:0}
@media(min-width:761px){#porque .pq-card[data-g]{min-height:520px}}
#porque .pq-card[data-g="4"] .pq-illustration{margin-inline:0}
@media(max-width:760px){#porque .pq-card[data-g] .pq-illustration{min-height:200px}}
#porque .pq-card[data-g="3"] .pq-illustration>img,#porque .pq-card[data-g="5"] .pq-illustration>img{transform:none}
#porque .pq-card[data-g]:hover .pq-illustration>img{transform:translateY(-5px)}
#porque .pq-card[data-g="1"]:hover .pq-illustration>img,#porque .pq-card[data-g="3"]:hover .pq-illustration>img,#porque .pq-card[data-g="5"]:hover .pq-illustration>img{transform:none}
@media(prefers-reduced-motion:reduce){#porque .pq-card[data-g]:hover .pq-illustration>img{transform:none}}

/* Interface recomposta para o mockup: barra lateral inteira e conteúdo centralizado. */
#empresa .eco-tech .eco-marvin-screen{left:16px;right:16px;bottom:-18px;height:245px}
.eco-hub-window{height:100%;background:#f3f4f8;color:#1c2c50;font-family:Arial,sans-serif}
.eco-hub-top{height:28px;display:flex;align-items:center;gap:6px;padding:0 9px;background:#fff;border-bottom:1px solid #dfe3ec;font-size:9px}.eco-hub-top small{display:block;font-size:6px;color:#71809a}.eco-hub-mark{display:grid;place-items:center;width:17px;height:17px;background:#11233e;color:#5bc0be;border-radius:5px;font-weight:bold}.eco-hub-tools{margin-left:auto;color:#6c7c97}
.eco-hub-body{height:calc(100% - 28px);display:grid;grid-template-columns:82px minmax(0,1fr)}.eco-hub-side{background:#fff;border-right:1px solid #e4e8ef;padding:9px 5px;display:flex;flex-direction:column;gap:12px;font-size:6px;color:#546481}.eco-hub-side small{display:block;font-size:5px;color:#91a0b2;margin-top:3px}.eco-hub-new,.eco-hub-search{border:1px solid #e0e5ee;border-radius:10px;padding:5px 3px}.eco-hub-new{color:#1b2b49;font-weight:bold}.eco-hub-main{min-width:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;padding:12px 10px 22px}
#empresa .eco-marvin-screen .eco-hub-marvin{width:38px;height:30px;object-fit:contain;flex:none}.eco-hub-greeting{font-size:12px;letter-spacing:-.4px;text-align:center}.eco-hub-suggestions{display:flex;gap:4px;font-size:5px;color:#687890}.eco-hub-suggestions span{border:1px solid #d9dfea;border-radius:10px;padding:4px;white-space:nowrap}.eco-hub-input{width:100%;box-sizing:border-box;border:1px solid #e2e6ed;border-radius:10px;background:#fff;padding:10px;font-size:7px;color:#8b94a7}.eco-hub-input>div{display:flex;justify-content:space-between;margin-top:15px}.eco-hub-input>div span{color:#385275}.eco-hub-shortcuts{display:flex;gap:4px;width:100%}.eco-hub-shortcuts>span{flex:1;min-width:0;padding:7px 4px;border:1px solid #dbe1eb;background:#fff;border-radius:9px}.eco-hub-shortcuts b{display:block;font-size:5px;margin-top:4px;white-space:nowrap}.eco-hub-shortcuts i{display:inline-block;color:#3972fd;background:#e5ecff;padding:3px;border-radius:4px;font-style:normal;font-size:9px}.eco-hub-shortcuts>span:nth-child(2) i{color:#ef9200;background:#fff1df}.eco-hub-shortcuts>span:nth-child(3) i{color:#9e6aff;background:#f0e9ff}
@media(max-width:760px){#empresa .eco-tech .eco-marvin-screen{left:16px;right:16px;height:225px;bottom:-18px}.eco-hub-main{gap:8px;padding-top:8px}.eco-hub-body{grid-template-columns:76px minmax(0,1fr)}}

/* V48 (11/09): a hero no toque com o titulo e o subtitulo maiores (pedido da
   autora). O titulo quebra em quatro linhas e a mais larga e "para
   transformar" (7,27em com este tracking). Por isso o tamanho sai da largura
   da coluna dividida por 7,4: ele cresce o maximo que cabe e as quatro linhas
   nunca viram cinco quando a palavra gira. O max-width em em trava a mesma
   quebra no tablet. A coluna ganha a largura do painel e os dois CTAs ficam
   empilhados com a mesma largura, em vez de duas pilulas desiguais. */
@media(max-width:820px){
  .s2h-body{padding-inline:12px}
  .s2v-v2 .s2v-texto{container-type:inline-size}
  .s2v-v2 .s2v-t{
    max-width:7.7em;letter-spacing:-.045em;line-height:1.08;
    font-size:calc((100vw - 36px) / 7.4);
    font-size:min(calc(100cqi / 7.4),60px);
  }
  .s2v-v2 .s2v-sub{font-size:clamp(17px,4.6vw,19px);max-width:34ch;margin-top:24px}
  .s2v-v2 .s2v-acoes{flex-direction:column;align-items:stretch;width:min(100%,320px);gap:12px;margin-top:34px}
  .s2v-v2 .s2v-acoes .v3-btn{width:100%;font-size:15px}
}

/* Indicadores do carrossel de Serviços, apenas no mobile. */
#servicos .sv-dots{display:none;gap:18px;margin:24px 0 8px}
#servicos .sv-dots button{background:#afc5c4}
#servicos .sv-dots button.on{width:9px;background:#287d7b;box-shadow:none}
#servicos .sv-dots button:focus-visible{outline:2px solid #287d7b;outline-offset:5px}
@media(max-width:760px){#servicos .sv-dots{display:flex}}

/* V50 (11/09): no toque as filas andam com a rolagem, e nao no dedo (pedido da
   autora). Servicos reusa o palco preso que o desktop ja tinha; Educacao vira
   pilha, com o card da imersao aberto; os depoimentos ganham o mesmo palco
   preso, com a historia trocando por progresso (ver companyStories). */
@media(max-width:760px){
  /* Serviços no toque: carrossel lateral, sem prender a página. */
  #servicos .sv-controls,#servicos .sv-progress{display:none}
  #servicos .sv-abertura{padding-bottom:0}
  #servicos .sv-viewport{overscroll-behavior-x:contain;scroll-snap-type:x mandatory}
  #servicos .sv-slide{scroll-snap-stop:always}
  /* O palco preso permanece exclusivo do desktop. */
  #servicos.sv-pinned .sv-viewport{overflow-x:hidden;touch-action:pan-y}
  #servicos.sv-pinned .sv-slide{height:clamp(430px,58svh,540px)}
  #servicos.sv-pinned .sv-sticky{padding:56px 0 24px}

  /* Educação: cards empilhados, abertos conforme a rolagem. */
  #educacao .ed-fila-topo{display:none}
  #educacao .ed-fila-scroll{overflow:visible;padding:0;scroll-snap-type:none;cursor:auto}
  #educacao .ed-fila-track{flex-direction:column;width:auto}
  #educacao .ed-fila-card{flex:0 0 auto;width:100%;height:auto;min-height:210px;margin:0 0 14px;scroll-snap-align:none;
    transition:min-height .45s var(--v3-ease),box-shadow .25s ease}
  #educacao .ed-fila-card:last-child{margin-bottom:0}
  #educacao .ed-fila-card.show{min-height:clamp(360px,52svh,440px)}
  #educacao .ed-fila-card::before{background:rgba(5,16,44,.5)}
  #educacao .ed-fila-info{padding:20px}
  #educacao .ed-fila-card:not(.show) .ed-fila-info b{font-size:19px;min-height:0}

  /* Depoimentos: palco preso, a historia troca com a rolagem */
  #avaliacoes.av-pinned{height:calc(var(--av-stage,100svh) + var(--av-travel,0px));padding-block:0}
  #avaliacoes.av-pinned>.wrap{position:sticky;top:var(--av-pin-top,0px);min-height:100svh;box-sizing:border-box;
    display:flex;flex-direction:column;justify-content:center;padding-block:clamp(40px,8vw,64px)}
}

/* V51 (11/09): os icones da area lado a lado, sem sobreposicao (pedido da
   autora, no desktop e no toque). Eles se empilhavam com margem negativa de
   13px, e os tres viravam uma mancha so. */
#tecnologia .hs-topic-icons{display:inline-flex;align-items:center;gap:10px}
#tecnologia .hs-topic-icons .hs-block-ic:nth-child(2),
#tecnologia .hs-topic-icons .hs-block-ic:nth-child(3){margin-left:0}
@media(max-width:760px){#tecnologia .hs-topic-icons{gap:8px}}
/* Um mockup por área, sempre no fluxo da leitura. */
.hs-areas{width:100%;display:grid;gap:72px;margin-top:40px}
.hs-area{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr);align-items:center;gap:clamp(28px,5vw,72px)}
.hs-area-copy{min-width:0}
.hs-area h3{margin:0;color:#fff;font-size:clamp(24px,2.3vw,32px);font-weight:600;line-height:1.2}
.hs-area-copy>p{font-size:16px;line-height:1.7;color:#aeb8cc;margin:16px 0 0}
.hs-area .hs-benefits{margin:20px 0 0;gap:12px}
.hs-area .hs-benefits li{font-size:16px;line-height:1.65;color:#c2cadb}
.hs-area .hs-topic-cta{display:inline-flex;align-items:center;min-height:44px;margin-top:24px;padding:11px 18px;border:1px solid #ffffff33;border-radius:99px;background:#ffffff0d;color:#fff;font-size:14px}
.hs-area-mock{min-width:0;border:1px solid #ffffff40;border-radius:20px;padding:8px;background:#ffffff12;box-shadow:0 24px 60px -32px #0009;overflow:hidden}
.hs-area-video{display:block;width:100%;aspect-ratio:16/10;object-fit:contain;background:#f5f6fa;border-radius:12px}
.hs-area-frame{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:12px;background:#04081f}
.hs-area-frame iframe{position:absolute;inset:0;display:block;border:0;max-width:none;transform-origin:top left;pointer-events:none}
.hs-area-mock .hs-apps-card{width:100%;height:auto;min-height:0;padding:24px;transform:none}
.hs-area-mock .hs-apps-grid{grid-template-columns:1fr;gap:18px}
.hs-area-mock .hs-apps-tx b{font-size:16px}
.hs-area-mock .hs-apps-tx small{font-size:14px;line-height:1.6}
@media(max-width:760px){
 .hs-areas{gap:56px;margin-top:28px}
 .hs-area{grid-template-columns:minmax(0,1fr);gap:28px}
 /* No toque os vídeos são as versões mobile (400x500 lógicos, 4:5): a tela do celular, sem barra lateral e sem sobra na moldura. Fonte em criativos/hub/video-telas-home (Tela*M). */
 .hs-area-video,.hs-area-frame{aspect-ratio:4/5}
 .hs-area-video{object-fit:cover;object-position:center;border-radius:14px}
 .hs-area-mock{border-radius:22px;padding:8px;max-width:360px;margin-inline:auto}
 .hs-area-mock .hs-apps-card{padding:20px 16px}
}
.hs-area-mock .hs-apps-card{background:#f5f6fa;border-radius:12px;color:#17223b}
.hs-area-mock .hs-apps-head{display:grid;gap:6px;margin-bottom:24px}
.hs-area-mock .hs-apps-head>b{font-size:22px;font-weight:600}
.hs-area-mock .hs-apps-head>span{font-size:14px;color:#536477}
.hs-area-mock .hs-apps-grid{display:grid;list-style:none;margin:0;padding:0}
.hs-area-mock .hs-apps-grid li{display:flex;align-items:flex-start;gap:12px}
.hs-area-mock .hs-apps-ic{flex:none;width:36px;height:36px}
.hs-area-mock .hs-apps-ic img{width:100%;height:100%}
.hs-area-mock .hs-apps-tx{display:grid;gap:4px}
.hs-area-mock .hs-apps-tx small{color:#536477}
.hs-area-mock .hs-apps-tag{font-size:12px;font-style:normal;margin-left:8px;color:#536477}

/* Desktop com janela compartilhada; mobile com mockup em cada tópico. */
@media(min-width:761px){#tecnologia .hs-areas{display:none}}
@media(max-width:760px){#tecnologia .hs-track.hs-xai{display:none}}

/* A interface inteira cabe no quadro do card de Tecnologia. */
#empresa .eco-tech .eco-marvin-screen{bottom:0;border-radius:16px 16px 0 0;border-bottom:0}
#empresa .eco-hub-body{min-height:0}
#empresa .eco-hub-main{min-height:0;gap:6px;padding:8px 10px}
#empresa .eco-marvin-screen .eco-hub-marvin{height:24px;width:32px}
#empresa .eco-hub-side{gap:8px}
#empresa .eco-hub-input{padding:8px}
#empresa .eco-hub-input>div{margin-top:8px}
#empresa .eco-hub-shortcuts>span{padding:5px 4px}
#empresa .eco-marvin-screen .eco-hub-mark img{width:13px;height:13px;object-fit:contain}

/* ================= POR DENTRO DA MARVEE (esteira de fotos) =================
   Logo depois dos números: um bento de fotos da sede que anda para o lado
   conforme a página rola. Sem JS (ou com movimento reduzido) a esteira é uma
   rolagem horizontal nativa; com JS a seção vira palco preso (.vd-pinned), no
   mesmo desenho da de Serviços. Todas as medidas saem de --vd-h (a altura
   dos blocos): as colunas calculam a própria largura a partir dela. */
.vd-sec{position:relative;background:var(--v3-bg);padding:clamp(40px,5vw,72px) 0 clamp(56px,6vw,96px);--vd-h:clamp(320px,calc(100svh - 204px),720px);--vd-gap:16px;--vd-pad:max(clamp(20px,4vw,56px),calc((100vw - 1180px)/2));--vd-travel:0px}
.vd-janela{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;outline-offset:-4px}
.vd-janela::-webkit-scrollbar{display:none}
/* Solta (movimento reduzido, tela muito baixa ou sem JS) e com mouse: a roda
   do mouse nao rola para o lado e a barra ficava escondida, entao no Windows
   as fotos nao tinham como andar. Com ponteiro fino a barra aparece e a
   esteira aceita arrasto (script porDentro). No toque segue o gesto nativo. */
@media(hover:hover) and (pointer:fine){
  .vd-sec:not(.vd-pinned) .vd-janela{scrollbar-width:thin;scrollbar-color:rgba(20,32,57,.32) transparent;padding-bottom:14px;cursor:grab}
  .vd-sec:not(.vd-pinned) .vd-janela.vd-drag{cursor:grabbing;user-select:none}
  .vd-sec:not(.vd-pinned) .vd-janela::-webkit-scrollbar{display:block;height:8px}
  .vd-sec:not(.vd-pinned) .vd-janela::-webkit-scrollbar-thumb{border-radius:8px;background:rgba(20,32,57,.32)}
  .vd-sec:not(.vd-pinned) .vd-janela::-webkit-scrollbar-track{background:transparent}
}
.vd-esteira{display:flex;gap:var(--vd-gap);width:max-content;height:var(--vd-h);padding-inline:var(--vd-pad) var(--vd-gap);box-sizing:content-box} /* a travessia acaba com a última coluna na borda da tela, não na margem do site */
.vd-intro{flex:none;width:clamp(300px,30vw,430px);display:flex;flex-direction:column;justify-content:space-between;padding:6px clamp(16px,2.4vw,40px) 6px 0;box-sizing:border-box}
.vd-intro .mv-pill{margin-bottom:24px}
.vd-intro h2{margin:0;font-size:clamp(30px,3.4vw,48px);font-weight:400;line-height:1.18;letter-spacing:-.035em;color:var(--v3-ink);text-wrap:balance}
.vd-intro h2 .t2{color:var(--v3-t2)}
.vd-intro p{margin:0;max-width:34ch;font-size:clamp(16px,1.35vw,18px);line-height:1.75;color:var(--v3-mut);text-wrap:pretty}
.vd-col{flex:none;display:grid;gap:var(--vd-gap);min-width:0}
.vd-col--alta{width:calc(var(--vd-h)*.64)}
.vd-col--larga{width:calc(var(--vd-h)*1.3)}
.vd-col--dupla{width:calc((var(--vd-h) - var(--vd-gap))*.75);grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
.vd-foto{margin:0;min-height:0;border-radius:24px;overflow:hidden;background:#0B132B}
.vd-foto img{display:block;width:100%;height:100%;object-fit:cover}
.vd-progress{display:none}
.vd-sec.vd-pinned{height:calc(100svh + var(--vd-travel));padding:0}
.vd-pinned .vd-palco{position:sticky;top:0;height:100svh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:22px;padding:104px 0 24px;overflow:hidden}
.vd-pinned .vd-janela{overflow:hidden}
.vd-pinned .vd-esteira{will-change:transform}
.vd-pinned .vd-progress{display:block;width:120px;height:2px;margin-left:var(--vd-pad);border-radius:2px;background:rgba(20,32,57,.12);overflow:hidden}
.vd-pinned .vd-progress span{display:block;width:100%;height:100%;background:#389f9b;transform-origin:0 50%;transform:scaleX(var(--vd-progress,0))}
@media(min-width:761px) and (max-height:620px){
  /* notebook com a tela em 125% ou 150%: os blocos ficam mais baixos e o
     titulo da abertura encolhe junto, pra caber sem encostar no paragrafo */
  .vd-intro .mv-pill{margin-bottom:16px}
  .vd-intro h2{font-size:clamp(26px,2.5vw,34px)}
  .vd-intro p{font-size:15px;line-height:1.6}
}
@media(max-width:760px){
  /* no celular a largura deixa de seguir a altura na mesma razao: os blocos
     crescem para cima (foto maior) sem passar da largura da tela */
  .vd-sec{--vd-h:clamp(360px,calc(100svh - 200px),560px);--vd-gap:12px}
  .vd-intro{width:min(78vw,340px);padding-right:12px;justify-content:center;gap:28px}
  .vd-col--alta{width:min(84vw,calc(var(--vd-h)*.58))}
  .vd-col--larga{width:min(88vw,calc(var(--vd-h)*.64))}
  .vd-col--larga .vd-foto img{object-position:30% 50%}
  .vd-col--dupla{width:min(88vw,calc(var(--vd-h)*.62))}
  .vd-foto{border-radius:20px}
  .vd-pinned .vd-palco{padding:72px 0 20px;gap:16px}
}

  /* ===== Serviços profissionais e Tecnologia em síntese (21/10/2026) =====
     Serviços: duas colunas editoriais (cabeça fixa à esquerda, as cinco áreas
     em linhas numeradas à direita, serviços em pílulas). Tecnologia: vitrine
     com abas pelas áreas do Hub e a tela real numa janela. */
  #servicos.hsv-sec{background:#F7F9F9;padding-block:clamp(80px,9vw,128px)}
  .hsv-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(48px,6vw,96px);align-items:start}
  .hsv-cab{position:sticky;top:120px}
  .hsv-cab .mv-pill{margin:0 0 22px}
  .hsv-cab h2{margin:0;font-size:clamp(34px,3.4vw,46px);font-weight:400;line-height:1.16;letter-spacing:-.035em;color:#0B132B;text-wrap:balance}
  .hsv-cab h2 .t2{display:block;color:#63788A}
  .hsv-lede{margin:22px 0 0;max-width:46ch;font-size:17px;line-height:1.65;color:#5B6478}
  .hsv-modos{margin:32px 0 0;display:grid;gap:10px}
  .hsv-modos div{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:baseline;padding:16px 18px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(11,19,43,.06)}
  .hsv-modos dt{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#287D7B}
  .hsv-modos dd{margin:0;font-size:15px;line-height:1.5;color:#3F4A5E}
  .hsv-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:32px}
  .hsv-btn,.htc-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:14px 26px;border-radius:64px;font-size:16px;font-weight:500;text-decoration:none;transition:transform .3s,background .3s,box-shadow .3s}
  .hsv-btn svg,.htc-btn svg{width:16px;height:16px;transition:transform .3s}
  .hsv-btn:hover svg,.htc-btn:hover svg{transform:translateX(3px)}
  .hsv-btn{background:#0B132B;color:#fff}
  .hsv-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -16px rgba(11,19,43,.6)}
  .hsv-link{font-size:15px;font-weight:600;color:#0B132B;text-decoration:underline;text-decoration-color:rgba(11,19,43,.25);text-underline-offset:5px}
  .hsv-link:hover{text-decoration-color:#0B132B}
  /* Dois modos (21/10/2026): ponte entre os blocos, o bloco "Fazemos por você" com
     fundo próprio e cartões por serviço, e o ecossistema com quatro portas */
  .hsv-ponte{display:grid;gap:4px;margin-top:28px;padding:16px 18px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(11,19,43,.07);color:#0B132B;text-decoration:none;transition:box-shadow .3s}
  .hsv-ponte span{font-size:14px;color:#5B6478}
  .hsv-ponte b{display:inline-flex;align-items:center;gap:8px;font-size:15.5px;font-weight:600}
  .hsv-ponte b svg{width:15px;height:15px;transition:transform .3s}
  .hsv-ponte:hover{box-shadow:0 0 0 1px rgba(11,19,43,.16),0 14px 30px -20px rgba(11,19,43,.5)}
  .hsv-ponte:hover b svg{transform:translateX(3px)}
  .hsv-terc{background:linear-gradient(180deg,#EEF3F9,#F6F8FB 60%)}
  .htc-svcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0 0 62px}
  .htc-svc{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-content:start;padding:18px 18px 16px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px rgba(11,19,43,.08);color:#0B132B;text-decoration:none;transition:box-shadow .3s,transform .3s}
  .htc-svc:hover{transform:translateY(-2px);box-shadow:0 0 0 1px color-mix(in srgb,var(--area-c) 45%,transparent),0 18px 36px -26px color-mix(in srgb,var(--area-c) 70%,transparent)}
  .htc-svc-ic{grid-row:1;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,var(--area-c) 10%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--area-c) 22%,transparent)}
  .htc-svc b{align-self:center;font-size:16.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
  .htc-svc-d{grid-column:1 / -1;font-size:14.5px;line-height:1.5;color:#5B6478}
  .htc-svc-go{grid-column:1 / -1;display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:14px;font-weight:600;color:color-mix(in srgb,var(--area-c) 82%,#0B132B)}
  .htc-svc-go svg{width:14px;height:14px;transition:transform .3s}
  .htc-svc:hover .htc-svc-go svg{transform:translateX(3px)}
  #empresa .eco-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  @media(min-width:1181px){#empresa .eco-tile h3{font-size:clamp(23px,1.95vw,29px)}#empresa .eco-tile p{font-size:15px}}
  @media(max-width:1180px){#empresa .eco-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:760px){#empresa .eco-grid{grid-template-columns:1fr}.htc-svcs{grid-template-columns:1fr;margin-left:0}}
  /* a lista: um cartão por área, na cor da área do Hub (a mesma do menu Serviços) */
  .hsv-lista{display:flex;flex-direction:column;gap:12px}
  .hsv-row{position:relative;padding:24px 26px 26px;border-radius:24px;
    background:radial-gradient(120% 150% at 0% 0%,color-mix(in srgb,var(--area-c) 8%,#fff),#fff 48%);
    box-shadow:0 0 0 1px rgba(11,19,43,.07);transition:box-shadow .35s var(--ease-soft,ease)}
  .hsv-row:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--area-c) 32%,transparent),0 20px 44px -28px color-mix(in srgb,var(--area-c) 60%,transparent)}
  .hsv-row-h{display:flex;align-items:center;gap:16px;color:inherit;text-decoration:none}
  .hsv-aic{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;color:var(--area-c);
    background:color-mix(in srgb,var(--area-c) 11%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--area-c) 24%,transparent)}
  .hsv-asvg{width:22px;height:22px}
  .hsv-row-t{flex:1;min-width:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
  .hsv-row h3{margin:0;font-size:clamp(22px,1.9vw,27px);font-weight:500;letter-spacing:-.025em;line-height:1.2;color:#0B132B}
  .hsv-qtd{font-size:13px;font-weight:600;color:color-mix(in srgb,var(--area-c) 78%,#0B132B)}
  .hsv-ir{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:#0B132B;
    box-shadow:inset 0 0 0 1px rgba(11,19,43,.14);transition:background .3s,color .3s,box-shadow .3s}
  .hsv-ir svg{width:17px;height:17px;transition:transform .3s}
  .hsv-row-h:hover .hsv-ir,.hsv-row:hover .hsv-ir{background:var(--area-c);color:#fff;box-shadow:none}
  .hsv-row-h:hover .hsv-ir svg{transform:translateX(2px)}
  .hsv-row > p{margin:12px 0 0 62px;max-width:56ch;font-size:15.5px;line-height:1.55;color:#5B6478}
  .hsv-chips{list-style:none;margin:16px 0 0 62px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
  .hsv-chips a{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:7px 14px 7px 11px;border-radius:999px;background:#fff;
    box-shadow:0 0 0 1px rgba(11,19,43,.1);font-size:14.5px;font-weight:500;line-height:1.2;color:#0B132B;text-decoration:none;
    transition:background .25s,box-shadow .25s}
  .hsv-ci{flex:none;width:15px;height:15px;color:var(--area-c)}
  .hsv-chips a:hover{background:color-mix(in srgb,var(--area-c) 8%,#fff);box-shadow:0 0 0 1px color-mix(in srgb,var(--area-c) 45%,transparent)}
  @media(max-width:1000px){
    .hsv-grid{grid-template-columns:1fr;gap:48px}
    .hsv-cab{position:static}
  }
  @media(max-width:560px){
    .hsv-row{padding:20px 18px 22px}
    .hsv-row > p,.hsv-chips{margin-left:0}
    .hsv-modos div{grid-template-columns:1fr;gap:4px}
    .hsv-chips a{font-size:14px}
  }

  .htc-palco{position:relative;width:100%;max-width:940px;margin:0 auto}
  .htc-luz{position:absolute;inset:6% 4% -8%;z-index:0;pointer-events:none;background:radial-gradient(58% 52% at 50% 42%,rgba(57,114,253,.34),transparent 72%);filter:blur(40px)}
  .htc-janela{position:relative;z-index:1;border-radius:14px;overflow:hidden;text-align:left;
    border:1px solid rgba(255,255,255,.12);background:var(--bg,#04081F);
    font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    box-shadow:0 40px 90px -30px rgba(0,0,0,.85),0 0 120px -30px rgba(57,114,253,.45),inset 0 1px 0 rgba(255,255,255,.06)}
  .htc-janela .mock-tab img{width:14px;height:14px}
  .htc-janela .mock-ws-av img{width:14px;height:auto}
  .htc-app{background:radial-gradient(620px 300px at 12% 118%,rgba(91,192,190,.13),transparent 66%),radial-gradient(660px 320px at 88% 120%,rgba(163,100,255,.13),transparent 66%),var(--bg,#04081F)}
  .htc-ask{padding:44px 28px 46px}
  .htc-ask .mv-wink{width:62px}
  .htc-ask .mock-greet{margin-top:16px;font-size:22px}
  .htc-ask .mock-composer{max-width:560px;margin:20px auto 0}
  .htc-ask .mock-composer-tx{min-height:34px;font-size:14px;color:#C9D1E8}
  .htc-digita::after{content:"";display:inline-block;width:1.5px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:#5BC0BE;animation:htcCaret 1s steps(1) infinite}
  @keyframes htcCaret{50%{opacity:0}}
  .htc-ask .mock-tools{margin-top:32px;gap:14px}
  .htc-ask .mock-tools li{width:64px}
  .htc-ask .mock-tool-ic{width:48px;height:48px;border-radius:15px;transition:transform .35s var(--ease-soft,ease),box-shadow .35s}
  .htc-ask .mock-tool-ic img{height:26px}
  .htc-ask .mock-tools li:hover .mock-tool-ic{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 14px 26px -8px rgba(var(--c),.45)}
  .htc-ask .mock-tool-nm{font-size:11.5px}
  .htc-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:860px;margin:0 auto}
  .htc-stats div{padding:4px 20px;text-align:center}
  .htc-stats div + div{border-left:1px solid rgba(255,255,255,.1)}
  .htc-stats b{display:block;font-size:clamp(36px,3.8vw,52px);font-weight:400;line-height:1;letter-spacing:-.04em;color:#fff}
  .htc-stats span{display:block;max-width:24ch;margin:12px auto 0;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.6)}
  .htc-cta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
  .htc-btn{background:#fff;color:#0B132B}
  .htc-btn:hover{transform:translateY(-2px)}
  .htc-btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
  @media(max-width:760px){
    .htc-ask{padding:30px 16px 32px}
    .htc-ask .mv-wink{width:50px}
    .htc-ask .mock-greet{font-size:18px}
    .htc-ask .mock-composer-tx{font-size:13px;min-height:40px}
    .htc-ask .mock-tools{gap:16px 6px}
    .htc-ask .mock-tools li{width:22%}
    .htc-janela .mock-tab{margin-left:6px}
    .htc-stats{grid-template-columns:1fr;gap:24px}
    .htc-stats div + div{border-left:0;border-top:1px solid rgba(255,255,255,.1);padding-top:24px}
  }
  @media(prefers-reduced-motion:reduce){.htc-digita::after{animation:none}.htc-ask .mock-tool-ic,.hsv-ir,.hsv-chips a{transition:none}}

  /* Setores (21/10/2026): dobra com os sete setores e os segmentos de cada um */
  .hst-sec{background:#F7F8FA}
  .hst-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .hst-card{background:#fff;border-radius:20px;padding:22px 22px 20px;box-shadow:0 0 0 1px rgba(11,19,43,.06)}
  .hst-card-h{display:flex;align-items:center;gap:12px;color:#0B132B;text-decoration:none}
  #setores .hst-card-h h3{margin:0;font-size:18px;font-weight:600;letter-spacing:-.015em;color:#0B132B}
  .hst-card-h:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(11,19,43,.3)}
  .hst-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--area-c) 11%,#fff);color:var(--area-c);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--area-c) 24%,transparent)}
  .hst-svg{width:19px;height:19px}
  .hst-segs{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
  .hst-segs a{font-size:14px;font-weight:500;padding:6px 12px;border-radius:999px;background:#F3F5F9;color:#0B132B;text-decoration:none;box-shadow:inset 0 0 0 1px rgba(11,19,43,.06);transition:background .25s,box-shadow .25s}
  .hst-segs a:hover{background:#fff;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--area-c) 55%,transparent)}
  .hst-card:nth-child(3){grid-row:span 2}
  @media (max-width:640px){.hst-grid{grid-template-columns:1fr}.hst-card:nth-child(3){grid-row:auto}}