/* ═══════════════════════════════════════════════════════════════
nudge-mobile.css — camada responsiva compartilhada
═══════════════════════════════════════════════════════════════
REQUISITO DE PRODUTO: o site é 100% mobile. Toda página pública
precisa funcionar num celular de 360px de largura, sem rolagem
horizontal e sem nada cortado.
Carregue este arquivo por ÚLTIMO no de qualquer página nova:
Regras aqui vivem sempre dentro de @media, então o desktop não muda.
Atributos style="" inline vencem CSS externo, por isso alguns pontos
precisam de !important — estão marcados.
Breakpoints:
900px → tablet e celular grande: colunas duplas viram simples
560px → celular: tudo em coluna única, respiro lateral de 16px
═══════════════════════════════════════════════════════════════ */
/* ───────────────────────────────────────────────
1. SEGURANÇA GLOBAL — nada pode vazar da tela
─────────────────────────────────────────────── */
@media (max-width: 900px) {
html, body {
overflow-x: hidden;
max-width: 100%;
}
img, svg, video, iframe, canvas, table, pre {
max-width: 100%;
}
img, svg, video { height: auto; }
/* Palavras longas (e-mail, URL, nome de plano) não empurram o layout */
h1, h2, h3, p, li, td, th, label, button, a { overflow-wrap: anywhere; }
}
/* ───────────────────────────────────────────────
2. CONTAINERS COMUNS a aprenda / sobre / preencher / posvendas
─────────────────────────────────────────────── */
@media (max-width: 900px) {
.page { padding-left: 24px !important; padding-right: 24px !important; }
.section { padding-top: 56px !important; padding-bottom: 56px !important; }
.hero-sub { max-width: 100% !important; }
.section-lead { max-width: 100% !important; margin-bottom: 32px !important; }
}
@media (max-width: 560px) {
.page { padding-left: 16px !important; padding-right: 16px !important; }
.section { padding-top: 40px !important; padding-bottom: 40px !important; }
}
/* ───────────────────────────────────────────────
3. GRIDS — colapso progressivo
─────────────────────────────────────────────── */
@media (max-width: 900px) {
/* três ou mais colunas nunca cabem em tablet */
.market-grid, .problema-grid, .wiz-intent-grid, .how-steps,
.testi-grid, .contrat-grid, .plan-inner, .results-inner {
grid-template-columns: minmax(0, 1fr) !important;
}
/* tabelas em grid: cabeçalho fixo não faz sentido empilhado */
.dt-head { display: none !important; }
.dt-row { grid-template-columns: minmax(0, 1fr) !important; gap: 4px !important; padding: 14px 0 !important; }
}
@media (max-width: 560px) {
.myth-grid, .v-cards, .sobre-split, .pme-features, .dif-grid, .comp-grid,
.hero-inner, .notis-grid, .compare-inner, .human-inner, .guia-grid,
.pv-grid, .footer-top {
grid-template-columns: minmax(0, 1fr) !important;
}
}
/* ───────────────────────────────────────────────
4. NAVEGAÇÃO E RODAPÉ
─────────────────────────────────────────────── */
@media (max-width: 900px) {
.nav, .navbar {
padding-left: 16px !important;
padding-right: 16px !important;
}
/* links de menu que não cabem passam a rolar em vez de quebrar a barra */
.nav-links {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
white-space: nowrap;
}
.nav-links::-webkit-scrollbar { display: none; }
}
@media (max-width: 560px) {
.footer-top { gap: 28px !important; }
.footer-legal { max-width: 100% !important; }
}
/* ───────────────────────────────────────────────
5. ALVOS DE TOQUE — mínimo confortável no dedo
─────────────────────────────────────────────── */
@media (max-width: 900px) {
button, .btn, .btn-cta, .btn-diag, .btn-login, input[type="submit"] {
min-height: 44px;
}
/* O "−" das faixas etárias é um badge dentro de um card que já é o alvo de
toque (52px). Forçar 44px nele o deformava numa elipse. */
.fx-menos {
min-height: 0;
min-width: 0;
}
input, select, textarea {
min-height: 44px;
/* 16px evita o zoom automático do iOS ao focar o campo */
font-size: 16px !important;
}
}
/* ───────────────────────────────────────────────
6. TELA DE RESULTADO — barras fixas
As duas barras usam padding lateral de 52-80px em style inline
e layout horizontal com quatro blocos: estouram abaixo de 400px.
─────────────────────────────────────────────── */
@media (max-width: 900px) {
#hero-sticky-bar {
padding: 12px 16px !important;
gap: 12px !important;
}
#barra-preco-atual { padding-left: 16px !important; padding-right: 16px !important; }
#barra-preco-atual .bpa-inner { gap: 12px !important; flex-wrap: wrap; }
}
@media (max-width: 560px) {
#hero-sticky-bar,
#barra-preco-atual .bpa-inner {
flex-direction: column !important;
align-items: stretch !important;
text-align: center;
}
#hero-sticky-bar > *,
#barra-preco-atual .bpa-inner > * { width: 100%; }
/* separador vertical não faz sentido com os blocos empilhados */
.bpa-sep { display: none !important; }
.bpa-dica { font-size: 0.8rem !important; }
/* a barra fica mais alta empilhada: devolve o espaço ao final da página.
Escopado: só a tela de resultado tem essas barras fixas. */
body.pagina-resultado { padding-bottom: 148px !important; }
}
/* ───────────────────────────────────────────────
7. MODAIS — a largura já é fluida (width:100% + max-width).
O que falta é altura: num celular baixo o conteúdo passa da tela
e o botão de confirmar fica inalcançável.
─────────────────────────────────────────────── */
@media (max-height: 760px), (max-width: 560px) {
.esp-modal, .esp-modal-body {
max-height: 86vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
}
/* ───────────────────────────────────────────────
8. TABELAS LARGAS — rolam sozinhas em vez de esticar a página
─────────────────────────────────────────────── */
@media (max-width: 560px) {
table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* ───────────────────────────────────────────────
9. CORREÇÕES POR PÁGINA — apuradas medindo o layout
em Chromium 360x740. Cada bloco resolve um elemento
que estava sendo cortado pela borda da tela.
─────────────────────────────────────────────── */
@media (max-width: 900px) {
/* home e landing: o hero é grid de 2 colunas; sem minmax(0,…) a coluna
cresce até o min-content do título e empurra tudo para fora */
.hero { grid-template-columns: minmax(0, 1fr) !important; }
.hero-inner { grid-template-columns: minmax(0, 1fr) !important; }
.hero-left, .hero-copy, .hero-right { min-width: 0 !important; max-width: 100% !important; }
/* landing: 48px de padding lateral consomem 96px de uma tela de 360 */
.hero { padding-left: 16px !important; padding-right: 16px !important; }
nav .nav-right { flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
/* portal do cliente: o grid da sidebar também precisa poder encolher */
.app-layout { grid-template-columns: minmax(0, 1fr) !important; }
.sidebar, .main-content { min-width: 0 !important; max-width: 100% !important; }
/* pós-vendas: o mockup do portal tem linhas em flex sem quebra */
.pm-reaj-top, .pm-reaj-body, .pm-val-wrap { flex-wrap: wrap !important; min-width: 0 !important; }
.portal-main, .portal-main > * { min-width: 0 !important; }
}
/* Linhas em flex que não quebravam e grids de 3 colunas dentro do hero.
Todas medidas em 360px: sem estas regras o conteúdo some na borda. */
@media (max-width: 900px) {
/* home */
.hj-row, .hero-contrat, .hero-stats { flex-wrap: wrap !important; justify-content: center; }
.hj-row > *, .hero-contrat > *, .hero-stats > * { min-width: 0 !important; }
.modelo-grid { grid-template-columns: minmax(0, 1fr) !important; }
.modelo-col, .modelo-inner { min-width: 0 !important; max-width: 100% !important; }
/* a seta do meio do comparativo não faz sentido com as colunas empilhadas */
.modelo-grid > .modelo-arrow, .modelo-grid > .modelo-vs { display: none !important; }
/* pós-vendas: o mockup do portal é uma sequência de linhas em flex */
.pm-reaj-top, .pm-reaj-title, .pm-reaj-btns, .pm-neg-body, .pm-negativa,
.pm-btn, .portal-wrap {
flex-wrap: wrap !important;
min-width: 0 !important;
max-width: 100% !important;
}
.pm-reaj-top { align-items: flex-start !important; gap: 6px; }
/* landing */
.wizard-section { padding-left: 16px !important; padding-right: 16px !important; }
.hstat { flex: 1 1 100% !important; min-width: 0 !important; }
}
/* ───────────────────────────────────────────────
10. REGRA GERAL DE QUEBRA
A causa de quase todo corte no celular é a mesma: linha em flex com
três ou mais filhos e sem quebra. Em vez de listar classe por classe,
a quebra passa a ser o padrão no celular.
flex-wrap num elemento que não é flex simplesmente não faz nada,
então a regra é segura mesmo alcançando muito seletor.
Exceções: trilhos de carrossel e as faixas que rolam de propósito.
─────────────────────────────────────────────── */
@media (max-width: 560px) {
body :not(.nav-links):not(.sidebar-nav):not([id$="-carousel-track"]) {
flex-wrap: wrap;
}
/* A regra acima é segura em flex de LINHA, mas não em flex de COLUNA: ali
o wrap manda o navegador quebrar o conteúdo em colunas e inflar a altura.
Era o caso do bloco de idades, que ganhava 348px de espaço morto.
Só seletor de ID vence a regra guarda-chuva: com os três :not() ela soma
(0,3,1), então uma classe como .df (0,1,0) perderia. Os outros blocos do
formulário seguem em wrap e isso não faz mal — o wrap só infla quem tem
altura restringida. Se um dia outro bloco inflar, promova-o a ID aqui em
vez de acrescentar uma classe que não vai vencer. */
#ages-wrapper, #faixas-wrapper { flex-wrap: nowrap; }
/* filho de flex só encolhe abaixo do conteúdo com min-width:0 */
body [class*="grid"] > *,
body [class*="row"] > *,
body [class*="stat"] > *,
body [class*="card"] > * {
min-width: 0;
}
/* carrosséis continuam em linha única e rolando */
#fam-carousel-track, #upgr-carousel-track, #down-carousel-track {
flex-wrap: nowrap !important;
}
}
/* ───────────────────────────────────────────────
11. GRIDS DECLARADOS EM style="" INLINE
Boa parte do layout deste projeto está em atributo style, que vence
qualquer folha externa. Só um seletor de atributo com !important alcança.
Cobre as duas grafias, com e sem espaço depois dos dois-pontos.
─────────────────────────────────────────────── */
@media (max-width: 900px) {
[style*="grid-template-columns:repeat(3"],
[style*="grid-template-columns: repeat(3"],
[style*="grid-template-columns:repeat(4"],
[style*="grid-template-columns: repeat(4"],
[style*="grid-template-columns:1fr 1fr 1fr"],
[style*="grid-template-columns: 1fr 1fr 1fr"],
.modelo-insight {
grid-template-columns: minmax(0, 1fr) !important;
}
}
@media (max-width: 560px) {
[style*="grid-template-columns:repeat(2"],
[style*="grid-template-columns: repeat(2"],
[style*="grid-template-columns:1fr 1fr"],
[style*="grid-template-columns: 1fr 1fr"] {
grid-template-columns: minmax(0, 1fr) !important;
}
/* flex-shrink:0 inline impede o elemento de caber; no celular ele cede */
[style*="flex-shrink:0"], [style*="flex-shrink: 0"], .pm-sup-btns {
flex-shrink: 1 !important;
flex-wrap: wrap !important;
min-width: 0 !important;
}
/* mockups de largura fixa nunca passam da tela */
.mockup-frame, .portal-wrap, .browser-content { max-width: 100% !important; }
}
/* ───────────────────────────────────────────────
12. INVENTÁRIO COMPLETO DOS GRIDS POR CLASSE
Levantados de todas as páginas públicas. Colapsam por quantidade
de colunas: 3+ já em tablet, 2 só no celular.
Ao criar um grid novo, acrescente à lista certa daqui.
─────────────────────────────────────────────── */
@media (max-width: 900px) {
.comparacao-grid,
.contrat-grid,
.dt-head,
.dt-row,
.footer-top,
.footer-trust,
.how-steps,
.market-grid,
.pm-stats,
.problema-grid,
.testi-grid,
.plan-details-grid,
.plan-inner,
.results-inner,
.portal-wrap,
.app-layout,
.modelo-insight,
.modelo-grid {
grid-template-columns: minmax(0, 1fr) !important;
}
/* 48px de padding lateral em telas de 360 não sobra nada para o conteúdo */
.footer-trust, .wizard-section, .modelo-section { padding-left: 16px !important; padding-right: 16px !important; }
}
@media (max-width: 560px) {
.benefit-card,
.benefits-grid,
.clube-grid,
.comp-grid,
.compare-inner,
.coverage-grid,
.df-row,
.dif-grid,
.hero-inner,
.human-inner,
.myth-grid,
.notis-grid,
.options-grid,
.pme-features,
.sobre-split,
.v-cards,
.guia-grid,
.pv-grid,
.hero {
grid-template-columns: minmax(0, 1fr) !important;
}
}
/* ───────────────────────────────────────────────
13. BARRA DE NAVEGAÇÃO NO CELULAR
A nav é uma linha só de 66px com logo, cinco links e dois botões.
Em 360px isso não cabe: vira duas linhas, com os links rolando.
Linha 1: logo e ações. Linha 2: os links, deslizando na horizontal.
─────────────────────────────────────────────── */
@media (max-width: 900px) {
nav#nav, body > nav {
height: auto !important;
min-height: 0;
padding: 8px 16px 6px !important;
flex-wrap: wrap !important;
row-gap: 4px;
align-items: center;
}
nav#nav .logo, body > nav .logo { font-size: 1.15rem; }
/* Nem toda página termina a nav com uma