/* ============================================================
   RESPONSIVO — Atividades & Saberes
   Carregado depois do style.css. Ajusta o site inteiro para
   tablet e celular e reduz efeitos pesados (anti-travamento).
   ============================================================ */

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
img { max-width: 100%; height: auto; }
body { overflow-x: hidden; }

/* Em telas de toque, remove hovers/transformações que causam
   repaint e "engasgos" ao rolar */
@media (hover: none) {
  .card-produto, .categoria-card, .btn, .gerx-btn, .lx-passo {
    transition: none !important;
  }
  .card-produto:hover, .categoria-card:hover, .btn:hover,
  .gerx-btn:hover, .lx-passo:hover {
    transform: none !important;
  }
}

/* ============================================================
   TABLET (até 980px)
   ============================================================ */
@media (max-width: 980px) {
  .topo { padding: 10px 16px; }
  .logo img { height: 64px; }
  .logo span { font-size: 19px; }

  .categorias-grid { grid-template-columns: repeat(3, 1fr); }
  .produtos-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

  .gerx-card { padding: 30px 26px; }
  .lx-passos { grid-template-columns: 1fr 1fr; }
  .lx-passos .lx-passo:last-child { grid-column: 1 / -1; }
}

/* ============================================================
   CELULAR (até 680px)
   ============================================================ */
@media (max-width: 680px) {
  /* Sombras mais leves = rolagem mais fluida */
  .card-produto, .categoria-card, .admin-card, .gerx-card,
  .lx-passo, .lx-plano-card, .lx-conf, .lx-faq details {
    box-shadow: 0 4px 14px rgba(20,33,61,.10) !important;
  }
  /* O fundo pontilhado do hero pesa em celulares modestos */
  .hero::before { display: none; }
  .hero { padding: 38px 16px 52px; }
  .hero h1 { font-size: 26px; }
  .hero p { font-size: 15px; }
  .hero .selo { font-size: 12px; }

  .logo img { height: 42px; }
  .logo span { font-size: 17px; }

  /* Categorias em 2 colunas, cartões compactos */
  .categorias-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .categoria-card { padding: 14px 10px; }
  .categoria-card .icone-wrap img { height: 64px; }

  /* Busca empilhada, campos com dedo confortável */
  .busca-form, .filtros { flex-direction: column; align-items: stretch; }
  .busca-form input, .busca-form select, .busca-form button,
  .filtros input, .filtros select, .filtros button {
    width: 100%; box-sizing: border-box; min-height: 46px; font-size: 16px;
  }

  .produtos-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .card-produto h3 { font-size: 14.5px; }

  .container { padding-left: 14px; padding-right: 14px; }
  .secao-titulo h2 { font-size: 20px; }

  /* Carrinho: itens empilham em vez de estourar a largura */
  .carrinho-item { flex-wrap: wrap; gap: 10px; }
  .carrinho-item img { width: 64px; height: 64px; object-fit: cover; }
  .carrinho-item .qtd input { width: 70px; }

  /* Tabelas nunca estouram a tela */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Botões principais ocupam a largura toda (fácil de tocar) */
  .btn, .btn-whatsapp, .btn-secundario { width: 100%; box-sizing: border-box; text-align: center; }

  /* Banner do gerador */
  .gerx { margin-top: 16px; }
  .gerx-card { padding: 24px 18px; border-radius: 16px; }
  .gerx h2 { font-size: 23px; }
  .gerx p.lead { font-size: 15px; }
  .gerx-chips span { font-size: 12px; padding: 5px 10px; }
  .gerx-acoes { flex-direction: column; }
  .gerx-btn { width: 100%; box-sizing: border-box; text-align: center; }

  /* Seções da landing */
  .lx-passos { grid-template-columns: 1fr; }
  .lx-passos .lx-passo:last-child { grid-column: auto; }
  .lx-plano-card { padding: 24px 20px; }
  .lx-plano-card .preco { font-size: 34px; }
  .lx-plano-card a { display: block; text-align: center; }
  .lx-conf { padding: 20px 18px; }
  .lx-faq summary { font-size: 14.5px; padding: 14px 16px; }

  /* Página do produto */
  .produto-detalhe { grid-template-columns: 1fr !important; }
}

/* ============================================================
   CELULAR PEQUENO (até 400px)
   ============================================================ */
@media (max-width: 400px) {
  .categorias-grid, .produtos-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .logo span { display: none; } /* só o logotipo, sem o texto */
  .hero h1 { font-size: 23px; }
}