/*
  Contacto (spec 6.6, bloque "contacto": correo, teléfono y horario publicados,
  llamada al registro, sin formulario; RN-M1-01)
  Responsive: móvil de base, tablet >= 768px, escritorio >= 1280px.
  Componentes: page-intro, facts (canales), cta (variante de un solo bloque).
*/

/* =====================================================================
   Canales de contacto
   ===================================================================== */

.channels__layout {
  display: grid;
  gap: var(--gap-8);
}

.channels__head {
  display: grid;
  gap: var(--gap-5);
  align-content: start;
}

.channels__head p {
  color: var(--text-muted);
}

.channels__list {
  margin-top: 0;
}

.facts__item dt {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
}

.facts__item dt .icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--primary-600);
  flex-shrink: 0;
}

.facts__item dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--gap-2);
}

/* =====================================================================
   Llamada al registro: variante de un solo bloque (sin el lado de contacto,
   ya estamos en Contacto)
   ===================================================================== */

.cta-final--single .cta-final__layout {
  grid-template-columns: 1fr;
}

/* =====================================================================
   Escritorio (>= 1280px)
   ===================================================================== */

@media (min-width: 1280px) {
  /* Canales: título fijo a la izquierda, lista a la derecha (igual que condiciones en Cómo funciona) */
  .channels__layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap-6);
  }

  .channels__head {
    grid-column: 1 / 5;
    position: sticky;
    top: calc(var(--header-height) + var(--padding-10));
    align-self: start;
  }

  .channels__list {
    grid-column: 6 / 13;
  }
}