/* ============================================================
   Analítica RH · sistema visual do site
   Tipografia: Newsreader (títulos) · Poppins (rótulos e interface) · Lato (texto)
   Cor: azul da marca + acento quente. Todas as combinações de texto
   passam em 4,5:1; elementos de interface em 3:1.
   ============================================================ */

/* ---------- fontes, servidas do próprio domínio ---------- */
@font-face{font-family:Newsreader;src:url(/assets/fonts/newsreader-latin.woff2?v=62981321d9) format('woff2-variations');
  font-weight:200 800;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Newsreader;src:url(/assets/fonts/newsreader-latin-ext.woff2?v=ac6fa9ed53) format('woff2-variations');
  font-weight:200 800;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-500-latin.woff2?v=cd36de204a) format('woff2');font-weight:500;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-500-latin-ext.woff2?v=af5fda16a1) format('woff2');font-weight:500;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-600-latin.woff2?v=f4e80d9dfd) format('woff2');font-weight:600;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-600-latin-ext.woff2?v=bb1f2d582e) format('woff2');font-weight:600;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-700-latin.woff2?v=9338e65fc0) format('woff2');font-weight:700;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-700-latin-ext.woff2?v=ccfd87f69e) format('woff2');font-weight:700;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:Lato;src:url(/assets/fonts/lato-400-latin.woff2?v=918b7dc3e2) format('woff2');font-weight:400;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Lato;src:url(/assets/fonts/lato-400-latin-ext.woff2?v=8b9fc97370) format('woff2');font-weight:400;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Lato;src:url(/assets/fonts/lato-700-latin.woff2?v=c447dd7677) format('woff2');font-weight:700;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Lato;src:url(/assets/fonts/lato-700-latin-ext.woff2?v=3a5797f440) format('woff2');font-weight:700;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Lato;src:url(/assets/fonts/lato-400i-latin.woff2?v=bca1d88ada) format('woff2');font-weight:400;font-style:italic;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---- a escala tipográfica ----
   Eram onze tamanhos distintos na mesma tela: 12, 14, 15, 15,5, 16, 17, 19, 23
   e os três fluidos. Entre 14 e 17 havia quatro degraus, todos menores que 7%,
   que é menos do que o olho separa: a leitura registrava isso como desalinho,
   não como hierarquia.

   São sete degraus agora, e nenhum deles é menor que 1,15. A conta foi feita
   nas seis larguras de medição e também nas faixas entre elas, porque um
   clamp atravessa valores intermediários e pode encostar num tamanho fixo no
   meio do caminho. Foi o que obrigou duas decisões:

   - o piso do --f3 subiu de 22 para 23. Com --f5 em 20, 22 dava 1,10 e 23 dá
     exatamente 1,15. Abaixo de 1046px de viewport o --f3 fica no piso, então
     essa é a razão que vale na maior parte das telas;
   - o --f4 deixou de ser 23 fixo e passou a ser o próprio --f3. Um h3 de 23
     ao lado de um --f3 que varia de 23 a 27 encostava em 1,08 perto de
     1180px. Como os dois são título de bloco, virar um degrau só resolve o
     encosto e ainda tira um tamanho da conta.

   A escala não tem razão constante, e não deve ter: 12→14 é 1,167, 14→17 é
   1,214, 17→20 é 1,176, 20→23 é 1,15. Os fluidos abrem mais porque separam
   níveis de página, não de parágrafo. */
:root{
  /* corpos */
  --f1:clamp(34px,5.9vw,82px);   /* h1. O teto era 56 e cortava o desktop em 1440,
                                    onde o 5,9vw pediria 85. No celular quem governa
                                    e o piso de 34, que ja funcionava. */
  --f2:clamp(28px,3.2vw,38px);   /* h2 de seção */
  --f3:clamp(23px,2.2vw,27px);   /* h2 dentro do artigo, citação, e h3 */
  --f4:var(--f3);                /* h3. Era 23px fixo */
  --f5:20px;                     /* lead e parágrafo do método. Era 19 */
  --f6:17px;                     /* corpo de cartão e de coluna. Era 16, e o 16
                                    ficava a 6% do 17 do corpo da página */
  --f7:14px;                     /* meta, rótulo de função, rodapé, interface */
  --f8:12px;                     /* eyebrow, selo, título de rodapé */
  /* entrelinhas */
  --lh-tit:1.14;
  --lh-sub:1.24;
  --lh-txt:1.65;
  --lh-art:1.72;                 /* corpo de artigo, linha mais aberta */
  /* grade de 8 */
  --s0:4px;                      /* meio-passo da grade, só para ajuste ótico */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px;
  --s6:48px; --s7:56px; --s8:64px; --s9:72px; --s10:88px;
  --gap-tit:var(--s5);           /* título → conteúdo, um valor só */
  --medida:50ch;                 /* coluna de leitura. O valor era 56ch, e a nota antiga
                                    dizia que isso dava ~66 caracteres por linha. A
                                    medição desmentiu: 56ch na Lato de 17px são 552px,
                                    e 552px cabem 77 caracteres. O ch mede a largura do
                                    zero, que é mais estreito que a letra média, e o erro
                                    estava em tratar um pelo outro. 50ch fica na casa
                                    dos 68, que é a faixa confortável de leitura. Como
                                    o ch acompanha o corpo do elemento, a contagem de
                                    caracteres se mantém em qualquer tamanho de texto. */

  --navy:#0F3C5C; --night:#08283F; --preto:#061E31;
  --azul:#1B6E97; --azul-cl:#7FC4E6;
  --terra:#A85A28; --terra-cl:#E8A472;
  --ink:#0E1114; --body:#3F637C; --mute:#5A7288;
  --line:#7A8A99; --grid:#C9D3DC; --hair:#DDE3E9; --surf:#F5F7F9; --surf2:#EBF0F4;
  /* Largura da página. Era 1180, e com a coluna de leitura terminando em 942
     sobravam 368px vazios à direita de todo bloco de lista, enquanto os blocos
     de cartão iam até o fim. O olho via a borda direita oscilar a cada rolagem.
     Em 1060 a sobra cai para cerca de 200px e lê como margem. */
  --max:1060px;
  --calha:180px;                 /* coluna do rótulo nos blocos de lista */
  --medida-larga:780px;          /* listas em duas colunas, onde cada linha é curta */

  /* ---- camada de interface ----
     Menu, botão, link de apoio e rodapé usavam 15px, 15,5px, 10px, 11px e
     14px cravados à mão, fora do sistema. Eram 180 valores em pixel contra
     214 tokens no arquivo inteiro, quase metade das decisões de medida sendo
     tomada localmente. A tokenização preservou os valores; a escolha da escala
     é que os mudou, e agora eles mudam num lugar só.
     O --gap-ui ainda não está na grade de 8: ele vira 8 ou 12 na escolha. */
  --f-ui:var(--f7);              /* interface. Era 15px, um degrau a 7% do 14 */
  --s1h:12px;                    /* meio passo entre --s1 e --s2 */
  --s1q:11px;                    /* herdado, fora da grade. Some na escolha */
  --gap-ui:10px;                 /* espaço entre rótulo e seta */
  --pad-btn:14px;                /* altura interna do botão */
  --tit:Newsreader,Georgia,'Times New Roman',serif;
  --ui:Poppins,-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --txt:Lato,-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* O cabeçalho é fixo e tem 89px acima de 1040. Sem esta margem, "Ir para o
   conteúdo" levava o foco para um ponto que ficava embaixo dele, e a pessoa
   que usa teclado chegava ao conteúdo sem ver o começo dele. Vale para
   qualquer âncora, não só para o pular. */
:target,#conteudo{scroll-margin-top:calc(var(--s8) + var(--s3))}
body{font-family:var(--txt);color:var(--body);font-size:var(--f6);line-height:var(--lh-txt);
  background:#fff;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--tit);color:var(--ink);font-weight:600;letter-spacing:-.012em}
h1,h2{line-height:var(--lh-tit);text-wrap:balance}
h3{line-height:var(--lh-sub)}
p,li{text-wrap:pretty}
h4{font-family:var(--ui)}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--s4)}
.eyebrow{font-family:var(--ui);font-size:var(--f8);font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--azul);margin-bottom:var(--s2);display:block}
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
  background:var(--navy);color:#fff;font-family:var(--ui);font-size:var(--f7);z-index:200}
