/* =============================================================================
   cta-whatsapp.css — Botões de reserva
   O visual vive no sistema `.btn` (base/main.css). Aqui ficam apenas o
   tamanho grande e os aliases das classes legadas.
   ============================================================================= */

.btn--lg {
  padding: 1.2rem 3.1rem;
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-wider);
}

/* -----------------------------------------------------------------------------
   Aliases legados — garantem aparência correta em markup antigo que ainda use
   `.cta-whatsapp--*` sem as classes `.btn`.
   -------------------------------------------------------------------------- */
.cta-whatsapp:not(.btn) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  overflow: hidden;
  padding: 1.05rem 2.5rem;
  border: 1px solid var(--color-deep);
  background: transparent;
  color: var(--color-deep);
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  transition: color var(--transition-base), background-color var(--transition-base);
}

.cta-whatsapp:not(.btn):hover {
  background-color: var(--color-deep);
  color: var(--cream-100);
}

.cta-whatsapp--primary:not(.btn) {
  background-color: var(--color-deep);
  color: var(--cream-100);
}

.cta-whatsapp--white:not(.btn),
.cta-whatsapp--light:not(.btn) {
  border-color: rgba(241, 246, 248, 0.55);
  color: var(--cream-050);
}

.cta-whatsapp--white:not(.btn):hover,
.cta-whatsapp--light:not(.btn):hover {
  background-color: var(--cream-050);
  color: var(--brand-800);
}

.cta-whatsapp--large:not(.btn) {
  padding: 1.2rem 3.1rem;
  font-size: var(--fs-small);
}