/* ============================================================================
   Kalebe RH — layout de cada seção. Carrega por último.
   ============================================================================ */

/* ============================== a barra fixa ============================ */

.barra{
  position:sticky;top:0;z-index:50;
  background:var(--barra-fundo);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:background 160ms var(--curva),
             border-color 160ms var(--curva),
             box-shadow 160ms var(--curva);
}
/* Fora da dobra, a barra fica sólida e ganha sombra. Diz que você saiu do
   topo, e resolve a separação fraca entre o branco translúcido e o azul
   cheio da dobra, que antes se encostavam sem linha nenhuma. */
.barra--fixa{
  background:var(--barra-fundo-fixa);
  border-bottom-color:var(--linha);
  box-shadow:var(--sombra-1);
}
.barra__i{min-height:var(--barra-alt);display:flex;align-items:center;gap:var(--e-5)}
.marca{
  display:inline-flex;align-items:center;gap:var(--e-3);min-height:var(--alvo);
  text-decoration:none;font-weight:700;font-size:var(--t-lg);
  letter-spacing:-.025em;color:var(--tinta);
}
.marca b{color:var(--marca);font-weight:700}
.marca__k{width:var(--e-7);height:var(--e-7);flex:none}

.barra__nav{display:none;margin-inline-start:auto;gap:var(--e-6)}
.barra__nav a{
  font-size:var(--t-15);font-weight:500;color:var(--tinta-media);text-decoration:none;
  min-height:var(--alvo);display:inline-flex;align-items:center;
  border-bottom:2px solid transparent;
  transition:color var(--rapido) var(--curva),border-color var(--rapido) var(--curva);
}
.barra__nav a:hover{color:var(--marca);border-bottom-color:var(--marca)}
/* onde a pessoa está agora. Página de 8.300px com cinco âncoras precisa
   disso: é visibilidade de estado, não enfeite. */
/* Sem o valor no seletor: o script escreve aria-current="location", que e
   o valor que descreve "a secao que estou lendo". Preso em "true" isto ja
   teria quebrado em silencio. */
.barra__nav a[aria-current]{color:var(--marca);border-bottom-color:var(--marca);font-weight:600}

.barra__acoes{display:flex;align-items:center;gap:var(--e-4);margin-inline-start:auto}
.elo-entrar{display:none;font-size:var(--t-14);color:var(--suave);text-decoration:none;min-height:var(--alvo);align-items:center}
.elo-entrar:hover{color:var(--marca)}

/* Abaixo de 860 o menu vira uma faixa rolável logo abaixo da logo, em vez
   de simplesmente sumir. Numa página de âncoras isso ganha do hambúrguer:
   zero toque para ver as seções, nada para abrir e fechar, e nenhuma
   armadilha de foco para construir e manter. Antes, de 390 a 860 não havia
   navegação nenhuma, e num iPad em pé sobrava meia barra vazia. */
@media (max-width:859px){
  .barra__i{flex-wrap:wrap;row-gap:0;padding-bottom:var(--e-2)}
  .barra__nav{
    display:flex;order:3;flex-basis:100%;gap:var(--e-6);
    overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    margin-inline:calc(var(--e-5) * -1);padding-inline:var(--e-5);
    border-top:1px solid var(--linha);
  }
  .barra__nav::-webkit-scrollbar{display:none}
  /* A faixa rola, mas a barra de rolagem esta escondida: sem esta mascara
     o ultimo item aparecia cortado ao meio e o visitante concluia que o
     menu acabava ali. O desbotado na direita e a unica dica de que continua. */
  .barra__nav{
    mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
  }
  .barra__nav a{white-space:nowrap;font-size:var(--t-14);min-height:var(--alvo)}
  /* a barra tem duas linhas aqui, então a âncora precisa de mais folga
     para a seção não aterrissar embaixo dela. Sai dos tokens: a altura da
     barra mais a faixa de navegação que desceu para a segunda linha. */
  html{scroll-padding-top:calc(var(--barra-alt) + var(--e-9))}
}
@media (min-width:860px){
  .barra__nav{display:flex;gap:var(--e-5)}
  .barra__nav a{font-size:var(--t-14)}
  .barra__acoes{margin-inline-start:0}
}
@media (min-width:1080px){
  .barra__nav{gap:var(--e-6)}
  .barra__nav a{font-size:var(--t-15)}
  .elo-entrar{display:inline-flex}
}

