/* ==========================================================================
   CONTACT — cierre de la página: contacto directo, sin formulario
   ========================================================================== */

.contact {
  min-height: 90vh;
  min-height: 90svh;
  padding: clamp(72px, 12vw, 160px) var(--gutter) clamp(120px, 14vw, 180px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(28px, 4vw, 56px);
}
.contact__title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  text-transform: var(--display-transform);
  letter-spacing: var(--display-tracking);
  line-height: .86;
}
.contact__text { max-width: 36ch; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.4; }

.contact__links {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(14, 14, 14, .15);
}
.contact__link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: clamp(16px, 2vw, 26px) 0;
  border-bottom: 1px solid rgba(14, 14, 14, .15);
  text-align: left;
  width: 100%;
}
.contact__value {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  letter-spacing: var(--display-tracking);
  font-size: clamp(22px, 4.2vw, 64px);
  line-height: 1;
  overflow-wrap: anywhere;
  transition: color .25s, transform .5s var(--ease-out);
}
.contact__kind { opacity: .6; white-space: nowrap; }
@media (hover: hover) {
  .contact__link:hover .contact__value { color: var(--accent); transform: translateX(10px); }
}
.contact__copied { color: var(--accent); opacity: 1; }

.contact__foot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  opacity: .6;
}

@media (max-width: 767px) {
  .contact__link { flex-direction: column-reverse; align-items: flex-start; gap: 6px; }
  .contact__value { font-size: 5.6vw; overflow-wrap: normal; white-space: nowrap; }
}