.skip:focus{width:auto;height:auto;clip:auto;left:var(--s1);top:var(--s1);padding:var(--s2) var(--s3)}
:focus-visible{outline:2.5px solid var(--azul);outline-offset:3px;border-radius:2px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--hair)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--s10);gap:var(--s4)}
.brand{flex:none}
.brand img{width:176px;height:auto}
.menu{display:flex;align-items:center;gap:var(--s4);font-family:var(--ui);font-size:var(--f-ui);
  font-weight:500;color:var(--navy)}
.menu a{position:relative;padding:var(--gap-ui) 0;white-space:nowrap}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:4px;height:2px;
  background:var(--terra);transition:right .28s ease}
.menu a:hover::after{right:0}
.btn{display:inline-flex;align-items:center;gap:var(--gap-ui);font-family:var(--ui);font-size:var(--f-ui);
  font-weight:600;padding:var(--pad-btn) var(--s3);border-radius:3px;transition:.22s ease;white-space:nowrap}
.btn-p{background:var(--navy);color:#fff}
.btn-p .ar{color:var(--terra-cl)}
.btn-p:hover{background:var(--night);transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(15,60,92,.6)}
.btn-s{color:var(--navy);border:1.5px solid var(--line)}
.btn-s:hover{border-color:var(--terra);color:var(--terra)}
.btn .ar{transition:transform .22s ease}
.btn:hover .ar{transform:translateX(3px)}

.mob{display:none;position:relative}
.mob summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--gap-ui);
  font-family:var(--ui);font-size:var(--f-ui);font-weight:600;color:var(--navy);padding:var(--s1h) 6px;min-height:44px}
.mob summary::-webkit-details-marker{display:none}
.mob .bars{width:20px}
.mob .bars i{display:block;height:2px;background:var(--navy);margin:4px 0}
.mob[open] .panel{display:block}
.mob .panel{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;
  border-bottom:1px solid var(--hair);box-shadow:0 18px 32px -22px rgba(8,40,63,.5);padding:var(--s1) 0 var(--s3)}
.mob .panel a{display:block;padding:var(--s2) var(--s4);font-family:var(--ui);font-size:var(--f-ui);
  font-weight:500;color:var(--navy);border-top:1px solid var(--hair)}
.mob .panel a.sub{padding-left:var(--s6);color:var(--body)}
.mob .panel .cta{margin:var(--s2) var(--s3) 0;text-align:center;background:var(--navy);color:#fff;
  border-radius:3px;padding:15px var(--s2);border:0;font-weight:600}

/* ---------- hero ---------- */
/* O hero comecava 88px abaixo do cabecalho e o titulo parecia ter escorregado
   para baixo. Em 40px ele comeca junto, e ainda respira. */
.hero{position:relative;overflow:hidden;padding:var(--s5) 0 var(--s7);
  background-image:radial-gradient(680px 560px at 86% 6%, rgba(168,90,40,.16), rgba(168,90,40,0) 66%)}
.hero .glyph{position:absolute;right:2%;top:50%;transform:translateY(-50%);
  width:min(28vw,340px);opacity:.09;pointer-events:none}
.hero .wrap{position:relative;z-index:2}
.hero h1{font-size:var(--f1);max-width:17ch;font-weight:600}
.hero p.sup{margin-top:var(--s3);max-width:52ch;font-size:var(--f5)}
.hero .acts{margin-top:var(--s5);display:flex;gap:var(--s2);flex-wrap:wrap}