/* ============================ ritmo das seções ========================== */

.s{padding-block:clamp(72px,8vw,var(--e-12))}
.s--papel{background:var(--n-0)}
/* --n-2 e nao --papel: branco contra --n-1 dava 1,04:1, e o ritmo
   alternado de secao, que e a estrutura de leitura da pagina, era
   literalmente invisivel. Com --n-2 fica 1,13:1: discreto e percebido. */
.s--fundo{background:var(--n-2)}

.cab{margin-bottom:clamp(44px,5vw,var(--e-10))}
.cab--centro{text-align:center;max-width:64ch;margin-inline:auto}
.cab h2{font-size:var(--t-h2);letter-spacing:var(--aperto-h2);margin-bottom:var(--e-5)}
.cab p{font-size:var(--t-lg);line-height:1.55;color:var(--tinta-media)}

/* ================================ a dobra =============================== */

.hero{
  background:
    radial-gradient(120% 100% at 85% 0%, var(--marca-brilho) 0%, rgba(16,99,124,0) 62%),
    linear-gradient(165deg, var(--marca) 0%, var(--marca-escura) 100%);
  color:var(--marca-tinta);
  padding-block:clamp(56px,7vw,var(--e-11)) clamp(48px,5vw,var(--e-10));
  overflow:hidden;
}
.hero__g{display:grid;gap:clamp(40px,5vw,var(--e-10));align-items:center}
.hero h1{
  font-size:var(--t-display);
  letter-spacing:var(--aperto-display);
  line-height:1.06;max-width:15ch;
}
.hero__sub{
  font-size:var(--t-lg);line-height:1.6;
  color:var(--sobre-texto);
  max-width:52ch;margin-top:var(--e-6);
}
.hero__acoes{display:flex;flex-wrap:wrap;gap:var(--e-4);margin-top:var(--e-8)}
/* A dica fica entre os botoes e os selos, em corpo pequeno: ela explica o
   botao, nao compete com ele. */
.hero__dica{
  margin-top:var(--e-4);
  font-size:var(--t-14);color:var(--sobre-fraco);
}

.selos-dobra{
  display:flex;flex-wrap:wrap;gap:var(--e-3) var(--e-6);
  margin-top:var(--e-7);
}
.selos-dobra li{
  display:flex;align-items:center;gap:var(--e-2);
  font-size:var(--t-14);color:var(--sobre-fraco);
}
.selos-dobra .ico{color:var(--marca-clara)}

@media (min-width:960px){
  .hero__g{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
}

/* o cartão da foto, como no modelo de referência */
.cartao-foto{
  margin:0;max-width:400px;margin-inline:auto;
  background:var(--n-0);
  border-radius:var(--r-6);
  padding:var(--e-4);
  box-shadow:var(--sombra-4);
}
.cartao-foto__img{
  aspect-ratio:4 / 5;border-radius:var(--r-5);
  background:linear-gradient(160deg,var(--marca-fraca) 0%,var(--marca-fraca-2) 100%);
  display:grid;place-items:center;overflow:hidden;
}
.cartao-foto__img img{width:100%;height:100%;object-fit:cover}
.cartao-foto figcaption{
  display:grid;gap:2px;padding:var(--e-5) var(--e-4) var(--e-3);
}
.cartao-foto b{font-size:var(--t-lg);letter-spacing:-.02em;color:var(--tinta)}
.cartao-foto span{font-size:var(--t-14);color:var(--suave)}

/* ----------------------- a faixa de números ----------------------- */

.numeros{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-7) var(--e-5);
  margin-top:clamp(48px,5vw,var(--e-10));
  padding-top:clamp(40px,4vw,var(--e-9));
  border-top:1px solid var(--sobre-linha);
}
.numeros li{display:grid;gap:var(--e-2);align-content:start;text-align:center}
.numeros b{
  font-size:var(--t-num);font-weight:700;line-height:1;
  letter-spacing:-.04em;color:var(--marca-tinta);
  font-variant-numeric:tabular-nums;
}
/* o sufixo e opt-in: numero exato nao leva "+". Sao exatamente dez areas
   e exatamente seis niveis; so o tempo de experiencia e "mais de". */
