/*
 * Estilos de /agente/{slug} (cargados solo en esa página con $this->push('styles')).
 * El hero reutiliza `.profile-hero*` de app.css (mismo look que la home de un
 * sitio de agencia); aquí solo vive lo propio de esta vista: la sección de
 * contacto que sigue a la grilla de inmuebles.
 */

.agent-contact {
  border-radius: var(--radius-xl);
  background: var(--surface);
  padding: var(--space-7) var(--space-6);
}

.agent-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: var(--space-7);
  align-items: start;
}

.agent-contact__copy .section__heading {
  font-size: var(--text-xl);
}

.agent-contact__copy p {
  margin-top: var(--space-3);
  color: var(--ink-muted);
  max-width: 48ch;
}

.agent-contact__whatsapp {
  margin-top: var(--space-5);
}

.agent-contact__card {
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}

/* Aquí el formulario es lo único dentro de la tarjeta blanca (a diferencia
   de la de /inmueble, donde sigue al botón de WhatsApp): el borde superior
   de contact-form.css sobra y deja un hueco vacío antes del título. */
.agent-contact__card contact-form .contact-form__form {
  padding-top: 0;
  border-top: none;
}

@media (max-width: 860px) {
  .agent-contact {
    border-radius: 0;
    margin-inline: calc(var(--space-4) * -1);
    padding: var(--space-6) var(--space-4);
  }

  .agent-contact__grid {
    grid-template-columns: 1fr;
  }
}