/* ---------- seções ---------- */
main section{padding:var(--s10) 0}
main section.tint,main section.dark{padding:var(--s9) 0}
.tint{background:var(--surf)}
.dark{background:var(--night);color:#D3E2EC}
.dark h2,.dark h3{color:#fff}
h2.sec{font-size:var(--f2);max-width:20ch}

/* ---------- método ---------- */
.method{display:grid;grid-template-columns:1fr 1.35fr;gap:var(--s9);align-items:start}
/* O 34em e o 56ch abaixo sobraram da calibragem antiga, anterior à medição
   que corrigiu o --medida. Ambos passavam de 70 caracteres por linha em
   faixas estreitas: 73 na home a 600px, 71 na NR-1 a 660. Agora seguem o
   token, que é o único lugar onde esse número deve ser decidido. */
.method .body{font-size:var(--f5);line-height:1.72;max-width:var(--medida)}
.method .body b{font-family:var(--txt);font-weight:700;color:var(--navy)}
.method .body .d{font-family:var(--txt);font-size:1em;font-weight:700;color:var(--navy);
  white-space:nowrap;box-shadow:inset 0 -.26em 0 rgba(168,90,40,.26)}
.lnk{margin-top:var(--gap-tit);display:inline-flex;align-items:center;gap:var(--gap-ui);font-family:var(--ui);
  font-weight:600;font-size:var(--f-ui);color:var(--azul);min-height:44px}
.lnk:hover{gap:15px}

/* ---------- competências ---------- */
.grid5{margin-top:var(--gap-tit);display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--grid);border:1px solid var(--grid)}
.card{background:#fff;padding:var(--s5) var(--s4) var(--s4);display:flex;flex-direction:column;
  min-height:232px;transition:.25s ease}
.card:hover{box-shadow:0 18px 48px -30px rgba(15,60,92,.5);z-index:2}
.card h3{font-size:var(--f4);margin-bottom:var(--s2);min-height:2lh}
.card p{font-size:var(--f6);line-height:var(--lh-txt)}
.card .tag{margin-top:auto;align-self:flex-start;font-family:var(--ui);font-size:var(--f8);
  font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#fff;
  background:var(--terra);padding:5px 9px;border-radius:2px}
.card .ar{margin-top:var(--s2);color:var(--navy);transition:transform .22s ease}
.card:hover .ar{transform:translateX(5px);color:var(--terra)}
.card-all{background:var(--navy);justify-content:flex-end}
.card-all h3{color:#fff;min-height:0}
.card-all .ar{color:var(--terra-cl)}
.card-all:hover .ar{color:#fff}

/* ---------- duas páginas ---------- */
.two{margin-top:var(--gap-tit);display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.pcard{border:1px solid rgba(255,255,255,.34);padding:var(--s5) var(--s4);
  display:flex;flex-direction:column;transition:.25s ease}
.pcard:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.6)}
.pcard h3{font-size:var(--f4);margin-bottom:var(--s2)}
.pcard p{font-size:var(--f6);color:#D3E2EC;flex:1}
.pcard .ar{margin-top:var(--s3);color:var(--azul-cl);transition:transform .22s ease}
.pcard:hover .ar{transform:translateX(5px)}

/* ---------- sócios ---------- */
.socios{margin-top:var(--gap-tit);display:grid;grid-template-columns:1fr 1fr;gap:var(--s7)}
.socio{display:flex;flex-direction:column}
.socio picture{display:block;margin-bottom:var(--s3);background:var(--surf)}
.socio picture,.socio img{width:100%;height:auto;border-radius:2px}
.socio img{object-fit:cover}
.socio h3{font-size:var(--f4);margin-bottom:4px}
.socio .fn{font-family:var(--ui);font-size:var(--f7);font-weight:600;
  color:var(--terra);margin-bottom:var(--s2)}
.socio p{font-size:var(--f6);line-height:1.62}

/* Variante da home: retrato ao lado do texto, não acima dele.
   Empilhado, cada retrato ocupava 663px contra 240px de texto, quase três
   vezes a altura do conteúdo que apresenta, e o bloco dos dois sócios comia um
   quarto da home inteira antes dos cartões de competência. Em A Analítica o
   retrato grande continua, porque lá a página existe para apresentar as
   pessoas. */
@media(min-width:981px){
  .socios.lado{grid-template-columns:1fr;gap:var(--s8)}
  /* As quatro linhas de texto medem o próprio conteúdo e a quinta absorve a
     altura que sobra do retrato. Sem ela, as linhas esticam para preencher os
     450px da foto e abrem buracos entre o nome, a função e o parágrafo. */
  .socios.lado .socio{display:grid;grid-template-columns:320px minmax(0,1fr);
    grid-template-rows:repeat(4,min-content) 1fr;column-gap:var(--s6);align-items:start}
  .socios.lado .socio>*{grid-column:2}
  .socios.lado .socio picture{grid-column:1;grid-row:1/-1;margin-bottom:0}
  /* Sem isto a coluna de texto fica com 628px e 81 caracteres por linha,
     23% acima dos ~66 que o próprio --medida define como teto. */
  /* 520px fixos, e não var(--medida): ch resolve contra o font-size de cada
     elemento, então o h3 de 23px recebia 786px e não era limitado por nada,
     enquanto o parágrafo recebia 520 e a lista 552. A borda direita do bloco
     virava quatro coordenadas. 520px dá 58 caracteres por linha a 16px. */
  .socios.lado .socio>:not(picture){max-width:520px}
  .socios.lado .socio .cred{margin-top:var(--s3)}
}

.cred{margin-top:auto;padding-top:var(--s2);list-style:none;border-top:1px solid var(--grid)}
.cred li{font-size:var(--f7);line-height:1.55;padding:4px 0 4px var(--s2);position:relative;color:var(--mute)}
.cred li::before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;
  background:var(--terra);border-radius:50%}
.conf{margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid var(--grid)}
.conf a{font-family:var(--ui);font-size:var(--f-ui);color:var(--navy);font-weight:500;min-height:44px}
.conf a .ar{display:inline;vertical-align:-2px;margin-left:var(--gap-ui);transition:transform .22s ease}
.conf a:hover{color:var(--terra)}
.conf a:hover .ar{transform:translateX(5px)}

/* ---------- depoimentos ---------- */
.depos{margin-top:var(--gap-tit);display:grid;grid-template-columns:1fr 1fr;gap:var(--s7)}
.depo{border-left:3px solid var(--terra);padding:var(--s1) 0 var(--s1) var(--s5);
  display:flex;flex-direction:column}
.depo blockquote{font-family:var(--tit);font-size:var(--f3);line-height:1.4;max-width:34ch;
  color:var(--ink);font-weight:400;text-wrap:balance}
.depo figcaption{margin-top:auto;padding-top:var(--s5);font-family:var(--ui);
  font-size:var(--f7);color:var(--mute)}
.depo figcaption b{display:block;color:var(--navy);font-weight:600;font-size:var(--f6)}

/* ---------- formas ---------- */
.formas{margin-top:var(--gap-tit);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--s5)}
.forma{border-top:1px solid var(--grid);padding-top:var(--s3)}
.forma h3{font-size:var(--f4);margin-bottom:var(--gap-ui)}
.forma p{font-size:var(--f6);max-width:44ch}

/* ---------- fecho ---------- */
.fim{background:var(--navy);color:#D3E2EC;padding:var(--s10) 0;position:relative;overflow:hidden;
  background-image:radial-gradient(640px 560px at 12% 104%, rgba(232,164,114,.22), rgba(232,164,114,0) 66%)}
.fim .wrap{position:relative;z-index:2;text-align:center}
.fim h2{color:#fff;font-size:var(--f2);max-width:20ch;margin:0 auto}
/* 58ch dava 80 caracteres na linha mais longa, e não 58: o ch mede o zero,
   que é mais estreito que a letra média, e o parágrafo do fecho corre a 20px.
   O --medida é o token que já carrega essa conta corrigida. */
.fim p{margin:var(--s3) auto 0;max-width:var(--medida);font-size:var(--f5)}
.fim .acts{margin-top:var(--s5);display:flex;gap:var(--s2);justify-content:center;flex-wrap:wrap}
.fim .btn-p{background:var(--terra);color:#fff}
.fim .btn-p .ar{color:#fff}
.fim .btn-p:hover{background:#8F4A1E;box-shadow:0 14px 32px -14px rgba(0,0,0,.5)}
.btn-w{border:1.5px solid rgba(255,255,255,.5);color:#fff}
.btn-w:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* ---------- rodapé ---------- */
footer{background:var(--preto);color:#A9C4D6;padding:var(--s9) 0 0;font-size:var(--f-ui);
  border-top:1px solid rgba(255,255,255,.10)}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--s6)}
footer .brand img{width:176px;height:auto;margin-bottom:var(--s3)}
footer .ftit{font-size:var(--f8);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;margin-bottom:var(--s2)}
footer ul{list-style:none}
footer li a{display:block;padding:var(--gap-ui) 0;line-height:1.4;min-height:44px}
footer a:hover{color:#fff;text-decoration:underline}
footer address{font-style:normal;line-height:1.7}
footer address a{text-decoration:underline;text-underline-offset:3px;display:inline-block;
  padding:var(--s1q) 0;min-height:44px}
.fnota{margin-top:var(--s6);font-size:var(--f7);color:#8FAFC4;max-width:var(--medida)}
.fbot{margin-top:var(--s3);border-top:1px solid rgba(255,255,255,.18);padding:var(--s3) 0 var(--s4);
  display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;font-size:var(--f7);color:#8FAFC4}

/* ---------- artigos ---------- */
/* nas internas existe o rótulo de volta acima do h1, que já ocupa 32px.
   Por isso o respiro do topo aqui é menor que o da home. */
.hero-p{padding:var(--s4) 0 var(--s6)}
.hero-p+section{padding-top:var(--s6)}

/* Sumário da política.
   A página tem 3.341 palavras em dez seções, e quem abre uma política de
   privacidade quase sempre quer uma coisa só: como apagar os dados, ou com
   quem falar. Sem índice, essa pessoa rola dezessete metros procurando. O
   art. 6º, VI da LGPD pede acesso facilitado à informação sobre o
   tratamento, e o índice é a forma mais barata de atender a isso. */
.sumario-sec,.hero-p+.sumario-sec{padding:var(--s2) 0 var(--s8)}
.sumario{padding-top:var(--s4);border-top:1px solid var(--grid);max-width:var(--medida-larga)}
/* O rótulo do sumário aceita h2 e p com a mesma aparência. Na política ele
   passou a ser p: o sumário é a navegação da página, e como h2 ele entrava na
   contagem de títulos e aparecia na navegação por cabeçalho de quem usa leitor
   de tela como se fosse uma seção da política. O nav continua nomeado, porque
   o aria-labelledby aponta para o id, que não mudou. */
.sumario h2,.sumario-t{font-family:var(--ui);font-size:var(--f8);font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--azul);margin-bottom:var(--s2)}
/* columns aceita largura mínima junto da contagem: duas colunas enquanto
   couberem 320px em cada, uma só abaixo disso. Sem essa largura mínima a
   lista ficava em duas colunas de 116px em tela de 320, e o texto saía da
   viewport levando a página inteira para o scroll horizontal. */
.sumario ol{list-style:none;counter-reset:sum;columns:320px 2;column-gap:var(--s7)}
.sumario li{counter-increment:sum;break-inside:avoid}
.sumario a{display:flex;align-items:center;gap:var(--s2);min-height:44px;
  font-family:var(--ui);font-size:var(--f6);color:var(--navy);
  border-bottom:1px solid var(--hair)}
.sumario a::before{content:counter(sum,decimal-leading-zero);flex:none;
  font-size:var(--f8);font-weight:700;color:var(--azul)}
.sumario a:hover{color:var(--terra)}
.sumario a:hover::before{color:var(--terra)}

/* A barra de navegação é sticky e tem 88px. Sem esta margem o título da seção
   alvo fica embaixo dela quando o link do sumário é clicado. */
main section[id]{scroll-margin-top:calc(var(--s10) + var(--s3))}
.hero-p h1{font-size:var(--f2);max-width:16ch}
.hero-p p.sup{margin-top:var(--s3);max-width:var(--medida);font-size:var(--f5)}

.lista-art{list-style:none;margin-top:var(--s2);border-top:1px solid var(--grid)}
.lista-art li{border-bottom:1px solid var(--grid)}
/* duas colunas: a data fica numa faixa própria à esquerda e o texto ocupa a
   largura restante, em vez de tudo se espremer na metade esquerda da tela */
.lista-art a{display:grid;grid-template-columns:200px minmax(0,1fr);gap:0 var(--s6);
  padding:var(--s6) 0;transition:.22s ease}
.lista-art a:hover{padding-left:var(--s2)}
.lista-art .quando{grid-column:1;padding-top:var(--s0)}
.lista-art .texto{grid-column:2}
.lista-art time{display:block;font-family:var(--ui);font-size:var(--f8);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--azul)}
.rev-lista{display:block;margin-top:var(--s1);font-family:var(--ui);font-size:var(--f8);
  font-weight:600;letter-spacing:.06em;color:var(--terra);text-transform:uppercase}
.lista-art h2{font-size:var(--f3);line-height:var(--lh-sub);max-width:30ch}
.lista-art a:hover h2{color:var(--terra)}
.lista-art p{margin-top:var(--s2);font-size:var(--f6);line-height:var(--lh-art);
  max-width:var(--medida)}
.lnk-art{display:inline-flex;align-items:center;gap:var(--s1);margin-top:var(--s3);
  font-family:var(--ui);font-size:var(--f6);font-weight:600;color:var(--navy)}
.lista-art a:hover .ar{transform:translateX(5px);color:var(--terra)}
.lnk-art .ar{transition:transform .22s ease}

/* A coluna de leitura fica no centro. Antes o texto era uma faixa estreita
   colada na esquerda com metade da tela vazia, e a linha da assinatura ia até
   a borda direita, 500px além de onde o texto terminava. */
.art .wrap{max-width:calc(var(--medida) + var(--s4) * 2)}
.art-cab{background:var(--surf);padding:var(--s8) 0 var(--s7);border-bottom:1px solid var(--grid)}
.volta{display:inline-flex;font-family:var(--ui);font-size:var(--f8);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--azul);margin-bottom:var(--s2);
  padding:var(--s0) 0;min-height:var(--s4)}
.volta:hover{color:var(--terra)}
.art-cab h1{font-size:var(--f2);line-height:var(--lh-sub)}
.art-lead{margin-top:var(--s3);font-size:var(--f5);line-height:var(--lh-txt)}
.art-meta{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--grid);
  font-family:var(--ui);font-size:var(--f7);color:var(--mute);
  display:flex;flex-wrap:wrap;gap:6px var(--s3);align-items:baseline}
.art-meta b{color:var(--navy);font-weight:600;font-size:var(--f6)}
.art-meta .rev{color:var(--terra)}

.art-corpo{padding:var(--s8) var(--s4)}
/* 478px, e não var(--medida).
   O .art .wrap é limitado à medida resolvida no corpo dele, que é 17px, e dá
   493px de conteúdo. O corpo do artigo, porém, corre a 20px: nesses 493px ele
   cabe 71 caracteres na linha mais longa, um acima da meta. O teto aqui é
   calibrado no tamanho em que o texto realmente corre, que é a lição que o
   --medida em ch existe para evitar e que esta combinação de dois tetos
   driblava. */
.art-corpo>*{max-width:478px}
.art-corpo p{font-size:var(--f5);line-height:var(--lh-art);margin-bottom:var(--s4)}
.art-corpo h2{font-size:var(--f3);line-height:var(--lh-sub);margin:var(--s7) 0 var(--s2);max-width:34ch}
.art-corpo h3{font-size:var(--f4);line-height:var(--lh-sub);margin:var(--s5) 0 var(--s1)}
.art-corpo strong,.art-corpo b{font-weight:700;color:var(--navy)}
.art-corpo ul,.art-corpo ol{margin:0 0 var(--s4) var(--s3);font-size:var(--f5);line-height:var(--lh-art)}
.art-corpo li{margin-bottom:var(--s2);padding-left:var(--s0)}
.art-corpo li::marker{color:var(--terra)}
.art-corpo a{color:var(--azul);text-decoration:underline;text-underline-offset:3px}
.art-corpo a:hover{color:var(--terra)}
.art-corpo hr{border:0;border-top:1px solid var(--grid);margin:var(--s7) 0 var(--s5)}
/* O rodapé do artigo, depois do último filete, corre a 17px enquanto o corpo
   corre a 20px, e herdava o teto de 478px escrito para os 20px. Abaixo de
   560px de janela nem esse teto pegava: quem limitava era o .wrap, com 472px
   de conteúdo, e 472px a 17px couberam 71 caracteres na linha mais cheia do
   artigo de IA, uma acima da meta. O teto próprio, em 450, é calibrado nos
   17px em que este texto realmente corre. */
.art-corpo hr:last-of-type~p,.art-corpo hr:last-of-type~h3+p{font-size:var(--f6);color:var(--mute);line-height:var(--lh-txt);max-width:450px}
.art-corpo hr:last-of-type~h3{font-size:var(--f8);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);margin:0 0 var(--s2)}

.art-assin{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s5) 0;
  border-top:1px solid var(--grid);border-bottom:1px solid var(--grid);max-width:var(--medida)}
.art-assin picture,.art-assin img{width:var(--s10);height:var(--s10);border-radius:50%;flex:0 0 var(--s10);
  object-fit:cover;object-position:50% 22%}
.art-assin b{display:block;font-family:var(--tit);font-size:var(--f4);color:var(--ink);font-weight:600}
.art-assin p{margin-top:var(--s0);font-size:var(--f6);line-height:var(--lh-txt)}

.art-comp{display:block;margin-top:var(--s5);max-width:var(--medida);padding:var(--s4);
  background:var(--surf);border-left:3px solid var(--terra);transition:.22s ease}
.art-comp:hover{background:var(--surf2)}
.art-comp:hover span{color:var(--body)}
.art-comp span{display:block;font-family:var(--ui);font-size:var(--f8);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.art-comp b{display:inline-flex;align-items:center;gap:var(--s1);margin-top:var(--s1);
  font-family:var(--tit);font-size:var(--f4);color:var(--navy);font-weight:600}
.art-comp:hover .ar{transform:translateX(5px);color:var(--terra)}
.art-comp .ar{transition:transform .22s ease}

/* ---------- carreiras ---------- */
.passos{margin-top:var(--gap-tit);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:var(--s5) var(--s6);
  counter-reset:p}
.passo{border-top:1px solid var(--grid);padding-top:var(--s3);counter-increment:p}
.passo h3{font-size:var(--f4);margin-bottom:var(--s1)}
.passo h3::before{content:counter(p);display:block;font-family:var(--ui);font-size:var(--f8);
  font-weight:700;letter-spacing:.14em;color:var(--terra);margin-bottom:var(--s1)}
.passo p{font-size:var(--f6);line-height:var(--lh-txt)}

/* ---------- páginas de competência ---------- */
/* O rótulo do grupo vira um trilho à esquerda e a lista ocupa a coluna de
   leitura, com o conjunto centrado. Antes era tudo empilhado numa faixa
   estreita colada na esquerda, com metade da tela vazia ao lado. */
.grupo{margin-top:var(--gap-tit);display:grid;
  grid-template-columns:var(--calha) minmax(0,var(--medida));gap:0 var(--s6);justify-content:start}
.grupo>*{grid-column:2}
/* Calha sem rótulo ganha um traço.
   Dos dezesseis blocos de lista do site, catorze são bloco único sob um h2
   próprio, e rotular esses catorze só repetiria o título logo acima. Tirar a
   calha deles foi pior: a coluna de leitura recuava para 774 enquanto os
   blocos com rótulo terminavam em 1002, e a borda direita voltava a oscilar.
   O traço marca o eixo sem inventar palavra, como regra de margem em livro. */
.grupo:not(:has(> .grupo-t))::before{content:"";grid-column:1;grid-row:1;
  align-self:start;margin-top:var(--s4);width:var(--s5);height:2px;background:var(--line)}
.grupo+.grupo{margin-top:var(--s7)}
.grupo-t{grid-column:1;grid-row:1;font-family:var(--ui);font-size:var(--f8);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mute);padding-top:var(--s4)}
.grupo-p{font-size:var(--f5);line-height:var(--lh-art)}
.solucoes{list-style:none;border-top:1px solid var(--grid)}
.solucoes li{border-bottom:1px solid var(--grid);padding:var(--s4) 0;font-size:var(--f5);
  line-height:var(--lh-art)}
.solucoes li b{color:var(--navy);font-weight:700}
/* Lista dentro de um item da lista. Existe por causa dos direitos do artigo 18
   na política: eram oito direitos numa frase só, de 170 palavras, e ninguém
   acha o seu direito lendo um parágrafo. Como item de .solucoes, cada linha
   herdaria o filete e o respiro de 32px do item pai, que são o desenho da
   lista de fora; aqui os dois saem e entra o marcador. */
.solucoes li > ul{list-style:disc;margin:var(--s2) 0 var(--s2) var(--s3)}
.solucoes li > ul > li{border:0;padding:2px 0;font-size:inherit;line-height:var(--lh-txt)}
.solucoes li > ul > li::marker{color:var(--terra)}
.lnk-int{display:inline-flex;align-items:center;gap:var(--s1);font-family:var(--ui);
  font-size:var(--f6);font-weight:600;color:var(--azul)}
.lnk-int .ar{flex:none}
.lnk-int:hover{color:var(--terra)}
.lnk-int .ar{transition:transform .22s ease}
.lnk-int:hover .ar{transform:translateX(5px)}

.entrega{margin-top:var(--gap-tit);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--s6)}
.entrega>div{border-top:1px solid rgba(255,255,255,.34);padding-top:var(--s3)}
.entrega h3{font-size:var(--f4);margin-bottom:var(--s2)}
.entrega p{font-size:var(--f6);line-height:var(--lh-art);color:#D3E2EC}

.conduz{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--s9);align-items:start}
.conduz-quem picture,.conduz-quem img{width:var(--s10);height:var(--s10);border-radius:50%;
  object-fit:cover;object-position:50% 22%;margin-bottom:var(--s3)}
