/* ============================================================= RESPONSIVE FIX - douglasvilar.com.br Correcoes universais de responsividade sem quebrar o design atual Aplicado em todas as paginas via injecao no ============================================================= */ /* 1. IMPEDE OVERFLOW HORIZONTAL (principal causa de "cortar informacao") */ html, body { overflow-x: hidden !important; max-width: 100vw !important; } *, *::before, *::after { max-width: 100%; word-wrap: break-word; overflow-wrap: break-word; } /* 2. IMAGENS SEMPRE RESPONSIVAS */ img, video, iframe, svg { max-width: 100% !important; height: auto; display: block; } /* 3. TIPOGRAFIA FLUIDA - texto se adapta em vez de cortar */ h1 { font-size: clamp(1.75rem, 4vw + 0.5rem, 3.5rem) !important; line-height: 1.2 !important; } h2 { font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem) !important; line-height: 1.25 !important; } h3 { font-size: clamp(1.25rem, 2vw + 0.5rem, 1.875rem) !important; line-height: 1.3 !important; } h4 { font-size: clamp(1.125rem, 1.5vw + 0.5rem, 1.5rem) !important; line-height: 1.35 !important; } p, li { font-size: clamp(0.95rem, 0.5vw + 0.85rem, 1.125rem) !important; line-height: 1.65 !important; } /* 4. CONTAINER FLUIDO - 95% em telas pequenas, maximo 1280px em grandes */ .container, [class*="container"], .wrap, .wrapper, .content-wrap, main > div, section > div { max-width: min(1280px, 95vw) !important; margin-left: auto !important; margin-right: auto !important; padding-left: clamp(1rem, 3vw, 2rem) !important; padding-right: clamp(1rem, 3vw, 2rem) !important; box-sizing: border-box !important; } /* 5. SECOES COM ESPACAMENTO FLUIDO */ section { padding-top: clamp(2rem, 6vw, 5rem) !important; padding-bottom: clamp(2rem, 6vw, 5rem) !important; } /* 6. GRIDS AUTO-RESPONSIVOS - nao quebram em nenhuma tela */ .areas-grid, .empresa-content, .gallery, .podcasts-grid, .depoimentos-grid, .content-grid, .news-grid, [class*="-grid"] { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important; gap: clamp(1rem, 2vw, 2rem) !important; } /* 7. BOTOES NUNCA CORTAM */ button, .btn, .cta-btn, [class*="button"], a.btn { white-space: normal !important; word-break: keep-all !important; min-height: 44px; padding: clamp(0.5rem, 1vw, 0.875rem) clamp(1rem, 2vw, 1.75rem) !important; } /* 8. TABELAS COM SCROLL HORIZONTAL QUANDO MUITO LARGAS */ table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } /* 9. NAV MENU - MOBILE (hamburguer corrige em telas pequenas) */ @media (max-width: 900px) { .nav-menu, nav ul, .menu-items { flex-wrap: wrap !important; justify-content: center !important; } } /* 10. BREAKPOINT EXTRA - TABLETS (828px iPad Mini - 1024px iPad) */ @media (min-width: 828px) and (max-width: 1024px) { .container, [class*="container"] { max-width: 92vw !important; } } /* 11. BREAKPOINT EXTRA - MOBILES PEQUENOS (< 375px) */ @media (max-width: 375px) { h1 { font-size: 1.5rem !important; } h2 { font-size: 1.25rem !important; } .header-inner, .header-top, header { padding: 0.75rem !important; } .top-nav a { font-size: 0.7rem !important; padding: 4px 10px !important; } } /* 12. BREAKPOINT EXTRA - ULTRA WIDE (> 1600px) - centraliza e nao deixa esticar demais */ @media (min-width: 1600px) { .container, [class*="container"] { max-width: 1400px !important; } body { font-size: 17px; } } /* 13. DESKTOP 4K (> 2400px) */ @media (min-width: 2400px) { html { font-size: 20px; } .container { max-width: 1600px !important; } } /* 14. GALERIA DE IMAGENS - SEMPRE PROPORCIONAL */ .gallery-item, .gallery img { aspect-ratio: 4 / 3; object-fit: cover; } /* 15. CORRIGE PADDING DO BODY (deixa respirar nas bordas) */ @media (max-width: 640px) { body { padding-left: 0 !important; padding-right: 0 !important; } section, .section { padding-left: 1rem !important; padding-right: 1rem !important; } } /* 16. ZOOM - Impede quebra quando usuario da zoom no navegador */ @supports (zoom: 1) { body { zoom: 1; } } /* 17. SMOOTH SCROLL E COMPORTAMENTO DE SCROLL */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } /* 18. FORMULARIOS E INPUTS - NUNCA FICAM CORTADOS */ input, textarea, select { max-width: 100% !important; box-sizing: border-box !important; font-size: max(16px, 1rem) !important; /* previne zoom automatico no iOS */ } /* 19. LIGHTBOX E MODAIS */ .lightbox-content, .modal-content, [class*="lightbox"] { max-width: 95vw !important; max-height: 95vh !important; } /* 20. IMPRESSAO - usuario pode imprimir qualquer pagina limpa */ @media print { .top-nav, .header-contact, .btn-whatsapp-header, nav, .nav-menu, button, .btn, .footer, footer { display: none !important; } body { color: #000 !important; background: #fff !important; } }