/* ============================================================
   Botão Arrow Fill — porte do lab (Downloads\Componentes Testes\
   botao-arrow-fill), versão aprovada em 09-09-2026, a mesma que
   está no Figma (BNC - NTC, Landing Pages, component set
   1828:37285).

   Diferenças em relação ao lab: sem @font-face (a Poppins já é
   carregada pelo site) e sem o palco de demonstração. As cores
   apontam para os tokens do design-system.css, com o literal do
   lab como fallback.

   Aprovado em 10-09-2026 e promovido a componente do site: saiu de
   `paginas/aplicativo/` para a raiz e é carregado pelas 15 páginas,
   junto de `botao-arrow-fill.js`. Onde está em uso:
     · CTA da navbar (partials/navbar.html) — `.afb--nav`
     · CTA principal do hero de cada página — tamanho padrão
   Convenção de tamanho: o botão acompanha o vizinho que substituiu,
   e o raio da bolha é sempre o raio do botão menos a folga lateral.
   ============================================================ */

.afb {
  /* cores — trocar aqui, ou inline por instância */
  --btn-bg:              var(--blue-500, #005bff);
  --btn-text:            var(--blue-50, #eef4ff);
  --btn-fill-bg:         var(--blue-50, #eef4ff);
  --btn-fill-text:       var(--blue-500, #005bff);
  --btn-fill-bg-hover:   var(--blue-50, #eef4ff);
  --btn-fill-text-hover: var(--blue-500, #005bff);
  --btn-arrow:           var(--btn-fill-text);
  --btn-arrow-hover:     var(--btn-fill-text-hover);

  /* Geometria em px (o lab é todo em vw, escala com a viewport). Convertida
     em 09-09-2026 porque no hero o botão ficava muito maior que o `.btn--lg`
     ao lado: 4.2vw dava ~66px contra os 46px do vizinho. Aqui a altura fecha
     em 48px e o texto em 16px, o mesmo tamanho do `.btn--lg`.
     Os raios encolheram na mesma proporção da altura (22 e 14 do lab valiam
     para ~60px de altura; a 48px viram 18 e 12), senão o botão vira pílula. */
  --icon-circle:    36px;
  --icon-right:     6px;
  --circle-inset-y: calc((100% - var(--icon-circle)) / 2);
  --radius:         18px;   /* cantos do botão (original era pílula) */
  /* cantos da bolha da seta: menores que os do botão, senão os arcos não
     ficam concêntricos. Regra: raio externo menos a folga até a borda. */
  --icon-radius:    12px;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: fit-content;
  height: 48px;
  padding-inline: 26px calc(var(--icon-circle) + var(--icon-right) + 16px);
  border: 1px solid var(--btn-bg);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-text);
  font-family: 'Poppins', sans-serif;
  font-size: 16px;   /* = var(--text-base) do .btn--lg */
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  text-rendering: geometricPrecision;
  overflow: hidden;
  cursor: pointer;
}

/* rótulo de baixo, na cor normal */
.afb__label {
  position: relative;
  z-index: 1;
  padding-bottom: 1px;
}

/* preenchimento que se expande e cobre o botão */
.afb__fill {
  position: absolute;
  z-index: 2;
  inset: var(--circle-inset-y) var(--icon-right) var(--circle-inset-y)
         calc(100% - var(--icon-right) - var(--icon-circle));
  /* no repouso ocupa exatamente o retângulo da bolha, então usa o raio dela */
  border-radius: var(--icon-radius);
  background: var(--btn-fill-bg);
  pointer-events: none;
  transition: all 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

/* cópia do rótulo recortada pelo preenchimento: é o que recolore o texto */
.afb__clip {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  padding-inline: 26px calc(var(--icon-circle) + var(--icon-right) + 16px);
  color: var(--btn-fill-text);
  clip-path: inset(var(--circle-inset-y) var(--icon-right) var(--circle-inset-y)
                   calc(100% - var(--icon-right) - var(--icon-circle)));
  pointer-events: none;
  transition: all 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.afb__clip span {
  position: relative;
  z-index: 1;
  padding-bottom: 1px;
  white-space: nowrap;
}

/* bolha da seta */
.afb__icon {
  position: absolute;
  right: var(--icon-right);
  top: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-circle);
  height: var(--icon-circle);
  flex-shrink: 0;
  transform: translateY(-50%);
  border-radius: var(--icon-radius);
  background: var(--btn-fill-bg);
  color: var(--btn-arrow);
  overflow: hidden;
  pointer-events: none;
  /* garante o recorte arredondado no Safari */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
          mask-image: radial-gradient(white, black);
  transition: background-color 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86),
              color 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.afb__icon svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  transform-origin: center;
  color: currentColor;
  transition: transform 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
/* seta que entra pela esquerda */
.afb__arrow--in  { transform: translate(-170%, -50%) scale(0); }
/* seta que sai pela direita */
.afb__arrow--out { transform: translate(-50%, -50%) scale(1); }

/* ------------------------------------------------------------
   Estados: hover no desktop, data-pressed no toque
   ------------------------------------------------------------ */

.afb:hover .afb__fill,
.afb[data-pressed="true"] .afb__fill {
  inset: 0;
  /* o preenchimento sai do retângulo da bolha e termina nos cantos do botão;
     sem isto o formato menor sobraria nos cantos, deixando o fundo aparecer */
  border-radius: var(--radius);
  background: var(--btn-fill-bg-hover);
}

.afb:hover .afb__clip,
.afb[data-pressed="true"] .afb__clip {
  clip-path: inset(0 0 0 0);
  color: var(--btn-fill-text-hover);
}

.afb:hover .afb__icon,
.afb[data-pressed="true"] .afb__icon {
  background: var(--btn-fill-bg-hover);
  color: var(--btn-arrow-hover);
}

.afb:hover .afb__arrow--in,
.afb[data-pressed="true"] .afb__arrow--in  { transform: translate(-50%, -50%) scale(1); }

.afb:hover .afb__arrow--out,
.afb[data-pressed="true"] .afb__arrow--out { transform: translate(70%, -50%) scale(0); }

@media (prefers-reduced-motion: reduce) {
  .afb__fill, .afb__clip, .afb__icon, .afb__icon svg { transition: none; }
}

/* ------------------------------------------------------------
   Variantes de cor da paleta
   ------------------------------------------------------------ */

/* navy sólido, bolha azul-marca */
.afb--navy {
  --btn-bg:              var(--blue-900, #001e54);
  --btn-text:            var(--blue-50, #eef4ff);
  --btn-fill-bg:         var(--blue-500, #005bff);
  --btn-fill-text:       var(--blue-50, #eef4ff);
  --btn-fill-bg-hover:   var(--blue-500, #005bff);
  --btn-fill-text-hover: var(--blue-50, #eef4ff);
}

/* claro: fundo #eef4ff e texto azul, para seções brancas */
.afb--claro {
  --btn-bg:              var(--blue-50, #eef4ff);
  --btn-text:            var(--blue-500, #005bff);
  --btn-fill-bg:         var(--blue-500, #005bff);
  --btn-fill-text:       var(--blue-50, #eef4ff);
  --btn-fill-bg-hover:   var(--blue-500, #005bff);
  --btn-fill-text-hover: var(--blue-50, #eef4ff);
  border-color: var(--ink-200, #d7deec);
}

/* ------------------------------------------------------------
   Adaptação de tamanho
   Com a geometria em px o botão não precisa mais dos dois
   breakpoints do original (que existiam só para o vw não explodir
   no mobile). Sobra um ajuste fino no celular, onde o .btn--lg
   também encolhe.
   ------------------------------------------------------------ */

@media (max-width: 767px) {
  .afb {
    height: 46px;
    padding-inline: 22px calc(var(--icon-circle) + var(--icon-right) + 14px);
    font-size: 15px;
    --icon-circle: 34px;
    --radius: 17px;
    --icon-radius: 11px;
  }
  .afb__clip { padding-inline: 22px calc(var(--icon-circle) + var(--icon-right) + 14px); }
  .afb__icon svg { width: 17px; height: 17px; }
}

/* ------------------------------------------------------------
   Variante de parte clara em branco puro — para o hero
   O lab usa #eef4ff (blue/50) na bolha e no preenchimento. Aqui a
   parte clara é branco 100%, que sobre a foto do hero separa melhor
   do azul do botão. O texto e a seta sobre ela voltam ao azul, que
   é o contraste do componente original.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   Tamanho da navbar
   O CTA da navbar (`.btn-primary`) é menor que o `.btn--lg` do hero:
   texto de 15px, padding 10/20, cantos de 15px — dá ~40px de altura.
   Os raios seguem a mesma regra do resto do arquivo: o do botão
   acompanha a altura (15px, igual ao vizinho) e o da bolha é ele
   menos a folga de 5px.
   ------------------------------------------------------------ */

.afb--nav {
  --icon-circle: 30px;
  --icon-right:  5px;
  --radius:      15px;
  --icon-radius: 10px;

  height: 40px;
  padding-inline: 20px calc(var(--icon-circle) + var(--icon-right) + 12px);
  font-size: 15px;
  font-weight: 600;   /* o CTA da navbar é 600, não 500 */
}
.afb--nav .afb__clip { padding-inline: 20px calc(var(--icon-circle) + var(--icon-right) + 12px); }
.afb--nav .afb__icon svg { width: 16px; height: 16px; }

.afb--claro-branco {
  --btn-fill-bg:         #fff;
  --btn-fill-bg-hover:   #fff;
  --btn-fill-text:       var(--blue-500, #005bff);
  --btn-fill-text-hover: var(--blue-500, #005bff);
}

/* ------------------------------------------------------------
   O componente também funciona em <button>
   Alguns CTAs do site abrem modal e são <button>, não <a>. O
   navegador dá a eles fundo, borda e fonte próprios, que ganham do
   que o `.afb` define por herança.
   ------------------------------------------------------------ */

button.afb {
  -webkit-appearance: none;
          appearance: none;
  font: inherit;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 500;
}

/* ------------------------------------------------------------
   CTA do hero da home
   Na home o hero não tem par de botões: o CTA é a única chamada, e
   no mobile o layout antigo dava a ele largura fluida e área de
   toque maior. Isso é preservado aqui — sem esta regra o botão
   ficaria pequeno e solto no meio da tela.
   ------------------------------------------------------------ */

.afb--hero-home { margin-top: 24px; }

@media (max-width: 576px) {
  .afb--hero-home {
    width: 100%;
    max-width: 340px;
    height: 54px;
    margin-top: 28px;
  }
}

/* ------------------------------------------------------------
   Botão de largura cheia
   Os botões de envio dos formulários ocupavam a largura do campo
   (`width:100%` no HTML). O `.afb` é `fit-content` por padrão, então
   precisa desligar isso explicitamente — só `width` não basta, o
   `min-width: fit-content` continuaria mandando.
   ------------------------------------------------------------ */

.afb--bloco {
  width: 100%;
  min-width: 0;
}

/* ------------------------------------------------------------
   Variante de download
   Mesma animação, mas na vertical: o ícone que sai desce e o que
   entra vem de cima. Numa seta para a direita o movimento lateral
   conta a história ("vai pra frente"); num ícone de baixar, ele
   contaria a errada.
   O markup usa o ícone de download nas duas cópias, não a seta.
   ------------------------------------------------------------ */

.afb--download .afb__arrow--in  { transform: translate(-50%, -170%) scale(0); }
.afb--download .afb__arrow--out { transform: translate(-50%, -50%) scale(1); }

.afb--download:hover .afb__arrow--in,
.afb--download[data-pressed="true"] .afb__arrow--in  { transform: translate(-50%, -50%) scale(1); }

.afb--download:hover .afb__arrow--out,
.afb--download[data-pressed="true"] .afb__arrow--out { transform: translate(-50%, 70%) scale(0); }