/* ==========================================================================
   SAMI Sistemas — Payhub
   Seções: hero, "sua equipe ainda faz isso", conheça o Payhub, o que muda
   na rotina (carrossel), "o Payhub é para você", CTA final com formulário.
   Header e rodapé são os mesmos componentes compartilhados de base.css —
   ver payhub.php.
   ========================================================================== */

/* Palavra de destaque nos títulos ("ainda", "PayHub", "Payhub") — o Figma
   usa #1a4592 (--cor-gradiente-inicio) aqui, não o --cor-primaria de
   .texto-destaque-azul usado nas outras páginas. No Figma o peso do
   destaque só acompanha o peso do título onde está: em "Sua equipe ainda
   faz isso?" o título base é Extrabold, então "ainda" também é Extrabold;
   em "Conheça o Payhub" e "O PayHub é para você que..." o título base é
   Bold (não Extrabold), então a palavra destacada ali também é só Bold —
   por isso o extrabold abaixo é sobrescrito especificamente para o título
   da seção "Sua equipe". */
.payhub-destaque {
  font-weight: var(--peso-bold);
  color: var(--cor-gradiente-inicio);
}

.payhub-dores__titulo .payhub-destaque {
  font-weight: var(--peso-extrabold);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero-payhub {
  position: relative;
  background-color: var(--cor-fundo-escuro);
  /* Gradiente PRIMEIRO (pinta por cima da imagem) funde o final dela na
     mesma cor sólida escura que a próxima seção usa — mesma técnica do
     .hero da home (ver home.css), senão a borda de baixo cortava seco
     bem em cima da .payhub-dores. Começa a desbotar a 75% da altura pra
     dar bastante espaço pra transição ficar suave. */
  background-image:
    linear-gradient(to bottom, transparent 0%, transparent 75%, var(--cor-fundo-escuro) 100%),
    url("assets/img/bg-payhub-hero.jpg");
  background-size: cover, cover;
  background-position: center top, center top;
  background-repeat: no-repeat, no-repeat;
  /* Valores exatos do Figma (não os espaçamentos genéricos do site): a
     imagem do laptop encosta bem no fim da seção, sem padding embaixo. */
  padding-block: calc(var(--altura-header) + 6.5625rem) 0;
  /* Sem overflow:hidden de propósito: cortava seco o .secao-glow, que
     nasce parcialmente fora da seção para o degradê desbotar antes de
     qualquer borda (mesmo critério do .samibank na home). */
  text-align: center;
}

.hero-payhub>.container,
.hero-payhub__imagem {
  position: relative;
  z-index: 1;
}

.hero-payhub__selo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 105 × 43,4 no Figma. */
  padding: 0.428rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: var(--raio-pilula);
  font-size: var(--texto-grande);
  color: var(--cor-texto-invertido);
}

.hero-payhub__titulo {
  max-width: 58rem;
  margin: var(--espaco-24) auto 0;
  font-size: var(--texto-hero);
  font-weight: var(--peso-extrabold);
  line-height: var(--altura-linha-compacta);
  letter-spacing: var(--espacamento-letra-hero);
  color: var(--cor-texto-invertido);
}

.hero-payhub__descricao {
  max-width: 40.5rem;
  margin: var(--espaco-16) auto 0;
  font-size: var(--texto-grande);
  line-height: 1.6;
  color: var(--cor-texto-invertido);
}

/* Forma/cor vêm de .botao + .botao--primario (base.css) — mesmo padrão do
   .hero__botao da home (só o espaçamento é próprio daqui). */
.hero-payhub__botao {
  margin-top: 3.5rem;
}

.hero-payhub__legenda {
  margin-top: var(--espaco-12);
  font-size: var(--texto-micro);
  letter-spacing: 0.7px;
  color: rgba(255, 255, 255, 0.7);
}

/* Vive fora do .container (ver payhub.php): mesmo menor que o miolo do
   site, ainda passa dos 1136px do container central. */
.hero-payhub__imagem {
  width: min(50rem, 100% - 2 * var(--espaco-24));
  margin: var(--espaco-48) auto 0;
}

