/* custom.css — ajustes proprios (carregado DEPOIS do CSS original).
   Mantemos o CSS extraido intacto; aqui ficam as melhorias de responsividade
   e pequenos polimentos. Bom para o rebrand: tudo nosso fica num lugar so. */

/* ---- Grade de apps (Hot Apps / busca / categorias) ----
   O original usa 6 colunas no desktop e 4 ate em telas pequenas, o que
   aperta demais os cards no celular. Refinamos os breakpoints. */
@media (max-width: 1100px) { :root { --section-column: 5; } }
@media (max-width: 880px)  { :root { --section-column: 4; } }
@media (max-width: 640px)  { :root { --section-column: 3; } }  /* mobile = 3 apps por linha */

/* Em telas menores os cards de app ficam mais compactos: padding, icone,
   titulo e estrelas menores, pra caber 3 por linha e reduzir a rolagem. */
@media (max-width: 880px) { .section-content li { padding: 14px 12px; } }
@media (max-width: 640px) {
  .section-content li { padding: 9px 7px; }
  .section-content .card-vertical .information { gap: 2px; }
  .section-content .card-vertical .information-text .title { font-size: 12.5px; line-height: 1.25; }
  .section-content .card-vertical .information-text .developer { font-size: 10.5px; line-height: 1.3; }
  .section-content .card-vertical .star img { width: 11px !important; height: 11px !important; }
  .section-content .card-vertical .grade .score { font-size: 10.5px; }
  .section-content .card-vertical .icon { border-radius: 12px; }
}

