/* ===========================================================================
   /suporte.css  -  o contato com o suporte em toda a jornada e no painel
   ---------------------------------------------------------------------------
   [01/10/2026, revisão do Albert com o Polli, item 4] "Telas com contato de
   suporte: 0". A pessoa chegava a um erro, a uma dúvida no meio do pagamento
   ou a um número que não conectava, e não havia um único lugar visível para
   pedir ajuda. Decisão do Albert: o WhatsApp do Polli, (45) 99858-7637.

   DUAS PEÇAS, E AS DUAS SÃO HTML ESCRITO NA PÁGINA, SEM JAVASCRIPT:
     .zs-ajuda-topo   o link "Falar com o suporte", no alto da página;
     .zs-wa           o botão redondo do WhatsApp, no canto de baixo.
   Escritas no HTML porque é justamente quando algo quebrou (inclusive o
   JavaScript) que a pessoa mais precisa delas.

   POR QUE UM ARQUIVO PRÓPRIO: as páginas da jornada usam /hub.css e o
   /descobrir usa /descobrir.css, com variáveis diferentes. Uma folha só, com
   as cores dela, evita duas cópias da mesma regra.

   [HARD] O BOTÃO NÃO COBRE BOTÃO DE AÇÃO NO CELULAR. Nenhuma página da jornada
   tem barra fixa embaixo; o risco é o fim da página (botão principal, links
   legais) ficar por baixo do círculo. A folga no fim do <body> garante que, ao
   rolar até o fim, nada clicável fique sob ele. Quem mede é
   _bancada-hub/provar-0110-painel-tela.py (ALVO S3, 390 px).
   =========================================================================== */