.numeros b[data-suf]::after{
  content:attr(data-suf);font-size:.62em;margin-left:3px;opacity:.85;
  vertical-align:baseline;font-weight:600;
}
.numeros b[data-suf="+"]::after{font-size:.6em;vertical-align:super;margin-left:1px}
/* filho direto: o <b> do numero pode ganhar span por dentro no futuro,
   e sem o ">" esta regra esmagaria o numero. Ja aconteceu uma vez. */
.numeros li > span{font-size:var(--t-14);line-height:1.45;color:var(--sobre-fraco)}
@media (min-width:720px){.numeros{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ========================== sobre: dois cartões ========================= */

.duplo{display:grid;gap:var(--e-6)}
@media (min-width:760px){.duplo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e-6)}}
@media (min-width:960px){.duplo{gap:var(--e-7)}}

/* ============================= diferenciais ============================= */

.triplo{display:grid;gap:var(--e-6)}
@media (min-width:800px){.triplo{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e-5)}}
@media (min-width:1080px){.triplo{gap:var(--e-6)}}

/* =============================== serviços =============================== */

.servico{
  display:grid;gap:clamp(32px,4vw,var(--e-9));
  padding-block:clamp(40px,5vw,var(--e-10));
  border-top:1px solid var(--linha);
}
.servico:first-of-type{border-top:0;padding-top:0}
.servico h3{font-size:var(--t-h2b);letter-spacing:-.025em;margin-bottom:var(--e-5)}
.servico__t{font-size:var(--t-corpo);line-height:1.65;color:var(--tinta-media);max-width:54ch;margin-bottom:var(--e-7)}
.servico__r{
  font-size:var(--t-13);font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--suave);margin-bottom:var(--e-5);
}
.servico__r--sep{margin-top:var(--e-8)}
.servico__dir{
  background:var(--papel);border:1px solid var(--linha);
  border-radius:var(--r-5);padding:clamp(24px,3vw,var(--e-8));
}
@media (min-width:960px){
  .servico{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
}

/* ====================== soluções para as dores ========================= */

.solucoes{display:grid;gap:var(--e-5)}
.solucoes li{
  display:grid;gap:var(--e-4);align-items:start;
  background:var(--n-0);border:1px solid var(--linha);
  border-radius:var(--r-5);padding:clamp(22px,2.6vw,var(--e-7));
  box-shadow:var(--sombra-1);
  transition:box-shadow var(--medio) var(--curva),border-color var(--rapido) var(--curva);
}
.solucoes li:hover{box-shadow:var(--sombra-2);border-color:var(--marca-borda)}
.solucoes p{font-size:var(--t-corpo);line-height:1.55}
.solucoes__d > p{color:var(--tinta-media)}
.solucoes__s > p{color:var(--tinta);font-weight:600}
.solucoes__s > .rot{color:var(--marca)}
.solucoes__seta{
  width:var(--e-6);height:var(--e-6);color:var(--marca);
  transform:rotate(90deg);justify-self:start;
}
@media (min-width:820px){
  .solucoes li{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--e-7)}
  .solucoes__seta{transform:none;justify-self:center}
}
@media (min-width:1180px){
  .solucoes{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e-5)}
  .solucoes li{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--e-5)}
}

