/* ═══════════════════════════════════════════════════════════════
   SUN ARQUITECTOS — contacto.css
   Estilos específicos de la página Contacto.
   Depende de styles.css para variables, fuentes, nav, footer
   y los estilos .contact__* ya definidos ahí.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Footer al borde inferior ──────────────────────────────────
   Antes se reservaba el alto del footer con un calc fijo (9.5rem),
   que quedó desfasado al cambiar el footer y dejaba aire debajo.
   Con el body como columna flex el footer se apoya en el borde
   inferior sin depender de una altura fija.
   (El nav y el overlay son position:fixed → fuera del flujo.) */
body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

body > main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

/* Empuja la sección debajo del nav fijo */
.contacto-page {
  padding-top: calc(var(--nav-h) + clamp(2rem, 4vh, 3.5rem));
}

/* Grid de 3 columnas: los datos de contacto viven en la columna izquierda
   (propia, nunca tapada) y el formulario en la columna del medio. Las
   columnas 1 y 3 son iguales (1fr), así el formulario queda centrado
   respecto de la página completa y no respecto de un espacio sobrante. */
.contacto-page.contact {
  display: grid;
  grid-template-columns: minmax(11.25rem, 1fr) minmax(0, 40rem) minmax(11.25rem, 1fr);
  align-items: start;
  gap: var(--sp-xl);
  padding-bottom: var(--sp-lg);
  min-height: 0;
  flex: 1 0 auto;
}

.contacto-page .contact__left {
  grid-column: 1;
}

.contacto-page .contact__form {
  grid-column: 2;
  width: 100%;
}

/* Por debajo de este ancho el formulario de 3 columnas quedaría demasiado
   angosto para ser usable: se apila en una sola columna (datos arriba,
   formulario abajo a todo el ancho). */
@media (max-width: 1024px) {
  .contacto-page.contact {
    grid-template-columns: 1fr;
  }

  .contacto-page .contact__left,
  .contacto-page .contact__form {
    grid-column: 1;
  }

  .contacto-page .contact__form {
    max-width: none;
  }
}

/* ─── Email y WhatsApp debajo del texto ─────────────────────── */
.contact__info {
  margin-top: var(--sp-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.contact__info-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.contact__info-label {
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(0.8125rem, 0.9vw, 0.875rem);
  letter-spacing: 0.08em;
  color: var(--c-muted);
  text-transform: uppercase;
}

.contact__info-value {
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(0.9375rem, 1.05vw, 1rem);
  color: var(--c-text);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.15s;
}

.contact__info-value:hover {
  color: var(--c-muted);
}

/* ─── Responsive — 768px ─────────────────────────────────────── */
@media (max-width: 768px) {
  .contacto-page {
    padding-top: calc(var(--nav-h) + clamp(1.5rem, 3vh, 2.5rem));
  }
}