/* ============================================================================
   Kalebe RH — componentes.
   Linguagem visual: cartão grande e arredondado, sombra suave, cor cheia nas
   faixas de destaque, botão em pílula. Carrega depois de tokens.css.
   ============================================================================ */

/* ================================ botões ================================ */

.bt{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);
  font:inherit;font-weight:600;font-size:var(--t-15);line-height:1;
  padding:var(--e-4) var(--e-6);
  border:1.5px solid transparent;border-radius:var(--r-cheio);
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background var(--rapido) var(--curva),
             border-color var(--rapido) var(--curva),
             color var(--rapido) var(--curva),
             transform var(--rapido) var(--curva),
             box-shadow var(--medio) var(--curva);
}
.bt--g{padding:var(--e-5) var(--e-7);font-size:var(--t-corpo)}
.bt--p{padding:var(--e-3) var(--e-5);font-size:var(--t-14)}
.bt:hover{transform:translateY(-1px)}
.bt:active{transform:translateY(1px)}

.bt--marca{background:var(--marca);color:var(--marca-tinta);box-shadow:var(--sombra-1)}
.bt--marca:hover{background:var(--marca-escura);box-shadow:var(--sombra-2)}

/* sobre a dobra colorida */
.bt--claro{background:var(--n-0);color:var(--marca);box-shadow:var(--sombra-2)}
.bt--claro:hover{background:var(--n-0);box-shadow:var(--sombra-3)}

.bt--contorno{background:transparent;color:var(--marca-tinta);border-color:var(--sobre-borda)}
.bt--contorno:hover{background:var(--sobre-chapa-leve);border-color:var(--marca-tinta)}
.s--papel .bt--contorno,.s--fundo .bt--contorno{color:var(--marca);border-color:var(--marca-borda)}
.s--papel .bt--contorno:hover,.s--fundo .bt--contorno:hover{background:var(--marca-fraca);border-color:var(--marca)}

/* O botao de contorno tira a cor da SUPERFICIE, nao da secao. Dobra, CTA e
   rodape sao azuis cheios mesmo quando a secao em volta e clara, e sem esta
   regra o "Enviar e-mail" ficava azul-escuro sobre azul-escuro: razao 1:1,
   texto invisivel. Apareceu quando a secao de contato passou de s--papel
   para s--fundo, e nenhum olho pegou, so a medicao de contraste. */
.hero .bt--contorno,.cta .bt--contorno,.rodape .bt--contorno{
  color:var(--marca-tinta);border-color:var(--sobre-borda);
}
.hero .bt--contorno:hover,.cta .bt--contorno:hover,.rodape .bt--contorno:hover{
  background:var(--sobre-chapa-leve);border-color:var(--marca-tinta);
}

.ico{width:1.15em;height:1.15em;flex:none;stroke-width:1.6;fill:none;stroke:currentColor}
.ico--p{width:1em;height:1em}

/* ============================ selo e rótulos ============================ */

.selo{
  display:inline-flex;align-items:center;
  font-size:var(--t-14);font-weight:600;
  padding:var(--e-2) var(--e-5);
  border-radius:var(--r-cheio);
  background:var(--sobre-chapa);
  border:1px solid var(--sobre-linha);
  color:var(--marca-tinta);
  margin-bottom:var(--e-6);
}
.rot{
  display:block;
  font-size:var(--t-12);font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--suave);margin-bottom:var(--e-2);
}

/* =============================== cartões ================================ */

.carta{
  border-radius:var(--r-5);
  padding:clamp(28px,3.4vw,var(--e-9));
  display:grid;gap:var(--e-4);align-content:start;
  transition:transform var(--medio) var(--curva),box-shadow var(--medio) var(--curva);
}
/* levanta porque TEM link dentro. Levantar promete clique. */
.carta:hover{transform:translateY(-4px)}

.carta--clara{background:var(--n-0);border:1px solid var(--linha);box-shadow:var(--sombra-2)}
.carta--clara:hover{box-shadow:var(--sombra-3)}

.carta--marca{
  background:linear-gradient(160deg,var(--marca) 0%,var(--marca-escura) 100%);
  color:var(--marca-tinta);box-shadow:var(--sombra-3);
}
.carta--marca:hover{box-shadow:var(--sombra-4)}

.carta__i{
  width:var(--e-9);height:var(--e-9);border-radius:var(--r-4);
  display:grid;place-items:center;margin-bottom:var(--e-2);
}
.carta--clara .carta__i{background:var(--marca-fraca);color:var(--marca)}
.carta--marca .carta__i{background:var(--sobre-chapa);color:var(--marca-tinta)}
.carta__i .ico{width:var(--e-6);height:var(--e-6)}

/* Era caixa alta ACIMA do titulo, que e a definicao de eyebrow. Desceu para
   debaixo do <h3> e perdeu a caixa alta: agora e subtitulo do cartao, diz a
   quem aquele cartao serve, e nao disputa o olho com o titulo. */
.carta__r{font-size:var(--t-15);font-weight:600}
.carta--clara .carta__r{color:var(--marca)}
.carta--marca .carta__r{color:var(--marca-clara)}

.carta h3{font-size:var(--t-h3);letter-spacing:-.02em}
.carta__t{font-size:var(--t-corpo);line-height:1.6}
.carta--clara .carta__t{color:var(--tinta-media)}
.carta--marca .carta__t{color:var(--sobre-texto)}

