:root{
    /* Toda a paleta sai do azul da marca registrada, #005298 (matiz 207°). As
       outras faixas são o mesmo matiz com a luminosidade subindo ou descendo,
       para o site inteiro ficar na mesma família de azul. */
    --blue:#005298;
    --blue-deep:#00335F;
    --blue-bright:#0A6CC4;
    /* destaque sobre fundo escuro: o azul da marca sozinho some contra a foto */
    --blue-vivo:#3AA0FF;
    /* meio do caminho; "confiança" no banner em telas grandes */
    --blue-medio:#0A63B5;
    /* mais claro ainda, para texto de apoio sobre o azul profundo */
    --blue-claro:#93CBFF;
    --navy:#00335F;
    --white:#FFFFFF;
    --paper:#F4F6FA;
    --ink:#0E1626;
    --muted:#414A5F;
    --line:rgba(14,22,38,.13);
    --line-dark:rgba(255,255,255,.18);
    --pend-bg:#FFF6E6;
    --pend-line:#D9A441;
    --pend-ink:#6B4A05;
    --nav-h:84px;
    --nav-h-min:70px;
    --wrap:1760px;
    /* raio único para tudo que tem canto: botões, campos, cartões, fotos, molduras */
    --raio:10px;
    /* curvas de aceleração: saída longa e desaceleração lenta, para o movimento
       terminar de leve em vez de parar de uma vez */
    --suave:cubic-bezier(.25,.8,.25,1);
    --suave-entrada:cubic-bezier(.22,.61,.36,1);
    font-size:16px;
  }
  @media (min-width:900px){ :root{--nav-h:104px; --nav-h-min:84px;} }

  *{box-sizing:border-box;}
  /* Corta o que vaza para os lados. O brilho dos cartões (.led) se estende 44px
     para fora da caixa, e em tela estreita isso criava rolagem lateral. Só o
     body não resolve: a regra dele é repassada para a janela, e a janela volta
     a rolar. O primeiro overflow-x é reserva para navegadores sem "clip". */
  html{scroll-behavior:smooth; overflow-x:hidden; overflow-x:clip;}
  body{
    margin:0; background:var(--white); color:var(--ink);
    font-family:"Montserrat",-apple-system,"Segoe UI",Roboto,sans-serif;
    -webkit-font-smoothing:antialiased; overflow-x:hidden; overflow-x:clip;
  }
  @media (prefers-reduced-motion:reduce){
    *{animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
  }
  /* 600 é o semibold da Montserrat: mesma presença, traço menos pesado que o 700 */
  h1,h2,h3,h4{margin:0; letter-spacing:-.02em; text-wrap:balance; font-weight:600;}
  p{margin:0;}
  blockquote{margin:0;}
  /* o navegador dá 40px de margem lateral a <figure> por padrão; nas avaliações isso
     virava vão extra entre os cartões e um recuo torto no primeiro */
  figure{margin:0;}
  a{color:inherit;}
  img,svg{display:block; max-width:100%;}
  ul, ol{margin:0; padding:0; list-style:none;}
  [hidden]{display:none !important;}
  button{font:inherit;}
  :focus-visible{outline:3px solid var(--blue-bright); outline-offset:3px;}
  .hero :focus-visible, .quote :focus-visible, footer :focus-visible{
    outline-color:rgba(255,255,255,.92);
  }

  .wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:clamp(20px,4.6vw,72px);}
  .skip{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  .skip:focus{
    position:fixed; left:12px; top:12px; z-index:100;
    width:auto; height:auto; margin:0; padding:12px 18px;
    clip:auto; overflow:visible; white-space:normal;
    background:var(--blue); color:var(--white); font-weight:600;
  }

  section{padding-block:clamp(56px,7vw,96px);}
  section[id]{scroll-margin-top:var(--nav-h-min);}
  .band{background:var(--paper);}
  .head{max-width:640px; margin-bottom:clamp(30px,4vw,48px);}
  /* Negrito padrão do site: peso 600, o mesmo dos títulos, e cor do texto
     principal para o trecho saltar sobre o cinza do corpo. O navegador usaria
     700 por conta própria, que fica mais pesado que o resto da página. */
  strong, b{font-weight:600; color:var(--ink);}
  /* sobre fundo escuro o negrito mantém a cor do bloco */
  .hero strong, .quote-wrap strong, footer strong, .panel strong{color:inherit;}

  .eyebrow{
    display:block; font-size:.75rem; font-weight:700;
    letter-spacing:.16em; text-transform:uppercase; color:var(--blue);
  }
  .head h2{margin-top:12px; font-size:clamp(1.7rem,3.4vw,2.4rem); line-height:1.18;}
  .head p{margin-top:14px; font-size:1.02rem; line-height:1.65; color:var(--muted); max-width:58ch;}
  /* a abertura de Serviços é um texto longo, então a caixa é mais larga que a
     dos outros cabeçalhos de seção */
  .head-servicos{max-width:none;}
  .head-servicos p{max-width:74ch;}
  /* os dois parágrafos da abertura ficam numa coluna só, na medida de leitura do
     bloco: com o texto mais curto, duas colunas ficavam desiguais e a segunda
     sobrava vazia embaixo */
  .svc-colunas p{margin-top:14px;}
  .head-servicos .svc-fecho{margin-top:22px; padding-left:16px; border-left:3px solid var(--blue); font-weight:600; color:var(--ink);}
  .head-servicos .svc-assina{margin-top:24px; display:grid; gap:2px;}
  .head-servicos .svc-assina strong{color:var(--blue); font-size:1.02rem;}
  .head-servicos .svc-assina em{font-style:italic; color:var(--muted);}
  /* Em tela larga a abertura vira um bloco dividido: à esquerda título, frase de
     destaque, fecho e assinatura; à direita os dois parágrafos de texto. Cada lado
     tem um papel diferente, e o espaço vazio à direita do bloco deixa de existir. */
  @media (min-width:960px){
    .head-servicos{
      display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
      column-gap:clamp(40px,5vw,88px); align-items:start;
    }
    .head-servicos > *{grid-column:1;}
    .head-servicos .svc-colunas{grid-column:2; grid-row:1 / span 6; align-self:center;}
    .head-servicos .svc-colunas p:first-child{margin-top:0;}
    .head-servicos p{max-width:none;}
  }

  /* marcador de informação pendente */
  .pend{
    border-radius:calc(var(--raio) / 2);
    display:inline-block; background:var(--pend-bg);
    border:1px solid var(--pend-line); color:var(--pend-ink);
    font-size:.82rem; font-weight:600; padding:3px 9px; letter-spacing:.01em;
  }

  /* ---------- BOTÕES ----------
     Todo botão tem uma borda luminosa que gira devagar (conic-gradient na
     camada da borda, com o fundo do botão por cima na camada do padding), um
     pontilhado fraco que acompanha a luz, e um brilho interno que roda. Cada variante só troca as cores nas variáveis;
     o desenho é o mesmo. As propriedades registradas permitem animar o ângulo
     e transicionar a largura da faixa e a cor do brilho. */
  @property --giro{syntax:"<angle>"; initial-value:0deg; inherits:false;}
  @property --desloca{syntax:"<angle>"; initial-value:0deg; inherits:false;}
  @property --faixa{syntax:"<percentage>"; initial-value:9%; inherits:false;}
  @property --brilho{syntax:"<color>"; initial-value:white; inherits:false;}
  @property --fundo{syntax:"<color>"; initial-value:#005298; inherits:false;}
  .btn{
    /* mesmo desenho do botão de referência: fundo quase preto, pílula, filete
       de luz na borda e um feixe azul que roda por dentro */
    --fundo:var(--blue); --fundo-sutil:#0A6CC4;
    --realce:var(--blue-vivo); --realce-sutil:var(--blue-claro); --brilho:#FFFFFF;
    --dura:6s; --suave-brilho:1.2s cubic-bezier(.25,1,.5,1);
    position:relative; isolation:isolate; overflow:hidden;
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    min-height:48px; padding:13px 28px; border:1px solid transparent; border-radius:999px;
    font-weight:700; font-size:.95rem; text-decoration:none; cursor:pointer; outline-offset:4px;
    color:var(--white);
    background:linear-gradient(var(--fundo), var(--fundo)) padding-box,
      conic-gradient(from calc(var(--giro) - var(--desloca)),
        transparent, var(--realce) var(--faixa), var(--brilho) calc(var(--faixa) * 2),
        var(--realce) calc(var(--faixa) * 3), transparent calc(var(--faixa) * 4)) border-box;
    box-shadow:inset 0 0 0 1px var(--fundo-sutil);
    animation:giroBotao var(--dura) linear infinite;
    transition:--desloca var(--suave-brilho), --faixa var(--suave-brilho), --brilho var(--suave-brilho),
               --fundo .25s ease, color .2s ease;
  }
  .btn svg{flex:none;}
  .btn:active{translate:0 1px;}
  .btn .btn-in{position:relative; z-index:1; display:inline-flex; align-items:center; gap:10px;}
  .btn::before, .btn::after{
    content:""; pointer-events:none; position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:-1;
  }
  /* pontilhado que aparece só na direção da luz */
  .btn::before{
    --pos:2px; --passo:4px;
    width:calc(100% - 6px); height:calc(100% - 6px); border-radius:inherit; opacity:.6;
    background:radial-gradient(circle at var(--pos) var(--pos), var(--realce-sutil) .5px, transparent 0) padding-box;
    background-size:var(--passo) var(--passo); background-repeat:space;
    -webkit-mask-image:conic-gradient(from calc(var(--giro) + 45deg), black, transparent 10% 90%, black);
            mask-image:conic-gradient(from calc(var(--giro) + 45deg), black, transparent 10% 90%, black);
    animation:giroBotao var(--dura) linear infinite;
  }
  /* brilho interno, um feixe que roda */
  .btn::after{
    width:100%; aspect-ratio:1; opacity:.85;
    background:linear-gradient(-50deg, transparent, var(--realce), transparent);
    -webkit-mask-image:radial-gradient(circle at bottom, transparent 40%, black);
            mask-image:radial-gradient(circle at bottom, transparent 40%, black);
    animation:giroFeixe var(--dura) linear infinite;
  }
  .btn:is(:hover, :focus-visible){--faixa:28%; --desloca:95deg; --brilho:var(--realce-sutil);}
  @keyframes giroBotao{ to{--giro:360deg;} }
  @keyframes giroFeixe{ to{rotate:360deg;} }

  /* variantes: só cores */
  .btn-primary{color:var(--white);}
  /* botão claro, para quando o fundo já é o azul da marca (bloco de cotação) */
  .btn-white{--fundo:var(--white); --fundo-sutil:#DCE9F6; --realce:var(--blue-vivo); --realce-sutil:var(--blue-claro); --brilho:var(--blue); color:var(--blue);}
  .btn-white:hover{--fundo:var(--paper);}
  .btn-white::after{opacity:.2;}
  .btn-primary:hover{--fundo:#00427B;}
  .btn-ghost{--fundo:transparent; --fundo-sutil:rgba(255,255,255,.85); color:var(--white);}
  .btn-outline{--fundo:transparent; --fundo-sutil:var(--blue); --realce:var(--blue-vivo); color:var(--blue);}
  .btn-block{width:100%;}
  @media (prefers-reduced-motion:reduce){
    .btn, .btn::before, .btn::after{animation:none;}
    .btn::after, .btn::before{display:none;}
  }

  /* vidro líquido, usado sobre a foto do banner */
  .btn-glass{
    position:relative; isolation:isolate; overflow:hidden;
    color:var(--white); border-color:transparent;
    background:linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.13) 100%);
    -webkit-backdrop-filter:blur(6px) saturate(115%) brightness(1.05);
    backdrop-filter:blur(6px) saturate(115%) brightness(1.05);
    box-shadow:0 10px 30px rgba(4,10,24,.24);
    transition:background .25s ease, box-shadow .25s ease;
  }
  .btn-glass::after{
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:radial-gradient(130% 90% at 20% -40%, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 62%);
  }
  .btn-glass:hover{
    background:linear-gradient(180deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.22) 100%);
    box-shadow:0 12px 34px rgba(4,10,24,.30);
  }
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .btn-glass{background:rgba(255,255,255,.24);}
  }
  @media (prefers-reduced-transparency:reduce){
    .btn-glass{
      background:rgba(11,23,48,.88);
      -webkit-backdrop-filter:none; backdrop-filter:none;
    }
    .btn-glass::after{display:none;}
  }

  /* ---------- 1. CABEÇALHO ---------- */
  header{
    position:fixed; inset:0 0 auto 0; z-index:60;
    background:transparent;
    transition:box-shadow .3s ease;
  }
  /* vidro líquido: nasce invisível sobre o banner e entra quando o banner sai da tela */
  header::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(180deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.78) 100%);
    -webkit-backdrop-filter:blur(18px) saturate(150%);
    backdrop-filter:blur(18px) saturate(150%);
    opacity:0; transition:opacity .3s ease;
  }
  /* brilho de topo, o que dá o aspecto de vidro claro */
  header::after{
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 46%);
    opacity:0; transition:opacity .3s ease;
  }
  header.solid::before, header.solid::after{opacity:1;}
  header.solid{box-shadow:0 1px 0 rgba(14,22,38,.10), 0 12px 30px rgba(14,22,38,.09);}
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    header::before{background:rgba(255,255,255,.96);}
  }
  @media (prefers-reduced-transparency:reduce){
    header::before{-webkit-backdrop-filter:none; backdrop-filter:none; background:var(--white);}
    header::after{display:none;}
  }
  /* no vidro claro o conteúdo do cabeçalho inverte para leitura */
  header.solid .nav-links a{color:var(--muted);}
  header.solid .nav-links a:hover{color:var(--blue);}
  header.solid .burger{border-color:rgba(14,22,38,.35); color:var(--ink);}
  .brand .logo-azul{display:none;}
  header.solid .brand .logo-branca{display:none;}
  header.solid .brand .logo-azul{display:block;}

  .nav{
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
    height:var(--nav-h); gap:16px; transition:height .3s ease;
  }
  .nav-end{grid-column:3; display:flex; align-items:center; gap:10px; justify-self:end;}
  header.solid .nav{height:var(--nav-h-min);}
  .brand{display:inline-flex; align-items:center; text-decoration:none; justify-self:start;}
  @media (min-width:1000px){ .brand{grid-column:2; justify-self:center;} }
  /* a marca é um círculo: a mesma altura de uma logo deitada renderia pequena
     demais, por isso os valores sobem um pouco em relação aos antigos */
  .brand img{height:62px; width:auto; transition:height .3s ease;}
  @media (min-width:900px){ .brand img{height:88px;} }
  header.solid .brand img{height:56px;}
  /* Na página com banner, a logo do cabeçalho fica escondida até o cabeçalho ficar
     sólido (banner fora da tela). visibility, e não display, para o espaço dela
     continuar reservado e o menu não pular quando ela aparecer. */
  header[data-banner] .brand{transition:opacity .35s ease, visibility 0s linear .35s;}
  header[data-banner]:not(.solid) .brand{opacity:0; visibility:hidden;}
  header[data-banner].solid .brand{opacity:1; visibility:visible; transition-delay:0s;}
  @media (min-width:900px){ header.solid .brand img{height:74px;} }

  .nav-links{display:none; justify-self:start; align-items:center; gap:4px;}
  @media (min-width:1000px){ .nav-links{display:flex;} }
  .nav-links a{
    display:inline-flex; align-items:center; min-height:44px; padding:12px 15px;
    color:rgba(255,255,255,.9); text-decoration:none; font-size:.93rem; font-weight:600;
  }
  .nav-links a:hover{color:var(--white); text-decoration:underline; text-underline-offset:5px;}
  .nav-cta{display:none;}
  @media (min-width:1000px){ .nav-cta{display:inline-flex;} }
  /* (o azul da marca vale para todo .btn-primary; ver BOTÕES) */
  /* (o azul médio agora é o padrão de todo .btn-primary; ver BOTÕES) */
  .burger{
    border-radius:var(--raio);
    justify-self:end; display:inline-flex; width:48px; height:48px;
    align-items:center; justify-content:center;
    background:transparent; border:2px solid rgba(255,255,255,.85); color:var(--white); cursor:pointer;
  }
  @media (min-width:1000px){ .burger{display:none;} }

  /* Menu do celular em gaveta: entra deslizando pela direita, ocupa até 360px,
     e o resto da página escurece atrás. Fechado, fica fora da tela à direita e
     invisível para teclado e leitor de tela (visibility), sem sair do fluxo de
     transição, o que permite o deslize nos dois sentidos. */
  .panel-fundo{
    position:fixed; inset:0; z-index:69;
    background:rgba(8,16,36,.55);
    opacity:0; visibility:hidden;
    transition:opacity .4s var(--suave), visibility 0s linear .4s;
  }
  .panel{
    position:fixed; top:0; right:0; bottom:0; z-index:70;
    width:min(84vw, 360px);
    background:var(--white); color:var(--ink); padding:20px clamp(20px,6vw,40px) 40px; overflow-y:auto;
    box-shadow:-18px 0 48px rgba(4,10,24,.35);
    border-radius:var(--raio) 0 0 var(--raio);
    translate:100% 0; visibility:hidden;
    transition:translate .45s var(--suave-entrada), visibility 0s linear .45s;
  }
  .panel.open{translate:0 0; visibility:visible; transition-delay:0s;}
  .panel.open ~ .panel-fundo, .panel-fundo.open{opacity:1; visibility:visible; transition-delay:0s;}
  @media (min-width:1000px){ .panel, .panel-fundo{display:none;} }
  .panel-topo{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px;}
  .panel-logo{display:block; width:auto; height:50px;}
  .fechar{
    border-radius:var(--raio);
    display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:10px 14px;
    background:transparent; border:1.6px solid rgba(14,22,38,.25); color:var(--ink);
    font-size:.9rem; font-weight:600; cursor:pointer;
  }
  .fechar:hover{background:rgba(14,22,38,.06);}
  .fechar svg{width:15px; height:15px;}
  .panel a.plink{
    display:block; padding:18px 0; border-bottom:1px solid rgba(14,22,38,.12);
    color:var(--blue); text-decoration:none; font-size:1.1rem; font-weight:600;
  }
  .panel .btn{margin-top:22px;}

  /* ---------- 2. BANNER ---------- */
  .hero{position:relative; isolation:isolate; color:var(--white); background:var(--navy); margin-bottom:-1px;}
  .hero-media{position:absolute; inset:0; z-index:-2; overflow:hidden;}
  .hero-media img{width:100%; height:100%; object-fit:cover; object-position:62% 50%;}
  /* o véu é o azul profundo da marca, e não preto: o banner ganha o tom do site
     em vez de um degradê neutro */
  .hero-veil{
    position:absolute; inset:0; z-index:-1;
    background:
      linear-gradient(90deg, rgba(0,42,77,.72) 0%, rgba(0,42,77,.60) 28%, rgba(0,42,77,.32) 46%, rgba(0,42,77,.04) 66%, rgba(0,42,77,0) 78%),
      linear-gradient(180deg, rgba(0,42,77,.32) 0%, rgba(0,42,77,0) 22%, rgba(0,42,77,0) 62%, rgba(0,42,77,.32) 100%);
  }
  @media (max-width:820px){
    .hero-media img{object-position:55% 50%;}
    /* No celular o texto ocupa de 29% a 82% da altura do banner, então o véu não
       pode sair inteiro. O que dava para abrir foi o resto: uma sombra curta no
       topo, só para os links do menu, uma janela clara na faixa da foto e um
       escurecimento gradual atrás do texto, bem mais fraco que antes. */
    .hero-veil{
      background:linear-gradient(180deg,
        rgba(0,42,77,.52) 0%,     /* sombra curta para os links do menu */
        rgba(0,42,77,.14) 15%,    /* janela: aqui a foto aparece */
        rgba(0,42,77,.12) 23%,
        rgba(0,42,77,.46) 38%,    /* atrás do título, onde fica a palavra em azul */
        rgba(0,42,77,.50) 62%,    /* atrás do parágrafo */
        rgba(0,42,77,.62) 100%);
    }
  }
  /* o banner não usa o espaçamento vertical das seções comuns: a distância até o
     cabeçalho é controlada só aqui, para a logo ocupar o alto do banner */
  .hero{padding-block:0;}
  .hero-inner{
    padding-top:calc(var(--nav-h) + clamp(24px,4vw,56px));
    padding-bottom:clamp(64px,8vw,120px);
  }
  .hero-copy{max-width:540px;}
  /* A marca fica na lateral esquerda do banner, acima do título. Enquanto o banner
     está na tela ela some do cabeçalho (ver logo abaixo): a mesma marca não
     aparece duas vezes ao mesmo tempo. */
  .hero-marca{display:block; width:auto; height:140px; margin-bottom:24px;}
  @media (min-width:900px){ .hero-marca{height:200px; margin-bottom:28px;} }
  /* uma palavra do título em azul da marca */
  .hero h1 .destaque{color:var(--blue-medio);}
  /* No celular o véu atrás do título é mais claro e o azul médio cai para 2,1:1,
     abaixo do legível. Ali fica o azul vivo, calibrado para 3,8:1 nessa faixa. */
  @media (max-width:820px){ .hero h1 .destaque{color:var(--blue-vivo);} }
  /* o título tem duas frases, então a medida é maior que a do título antigo de
     quatro palavras; o limite em 'ch' segura a quebra no lugar certo */
  .hero h1{font-size:clamp(1.8rem,4vw,2.8rem); line-height:1.14; max-width:19ch;}
  .hero p{margin-top:18px; font-size:clamp(1rem,1.6vw,1.08rem); line-height:1.65; color:rgba(255,255,255,.94); max-width:46ch;}
  /* assinatura da marca, abaixo do texto do banner */
  .hero-assina{margin-top:14px !important; font-weight:600; color:var(--blue-claro) !important; max-width:42ch;}
  .hero-ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px;}
  @media (max-width:460px){ .hero-ctas .btn{width:100%;} }

  /* ---------- ENTRADA DO BANNER ----------
     Roda uma vez, no carregamento. O estado escondido vive só dentro do
     @keyframes, nunca no estilo base: assim, se a animação for desligada por
     preferência de movimento, o texto já nasce visível em vez de ficar preso. */
  .hero-copy > *{animation:heroLateral .8s var(--suave-entrada) both;}
  .hero-copy h1{animation-delay:.15s;}
  .hero-copy p{animation-delay:.35s;}
  .hero-copy .hero-assina{animation-delay:.5s;}
  .hero-copy .hero-marca{animation-delay:0s;}
  .hero-ctas{animation-delay:.65s;}
  @keyframes heroLateral{
    from{opacity:0; translate:-32px 0;}
    to{opacity:1; translate:0 0;}
  }
  /* a palavra em destaque entra depois que o título termina de assentar */
  .hero h1 .destaque{animation:heroPalavra .55s var(--suave-entrada) both; animation-delay:.95s;}
  @keyframes heroPalavra{
    from{opacity:0; translate:-14px 0;}
    to{opacity:1; translate:0 0;}
  }
  @media (prefers-reduced-motion:reduce){
    .hero-copy > *, .hero h1 .destaque{animation:none;}
  }

  /* ---------- QUEM SOMOS ---------- */
  .quem-topo{
    display:grid; grid-template-columns:1fr; align-items:start;
    gap:clamp(26px,3vw,46px); margin-bottom:clamp(30px,4vw,48px);
  }
  .quem-topo > *{min-width:0;}
  .quem-topo .head{margin-bottom:0; max-width:none;}
  @media (min-width:960px){ .quem-topo{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);} }
  /* espaço reservado para o vídeo institucional, proporção 16:9 */
  .video-inst{width:100%; height:auto; aspect-ratio:16/9; display:block; background:#000; border-radius:var(--raio); overflow:hidden;}
  .quem{
    display:grid; grid-template-columns:1fr;
    gap:clamp(30px,4vw,56px);
  }
  .quem > *{min-width:0;}
  @media (min-width:760px){ .quem{grid-template-columns:repeat(2,1fr);} }
  /* Missão e Visão como dois cartões. O ícone fica na mesma linha do título, à
     esquerda dele, e o texto corre embaixo dos dois. Antes o ícone ficava
     centrado sobre um texto alinhado à esquerda, e os dois não conversavam. */
  .mvv{
    position:relative;
    display:grid; grid-template-columns:auto 1fr;
    grid-template-areas:"ico titulo" "texto texto";
    column-gap:16px; row-gap:14px; align-items:center;
    background:var(--paper); border-radius:var(--raio);
    padding:clamp(22px,2.6vw,32px);
  }
  /* ---------- Borda luminosa em CSS ----------
     Um feixe de luz azul percorre o contorno dos cartões de Missão e Visão e dos
     quatro valores, devagar. É um anel de 1,5px pintado por um gradiente cônico
     que gira; a máscara deixa só o anel visível. Sem WebGL, sem script. */
  /* O ângulo gira no próprio bloco e é herdado pelos dois pseudo-elementos, para
     o anel e o brilho andarem sempre juntos. --luz é o multiplicador de força
     do anel: 1 em repouso, mais alto no hover, com transição suave. */
  @property --varredura{ syntax:'<angle>'; inherits:true; initial-value:0deg; }
  @property --luz{ syntax:'<number>'; inherits:true; initial-value:1; }
  .valor{position:relative;}
  .mvv, .valor{--luz:1; animation:varredura 7s linear infinite;}
  /* o anel fino, sempre visível */
  .mvv::before, .valor::before{
    content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
    pointer-events:none; z-index:0;
    background:conic-gradient(from var(--varredura),
      transparent 0 58%,
      rgba(59,130,246,0) 66%,
      rgba(59,130,246,calc(.42 * var(--luz))) 80%,
      rgba(140,194,255,calc(.62 * var(--luz))) 88%,
      rgba(59,130,246,calc(.30 * var(--luz))) 94%,
      transparent 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite:exclude;
  }
  /* O brilho do LED. A ordem de pintura do CSS aplica o desfoque antes da
     máscara, então um pseudo-elemento só nunca vira brilho: a máscara recorta
     o desfoque em faixa e sobra um traço. Por isso são dois níveis. O .led::before
     é o filamento: um anel fino e forte, recortado pela máscara. O .led, por
     cima dele, desfoca esse filamento já recortado, e é aí que a luz se
     espalha como halo. A máscara do próprio .led tira a parte de dentro do
     bloco, para o halo ficar todo do lado de fora. */
  .led{
    position:absolute; inset:-44px; padding:44px; pointer-events:none; z-index:0;
    opacity:0; filter:blur(18px);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite:exclude;
    transition:opacity .45s var(--suave);
  }
  .led::before{
    content:""; position:absolute; inset:44px; border-radius:var(--raio); padding:4px;
    background:conic-gradient(from var(--varredura),
      transparent 0 60%,
      rgba(59,130,246,0) 68%,
      rgba(59,130,246,.85) 82%,
      rgba(140,194,255,1) 88%,
      rgba(59,130,246,.6) 94%,
      transparent 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite:exclude;
  }
  .mvv > :not(.led), .valor > :not(.led){position:relative; z-index:1;}
  @keyframes varredura{ to{ --varredura:360deg; } }
  @media (hover:hover){
    .mvv:hover, .valor:hover{--luz:1.8;}
    .mvv:hover .led, .valor:hover .led{opacity:1;}
  }
  @media (prefers-reduced-motion:reduce){ .mvv, .valor{animation:none;} }
  .mvv-ico{
    grid-area:ico; width:60px; height:60px; flex:none;
    background:transparent; color:var(--blue); border:0;
    display:grid; place-items:center;
  }
  .mvv-ico img{width:52px; height:52px; display:block;}
  .mvv h3{
    grid-area:titulo; align-self:center;
    font-size:1.02rem; font-weight:600; letter-spacing:.02em; text-transform:uppercase;
  }
  .mvv p{grid-area:texto; font-size:.97rem; line-height:1.72; color:var(--muted);}

  .sub-titulo{
    margin-top:clamp(34px,4vw,52px); margin-bottom:clamp(18px,2vw,24px);
    font-size:clamp(1.3rem,2.2vw,1.6rem); line-height:1.25;
  }
  /* Valores em lista de duas colunas: ícone à esquerda, título e texto à direita,
     como itens de uma relação. Quatro colunas apertavam o texto; uma só ficava
     comprida demais. */
  .valores{
    display:grid; grid-template-columns:1fr;
    gap:clamp(22px,2.6vw,34px) clamp(28px,4vw,60px);
  }
  .valores > *{min-width:0;}
  @media (min-width:760px){ .valores{grid-template-columns:repeat(2,1fr);} }
  .valor{
    display:grid; grid-template-columns:auto 1fr;
    grid-template-areas:"ico titulo" "ico texto";
    column-gap:16px; row-gap:6px; align-items:start;
  }
  .valor .ico{
    grid-area:ico; width:54px; height:54px; flex:none;
    background:transparent; color:var(--blue); border:0;
    display:grid; place-items:center;
  }
  .valor .ico img{width:46px; height:46px; display:block;}
  .valor h4{grid-area:titulo; align-self:center; min-height:54px; display:flex; align-items:center; font-size:1rem; font-weight:600; line-height:1.3;}
  .valor p{grid-area:texto; font-size:.93rem; line-height:1.65; color:var(--muted);}
  .head .pend{margin-top:18px;}
  .nota-pend{margin-top:12px; font-size:.9rem; line-height:1.6; color:var(--muted);}

  /* ---------- 4. SERVIÇOS ---------- */
  .svc{display:grid; grid-template-columns:1fr; gap:clamp(34px,5vw,76px);}
  .svc > *{min-width:0;}
  .svc-item{display:grid; grid-template-columns:1fr; gap:clamp(18px,2.4vw,36px); align-items:center;}
  .svc-item > *{min-width:0;}
  @media (min-width:760px){
    .svc-item{grid-template-columns:1fr 1fr;}
    /* a foto acompanha a altura do texto ao lado (o texto de carga seca é mais alto
       que a foto em 16:10) e nunca fica menor que uma foto 16:10 da coluna */
    .svc-item{align-items:stretch;}
    .svc-item .svc-foto{aspect-ratio:auto; min-height:clamp(260px,27vw,440px);}
    /* zigue-zague: no serviço do meio a foto troca de lado, e o texto ocupa a
       coluna que ela deixou. Sem fixar a linha, os dois cairiam um sob o outro. */
    .svc-item:nth-child(even) .svc-foto{grid-column:2; grid-row:1;}
    .svc-item:nth-child(even) .svc-txt{grid-column:1; grid-row:1;}
  }
  .svc-txt{display:grid; align-content:center; gap:12px;}
  /* os três serviços seguem o mesmo desenho da abertura da seção: frase de
     entrada em azul, corpo com os termos em negrito e uma linha de fecho */
  .svc-txt .desc-frase{font-weight:600; color:var(--blue);}
  .svc-txt .desc-fecho{margin-top:4px; padding-left:14px; border-left:3px solid var(--blue); font-weight:600; color:var(--ink);}
  /* área da foto: proporção fixa, para o cartão não mudar de altura quando a
     imagem entrar no lugar do marcador */
  .svc-foto{
    position:relative; aspect-ratio:16/10; overflow:hidden; border-radius:var(--raio);
    background:var(--white); border:1px solid var(--line);
    display:grid; place-content:center; justify-items:center; gap:10px;
    padding:20px; text-align:center;
  }
  .svc-foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  .svc-foto-dica{font-size:.86rem; line-height:1.5; color:var(--muted); max-width:34ch;}
  .svc-item .pend{justify-self:start;}
  .svc-item h3{font-size:clamp(1.24rem,1.9vw,1.62rem); font-weight:600; line-height:1.25;}
  .svc-item .desc{font-size:clamp(1rem,1.15vw,1.08rem); line-height:1.65; color:var(--muted);}
  /* depois da regra geral do .desc, para a cor valer */
  .svc-item .desc.desc-frase{color:var(--blue);}
  .svc-item .desc.desc-fecho{color:var(--ink);}
  /* Texto corrido justificado no site inteiro (pedido do cliente, ponto 6, depois
     estendido a todas as seções), com hifenização em português para a coluna
     estreita do celular não abrir buracos entre as palavras. Títulos, botões,
     rótulos e rodapé ficam alinhados à esquerda. */
  .hero p, .head p, .desc, .mvv p, .valor p, .ind p, .cta-faixa p,
  .depo p, .q-inner p, .quote-wrap .lead, .wa-apoio,
  .politica p, .politica li{
    text-align:justify; hyphens:auto; -webkit-hyphens:auto;
  }

  /* ---------- 5. EQUIPE ---------- */
  /* a foto vai para a direita, alternando com a última linha de serviços */
  @media (min-width:760px){
    .equipe-linha .svc-foto{grid-column:2; grid-row:1;}
    .equipe-linha .svc-txt{grid-column:1; grid-row:1;}
    /* o texto da equipe é longo: a foto acompanha a altura da coluna em vez de
       ficar solta no meio, e o recorte continua centrado */
    .equipe-linha{align-items:stretch;}
    .equipe-linha .svc-foto{aspect-ratio:auto; min-height:100%;}
  }

  /* ---------- GAVETAS: setas e pontos (só aparecem quando a fila rola) ---------- */
  .gaveta-nav{display:none; align-items:center; justify-content:space-between; gap:14px; margin-top:14px;}
  .gaveta-nav.ativa{display:flex;}
  .gaveta-pontos{display:flex; gap:8px;}
  .gaveta-pontos span{width:8px; height:8px; border-radius:50%; background:rgba(28,50,94,.22); transition:background .3s var(--suave), transform .3s var(--suave);}
  .gaveta-pontos span.atual{background:var(--blue); transform:scale(1.25);}
  .gaveta-setas{display:flex; gap:8px;}
  .gaveta-setas button{
    width:44px; height:44px; display:grid; place-items:center;
    border:1.5px solid var(--line); border-radius:var(--raio); background:var(--white); color:var(--blue);
    cursor:pointer; transition:background .3s var(--suave), border-color .3s var(--suave), opacity .3s var(--suave);
  }
  .gaveta-setas button:hover{border-color:var(--blue);}
  .gaveta-setas button:disabled{opacity:.35; cursor:default;}
  .gaveta-setas svg{width:18px; height:18px; display:block;}
  .arrastando, .arrastando *{user-select:none; cursor:grabbing;}

  /* ---------- 6. CLIENTES ---------- */
  .logo-wall{display:grid; gap:clamp(18px,2.6vw,32px);}
  .marquee{
    position:relative; overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
  .marquee-track{
    display:flex; gap:clamp(26px,4vw,52px); width:max-content;
    animation:marquee 52s linear infinite;
  }
  .marquee.rev .marquee-track{animation-direction:reverse; animation-duration:60s;}
  .logo-wall:hover .marquee-track{animation-play-state:paused;}
  @keyframes marquee{
    from{transform:translateX(0);}
    to{transform:translateX(calc(-50% - clamp(13px,2vw,26px)));}
  }
  .cliente{flex:none; width:150px; aspect-ratio:340/150; display:grid; place-items:center;}
  @media (min-width:640px){ .cliente{width:190px;} }
  .cliente img{width:100%; height:100%; object-fit:contain;}
  @media (prefers-reduced-motion:reduce){
    .marquee{-webkit-mask-image:none; mask-image:none;}
    .marquee-track{animation:none; flex-wrap:wrap; width:100%; justify-content:center;}
  }
  /* o subtítulo já abre a distância entre a esteira e as avaliações, então o
     bloco abaixo dele não precisa repetir o afastamento */
  #clientes .sub-titulo{margin-top:clamp(46px,5.5vw,74px);}
  .depos{margin-top:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,3vw,44px);}
  .depos > *{min-width:0;}
  /* mesma gaveta dos indicadores */
  @media (max-width:819px){
    .depos{
      display:flex; gap:18px;
      overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
      touch-action:pan-x pan-y; cursor:grab;
      margin-inline:calc(-1 * clamp(20px,4.6vw,72px));
      padding-inline:clamp(20px,4.6vw,72px);
      /* sem isso o encaixe ignora o recuo e puxa o primeiro cartão até a borda */
      scroll-padding-inline:clamp(20px,4.6vw,72px);
      padding-bottom:6px;
      scrollbar-width:none;
    }
    .depos::-webkit-scrollbar{display:none;}
    .depos > *{flex:0 0 min(80%, 340px); scroll-snap-align:start;}
  }
  .depo{display:flex; flex-direction:column; gap:12px;}
  /* Foto de quem avaliou. Enquanto a imagem não chega, mostra as iniciais sobre
     o azul da marca. Redondo de propósito: é a convenção de avatar, e a página
     inteira fica quadrada em volta dele, o que faz o rosto se destacar. */
  .depo-foto{
    width:56px; height:56px; border-radius:50%; overflow:hidden; flex:none;
    display:grid; place-items:center; margin-bottom:4px;
    background:var(--blue); color:var(--white);
    font-size:.95rem; font-weight:600; letter-spacing:.04em;
  }
  .depo-foto img{width:100%; height:100%; object-fit:cover; display:block;}
  /* align-self impede o SVG de esticar na largura da coluna. Sem isso o desenho
     das estrelas fica centrado dentro de uma caixa larga, desalinhado do nome. */
  .estrelas{display:block; height:17px; width:auto; align-self:flex-start;}
  .depo .quem-fala{font-size:1rem; font-weight:600; color:var(--ink);}
  .depo p{font-size:.96rem; line-height:1.7; color:var(--muted);}

  /* ---------- 7. FORMULÁRIO ---------- */
  .quote-wrap{
    border-radius:var(--raio); overflow:hidden;
    display:grid; grid-template-columns:1fr; gap:clamp(28px,4vw,48px);
    background:var(--blue-deep); color:var(--white); padding:clamp(28px,4vw,52px);   /* mais profundo que o botão, para o botão saltar */
  }
  .quote-wrap > *{min-width:0;}
  /* no computador: texto à esquerda, complemento e botão do WhatsApp à direita */
  @media (min-width:940px){ .quote-wrap{grid-template-columns:1fr 1.05fr; align-items:center;} }
  .quote-wrap h2{font-size:clamp(1.6rem,3vw,2.2rem); line-height:1.2;}
  .quote-wrap .lead{margin-top:14px; font-size:1rem; line-height:1.65; color:rgba(255,255,255,.9); max-width:52ch;}
  /* a marca abre o bloco, acima da etiqueta; num círculo branco para destacar
     do azul do cartão */
  .quote-marca{display:block; width:auto; height:110px; margin-bottom:24px; background:var(--white); border-radius:50%; padding:5px;}
  @media (max-width:600px){ .quote-marca{height:88px;} }
  .quote-chamada{font-weight:600; color:var(--white) !important;}
  .quote-alt{margin-top:24px; display:grid; gap:10px;}
  .quote-alt a{
    display:inline-flex; align-items:center; gap:10px; min-height:44px;
    color:var(--white); font-size:.95rem; font-weight:600; text-decoration:none;
  }
  .quote-alt a:hover{text-decoration:underline; text-underline-offset:4px;}
  form{display:grid; gap:14px;}

  .f-row{display:grid; grid-template-columns:1fr; gap:14px;}
  .f-row > *{min-width:0;}
  @media (min-width:560px){ .f-row.two{grid-template-columns:1fr 1fr;} }
  .field{display:grid; gap:7px;}
  .field label{font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.85);}
  .field label .opc{
    margin-left:6px; font-size:.72rem; font-weight:600; letter-spacing:.04em;
    text-transform:none; color:rgba(255,255,255,.6);
  }
  .field input, .field select, .field textarea{
    width:100%; font:inherit; font-size:.98rem; min-height:48px; padding:12px 14px;
    border:2px solid rgba(255,255,255,.35); border-radius:var(--raio);
    background:rgba(255,255,255,.10); color:var(--white);
    transition:border-color .2s ease, background .2s ease;
  }
  .field textarea{min-height:96px; resize:vertical; line-height:1.55;}
  .field select{
    appearance:none; -webkit-appearance:none; cursor:pointer;
    background-image:linear-gradient(45deg, transparent 50%, rgba(255,255,255,.75) 50%), linear-gradient(135deg, rgba(255,255,255,.75) 50%, transparent 50%);
    background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%;
    background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
    padding-right:40px;
  }
  .field select option{background:var(--blue-deep); color:var(--white);}
  .field input::placeholder, .field textarea::placeholder{color:rgba(255,255,255,.55);}
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:none; border-color:var(--white); background:rgba(255,255,255,.18);
  }
  .field.err input, .field.err select, .field.err textarea{border-color:#FFC9C9; background:rgba(255,0,0,.10);}
  .field .msg{font-size:.82rem; color:#FFD9D9; min-height:0;}
  .f-note{font-size:.84rem; line-height:1.55; color:rgba(255,255,255,.8);}
  .wa-col{display:grid; gap:18px; align-content:center;}
  .wa-apoio{font-size:.96rem; line-height:1.6; color:rgba(255,255,255,.85);}
  .btn-wa{padding:18px 32px; font-size:1.04rem; line-height:1;}
  .btn-wa .wa-ico{display:block; flex:none; width:22px; height:22px;}
  .ok{
    border-radius:var(--raio);
    display:none; background:var(--white); color:var(--ink);
    border-left:3px solid var(--blue); padding:26px;
  }
  .ok.show{display:block;}
  .ok h3{font-size:1.2rem; margin-bottom:10px;}
  .ok p{font-size:.96rem; line-height:1.65; color:var(--muted);}
  .ok .acts{display:flex; flex-wrap:wrap; gap:12px; margin-top:20px;}

  /* ---------- 8. FAQ ---------- */
  /* cabeçalho do FAQ: título à esquerda, ocultador da lista à direita */
  .faq-topo{
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:24px; flex-wrap:wrap; max-width:900px; margin-bottom:clamp(30px,4vw,48px);
  }
  .faq-topo .head{margin-bottom:0;}
  /* altura de uma linha do h2, para o botão poder se alinhar a ela */
  .faq-topo{--h2-linha:calc(clamp(1.7rem,3.4vw,2.4rem) * 1.18);}
  .faq-toggle{
    display:inline-flex; align-items:center; gap:10px; flex:none;
    /* Desce até a linha do "Perguntas frequentes": 15px do rótulo "Dúvidas",
       mais os 12px de respiro acima do h2, mais metade da linha do h2, menos
       metade da altura do próprio botão. Como a parte do h2 é calculada, os
       dois seguem centrados na mesma linha quando a tela muda de tamanho. */
    margin-top:calc(27px + (var(--h2-linha) / 2) - 24.5px);
    min-height:48px; padding:13px 22px; border:2px solid var(--blue); border-radius:var(--raio);
    background:transparent; color:var(--blue); font-weight:700; font-size:.95rem;
    cursor:pointer; transition:background .2s ease, color .2s ease;
  }
  /* Depois de 700px o botão desce para a linha de baixo e deixa de dividir a
     linha com o título, então o recuo que o alinhava perde a função. A regra
     precisa vir depois da de cima: media query não vale mais que outra regra,
     quem decide é a ordem de escrita. */
  @media (max-width:700px){ .faq-toggle{margin-top:0;} }
  .faq-toggle:hover{background:var(--blue); color:var(--white);}
  .faq-toggle-ico{position:relative; flex:none; width:16px; height:16px;}
  .faq-toggle-ico::before,.faq-toggle-ico::after{
    content:""; position:absolute; left:0; top:7px; width:16px; height:2px;
    background:currentColor; transition:transform .25s ease, opacity .25s ease;
  }
  .faq-toggle-ico::after{transform:rotate(90deg);}
  .faq-toggle[aria-expanded="true"] .faq-toggle-ico::after{transform:rotate(0); opacity:0;}

  .faq{display:grid; gap:0; border-top:1px solid var(--line); max-width:900px;}
  .q{border-bottom:1px solid var(--line);}
  .q-head{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
    min-height:60px; padding:18px 0; background:none; border:0; cursor:pointer;
    text-align:left; color:var(--ink); font-size:1rem; font-weight:600;
  }
  .q-head:hover{color:var(--blue);}
  .q-ico{position:relative; flex:none; width:18px; height:18px; color:var(--blue);}
  .q-ico::before,.q-ico::after{
    content:""; position:absolute; left:0; top:8px; width:18px; height:2px; background:currentColor;
    transition:transform .25s ease, opacity .25s ease;
  }
  .q-ico::after{transform:rotate(90deg);}
  .q.open .q-ico::after{transform:rotate(0); opacity:0;}
  .q-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s ease;}
  .q.open .q-body{grid-template-rows:1fr;}
  .q-inner{overflow:hidden;}
  .q-inner div{padding-bottom:22px; max-width:70ch;}
  .q-inner p{font-size:.95rem; line-height:1.7; color:var(--muted);}

  /* ---------- ENTRADA NA TELA ---------- */
  /* só entra em ação com JS ligado, para o conteúdo nunca ficar preso invisível */
  /* A entrada anda por 'translate' e 'scale', propriedades próprias, e não por
     'transform'. O hover usa 'transform', então os dois deixam de brigar pelo mesmo
     valor. Como esta regra substitui a transition inteira do bloco, ela precisa
     listar também o que o hover anima, senão a sombra e a borda entram de estalo. */
  .js .rv-group > *{opacity:0; translate:0 16px;}
  .js .rv-group.visivel > *{
    opacity:1; translate:0 0;
    transition:opacity 1.1s var(--suave-entrada), translate 1.1s var(--suave-entrada),
               transform .45s var(--suave), box-shadow .45s var(--suave),
               border-color .45s var(--suave), background .45s var(--suave),
               --luz .45s var(--suave);
  }
  /* um botão que é filho direto do grupo herdaria só a transição de entrada e
     perderia a do hover (faixa, brilho, fundo); aqui as duas ficam juntas, para
     ele reagir igual ao botão do banner */
  .js .rv-group.visivel > .btn{
    transition:opacity 1.1s var(--suave-entrada), translate 1.1s var(--suave-entrada),
               --desloca var(--suave-brilho), --faixa var(--suave-brilho), --brilho var(--suave-brilho),
               --fundo .25s ease, color .2s ease;
  }
  .js .rv-group.visivel > *:nth-child(2){transition-delay:.25s;}
  .js .rv-group.visivel > *:nth-child(3){transition-delay:.50s;}
  .js .rv-group.visivel > *:nth-child(4){transition-delay:.75s;}
  .js .rv-group.visivel > *:nth-child(5){transition-delay:1s;}
  .js .rv-group.visivel > *:nth-child(n+6){transition-delay:1.15s;}
  /* dentro do cabeçalho de seção o texto entra depois do título */
  .js .head.rv-group.visivel h2{transition-delay:.2s;}
  .js .head.rv-group.visivel p{transition-delay:.45s;}
  .js .rv-group .mvv-ico, .js .rv-group .ico{
    opacity:0; scale:.94;
    transition:opacity 1.1s var(--suave-entrada), scale 1.1s var(--suave-entrada),
               transform .45s var(--suave), background .45s var(--suave),
               border-color .45s var(--suave);
  }
  .js .rv-group.visivel .mvv-ico, .js .rv-group.visivel .ico{opacity:1; scale:1;}
  @media (prefers-reduced-motion:reduce){
    .js .rv-group > *,
    .js .rv-group .mvv-ico, .js .rv-group .ico{
      opacity:1 !important; transform:none !important;
      translate:none !important; scale:none !important; transition:none !important;
    }
  }

  /* ---------- SERVIÇOS: ENTRADA POR PARTES ----------
     Cada linha de serviço entra quando chega na tela, em três tempos, todos com o
     mesmo movimento do resto do site: a foto sobe, depois o título, depois os
     parágrafos, um atrás do outro. A linha em si deixa de animar como bloco (a
     regra geral do .rv-group é anulada aqui). O estado de partida vive só com
     JavaScript ligado (.js), então sem script tudo nasce visível. */
  .js .rv-group.svc > .svc-item{opacity:1; translate:none; transition:none;}
  .js .svc .svc-item .svc-foto,
  .js .svc .svc-item h3,
  .js .svc .svc-item .desc{
    opacity:0; translate:0 24px;
    transition:opacity 1.1s var(--suave-entrada), translate 1.1s var(--suave-entrada);
  }
  .js .svc .svc-item h3{transition-delay:.4s;}
  .js .svc .svc-item .desc{transition-delay:.8s;}
  .js .svc .svc-item .desc + .desc{transition-delay:1.1s;}
  .js .svc .svc-item .desc + .desc + .desc{transition-delay:1.4s;}
  .js .svc .svc-item.entra .svc-foto,
  .js .svc .svc-item.entra h3,
  .js .svc .svc-item.entra .desc{opacity:1; translate:0 0;}
  @media (prefers-reduced-motion:reduce){
    .js .svc .svc-item .svc-foto, .js .svc .svc-item h3, .js .svc .svc-item .desc{opacity:1; translate:none; transition:none;}
  }

  /* ---------- HOVER DOS BLOCOS ---------- */
  .ind, .mvv, .valor, .svc-item{
    transition:transform .45s var(--suave), box-shadow .45s var(--suave),
               border-color .45s var(--suave), background .45s var(--suave),
               --luz .45s var(--suave);
  }
  .mvv .mvv-ico, .valor .ico{
    transition:transform .45s var(--suave), background .45s var(--suave),
               border-color .45s var(--suave);
  }
  .svc-item h3{transition:color .45s var(--suave);}
  .valor{padding:14px; margin:-14px; border-radius:var(--raio);}
  @media (hover:hover){
    .ind:hover{
      transform:translateY(-5px);
      /* duas camadas: uma larga e fraca para o volume, uma curta para o contato */
      box-shadow:0 18px 44px rgba(28,50,94,.11), 0 4px 12px rgba(28,50,94,.06);
      border-color:var(--blue);
    }
    /* sem sombra cinza no hover: quem faz o papel dela é o brilho azul do anel */
    .mvv:hover, .valor:hover{
      transform:translateY(-4px);
      background:var(--paper);
    }
    .mvv:hover .mvv-ico, .valor:hover .ico{transform:scale(1.05);}
    .svc-item:hover h3{color:var(--blue);}
  }
  @media (prefers-reduced-motion:reduce){
    .ind:hover, .mvv:hover, .valor:hover{transform:none;}
  }

  /* ---------- INDICADORES ---------- */
  .inds{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,44px);}
  .inds > *{min-width:0;}
  /* Gaveta no celular: os cartões ficam lado a lado numa fila que desliza para
     o lado, um por vez, com o seguinte aparecendo na borda para convidar o dedo.
     A fila sangra até a borda da tela, por isso as margens negativas desfazem o
     recuo do .wrap e o padding devolve o alinhamento do primeiro cartão. */
  @media (max-width:899px){
    .inds{
      display:flex; gap:14px;
      overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
      touch-action:pan-x pan-y; cursor:grab;
      margin-inline:calc(-1 * clamp(20px,4.6vw,72px));
      padding-inline:clamp(20px,4.6vw,72px);
      /* sem isso o encaixe ignora o recuo e puxa o primeiro cartão até a borda */
      scroll-padding-inline:clamp(20px,4.6vw,72px);
      padding-bottom:6px;
      scrollbar-width:none;
    }
    .inds::-webkit-scrollbar{display:none;}
    .inds > *{flex:0 0 min(78%, 320px); scroll-snap-align:start;}
  }
  .ind{
    padding:22px 20px 22px 22px; border-left:3px solid var(--blue); background:var(--white);
    border-radius:var(--raio); overflow:hidden;
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  }
  .ind .n{
    font-size:clamp(2rem,3.6vw,2.7rem); font-weight:700; line-height:1;
    letter-spacing:-.03em; color:var(--blue);
  }
  .ind h3{margin-top:12px; font-size:1rem; font-weight:700; line-height:1.3;}
  .ind p{margin-top:8px; font-size:.9rem; line-height:1.6; color:var(--muted);}
  .ind .pend{margin-bottom:6px;}

  /* ---------- CHAMADAS ---------- */
  .cta-faixa{
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  .cta-faixa .interno{
    display:grid; gap:20px; align-items:center;
    padding-block:clamp(30px,4vw,44px);
  }
  @media (min-width:860px){
    .cta-faixa .interno{grid-template-columns:1fr auto; gap:36px;}
  }
  .cta-faixa h2{font-size:clamp(1.3rem,2.4vw,1.7rem); line-height:1.25;}
  .cta-faixa p{margin-top:10px; font-size:.98rem; line-height:1.6; color:var(--muted); max-width:56ch;}

  /* ---------- 9. RODAPÉ ---------- */
  footer{background:var(--navy); color:var(--white); border-top:1px solid var(--line-dark);}
  .foot{
    padding-block:clamp(36px,4vw,52px) clamp(26px,3vw,36px);
    display:grid; grid-template-columns:1fr; gap:30px;
  }
  .foot > *{min-width:0;}
  @media (min-width:760px){
    .foot{
      grid-template-columns:minmax(0,auto) auto auto;
      justify-content:start;
      column-gap:clamp(46px,7vw,110px);
    }
  }
  .foot img{height:76px; width:auto;}
  /* a logo é link, mas não é link de texto: sem altura mínima, sem recheio, sem cor */
  .foot .foot-marca{display:inline-block; min-height:0; padding:0; line-height:0; transition:opacity .3s var(--suave);}
  .foot .foot-marca:hover{opacity:.82;}
  .foot .about{margin-top:14px; font-size:.92rem; line-height:1.6; color:rgba(255,255,255,.78); max-width:34ch;}
  .foot .registro{margin-top:18px; display:flex; flex-wrap:wrap; gap:8px;}
  .foot h4{font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.7); margin-bottom:14px;}
  /* Peso único para o corpo do rodapé. Só os títulos das colunas ficam em 700. */
  .foot a, .foot .lin, .foot .about, .foot .registro{font-weight:600;}
  .foot a, .foot .lin{
    display:block; min-height:40px; padding:7px 0; font-size:.93rem; line-height:1.45;
    text-decoration:none;
  }
  /* Todo link do rodapé com o mesmo tratamento: branco cheio, sem sublinhado,
     e azul claro no hover. Telefone, e-mail e navegação não se distinguem entre si. */
  .foot a{color:var(--white); letter-spacing:.01em; transition:color .3s var(--suave);}
  .foot a:hover{color:var(--blue-claro); text-decoration:none;}
  .foot .lin{color:rgba(255,255,255,.78);}
  .redes{display:flex; gap:18px; margin-top:16px;}
  /* Só o desenho, sem moldura. A área de 44px continua existindo, invisível,
     para o toque no celular ter alvo do tamanho recomendado. */
  .redes a{
    display:grid; place-items:center; width:44px; height:44px; padding:0; margin:-8px;
    border:0; color:rgba(255,255,255,.85);
    transition:color .3s var(--suave), transform .3s var(--suave);
  }
  .redes a:hover{color:var(--white); transform:translateY(-2px); text-decoration:none;}
  .redes svg{width:28px; height:28px; display:block;}
  .foot-end{
    border-top:1px solid var(--line-dark); padding-block:20px;
    display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
    font-size:.82rem; color:rgba(255,255,255,.72);
  }
  .vex{display:inline-flex; align-items:center; gap:7px; text-decoration:none; color:rgba(255,255,255,.72); transition:transform .3s ease, color .3s ease;}
  .vex:hover{transform:scale(1.06); color:var(--white);}
  .vex svg{height:14px; width:auto;}
  .vex svg path{fill:currentColor;}


  /* ---------- POLÍTICA DE PRIVACIDADE ---------- */
  .politica{max-width:78ch;}
  .politica h3{margin-top:clamp(26px,3vw,34px); font-size:1.05rem; font-weight:700;}
  .politica p{margin-top:14px; font-size:.96rem; line-height:1.75; color:var(--muted);}
  .politica ul{margin-top:14px; display:grid; gap:10px;}
  .politica li{
    position:relative; padding-left:20px; font-size:.96rem; line-height:1.7; color:var(--muted);
  }
  .politica li::before{
    content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; background:var(--blue);
  }
  .politica .vigencia{margin-top:26px; font-size:.9rem; color:var(--muted);}
  /* páginas internas: o cabeçalho é fixo e opaco desde o topo */
  .pagina-interna{padding-top:calc(var(--nav-h) + clamp(30px,4vw,52px));}
  .pagina-interna .head h1{font-size:clamp(1.7rem,3.4vw,2.4rem); line-height:1.18; margin-top:12px;}
  .volta-site{
    display:inline-flex; align-items:center; gap:9px; min-height:44px;
    margin-bottom:20px; font-size:.93rem; font-weight:600;
    text-decoration:none; color:var(--blue);
  }
  .volta-site:hover{text-decoration:underline; text-underline-offset:4px;}
  .volta-site svg{width:16px; height:16px;}