.conduz-quem p{font-size:var(--f6);line-height:var(--lh-art);max-width:44ch}
.seguir{list-style:none;border-top:1px solid var(--grid);margin-top:var(--s1)}
.seguir li{border-bottom:1px solid var(--grid)}
.seguir a{display:block;padding:var(--s3) 0;transition:.22s ease}
.seguir a:hover{padding-left:var(--s1)}
.seguir b{display:block;font-family:var(--tit);font-size:var(--f4);color:var(--ink);font-weight:600}
.seguir b .ar{display:inline;vertical-align:-2px;margin-left:var(--s1)}
.seguir a:hover b{color:var(--terra)}
.seguir span{display:block;margin-top:var(--s0);font-size:var(--f6);color:var(--mute)}
.seguir .ar{color:var(--navy);transition:transform .22s ease}
.seguir a:hover .ar{transform:translateX(5px);color:var(--terra)}

.hero-p p.sup2{margin-top:var(--s3);font-size:var(--f6);color:var(--mute);max-width:52ch}
.method .body2{margin-top:var(--s4);font-size:var(--f6);color:var(--mute)}
.hub5{margin-top:var(--gap-tit)}
.hub5 span{max-width:80ch;font-size:var(--f5);line-height:var(--lh-art);color:var(--body)}
.dark-nota{margin-top:var(--s5);font-family:var(--ui);font-size:var(--f7);color:#A9C4D6}

/* ---------- contato ---------- */
.aviso{max-width:var(--medida)}
.aviso h2{font-size:var(--f4);margin-bottom:var(--s2)}
.aviso p{font-size:var(--f6);line-height:var(--lh-art);margin-bottom:var(--s3)}
.contato{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--s9);align-items:start}
.form{margin-top:var(--gap-tit);max-width:52ch}
.campo{margin-bottom:var(--s4)}
.campo label{display:block;font-family:var(--ui);font-size:var(--f7);font-weight:600;
  color:var(--navy);margin-bottom:var(--s1)}