.zs-ajuda-topo{
  display:flex; justify-content:flex-end;
  /* `width:100%` e `align-self`: o /descobrir desenha o <body> em coluna
     flexível e centralizada, e sem isto a faixa encolhia e ia para o meio. */
  width:100%; box-sizing:border-box; align-self:stretch;
  max-width:1200px; margin:0 auto; padding:4px 16px 0;
  font-size:14px; line-height:20px;
}
.zs-ajuda-topo a{
  display:inline-flex; align-items:center; gap:6px;
  min-height:36px; padding:8px 0;
  color:inherit; font-weight:600;
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
}
.zs-ajuda-topo a:hover{text-decoration-thickness:2px}
.zs-ajuda-topo a:focus-visible{outline:2px solid #5B7A99; outline-offset:2px; border-radius:4px}
.zs-ajuda-topo svg{width:16px; height:16px; flex:0 0 auto}

/* No painel o link mora no cabeçalho, antes do avatar, e não numa faixa: o
   cabeçalho já é a linha do alto. Abaixo de 640 px o texto vira "Suporte"
   (o nome acessível acompanha, porque `display:none` sai da árvore). */
.zs-cab-suporte{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  min-height:38px; padding:0 4px;
  font-size:14px; line-height:20px; font-weight:600;
  color:inherit; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
  border-radius:6px; white-space:nowrap;
}
.zs-cab-suporte:hover{text-decoration-thickness:2px}
.zs-cab-suporte:focus-visible{outline:2px solid #5B7A99; outline-offset:2px}
.zs-cab-suporte__icone{width:16px; height:16px; flex:0 0 auto}
.zs-cab-suporte .zs-curto{display:none}
@media (max-width:640px){
  .zs-cab-suporte .zs-longo{display:none}
  .zs-cab-suporte .zs-curto{display:inline}
}

/* O texto só para leitor de tela, com nome próprio: o /descobrir não carrega
   o /hub.css, que é onde mora o `.sr-only` das outras páginas. */
.zs-sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

.zs-wa{
  position:fixed; right:16px; bottom:16px; z-index:60;
  width:52px; height:52px; border-radius:9999px;
  display:grid; place-items:center;
  background:#25D366; color:#04231A;            /* 8,40:1, o mesmo par do /descobrir */
  box-shadow:0 4px 14px rgba(15,23,42,.22);
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.zs-wa:hover{transform:translateY(-1px); box-shadow:0 6px 18px rgba(15,23,42,.28)}
.zs-wa:focus-visible{outline:3px solid #5B7A99; outline-offset:3px}
.zs-wa svg{width:28px; height:28px}
/* Enquanto o círculo estaria por cima de algo clicável, ele sai de vista
   (/js/suporte.js). `visibility` também o tira da ordem do teclado. */
.zs-wa[data-encoberto="true"]{opacity:0; visibility:hidden; pointer-events:none}
.zs-wa{transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease, visibility .15s}
@media (prefers-reduced-motion: reduce){ .zs-wa{transition:none} .zs-wa:hover{transform:none} }

/* A folga do fim da página: o tamanho do botão, a margem dele e mais 16 px.
   `::after` no <body>, e não padding, porque algumas páginas desenham o fundo
   do <body> com altura mínima de tela, e o padding somaria a ela. */
body.zs-com-suporte::after{content:''; display:block; height:84px}

@media print{ .zs-wa, .zs-ajuda-topo{display:none} }

/* ===========================================================================
   O SELETOR DE IDIOMA E O BOTÃO DE TEMA  [03/10/2026, revisão do Albert, T1 e T4]
   ---------------------------------------------------------------------------
   Moram aqui pelo mesmo motivo do suporte: esta é a folha que TODA tela da
   jornada, o /descobrir e o painel carregam, e os dois controles aparecem nas
   três. As cores saem de `currentColor` (a cor do texto do cabeçalho), então
   eles acompanham o claro e o escuro sem regra própria em cada folha.

   T4: "uma bandeirinha pequena do lado de cada língua, senão passa
   despercebido; um switchzinho para ficar mais clean". A bandeira é imagem SVG
   embutida, e não emoji: emoji de bandeira não aparece no Windows (vira "BR",
   "US" em letras). PT Brasil, EN Estados Unidos, ES Espanha. A bandeira é
   decoração (pseudo-elemento): quem lê a língua é o código ao lado.
   =========================================================================== */
.zs-controles{display:flex; align-items:center; gap:8px; margin-left:auto; flex:0 0 auto}
.hub-idiomas{
  display:inline-flex; align-items:center; gap:2px; margin-left:auto; flex:0 0 auto;
  padding:2px; border:1px solid color-mix(in srgb, currentColor 20%, transparent); border-radius:9999px;
  font-size:12px; line-height:16px;
}
.zs-controles .hub-idiomas{margin-left:0}
.hub-idiomas a{
  display:inline-flex; align-items:center; gap:6px;
  min-height:30px; padding:0 10px 0 7px; border-radius:9999px;
  color:inherit; text-decoration:none; font-weight:500; opacity:.75;
}
.hub-idiomas a::before{
  content:""; flex:0 0 auto; width:18px; height:12px; border-radius:2px;
  background:center / cover no-repeat; box-shadow:0 0 0 1px rgba(0,0,0,.14);
}
.hub-idiomas a[hreflang="pt-BR"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Crect width='18' height='12' fill='%23009C3B'/%3E%3Cpath d='M9 1.4 16.2 6 9 10.6 1.8 6z' fill='%23FFDF00'/%3E%3Ccircle cx='9' cy='6' r='2.9' fill='%23002776'/%3E%3Cpath d='M6.2 5.5c1.9-.4 3.9 0 5.6 1' stroke='%23fff' stroke-width='.55' fill='none'/%3E%3C/svg%3E")}
.hub-idiomas a[hreflang="en"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 13'%3E%3Crect width='19' height='13' fill='%23fff'/%3E%3Cpath d='M0 .5h19M0 2.5h19M0 4.5h19M0 6.5h19M0 8.5h19M0 10.5h19M0 12.5h19' stroke='%23B22234'/%3E%3Crect width='7.6' height='7' fill='%233C3B6E'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='1.3' cy='1.2' r='.45'/%3E%3Ccircle cx='3.8' cy='1.2' r='.45'/%3E%3Ccircle cx='6.3' cy='1.2' r='.45'/%3E%3Ccircle cx='2.55' cy='2.9' r='.45'/%3E%3Ccircle cx='5.05' cy='2.9' r='.45'/%3E%3Ccircle cx='1.3' cy='4.6' r='.45'/%3E%3Ccircle cx='3.8' cy='4.6' r='.45'/%3E%3Ccircle cx='6.3' cy='4.6' r='.45'/%3E%3Ccircle cx='2.55' cy='6.2' r='.45'/%3E%3Ccircle cx='5.05' cy='6.2' r='.45'/%3E%3C/g%3E%3C/svg%3E")}
.hub-idiomas a[hreflang="es"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Crect width='18' height='12' fill='%23AA151B'/%3E%3Crect y='3' width='18' height='6' fill='%23F1BF00'/%3E%3C/svg%3E")}
.hub-idiomas a:hover{opacity:1; background:color-mix(in srgb, currentColor 8%, transparent)}
.hub-idiomas a[aria-current]{opacity:1; font-weight:600; background:color-mix(in srgb, currentColor 11%, transparent)}
.hub-idiomas a:focus-visible{outline:2px solid #5B7A99; outline-offset:2px}

/* O botão de tema: lua no claro (vai para o escuro), sol no escuro. O nome
   acessível está no HTML de cada página, e /js/tema.js vira o aria-pressed. */
.zs-tema{
  flex:0 0 auto; display:inline-grid; place-items:center;
  width:36px; height:36px; padding:0; margin:0;
  border:1px solid color-mix(in srgb, currentColor 20%, transparent); border-radius:9999px;
  background:transparent; color:inherit; cursor:pointer; font:inherit;
}
.zs-tema:hover{background:color-mix(in srgb, currentColor 8%, transparent)}
.zs-tema:focus-visible{outline:2px solid #5B7A99; outline-offset:2px}
.zs-tema svg{width:18px; height:18px; display:block}
.zs-tema__sol{display:none !important}
.escuro .zs-tema__sol{display:block !important}
.escuro .zs-tema__lua{display:none !important}
/* No toque o alvo cresce para 44 px (WCAG 2.5.5), sem mudar o desenho. */
@media (pointer:coarse){
  .hub-idiomas a{min-height:44px}
  .zs-tema{width:44px; height:44px}
}
/* Nas telas de cartão (/obrigado, /entrar, /definir-senha) não há cabeçalho:
   o botão divide a faixa do alto com o "Falar com o suporte". */
.zs-ajuda-topo{align-items:center; gap:12px}

/* ===========================================================================
   O RODAPÉ ÚNICO DO APP  [03/10/2026, revisão do Albert, T3 e G8]  VISUAL2-0310
   ---------------------------------------------------------------------------
   Havia quatro rodapés diferentes (guia, jornada, institucional, docs) e o
   painel não tinha nenhum. Agora é um só, com o DESENHO do rodapé de
   zeracompany.com, medido no ar em 03/10/2026 a 1366 e 390 px
   (_bancada-hub/prova-0310-visual2/site/rodape-site-*.json), e o CONTEÚDO
   decidido pelo Albert: Termos, Política, razão social e a linha das marcas da
   Meta, sem Cascavel.

   O QUE VEIO DO SITE, peça por peça:
     faixa         #1F2A37 (rgb 31,42,55), a mesma nos dois temas, como no site;
                   borda de cima 1px #F3F4F6 (no escuro, branco a 10%)
     grade         até 1152 px, 20 px de lado, 56 px em cima e embaixo,
                   3 colunas a partir de 768 px, 40 px entre elas
     marca         /img/logo-zera-branco.png, 44 px de altura (o mesmo arquivo)
     links         Inter 14/20, #D1D5DB, um embaixo do outro a cada 28 px,
                   branco no hover
     texto         Inter 14 px, entrelinha 1,625, #9CA3AF
     linha final   borda de cima branca a 10%, 20 px de respiro, Inter 12/16

   O QUE MUDOU, E POR QUÊ:
     linha final   #9CA3AF no lugar de #6B7280: o cinza do site mede 3,07:1
                   sobre #1F2A37, abaixo dos 4,5:1 de texto de 12 px;
     sublinhado    nos links, só no hover e no foco, como no site; o foco ganha
                   o contorno #8AA2B8 (o azul claro do site) que o teclado vê.
   As colunas de navegação, newsletter, contato, "Pergunte à IA" e o selo de
   Tech Provider ficaram de fora por decisão do Albert (conteúdo só legal).

   [HARD] A FAIXA DESCE ATÉ O FIM DA JANELA. Em tela curta (o Ajustes do painel,
   o /entrar no monitor grande) o rodapé acaba antes da janela, e o fundo claro
   da página aparecia embaixo dele. A sombra sem desfoque, deslocada para
   baixo, pinta a cor da faixa até o fim da janela e não cria rolagem: sombra
   não conta como área rolável. Ela também cobre a folga de 84 px do botão do
   WhatsApp (body.zs-com-suporte::after), que fica depois do rodapé.
   =========================================================================== */
.zs-rodape{
  width:100%; box-sizing:border-box; align-self:stretch; flex:0 0 auto;
  margin:48px 0 0;
  background:#1F2A37; color:#D1D5DB;
  border-top:1px solid #F3F4F6;
  box-shadow:0 100vh 0 100vh #1F2A37;
  font-family:"Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  font-size:14px; line-height:20px; text-align:left;
}
.escuro .zs-rodape{border-top-color:rgba(255,255,255,.1)}
.zs-rodape *{box-sizing:border-box}
.zs-rodape p{margin:0}
.zs-rodape__grade{
  max-width:1152px; margin:0 auto; padding:56px 20px;
  display:grid; grid-template-columns:minmax(0,1fr); gap:40px;
}
@media (min-width:768px){
  .zs-rodape__grade{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.zs-rodape__marca{display:inline-block; justify-self:start; border-radius:4px}
.zs-rodape__marca img{display:block; height:44px; width:auto}
.zs-rodape__links{display:flex; flex-direction:column; align-items:flex-start; gap:8px}
.zs-rodape__links a{color:#D1D5DB; text-decoration:none; font-size:14px; line-height:20px; border-radius:2px}
.zs-rodape__links a:hover{color:#FFFFFF; text-decoration:underline; text-underline-offset:3px}
.zs-rodape a:focus-visible{outline:2px solid #8AA2B8; outline-offset:3px; color:#FFFFFF}
.zs-rodape__marcas{color:#9CA3AF; font-size:14px; line-height:22.75px}
.zs-rodape__fim{border-top:1px solid rgba(255,255,255,.1)}
.zs-rodape__fim p{max-width:1152px; margin:0 auto; padding:20px; font-size:12px; line-height:16px; color:#9CA3AF}
@media print{ .zs-rodape{box-shadow:none} }

/* [03/10/2026, T2] Nas telas de cartão o tema saiu da faixa do suporte e foi
   para o cabeçalho, que agora existe nelas também. */
body.jor .hub-cabecalho{top:0}