/**
 * Canales de contacto.
 *
 * Referencia: contacto.html:74. Tarjeta vertical, solo con borde, y el dato al
 * pie anclado abajo para que las cuatro cierren a la misma altura.
 */

.cg-canales {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr));
  gap: var(--cg-gap-photo);
}

.cg-canales__par {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--cg-gap-photo);
}

.cg-canal {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 2.8vw, 30px);
  color: inherit;
  border: 1px solid var(--cg-line);
  border-radius: var(--cg-radius);
  transition: transform .42s var(--cg-ease), box-shadow .42s ease, border-color .3s ease;
}

/* También reacciona el canal sin enlace: la maqueta anima las cuatro tarjetas */
.cg-canal:hover {
  color: inherit;
  transform: translateY(-6px);
  box-shadow: var(--cg-shadow-hover);
  border-color: var(--cg-gold);
}

.cg-canal .cg-iconframe { width: 48px; height: 48px; font-size: 18px; }

/* El glifo del teléfono es el único que va un punto mayor */
.cg-canal .cg-iconframe--whatsapp { font-size: 20px; }

.cg-canal__titulo {
  font-size: var(--cg-fs-h3);
  line-height: 1.3;
  font-weight: 700;
  color: var(--cg-navy-700);
}

.cg-canal__texto {
  font-size: var(--cg-fs-body);
  line-height: 1.6;
  color: var(--cg-gray-700);
}

/* El dato es el remate de la tarjeta: navy, y solo la flecha en naranja */
.cg-canal__valor {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: 12px;
  font-size: 17px;
  font-weight: 700;
  color: var(--cg-navy-700);
  overflow-wrap: anywhere;
  transition: gap var(--cg-t-ui) ease;
}

.cg-canal__flecha { color: var(--cg-orange); }

a.cg-canal:hover .cg-canal__valor { gap: 15px; }