/* =====================================================================
   §6 · Futuro de la plataforma
   ===================================================================== */
.futuro { background: var(--bg); }

.channels {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 2rem);
}

/* Tratamiento "futuro": badge Próximamente (la señal de "aún no" la da el badge,
   no una opacidad que rebaja el contraste del texto) */
.channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 4vw, 2rem);
  text-align: center;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
/* el badge se ancla abajo para que quede alineado entre tarjetas de distinto alto de texto */
.channel__badge { margin-top: auto; }
.channel:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.channel__icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--brand-lila);
  margin-bottom: var(--space-3);
}
.channel__icon svg { width: 30px; height: 30px; }
.channel__name { margin-bottom: var(--space-2); }
.channel__desc {
  color: var(--ink-soft);
  font-size: var(--text-sm);
  max-width: 26ch;
  margin: 0 auto var(--space-4);
}
.channel__badge {
  background: color-mix(in srgb, var(--brand-orange) 16%, transparent);
  color: #b85230;
}
.channel__badge.badge--available {
  background: color-mix(in srgb, var(--success) 12%, transparent);
  color: var(--success);
}

@media (max-width: 640px) {
  .channels { grid-template-columns: 1fr; }
}