/* Latitud 40 · página CONTACTO */

.contact { padding: 150px 0 var(--sec); overflow: hidden; position: relative; }
/* align-items:start = el formulario conserva su alto natural. Si se estira, la grilla
   interna reparte el sobrante y los campos se separan del rótulo. */
.contact .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 96px); align-items: start; position: relative; z-index: 1; padding-right: clamp(0px, 14vw, 210px); }
.contact .form { align-content: start; }
.contact .field { align-content: start; }
.contact h1 { font-size: var(--fs-hero); max-width: 12ch; }
.contact .lead { margin-top: 26px; }
.clist { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 14px; }
.clist li { display: flex; align-items: center; gap: 14px; font-size: calc(15.5px * var(--k-body, 1)); }
.clist li .ic-svg { width: 18px; height: 18px; color: var(--accent-2); flex: none; }
.clist a:hover { color: var(--accent-2); }

/* Escalador del logo colgando en el borde derecho */
.climber { position: absolute; right: -20px; top: 60px; height: min(620px, 72vh); width: auto; opacity: .92; pointer-events: none; z-index: 0; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .35)); }

@media (max-width: 900px) {
  .contact { padding-top: 120px; }
  .contact .wrap { grid-template-columns: 1fr; padding-right: 0; }
  .climber { display: none; }
}

/* Trampa para robots: fuera de la vista pero presente en el formulario.
   No se usa display:none porque muchos robots saltan justamente eso. */
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }