/* ══ FLOW CTA — "continuar para a próxima seção" ══
   Chip horizontal: rótulo + texto à esquerda, orbe
   circular com seta à direita. No hover/toque, o
   orbe desliza e muda de laranja para verde.
═══════════════════════════════════════ */

.flow-cta {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 8px 8px 8px 26px;
  border-radius: 999px;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
.flow-cta:hover { transform: translateX(6px); }

.flow-cta__copy {
  display: flex;
  flex-direction: column;
  font-family: var(--ff-sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}
.flow-cta__copy small {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 4px;
}

.flow-cta__orb {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  font-size: 16px;
  transform: rotate(-90deg);
  transition: background-color var(--dur-med) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.flow-cta:hover .flow-cta__orb,
.flow-cta:focus-visible .flow-cta__orb,
.flow-cta:active .flow-cta__orb {
  background: var(--green);
  transform: rotate(0deg);
}

/* ── Variante clara (fundo branco/cream) ── */
.flow-cta--paper {
  border: 2px solid var(--orange);
  background: var(--white);
  box-shadow: 0 6px 20px -10px rgba(255,127,0,.2);
}
.flow-cta--paper .flow-cta__copy { color: var(--blue); }
.flow-cta--paper:hover {
  border-color: var(--orange);
  box-shadow: 0 10px 26px -10px rgba(255,127,0,.4);
  background: rgba(255,127,0,.04);
}

/* ── Variante escura (fundo azul/escuro) ── */
.flow-cta--night {
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
}
.flow-cta--night .flow-cta__copy { color: var(--white); }
.flow-cta--night:hover {
  border-color: var(--orange);
  background: rgba(255,255,255,.1);
  box-shadow: 0 10px 26px -10px rgba(0,0,0,.4);
}

/* ── Layout ── */
.flow-cta-row { display: flex; justify-content: flex-end; padding-top: 48px; }
.gp-flow-cta { margin-top: 36px; align-self: flex-start; }
.faq-flow-cta { display: flex; justify-content: center; padding-top: 56px; }