/* ============================================================
   SECTION: CTA → Selector → Contacto (interactive flow)
   Steps are layered; only one is active at a time.
   ============================================================ */

.contact { min-height: 88svh; display: flex; align-items: center; }
.contact .container { width: 100%; }

.contact__eyebrow { margin-bottom: var(--space-5); }

/* Step container keeps a stable height as content swaps */
.contact-step {
  position: relative;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}
.contact-step.is-active {
  display: flex;
  animation: stepIn var(--dur) var(--ease-out) both;
}
@keyframes stepIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-step.is-active { animation: none; }
}

.contact__display { font-weight: 500; }
.contact__display--center { text-align: left; }
.contact__sub { margin-top: calc(var(--space-2) * -0.5); }

.contact__back { margin-bottom: var(--space-2); }

.contact__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--space-2);
}
.contact__continue { margin-top: var(--space-3); }

.contact__chosen { margin-top: calc(var(--space-2) * -0.5); }
.contact__chosen:empty { display: none; }

.contact__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* The CTA/Contact headlines are the largest type on the page;
   center them like the wireframe on wider screens. */
@media (min-width: 720px) {
  .contact-step[data-step="cta"],
  .contact-step[data-step="services"],
  .contact-step[data-step="details"] { align-items: flex-start; }
}