/*! * MADMIX — mobile.css * Version : 1.0.0 * Created : 2026-05-16 * * Complementa o style.css existente (não substitui). * Inclua APÓS style.css no : * * * Escopo: correções e melhorias exclusivas para mobile (≤ 767px). * Organização: * 1. Reset de overflow global * 2. NAV * 3. HERO — tipografia + cortes + botões + credenciais * 4. SEÇÕES — padding e densidade * 5. MERCADO * 6. ARC * 7. PARA QUEM * 8. SERVIÇOS * 9. QUEM SOMOS * 10. PROCESSO * 11. CONTATO / CTA FINAL * 12. FOOTER * 13. LEAD STRIP (Fase 1) * 14. STICKY CTA (Fase 1) */ /* ══════════════════════════════════════════════ 1. RESET DE OVERFLOW GLOBAL ══════════════════════════════════════════════ */ @media (max-width: 767px) { html, body { overflow-x: hidden; max-width: 100vw; } /* Garante que nenhum elemento filho estoure o viewport */ *:not(#sticky-cta):not(.mobile-nav) { max-width: 100%; } /* ══════════════════════════════════════════════ 2. NAV ══════════════════════════════════════════════ */ nav#main-nav { height: 64px; padding: 0 5vw; } .nav-logo { /* já centralizado pelo style.css — apenas ajusta tamanho */ } .nav-logo img { height: 38px; } /* ══════════════════════════════════════════════ 3. HERO ══════════════════════════════════════════════ */ #hero { min-height: 100svh; padding: 5.5rem 5vw 3.5rem; align-items: flex-start; /* Garante que o conteúdo não escapa do padding */ box-sizing: border-box; width: 100%; } .hero-grid { grid-template-columns: 1fr; gap: 0; width: 100%; min-width: 0; } /* Div pai dos elementos do hero — essencial para conter filhos em grid */ .hero-left { width: 100%; min-width: 0; overflow: hidden; box-sizing: border-box; } /* Tag de contexto acima do h1 */ .hero-tag { font-size: 0.6rem; letter-spacing: 0.16em; margin-bottom: 1.2rem; white-space: normal; overflow-wrap: break-word; word-break: break-word; max-width: 100%; } /* Subtítulo "A ATENÇÃO VIROU RECEITA." */ .hero-slogan { font-size: 0.68rem; letter-spacing: 0.12em; margin-bottom: 1rem; white-space: normal; overflow-wrap: break-word; max-width: 100%; } /* H1 principal — FIX DO CORTE */ h1.hero-h1 { font-size: clamp(2.9rem, 13.5vw, 4.8rem); line-height: 0.92; letter-spacing: 0.01em; margin-bottom: 1.6rem; overflow-wrap: break-word; word-break: break-word; hyphens: auto; max-width: 100%; } /* Parágrafo descritivo abaixo do h1 */ .hero-sub { font-size: 0.9rem; line-height: 1.75; margin-bottom: 2rem; max-width: 100%; width: 100%; box-sizing: border-box; overflow-wrap: break-word; word-break: break-word; color: var(--gray3); } /* CTAs do hero */ .hero-ctas { flex-direction: column; gap: 0.75rem; align-items: stretch; width: 100%; } .btn-primary, .btn-ghost { width: 100%; justify-content: center; text-align: center; padding: 0.95rem 1.2rem; font-size: 0.75rem; letter-spacing: 0.08em; white-space: normal; overflow-wrap: break-word; word-break: break-word; box-sizing: border-box; } /* Credenciais "EXPERIÊNCIA EM SAMSUNG · LG · ..." */ .hero-creds { font-size: 0.58rem; letter-spacing: 0.08em; margin-top: 1.4rem; gap: 0.3rem 0.4rem; line-height: 1.6; max-width: 100%; width: 100%; box-sizing: border-box; overflow-wrap: break-word; word-break: break-word; /* Remove overflow:hidden que cortava o texto */ overflow: visible; } /* Stats (86M · 3° · 40+) */ .hero-stats { margin-top: 2rem; padding-top: 1.8rem; gap: 1.5rem; flex-wrap: wrap; } .stat-num { font-size: 2rem; } .stat-label { font-size: 0.6rem; } /* Oculta o lado direito (diagrama SVG) em mobile pequeno — já oculto em 600px no style.css */ .hero-side { display: none; } /* ══════════════════════════════════════════════ 4. SEÇÕES — PADDING E DENSIDADE ══════════════════════════════════════════════ */ /* * style.css define section { padding: 6.5rem 5vw }. * Em mobile isso é 104px topo/baixo — muito espaço. * Reduzimos para 3.5rem (56px) — ainda respirado, mas mais denso. */ section { padding: 3.5rem 5vw; } .section-tag { font-size: 0.6rem; letter-spacing: 0.2em; margin-bottom: 1rem; } h2.section-h2 { font-size: clamp(1.8rem, 8vw, 2.8rem); line-height: 1; margin-bottom: 0.8rem; max-width: 100%; overflow-wrap: break-word; word-break: break-word; } /* ══════════════════════════════════════════════ 5. MERCADO ══════════════════════════════════════════════ */ .mercado-grid { gap: 2.5rem; margin-top: 2.5rem; } .fact-num { font-size: 2.2rem; } .fact-text { font-size: 0.8rem; } /* ══════════════════════════════════════════════ 6. FRAMEWORK ARC ══════════════════════════════════════════════ */ .arc-header { margin-bottom: 2rem; } .arc-stage { padding: 1.8rem 1.4rem; } .arc-stage-num { font-size: 2.5rem; margin-bottom: 0.6rem; } .arc-stage-title { font-size: 1.15rem; } .arc-stage-desc { font-size: 0.82rem; } .arc-cta-row { padding: 1.4rem 0 0; gap: 1.2rem; } .arc-cta-row .btn-primary { width: 100%; justify-content: center; white-space: normal; text-align: center; box-sizing: border-box; } /* ══════════════════════════════════════════════ 7. PARA QUEM ══════════════════════════════════════════════ */ .paraquem-intro { font-size: 0.88rem; margin-bottom: 2rem; } .paraquem-grid { grid-template-columns: 1fr; gap: 1rem; } .paraquem-card { padding: 1.6rem; flex-direction: row; gap: 1rem; } .paraquem-title { font-size: 1.2rem; } .paraquem-dor { font-size: 0.84rem; } .paraquem-list li { font-size: 0.78rem; } /* ══════════════════════════════════════════════ 8. SERVIÇOS ══════════════════════════════════════════════ */ .servicos-intro-grid { gap: 2rem; margin-bottom: 2.5rem; } .pillar-group { margin-bottom: 2.5rem; } .servico-card { padding: 1.5rem; } .servico-title { font-size: 1.15rem; } .servico-desc { font-size: 0.82rem; } /* ══════════════════════════════════════════════ 9. QUEM SOMOS ══════════════════════════════════════════════ */ .qs-header { margin-bottom: 2rem; } .qs-photo-side { min-height: 260px; } .qs-founder { padding: 1.6rem 1.4rem; } .qs-founder-name { font-size: 1.5rem; } .qs-years { font-size: 1.6rem; } .qs-bio { font-size: 0.8rem; line-height: 1.7; } .qs-creds { gap: 0.3rem; } .qs-cred-tag { font-size: 0.58rem; padding: 0.2rem 0.5rem; } .qs-closing { margin-top: 2rem; padding: 1.8rem; } .qs-closing-text { font-size: 0.88rem; } /* ══════════════════════════════════════════════ 10. PROCESSO ══════════════════════════════════════════════ */ .processo-step { padding: 1.8rem 1.4rem; } .step-num { font-size: 3rem; margin-bottom: 1rem; } .step-title { font-size: 1.2rem; } .step-desc { font-size: 0.82rem; } /* ══════════════════════════════════════════════ 11. CONTATO / CTA FINAL ══════════════════════════════════════════════ */ #contato { padding: 3.5rem 5vw; } h2.cta-h2 { font-size: clamp(2rem, 10vw, 3.2rem); line-height: 0.95; overflow-wrap: break-word; word-break: break-word; } .cta-sub { font-size: 0.88rem; margin-bottom: 2rem; } .cta-buttons { flex-direction: column; align-items: stretch; gap: 0.75rem; } .btn-whatsapp { width: 100%; justify-content: center; padding: 1rem 1.5rem; font-size: 0.78rem; white-space: normal; text-align: center; box-sizing: border-box; } /* Form de contato */ .form-section { padding-top: 2rem; margin-top: 2rem; } .contact-form { gap: 0.85rem; } .form-row { grid-template-columns: 1fr; gap: 0.85rem; } .btn-form-submit { width: 100%; padding: 0.95rem 1.5rem; } /* ══════════════════════════════════════════════ 11B. DAI — ícones SVG e cards ══════════════════════════════════════════════ */ .dai-cap { padding: 1.4rem 1.2rem; gap: 8px; } /* Ícone: reduz levemente em telas pequenas */ .dai-cap-icon { width: 36px; height: 36px; padding: 7px; border-radius: 7px; } .dai-cap-icon svg { width: 20px; height: 20px; } .dai-cap-title { font-size: 0.9rem; } .dai-cap-desc { font-size: 0.8rem; } /* Card full-width (Orquestração) — ícone inline com texto em mobile */ .dai-cap--full { flex-direction: row; align-items: flex-start; gap: 14px; } .dai-cap--full .dai-cap-icon { flex-shrink: 0; margin-bottom: 0; } /* ══════════════════════════════════════════════ 12. FOOTER ══════════════════════════════════════════════ */ .footer-col { padding: 2rem 5vw; } .footer-brand-logo img { max-height: 48px; } .footer-slogan { font-size: 0.82rem; } /* ══════════════════════════════════════════════ 13. LEAD STRIP (Fase 1) ══════════════════════════════════════════════ */ #lead-strip { padding: 20px 5vw; } .lead-strip-inner { flex-direction: column; gap: 14px; align-items: flex-start; } .lead-strip-content strong { font-size: 0.9rem; } .lead-strip-content span { font-size: 0.78rem; } .lead-strip-form { width: 100%; flex-direction: column; gap: 8px; } .lead-strip-form input[type=email], .lead-strip-form button { width: 100%; box-sizing: border-box; } /* ══════════════════════════════════════════════ 14. STICKY CTA (Fase 1) — já está bem, apenas reforça padding seguro em notch ══════════════════════════════════════════════ */ #sticky-cta { /* safe-area-inset para iPhone com notch/Dynamic Island */ padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); } } /* fim @media (max-width: 767px) */ /* ══════════════════════════════════════════════ BREAKPOINT INTERMEDIÁRIO 768px–900px (tablets em portrait — já tratados no style.css, mas reforçamos os cortes de texto) ══════════════════════════════════════════════ */ @media (min-width: 768px) and (max-width: 900px) { h1.hero-h1 { font-size: clamp(3.2rem, 8vw, 5rem); overflow-wrap: break-word; word-break: break-word; } .hero-creds { white-space: normal; overflow: hidden; max-width: 100%; } .btn-primary, .btn-ghost, .btn-whatsapp { white-space: normal; overflow-wrap: break-word; } }