/* O arquivo assets/img/mockup-tablet-payhub-mais-frontal-sem-fundo.png é um
   canvas maior que o notebook em si, com margem (quase transparente) ao
   redor — não dá pra mostrar o asset inteiro (o notebook fica pequeno,
   boiando numa moldura maior). aspect-ratio e top/left/width/height abaixo
   são o recorte medido direto no bounding-box do notebook dentro do PNG
   (canvas 1492×1054, notebook ocupando x:129–1251 / y:55–1042), num
   container com overflow:hidden — se o asset for trocado por outro com
   margem diferente, estes valores precisam ser recalculados para o novo
   recorte. */
.hero-payhub__imagem-recorte {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1122 / 987;
  border-radius: var(--raio-8);
}

.hero-payhub__imagem-recorte img {
  position: absolute;
  top: -5.57%;
  left: -11.5%;
  width: 132.98%;
  height: 106.79%;
  max-width: none;
}

/* --------------------------------------------------------------------------
   Sua equipe ainda faz isso?
   -------------------------------------------------------------------------- */

.payhub-dores {
  position: relative;
  background-color: var(--cor-fundo-escuro);
  /* 148px exatos do Figma entre o fim do hero e o título — bem maior que
     o --espaco-96 genérico do site. */
  padding-block: 9.25rem 0;
}

.payhub-dores__titulo {
  position: relative;
  z-index: 1;
  max-width: 45rem;
  margin-inline: auto;
  font-size: 2.5rem;
  font-weight: var(--peso-regular);
  line-height: 1.04;
  text-align: center;
  color: var(--cor-texto-invertido);
}

.payhub-dores__grade {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--espaco-24);
  max-width: var(--largura-conteudo);
  /* 90px no Figma, quase o dobro do --espaco-48 genérico. */
  margin: 5.65rem auto 0;
}

.cartao-dor-payhub {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 22,8px entre o ícone e o texto no Figma. */
  gap: 1.425rem;
  padding: 2.0625rem 0.9rem 2.5625rem;
  background-color: transparent;
  border: 1px solid;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px rgba(110, 168, 255, .15), 0 20px 50px -20px rgba(58, 130, 255, .5);
  border-color: rgba(110, 168, 255, .45);
  border-radius: 20px;
  text-align: center;
}

.cartao-dor-payhub__icone {
  width: 3.25rem;
  height: 3.25rem;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.cartao-dor-payhub__icone--invertido {
  transform: scaleY(-1);
}

.cartao-dor-payhub__texto {
  font-size: 1.375rem;
  /* 28px de entrelinha: é o que dá os 56px de duas linhas do Figma (e os
     204,8px de altura do card). */
  line-height: 1.273;
  color: var(--cor-texto-invertido);
}

/* Antes era uma faixa cheia (ponta a ponta), pensada pra separar duas
   seções claras — nas seções escuras (ver payhub-dores/conheca acima) uma
   barra sólida cortando reto no meio do fundo escuro ficava destacada
   demais, meio "colada por cima". Vira um banner contido, com cantos
   arredondados e uma sombra azulada, no mesmo espírito dos cards/pills do
   resto do site escuro (ver .vitrine__selo em home.css). */
.payhub-faixa {
  position: relative;
  z-index: 1;
  max-width: var(--largura-conteudo);
  /* 149px no Figma — bem mais respiro que os 64px atuais, é o que estava
     deixando a seção "colada". Margem lateral mínima (fica fora do
     .container, ver payhub.php) pra não encostar na borda em telas
     estreitas, quando o max-width já não limita mais o banner. */
  margin: 9.3rem auto 0;
  margin-inline: max(var(--espaco-24), calc((100% - var(--largura-conteudo)) / 2));
  /* Padding exato do Figma: 59px de altura total (21px + linha de 16.8px). */
  padding-block: 1.319rem;
  background: linear-gradient(90deg, var(--cor-gradiente-inicio), var(--cor-gradiente-fim));
  border-radius: var(--raio-16);
  box-shadow: 0 20px 40px -12px rgba(26, 69, 146, 0.5);
}

.payhub-faixa__texto {
  max-width: 65rem;
  margin-inline: auto;
  padding-inline: var(--espaco-24);
  font-size: 1.1875rem;
  font-weight: var(--peso-bold);
  line-height: 0.884;
  letter-spacing: 0.7px;
  text-align: center;
  color: var(--cor-texto-invertido);
}

/* --------------------------------------------------------------------------
   Conheça o Payhub
   -------------------------------------------------------------------------- */

.payhub-conheca {
  position: relative;
  background-color: var(--cor-fundo-escuro);
  /* 149.5px no Figma entre a faixa degradê e este título — o mesmo padrão
     de respiro maior das outras transições de seção da página. */
  padding-block: 9.34rem var(--espaco-96);
}

.payhub-conheca__grade {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espaco-64);
  align-items: center;
}

