/* ==========================================================================
   AJUSTES DE MOBILE
   Carrega por último. Só mexe abaixo de 960px — o desktop não muda
   (exceção marcada abaixo, fora do media query, onde precisa valer sempre).
   ========================================================================== */

@media (max-width:960px){

  /* --- RODAPÉ ------------------------------------------------------------
     A home usa rodapé fixo de tela cheia com o conteúdo deslizando por cima.
     Isso funciona enquanto o rodapé couber em 100vh. No celular as colunas
     empilham e ele passa de 1250px de altura: como é fixo, o topo dele fica
     em -411px e NUNCA pode ser alcançado — a faixa do slogan "Performance é
     o segredo do jogo" ficava invisível no celular.
     Abaixo de 960px ele volta a ser um bloco normal no fim da página.
     O !important é necessário porque a margem do shell é inline, posta por JS. */
  .content-shell{margin-bottom:0 !important;}
  footer{position:static;min-height:0;}

  /* --- FAIXA RETA, NÃO PÍLULA DE DESKTOP -----------------------------------
     .nav-inner no site.css é uma pílula: border-radius:100px, borda e fundo
     translúcido pensados pra flutuar CENTRALIZADA no desktop, menor que a
     tela. Só zerar padding/raio (como antes) não bastava: o fundo e a borda
     continuavam pintando apenas a caixinha do .nav-inner — que fica dentro
     do .wrap com padding lateral — então sobrava uma caixa com contorno
     visível, flutuando com vão dos dois lados. Isso é a mesma pílula de
     desktop, só sem canto arredondado.
     Correção de verdade: o fundo/borda saem do .nav-inner (que vira 100%
     transparente, sem contorno) e vão para o .nav, que já é fixed com
     left:0/right:0 — ou seja, cobre a largura real da tela. O .nav-inner
     continua dentro do .wrap só para alinhar logo/ícones na mesma margem
     do resto do conteúdo; quem pinta a faixa de ponta a ponta é o .nav. */
  .nav{
    background:var(--black,#08080a);
    transition:padding .5s var(--ease),transform .45s var(--ease),background .3s var(--ease);
  }
  .nav.scrolled{background:rgba(23,24,29,.92);}
  .nav-inner,
  .nav.scrolled .nav-inner{
    padding-left:0;padding-right:0;max-width:none;
    border-radius:0;border:none;background:transparent;
    box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  }

  /* --- ALVOS DE TOQUE ------------------------------------------------------
     Mínimo de 44px é o que a mão alcança sem errar. O padding cresce a área
     clicável; a margem negativa devolve o espaço, então nada se desloca. */
  .burger{
    width:44px;height:44px;
    padding:14px 9px;margin:-14px -9px;
    box-sizing:border-box;justify-content:center;
  }
  .tema-btn{min-width:44px;min-height:44px;}
  .lang-flag{min-height:44px;}
  .mobile-close{min-width:44px;min-height:44px;}

  /* --- LAYOUT DO CONTEÚDO DO MENU -----------------------------------------
     A posição/tamanho do painel (tela cheia, sem margem) já está resolvida
     em site.css. Aqui só o CONTEÚDO: nasce alinhado à esquerda, no topo,
     em vez de flutuar centralizado — era isso que fazia parecer um menu de
     desktop ampliado em vez de um menu de celular. */
  .mobile-panel{
    justify-content:flex-start;
    align-items:stretch;
    gap:0;
    padding:96px 28px 40px;
    overflow-y:auto;
  }
  .mobile-panel a{
    font-size:17px;
    width:100%;
    text-align:left;
    justify-content:flex-start;
    padding:15px 0;
    border-bottom:1px solid rgba(245,245,247,.12);
  }
  /* o CTA "Agende uma demo" continua sendo um botão, não uma linha de lista */
  .mobile-panel a.btn{
    border-bottom:none;justify-content:center;text-align:center;
  }
  .lang-switch-mobile{margin-bottom:26px;}
  /* os links do menu são filhos diretos do painel, não de um .mobile-menu */
  #mobilePanel a{min-height:52px;display:flex;align-items:center;}

  /* Enquanto o painel está aberto, o logo e o botão de tema saem de cena —
     eram eles que sobrepunham o × e as bandeiras. */
  body:has(#mobilePanel.open) .nav-logo,
  body:has(#mobilePanel.open) .tema-btn{
    visibility:hidden;
  }
  /* com o painel aberto, o ícone do burger também some — senão ele e o ×
     ficam empilhados no mesmo canto, um por cima do outro. */
  body:has(#mobilePanel.open) .burger{display:none !important;}

  /* --- TEXTOS CENTRALIZADOS VIRAM ESQUERDA --------------------------------
     No desktop, "quem somos", "provedores de jogos" e a faixa de números
     ficam centralizados por design. No celular isso desalinha esses blocos
     do resto da página — e o travessão do lado direito do eyebrow, que só
     existia para equilibrar a centralização, fica solto sem função. Vira
     tudo à esquerda; o travessão da direita desaparece.
     O CTA final (com os ícones de rede social) fica de fora dessa regra de
     propósito: ele é um cartão isolado, não uma seção de texto corrido, e
     título/botão/ícones têm que continuar centralizados entre si — senão o
     título e o botão vão pra esquerda enquanto os ícones (que já são
     centralizados via flex, sem depender de text-align) ficam no meio,
     desalinhando os três. */
  .intro-top,
  .provcap-head,
  .stats-head{
    text-align:left;
  }
  .intro-top{margin-left:0;margin-right:0;}
  .intro-top .eyebrow-center,
  .provcap-head .eyebrow{
    justify-content:flex-start;
  }
  .eyebrow-center::after{content:none;}
  .intro-slogan,
  .provcap-head p,
  .provcap-head .btn,
  .stats-head h2{
    margin-left:0;margin-right:0;max-width:none;
  }
  .slogan-band p{text-align:left;margin:0;}

  /* --- TEXTO QUE EXPANDE ("leia mais") -------------------------------------
     Quem somos, Licenças & mercados e Sistema de pagamento. Escondido por
     COMPLETO por padrão — nenhuma linha aparece sem clicar em "Ler mais".
     No desktop não faz nada — fica fora deste media query. */
  .jc-colapsavel{
    position:relative;
    max-height:0;
    overflow:hidden;
    transition:max-height .45s var(--ease);
  }
  .jc-colapsavel::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:56px;
    background:linear-gradient(180deg,transparent,var(--jc-fundo,var(--paper)));
    pointer-events:none;transition:opacity .3s var(--ease);
  }
  .jc-colapsavel.aberto{max-height:2000px;}
  .jc-colapsavel.aberto::after{opacity:0;}

  .leia-mais-btn{
    display:inline-flex;align-items:center;gap:8px;
    margin-top:14px;padding:6px 0;background:none;border:none;cursor:pointer;
    font-family:'Space Grotesk',sans-serif;font-size:13.5px;font-weight:600;
    color:var(--purple-1);
  }
  .leia-mais-seta{width:11px;height:11px;flex-shrink:0;transition:transform .35s var(--ease);}
  .leia-mais-btn[aria-expanded="true"] .leia-mais-seta{transform:rotate(180deg);}
  .leia-mais-btn .lm-aberto{display:none;}
  .leia-mais-btn[aria-expanded="true"] .lm-fechado{display:none;}
  .leia-mais-btn[aria-expanded="true"] .lm-aberto{display:inline;}

  /* --- SERVIÇOS: FOTO SÓ AO TOCAR ------------------------------------------
     A lógica de "um card aberto por vez" já existe no JS (classe
     .is-tocado, alternada no toque). Aqui só ensinamos a foto a reagir: some
     por padrão, entra quando o card está tocado. */
  .why-item{padding-right:46px;}
  .why-item .why-media{
    max-height:0;opacity:0;margin-top:0;
    overflow:hidden;
    transition:max-height .4s var(--ease),opacity .3s var(--ease),margin-top .4s var(--ease);
  }
  .why-item.is-tocado .why-media{
    max-height:220px;opacity:1;margin-top:6px;
  }
  /* setinha pra baixo: sem ela nada avisa que o card esconde uma foto.
     ::before, não ::after — o ::after do card já é usado pela linha roxa
     que dá a volta na borda (site.css); currentColor puxa a cor de texto
     do próprio card, que já muda certo nos dois temas. */
  .why-item::before{
    content:"";
    position:absolute;top:24px;right:22px;z-index:3;
    width:9px;height:9px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg);
    opacity:.55;
    transition:transform .35s var(--ease),opacity .3s var(--ease);
    pointer-events:none;
  }
  .why-item.is-tocado::before{
    transform:rotate(225deg);
    opacity:.9;
  }

  /* --- "A PLATAFORMA POR DENTRO": CARROSSEL, 3 CARDS POR PÁGINA -----------
     Não é "um card por vez": cada página mostra 3 cards empilhados,
     ocupando a largura toda; o dedo desliza pra ver a próxima leva de 3.
     As bolinhas embaixo (montadas em JS, ver index.html) marcam quantas
     páginas existem e qual está na tela.

     Truque do grid: grid-auto-flow:column + 3 linhas fixas faz o navegador
     empilhar 3 cards por coluna sozinho; grid-auto-columns:100% faz cada
     coluna valer exatamente uma "página" da largura do carrossel. Como os
     3 cards de uma coluna compartilham a mesma posição horizontal, o snap
     em qualquer um deles já alinha a página inteira — não precisa criar
     uma div "página" só pra isso. */
  .vantagens-grid{
    display:grid;
    grid-auto-flow:column;
    grid-template-rows:repeat(3,auto);
    grid-template-columns:none;
    grid-auto-columns:100%;
    column-gap:0;
    row-gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .vantagens-grid::-webkit-scrollbar{display:none;}
  .v-card{
    width:100%;
    height:auto;min-height:0;
    grid-column:auto;grid-row:auto;
    scroll-snap-align:start;
  }
  /* dentro do carrossel os cards são todos do mesmo tamanho — os spans do
     bento (larga/alta) eram pensados pro grid de desktop, não pra pilha
     de 3 do celular. */
  .v-card.larga,.v-card.alta,.v-card.v-titulo{grid-column:auto;grid-row:auto;}

  /* bolinhas do carrossel */
  .vant-dots{display:flex;justify-content:center;gap:8px;margin-top:20px;}
  .vant-dot{
    width:8px;height:8px;border-radius:50%;border:none;padding:0;
    background:var(--muted);opacity:.4;cursor:pointer;
    transition:opacity .3s var(--ease),transform .3s var(--ease),background .3s var(--ease);
  }
  .vant-dot.ativo{opacity:1;background:var(--purple-1);transform:scale(1.25);}
}
@media(min-width:961px){
  .vant-dots{display:none;}
}

/* fora do media query: no desktop a seta/leia-mais some por completo, e a
   quebra manual do slogan também — lá o texto já quebra bem sozinho. */
@media (min-width:961px){
  .leia-mais-btn{display:none;}
}
@media (min-width:761px){
  .quebra-mob{display:none;}
}
@media (max-width:760px){
  /* quebra manual do slogan (texto em i18n.js, chave foot.slogan): força
     "Performance é" / "o segredo do jogo." em duas linhas, sem deixar o
     "é" sozinho numa terceira. */
  .quebra-mob{display:block;}
}

/* Fundo do degradê do "leia mais" varia com a seção por trás dele — sem
   isso o degradê usaria --paper em toda parte e destoaria do fundo real. */
.markets .jc-colapsavel{--jc-fundo:var(--white);}
.parc-hero .jc-colapsavel,
.parc-bloco .jc-colapsavel{--jc-fundo:var(--black);}

/* --- FAIXA DE LOGOS: SEMPRE ESCURA --------------------------------------
   Decisão do Marco: a faixa não acompanha o tema. Fica escura no claro e
   no escuro — só os logos (filtro em faixa.css) continuam iguais nos dois,
   já pensados pra esse fundo escuro. Vale em qualquer largura de tela. */
html.tema-claro .faixa{
  background:#08080a;
}

/* Chrome/Safari on iPhone: plain visible slogan, exactly two authored lines. */
@media (max-width:760px){
  .intro-slogan{width:100% !important;max-width:none !important;text-wrap:wrap !important;white-space:normal !important;visibility:visible !important;line-height:.9 !important;}
  .intro-slogan[data-linemask] .w{transform:none !important;}
}