/* ============================ áreas de atuação ========================== */

/* Toda coluna de grade desta folha e minmax(0,1fr), e nao 1fr.
   1fr tem minimo min-content, entao uma palavra comprida como
   "acompanhamento" estica a coluna e a grade vaza para fora da tela.
   Aparecia com a fonte do navegador em 200%: 177px de estouro em
   "Como funciona". Invisivel no tamanho normal. */
.areas{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e-4)}
/* o <li> vira grade para a ficha esticar ate a altura da linha: sem isso,
   "Administrativo & Financeiro" (duas linhas) fica mais alta que a vizinha
   de uma linha so, e a fileira desalinha. */
.areas > li{display:grid}
@media (min-width:560px){.areas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:880px){.areas{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1180px){.areas{grid-template-columns:repeat(5,minmax(0,1fr))}}
.areas__fim{
  margin-top:var(--e-8);text-align:center;
  font-size:var(--t-corpo);color:var(--tinta-media);
}
/* Era um <p> sem link: a unica frase da pagina que enfrenta o "o meu caso
   nao esta aqui" terminava num beco, e a secao inteira de areas nao tinha
   nenhum ponto de conversao em 645px. */
.areas__fim a{
  display:inline-flex;align-items:center;min-height:var(--alvo);
  color:var(--marca);font-weight:600;
}

/* =============================== passos ================================= */

.passos{display:grid;gap:var(--e-6);counter-reset:passo}
.passos li{
  background:var(--n-0);border:1px solid var(--linha);
  border-radius:var(--r-5);padding:clamp(26px,3vw,var(--e-8));
  display:grid;gap:var(--e-3);align-content:start;
}
.passos__n{
  width:var(--e-8);height:var(--e-8);border-radius:var(--r-cheio);
  display:grid;place-items:center;
  background:var(--marca);color:var(--marca-tinta);
  font-weight:700;font-size:var(--t-lg);
  margin-bottom:var(--e-3);
}
/* Menor que o h3 dos outros cartoes de proposito: a coluna do passo tem
   187px a 1440, e "Contratação e acompanhamento" em 24px quebrava no meio
   da palavra. Rotulo de etapa e papel mais denso que titulo de cartao. */
.passos h3{font-size:var(--t-lg);letter-spacing:-.02em}
.passos p{font-size:var(--t-corpo);line-height:1.6;color:var(--tinta-media)}
@media (min-width:640px){.passos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.passos{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--e-5)}}

/* ============================== CTA final =============================== */

.cta{
  background:
    radial-gradient(110% 120% at 88% 0%, var(--marca-brilho) 0%, rgba(16,99,124,0) 60%),
    linear-gradient(160deg,var(--marca) 0%,var(--marca-escura) 100%);
  color:var(--marca-tinta);
  border-radius:var(--r-6);
  padding:clamp(40px,6vw,var(--e-11)) clamp(28px,5vw,var(--e-10));
  text-align:center;
  box-shadow:var(--sombra-4);
}
.cta h2{font-size:var(--t-h2);letter-spacing:var(--aperto-h2);max-width:20ch;margin-inline:auto}
.cta p{
  font-size:var(--t-lg);line-height:1.6;color:var(--sobre-texto);
  max-width:56ch;margin:var(--e-5) auto 0;
}
.cta__acoes{display:flex;flex-wrap:wrap;gap:var(--e-4);justify-content:center;margin-top:var(--e-8)}
.cta__selos{
  display:flex;flex-wrap:wrap;gap:var(--e-4) var(--e-7);justify-content:center;
  margin-top:var(--e-9);padding-top:var(--e-7);
  border-top:1px solid var(--sobre-linha);
}
.cta__selos li{display:flex;align-items:center;gap:var(--e-2);font-size:var(--t-14);color:var(--sobre-texto)}
.cta__selos .ico{color:var(--marca-clara)}