.payhub-conheca__titulo {
  font-size: 2.5rem;
  font-weight: var(--peso-bold);
  line-height: 1.04;
  color: var(--cor-texto-invertido);
  max-width: 445px;
}

.payhub-conheca__descricao {
  margin-top: var(--espaco-24);
  font-size: var(--texto-grande);
  line-height: 1.6;
  color: var(--cor-texto-borda-clara);
  max-width: 488px;
}

.payhub-conheca__imagem {
  border-radius: var(--raio-16);
  box-shadow: var(--sombra-imagem);
  overflow: hidden;
}

.payhub-conheca__imagem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 511.5 / 400 no Figma — não é um 3:2 "redondo", fica mais quadrado. */
  aspect-ratio: 1.279;
}

/* Glow interativo (segue o mouse) atrás da imagem — mesma ideia do
   .samibank__glow-interativo na home (ver comentário na base compartilhada
   .secao-glow-interativo em base.css), só reposicionado: aqui a imagem
   fica na coluna da direita do grid, não na esquerda. */
.payhub-conheca__glow-interativo {
  top: 50%;
  left: 72%;
  width: 26rem;
  height: 26rem;
  margin: -13rem 0 0 -13rem;
  background: radial-gradient(circle, rgba(87, 169, 224, .5) 0%, rgba(30, 90, 150, .16) 45%, rgba(30, 90, 150, 0) 72%);
}

.payhub-passos {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--espaco-32);
  margin-top: var(--espaco-80);
}

.payhub-passo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.payhub-passo__numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: var(--espaco-24);
  background-color: transparent;
  border: 1px solid;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px rgba(110, 168, 255, .15), 0 20px 50px -20px rgba(58, 130, 255, .5);
  border-color: rgba(110, 168, 255, .45);
  border-radius: 20px;
  font-size: 1.5rem;
  font-weight: var(--peso-bold);
  color: var(--cor-texto-invertido);
}

/* No Figma esse título tem entrelinha de 17px num texto de 24px — as duas
   linhas de "Captação do documento" se sobrepõem. A entrelinha apertada
   existe pra manter as 4 descrições na mesma altura (y=136,8 no Figma),
   então o min-height reserva as duas linhas nos 48,8px do slot de lá:
   as descrições continuam alinhadas e os glifos param de colidir. */
.payhub-passo__titulo {
  min-height: 3.05rem;
  font-size: 1.5rem;
  font-weight: var(--peso-extrabold);
  line-height: 1;
  letter-spacing: 0.7px;
  color: var(--cor-texto-invertido);
}

.payhub-passo__texto {
  margin-top: var(--espaco-8);
  font-size: var(--texto-base);
  line-height: 1.5;
  color: var(--cor-texto-borda-clara);
}

/* --------------------------------------------------------------------------
   O que muda na sua rotina (carrossel)
   -------------------------------------------------------------------------- */

.payhub-rotina {
  position: relative;
  /* O wrapper (.payhub-rotina__scroller) ganha altura extra via JS pro
     efeito de scroll grudento — sem uma cor aqui, essa sobra de altura
     (fora do .payhub-rotina__pin) deixava o branco do body aparecendo
     entre esta seção e a anterior. */
  background-color: var(--cor-fundo-escuro);
}

/* No desktop essa faixa vira uma seção "grudenta": o wrapper (altura
   calculada via JS, ver payhub-carousel.js) dá um respiro extra de
   scroll, e o conteúdo real (.payhub-rotina__pin) fica preso no topo da
   tela (position: sticky) só pelo tempo desse respiro — não precisa
   virar 100vh, fica do tamanho natural dela mesma. O card ativo troca
   conforme a posição real do scroll, sem depender de interceptar o
   evento de wheel (não é confiável em todo trackpad/navegador).
   No mobile/tablet fica tudo em fluxo normal, sem grudar. */
@media (min-width: 56.25rem) {
  .payhub-rotina__pin {
    position: sticky;
    top: 170px;
  }
}

/* Abaixo do breakpoint do sticky: sem position:sticky, o pin precisa do
   próprio position:relative pra ser a referência de posicionamento do
   .secao-meteoros (position:absolute; inset:0) — no desktop quem cumpre
   esse papel é o position:sticky acima (também é um valor "positioned"). */
@media (max-width: 56.24rem) {
  .payhub-rotina__pin {
    position: relative;
  }
}

.payhub-rotina__pin {
  /* position NÃO entra aqui: no desktop quem define é o "position: sticky"
     do @media acima — como as duas regras têm a mesma especificidade, um
     "position: relative" incondicional aqui (depois do @media no arquivo)
     sempre ganharia da cascata e cancelava o sticky em qualquer largura de
     tela. No mobile/tablet (sem sticky) o "relative" vem do @media de
     largura máxima lá embaixo, só que só ali. Cor sólida (não mais a foto
     bg-overlay.jpg) — mesmo tratamento do .samibank na home, que também é
     uma seção escura sem imagem de fundo, só a cor sólida + estrelas/
     meteoros decorativos (ver secao-meteoros abaixo). O background mora
     aqui (não no .payhub-rotina, que fica bem mais alto por causa do
     respiro de scroll) — assim ele fica parado enquanto a seção está
     "grudada", em vez de esticar/rolar junto. */
  background-color: var(--cor-fundo-escuro);
  padding-block: var(--espaco-96);
  /* Sem overflow:hidden de propósito: cortava seco o .secao-glow (ver
     comentário equivalente em .hero-payhub acima). Os meteoros continuam
     contidos pelo próprio percurso curto da animação (ver secao-meteoro-
     cair em base.css), não dependem deste overflow. */
}

.payhub-rotina__titulo {
  position: relative;
  z-index: 1;
  max-width: 54rem;
  /* ~103px no Figma entre o título e o carrossel, bem mais que os 64px
     genéricos (essa seção usa scroll "fullPage.js", então a medida exata
     tem uma margem de incerteza maior que o resto da página). */
  margin: 0 auto 6.4rem;
  font-size: 2.5rem;
  font-weight: var(--peso-bold);
  line-height: 1.04;
  text-align: center;
  color: var(--cor-texto-invertido);
}

.payhub-carrossel {
  position: relative;
  z-index: 1;
  margin-inline: auto;
  padding-inline: var(--espaco-24);
  overflow: hidden;
}

.payhub-carrossel__pista {
  display: flex;
  gap: 1.75rem;
  /* 24px de respiro acima dos cards, antes ficavam colados no topo. */
  padding-top: 1.5rem;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.payhub-carrossel__cartao {
  position: relative;
  flex: 0 0 27.5rem;
  min-height: 18.75rem;
  padding: var(--espaco-32);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--raio-20);
  background-color: rgba(255, 255, 255, 0.05);
  opacity: 0.55;
  transition: opacity var(--transicao-suave), border-color var(--transicao-suave), background-color var(--transicao-suave), box-shadow var(--transicao-suave), transform var(--transicao-suave);
}

/* Card ativo: mesma família "vidro escuro" dos inativos (ver .botao--vidro
   em base.css), só mais claro/nítido e com um leve realce azul — antes
   virava um cartão branco sólido com texto escuro no meio de cards
   escuros, uma troca de esquema de cor abrupta que lia como "quebrado". */
.payhub-carrossel__cartao--ativo {
  border-color: rgba(110, 168, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 1px rgba(110, 168, 255, .18), 0 20px 50px -20px rgba(58, 130, 255, .55);
  opacity: 1;
  transform: scale(1.02);
}

.payhub-carrossel__titulo {
  position: relative;
  z-index: 1;
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.95);
  transition: font-size var(--transicao-suave);
}

.payhub-carrossel__cartao--ativo .payhub-carrossel__titulo {
  font-size: 1.5rem;
  font-weight: var(--peso-bold);
}

.payhub-carrossel__texto {
  position: relative;
  z-index: 1;
  margin-top: var(--espaco-16);
  font-size: var(--texto-base);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  transition: color var(--transicao-suave);
}

