/* ============================================================
   Botões — pílulas. Todo botão tem no mínimo 48px de altura:
   é o alvo de toque confortável, não o mínimo de 44.

   <a class="btn btn--primary">
       <span>falar com um consultor</span>
       <span class="btn__icon"><svg …/></span>
   </a>
   ============================================================ */

.btn {
    --btn-h: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-height: var(--btn-h);
    padding: 0 var(--space-6);
    border-radius: var(--radius-pill);
    font-family: var(--font-support);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition:
        background-color var(--dur-base) var(--ease-apple),
        color            var(--dur-base) var(--ease-apple),
        box-shadow       var(--dur-base) var(--ease-apple),
        transform        var(--dur-base) var(--ease-apple);
}

/* Com ícone, o respiro da direita encolhe pra o círculo encostar na borda
   igual nos quatro lados. */
.btn:has(.btn__icon) { padding-right: 6px; }

.btn__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: calc(var(--btn-h) - 12px);
    aspect-ratio: 1;
    border-radius: 50%;
    transition: transform var(--dur-base) var(--ease-apple);
}
.btn__icon svg { width: 18px; height: 18px; }

.btn:active { transform: translateY(1px) scale(0.99); }

@media (hover: hover) {
    .btn:hover .btn__icon { transform: translateX(2px) rotate(-45deg); }
    .btn--wa:hover .btn__icon { transform: scale(1.06); }
}

/* ── Variantes ───────────────────────────────────────────── */

.btn--primary {
    background: var(--brand);
    color: #FFFFFF;
    box-shadow: var(--shadow-brand);
}
.btn--primary .btn__icon { background: #FFFFFF; color: var(--brand); }

@media (hover: hover) {
    .btn--primary:hover { background: var(--brand-hover); box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 0.55), 0 16px 36px rgba(84, 82, 254, 0.48); transform: translateY(-1px); }
}

/* Sobre o roxo, o primário vira branco — roxo em cima de roxo some. */
.btn--light {
    background: #FFFFFF;
    color: var(--ink);
    box-shadow: 0 12px 30px rgba(15, 10, 70, 0.25);
}
.btn--light .btn__icon { background: var(--brand); color: #FFFFFF; }

@media (hover: hover) {
    .btn--light:hover { transform: translateY(-1px); box-shadow: 0 16px 36px rgba(15, 10, 70, 0.32); }
}

.btn--ghost {
    color: var(--fg);
    box-shadow: inset 0 0 0 1px var(--fg-line);
}
.btn--ghost .btn__icon { background: var(--fg); color: var(--paper); }

@media (hover: hover) {
    .btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--fg); }
}

.btn--sm { --btn-h: 42px; padding: 0 var(--space-5); font-size: var(--fs-xs); }

.btn--block { width: 100%; }

/* ── Link de texto com seta ──────────────────────────────── */

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    font-weight: 600;
    color: var(--fg);
    background: linear-gradient(currentColor, currentColor) no-repeat 0 calc(100% - 10px) / 0 1px;
    transition: background-size var(--dur-slow) var(--ease-out-expo), color var(--dur-base) var(--ease-apple);
}
.link-arrow svg {
    width: 16px;
    height: 16px;
    transition: transform var(--dur-base) var(--ease-apple);
}

@media (hover: hover) {
    .link-arrow:hover { background-size: calc(100% - 24px) 1px; }
    .link-arrow:hover svg { transform: translate(2px, 2px); }
}