/* 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%; }
}