/* Section "Canais oficiais" — Figma: "CTA — Canais oficiais" (desktop, 257:1421) e "Canais oficiais" (mobile, 253:330).
   Faixa verde de fechamento antes do rodapé. Sem escala fluida: tamanhos do Figma. */

.canais {
  /* O mobile do Figma usa 12px de margem lateral (como em Workshops) */
  --gutter: 12px;
  padding-block: 0 40px;
}

@media (min-width: 1024px) {
  .canais {
    --gutter: 48px;
  }
}

.canais__card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 600px; /* abaixo de 1200px o Figma só tem o mobile de 375px */
  padding: 28px 24px;
  border-radius: 24px;
  background: var(--marca-primaria);
  box-shadow:
    0 4px 16px 0 var(--marca-primaria),
    inset 0 6px 6px 0 rgb(73 164 118 / 0.4),
    inset 0 -6px 4px 0 rgb(10 31 21 / 0.25);
}

.canais__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.canais__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--verde-90);
}

.canais__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Mobile: o rótulo é uma pílula; no desktop vira texto simples */
.canais__eyebrow {
  align-self: flex-start;
  padding: 6px 12px;
  border: 1px solid var(--verde-80);
  border-radius: 999px;
  background: var(--verde-90);
  color: var(--verde-40);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.canais__title {
  color: var(--texto-sobre-escuro);
  font-family: var(--fonte-titulo);
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: -0.005em;
}

.canais__lead {
  color: var(--neutra-20);
  font-size: 20px;
  line-height: 32px;
}

.canais__btn {
  width: 100%;
  min-height: 56px;
  gap: 12px;
  padding: 0 32px;
  background: var(--neutra-10);
  color: var(--texto-titulo);
}

.canais__btn img {
  flex: none;
}

@media (hover: hover) {
  .canais__btn:hover {
    background: var(--fundo-superficie);
  }
}

.canais__btn:focus-visible {
  outline-color: var(--neutra-10); /* o foco padrão (azul) não aparece sobre o fundo verde */
}

/* ---------- Desktop (≥ 1200px): texto à esquerda, botão à direita ---------- */

@media (min-width: 1200px) {
  .canais {
    padding-block: 0 103px; /* Figma: 103px até o rodapé */
  }

  .canais__card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    max-width: none;
    padding: 24px 48px;
  }

  .canais__text {
    flex-direction: row;
    align-items: center;
    gap: 24px;
  }

  .canais__icon {
    width: 64px;
    height: 64px;
  }

  .canais__eyebrow {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }

  .canais__title {
    font-size: 32px;
    line-height: 40px;
    white-space: nowrap;
  }

  .canais__lead {
    white-space: nowrap;
  }

  .canais__btn {
    flex: none;
    width: auto;
  }
}