.payhub-carrossel__cartao--ativo .payhub-carrossel__texto {
  color: var(--cor-texto-borda-clara);
}

/* Número "marca-d'água" no canto — antes era grande e sangrava tanto pra
   fora (translate 28%/22%) que o corte do border-radius/overflow:hidden
   do card ficava com uma quina reta feia em vez de um recorte discreto.
   Menor e mais contido, some no canto sem competir com o texto. */
.payhub-carrossel__numero {
  position: absolute;
  right: var(--espaco-8);
  bottom: -0.5rem;
  font-size: 5.5rem;
  font-weight: var(--peso-bold);
  line-height: 1;
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.14);
  transition: color var(--transicao-suave);
}

.payhub-carrossel__cartao--ativo .payhub-carrossel__numero {
  color: rgba(110, 168, 255, 0.22);
}

.payhub-carrossel__controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-16);
  margin-top: 4.5rem;
}

.payhub-carrossel__seta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background-color: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  color: var(--cor-texto-invertido);
  font-size: 1.2rem;
  transition: background-color var(--transicao-rapida);
}

.payhub-carrossel__seta:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.payhub-carrossel__seta:disabled {
  opacity: 0.3;
  cursor: default;
}

.payhub-carrossel__dots {
  display: flex;
  align-items: center;
  gap: var(--espaco-8);
}

.payhub-carrossel__dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  background-color: rgba(255, 255, 255, 0.35);
  border-radius: var(--raio-pilula);
  transition: width var(--transicao-padrao), background-color var(--transicao-padrao);
}

.payhub-carrossel__dot--ativo {
  width: 1.375rem;
  background-color: var(--cor-fundo);
}

/* --------------------------------------------------------------------------
   O Payhub é para você que...
   -------------------------------------------------------------------------- */

.payhub-publico {
  position: relative;
  background-color: var(--cor-fundo-escuro);
  padding-block: var(--espaco-96);
}

.payhub-publico__titulo {
  position: relative;
  z-index: 1;
  font-size: 2.5rem;
  font-weight: var(--peso-regular);
  text-align: center;
  color: var(--cor-texto-invertido);
}

.payhub-publico__grade {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espaco-32);
  max-width: var(--largura-conteudo);
  margin: var(--espaco-64) auto 0;
}

.cartao-publico {
  display: flex;
  align-items: center;
  gap: var(--espaco-24);
  /* 22,86px à direita (não 32): com 32 o texto sobrava 384px e "Quem quer
     eliminar erros de digitação" quebrava em duas linhas — no Figma é uma. */
  padding: var(--espaco-32) 1.43rem var(--espaco-32) 2.25rem;
  background-color: rgba(255, 255, 255, 0.06);
  border-left: 4px solid var(--cor-primaria);
  border-radius: var(--raio-8);
}

.cartao-publico__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  background-color: var(--cor-fundo);
  border-radius: var(--raio-12);
  /* Sombra sutil do Figma, não a --sombra-card-leve genérica do site. */
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

/* Cada ícone tem um tamanho próprio no Figma (18px, 21px, 24×12px, 20px)
   — não é um grid uniforme. Deixa cada um no tamanho nativo do arquivo,
   só limitando ao slot de 48px. */
.cartao-publico__icone img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.cartao-publico__texto {
  font-size: 1.375rem;
  color: var(--cor-texto-invertido);
}

/* --------------------------------------------------------------------------
   CTA final com formulário
   -------------------------------------------------------------------------- */

.payhub-cta {
  position: relative;
  /* Antes tinha uma imagem própria (bg-payhub-cta.jpg) atrás — ficava com
     cara de banner colado por cima, cortando o fundo escuro sólido que
     todas as outras seções da página usam. Só a cor sólida, igual às
     demais. */
  background-color: var(--cor-fundo-escuro);
  padding-block: var(--espaco-96);
}

.payhub-cta__grade {
  position: relative;
  z-index: 1;
  display: grid;
  /* 371px de texto + 495,7px de formulário, com o vão sobrando entre os
     dois (~267px no Figma). O 1.1fr/1fr anterior dava 536px de coluna de
     texto e estragava as quebras do título. */
  grid-template-columns: 23.1875rem 30.98rem;
  justify-content: space-between;
  align-items: center;
  max-width: var(--largura-conteudo);
  margin-inline: auto;
}

