/* contacto.css — estilos específicos de contacto */

.contacto-hero {
  padding-top: calc(56px + var(--space-2xl));
  padding-bottom: var(--space-xl);
}
.contacto-hero h1 { margin-bottom: var(--space-md); }
.contacto-hero h1 em { color: var(--accent); font-style: italic; }
.contacto-hero p {
  max-width: 52ch;
  font-size: 16px;
}
.contacto-main {
  padding-bottom: var(--space-2xl);
}
.contacto-main section {
  padding: 0;
}
.contacto-selector {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 560px;
}
.selector-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}
.tipo-btn {
  padding: var(--space-md);
  border: 0.5px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  transition: var(--ease);
  text-align: left;
  outline: none;
}
.tipo-btn:hover,
.tipo-btn:focus-visible {
  border-color: var(--border-mid);
  color: var(--text-primary);
}
.tipo-btn.active {
  border-color: var(--accent-border);
  background: var(--accent-dim);
  color: var(--text-primary);
}
.contacto-email {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 300;
  color: var(--accent);
  display: inline-block;
  margin: var(--space-xl) 0 var(--space-sm);
}
.contacto-nota {
  font-size: 13px;
  color: var(--text-muted);
}
.contacto-links {
  display: flex;
  gap: var(--space-xl);
  flex-wrap: wrap;
  margin-top: var(--space-xl);
}
.contacto-link {
  font-size: 13px;
  color: var(--text-secondary);
  transition: color var(--ease);
}
.contacto-link:hover { color: var(--text-primary); }