.campo label i{font-style:normal;font-weight:500;color:var(--mute)}
.campo input,.campo textarea{width:100%;font-family:var(--txt);font-size:var(--f6);color:var(--ink);
  background:#fff;border:1.5px solid var(--grid);border-radius:3px;padding:var(--s1h) var(--s2);
  line-height:1.5;min-height:48px}
.campo textarea{resize:vertical;line-height:var(--lh-txt)}
.campo input:focus,.campo textarea:focus{border-color:var(--azul);outline:none;
  box-shadow:0 0 0 3px rgba(27,110,151,.16)}
.campo .micro{display:block;margin-top:var(--s1);font-style:normal;font-size:var(--f7);
  color:var(--mute);max-width:var(--medida)}
.campo-ok{display:grid;grid-template-columns:auto 1fr;gap:var(--s2);align-items:start}
.campo-ok input{width:20px;height:20px;min-height:20px;margin-top:3px;accent-color:var(--navy)}
.campo-ok label{font-weight:400;color:var(--body);font-family:var(--txt);font-size:var(--f6);
  line-height:var(--lh-txt);margin:0}
.campo-ok label a{color:var(--azul);text-decoration:underline;text-underline-offset:3px}
.lixo{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.canais{margin-top:var(--gap-tit);border-top:1px solid var(--grid)}
.canal{border-bottom:1px solid var(--grid);padding:var(--s4) 0}
.canal-t{font-family:var(--ui);font-size:var(--f8);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);margin-bottom:var(--s2)}
.canal p{font-size:var(--f6);line-height:var(--lh-art)}
/* A linha de função do sócio chegava a 82 caracteres, que é a linha mais longa
   do site: ela não tinha teto nenhum e herdava a largura da coluna. */
