/* topo.css — topo da loja: banner/header, menu de redes, frases institucionais
   e a linha de status da compra.
   Carrega DEPOIS de app.css (sobrescreve o que precisa) e ANTES de vitrine.css.
   Só mexe no bloco do topo — o resto da página continua vindo de app.css. */

/* --- Banner (topo e rodapé) ---
   Continua sendo um bloco PRETO liso. O do topo é o espaço do MASCOTE (ver
   .mascot-ph em css/app.css); o do rodapé virou só arte e tem a MESMA altura do
   topo — o vídeo que morava nele foi retirado da página.
   A arte padrão: quando o admin não subiu imagem nenhuma, o bloco usa o arquivo
   que fica em assets/img/banners/ (topo.jpg = mascote, rodape.jpg = arte do rodapé). Os dois placeholders são pretos lisos de verdade, então visualmente
   nada muda até alguém trocar o arquivo por FTP.
   A arte padrão entra num ::before (e não em background:) porque o loja.js
   escreve background inline no elemento e apagaria a imagem. A imagem vinda do
   admin (.banner-img) fica por cima do padrão. */
.banner.banner-ph::before{content:"";position:absolute;inset:0;z-index:0;
   background:#000 center/cover no-repeat}
#banner.banner-ph::before{background-image:url(../assets/img/banners/topo.jpg?v=4b80327688f0)}
#bannerFoot.banner-ph::before{background-image:url(../assets/img/banners/rodape.jpg?v=4b80327688f0)}
.banner .banner-img{z-index:1}

/* Topo tem UM ícone só, à direita: o WhatsApp do suporte (#waTop, preenchido
   pelo loja.js a partir de settings.support_whatsapp). O hamburger e o menu
   lateral foram removidos do HTML, do JS e do app.css — não sobrou regra de
   .menubtn/.drawer em lugar nenhum, então não há trava a manter aqui. */

/* --- Aviso de saída para o WhatsApp ---
   O clique no ícone não leva embora na hora: abre este aviso com contagem de
   5s e a saída "quero ficar". Sair no meio da compra é caro demais para
   acontecer por toque acidental. z-index abaixo do toast (99) e do popup de
   compra (70/71) — dois deles nunca estão na tela ao mesmo tempo. */
/* Abre JÁ VISÍVEL, com a entrada por animation (e não por uma classe que o JS
   adiciona no requestAnimationFrame): em aba em segundo plano o rAF não roda e
   o aviso ficaria invisível com o cronômetro correndo por baixo. */
.waask-mask{position:fixed;inset:0;z-index:65;display:flex;align-items:center;
   justify-content:center;padding:20px;
   background:rgba(11,36,82,.55);opacity:1;animation:wa-in .18s ease both}
.waask-mask.out{opacity:0;pointer-events:none;transition:opacity .16s ease}
.waask{width:100%;max-width:312px;padding:18px 16px 16px;
   background:#fff;border-radius:20px;box-shadow:var(--shadow-lg);
   text-align:center;animation:wa-pop .22s cubic-bezier(.4,0,.2,1) both}
@keyframes wa-in {from{opacity:0}            to{opacity:1}}
@keyframes wa-pop{from{transform:translateY(10px) scale(.97)} to{transform:none}}
.waask .ico{display:block;margin:0 auto 10px;width:40px;height:40px}
.waask .ico .ic{width:40px;height:40px;display:block}
.waask .t{display:block;font-size:16px;font-weight:800;color:var(--navy);line-height:1.25}
.waask .d{margin:5px 0 14px;font-size:12.5px;font-weight:600;color:var(--muted3);line-height:1.4}
.waask .d b{color:var(--primary);font-weight:800;font-variant-numeric:tabular-nums}
.waask .btn + .btn{margin-top:6px}
@media (prefers-reduced-motion:reduce){
  .waask-mask,.waask{animation:none;transition:none}
}

/* --- Menu de redes: TRÊS LINHAS, todas as redes à vista ---
   O número de colunas sai do total de redes ativas: são sempre 3 linhas, o mais
   uniformes possível (21 redes = 7+7+7; 22 = 8+7+7). Quem decide é o netRows()
   do js/loja.js, que grava --netcols aqui embaixo.
   O catálogo inteiro cabe sem rolagem e sem botão "ver mais".
   Flex (e não grid) de propósito: uma última linha mais curta fica CENTRADA em
   vez de deixar um buraco à direita.
   Em 460px cada célula tem ~51px — o desenho da rede manda, e o nome é a
   legenda embaixo dele, com o corpo ajustado ao tamanho da maior palavra
   (ver lblClass no loja.js). */
.netbar{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
   gap:6px 0;padding:9px 4px 8px}
/* Quebra de linha forçada (só entra quando o total não divide certinho pelo
   número de colunas — o loja.js decide onde). */
.netbreak{flex:0 0 100%;height:0;margin:0;padding:0}
.nettab{flex:0 0 calc(100% / var(--netcols,8));max-width:calc(100% / var(--netcols,8));
   min-width:0;gap:3px;
   padding:4px 1px 3px;border-radius:10px;
   transition:background-color .2s ease}
/* O desenho da rede OCUPA o chip inteiro: os ícones do sprite já são quadrados
   coloridos de cantos arredondados, então a moldura branca em volta só criava
   espaço morto e afastava o anel azul do logo. Fundo transparente + o ícone em
   100% = o anel encosta no desenho. */
.nettab .chip{width:34px;height:34px;border-radius:10px;padding:0;overflow:hidden;
   background:transparent;box-shadow:0 1px 5px rgba(11,36,82,.16);
   transition:transform .12s,box-shadow .25s ease}
.nettab .chip .ic{width:100%;height:100%;display:block}
/* Ícone próprio da rede (assets/img/redes/<slug>.png). Quando o arquivo existe,
   o store.php manda a URL e o loja.js troca o desenho vetorial por esta <img>.
   contain (e não cover) porque arte enviada pelo admin pode não ser quadrada —
   melhor sobrar transparência do que cortar o logo. */
.nettab .chip .netimg{width:100%;height:100%;object-fit:contain;display:block}

/* Selecionado: fundo azul suave no bloco inteiro + ANEL azul colado no ícone.
   Antes o único sinal era o nome mudar de cor — pequeno demais para se notar. */
.nettab.active{background:var(--primary-soft)}
.nettab.active .chip{box-shadow:0 0 0 2px var(--primary),0 3px 10px rgba(7,58,121,.26)}
.nettab.active .bar{background:var(--primary)}
.nettab .bar{width:16px;height:2.5px}

/* Nome em até 2 linhas, quebrando ENTRE palavras ("Google Maps"). Palavras
   compridas demais para a célula (CoinMarketCap, SnackVideo, Trustpilot) só
   diminuem de corpo — nada de "CoinMarket/Cap" partido no meio. */
.nettab .lbl{display:block;-webkit-line-clamp:none;line-clamp:none;overflow:hidden;
   overflow-wrap:normal;word-break:normal;hyphens:none;min-height:2.4em;
   font-size:10px;letter-spacing:-.1px}
.nettab .lbl.sm{font-size:10px;letter-spacing:-.15px}
.nettab .lbl.xs{font-size:10px;letter-spacing:-.2px;
   white-space:nowrap;text-overflow:ellipsis}

@media(max-width:400px){
  /* Em vez de comprimir 7–8 legendas até 6,5px, usamos cinco colunas e mais
     linhas. As quebras calculadas para desktop são ignoradas nesta largura. */
  .netbar{padding:9px 2px 8px;gap:7px 0}
  .netbreak{display:none}
  .nettab{flex-basis:20%;max-width:20%;padding-inline:3px}
  .nettab .chip{width:34px;height:34px;border-radius:9px}
  .nettab .lbl,.nettab .lbl.sm,.nettab .lbl.xs{font-size:11px;letter-spacing:-.1px;
     white-space:normal;text-overflow:clip}
}
@media(max-width:330px){
  .nettab{flex-basis:25%;max-width:25%}
}

/* --- Frases institucionais (Admin → Configurações → data.phrases) ---
   As duas primeiras viram CHIPS lado a lado, com ícone: são as duas dúvidas
   que o cliente tem antes de comprar (como paga / quando chega), então cada
   uma ganha seu bloco em vez de virar texto solto na página.
   A terceira é a resposta ao medo ("vão pedir minha senha?") e fica embaixo,
   discreta, com cadeado. */
.frases{margin:9px 12px 0}
.frases .linha{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.frases .chip{display:flex;align-items:center;justify-content:center;gap:6px;
   min-height:32px;padding:6px 9px;border-radius:11px;
   font-size:11.5px;font-weight:800;line-height:1.25;text-align:center}
.frases .chip .ic{flex:0 0 auto}
.frases .chip.pay {color:var(--azul-selo);background:rgba(47,107,240,.10)}
.frases .chip.fast{color:var(--verde-selo);background:rgba(22,163,74,.10)}
/* display:block (e não flex): assim o cadeado corre JUNTO com o texto e, quando
   a frase quebra em duas linhas, ele fica colado na primeira palavra em vez de
   sobrar sozinho na ponta esquerda.
   A cor é o VERMELHO de alerta (era var(--muted3): cinza sobre fundo cinza,
   praticamente invisível). O corpo continua 11px — o que muda é o contraste. */
.frases .baixo{display:block;margin-top:6px;text-align:center;
   font-size:11px;font-weight:700;color:var(--alerta);line-height:1.35}
.frases .baixo .ic{display:inline-block;vertical-align:-2px;margin-right:4px;
   color:currentColor;opacity:1}
/* Frase apagada no admin some junto com o chip (sem ícone órfão). */
.frases .chip:has(span:empty),
.frases .baixo:has(span:empty){display:none}

/* --- Status da compra ---
   DECISÃO (item 4 do briefing): em vez do botão no topo esquerdo, a linha
   virou um CARTÃO clicável logo abaixo do menu de redes. O topo continua com
   um ícone só, e aqui o alvo do dedo é a faixa inteira — "CLIQUE AQUI"
   sublinhado no meio de uma frase é alvo pequeno demais para este público. */
.statuscard{display:flex;align-items:center;gap:9px;
   margin:8px 12px 0;padding:9px 11px;
   background:#fff;border:1.5px solid var(--line2);border-radius:14px;
   box-shadow:0 2px 10px rgba(11,36,82,.06);
   text-decoration:none;cursor:pointer;
   transition:border-color .15s ease,box-shadow .15s ease,transform .12s ease}
.statuscard:hover{border-color:var(--primary);transform:translateY(-1px);
   box-shadow:0 6px 16px rgba(7,58,121,.16)}
.statuscard:active{transform:none}
.statuscard .sic{flex:0 0 24px;width:24px;height:24px;border-radius:8px;
   display:flex;align-items:center;justify-content:center;
   background:var(--primary-soft);color:var(--primary)}
.statuscard .arrow{flex:0 0 auto;color:var(--muted2)}
/* UMA LINHA em 390px com o texto novo (item 18).
   A CONTA (medida, não estimada):
     largura útil = 390 (tela) − 24 (margin 12+12 do .statuscard)
                        − 22 (padding 11+11) − 24 (.sic) − 14 (2 gaps de 7)
                        − 16 (seta) = 290px.
     "Fez uma compra? CLIQUE AQUI e acompanhe a entrega" são 49 caracteres e
     pediam ~335px a 12.5px. Para caber em 290px: 12.5 × 290/335 = 10,8px.
     Corpo fluido: 2.6vw dá 10,14px em 390px (sobra ~18px de folga) e bate no
     teto de 12px a partir de ~460px, que é a largura máxima do .app.
   Nada de reticências: a frase inteira aparece. O gap caiu de 9 para 7 e o
   ícone de 28 para 24 exatamente para comprar esses pixels. */
.statuscard{gap:7px}
.statusline{flex:1;min-width:0;margin:0;text-align:left;
   font-size:clamp(8px,2.6vw,12px);font-weight:600;letter-spacing:-.15px;
   color:var(--ink3);line-height:1.3;white-space:nowrap}
.statusline .cta{font-weight:800;color:var(--primary)}
/* Abaixo de ~360px nem o piso do clamp fecha numa linha. Mesma decisão da
   .paynote: melhor quebrar em duas linhas do que cortar a frase. */
@media (max-width:359px){
  .statusline{white-space:normal}
}