.carta__elo{
  display:inline-flex;align-items:center;gap:var(--e-2);
  font-weight:600;font-size:var(--t-15);text-decoration:none;margin-top:var(--e-2);
}
.carta--clara .carta__elo{color:var(--marca)}
.carta--marca .carta__elo{color:var(--marca-tinta)}
.carta__elo .ico{transition:transform var(--medio) var(--saida)}
.carta__elo:hover .ico{transform:translateX(4px)}

/* ============================ lista com check =========================== */

.lista-check{display:grid;gap:var(--e-3)}
.lista-check li{
  display:grid;grid-template-columns:auto 1fr;gap:var(--e-3);
  font-size:var(--t-15);line-height:1.5;
}
.lista-check .ico{margin-top:.22em;stroke-width:2.4}
.carta--clara .lista-check .ico{color:var(--ok-forte)}
.carta--marca .lista-check .ico{color:var(--marca-clara)}
.carta--marca .lista-check li{color:var(--sobre-texto)}

.lista-check--forte li{font-size:var(--t-corpo);color:var(--tinta-media)}
.lista-check--forte .ico{color:var(--ok-forte)}

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

.dif{
  background:var(--n-0);border:1px solid var(--linha);
  border-radius:var(--r-5);padding:clamp(28px,3.2vw,var(--e-9));
  box-shadow:var(--sombra-1);
  transition:transform var(--medio) var(--curva),box-shadow var(--medio) var(--curva);
}
/* nao levanta: nao e clicavel. A resposta e so profundidade. */
/* So profundidade. Acender a borda na cor da marca ainda prometia clique
   num cartao que nao tem link nenhum dentro. */
.dif:hover{box-shadow:var(--sombra-3)}
.dif h3{font-size:var(--t-h3);letter-spacing:-.02em;margin-bottom:var(--e-3)}
.dif p{font-size:var(--t-corpo);line-height:1.6;color:var(--tinta-media)}

/* o do meio é preenchido, para puxar o olho no conjunto */
.dif--forte{
  background:linear-gradient(160deg,var(--marca) 0%,var(--marca-escura) 100%);
  border-color:transparent;color:var(--marca-tinta);box-shadow:var(--sombra-3);
}
.dif--forte p{color:var(--sobre-texto)}

/* ============================== pílulas ================================= */

.pilulas{display:flex;flex-wrap:wrap;gap:var(--e-3)}
.pilula{
  display:inline-flex;align-items:center;
  font-size:var(--t-14);font-weight:500;
  padding:var(--e-2) var(--e-5);
  border-radius:var(--r-cheio);
  background:var(--marca-fraca);color:var(--marca-escura);
  border:1px solid var(--marca-borda);
}

.ficha-area{
  display:flex;align-items:center;min-height:var(--e-9);
  padding:var(--e-4) var(--e-5);
  background:var(--n-0);border:1px solid var(--linha);border-radius:var(--r-4);
  font-size:var(--t-15);font-weight:600;color:var(--tinta);
  box-shadow:var(--sombra-1);
  transition:box-shadow var(--medio) var(--curva),border-color var(--rapido) var(--curva);
}
.ficha-area:hover{box-shadow:var(--sombra-2);border-color:var(--marca-borda)}

/* A ficha tira o fundo da SUPERFICIE, como o painel de servico ja fazia.
   Quando a secao de areas passou para branco na reordenacao, ficha branca
   sobre secao branca sumia: sobrava um contorno flutuando no vazio. O cinza
   de papel tambem nao resolveu, ficou perto demais do branco. Sobre branco
   a ficha passa a ser chapada na cor fraca da marca, que e a mesma familia
   da pilula usada nos servicos. */
.s--papel .ficha-area{
  background:var(--marca-fraca);border-color:var(--marca-borda);color:var(--marca-escura);
}
.s--papel .ficha-area:hover{border-color:var(--marca);box-shadow:var(--sombra-2)}

/* ============================== nota legal ============================== */

.nota{
  margin-top:var(--e-6);padding-top:var(--e-5);
  border-top:1px solid var(--linha);
  font-size:var(--t-13);line-height:1.6;color:var(--suave);
}

/* ------------------------- entrada na rolagem -------------------------
   Só opacidade e transform. O estado final é o padrão: sem JS a página
   aparece inteira e legível. */

/* Entrada de seção deliberadamente discreta e curta: o único gesto que
   merece ser notado nesta página é a virada do problema para a solução. */
.rv{opacity:0;transform:translateY(8px)}
.js .rv{transition:opacity 380ms var(--saida),transform 380ms var(--saida)}
.rv.rv--on{opacity:1;transform:none}
html:not(.js) .rv{opacity:1;transform:none}
.rv--d1{transition-delay:80ms}
.rv--d2{transition-delay:160ms}
.rv--d3{transition-delay:240ms}

/* ===================== MOVIMENTO REDUZIDO =====================
   Um bloco só, e com alternativa pensada em vez de tudo desligado.
   SOME: deslocamento espacial, desenho da seta, revelação por recorte.
   FICA: o estado da barra e a seção ativa no menu, porque são informação
   e não movimento, e o retorno de clique, que confirma uma ação. */
@media (prefers-reduced-motion:reduce){
  .rv,.js .rv{opacity:1!important;transform:none!important;transition:none!important}
  .bt:hover,.carta:hover{transform:none}
  .carta__elo .ico{transition:none}
  .solucoes__d,.solucoes__s,.solucoes__seta{
    opacity:1!important;transform:none!important;
    clip-path:none!important;stroke-dashoffset:0!important;transition:none!important;
  }
  *,*::before,*::after{animation-duration:.01ms!important}
}