.socios-wa{list-style:none;margin-top:var(--s3)}
.socios-wa span,.socios-wa em{display:block;max-width:var(--medida)}
.socios-wa li+li{margin-top:var(--s2)}
.socios-wa a{display:block;padding:var(--s3);background:var(--surf);border-left:3px solid var(--terra);
  transition:.22s ease}
.socios-wa a:hover{background:var(--surf2)}
.socios-wa b{display:block;font-family:var(--tit);font-size:var(--f4);color:var(--ink);font-weight:600}
.socios-wa b .ar{display:inline;vertical-align:-2px;margin-left:var(--s1);color:var(--navy);
  transition:transform .22s ease}
.socios-wa a:hover b .ar{transform:translateX(5px);color:var(--terra)}
.socios-wa span{display:block;margin-top:var(--s0);font-family:var(--ui);font-size:var(--f7);color:var(--mute)}
.socios-wa em{display:block;margin-top:var(--s1);font-style:normal;font-family:var(--ui);
  font-size:var(--f6);font-weight:600;color:var(--navy)}

/* ---------- página de norma ---------- */
.norma{margin-top:var(--gap-tit);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--s6)}
.norma>div{border-top:1px solid var(--grid);padding-top:var(--s3)}
.norma h3{font-size:var(--f4);margin-bottom:var(--s2)}
.norma p{font-size:var(--f6);line-height:var(--lh-art)}
.norma .lnk-int{margin-top:var(--s3)}
.entrega-2{grid-template-columns:1fr 1fr}
.nota-legal{padding:var(--s6) 0!important;background:var(--surf);border-top:1px solid var(--grid)}
.nota-legal p{font-size:var(--f7);color:var(--mute);line-height:var(--lh-txt);max-width:var(--medida)}

.numeros{margin-top:var(--s4);font-family:var(--ui);font-size:var(--f7);font-weight:600;
  letter-spacing:.04em;color:var(--terra)}
.intro{margin-top:var(--gap-tit);font-size:var(--f5);line-height:var(--lh-art);max-width:var(--medida)}
.etapas{margin-top:var(--s6);list-style:none;counter-reset:e;display:grid;
  grid-template-columns:repeat(6,1fr);gap:var(--s5) var(--s6)}
.etapas li{grid-column:span 2}
.etapas li:nth-last-child(2),.etapas li:last-child{grid-column:span 3}
.etapas li{counter-increment:e;border-top:1px solid var(--grid);padding-top:var(--s3)}
.etapas h3{font-size:var(--f4);margin-bottom:var(--s1)}
.etapas h3::before{content:counter(e);display:block;font-family:var(--ui);font-size:var(--f8);
  font-weight:700;letter-spacing:.14em;color:var(--terra);margin-bottom:var(--s1)}
.etapas p{font-size:var(--f6);line-height:var(--lh-art)}
.conf-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6)}
.conf-2 p{font-size:var(--f6);line-height:var(--lh-art)}
.conf-2 b{color:var(--navy)}

.rascunho{background:#FFF3CD!important;padding:var(--s3) 0!important;
  border-bottom:2px solid var(--terra)}