.payhub-cta__titulo {
  font-size: 4.86rem;
  font-weight: var(--peso-bold);
  line-height: 1;
  color: var(--cor-texto-invertido);
}

.payhub-cta__descricao {
  max-width: 21.125rem;
  margin-top: var(--espaco-24);
  font-size: var(--texto-grande);
  line-height: 1.6;
  color: #dfe3ff;
}

/* Forma/cor vêm de .botao + .botao--primario (base.css) — mesmo padrão dos
   outros CTAs do site (ver .hero-payhub__botao). Aqui só o que é
   específico deste botão: gap maior pro ícone, largura fixa e o respiro
   acima dele. */
.payhub-cta__whatsapp {
  /* 13px entre o ícone e o texto no Figma. */
  gap: 0.8125rem;
  margin-top: var(--espaco-32);
  /* 370,72 × 46 no Figma. */
  width: 23.17rem;
  font-size: var(--texto-grande);
  white-space: nowrap;
}

.payhub-cta__whatsapp img {
  width: 1.75rem;
  height: 1.75rem;
}

/* Mesmo "vidro escuro" do card ativo do carrossel (.payhub-carrossel__cartao--ativo)
   — antes era um card branco sólido com texto escuro, uma troca de esquema
   de cor abrupta no meio de uma página toda escura. */
.payhub-cta__form {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(110, 168, 255, 0.5);
  border-radius: 1.125rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 1px rgba(110, 168, 255, .18), 0 20px 50px -20px rgba(58, 130, 255, .55);
}

/* Paddings de 36px (não os 32px genéricos): é o que sobra dos 495,7px do
   card pra deixar os campos com os 423,7px exatos do Figma. */
.payhub-cta__form-titulo {
  padding: var(--espaco-32) 2.25rem 0;
  font-size: 1.6rem;
  font-weight: var(--peso-bold);
  /* 33px de caixa pro texto de 25,6px (é o que o Figma reserva). */
  line-height: 1.289;
  color: var(--cor-texto-invertido);
}

.payhub-cta__form-subtitulo {
  padding: 0.5375rem 2.25rem 0;
  font-size: 0.9rem;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.65);
}

.payhub-cta__formulario {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-16);
  padding: 1.625rem 2.25rem 0;
}

.payhub-cta__form-rodape {
  /* 14px do botão até aqui, 37px daqui até o fim do card. */
  padding: 0.875rem 2.25rem 2.32rem;
  font-size: 0.919rem;
  line-height: 1.3;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
}

/* --------------------------------------------------------------------------
   Formulário do CTA (.payhub-form__*)

   Componente próprio desta página. Antes o markup usava o .cta-form__* de
   solucao.css e daqui saíam só os ajustes de cor — mas payhub.php carrega
   apenas root/base/payhub.css, então as regras base nunca chegavam e o
   formulário renderizava sem estilo (label e campo na mesma linha, input
   de 203×24 sem borda). Medidas abaixo são as do Figma.
   -------------------------------------------------------------------------- */

.payhub-form__campo {
  display: flex;
  flex-direction: column;
  /* 9px entre o rótulo e o campo. */
  gap: 0.5625rem;
}

.payhub-form__rotulo {
  font-size: 0.95rem;
  font-weight: var(--peso-bold);
  line-height: 1;
  color: var(--cor-texto-invertido);
}

.payhub-form__entrada {
  width: 100%;
  height: 3rem;
  padding-inline: 0.875rem;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--raio-8);
  font-family: inherit;
  font-size: 1rem;
  color: var(--cor-texto-invertido);
  transition: border-color var(--transicao-rapida);
}

.payhub-form__entrada::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.payhub-form__entrada:focus {
  outline: none;
  border-color: rgba(110, 168, 255, 0.8);
}

/* O <select> tem 18px de recuo no Figma, 4px mais que os inputs. */
.payhub-form__selecao {
  padding-inline: 1.125rem 1.875rem;
}