/* ================================ rodapé ================================ */

.rodape{
  /* Cor chapada, e nao o mesmo gradiente da chamada final. Os dois blocos
     ficam a 130px um do outro, e repetir o gradiente fazia o ultimo quadro
     da pagina ser copia do climax: a chamada perdia a condicao de momento.
     Aqui o azul e chao; la e destaque. */
  background:var(--marca-escura);
  color:var(--marca-tinta);
  padding-block:clamp(56px,6vw,var(--e-10)) var(--e-7);
  padding-bottom:max(var(--e-7), env(safe-area-inset-bottom));
}
.rodape__g{display:grid;gap:var(--e-8)}
.rodape .marca{color:var(--marca-tinta)}
.rodape .marca b{color:var(--marca-clara)}
.rodape__marca p{
  margin-top:var(--e-4);font-size:var(--t-14);line-height:1.65;
  color:var(--sobre-fraco);max-width:38ch;
}
.rodape__r{
  font-size:var(--t-13);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--marca-clara);margin-bottom:var(--e-4);
}
.rodape__l{display:grid;gap:var(--e-1)}
.rodape__l a,.rodape__local{
  display:inline-flex;align-items:center;gap:var(--e-2);min-height:40px;
  font-size:var(--t-14);color:var(--sobre-fraco);text-decoration:none;
}
.rodape__l a:hover{color:var(--n-0);text-decoration:underline}
.rodape__fim{
  margin-top:clamp(40px,4vw,var(--e-9));padding-top:var(--e-6);
  border-top:1px solid var(--sobre-linha);
  display:flex;flex-wrap:wrap;gap:var(--e-3) var(--e-7);justify-content:space-between;
  font-size:var(--t-13);color:var(--sobre-fraco);
}
/* o rodapé ia direto para 4 colunas em 720px enquanto o corpo da página
   ainda estava em 1 coluna: a parte menos importante era a mais densa */
