/* Layout mobile forcado para index-mobile.html, independente da largura da janela. */
body.mobile-page .menu-btn { display: inline-flex !important; }
body.mobile-page .topbar .nav-links,
body.mobile-page .topbar .search-wrap,
body.mobile-page .topbar .nav-cluster { display: none !important; }
body.mobile-page .topbar .nav-links.open,
body.mobile-page .topbar .search-wrap.open,
body.mobile-page .topbar .nav-cluster.open {
  display: flex !important;
  position: absolute;
  left: 0;
  right: 0;
  top: var(--header);
  background: var(--bg);
  box-shadow: var(--shadow);
  border-bottom: 1px solid var(--line);
  padding: 12px 24px 18px;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
body.mobile-page .topbar .search-wrap.open { top: calc(var(--header) + 168px); padding-bottom: 20px; }
body.mobile-page .topbar .nav-cluster.open .nav-links,
body.mobile-page .topbar .nav-cluster.open .topbar-actions {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}
body.mobile-page .topbar-inner { padding: 0 16px; gap: 16px; }

body.mobile-page .hero-banner-wrap img { display: none; }
body.mobile-page .hero-overlay {
  position: static;
  display: block;
  padding: 20px 20px 24px;
  background: var(--bg-soft);
  border-radius: 24px;
}
body.mobile-page .hero-tagline { flex: none; margin-bottom: 18px; gap: 10px; }
body.mobile-page .hero-tagline h2 { font-size: 1.15rem; }
body.mobile-page .hero-tagline p { font-size: 0.85rem; }
body.mobile-page .hero-tagline .tag-bar { width: 34px; }
body.mobile-page .hero-main h1 { font-size: 2.1rem; margin-bottom: 12px; }
body.mobile-page .hero-main .lead { font-size: 0.95rem; }
body.mobile-page .feature-row { gap: 18px; margin-top: 20px; }
body.mobile-page .feature-item { max-width: 150px; gap: 10px; }
body.mobile-page .feature-icon { width: 36px; height: 36px; }
body.mobile-page .feature-item strong { font-size: 0.82rem; }
body.mobile-page .feature-item span { font-size: 0.73rem; }

body.mobile-page .hero-search { max-width: none; padding: 6px 6px 6px 18px; margin-top: 20px; }
body.mobile-page .hero-search svg { width: 18px; height: 18px; }
body.mobile-page .hero-search input { font-size: 0.98rem; padding: 12px 10px; }
body.mobile-page .hero-search .btn { padding: 12px 24px; font-size: 1rem; }

body.mobile-page .hero,
body.mobile-page .editorial,
body.mobile-page .deal,
body.mobile-page .how,
body.mobile-page .grid,
body.mobile-page .site-footer,
body.mobile-page .compare-grid,
body.mobile-page .compare-grid-h,
body.mobile-page .trust-bar,
body.mobile-page .rank-card,
body.mobile-page .procon-grid,
body.mobile-page .ranking-strip { grid-template-columns: 1fr !important; }

body.mobile-page .grid { gap: 14px; }
body.mobile-page .hero { padding-top: 28px; gap: 22px; }
body.mobile-page .hero h1 { font-size: 2.2rem; }
body.mobile-page .deal-visual img { height: 280px; }
body.mobile-page .deal-panel { position: static; }
body.mobile-page .product-art img { height: 220px; }
body.mobile-page .site-footer { padding-bottom: 90px; }
body.mobile-page .page { padding: 0 16px 70px; }

body.mobile-page .compare-grid { gap: 14px; }
body.mobile-page .trust-bar { padding: 18px; gap: 16px; }
body.mobile-page .editorial { padding: 20px; grid-template-columns: 1fr !important; text-align: left; }
body.mobile-page .editorial .btn { width: 100%; }

/* alvos de toque maiores no celular */
body.mobile-page .btn { min-height: 46px; }
body.mobile-page .chip { padding: 10px 14px; min-height: 40px; }
body.mobile-page .section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
body.mobile-page .compare-head { flex-direction: column; align-items: flex-start; gap: 10px; }

body.mobile-page .cookie {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  border-radius: 16px 16px 0 0;
  display: none;
}
body.mobile-page .cookie.show {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}
body.mobile-page .cookie p { margin: 0; font-size: 0.8rem; }
body.mobile-page.cookie-on { padding-bottom: 88px; }

.view-switch {
  display: block;
  text-align: center;
  color: var(--muted);
  text-decoration: underline;
  font-size: 0.82rem;
  margin-top: 4px;
}
.view-switch:hover { color: var(--text); }