/* s2-shell.css: a casca do site novo (home v2, /site2) para as outras
   paginas: barra flutuante de vidro com submenu e gaveta mobile, botoes,
   pilula e cabecalho de dobra, titulos, numeros, contato em dois paineis e
   rodape navy. Copiado das regras inline de src/content/site2.html na ordem
   original (a cascata entre elas e a mesma); a home ainda carrega a copia
   inline dela. Quando a home passar a consumir este arquivo, a copia inline
   sai de la. Depende do site.css (tokens --teal, --light-*, .btn, .logo,
   .nav-drawer, .nd-*) carregado pelo Base. Gerado por gen-shell.py. */
:root{--e-amb:1800ms;--e-barra:1200ms;--e-ease:cubic-bezier(.22,1,.36,1);--mv-azul:#2E6BFF;--mv-brand-teal:#5BC0BE;--mv-ink:#181818;--mv-mut:#46484D;--mv-teal-gradient:linear-gradient(175deg,var(--mv-teal-dark) 0%,var(--mv-teal-mid) 42%,var(--mv-teal-light) 100%);--mv-teal-paper:color-mix(in srgb,var(--mv-brand-teal) 10%,#fff);--v3-bg:#F7F9F9;--v3-ease:cubic-bezier(.22,1,.36,1);--v3-hair:0 0 0 1px rgba(11,19,43,.08);--v3-ink:#0B132B;--v3-mut:#536477;--v3-teal-ink:#287D7B;--v3-teal-tile:rgba(11,19,43,.045);--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)}

/* ===== nav ===== */

  /* a moldura da caixa e o claro da pagina, como sempre foi */
  .s2h{background:var(--light-card)}


  /* ===================== 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);
  }

  /* 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);
  }

  @keyframes s2vBarraVidro{from{opacity:0}to{opacity:1}}


  /* 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}


  /* ===================== 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}}

  /* 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}

  /* 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}

  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}

  .s2h,.mv-eco,#empresa,.mv-kt,section.pad.sv-sec,section.pad.ed-sec,#porque,.folha,#contato,.logos-dobra{background:var(--v3-bg)}

  .s2h-body{z-index:2}

  .s2h-panel{box-shadow:none}


  [data-entrada] .s2h.is-boxed .s2h-island > *{animation:none;opacity:1}


  /* ===================== 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}


  /* 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}


  /* 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}

  .s2h-nav.nav-reading-hidden{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
/* ===== btn ===== */

  .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)}

  .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}

  .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}

  .pq-ir{width:44px;height:44px;border-radius:50%;top:20px;right:20px}
