/* Topo da pagina inicial no celular, em tres formas mais leves que o banner grande de sempre.
   So carrega com a chave `site.topo_celular` em 1, 2 ou 3, ou com ?topo=1 / ?topo=2 / ?topo=3 (so para quem pediu, fica
   na sessao; ?topo=0 desfaz). Tudo sob .tc e dentro de @media: o computador nao muda nada.
     1 = banner baixo (arte + frase curta, sem segunda busca nem botao)
     2 = sem banner (tres selos no lugar)
     3 = cartoes que deslizam para o lado (um por banner)
   Nas tres, o aviso de cashback vira uma linha (toque abre a regra inteira). */

.trilho-topo{display:none}

@media (max-width:760px){
  /* ------------------------------------------------ cashback numa linha (as tres formas) */
  .tc .faixa-cashback{padding-block:0}
  .tc .cashback-chamada.grande{padding:9px 12px;font-size:13px;border-radius:14px;gap:8px;flex-direction:row;
    align-items:center;flex-wrap:wrap;cursor:pointer}
  .tc .cashback-chamada.grande .cashback-selo{font-size:11px;padding:5px 10px}
  .tc .cashback-chamada.grande .cashback-texto b{font-size:13px}
  .tc .cashback-chamada.grande .cashback-resto{display:none}
  .tc .cashback-chamada.grande.aberto .cashback-resto{display:inline}
  .tc .cashback-chamada.grande:not(.aberto) .cashback-texto::after{content:" Saiba mais ›";color:var(--ciano,#38d6e0);
    font-size:12px;white-space:nowrap}

  /* ------------------------------------------------ 1: banner baixo */
  .tc-1 .topo-grade{min-height:150px;padding-block:16px;gap:0;align-items:end}
  .tc-1 .topo-texto .rotulo,.tc-1 .topo-texto .sub,.tc-1 .topo-texto .busca-grande,.tc-1 .topo-texto .provas{display:none}
  .tc-1 .topo-texto h1{font-size:20px;line-height:1.2;max-width:15em;margin:0}
  /* a arte inteira abre o jogo: o botao fica invisivel por cima de tudo */
  .tc-1 .topo-acao{position:static}
  .tc-1 .topo-acao .btn-arte{position:absolute;inset:0;z-index:6;width:100%;height:100%;padding:0;font-size:0;
    border-radius:0;opacity:0;box-shadow:none}
  .tc-1 .topo-acao .pontos{position:absolute;top:auto;bottom:12px;right:14px;z-index:7;margin:0}

  /* ------------------------------------------------ 2: sem banner */
  .tc-2 .topo-fundo,.tc-2 .topo-verniz,.tc-2 .topo-extras,.tc-2 .topo-acao{display:none}
  .tc-2 .topo-loja{background:none;border-bottom:0}
  .tc-2 .topo-grade{padding-block:10px 4px}
  /* o titulo continua na pagina para quem le por leitor de tela e para o Google, so nao aparece */
  .tc-2 .topo-texto .rotulo,.tc-2 .topo-texto h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
    white-space:nowrap}
  .tc-2 .topo-texto .sub,.tc-2 .topo-texto .busca-grande{display:none}
  .tc-2 .topo-texto .provas{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0}
  .tc-2 .topo-texto .provas li{padding:7px 6px;text-align:center;border-radius:10px}
  .tc-2 .topo-texto .provas b{font-size:11.5px;line-height:1.2}
  .tc-2 .topo-texto .provas span{font-size:10.5px;line-height:1.25;display:block}

  /* ------------------------------------------------ 3: cartoes que deslizam */
  .tc-3 .topo-fundo,.tc-3 .topo-verniz,.tc-3 .topo-extras,.tc-3 .topo-acao{display:none}
  .tc-3 .topo-loja{background:none;border-bottom:0}
  .tc-3 .topo-grade{padding-block:12px 4px}
  .tc-3 .topo-texto .rotulo,.tc-3 .topo-texto h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
    white-space:nowrap}
  .tc-3 .topo-texto .sub,.tc-3 .topo-texto .busca-grande,.tc-3 .topo-texto .provas{display:none}
  .tc-3 .trilho-topo{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--lado, 16px) * -1);padding-inline:var(--lado,16px);padding-bottom:4px;scrollbar-width:none}
  .tc-3 .trilho-topo::-webkit-scrollbar{display:none}
  /* com o avanco automatico (topo-trilho.js) o encaixe puxaria o cartao de volta a cada passo */
  .tc-3 .trilho-topo.com-faixa{scroll-snap-type:none}
  .tc-3 .trilho-cartao{flex:0 0 56%;aspect-ratio:3/4;border-radius:16px;overflow:hidden;scroll-snap-align:start;
    border:1px solid var(--borda-viva);background:var(--cartao)}
  .tc-3 .trilho-cartao img{width:100%;height:100%;object-fit:cover;display:block}
}