@media (min-width:560px){.rodape__g{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (min-width:880px){.rodape__g{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr)}}

/* ========================================================================
   ADAPTAÇÃO POR CONTEXTO
   ======================================================================== */

.barra__i,.faixa{
  padding-inline:max(var(--e-5), env(safe-area-inset-left), env(safe-area-inset-right));
}
@media (min-width:720px){
  .barra__i,.faixa{
    padding-inline:max(var(--e-7), env(safe-area-inset-left), env(safe-area-inset-right));
  }
}

@media (pointer:coarse){
  .bt{min-height:48px}
  .bt--p{min-height:var(--alvo)}
  .carta:hover,.bt:hover{transform:none}
  .rodape__l a,.rodape__local{min-height:var(--alvo)}
  .carta__elo{min-height:var(--alvo)}
}

@media (hover:none){
  .carta__elo .ico{transition:none}
}

@media (max-width:359px){
  .hero h1{font-size:1.9rem}
  .barra__i{gap:var(--e-3)}
  .bt--p{padding-inline:var(--e-4)}
}

@media (max-height:520px) and (orientation:landscape){
  .hero{padding-block:var(--e-7) var(--e-8)}
  .s{padding-block:var(--e-9)}
  .barra{position:static}
  /* a barra saiu do fluxo fixo, entao o recuo de ancora viraria buraco */
  html{scroll-padding-top:0}
}

/* Some da tela e aparece no papel. Sem ela, quem imprime a pagina perde
   os dois botoes de contato do bloco final e fica sem saber como falar com
   a Kalebe ate chegar ao rodape. */
.so-papel{display:none}

@media print{
  .barra,.hero__acoes,.cta__acoes,.pular{display:none}
  .so-papel{display:block;font-size:var(--t-15);margin-top:var(--e-5)}
  .hero,.cta,.rodape{background:#fff!important;color:#000!important}
  .s{padding-block:var(--e-6)}
  h1,h2,h3{color:#000!important}
  p,li{color:#222!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px}
}

/* ========================================================================
   FILHO DE GRADE ENCOLHE

   Filho de grade e de flex tem minimo AUTOMATICO igual ao min-content dele.
   Uma palavra que nao cabe, como "acompanhamento", empurra a coluna e a
   grade inteira vaza para fora da tela. `overflow-wrap:break-word` NAO
   resolve: ele quebra a linha na hora de pintar, mas nao muda o min-content
   que o navegador usa para medir a coluna. Quem resolve e min-width:0 no
   filho.

   Apareceu com a fonte do navegador em 200%, em "Como funciona": 54px de
   estouro horizontal. No tamanho padrao ninguem ve.

   `:where` de proposito: especificidade zero, entao esta regra nunca ganha
   de nada que venha depois.
   ======================================================================== */
:where(.hero__g,.numeros,.numeros li,.duplo,.triplo,.carta,.dif,.servico,
       .servico__esq,.servico__dir,.solucoes,.solucoes li,.areas,.areas > li,
       .passos,.passos li,.lista-check,.lista-check li,.pilulas,
       .rodape__g,.rodape__l,.rodape__marca,.cab) > *{min-width:0}

/* ========================================================================
   O GESTO AUTORAL — a virada do problema para a solução
   Uma página, um gesto. Em cada cartão: o problema assenta, a seta se
   desenha da esquerda para a direita, e a solução chega por último. A
   animação encena o serviço, em vez de enfeitar a seção.
   Disparado por CSS a partir de .rv--on. Sem JavaScript novo.
   ======================================================================== */

/* 1º beat — o problema assenta (300ms) */
.solucoes__d{opacity:0;transform:translateY(8px)}
.js .solucoes__d{transition:opacity 300ms var(--saida),transform 300ms var(--saida)}
.rv--on .solucoes__d{opacity:1;transform:none}

/* 2º beat — a seta se desenha (320ms, a partir de 220ms)
   stroke-dasharray e stroke-dashoffset são herdadas em SVG, então declarar
   aqui atravessa para dentro do <symbol> referenciado pelo <use>. O valor
   de 31 é o comprimento real do traço, medido com getTotalLength() no
   navegador: 30,97 unidades. Não é chute. */
.solucoes__seta{stroke-dasharray:31;stroke-dashoffset:31}
.js .solucoes__seta{transition:stroke-dashoffset 320ms var(--saida) 220ms}
.rv--on .solucoes__seta{stroke-dashoffset:0}

/* 3º beat — a solução chega, revelada da esquerda (340ms, a partir de 380ms) */
.solucoes__s{clip-path:inset(0 100% 0 0);opacity:0}
.js .solucoes__s{transition:clip-path 340ms var(--saida) 380ms,opacity 200ms linear 380ms}
.rv--on .solucoes__s{clip-path:inset(0);opacity:1}

/* escalonamento entre cartões, com teto de 240ms em três degraus */
.solucoes li:nth-child(3n+2) .solucoes__d{transition-delay:80ms}
.solucoes li:nth-child(3n+2) .solucoes__seta{transition-delay:300ms}
.solucoes li:nth-child(3n+2) .solucoes__s{transition-delay:460ms}
.solucoes li:nth-child(3n+3) .solucoes__d{transition-delay:160ms}
.solucoes li:nth-child(3n+3) .solucoes__seta{transition-delay:380ms}
.solucoes li:nth-child(3n+3) .solucoes__s{transition-delay:540ms}

/* sem JavaScript, nada fica preso escondido ou recortado */
html:not(.js) .solucoes__d,
html:not(.js) .solucoes__s{opacity:1;transform:none;clip-path:none}
html:not(.js) .solucoes__seta{stroke-dashoffset:0}