/* Cascabel de bolso (pedido do dono, 21/10/2026): o segundo botão, discreto no computador, primeiro e em destaque no celular.
   No celular vale a largura e o toque (a mesma consulta de bolso.js) ou a marca html[data-bolso-celular] que bolso.js põe
   pela detecção do site. Sem estilo inline, para a CSP (style-src 'self'). */
.bolso-convite { margin: 16px 0 0; max-width: 590px; }
.bolso-convite .bolso-botao { margin: 0; }
.bolso-convite .bolso-linha { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--texto-2, var(--muted, #c5cabb)); }
.actions > .bolso-convite { flex: 1 1 100%; margin: 0; }

/* Celular pela largura ou pelo toque. */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .capa-texto { display: flex; flex-direction: column; }
  .capa-texto > .acoes, .capa-texto > .acoes ~ * { order: 2; }
  .capa-texto > .bolso-convite { order: 1; margin: 4px 0 14px; }
  .actions > .bolso-convite { order: -1; }
  [data-bolso-ordem] { display: flex; flex-direction: column; }
  [data-bolso-ordem] > .bolso-convite { order: -1; margin: 0 0 16px; }
  .bolso-convite a.bolso-botao[data-bolso] { display: flex; width: 100%; justify-content: center; text-align: center; min-height: 52px; font-size: 17px; border: 1px solid var(--latao, #dfb36a); background: linear-gradient(180deg, var(--latao-alto, #f0cd8a), var(--latao, #dfb36a)); color: var(--latao-tinta, #1a1511); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 0 #0006; }
  .bolso-convite a.bolso-botao[data-bolso]:hover { background: var(--latao-alto, #f0cd8a); color: var(--latao-tinta, #1a1511); }
}

/* Celular pela detecção do site (device-access.js), mesmo numa tela larga. */
html[data-bolso-celular] .capa-texto { display: flex; flex-direction: column; }
html[data-bolso-celular] .capa-texto > .acoes, html[data-bolso-celular] .capa-texto > .acoes ~ * { order: 2; }
html[data-bolso-celular] .capa-texto > .bolso-convite { order: 1; margin: 4px 0 14px; }
html[data-bolso-celular] .actions > .bolso-convite { order: -1; }
html[data-bolso-celular] [data-bolso-ordem] { display: flex; flex-direction: column; }
html[data-bolso-celular] [data-bolso-ordem] > .bolso-convite { order: -1; margin: 0 0 16px; }
html[data-bolso-celular] .bolso-convite a.bolso-botao[data-bolso] { display: flex; width: 100%; justify-content: center; text-align: center; min-height: 52px; font-size: 17px; border: 1px solid var(--latao, #dfb36a); background: linear-gradient(180deg, var(--latao-alto, #f0cd8a), var(--latao, #dfb36a)); color: var(--latao-tinta, #1a1511); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 0 #0006; }
html[data-bolso-celular] .bolso-convite a.bolso-botao[data-bolso]:hover { background: var(--latao-alto, #f0cd8a); color: var(--latao-tinta, #1a1511); }