.rascunho p{font-family:var(--ui);font-size:var(--f6);color:#6B3F12;max-width:var(--medida)}
.pend{display:inline-block;background:#FFF3CD;border-bottom:2px solid var(--terra);
  padding:0 var(--s0);font-family:var(--ui);font-size:.92em;color:#6B3F12}
.fnota-p{margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid var(--grid);
  font-size:var(--f6);line-height:var(--lh-art);max-width:var(--medida)}

/* ---------- responsivo ---------- */
@media(max-width:1120px){ .menu{gap:var(--s3)} }
@media(max-width:1040px){
  .menu{display:none}
  .mob{display:block}
  .nav{position:relative}
}
@media(max-width:980px){
  /* A faixa de 560 a 980 era o pior defeito de leitura do site, e a auditoria
     em seis larguras não o via porque media 1000 e 760, um de cada lado dele.
     Aqui as grades de duas colunas viram uma só, e junto com a coluna ia
     embora o teto de medida que ela impunha: o parágrafo passava a ocupar a
     largura inteira do .wrap. Numa janela de 960px isso dava 126 caracteres
     por linha, quase o dobro da faixa confortável, e acontecia em todas as
     páginas menos as de artigo.

     Houve aqui uma segunda regra, que estreitava o próprio .wrap das seções
     de texto puro para a largura da medida, como fazem as páginas de artigo,
     de modo que a sobra virasse margem dos dois lados. Ela foi retirada, e a
     auditoria é que decidiu: as seções de cartão ficavam de fora e as de
     texto não, então a borda esquerda da página dava um degrau de 172px a
     cada troca de seção, quatro vezes por página. Era o mesmo defeito de
     borda oscilante que a nota do --max descreve, mudado de lado. Junto com
     ele vinham o h1 da home quebrado em cinco linhas entre 960 e 980 e dois
     :has() que nunca podiam casar, porque .esteira é irmã do .wrap e
     .contato está no próprio .wrap, e o :has() só enxerga descendente.

     Ficou só o teto de medida abaixo, que é o que resolvia a leitura de
     fato. A sobra continua de um lado só nessa faixa, do mesmo tamanho que
     em qualquer outra largura do site. */
  /* E um teto geral, porque estreitar o .wrap resolve a seção de texto puro
     mas não a de cartão: ali o .wrap segue largo de propósito, e um parágrafo
     solto dentro dela voltava aos 126 caracteres. Um max-width só limita, nunca
     alarga, então nos cartões, cujo texto já é mais estreito que a medida, a
     regra não tem efeito nenhum. O ch resolve contra o corpo de cada elemento,
     que é o comportamento desejado: a contagem de caracteres fica igual num
     parágrafo de 17px e num de 20px. */
  /* O .doc entra no seletor pelo mesmo motivo que o .pv precisou das próprias
     regras: envolver o conteúdo numa div transforma as seções em netas de
     main, e "main > section" deixa de casar. Na política isso tirou o teto de
     medida de toda a página; onde a grade de duas colunas segurava a largura
     ninguém percebeu, e no bloco .norma, que é grade própria e vira coluna
     única abaixo de 980, a linha foi a 122 caracteres. */
  main > section :is(p,li,dd,blockquote),
  main > .doc > section :is(p,li,dd,blockquote){max-width:var(--medida)}
  /* Nem todo li é linha de texto. Nestes três o li é a linha de uma grade de
     duas colunas, e o teto de medida virava teto da grade inteira: na lista
     de artigos a coluna da data ficava com 200px e sobravam 245 para o
     título, que quebrava em quatro linhas de três palavras. O teto vale para
     o texto dentro deles, não para a linha. */
  .lista-art li,.seguir li,.sumario li,.pv-seguir li{max-width:none}
  /* O .grupo continua em duas colunas até 800px, e não até 980.
     Em 980 a calha saía de cena mas o .wrap continuava com 916px de conteúdo,
     então a coluna de leitura terminava em 493 e sobravam 423px de faixa vazia
     à direita: 1005k px² de área achatada no Plantão, 533k no contato. Com a
     calha mantida a coluna termina em 721 e a sobra cai para 195.

     O 800 é aritmética, e não gosto: a calha de 180 mais o vão de 48 mais a
     medida de 493 pedem 721px de conteúdo, que com os dois recuos de 32 do
     .wrap dão 785px de janela. Abaixo disso não cabe, e aí sim empilha. */
  .method{grid-template-columns:1fr;gap:var(--s4)}
  .grid5{grid-template-columns:repeat(2,1fr)}
  .socios{grid-template-columns:1fr;gap:var(--s6)}
  .depos{grid-template-columns:1fr;gap:var(--s6)}
  .socio{display:grid;grid-template-columns:300px 1fr;grid-template-rows:repeat(4,min-content) 1fr;
    column-gap:var(--s5);align-items:start}
  /* 1/-1, e não 1/span 4: atravessando só as quatro trilhas min-content, a
     altura do retrato era distribuída entre elas e abria vãos de até 35px
     entre o nome e a função, enquanto a trilha 1fr resolvia para zero. */
  .socio picture{grid-row:1/-1;margin-bottom:0}
  /* O traço da calha e o empilhamento do .grupo desceram para o @media de
     800px, logo abaixo: acima disso a calha ainda cabe e evita a faixa vazia
     de 423px à direita da coluna de leitura. */
  .socio .cred{margin-top:var(--s3)}
  .formas{grid-template-columns:1fr;gap:var(--s4)}
  .forma p{max-width:var(--medida)}
  .passos,.etapas{grid-template-columns:1fr 1fr;gap:var(--s4)}
  .conf-2{grid-template-columns:1fr;gap:var(--s3)}
  .entrega,.entrega-2,.norma{grid-template-columns:1fr;gap:var(--s4)}
  .conduz{grid-template-columns:1fr;gap:var(--s6)}
  .contato{grid-template-columns:1fr;gap:var(--s7)}
  .fgrid{grid-template-columns:1fr 1fr;gap:var(--s5)}
}
@media(max-width:800px){
  .grupo{grid-template-columns:minmax(0,var(--medida));gap:0}
  .grupo>*,.grupo-t{grid-column:1}
  .grupo-t{grid-row:auto;padding-top:0;margin-bottom:var(--s3)}
  .grupo:not(:has(> .grupo-t))::before{display:none}
}
@media(max-width:720px){
  main section,main section.tint,main section.dark,.fim{padding:var(--s9) 0}
  .hero{padding:var(--s5) 0 var(--s7)}
  .wrap{padding:0 var(--s3)}
  .grid5,.two,.fgrid{grid-template-columns:1fr}
  .socio{display:flex}
  .socio picture{margin-bottom:var(--s3)}
  .hero .glyph{display:none}
  .method .body{font-size:var(--f6)}
  .nav .wrap{height:var(--s8);gap:var(--gap-ui)}
  .brand img{width:124px}
  .nav>.wrap>.btn-p{display:none}
  .depo{padding-left:var(--s3)}
  .passos,.etapas{grid-template-columns:1fr}
  .seguir a:hover{padding-left:0}
  .art-cab{padding:var(--s7) 0 var(--s6)}
  .art-corpo{padding:var(--s7) var(--s3)}
  .art-assin{flex-direction:column;gap:var(--s2)}
  .lista-art a:hover{padding-left:0}
  .lista-art a{grid-template-columns:1fr;gap:var(--s1) 0}
  .lista-art .quando,.lista-art .texto{grid-column:1}
  .lista-art .quando{padding-top:0}
  .socio picture{max-width:420px}
  .conf a{display:block}
  .mob .panel a{padding-left:var(--s3)}
  .mob .panel a.sub{padding-left:var(--s5)}
}
@media(max-width:380px){ .wrap{padding:0 var(--s2)} .mob .panel .cta{margin:var(--s2) var(--s2) 0} }

/* ---------- esteira de clientes ----------
   As marcas vêm em quinze paletas diferentes, e lado a lado viravam colcha de
   retalhos. Por isso os arquivos foram passados para tinta chapada antes de
   entrar aqui: a faixa precisa provar quem já contratou, sem disputar com a
   cor da própria Analítica.

   A imagem tem altura fixa e largura automática. Com width e height reais no
   <img>, o navegador calcula a largura pela proporção antes de a imagem
   chegar e já reserva o espaço. Antes, com height:auto, a faixa media zero
   até carregar e o percurso da animação, que é -100% da própria largura,
   mudava no meio do caminho: a esteira dava um salto na frente de quem
   estava olhando.

   O deslizamento é CSS puro, com a lista duplicada e translação de -100%. Sem
   JavaScript, sem biblioteca de carrossel. Para parar, basta o ponteiro em
   cima ou o foco do teclado dentro. Quem pediu menos movimento no sistema
   recebe a faixa parada e rolável com o dedo. */
.clientes-sec{padding:var(--s7) 0 var(--s8)}
.clientes-t{margin-top:var(--s1);font-size:var(--f5);color:var(--body);max-width:var(--medida)}
.esteira{margin-top:var(--s6);display:flex;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)}
.esteira-fila{flex:none;display:flex;align-items:center;gap:var(--s9);
  padding-right:var(--s9);list-style:none;animation:desliza 64s linear infinite}
.esteira-fila li{flex:none;display:flex;align-items:center;height:56px}
.esteira-fila img{height:56px;width:auto;max-width:180px;object-fit:contain;opacity:.82}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.esteira:hover .esteira-fila,
.esteira:focus-within .esteira-fila{animation-play-state:paused}
.esteira:focus-visible{outline:2px solid var(--terra);outline-offset:4px}
@media(max-width:720px){
  .esteira-fila{gap:var(--s7);padding-right:var(--s7)}
  .esteira-fila li{height:44px}
  .esteira-fila img{height:44px;max-width:140px}
}
@media (prefers-reduced-motion: reduce){
  .esteira{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .esteira-fila{animation:none}
  .esteira-fila[aria-hidden]{display:none}
}

/* ---------- entrada ao rolar ----------
   O site inteiro aparecia de uma vez, e por isso lia como documento impresso
   e não como página. Isto dá vida sem acrescentar enfeite: cada bloco sobe
   16px e ganha opacidade enquanto entra na tela.

   Sem JavaScript. Usa animation-timeline, que é animação ligada à rolagem
   feita pelo próprio navegador, então não custa script, não trava a rolagem e
   não depende de biblioteca. O @supports garante que, em navegador sem essa
   função, nada acontece e todo o conteúdo aparece normalmente. Quem pediu
   menos movimento no sistema também não recebe nada.

   Só vale abaixo do hero: o que já está na primeira tela precisa estar lá no
   primeiro quadro.

   O ul.lista-art e o div.grid5 estão excluídos da regra dos filhos do .wrap,
   e quem anima é cada item. A lista inteira é um elemento só de três mil pixels: como um
   elemento alto precisa de muita rolagem para completar a entrada, a lista
   toda ficava a 0,80 de opacidade enquanto a pessoa lia o começo dela, no
   celular. Animando item a item, cada um completa a entrada no seu tempo.

   O .grid5 da 404 tem 1601px de altura no celular e dava o mesmo problema:
   a primeira fileira de cartões aparecia a 0,92 de opacidade numa tela de
   900px, e a 0,79 numa de 844. Os cartões já estavam na lista de animados
   por conta própria, então bastou tirar o contêiner. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    main section:not(.hero):not(.hero-p) .wrap > *:not(.lista-art):not(.grid5),
    .grid5 > *, .two > *, .formas > *, .entrega > *, .norma > *,
    .socios > *, .depos > *, .lista-art li {
      animation: entra linear forwards;
      animation-timeline: view();
      /* O intervalo continua em "cover 16%". Testei "entry 100%", que em
         teoria completaria a entrada assim que o elemento acabasse de entrar,
         e a medição reprovou: o número de elementos parados a meio caminho na
         primeira tela subiu de 34 para 54, porque num elemento mais alto que
         a janela o "entry 100%" chega tarde. "cover 30%" deu 68. O que
         resolve não é mexer no intervalo, é não animar um contêiner alto:
         ver a nota sobre o ul.lista-art e o .grid5 logo acima. */
      animation-range: entry 0% cover 16%;
    }
    @keyframes entra { from { opacity:0; transform:translateY(16px) } to { opacity:1; transform:none } }
  }
}