@media(max-width:640px){
    .pq-ir{top:16px;right:16px}
    .s2v-acoes .v3-btn{font-size:14px;padding-inline:18px}}

  .v3-btn--branco,.v3-btn--branco:hover{background:#F4F6F9;color:#0B132B}

  .pq-ir:hover{background:rgba(11,19,43,.08)}


  /* 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)}

  .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-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)}

  #servicos .pq-ir{display:none}

  #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-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}}
@media(prefers-reduced-motion:reduce){#servicos .sv-slide,#servicos .sv-slide>.pq-ir{transition:none}}


  /* Blue accents throughout the reasons bento. */
  #porque .pq-ir{color:#3972cf}
@media(max-width:760px){
    #servicos .sv-bpo>.pq-ir{top:auto;bottom:18px;right:18px}}
@media(max-width:760px){
    #servicos .sv-bpo>.pq-ir{top:18px;bottom:auto}}

  #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)}

  #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="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[data-g="5"] .pq-ir{background:#ffffff12;border:1px solid #ffffff30;color:#e4f5ff;backdrop-filter:blur(12px)}

  #porque .pq-card[data-g="4"] .pq-ir{background:#ffffff85;color:#236969;border-color:#ffffff;box-shadow:none}

  #porque .pq-card .pq-ir{width:44px;height:44px}
/* ===== pill ===== */


  /* ---- 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}

  .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;
  }

  .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;
  }

  .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}

  .cta-grid .dobra-cab .lede{margin:0 0 18px}

  .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)}

  .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)}

  .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}

  .v3-acento .dobra-cab,.v3-acento .h2{text-align:left}

  .v3-acento .mv-pill{color:var(--teal);background:none}

  .mv-kt-box .mv-pill{background:transparent;box-shadow:none;color:var(--teal)}

  #educacao .ed-abertura .mv-pill{margin-bottom:16px}

  #educacao .ed-abertura .mv-pill{grid-column:1/-1;margin:0}

  #tecnologia .mv-pill{padding:9px 16px;gap:8px;width:fit-content;flex-shrink:0;line-height:1.4;box-sizing:border-box}
.stories-heading .mv-pill{margin-bottom:22px}


  /* 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}

  #tecnologia .mv-kt-cab>.mv-pill{color:#fff}

  #avaliacoes .stories-heading .mv-pill{margin-bottom:14px}

  #contato .dobra-cab{max-width:470px}

  #contato .mv-pill{color:#8bcfdf;margin-bottom:24px}
@media(max-width:900px){#contato .dobra-cab{max-width:560px}}

  #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}
@media(max-width:760px){#empresa.eco-editorial .mv-cab{margin-bottom:36px}}


  /* 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.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}

  #empresa.eco-editorial .mv-lede{max-width:860px;text-wrap:balance}


  /* 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}

  #contato.ct-v2 .mv-pill,#contato.ct-v2 .mv-pill svg{color:#d4eee6}

  #contato.ct-v2 .mv-pill,#contato.ct-v2 .mv-pill svg,#contato.ct-v2 .ct-prova{color:var(--mv-teal-paper)}
/* ===== h2 ===== */



  /* ===================== 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 /site2 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}

  .h2{color:var(--light-tx)}

  .ink .h2{color:var(--white)}

  .h2,.sec-head .h2{margin-top:0;font-size:clamp(29px,3.4vw,44px);max-width:26ch}

  #avaliacoes .sec-head .h2{max-width:24ch;text-wrap:balance}

  #porque .h2{color:#fff}

  #porque .why-head .h2{margin:0;max-width:21ch;text-align:left;text-wrap:balance}

  .cta-grid .h2{margin-top:0}


  /* ===== 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}

  .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;
  }

  #porque .why-head .h2{max-width:none;margin:0}

  #avaliacoes .sec-head .h2{max-width:22ch;margin:0 0 18px}

  .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;
  }

  #porque .h2{color:var(--v3-ink)}

  #avaliacoes .sec-head .h2{color:var(--v3-ink)}

  .v3-acento .h2{color:var(--v3-ink)}

  .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;
  }

  .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}

  #avaliacoes .h2{max-width:24ch;margin:0;text-align:left;font-size:clamp(30px,3.3vw,44px);line-height:1.2}

#contato .v3-acento .h2{color:#0b1530}
#contato .v3-acento .h2 .t2{color:#667c8b}

  #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}
@media(max-width:560px){#contato .h2{font-size:32px}}

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

  #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}
@media(max-width:900px){
    #contato.ct-v2 .ct-esq .h2{font-size:28px;max-width:none}}

  #empresa .mv-cab h2,#porque .why-head .h2{font-size:clamp(34px,3.6vw,52px);line-height:1.12;letter-spacing:-.045em}

  #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}
@media(max-width:760px){
    #contato.ct-v2 .ct-esq .h2{font-size:38px}}

  #porque .why-head .h2,#porque .why-head .h2 .t2{font-weight:400}
/* ===== dm ===== */


  /* ===================== 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}}


  /* 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}}


  /* 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}}
/* ===== ct ===== */


  /* 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,#educacao,#quem,#contato{
    scroll-margin-top:calc(var(--s2h-navtop, 19px) + var(--s2h-navh, 72px) + 18px);
  }

  #contato{position:relative;z-index:2;background:var(--light-bg,#F2F2F2)}

  .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:560px){.cform .two{grid-template-columns:1fr;gap:14px}}

  .s2h,.mv-eco,#empresa,.mv-kt,section.pad.sv-sec,section.pad.ed-sec,#porque,.folha,#contato,.logos-dobra{background:var(--v3-bg)}

  .v3-acento .contato-alt{color:var(--v3-mut)}

  .cform{background:#fff;border:0;box-shadow:var(--v3-hair)}

  #contato{padding-block:32px clamp(64px,7vw,96px)}

  .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:640px){
    .cform .two{grid-template-columns:1fr;gap:0}}



  .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}

  .cform .cform-submit,.cform .cform-submit:hover{background:#F4F6F9;color:#0B132B}

#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}


  /* 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}
@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}}


  /* 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}}


  /* 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}

  #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}
@media(prefers-reduced-motion:reduce){#contato>.wrap::before{animation:none}}


  /* 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}}


  /* 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}

  #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:115px;z-index:0;pointer-events:none;transform:scaleX(-1)}
@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:60px}}

  #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)}
/* ===== foot ===== */



  /* ===================== 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 /site2 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}


  /* ===================== 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}

  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}

  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}


  /* 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}}


  /* 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}