/* Paginas publicas Downloads (/downloads/) e Tutoriais (/tutoriais/) do site.
   Tokens, cabecalho, botoes e rodape: os MESMOS da Home (index.html), copiados
   de la' -- a Home tem o CSS embutido e nao carrega este arquivo. Os cartoes de
   aplicativo e de video seguem o desenho das areas Downloads e Videos do Portal
   do Cliente (portal/index.html). Arquivo externo (e nao <style> na pagina)
   para a CSP das paginas poder proibir estilo e script embutidos. */
:root {
  color-scheme: light;
  --paper: #F1F4FA;
  --card: #FFFFFF;
  --line: #E7E9F1;
  --line-forte: #B9BFCF;
  --ink: #141A2C;
  --ink-suave: #5A6178;
  --ink-fraco: #939AAE;
  --verde: #0EA047;
  --verde-escuro: #087A36;
  --verde-tinta: #E3F7EA;
  --azul: #2F6FED;
  --azul-tinta: #E8F0FE;
  --marinho-1: #0B1E3F;
  --marinho-2: #17305C;
  --marinho-3: #234C8C;
  --rosa: #E23F87;
  --sombra: 0 1px 2px rgba(15,20,40,.05), 0 12px 28px -18px rgba(15,20,40,.28);
}

* { box-sizing: border-box; }
html { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body {
  margin: 0;
  background: var(--paper);
  background-image: radial-gradient(900px 320px at 50% -40px, #E9EEFB 0%, var(--paper) 62%);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.wrap { width: min(1120px, calc(100% - 40px)); margin: auto; }
.oculto { display: none !important; }

.elo { margin: 0 0 12px; font-size: 12px; font-weight: 850; letter-spacing: 2.2px; text-transform: uppercase; color: var(--ink-fraco); }

/* ===== Cabecalho (igual ao da Home; desde 2026-10-15 o navy de duas cores, sem brilhos) ===== */
header.topo { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--marinho-1), var(--marinho-2)); }
.topo-faixa { position: relative; padding: 18px 18px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; }
.topo-marca { display: flex; align-items: center; gap: 12px; flex: none; }
.topo-logo-publica { display: block; height: 38px; width: auto; flex: none; }

.topo-nav { flex: 1; display: none; align-items: center; justify-content: center; gap: 26px; }
.topo-nav a { color: rgba(255,255,255,.78); text-decoration: none; font-size: 16px; font-weight: 600; padding-bottom: 3px; border-bottom: 2px solid transparent; }
.topo-nav a:hover { color: #fff; }
.topo-nav a.active { color: #fff; border-bottom-color: var(--verde); }

.nav-toggle-input { display: none; }
.nav-toggle { display: flex; width: 38px; height: 38px; align-items: center; justify-content: center; cursor: pointer; border-radius: 8px; flex: none; }
.nav-toggle span { position: relative; width: 19px; height: 2px; background: #fff; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 19px; height: 2px; background: #fff; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

.nav-links-mobile { position: relative; order: 5; flex-basis: 100%; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .2s ease, opacity .2s ease; }
.nav-links-mobile a { display: block; padding: 11px 4px; color: rgba(255,255,255,.85); text-decoration: none; font-size: 15px; font-weight: 600; border-top: 1px solid rgba(255,255,255,.12); }
.nav-links-mobile a.active { color: #fff; }
.nav-toggle-input:checked ~ .nav-links-mobile { max-height: 460px; opacity: 1; }

.btn-continuar {
  border: none; border-radius: 12px; padding: 14px 24px; font-size: 15px;
  font-weight: 700; font-family: inherit; color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, var(--verde-escuro), var(--verde) 60%, #5CE666);
  box-shadow: 0 10px 22px -10px rgba(8,122,54,.55);
  text-decoration: none;
  transition: filter .15s ease, transform .05s ease;
}
.btn-continuar:hover { filter: brightness(1.05); }
.btn-continuar:active { transform: scale(.99); }
.btn-continuar svg { width: 18px; height: 18px; }
.topo-faixa .btn-continuar { width: auto; padding: 10px 18px; font-size: 13.5px; border-radius: 999px; flex: none; }

/* Selos de confianca (iguais aos da Home). */
.topo-selos-linha { position: relative; padding: 0 18px 8px; }
.topo-selos { display: flex; gap: 6px; justify-content: space-between; flex-wrap: nowrap; }
.selo { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; min-width: 0; }
.selo-icone { flex: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; }
.selo-icone svg { width: 11px; height: 11px; }
.selo.e-azul .selo-icone { color: var(--azul); }
.selo.e-verde .selo-icone { color: var(--verde); }
.selo.e-rosa .selo-icone { color: var(--rosa); }
.selo-texto { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.selo-texto b { color: #fff; font-size: 9.5px; font-weight: 700; line-height: 1.25; }
.selo-texto span { color: rgba(255,255,255,.68); font-size: 9px; line-height: 1.25; }

/* Celular e tablet (como na Home): logo a' esquerda, "Entrar" no centro e "Menu"/"Fechar" a' direita. */
@media (max-width: 859px) {
  .topo-faixa { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 10px; }
  .topo-faixa .topo-marca { justify-self: start; }
  .topo-faixa .btn-continuar { justify-self: center; padding: 10px 16px; }
  .topo-faixa .nav-toggle { justify-self: end; width: auto; gap: 7px; padding: 0 0 0 10px; }
  .topo-faixa .nav-toggle::before { content: "Menu"; color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .02em; }
  .nav-toggle-input:checked ~ .nav-toggle::before { content: "Fechar"; }
  .topo-faixa .nav-toggle span, .topo-faixa .nav-toggle span::before, .topo-faixa .nav-toggle span::after { width: 23px; }
  .topo-faixa .nav-toggle span::before { top: -7px; }
  .topo-faixa .nav-toggle span::after { top: 7px; }
  .topo-faixa .nav-links-mobile { grid-column: 1 / -1; }
}

/* ===== Pagina ===== */
.pagina { padding: 40px 0 64px; }
.pagina h1 { font-size: clamp(30px, 5vw, 44px); line-height: 1.1; letter-spacing: -1.3px; margin: 4px 0 12px; text-wrap: balance; }
.lead { max-width: 620px; font-size: 16.5px; color: var(--ink-suave); margin: 0 0 30px; }

.cartao { background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--sombra); padding: 20px; }
/* Mesma organizacao da tela Downloads do Portal (.acessos-lista): uma coluna e,
   a partir de 860 px, duas colunas iguais. min-width: 0 deixa o cartao encolher
   ate' a largura da coluna (nome ou texto comprido quebra, nao estoura). */
.lista-apps { display: grid; grid-template-columns: 1fr; gap: 16px; }
.lista-apps > .cartao { min-width: 0; }
/* Fechados, os cartoes da mesma linha tem a mesma altura. Com um "Como instalar"
   aberto, cada cartao fica com a propria altura: o vizinho nao estica com um
   grande espaco em branco. (Navegador sem :has() mantem a altura igual.) */
.lista-apps:has(.dl-como[aria-expanded="true"]) { align-items: start; }

/* Cartao de estado: carregando, nada publicado ou erro. */
.estado { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 36px 20px; color: var(--ink-suave); font-size: 14px; }
.estado strong { color: var(--ink); font-size: 16px; }
.estado-icone { width: 52px; height: 52px; border-radius: 14px; background: var(--azul-tinta); color: var(--azul); display: flex; align-items: center; justify-content: center; }
.estado-icone svg { width: 24px; height: 24px; }
.estado .dl-btn { flex: none; margin-top: 6px; }

/* ===== Aplicativo ===== */
.app-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; }
.app-identidade { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 200px; }
.app-icone { width: 58px; height: 58px; border-radius: 14px; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 22px; overflow: hidden; }
.app-icone.com-logo { background: #fff; }
.app-icone img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-identidade h2 { margin: 0; font-size: 18px; line-height: 1.3; overflow-wrap: anywhere; }
.app-versao { background: var(--azul-tinta); color: var(--azul); border-radius: 999px; font-size: 12px; font-weight: 700; padding: 5px 12px; white-space: nowrap; }
.app-curta { color: var(--ink-suave); font-size: 14.5px; margin: 14px 0 0; overflow-wrap: anywhere; }
.app-resumo { display: flex; flex-wrap: wrap; gap: 12px 44px; margin: 16px 0 0; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.app-resumo span { display: flex; flex-direction: column; min-width: 0; }
.app-resumo strong { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-fraco); }
.app-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.dl-btn { flex: 1 1 150px; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; padding: 12.5px 14px; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none; }
.dl-baixar { background: var(--azul); color: #fff; border: none; }
.dl-baixar svg { width: 18px; height: 18px; flex: none; }
.dl-como { border: 1.5px solid var(--azul); background: #fff; color: var(--azul); }
.dl-como[aria-expanded="true"] { background: var(--azul-tinta); }
.dl-downloader { margin-top: 12px; background: linear-gradient(150deg, var(--marinho-2), var(--marinho-1)); color: #fff; border-radius: 12px; padding: 16px 14px; text-align: center; }
.dl-downloader small { display: block; color: rgba(255,255,255,.82); font-size: 13px; }
.dl-downloader b { display: block; font-size: 30px; letter-spacing: .28em; margin: 2px 0 4px; padding-left: .28em; }
.dl-downloader b.dl-codigo-longo { font-size: 20px; letter-spacing: .16em; padding-left: .16em; }
.dl-loja { display: block; margin-top: 12px; text-align: center; border: 1.5px solid var(--line-forte); border-radius: 12px; padding: 13px; color: var(--azul); font-weight: 700; font-size: 14px; text-decoration: none; }
.dl-instalar { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: var(--ink-suave); overflow-wrap: anywhere; }
.dl-bloco { border: 1px solid var(--line); border-left: 4px solid var(--azul); border-radius: 12px; padding: 14px; background: #fff; }
.dl-bloco > :last-child { margin-bottom: 0; }
.dl-bloco h3 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-fraco); }
.dl-bloco h3.dl-bloco-titulo { font-size: 15.5px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--ink); margin: 0 0 10px; }
.dl-bloco p { margin: 0; }
.dl-bloco .vd-quadro { max-width: 560px; }
.dl-bloco .vd-nome { margin: 6px 0 10px; }
.dl-notas { white-space: pre-line; }
/* Texto convertido pelo servidor (instrucoes e descricao). */
.dl-passos > :first-child { margin-top: 0; }
.dl-passos p, .dl-passos ol, .dl-passos ul { margin: 0 0 8px; }
.dl-passos ol, .dl-passos ul { padding-left: 18px; }
.dl-passos a { color: var(--azul); font-weight: 600; }
.dl-passos h2, .dl-passos h3 { font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--ink); margin: 8px 0 4px; }
.dl-passos img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 6px 0; }

/* ===== Video: capa do YouTube; o player so' e' carregado ao tocar. ===== */
.vd-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.vd-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.vd-card h3 { margin: 2px 0 0; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.vd-card p { margin: 0; color: var(--ink-suave); font-size: 13.5px; overflow-wrap: anywhere; white-space: pre-line; }
.vd-quadro { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #0b1220; }
.vd-quadro iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vd-capa { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; display: block; }
.vd-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vd-capa span { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(11,18,32,.78); display: flex; align-items: center; justify-content: center; }
.vd-capa svg { width: 26px; height: 26px; margin-left: 3px; }
.vd-capa:focus-visible { outline: 3px solid var(--azul); outline-offset: -3px; }
.vd-abrir { color: var(--azul); font-weight: 700; font-size: 13.5px; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; align-self: flex-start; }

/* ===== Faixa de suporte: compacta e secundaria em relacao aos cartoes.
   Texto agrupado a' esquerda; os dois botoes do tamanho do proprio texto, a'
   direita, na mesma altura. No celular o texto ocupa a linha e os botoes
   dividem a linha de baixo. ===== */
.suporte { margin-top: 28px; padding: 14px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.suporte-texto { flex: 1 1 240px; display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.suporte-texto strong { font-size: 15px; }
.suporte-texto span { color: var(--ink-suave); font-size: 13.5px; }
.suporte .dl-btn, .suporte .btn-continuar { flex: 0 0 auto; height: 44px; min-height: 44px; padding: 0 18px; font-size: 14px; line-height: 1.2; white-space: nowrap; border-radius: 12px; box-shadow: none; }

/* ===== Rodape (igual ao da Home) ===== */
.onda-rodape { display: block; line-height: 0; }
.onda-rodape svg { display: block; width: 100%; height: 20px; }
footer.rodape-portal {
  background: linear-gradient(165deg, var(--marinho-2) 0%, var(--marinho-1) 100%);
  color: rgba(255,255,255,.82);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; padding: 4px 20px 26px; font-size: 12px;
}
.rodape-marca { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: center; }
.rodape-marca .logo { font-size: 20px; font-weight: 850; letter-spacing: -1px; color: #fff; }
.rodape-marca .logo span { font-weight: 500; color: #9FB3D9; }
.rodape-marca span.tagline { color: rgba(255,255,255,.72); }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.footer-links a { color: rgba(255,255,255,.78); text-decoration: none; font-size: 12.5px; }
.footer-links a:hover { color: #fff; }
.copyright-linha { color: rgba(255,255,255,.55); font-size: 11.5px; }
/* Contato no rodape, numa linha (como na Home). */
.rodape-contato { display: flex; flex-direction: row; align-items: baseline; justify-content: center; gap: 8px; white-space: nowrap; }
.rodape-contato span { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.6); font-weight: 700; }
.rodape-contato a { color: #fff; font-weight: 700; font-size: 16px; text-decoration: none; }
/* Celular: o rodape e' o cartao azul-marinho da Home, com 12px de folga (a onda sai). */
@media (max-width: 859px) {
  .onda-rodape { display: none; }
  footer.rodape-portal { margin: 24px 12px 16px; border-radius: 18px; padding: 16px; gap: 8px; box-shadow: 0 22px 40px -26px rgba(15,32,72,.6); }
}

/* ===== Paginas legais (Politica de Privacidade e Termos de Uso), 2026-10-15 ===== */
.pagina-legal { max-width: 820px; }
.pagina-legal h1 { margin-bottom: 18px; }
.pagina-legal h2 { font-size: 20px; line-height: 1.3; margin: 30px 0 8px; text-wrap: balance; }
.pagina-legal p { color: var(--ink-suave); font-size: 16px; margin: 0 0 12px; text-wrap: pretty; }
.pagina-legal a:not(.voltar-site) { color: var(--azul); font-weight: 600; }
.voltar-site { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 12px; font-size: 14px; font-weight: 700; text-decoration: none; color: #fff;
  background: linear-gradient(160deg, #17377E 0%, #0B1E4A 70%); border: 1px solid rgba(120,160,255,.25); box-shadow: 0 12px 26px -16px rgba(15,32,72,.7); }
.voltar-site:hover { background: linear-gradient(160deg, #1E4596 0%, #0F2860 70%); }
.voltar-site svg { width: 16px; height: 16px; }
.voltar-site-topo { margin: 0 0 28px; }
.voltar-site-fim { margin: 36px 0 0; }

/* ===== Padrao da Home (2026-10-15, decisao do Jose): etiquetas verdes e cards em azul-marinho,
   como os cards de planos. Vale para Aplicativos, Tutoriais e as paginas legais. ===== */
.pagina .elo { color: var(--verde-escuro); font-size: 15px; letter-spacing: .14em; }
.cartao { background: linear-gradient(160deg, #17377E 0%, #0B1E4A 70%); border: 1px solid rgba(120,160,255,.18); box-shadow: 0 18px 40px -22px rgba(15,32,72,.65); color: #fff; }
.estado, .suporte-texto span { color: rgba(255,255,255,.78); }
.estado strong, .suporte-texto strong { color: #fff; }
.estado-icone { background: rgba(59,130,246,.25); color: #93B7FF; }
.app-identidade h2, .vd-card h3 { color: #fff; }
.app-curta, .vd-card p { color: rgba(255,255,255,.78); }
.app-resumo { color: #fff; }
.app-resumo strong { color: rgba(255,255,255,.6); }
.app-versao { background: rgba(59,130,246,.25); color: #93B7FF; }
.dl-como { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.06); color: #fff; }
.dl-como[aria-expanded="true"] { background: rgba(255,255,255,.16); }
.dl-downloader { background: rgba(255,255,255,.07); border: 1px solid rgba(120,160,255,.22); }
.dl-loja { border-color: rgba(255,255,255,.35); color: #fff; }
.dl-instalar { border-top-color: rgba(255,255,255,.14); color: rgba(255,255,255,.82); }
.dl-bloco { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); border-left-color: #3B82F6; }
.dl-bloco h3 { color: rgba(255,255,255,.6); }
.dl-bloco h3.dl-bloco-titulo, .dl-passos h2, .dl-passos h3 { color: #fff; }
.dl-passos a, .vd-abrir { color: #93B7FF; }
/* Botoes numa linha so' no celular ("Baixar aplicativo" quebrava em 400px). */
.app-acoes .dl-btn { white-space: nowrap; }
@media (max-width: 520px) { .app-acoes .dl-btn { padding: 12.5px 10px; font-size: 14.5px; gap: 6px; } }
/* "Baixar aplicativo" verde, como as acoes principais do site e do Portal (decisao do Jose). */
.dl-baixar { background: linear-gradient(135deg, var(--verde-escuro), var(--verde) 60%, #5CE666); box-shadow: 0 10px 22px -10px rgba(8,122,54,.7); }
.dl-baixar:hover { filter: brightness(1.05); }
@media (min-width: 860px) { .pagina .elo { font-size: 19px; letter-spacing: .16em; } }
/* Tutoriais: videos maiores, no tamanho do video da Home (dois por linha no desktop, um no
   celular), sempre 16:9, com mais respiro entre e dentro dos cards. */
.vd-lista { grid-template-columns: 1fr; gap: 24px; }
.vd-card { padding: 14px 14px 20px; gap: 14px; background: linear-gradient(160deg, #2A55B0 0%, #17377E 75%); border-color: rgba(147,183,255,.3); }
/* "Abrir no YouTube": botao verde, como as acoes principais do site. */
.vd-card .vd-abrir { min-height: 44px; padding: 0 18px; border-radius: 12px; color: #fff; font-size: 14px;
  background: linear-gradient(135deg, var(--verde-escuro), var(--verde) 60%, #5CE666); box-shadow: 0 10px 22px -10px rgba(8,122,54,.7); }
.vd-card .vd-abrir:hover { filter: brightness(1.05); }
.vd-card .vd-quadro { border-radius: 12px; }
.vd-card h3 { font-size: 17px; }
@media (min-width: 860px) {
  .vd-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  /* Um video so' na lista: o tamanho do video da Home (646px de largura, 16:9). */
  .vd-lista:has(> .vd-card:only-child) { grid-template-columns: minmax(0, 678px); }
  .vd-card { padding: 16px 16px 22px; }
  .vd-card h3 { font-size: 18px; }
}
/* Videos no padrao claro (2026-10-16, decisao do Jose; o mesmo na area Tutoriais do Portal): sem a
   caixa azul -- miniatura 16:9 com cantos arredondados e sombra discreta, titulo escuro, descricao
   cinza e botao verde discreto, sobre o fundo claro. A miniatura vale tambem para os videos do
   "Como instalar" (dentro do cartao do aplicativo, que nao muda). So' seletores de video: os
   cartoes de aplicativo e a faixa de suporte continuam azul-marinho. */
/* .cartao.vd-card (duas classes): vence tambem o `.cartao { padding: 16px }` do celular, mais abaixo. */
.vd-card, .cartao.vd-card { background: none; border: 0; box-shadow: none; padding: 0; gap: 12px; color: var(--ink); }
.vd-card h3 { color: var(--ink); }
.vd-card p { color: var(--ink-suave); }
.vd-card .vd-abrir { background: var(--verde-escuro); box-shadow: none; border-radius: 10px; padding: 0 16px; }
.vd-card .vd-abrir:hover { filter: brightness(1.08); }
@media (min-width: 860px) { .vd-card, .cartao.vd-card { padding: 0; } }
.vd-quadro, .vd-card .vd-quadro { border-radius: 14px; box-shadow: 0 14px 30px -18px rgba(15,32,72,.5); }
.vd-capa span { width: 60px; height: 60px; margin: -30px 0 0 -30px; background: rgba(11,18,32,.72); border: 2px solid rgba(255,255,255,.85); }

/* ===== Voltar ao topo (igual ao da Home): aparece depois de rolar ===== */
.voltar-topo { position: fixed; right: 16px; bottom: 18px; z-index: 50; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, var(--verde-escuro), var(--verde)); border: 2.5px solid #fff; box-shadow: 0 6px 18px rgba(10,20,45,.45);
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s, transform .2s; }
.voltar-topo.visivel { opacity: 1; transform: none; pointer-events: auto; }
.voltar-topo svg { width: 22px; height: 22px; }

@media (min-width: 860px) {
  .topo-faixa { padding: 18px 32px; }
  .topo-logo-publica { height: 46px; }
  .topo-nav { display: flex; }
  .nav-toggle { display: none; }
  .nav-links-mobile { display: none; }
  .topo-selos-linha { padding: 0 32px 20px; }
  .topo-selos { justify-content: center; flex-wrap: wrap; gap: 20px; }
  .selo { flex: none; flex-direction: row; text-align: left; gap: 8px; }
  .selo-icone { width: 28px; height: 28px; }
  .selo-icone svg { width: 14px; height: 14px; }
  .selo-texto { align-items: flex-start; }
  .selo-texto b { font-size: 11px; }
  .selo-texto span { font-size: 10.5px; }
  .pagina { padding: 56px 0 84px; }
  .lista-apps { grid-template-columns: 1fr 1fr; }
  /* Rodape: cartao arredondado de ponta a ponta (24px de folga), conteudo na largura da pagina. */
  .onda-rodape { display: none; }
  footer.rodape-portal {
    margin: 28px 24px 24px; border-radius: 18px; flex-direction: row; flex-wrap: wrap;
    justify-content: space-between; align-items: center; gap: 16px 24px; font-size: 13.5px;
    padding: 24px max(32px, calc((100% - 48px - 1120px) / 2)); box-shadow: 0 22px 40px -26px rgba(15,32,72,.6);
  }
  .rodape-marca .logo { font-size: 24px; }
  .rodape-marca span.tagline { font-size: 13.5px; }
  .footer-links { gap: 24px; }
  .footer-links a { font-size: 14px; }
  .copyright-linha { font-size: 13px; }
}
/* Oito itens no menu: entre 860 e 1099 px o espaco entre eles encolhe para caber numa linha. */
@media (min-width: 860px) and (max-width: 1099px) {
  .topo-nav { gap: 14px; }
  .topo-nav a { font-size: 15px; }
}
@media (max-width: 520px) {
  .wrap { width: calc(100% - 28px); }
  .topo-logo-publica { height: 34px; }
  .cartao { padding: 16px; }
  .app-resumo { gap: 12px 28px; }
  .suporte { padding: 14px 16px; }
  .suporte .dl-btn, .suporte .btn-continuar { flex: 1 1 auto; padding: 0 12px; }
}

/* Grupos de aplicativos e TOPE TV em destaque (2026-11-01). */
.grupo-apps + .grupo-apps { margin-top: 36px; }
.grupo-apps-titulo { font-size: 22px; line-height: 1.3; margin: 0 0 14px; }
.grupo-apps-oficial .lista-apps { grid-template-columns: 1fr; }
.cartao.app-oficial { border: 2px solid #22C55E; box-shadow: 0 18px 40px rgba(34,197,94,.22); background: linear-gradient(135deg, #0F4C3A 0%, #17377E 55%, #0B1E4A 100%); }
.app-oficial-rotulo { display: inline-block; margin: 0 0 14px; padding: 5px 12px; border-radius: 999px; background: #22C55E; color: #06281C; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; }
.app-pago-explica { margin: 10px 0 0; padding: 10px 12px; border-left: 4px solid #F59E0B; background: rgba(245, 158, 11, 0.12); border-radius: 6px; font-size: 14px; line-height: 1.45; }
.app-selo-pago { background: #F59E0B; color: #3B2200; border-radius: 999px; font-size: 12px; font-weight: 800; padding: 5px 12px; white-space: nowrap; }