/* Contacto. Todos los valores vienen de tokens.css (ver la skill design-tokens). */

.contact {
  max-width: var(--measure-page);
  margin: 0 auto;
  padding: calc(var(--nav-h) + var(--space-5xl)) var(--gutter-edge) var(--space-6xl);
}

.kicker {
  margin: 0 0 var(--space-md);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-soft);
}
.contact h1 {
  margin: 0;
  font-family: var(--font-heavy); font-weight: var(--weight-regular);
  font-size: var(--text-page-title); line-height: var(--leading-none);
}
.lead { margin: var(--space-3xl) 0 var(--space-5xl); max-width: var(--measure-text); font-size: var(--text-lead); line-height: var(--leading-story); }

/* ---------- Canales ---------- */
.channels { display: grid; gap: var(--space-xl); }
.channel {
  display: block; padding: var(--space-3xl);
  border: var(--border-hair) solid var(--color-rule);
  color: inherit; text-decoration: none;
}
.channel .label {
  display: block; margin-bottom: var(--space-xs);
  font-size: var(--text-sm); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-soft);
}
.channel .value { display: block; font-size: var(--text-email); font-weight: var(--weight-bold); line-height: var(--leading-story); word-break: break-word; }
.channel .note { display: block; margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-text-soft); }
a.channel { transition: border-color var(--dur-fast) var(--ease); }
a.channel:hover { border-color: var(--color-ink); }
a.channel:hover .value { color: var(--color-accent); }

/* ---------- Email: lienzo donde llueven las letras ---------- */
.email canvas { display: block; width: 100%; }
.raining { margin: 0 0 var(--space-xl); font-size: var(--text-md); color: var(--color-text-soft); }
.raining[hidden] { display: none; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.btn {
  padding: var(--space-xs) var(--space-2xl);
  font: inherit; font-size: var(--text-base); color: inherit; background: none; cursor: pointer;
  border: var(--border-ink) solid var(--color-ink); border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn.primary, .btn:hover { background: var(--color-ink); color: var(--color-paper); }
.btn.primary:hover { background: var(--color-accent); border-color: var(--color-accent); }
.btn[hidden] { display: none; }
.btn:focus-visible, .channel:focus-visible, .elsewhere a:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.status { min-height: 1.5em; margin: var(--space-md) 0 0; font-size: var(--text-sm); color: var(--color-text-soft); }

/* ---------- Otros perfiles ---------- */
.elsewhere { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); margin: var(--space-4xl) 0 0; font-size: var(--text-md); color: var(--color-text-soft); }
.elsewhere a { color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-rule); text-underline-offset: var(--underline-offset); }
.elsewhere a:hover { color: var(--color-accent); text-decoration-color: var(--color-accent); }


@media (max-width: 600px) {
  .contact { padding: calc(var(--nav-h-mobile) + var(--space-4xl)) var(--gutter-mobile) var(--space-5xl); }
  .channel { padding: var(--space-xl); }
}