/* Hot Categories: 5 -> 3 -> 2 conforme estreita */
@media (max-width: 760px) {
  .top-category .section-content { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .top-category .section-content { grid-template-columns: repeat(2, 1fr); }
}

/* Editor Choice: 2 colunas -> 1 em telas estreitas (evita texto espremido) */
@media (max-width: 720px) {
  .choice-content { grid-template-columns: 1fr; }
}

/* ---- Paginas institucionais (About / Disclaimer / Terms / Privacy / Contact) ---- */
.legal-page { width: 100%; max-width: 820px; margin: 0 auto; background: #fff; border-radius: 16px;
  padding: 28px 30px 36px; box-sizing: border-box; }
.legal-page h1 { font-size: 30px; font-weight: 700; color: #0b1b3b; margin: 0 0 6px; }
.legal-page .legal-updated { font-size: 13px; color: #8a8a8a; margin: 0 0 18px; }
.legal-body h2 { font-size: 20px; font-weight: 600; color: #111; margin: 24px 0 8px; }
.legal-body p { font-size: 16px; line-height: 1.8; color: #3a3a3a; margin: 0 0 12px; }
.legal-body ul { margin: 6px 0 14px; padding-left: 22px; }
.legal-body li { font-size: 16px; line-height: 1.7; color: #444; margin-bottom: 8px; }
.legal-body a { color: #2380ff; text-decoration: none; }
.legal-body a:hover { text-decoration: underline; }
.legal-body .contact-email { margin: 6px 0 4px; }
.legal-body .contact-btn { display: inline-block; background: #2380ff; color: #fff !important; font-weight: 600;
  padding: 12px 22px; border-radius: 24px; text-decoration: none; }
.legal-body .contact-btn:hover { background: #1668e0; text-decoration: none; }
@media (max-width: 560px) { .legal-page { padding: 20px 16px 28px; } .legal-page h1 { font-size: 25px; } }

/* ---- Marca PUROAPPS (selo + wordmark, sem logo em imagem) ---- */
.brand { display: inline-flex; align-items: center; gap: 0.36em; font-weight: 800;
  letter-spacing: -0.5px; white-space: nowrap; line-height: 1; }
.brand-mark { display: inline-flex; align-items: center; }
.brand-svg { display: block; width: 1.18em; height: 1.18em;
  filter: drop-shadow(0 3px 6px rgba(35, 128, 255, 0.30)); }
.brand-text { display: inline-flex; align-items: baseline; }
.brand .brand-a { background: linear-gradient(90deg, #2b8bff, #12c2c9);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #2380ff; }
.brand .brand-b { color: #0b1b3b; }
header #logo .brand { font-size: 25px; }
footer .info .logo .brand { font-size: 24px; }
/* logo do rodape centralizada */
footer .info .logo { width: auto; max-width: none; color: inherit; text-decoration: none;
  justify-content: center; margin-bottom: 1.4rem; }
@media (max-width: 420px) { header #logo .brand { font-size: 21px; } }

/* ---- Rodape responsivo: links nao encostam nas bordas no mobile ---- */
footer .info { padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
footer .info .info-group { flex-wrap: wrap; justify-content: center; row-gap: 10px; column-gap: 1.2rem; }
@media (max-width: 560px) {
  footer .info .info-group { column-gap: 16px; row-gap: 12px; }
  footer .info .info-group a { font-size: 15px; }
}

/* ---- Conteudo de texto (P1) — um pouco maior e mais arejado ---- */
.review-content { font-size: 16px; line-height: 1.75; color: #3a3a3a; }
.review-content ul { margin: 8px 0 0; padding-left: 22px; }
.review-content li { list-style: disc; font-size: 15.5px; line-height: 1.6; color: #555; margin-bottom: 9px; }
#main .section h5 { margin-bottom: 8px; }

/* ---- App Download Information (P2) — tom de mini-artigo ---- */
#faq .faq-intro { font-size: 15px; color: #777; margin: 2px 0 12px; }
#faq .faq-item { margin-top: 18px; }
#faq .faq-q { font-size: 17px; font-weight: 600; color: #111; margin-bottom: 6px; }
#faq .faq-a { font-size: 16px; line-height: 1.85; color: #3a3a3a; }

/* ---- Screenshots: faixa de rolagem horizontal (sem swiper JS) ----
   O carrossel original depende de JS; aqui viram screenshots numa linha
   rolavel, com altura fixa, estilo loja de apps. */
#screenshots .swiper { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
#screenshots .swiper-wrapper { display: flex; gap: 10px; height: auto; }
#screenshots .swiper-slide { flex: 0 0 auto; width: auto; height: auto; }
#screenshots .swiper-slide .preview-image,
#screenshots .swiper-slide .image-box { width: auto; height: auto; padding-bottom: 0; }
#screenshots .swiper-slide img.image-content {
  position: static; display: block; height: 280px; width: auto; max-height: 280px;
  border-radius: 12px; border: 1px solid rgba(0,0,0,.08);
}

/* ---- "More Apps" (recommend-list): grade FLUIDA com cards de tamanho fixo ----
   O original fixa 5 colunas; ao reduzir colunas no mobile os cards ficavam
   largos e os icones (que ocupam 100% do card) estouravam de tamanho.
   Com auto-fill + minmax os cards tem ~104-132px em qualquer largura,
   mantendo os icones num tamanho de "loja de apps". */
.recommend-list {
  grid-template-columns: repeat(auto-fill, minmax(104px, 132px)) !important;
  gap: 12px !important;
  justify-content: start;
}
/* trava de seguranca: o icone do card nunca passa de ~120px */
.recommend-list .card-vertical .icon { width: 100%; max-width: 120px; margin-left: auto; margin-right: auto; }

/* itens do grid podem encolher (evita colunas desiguais por texto longo) */
.recommend-list li { min-width: 0; }
.recommend-list .card-vertical .information,
.recommend-list .card-vertical .information-text { min-width: 0; max-width: 100%; }
.recommend-list .card-vertical .title,
.recommend-list .card-vertical .developer { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* No mobile, "More Apps" em grade fixa de 3 colunas (3x3 com 9 apps) */
@media (max-width: 640px) {
  .recommend-list { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ---- Cabecalho responsivo ----
   O original usa gap de 80px e busca em 35%, o que joga "Games" pra fora da
   tela no celular. Compactamos o header e a busca em telas menores. */
@media (max-width: 760px) {
  header { padding-left: 14px; padding-right: 14px; }
  header .rtl { gap: 16px; }
  header .rtl .field-container { width: auto; max-width: 120px; margin-left: 0; flex: 0 1 auto; }
  header .rtl a { font-size: 14px; }
}
@media (max-width: 400px) {
  header .rtl .field-container { display: none; } /* busca some; sobra espaco p/ Apps/Games */
}

/* Paginas de detalhe/download: o grid #app (conteudo + aside 300px) vira
   uma coluna so no mobile, com o aside indo pro fim. */
@media (max-width: 900px) {
  #app { grid-template-columns: 1fr !important; }
  #aside { width: 100%; }
}

/* ---- Espacos de anuncio (Spun) ----------------------------------------
   A Spun NAO cria uma div propria para o anuncio: o script procura o PRIMEIRO
   elemento da pagina que casa com o seletor configurado no painel dela e
   transforma esse elemento no container do anuncio. Como o painel apontava
   para ".info-main" (o card do app), "#stat" (a tabela de dados) e
   ".info-card", o anuncio engolia o conteudo do site — e quando o anuncio vinha
   sem preenchimento, o script aplicava display:none e sumia com o conteudo.

   As divs .ad-slot abaixo sao containers VAZIOS que vem ANTES do conteudo real
   e casam com esses mesmos seletores. Assim a Spun se fixa neles e nao toca
   mais no conteudo. Se um dia o painel mudar de seletor, basta ajustar as
   classes/ids aqui e no server.js (procure por "ad-slot"). */

.ad-slot:not(:empty) {
  width: 100%; box-sizing: border-box; overflow: hidden;
  text-align: center; margin: 8px 0;
}
.ad-slot.ad-sidebar:not(:empty) { margin: 0 0 12px; }

/* NAO REINTRODUZIR display:none NOS SLOTS DE ANUNCIO.
   Ate agosto/2026 havia aqui tres regras que escondiam a isca enquanto ela
   estivesse vazia (.ad-slot:empty, #main #info-card .ad-slot:empty e
   .sp-ad-wrapper:has(.ad-slot:empty), todas com display:none !important).
   O time de tech da Spun pediu a remocao: um slot com display:none tem
   bounding box 0x0, entao o lazy load do GPT (fetchMarginPercent 50) nunca
   enxerga o slot entrando no viewport e a requisicao de anuncio nao acontece.
   Custo de tirar: com o slot vazio a Spun escreve style="display:inline-block"
   nele, e um inline-block vazio gera uma linha de texto (~21px), mais o gap do
   flex — um respiro vazio no card enquanto nao ha anuncio. Foi uma troca
   deliberada: preferimos o espaco vazio a bloquear a venda do anuncio. */

/* ---- Slot "Topo": o anuncio mora DENTRO do box do card, abaixo das infos ----
   Mesmo arranjo do allofapk (o CSS herdado ja previa isso em .ads-box/.main-ads-1):
   informacoes em cima, anuncio embaixo ocupando a largura do box — assim cabem os
   9 formatos que a Spun pede, inclusive os largos (728x90, 970x250).

   A isca precisa vir ANTES do .info-main real no HTML, senao o querySelector da
   Spun voltaria a pegar o card de verdade. Por isso a ordem VISUAL e feita com
   `order`, e nao pela ordem do DOM. */
#main #info-card .info-card-row { display: flex; flex-direction: column; gap: 16px; }
#main #info-card .info-card-row > .info-main:not(.ad-slot) { order: 1; }

/* com anuncio: faixa de largura total abaixo das informacoes.
   O !important vence o style="width:100%" que a Spun poe inline no wrapper. */
#main #info-card .info-card-row > .ad-slot,
#main #info-card .info-card-row > .sp-ad-wrapper {
  order: 2; width: 100% !important; max-width: 100%; margin: 0; text-align: center;
}