/* "Tamanho da equipe" usa o widget compartilhado (.select-personalizado*,
   ver base.css) em vez do <select> nativo — sem isso, o dropdown saía do
   navegador (branco, sem borda) destoando do resto do formulário escuro.
   Aqui só a cor/tamanho: a estrutura (posição, seta, lista) já vem de
   base.css. */
.payhub-cta__form .select-personalizado__botao {
  height: 3rem;
  padding-inline: 1.125rem 1.875rem;
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  border-radius: var(--raio-8);
  color: var(--cor-texto-invertido);
}

.payhub-cta__form .select-personalizado__botao:focus-visible,
.payhub-cta__form .select-personalizado--aberto .select-personalizado__botao {
  border-color: rgba(110, 168, 255, 0.8);
}

.payhub-cta__form .select-personalizado__valor--vazio {
  color: rgba(255, 255, 255, 0.4);
}

.payhub-cta__form .select-personalizado__lista {
  background-color: var(--cor-fundo-cta-final);
  border-color: rgba(255, 255, 255, 0.18);
}

.payhub-cta__form .select-personalizado__opcao {
  color: var(--cor-texto-invertido);
}

.payhub-cta__form .select-personalizado__opcao:hover,
.payhub-cta__form .select-personalizado__opcao--foco {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Mesma cor/hover do botão de formulário da home (.cta-form__botao em
   solucao.css, que payhub.php não carrega) — só o tamanho/posição são
   específicos deste formulário. */
.payhub-form__botao {
  /* 26px do último campo até o botão (16px já vêm do gap do formulário). */
  margin-top: 0.625rem;
  width: 100%;
  height: 3.25rem;
  background-color: var(--cor-primaria);
  border-radius: var(--raio-8);
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: var(--peso-bold);
  color: var(--cor-texto-invertido);
  cursor: pointer;
  transition: background-color var(--transicao-padrao);
}

.payhub-form__botao:hover {
  background-color: var(--cor-primaria-hover);
}

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */

@media (max-width: 64rem) {

  /* 1024px */
  .hero-payhub {
    padding-block: calc(var(--altura-header) + var(--espaco-48)) var(--espaco-64);
  }

  .payhub-dores__grade {
    grid-template-columns: repeat(2, 1fr);
  }

  .payhub-conheca__grade {
    grid-template-columns: 1fr;
    gap: var(--espaco-32);
  }

  .payhub-conheca__imagem {
    order: -1;
  }

  .payhub-passos {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--espaco-32);
  }

  /* No tablet/mobile o carrossel vira "um cartão por vez" de verdade —
     o efeito "peek" (cards cortados na borda) só faz sentido com espaço
     de sobra na tela, então aqui só o cartão ativo aparece, ocupando a
     largura toda (o JS não aplica o transform de deslizar nessa faixa). */
  .payhub-carrossel__pista {
    transform: none !important;
  }

  .payhub-carrossel__cartao {
    flex-basis: 100%;
  }

  .payhub-carrossel__cartao:not(.payhub-carrossel__cartao--ativo) {
    display: none;
  }

  .payhub-publico__grade {
    grid-template-columns: 1fr;
  }

  .payhub-cta__grade {
    grid-template-columns: 1fr;
    gap: var(--espaco-48);
  }

  .payhub-cta__titulo {
    font-size: 2.75rem;
  }

  .payhub-cta__descricao {
    max-width: none;
  }

  /* Solta a largura fixa de 370,7px do Figma quando a coluna encolhe. */
  .payhub-cta__whatsapp {
    width: auto;
    max-width: 100%;
  }
}

@media (max-width: 48rem) {

  /* 768px */
  .hero-payhub {
    padding-block: calc(var(--altura-header) + var(--espaco-32)) var(--espaco-48);
  }

  .hero-payhub__titulo {
    font-size: clamp(2rem, 1.4rem + 3vw, 3rem);
  }

  .payhub-dores__grade {
    grid-template-columns: 1fr;
  }

  .payhub-passos {
    grid-template-columns: 1fr;
  }

  /* Numa coluna só cada título cabe em uma linha — sem slot reservado. */
  .payhub-passo__titulo {
    min-height: 0;
  }

  .payhub-conheca__titulo,
  .payhub-rotina__titulo,
  .payhub-publico__titulo {
    font-size: 1.75rem;
  }

  .payhub-cta__titulo {
    font-size: 2.25rem;
  }
}