/* ==========================================================================
   MOBILE-V2.CSS — camada adicional SO para telas <=720px, carregada DEPOIS
   de dark.css. NUNCA edita styles.css/mobile.css/sections.css/dark.css e
   toda regra daqui vive dentro de @media (max-width:720px), entao a versao
   desktop (e a faixa 721-900px ja coberta por mobile.css) fica intocavel.
   NAO mexe na secao #como (outro agente cuida dela em mobile-como.css).
   Cobre: #plataforma (abas + mockup do painel), #publico (carrossel
   automatico), #faq (imagem do robo) e #problema (respiro entre cards).
   ========================================================================== */

/* bolinhas do carrossel de #publico: escondidas por padrao (fora do
   media query), só viram flex dentro de @media (max-width:720px) logo
   abaixo. Sem isso, o <div> aparecia tambem no desktop (display:block
   padrao de navegador para qualquer elemento sem estilo nenhum). */
.pub-dots { display: none; }

@media (max-width: 720px) {

  /* --------------------------------------------------------------------
     PLATAFORMA: as abas (Conversas/Funil/Kanban/IA/Disparo/Meta) quebram
     em varias linhas no celular (flex-wrap:wrap). Vira uma faixa com
     rolagem horizontal suave, uma linha so. O JS (mobile-v2.js) rola a
     aba tocada pro centro da faixa.
     -------------------------------------------------------------------- */
  #plataforma .plat-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin-inline: -24px;
    padding-inline: 24px;
    padding-bottom: 6px;
    mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  }
  #plataforma .plat-tabs::-webkit-scrollbar { display: none; }
  #plataforma .plat-tab { flex: none; white-space: nowrap; scroll-snap-align: start; }

  /* mockup do painel: o JS (fitAll do mockups.js) forca escala minima de
     0.62 e liga rolagem horizontal dentro do painel a partir de 700px de
     largura de CONTAINER, pensado pra tablet/notebook pequeno — no celular
     isso faz o painel (1000px de largura logica) vazar pra fora da tela e
     cortar a interface. mobile-v2.js reescreve a escala so pra esse painel,
     sem piso minimo e sem rolagem, encolhendo o quanto precisar pra caber
     inteiro. Aqui so removemos a dica de "deslize", que deixa de fazer
     sentido sem a rolagem interna. */
  #plataforma .scroll-hint { display: none; }

  /* --------------------------------------------------------------------
     PRA QUEM E (#publico): a faixa ja rola manualmente (scroll-snap, CSS
     de dark.css) em qualquer tamanho; aqui centraliza um card por vez
     (~82vw, com pedaco do proximo aparecendo) e prepara as bolinhas
     indicadoras. O avanco automatico e o clique nas bolinhas ficam em
     mobile-v2.js. So mexe em padding lateral/largura do card: o padding
     vertical (que da espaco pro icone que sai por cima) continua o mesmo
     de dark.css, sem risco de cortar o icone.
     -------------------------------------------------------------------- */
  #publico .feat-grid {
    /* em vw (nao em %), porque a % de padding resolve contra a largura
       do container-pai (que ja tem 24px de respiro pra cada lado), nao
       contra a largura visual do proprio .feat-grid depois do sangramento
       de margin-inline:-24px — usar % aqui descentralizava o card. O
       max() com (100vw - 360px)/2 garante gutter suficiente pro 1o/ultimo
       card ainda conseguirem centralizar quando o card bate no teto de
       360px (telas maiores, perto de 720px). */
    padding-left: max(9vw, calc((100vw - 360px) / 2));
    padding-right: max(9vw, calc((100vw - 360px) / 2));
  }
  #publico .feat-card {
    flex: 0 0 82vw;
    max-width: 360px;
    scroll-snap-align: center;
  }
  .pub-dots {
    display: flex; justify-content: center; align-items: center; gap: 8px;
    margin: 4px 0 0;
  }
  .pub-dot {
    width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 0;
    background: var(--line-2, rgba(255,255,255,.18));
    transition: background .2s ease, transform .2s ease;
  }
  .pub-dot.is-active { background: var(--purple-2, #C4FF00); transform: scale(1.25); }

  /* --------------------------------------------------------------------
     FAQ: a imagem do robo com a interrogacao fica display:none no celular
     (regra de mobile.css/styles.css, herdada do tempo em que so cabia no
     desktop). Mostra de novo, centralizada e pequena, acima das perguntas
     (ela ja e o 1o filho de .faq-flow no HTML, entao so tirar o
     display:none ja poe ela no topo da pilha de 1 coluna).
     -------------------------------------------------------------------- */
  .faq-mascot-img {
    display: block;
    width: 55vw;
    max-width: 240px;
    height: auto;
    margin: 0 auto 24px;
  }

  /* --------------------------------------------------------------------
     O PROBLEMA (3 cards com foto): a foto de cada card "estoura" pra cima
     dele (margin-top negativo, calculado em % da largura do card) — o
     row-gap atual (fixo em px) mal da conta desse estouro em telas mais
     largas (ate 720px, onde o card fica mais largo e a foto estoura mais
     em px), deixando so ~18-20px livres entre o fim de um card e a foto
     do proximo. calc() aqui refaz a mesma conta do estouro (0.28125 da
     largura do conteudo do card, com o mesmo teto de 420px que o card ja
     tem) e soma 32px de folga, pra sobrar sempre ~28-36px visiveis entre
     os cards em qualquer largura de celular. Tambem da um pouco mais de
     respiro interno (texto mais longe da borda de baixo do card). */
  #problema .feat-grid { row-gap: calc(0.28125 * min(100vw - 80px, 388px) + 32px); }
  #problema .feat-card { padding-bottom: 40px; }
}