/* ============================================================ OndeParo — Mobile Responsive Overrides Adicione este arquivo no , após os outros CSS: ============================================================ */ /* ---------- Reset de base ---------- */ *, *::before, *::after { box-sizing: border-box; } img { max-width: 100%; height: auto; } /* ---------- Seções gerais ---------- */ section { min-height: unset !important; } /* ============================================================ HERO — Seção 1 ============================================================ */ @media (max-width: 768px) { .planeje { margin-top: 25% !important; } /* Hero principal */ section.vh-100:first-of-type .row.py-lg-7 { padding-top: 6rem !important; padding-bottom: 2rem !important; } section.vh-100:first-of-type .col-lg-8 { width: 100% !important; padding: 0 1rem; } .h1k { font-size: 26px !important; line-height: 1.3; } section.vh-100:first-of-type h2.fw-light { font-size: 16px !important; margin-bottom: 20px !important; } section.vh-100:first-of-type .vh-100 { height: auto !important; min-height: 100svh; } } /* ============================================================ SEÇÃO 2 — Sobre o OndeParo (texto + imagem lado a lado) ============================================================ */ @media (max-width: 768px) { /* Row com display flex inline */ .position-relative.z-index-1.py-5 .row[style*="justify-content: space-between"] { flex-direction: column !important; } /* Parágrafo de texto */ .mediap { font-size: 17px !important; } /* Imagem lateral — vira full width embaixo */ .col-lg-6.pe-0[style*="width: 40%"] { width: 100% !important; padding: 0 !important; margin-top: 1.5rem; } .col-lg-6.pe-0[style*="width: 40%"] img { border-radius: 0 !important; max-height: 260px !important; width: 100% !important; object-fit: cover; } /* Padding das seções */ .px-lg-8 { padding-left: 1rem !important; padding-right: 1rem !important; } .px-lg-6 { padding-left: 1rem !important; padding-right: 1rem !important; } .px-lg-7 { padding-left: 1rem !important; padding-right: 1rem !important; } } /* ============================================================ SEÇÃO 3 — Copiloto com IA (mockup + texto) ============================================================ */ @media (max-width: 768px) { /* Título e subtítulo centralizados */ [style*="width: 75%"] { width: 100% !important; padding: 0 1rem; } /* Flex row vira coluna */ .d-flex.align-items-center.justify-content-evenly { flex-direction: column !important; align-items: center !important; } /* Mockup do celular */ .d-flex.align-items-center.justify-content-evenly > div:first-child img { height: 360px !important; width: auto !important; display: block; margin: 0 auto; } /* Coluna de texto do copiloto */ .d-flex.align-items-center.justify-content-evenly .col-lg-6.pe-0[style*="width: 40%"] { width: 100% !important; padding: 0 1rem !important; margin-top: 1.5rem; } /* Imagens de mic */ .d-flex.align-items-center.justify-content-evenly .col-lg-6.pe-0 img { width: 100% !important; } /* Títulos da seção */ .d-flex.align-items-center.justify-content-evenly h4 { font-size: 15px !important; } } /* ============================================================ SEÇÃO 4 — Vitrine para estabelecimentos (imagem + texto) ============================================================ */ @media (max-width: 768px) { .row.align-items-center.justify-content-b { flex-direction: column !important; } /* Imagem lateral esquerda */ .col-lg-5.pe-0 { width: 100% !important; padding: 0 !important; } .col-lg-5.pe-0 img.borderk { max-height: 240px !important; width: 100% !important; border-radius: 0 !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* Texto da vitrine */ .col-lg-7.order-lg-2 { width: 100% !important; order: 2 !important; } .col-lg-7.order-lg-2 .px-lg-7 { padding: 1rem !important; } } /* ============================================================ SEÇÃO 5 — Transmissão mobile (texto + imagem) ============================================================ */ @media (max-width: 768px) { /* Já herda o fix do justify-content: space-between acima */ .col-lg-7 { width: 100% !important; } } /* ============================================================ SEÇÃO 6 — Filtros (mockup menor + ícones) ============================================================ */ @media (max-width: 768px) { .d-flex.align-items-center.justify-content-center.gap-11 { flex-direction: column !important; align-items: center !important; gap: 1.5rem !important; } /* Mockup */ .d-flex.align-items-center.justify-content-center.gap-11 > div:first-child img { height: 280px !important; } /* Grid de ícones */ .d-flex.align-items-center.justify-content-center.gap-11 .col-lg-6[style*="width: 30%"] { width: 100% !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 0.5rem; flex-direction: row !important; } } /* ============================================================ SEÇÃO 7 — Banner CTA verde ============================================================ */ @media (max-width: 768px) { [style*="background-color: #76b735"] h3 { font-size: 20px !important; padding: 0 1rem; } } /* ============================================================ SEÇÃO 8 — Formulário de contato ============================================================ */ @media (max-width: 768px) { /* Container com bg-image */ [style*="background-image"][style*="border-radius: 20px"] { flex-direction: column !important; justify-content: center !important; margin: 10px !important; border-radius: 14px !important; } /* Box do formulário — full width */ [style*="background-image"][style*="border-radius: 20px"] > div[style*="width: 50%"] { width: 100% !important; padding: 2rem 1.5rem !important; } #hire { font-size: 20px !important; } #sendBtn { width: 100% !important; } } /* ============================================================ FOOTER ============================================================ */ @media (max-width: 768px) { .mediafooter { flex-direction: column !important; align-items: center !important; gap: 2rem; } .mediafooter .col-md-4 { width: 100% !important; text-align: center !important; } .mediafooter img { max-width: 160px !important; } } /* ============================================================ UTILITÁRIOS GERAIS — mobile ============================================================ */ @media (max-width: 768px) { /* Padding vertical das seções */ .py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; } .py-9 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .py-lg-11 { padding-top: 2rem !important; padding-bottom: 2rem !important; } /* Tipografia geral */ h4 { font-size: 16px !important; } p, .mediap { font-size: 15px !important; } /* Overflow lateral */ body { overflow-x: hidden; } /* vh-100 em mobile — usa altura real da tela */ .vh-100 { height: 100svh !important; min-height: 500px; } }