/* ========================================================================== MOBILE.CSS — camada de otimizacao SO para telas <=900px. Este arquivo NUNCA edita styles.css: e carregado DEPOIS dele e toda regra aqui vive dentro de @media (max-width:900px), entao a versao desktop fica 100% intocavel (confirmado: nenhuma regra deste arquivo roda acima de 900px de largura de viewport). Objetivo: corrigir bugs reais de mobile encontrados na auditoria do codigo (nav estourando, imagem cortada errado, celular do #como sem respiro, cards de foto grande demais na faixa 561-900px, tabela de precos apertada, etc) — sem alterar o desktop. ========================================================================== */ @media (max-width: 900px) { /* -------------------------------------------------------------------- NAV: com logo 72px + "Entrar" + "Começar Grátis" + hamburguer, o pill estoura a largura em telas de ~320-400px (conta: padding + logo + 2 botoes + toggle passa de 400px de conteudo pedido pra caber em ~330- 360px reais). Aperta tudo pra caber com folga. -------------------------------------------------------------------- */ .nav { gap: 10px; padding: 12px 4% 12px 4%; } .brand img { width: 42px; height: 42px; border-radius: 9px; } .nav-cta { gap: 8px; } .nav .btn-sm { padding: 8px 14px; font-size: 13px; } .nav-toggle { padding: 6px; } /* menu dropdown: a posicao fixa "top:62px" foi calibrada pra uma nav mais baixa; com o padding/logo atuais pode abrir sobreposta ao pill. Troca por top:100% (sempre cola exatamente embaixo do nav, seja qual for a altura dele) em vez de um numero fixo. */ .nav.open .nav-links { top: 100%; margin-top: 8px; } /* telas bem estreitas (~360px e menos): tira o "Entrar" (CTA secundario, sem destino real) pra sobrar espaco pro essencial. */ @media (max-width: 380px) { .nav-cta .btn-ghost { display: none; } } /* -------------------------------------------------------------------- HERO: a logo do hero usa clamp(220px, 22vw, 320px) — o minimo de 220px e grande demais pra tela de celular (220px num viewport de 360px domina o hero sozinho). Da um teto proprio pro mobile. -------------------------------------------------------------------- */ .hero-badge img { width: clamp(120px, 34vw, 200px); height: clamp(120px, 34vw, 200px); } /* -------------------------------------------------------------------- O PROBLEMA / PRA QUEM E: os cards com foto grande "estourando" pra fora do card (feat-ic-photo / feat-ic-photo-wide) so tem versao pequena a partir de 560px. Entre 561-900px (celular grande deitado, tablet estreito, grid ainda em 2 colunas) a foto no tamanho desktop nao cabe no card e vaza. Usa o mesmo tamanho reduzido ja em 900px. -------------------------------------------------------------------- */ .feat-ic-photo { width: 150px; height: 150px; margin: -75px auto 16px; border-radius: 22px; } .feat-ic-photo-wide { width: 240px; height: 135px; margin: -68px auto 10px; } .feat-grid.cols-3, .feat-grid.cols-4 { margin-top: 66px; } /* BUG CONFIRMADO (print do usuario): quando os cards empilham em 1 coluna, a foto que "estoura" pra cima do card (margin-top negativo) invade o card ANTERIOR, porque o espaco entre cards (gap:20px, do desktop) e bem menor que o quanto a foto sobe (-68px/-75px). O texto de um card fica coberto pela foto do proximo. Aumenta o gap so quando a grade esta em 1 coluna, pra sobrar espaco pra foto "flutuar" sem tocar no card de cima. */ .feat-grid.cols-3 { gap: 92px; } /* cols-4 fica em 2 colunas de 561 a 900px (regra do proprio styles.css); mesmo bug de colisao foto/card acontece aqui verticalmente entre as 2 fileiras — precisa de row-gap grande o bastante pra foto (150px, -75px de overhang) da fileira de baixo nao encostar na de cima. */ .feat-grid.cols-4 { row-gap: 100px; column-gap: 20px; } /* "Pra quem é" (cols-4, 4 cards): pedido do usuario — manter 2x2 (lado a lado) tambem no celular, em vez de empilhar 1 por linha. Ja que o card fica bem mais estreito em 2 colunas, encolhe a foto/padding pra caber, e usa gap com linha (vertical) grande o bastante pra foto da 2a fileira nao encostar no card de cima (mesmo bug do fix anterior). */ @media (max-width: 560px) { .feat-grid.cols-4 { grid-template-columns: repeat(2, 1fr); column-gap: 14px; row-gap: 78px; } .feat-grid.cols-4 .feat-card { padding: 16px 10px; text-align: center; } .feat-grid.cols-4 .feat-ic-photo { width: 90%; height: auto; aspect-ratio: 1 / 1; margin: -64px auto 10px; border-radius: 16px; } .feat-grid.cols-4 .feat-card h3 { font-size: 14.5px; margin-bottom: 5px; } .feat-grid.cols-4 .feat-card p { font-size: 12.5px; } } /* -------------------------------------------------------------------- #COMO: o celular (.sc-phone) ja encolhe (max-width:100%), mas o padding lateral de .como-visual (0 34px) + o padding do container deixa pouquissimo espaco pro celular em telas de 360-390px, e o texto das bolhas (fonte fixa em px, decidido de proposito pra nao esticar no desktop) fica desproporcional quando o celular encolhe muito. Reduz o padding lateral e volta o texto a escalar com o tamanho real do celular (container query em cqw) so aqui no mobile. -------------------------------------------------------------------- */ .como-visual { padding: 0 8px; } .sc-phone { width: 250px; } .bub { font-size: 3.2cqw; } .bub .t { font-size: 2.32cqw; } .doc-ic { width: 9cqw; height: 9cqw; } .doc-meta .dn { font-size: 2.92cqw; } .doc-meta .ds { font-size: 2.4cqw; } .wa-btn { font-size: 2.92cqw; } .bub.log .log-h { font-size: 2.92cqw; } .bub.log .log-h img { width: 3.8cqw; height: 3.8cqw; } .bub.log .log-l { font-size: 2.4cqw; } /* -------------------------------------------------------------------- PRECOS: o grid de 2 planos lado a lado (.pricing-panel-v2) so quebra pra 1 coluna em <=560px. Entre 561-680px os 2 cards ficam espremidos (texto e preco quebrando estranho). Antecipa a quebra pra 1 coluna. -------------------------------------------------------------------- */ @media (max-width: 680px) { .pricing-panel-v2 { grid-template-columns: 1fr; grid-template-rows: none; max-width: 380px; } .pricing-panel-v2 .plan { grid-row: auto; display: flex; flex-direction: column; } } /* -------------------------------------------------------------------- DOWNLOAD (CTA final): a margem negativa de -70px foi calibrada pra "enterrar" a pontinha cortada dos tentaculos quando a imagem esta enorme (ate 1380px) no desktop. No mobile a imagem renderiza bem menor (a mesma largura de tela toda), entao -70px fixos cortam uma fatia proporcionalmente enorme da imagem (as vezes ate o celular). Reduz a margem pro tamanho real que a imagem tem no mobile. -------------------------------------------------------------------- */ .download-phone { margin-bottom: -18px; } /* -------------------------------------------------------------------- Ajuste fino de respiro geral: com o container padding-inline padrao (24px) telas muito estreitas (<=380px) ficam com pouca folga lateral nos textos/paragrafos mais longos. Reduz soh nesse extremo. -------------------------------------------------------------------- */ @media (max-width: 380px) { .container { padding-inline: 18px; } } /* -------------------------------------------------------------------- O PROBLEMA (3 cards): #como, #quality e #faq centralizam tudo quando empilham no mobile, mas o grid de 3 cards ("O Problema") vira 2 colunas entre 561-900px — 2 cards em cima, o 3o sozinho embaixo do 1o, com um vao vazio do lado. Fica torto. Pula direto pra 1 coluna (sem a fase intermediaria de 2 colunas com sobra). -------------------------------------------------------------------- */ /* minmax(0,1fr): mesmo padrao de bug ja documentado acima (baloes); nao manifestou overflow real aqui hoje, mas evita o mesmo risco no futuro. */ .feat-grid.cols-3 { grid-template-columns: minmax(0, 1fr); max-width: 420px; margin-inline: auto; } /* -------------------------------------------------------------------- CONSISTENCIA DE ALINHAMENTO: #como, #quality e #faq centralizam o texto quando a secao empilha no mobile, mas #recursos (mascote com baloes) e #precos (lista de beneficios) ficavam com o texto colado na esquerda, sem max-width, enquanto o resto da secao (mascote, planos) fica centralizado — quebra a simetria entre secoes. Alinha todo mundo no mesmo padrao: centralizado, como bloco, igual as outras. -------------------------------------------------------------------- */ .feat-text { text-align: center; } .feat-text > p { margin-inline: auto; } .feat-panel { max-width: 420px; margin: 0 auto; text-align: left; } .pf-head { text-align: center; } .pf-head p { margin-inline: auto; } .pf-list { max-width: 420px; margin: 0 auto; } .quality-info > p { max-width: 480px; margin-inline: auto; } /* -------------------------------------------------------------------- BALOES DO #RECURSOS (fc1-fc6): BUG CONFIRMADO (print do usuario) — as posicoes antigas usavam left/right NEGATIVOS (ex: right:-6%), o que empurra o balao pra FORA da largura do container. Isso fazia a PAGINA INTEIRA ganhar barra de rolagem horizontal (visivel em qualquer secao, nao so aqui). Troca pra valores sempre >=0 (balao fica encostado na borda do mascote, nunca vazando pra fora dela). -------------------------------------------------------------------- */ .fc1 { top: 2%; left: 2%; } .fc2 { top: 2%; right: 2%; } .fc3 { top: 42%; left: 0%; } .fc4 { top: 42%; right: 0%; } .fc5 { bottom: 4%; left: 2%; } .fc6 { bottom: 4%; right: 2%; } /* rede de seguranca extra: garante que nada consegue empurrar a largura da pagina alem do viewport no mobile, mesmo se algum outro elemento escapar. */ html { overflow-x: hidden; max-width: 100%; } body { max-width: 100%; } }