/* ========================================
   CONTACTO
======================================== */
#contacto {
  background: var(--dark);
  padding:
    clamp(3rem, 7vw, 7rem)
    clamp(1rem, 5vw, 6rem);

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 3rem;
  align-items: center;
}

.contacto-title {
  font-family: "DM Serif Display", serif;
  color: var(--white);
  font-weight: 400;
  line-height: 1.05;
  font-size: clamp(2rem, 5vw, 4rem);
  margin-bottom: 2rem;
}

.contacto-title em {
  color: var(--blue);
  font-style: italic;
}

.channels {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ch {
  text-decoration: none;
  color: var(--white);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 1rem;
  padding: 1rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  transition: .25s ease;
}

.ch:hover {
  border-color: rgba(255,255,255,.45);
}

.ch-ico {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: .8rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.ch-ico.wa {
  background: #25d366;
}

.ch-ico.em {
  background: var(--blue);
}

.ch-meta {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.ch-tag {
  font-size: .75rem;
  color: var(--muted);
}