/* [2026-09-26] #como SO no celular (abaixo de 720px). O desktop nao e tocado por nada daqui. */
@media (max-width: 720px) {
  #como .como-flow { display: flex; flex-direction: column; gap: 0; }
  #como .como-info { order: 1; text-align: center; }
  #como .como-visual { order: 2; margin-top: 22px; padding: 0; justify-content: center; }
  #como .como-info .eyebrow { margin-bottom: 14px; }
  #como .como-info h2 { font-size: clamp(28px, 8vw, 34px); line-height: 1.08; }
  #como .como-info > p { font-size: 15.5px; line-height: 1.55; margin: 14px auto 0; max-width: 34ch; }

  /* 5 passos: linha do tempo alinhada a esquerda, numero colado no texto */
  #como .como-steps { list-style: none; margin: 26px auto 0; padding: 0; max-width: 340px; text-align: left; position: relative; display: grid; gap: 16px; }
  #como .como-steps::before { content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 2px; background: linear-gradient(180deg, rgba(196, 255, 0, .55), rgba(196, 255, 0, .12)); border-radius: 2px; }
  #como .como-steps li { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 14px; width: auto; margin: 0; padding: 0; font-size: 15.5px; line-height: 1.35; text-align: left; }
  #como .como-steps .cs-n { position: relative; z-index: 1; flex: none; width: 32px; height: 32px; margin: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #1a2210; border: 1.5px solid #C4FF00; color: #C4FF00; font-weight: 800; font-size: 14px; }

  /* botoes de canal logo acima do celular, centralizados */
  #como .ch-switch { display: flex; justify-content: center; gap: 12px; margin: 28px auto 0; }
  #como .ch-switch::before { content: "Veja a conversa em cada canal"; position: absolute; transform: translateY(-24px); font-size: 12px; color: #98a493; letter-spacing: .02em; }
  #como .ch-switch { position: relative; padding-top: 4px; }

  /* celular inteiro na tela; selos flutuantes nao cobrem mais a tela */
  #como #cphone { width: min(76vw, 300px); height: auto; margin: 0 auto; }
  #como .float-chip { display: none !important; }
}
@media (max-width: 720px) {
  #como .ch-switch { flex-wrap: wrap; row-gap: 10px; margin-top: 26px; padding-top: 0; }
  #como .ch-switch::before { position: static; transform: none; flex-basis: 100%; text-align: center; }
  #como #cphone { width: min(68vw, 270px); }
}
@media (max-width: 720px) { #como .ch-switch { row-gap: 16px; } }
@media (max-width: 720px) { #como .ch-switch::before { margin-bottom: 10px; } }