/* ---- a quebra do cabeçalho de página ----
   O .hero-p aparece em onze páginas com a mesma forma: o h1 limitado a 16ch, e
   embaixo dele o parágrafo de apoio limitado a 56ch. Numa tela de 1440 o texto
   terminava em 650px e sobravam 346px de nada à direita, em toda página que
   não é a home. A medição de sobra apontava isso em cinco páginas de uma vez,
   e era o "espaço desperdiçado" que o Leo vinha apontando desde a amostra.

   A resposta é a mesma da amostra: o título fica numa coluna e o apoio na
   outra. Nada muda no HTML das onze páginas, porque a regra age sobre os
   filhos diretos do .wrap, que já são o h1 e os parágrafos.

   O 981px vem da mesma conta do .pv-cabeca: a coluna direita é fixa em 430px
   e o vão é de 64, então a coluna esquerda só passa de 400px acima de 980. A
   regra está no fim do arquivo e dentro de um min-width de propósito: as
   quatro vezes em que uma regra escrita depois de um bloco @media vazou para
   todas as larguras estão anotadas neste arquivo, e esta forma não permite
   isso. Abaixo de 981 o empilhamento de antes continua valendo, e ali a sobra
   já era zero. */
@media(min-width:981px){
  .hero-p .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,430px);
    column-gap:var(--s8);align-items:start}
  .hero-p .wrap > h1{grid-column:1;grid-row:1;max-width:none}
  /* O botão desce para o pé da coluna do título. Sem isso, um h1 curto como
     "A Analítica RH" deixava 568 por 616px de vazio embaixo dele, porque a
     altura da seção é ditada pela coluna da direita. Com o botão no pé, as
     duas colunas têm conteúdo em cima e embaixo. */
  .hero-p .wrap > .acts{grid-column:1;grid-row:2 / -1;align-self:end;
    margin-top:var(--s5);margin-bottom:var(--s1)}
  .hero-p .wrap > :not(h1):not(.acts){grid-column:2}
  .hero-p .wrap > p.sup{max-width:none}
  .hero-p .wrap > p.sup:first-of-type{margin-top:0}

  /* Dois blocos curtos que ficavam soltos numa faixa larga: o aviso do
     currículo, com 503px vazios à direita, e a nota legal da NR-1, com 590.
     Aqui a cabeça lateral funciona, ao contrário do que aconteceu com as
     listas: são blocos de duas ou três linhas, então o título ao lado tem
     altura parecida com a do texto e nenhuma das colunas fica oca. A nota
     legal não tem título, e por isso ganha um rótulo desenhado em vez de um. */
  .aviso{max-width:none;display:grid;column-gap:var(--s6);align-items:start;
    grid-template-columns:minmax(0,1fr) minmax(0,var(--medida))}
  .aviso > h2{grid-column:1;grid-row:1;margin-bottom:0}
  .aviso > :not(h2){grid-column:2}

}

/* A nota legal ganha a cabeça lateral bem mais cedo que os outros dois, em
   661 e não em 981: sem elas a faixa ficava com 510px de vazio à direita de um
   parágrafo curto entre 660 e 980.

   O valor era 561, e a auditoria mostrou que ali a coluna do rótulo resolvia
   para 11px e o "Nota legal" quebrava em duas linhas coladas no texto. A
   conta: a coluna direita é a medida, 493px, mais o vão de 48 e os dois
   recuos de 32; para o rótulo ter uns 90px é preciso passar de 660. */
@media(min-width:661px){
  .nota-legal .wrap{display:grid;column-gap:var(--s6);align-items:start;
    grid-template-columns:minmax(0,1fr) minmax(0,var(--medida))}
  .nota-legal .wrap::before{content:"Nota legal";grid-column:1;grid-row:1;
    font-family:var(--ui);font-size:var(--f8);font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;color:var(--mute)}
  .nota-legal .wrap > *{grid-column:2}
}


@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
@media print{
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  .nav,.mob,.skip,.hero .glyph,.fim,footer,.art-comp{display:none!important}
  body{font-size:11pt}
  .art-corpo p,.art-corpo li,.art-lead{font-size:11pt}
  .art-corpo h2{font-size:15pt}
  main section,.fim{padding:18pt 0;break-inside:avoid}
  .btn{border:1px solid var(--navy)}
  a[href^="/"]::after{content:" (analiticarh.com.br" attr(href) ")";font-size:8.5pt;color:#5A7288}
}

/* ---------- documento de referência ----------
   A política de privacidade. Ela não é uma página de serviço: é um documento
   que alguém abre para achar uma resposta, lê o trecho que interessa e fecha.

   A versão enxuta cortou 23% do texto e a altura no celular caiu de 33 telas
   para 25. O corte de texto sozinho não resolveu porque a altura desta página
   não vinha só das palavras: vinha do corpo de 20px com entrelinha 1,72 e dos
   32px de respiro em cada um dos trinta itens de lista. Numa página de serviço
   esse corpo é a leitura confortável que o site quer; num documento de
   consulta ele multiplica a rolagem sem melhorar nada.

   Aqui o corpo cai para 17px com entrelinha 1,65, que é o mesmo par que os
   rodapés e as notas do site já usam, e o respiro do item cai para 24. O texto
   continua acima do mínimo de acessibilidade e a linha continua dentro da
   medida, porque a 17px cabem mais caracteres na mesma largura e o teto em ch
   acompanha o corpo do elemento.

   Fica escopado em .doc para não alcançar as páginas de serviço, onde a mesma
   lista de .solucoes tem outra função. */
.doc .solucoes li{font-size:var(--f6);line-height:var(--lh-txt);padding:var(--s3) 0}
.doc .intro{font-size:var(--f6);line-height:var(--lh-txt)}
.doc .norma p{font-size:var(--f6)}
.doc section{padding-top:var(--s7);padding-bottom:var(--s7)}