/* ===================================================== TECNOCOAT — MOBILE FIXES (VERSÃO FINAL) Adicionar APÓS todos os outros CSS no : ORDEM OBRIGATÓRIA: 1. variables.css 2. style.css 3. mobile-improvements.css 4. tecnocoat-final-updates.css 5. mobile-fixes.css ← este arquivo ===================================================== */ /* ===================================================== 0. BASE — OVERFLOW E CONTAINER ===================================================== */ @media (max-width: 768px) { html, body { overflow-x: hidden; max-width: 100%; } .container { padding-left: 16px !important; padding-right: 16px !important; max-width: 100% !important; box-sizing: border-box; } img, video, svg { max-width: 100% !important; height: auto; object-fit: contain; } svg { flex-shrink: 0; } } /* ===================================================== 1. MENU MOBILE Problemas: espaço vazio entre "Soluções" e próximo item; sem indicador de expansão; área de toque pequena ===================================================== */ @media (max-width: 768px) { /* Remove gap invisível do dropdown fechado */ .has-dropdown .dropdown-menu { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; opacity: 0 !important; visibility: hidden !important; } .has-dropdown.is-open .dropdown-menu { padding-top: 4px !important; padding-bottom: 8px !important; margin-top: 4px !important; margin-bottom: 8px !important; opacity: 1 !important; visibility: visible !important; max-height: 1000px !important; } /* Seta indicadora de expansão */ .dropdown-toggle::after { content: " ›"; font-size: 1.1rem; font-weight: 700; color: var(--color-primary); margin-left: 4px; display: inline-block; transition: transform var(--transition-base); } .has-dropdown.is-open .dropdown-toggle::after { transform: rotate(90deg); } /* Links do dropdown com área de toque adequada */ .dropdown-link { display: flex !important; align-items: center !important; padding: 12px 16px !important; font-size: 1rem !important; color: var(--color-text-body) !important; border-bottom: 1px solid rgba(0,0,0,0.05) !important; min-height: 44px !important; } .dropdown-link:last-child { border-bottom: none !important; } .dropdown-link:active { background-color: var(--color-primary-light) !important; } /* Nav links com área de toque mínima */ .nav-link { min-height: 44px !important; display: flex !important; align-items: center !important; padding: 12px 0 !important; font-size: 1.1rem !important; } .nav-menu > li { border-bottom: 1px solid #e5e7eb !important; } .nav-menu > li:last-child { border-bottom: none !important; } .nav-cta { margin-top: 20px !important; border-bottom: none !important; } .btn-orcamento { width: 100% !important; height: 52px !important; font-size: 1rem !important; border-radius: 50px !important; display: flex !important; align-items: center !important; justify-content: center !important; } } /* ===================================================== 2. HERO SLIDER — HOME (primeira dobra) ===================================================== */ @media (max-width: 768px) { .home .hero { height: 50vh !important; min-height: 320px !important; } .home .hero-content { margin-top: 52px !important; margin-left: 0 !important; padding: 0 20px !important; max-width: 100% !important; box-sizing: border-box !important; } .home .hero h1 { font-size: clamp(1.5rem, 5.5vw, 2rem) !important; letter-spacing: -0.5px !important; word-break: break-word; overflow-wrap: break-word; line-height: 1.2 !important; } .home .hero p { font-size: 0.95rem !important; overflow-wrap: break-word; word-break: break-word; margin-bottom: 20px !important; } .home .hero .btn { width: auto !important; max-width: 320px !important; display: inline-flex !important; padding: 14px 28px !important; font-size: 1rem !important; white-space: nowrap; } /* Ocultar dots e mostrar setas no mobile */ .hero-dots { display: none !important; } .hero-arrow { display: flex !important; } } /* ===================================================== 3. CREDIBILITY — números da home Problema: flex-wrap:nowrap !important no tecnocoat-final-updates.css impede quebra de linha ===================================================== */ @media (max-width: 600px) { body .credibility-flex, .credibility .credibility-flex { flex-wrap: wrap !important; gap: 16px !important; justify-content: center !important; } .indicator { flex: 0 0 calc(50% - 8px) !important; text-align: center; } .indicator-value { font-size: 1.8rem !important; line-height: 1 !important; } .indicator-label { font-size: 0.8rem !important; } } @media (max-width: 480px) { body .credibility-flex, .credibility .credibility-flex { gap: 10px !important; } .indicator { flex: 0 0 calc(50% - 6px) !important; } .indicator-value { font-size: 1.6rem !important; } .indicator-label { font-size: 0.75rem !important; letter-spacing: 0 !important; } } /* ===================================================== 4. PROCESS-GRID — "Como atuamos" e "Etapas" Problema: sistema-pre-tratamento usa inline style grid-template-columns:repeat(4,1fr) ===================================================== */ @media (max-width: 768px) { .process-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } .process-section .process-grid, .grid.process-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; display: grid !important; } .process-card { padding: 14px !important; min-width: 0 !important; overflow: hidden; } .process-card h3 { font-size: 0.9rem !important; word-break: break-word; } .process-card p { font-size: 0.82rem !important; word-break: break-word; margin: 0 !important; } } /* ===================================================== 5. AUTHORITY SECTION — imagem com width:150% ===================================================== */ @media (max-width: 900px) { .authority-grid { grid-template-columns: 1fr !important; gap: 32px !important; } .authority-media { order: -1; overflow: hidden; width: 100% !important; } .authority-media img { width: 100% !important; max-width: 100% !important; border-radius: 12px !important; } } @media (max-width: 768px) { .authority { padding: 36px 0 !important; } .authority-content h2 { font-size: clamp(1.4rem, 5vw, 1.8rem) !important; word-break: break-word; margin-bottom: 12px !important; } .authority-lead { font-size: 0.95rem !important; margin-bottom: 12px !important; } .authority-content p { font-size: 0.9rem !important; line-height: 1.6 !important; margin-bottom: 12px !important; word-break: break-word; overflow-wrap: break-word; } } /* ===================================================== 6. CLIENTS GRID ESTÁTICO (Mobile) ===================================================== */ @media (max-width: 768px) { .clients { padding: 40px 0 !important; overflow: hidden !important; display: block !important; /* Desfaz o ocultar */ } .clients-title { font-size: 1.25rem !important; margin-bottom: 32px !important; text-align: center !important; } .clients-slider, .clients-track { display: block !important; width: 100% !important; animation: none !important; /* Remove animação nativa */ transform: none !important; } /* Ocultar o Grupo Clone (Grupo B) para não repetir logos */ .clients-group[aria-hidden="true"] { display: none !important; } /* Transformar o Grupo Original (Grupo A) em uma grade flexível calculada */ .clients-group:not([aria-hidden="true"]) { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; /* Reduzir o gap para caber 4 logos perfeitamente em telas pequenas de celular */ gap: 20px 10px !important; width: 100% !important; margin: 0 !important; padding: 0 16px !important; /* Margem de segurança nas bordas da tela */ } .clients-group img { display: block !important; /* Distribuir 4 colunas: (100% de largura total - 3 gaps de 10px) dividido por 4 */ width: calc((100% - 30px) / 4) !important; height: auto !important; /* Altura adapta pro logo ficar proporcional */ max-height: 40px !important; /* Limite máximo para não ficar feio em tablets */ max-width: none !important; min-width: unset !important; margin: 0 !important; padding: 0 !important; flex-shrink: 0 !important; object-fit: contain !important; } } /* SVG logos sem viewBox — restrição global (desktop + mobile) */ .clients-group img { max-height: 64px; max-width: 140px; width: auto !important; flex-shrink: 0; display: block; } /* ===================================================== 7. DIRECTIONS SECTION — home ===================================================== */ @media (max-width: 768px) { .home-directions { padding: 32px 0 !important; } .directions-grid { grid-template-columns: 1fr !important; gap: 24px !important; } .direction-card { flex-direction: column !important; height: auto !important; } .direction-image img { height: auto !important; aspect-ratio: 16 / 9 !important; } .direction-content { padding: 20px !important; } .direction-content h3 { font-size: 1.125rem !important; margin-bottom: 8px !important; } .direction-content p { font-size: 0.875rem !important; line-height: 1.5 !important; margin: 0 !important; } .direction-cta { font-size: 0.875rem !important; margin-top: 12px !important; } } /* ===================================================== 8. BENEFITS-GRID — "Por que investir na Tecnocoat" ===================================================== */ @media (max-width: 560px) { .benefits-grid { grid-template-columns: 1fr !important; gap: 12px !important; } } /* ===================================================== 9. PAGE HERO — todas as páginas internas ===================================================== */ @media (max-width: 768px) { .page-hero { min-height: auto !important; padding: 40px 0 32px !important; } .page-hero h1 { font-size: clamp(1.5rem, 5.5vw, 2rem) !important; line-height: 1.25 !important; word-break: break-word; margin-bottom: 10px !important; } .page-hero p { font-size: 0.95rem !important; line-height: 1.6 !important; } .page-hero--solutions, .page-hero--institutional { min-height: auto !important; padding: 40px 0 32px !important; } .page-hero-grid { grid-template-columns: auto 1fr !important; gap: 20px !important; align-items: center !important; } .page-hero-logo img { width: 64px !important; height: 64px !important; } .page-hero-contact { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 16px !important; } .page-hero-icon img { width: 48px !important; height: 48px !important; flex-shrink: 0; } .page-hero-text h1 { font-size: clamp(1.3rem, 5vw, 1.7rem) !important; margin-bottom: 6px !important; } .page-hero-text p { font-size: 0.875rem !important; } } @media (max-width: 480px) { .page-hero-contact { flex-direction: column !important; text-align: center !important; align-items: center !important; gap: 12px !important; } .page-hero-text h1 { font-size: clamp(1.3rem, 6vw, 1.6rem) !important; } } /* ===================================================== 10. PRODUCT-INTRO — páginas de produto ===================================================== */ @media (max-width: 768px) { .product-intro { padding: 32px 0 !important; } .product-intro-grid { grid-template-columns: 1fr !important; gap: 24px !important; } .product-intro-media { order: -1; } .product-intro-media img { max-height: 260px !important; object-fit: cover; width: 100% !important; border-radius: 10px !important; } .product-intro-media video { width: 100% !important; height: auto !important; max-height: none !important; aspect-ratio: auto !important; /* landscape video - natural ratio */ object-fit: cover !important; border-radius: 10px !important; } .video-wrapper { width: 100% !important; overflow: hidden !important; border-radius: 10px !important; } .video-wrapper video { width: 100% !important; height: auto !important; max-height: none !important; aspect-ratio: auto !important; /* landscape video - natural ratio */ object-fit: cover !important; } .video-unmute-btn { bottom: 10px !important; right: 10px !important; } .product-intro-content h1 { font-size: clamp(1.5rem, 5.5vw, 2rem) !important; line-height: 1.2 !important; word-break: break-word; margin-bottom: 12px !important; } .product-intro-content .lead { font-size: 1rem !important; font-weight: 500 !important; line-height: 1.6 !important; margin-bottom: 12px !important; } .product-intro-content p:not(.lead) { font-size: 0.875rem !important; line-height: 1.6 !important; margin-bottom: 10px !important; } .product-intro-content .btn { display: inline-flex !important; width: auto !important; max-width: 320px !important; text-align: center !important; padding: 14px 28px !important; } } /* ===================================================== 11. CAROUSELS DE MODELOS (Standard / Premium) ===================================================== */ @media (max-width: 768px) { .models-section { padding: 32px 0 !important; } .models-section h2 { font-size: clamp(1.4rem, 5.5vw, 1.9rem) !important; margin-bottom: 8px !important; text-align: center !important; } .models-section .section-subtitle { font-size: 0.875rem !important; margin-bottom: 24px !important; text-align: center !important; } .models-carousel-wrapper { margin-bottom: 32px !important; } .product-carousel { overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; } .product-carousel-track { display: flex !important; gap: 16px !important; padding: 4px 4px 12px !important; width: max-content; } .model-card { min-width: calc(85vw - 32px) !important; max-width: calc(85vw - 32px) !important; flex-shrink: 0 !important; scroll-snap-align: start; } .model-card-image { height: 200px !important; } .model-card-content { padding: 18px !important; } .model-card-content h3 { font-size: 1.2rem !important; margin-bottom: 4px !important; } .model-card-content .model-subtitle { font-size: 0.85rem !important; margin-bottom: 12px !important; } .model-card-content p { font-size: 0.875rem !important; line-height: 1.55 !important; margin-bottom: 14px !important; } .model-specs { margin-bottom: 16px !important; } .model-specs li { font-size: 0.82rem !important; padding: 7px 0 !important; } .model-card--compact { min-width: calc(75vw - 32px) !important; max-width: calc(75vw - 32px) !important; } .model-card--compact .model-card-image { height: 160px !important; } .model-card--compact .model-card-content { padding: 14px !important; } .model-card--compact .model-card-content h3 { font-size: 1rem !important; } .model-card--compact .model-specs li { font-size: 0.8rem !important; padding: 5px 0 !important; } .carousel-header { font-size: 0.85rem !important; padding: 8px 18px !important; margin-bottom: 20px !important; letter-spacing: 0.3px !important; display: inline-block; max-width: 100%; word-break: break-word; } } /* ===================================================== 12. PRODUCT-CARD (carousel de configurações) Usado em: linha_continua, pre_tratamento, aplicadores, transportadores — alguns sem imagem ===================================================== */ @media (max-width: 768px) { .product-carousel-section { padding: 32px 0 !important; } .product-carousel-section h2 { font-size: clamp(1.4rem, 5.5vw, 1.9rem) !important; margin-bottom: 20px !important; } .product-card { flex: 0 0 calc(83vw - 32px) !important; min-width: calc(83vw - 32px) !important; max-width: calc(83vw - 32px) !important; scroll-snap-align: start !important; background: white !important; border-radius: 10px !important; box-shadow: 0 2px 12px rgba(0,0,0,0.07) !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; } .product-card-image { width: 100% !important; aspect-ratio: 16 / 9 !important; height: auto !important; overflow: hidden !important; background: transparent !important; flex-shrink: 0 !important; } .product-card-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; } .product-card-content { padding: 18px !important; flex: 1 !important; } .product-card-content h3 { font-size: 1.05rem !important; margin-bottom: 8px !important; word-break: break-word !important; } .product-card-content p { font-size: 0.85rem !important; line-height: 1.55 !important; margin-bottom: 12px !important; } .product-features { padding-left: 0 !important; list-style: none !important; } .product-features li { font-size: 0.875rem !important; padding: 6px 0 !important; border-bottom: 1px solid #f0f0f0 !important; display: flex !important; align-items: flex-start !important; gap: 8px !important; } .product-features li:last-child { border-bottom: none !important; } .product-features li::before { content: "✓" !important; color: var(--color-primary) !important; font-weight: 700 !important; flex-shrink: 0 !important; font-size: 0.8rem !important; } } /* ===================================================== 13. TECH-GRID / TECH-CARD Inline style: grid-template-columns e margin-top:60px ===================================================== */ @media (max-width: 768px) { .tech-section { margin-top: 0 !important; padding: 28px 0 !important; } .grid.tech-grid, .tech-grid { grid-template-columns: 1fr !important; gap: 12px !important; margin-top: 20px !important; } .tech-card { padding: 18px !important; } .tech-card h3 { font-size: 1rem !important; margin-bottom: 6px !important; } .tech-card p { font-size: 0.875rem !important; line-height: 1.6 !important; margin: 0 !important; } } /* ===================================================== 14. COMPONENTS-GRID (linha-continua) ===================================================== */ @media (max-width: 768px) { .components-section { margin-top: 0 !important; padding: 28px 0 !important; } .grid.components-grid, .components-grid { grid-template-columns: 1fr !important; gap: 12px !important; margin-top: 20px !important; } .component-card { padding: 18px !important; border-radius: 8px !important; } .component-card h3 { font-size: 1rem !important; margin-bottom: 6px !important; } .component-card p { font-size: 0.875rem !important; line-height: 1.6 !important; margin: 0 !important; } } /* ===================================================== 15. SECTION ANÔNIMA COM INLINE STYLE Diagrama linha-continua: style="padding:60px 0" ===================================================== */ @media (max-width: 768px) { main > section[style*="padding: 60px"], main > section[style*="padding:60px"] { padding: 32px 0 !important; } main > section > .container img { max-width: 100% !important; height: auto !important; border-radius: 8px !important; } } /* ===================================================== 16. SOLUTIONS-CAROUSEL (solucoes.html) ===================================================== */ @media (max-width: 768px) { .solutions-page .page-hero { padding: 36px 0 28px !important; min-height: auto !important; } .solutions-page .page-hero h1 { font-size: clamp(1.5rem, 6vw, 2rem) !important; margin-bottom: 8px !important; } .solutions-page .page-hero p { font-size: 0.9rem !important; } .solutions-carousel { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scroll-snap-type: x mandatory !important; padding-bottom: 8px !important; -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%) !important; mask-image: linear-gradient(to right, black 85%, transparent 100%) !important; } .solutions-track { display: flex !important; gap: 14px !important; padding: 4px 0 8px !important; width: max-content !important; } .solutions-track .solution-card { flex: 0 0 calc(80vw - 32px) !important; min-width: calc(80vw - 32px) !important; max-width: calc(80vw - 32px) !important; scroll-snap-align: start !important; display: flex !important; flex-direction: column !important; padding: 0 !important; /* anula o padding: 20px da regra genérica mobile */ } .solutions-track .solution-card img { width: 100% !important; aspect-ratio: 16 / 9 !important; height: auto !important; object-fit: cover !important; background: transparent !important; border-radius: 8px 8px 0 0 !important; display: block !important; } .solutions-track .solution-card h3 { font-size: 1rem !important; height: auto !important; /* anula height: 110px do desktop */ min-height: unset !important; padding: 12px 16px 6px !important; margin: 0 !important; display: block !important; /* reseta o -webkit-box do desktop */ -webkit-line-clamp: unset !important; line-clamp: unset !important; overflow: visible !important; } .solutions-track .solution-card p { font-size: 0.85rem !important; padding: 0 16px 16px !important; margin: 0 !important; line-height: 1.5 !important; display: block !important; /* reseta o -webkit-box do desktop */ -webkit-line-clamp: unset !important; line-clamp: unset !important; overflow: visible !important; flex: none !important; } } /* ===================================================== 17. SOLUTION-CARD / SOLUTIONS-GRID Usado em: institucional, contato, solucoes ===================================================== */ @media (max-width: 768px) { .solutions-grid { grid-template-columns: 1fr !important; gap: 14px !important; } .solution-card { padding: 20px !important; } .solution-card .card-icon { width: 28px !important; height: 28px !important; margin-bottom: 12px !important; margin-top: 0 !important; margin-left: 0 !important; } .solution-card h3 { font-size: 1.05rem !important; margin-bottom: 8px !important; } .solution-card p { font-size: 0.875rem !important; line-height: 1.6 !important; margin-bottom: 10px !important; } .solution-card .card-link { font-size: 0.875rem !important; font-weight: 600 !important; color: var(--color-primary) !important; display: inline-block !important; margin-top: 4px !important; } .solution-block { padding: 0 !important; margin-bottom: 0 !important; } .solution-block h2 { font-size: clamp(1.4rem, 5.5vw, 1.9rem) !important; margin-bottom: 8px !important; } .solution-intro { font-size: 0.875rem !important; line-height: 1.6 !important; margin-bottom: 20px !important; } .section-divider { margin: 24px 0 !important; } } /* ===================================================== 18. INSTITUCIONAL — sections aninhadas e leadership ===================================================== */ @media (max-width: 768px) { .institutional-intro { padding: 28px 0 !important; } /* Grid texto+foto da seção Quem Somos: coluna única no mobile */ .institutional-intro .container > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 24px !important; } /* Sections dentro de sections: zera padding extra */ .section .section { padding: 0 !important; } /* Leadership card com inline style grid */ .leadership-card, .leadership-card[style] { display: grid !important; grid-template-columns: 1fr !important; gap: 20px !important; padding: 20px !important; margin-top: 20px !important; } .leadership-section { margin-top: 0 !important; margin-bottom: 0 !important; padding: 24px 0 !important; } .leadership-image { max-width: 120px !important; margin: 0 auto !important; } .leadership-image img { width: 100% !important; aspect-ratio: 1/1 !important; object-fit: cover !important; border-radius: 8px !important; } .leadership-content h3 { font-size: 1.1rem !important; text-align: center !important; } .leadership-content .role { text-align: center !important; font-size: 0.875rem !important; margin-bottom: 10px !important; } .leadership-content p { font-size: 0.85rem !important; line-height: 1.6 !important; text-align: left !important; } } /* ===================================================== 19. FEATURE-CARD / FEATURE-GRID (contato) ===================================================== */ @media (max-width: 768px) { .feature-grid { grid-template-columns: 1fr !important; gap: 12px !important; } .feature-card { padding: 18px !important; } .feature-card h3 { font-size: 1rem !important; margin-bottom: 6px !important; } .feature-card p { font-size: 0.875rem !important; line-height: 1.6 !important; margin: 0 !important; } } /* ===================================================== 20. CTA-SECTION — todas as páginas ===================================================== */ @media (max-width: 768px) { .cta-section { padding: 36px 0 !important; } .cta-section h2 { font-size: clamp(1.3rem, 5vw, 1.7rem) !important; line-height: 1.3 !important; margin-bottom: 10px !important; word-break: break-word; } .cta-section p { font-size: 0.95rem !important; margin-bottom: 20px !important; } .cta-section .btn { display: inline-flex !important; width: auto !important; max-width: 320px !important; white-space: normal !important; text-align: center !important; padding: 14px 28px !important; } } /* ===================================================== 21. CATALOG-SCROLL / CATALOG-TRACK "Conheça Outras Soluções" — final de todas as páginas ===================================================== */ @media (max-width: 768px) { .solutions-catalog { padding: 36px 0 !important; margin-top: 0 !important; } .solutions-catalog h2 { font-size: clamp(1.4rem, 5.5vw, 1.9rem) !important; margin-bottom: 8px !important; text-align: center !important; } .solutions-catalog .section-lead { font-size: 0.875rem !important; margin-bottom: 20px !important; text-align: center !important; } .catalog-scroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding-bottom: 12px !important; } .catalog-track { display: flex !important; gap: 16px !important; padding: 4px 0 8px !important; } .catalog-scroll .catalog-card { min-width: calc(75vw - 32px) !important; max-width: calc(75vw - 32px) !important; flex-shrink: 0 !important; scroll-snap-align: start; } .catalog-card-image { aspect-ratio: 16 / 9 !important; height: auto !important; background: transparent !important; } .catalog-card-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; } .catalog-card-content { padding: 16px !important; } .catalog-card-content h3 { font-size: 1rem !important; margin-bottom: 8px !important; line-height: 1.3 !important; } .catalog-card-content p { font-size: 0.82rem !important; line-height: 1.55 !important; margin-bottom: 12px !important; } .catalog-card-cta { font-size: 0.875rem !important; } .catalog-card-cta svg { width: 14px !important; height: 14px !important; } } /* ===================================================== 22. ESPAÇAMENTOS GERAIS DE SEÇÕES ===================================================== */ @media (max-width: 768px) { body .section, .section { padding: 36px 0 !important; } .section h2 { font-size: clamp(1.4rem, 5.5vw, 1.9rem) !important; line-height: 1.25 !important; margin-bottom: 10px !important; word-break: break-word; } .section h3 { font-size: 1.1rem !important; } .section-subtitle, .section-lead { font-size: 0.9rem !important; line-height: 1.6 !important; margin-bottom: 24px !important; } } /* ===================================================== 23. FOOTER — todas as páginas ===================================================== */ @media (max-width: 768px) { .footer { padding: 40px 0 0 !important; } .footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; text-align: center !important; } .footer-col { align-items: flex-start !important; text-align: left !important; gap: 16px !important; } /* Ocultar a coluna de Soluções (segunda coluna) no mobile */ .footer-col:nth-child(2) { display: none !important; } .footer-brand { max-width: 100% !important; } .footer-brand .logo img { height: 56px !important; width: auto !important; margin: 0 !important; display: block !important; } .footer-brand p { font-size: 0.875rem !important; line-height: 1.6 !important; text-align: left !important; } .footer h4 { font-size: 0.85rem !important; letter-spacing: 0.5px !important; margin-bottom: 4px !important; } .footer ul { gap: 12px !important; align-items: flex-start !important; } .footer a { font-size: 0.9rem !important; } .footer-contact p { display: flex !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 8px !important; text-align: left !important; font-size: 0.875rem !important; line-height: 1.5 !important; margin: 0 0 16px !important; width: 100% !important; } .footer-contact svg { flex-shrink: 0 !important; margin-top: 2px !important; } .footer-finance-logos { display: flex !important; flex-wrap: wrap !important; justify-content: flex-start !important; align-items: center !important; gap: 16px !important; } .footer-finance-logos img { height: 36px !important; width: auto !important; object-fit: contain !important; } .footer-bottom { margin-top: 32px !important; padding: 16px 0 !important; } .footer-bottom-content { font-size: 0.75rem !important; text-align: center !important; } .d-none-mobile { display: none !important; } .btn-diagnostico-mobile { font-size: 0.9rem !important; padding: 12px 24px !important; width: fit-content !important; max-width: 100% !important; margin: 0 auto !important; align-self: center !important; display: flex !important; justify-content: center !important; } .config-cards-mobile .product-card-content h3 { font-size: 1.1rem !important; margin-bottom: 8px !important; } .config-cards-mobile .product-card-content p { font-size: 0.9rem !important; line-height: 1.4 !important; margin-bottom: 12px !important; } .config-cards-mobile .product-features li { font-size: 0.85rem !important; padding-left: 1.2rem !important; margin-bottom: 6px !important; } .process-section .process-grid.process-vertical-mobile, .grid.process-grid.process-vertical-mobile { grid-template-columns: 1fr !important; } } /* ===================================================== CORREÇÃO DEFINITIVA DO CATÁLOGO NO MOBILE Remove o formato 16:9 esmagado e ajusta a altura ===================================================== */ @media (max-width: 768px) { .catalog-scroll .catalog-card-image, .catalog-card-image { aspect-ratio: auto !important; /* Desliga o 16:9 que estava cortando a foto */ height: 240px !important; /* Altura perfeita para celular */ background-color: #f5f5f5 !important; display: block !important; } .catalog-scroll .catalog-card-image img, .catalog-card-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; /* Centraliza a máquina */ padding: 0 !important; } } /* ===================================================== CORREÇÃO: ÍCONE DE CHECK SOBREPOSTO AO TEXTO ===================================================== */ @media (max-width: 768px) { .product-features li::before, .model-specs li::before, .solution-showcase-features li::before { position: static !important; /* Cancela a flutuação que causava a sobreposição */ display: block !important; margin-top: 2px !important; /* Alinha perfeitamente com a altura da letra */ } } /* ===================================================== CORREÇÃO: HERO INSTITUCIONAL (LOGO ACIMA DO TEXTO) ===================================================== */ @media (max-width: 768px) { .page-hero--institutional .page-hero-grid { grid-template-columns: 1fr !important; /* Força 1 única coluna (empilhado) */ text-align: center !important; /* Centraliza todo o texto */ gap: 16px !important; } .page-hero--institutional .page-hero-logo { display: flex !important; justify-content: center !important; /* Centraliza o logo horizontalmente */ width: 100% !important; } .page-hero--institutional .page-hero-logo img { width: 90px !important; /* Deixa o logo com um tamanho ótimo para o topo */ height: auto !important; } } /* ===================================================== CORREÇÃO: BOTÃO MENU MOBILE (ANIMAÇÃO PERFEITA DO 'X') ===================================================== */ @media (max-width: 768px) { .burger-menu { display: flex !important; flex-direction: column !important; justify-content: space-between !important; width: 28px !important; height: 20px !important; background: transparent !important; border: none !important; cursor: pointer !important; z-index: 9999 !important; /* Garante que fique acima de tudo ao clicar */ padding: 0 !important; position: relative; } .burger-menu span { display: block !important; width: 100% !important; height: 3px !important; background-color: var(--color-primary-dark) !important; border-radius: 4px !important; transition: all 0.3s ease-in-out !important; } /* Quando o menu está aberto (Transforma as linhas no X) */ .burger-menu.is-active span:nth-child(1) { transform: translateY(8.5px) rotate(45deg) !important; background-color: var(--color-primary) !important; /* Fica azul claro ao abrir */ } .burger-menu.is-active span:nth-child(2) { opacity: 0 !important; /* Esconde a linha do meio suavemente */ } .burger-menu.is-active span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg) !important; background-color: var(--color-primary) !important; } } /* Setas do hero: controladas por mobile-improvements.css (ocultas em mobile, visíveis em desktop via JS) */ /* ===================================================== MODELOS DE ESTUFAS — REDIMENSIONAMENTO DOS CARDS ===================================================== */ @media (min-width: 769px) { .models-section--estufa .product-carousel-wrapper { overflow: visible !important; } .models-section--estufa .product-carousel { overflow: visible !important; } .models-section--estufa .product-carousel-track { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; overflow: visible !important; } .models-section--estufa .model-card { min-width: 0 !important; width: 100% !important; display: flex !important; flex-direction: column !important; } .models-section--estufa .model-card-image { height: 200px !important; } .models-section--estufa .model-card-content { padding: 20px !important; flex: 1 !important; display: flex !important; flex-direction: column !important; } .models-section--estufa .model-card-content h3 { font-size: 1.25rem !important; margin-bottom: 4px !important; } .models-section--estufa .model-card-content .model-subtitle { font-size: 0.875rem !important; margin-bottom: 14px !important; } .models-section--estufa .model-card-content > p { font-size: 0.9rem !important; margin-bottom: 16px !important; } .models-section--estufa .model-specs li { font-size: 0.875rem !important; padding: 7px 0 !important; } .models-section--estufa .model-card-content .btn { margin-top: auto !important; } } @media (max-width: 768px) { .models-section--estufa .product-carousel { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; } .models-section--estufa .product-carousel::-webkit-scrollbar { display: none !important; } .models-section--estufa .product-carousel-track { display: flex !important; gap: 16px !important; padding-bottom: 8px !important; } .models-section--estufa .model-card { min-width: 280px !important; max-width: 85vw !important; flex-shrink: 0 !important; } .models-section--estufa .model-card-image { height: 180px !important; } .models-section--estufa .model-card-content { padding: 16px !important; } .models-section--estufa .model-card-content h3 { font-size: 1.1rem !important; } }