/* 🚨 CSS CRÍTICO PARA LCP - BANNER EMPRESA */ /* Este CSS deve ser carregado inline no para máxima performance */ /* Fix crítico para img.bannerEmpresa.d-none */ img.bannerEmpresa { /* Garantir visibilidade imediata */ visibility: visible !important; opacity: 1 !important; display: block !important; /* Otimizações de performance */ content-visibility: auto; contain-intrinsic-size: 300px 200px; /* Prevenção de layout shift */ aspect-ratio: 16/9; object-fit: cover; /* Aceleração de hardware */ transform: translateZ(0); will-change: auto; /* Otimização de carregamento */ loading: eager; fetchpriority: high; } /* Fix específico para o primeiro banner (LCP) */ img.bannerEmpresa:first-of-type, .swiper-slide:first-child img.bannerEmpresa { /* Prioridade máxima para o primeiro banner */ visibility: visible !important; opacity: 1 !important; display: block !important; /* Remove qualquer d-none */ d-none: none !important; /* Posicionamento otimizado */ position: relative; z-index: 1; /* Dimensões fixas para evitar reflow */ width: 100%; height: auto; min-height: 200px; } /* Otimização para slides do swiper */ .swiper-slide:first-child { /* Garantir que o primeiro slide seja visível */ visibility: visible !important; opacity: 1 !important; display: block !important; transform: translateX(0) !important; } /* Prevenção de layout shift para carrossel */ .swiper-wrapper { /* Dimensões mínimas para evitar CLS */ min-height: 200px; } .swiper-container { /* Otimização de performance */ contain: layout style paint; } /* Fix para elementos com d-none que afetam LCP */ .d-none.bannerEmpresa:first-of-type, img.bannerEmpresa.d-none:first-of-type { /* Forçar visibilidade do primeiro banner */ display: block !important; visibility: visible !important; opacity: 1 !important; } /* Otimização para diferentes tamanhos de tela */ @media (min-width: 768px) and (max-width: 1279px) { img.bannerEmpresa { min-height: 250px; contain-intrinsic-size: 400px 250px; } } @media (min-width: 1024px) and (max-width: 1279px) { img.bannerEmpresa { min-height: 300px; contain-intrinsic-size: 500px 300px; } } /* 🚨 DESKTOP - OCULTAR BANNERS */ @media (min-width: 1280px) { img.bannerEmpresa, .swiper-slide.slideBanner, .homepage-restaurant { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; min-height: 0 !important; } /* Ocultar container do banner também */ .swiper-container.homepage-restaurant { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } } /* Otimização para modo totem */ body.rota-totem img.bannerEmpresa { height: 150px; min-height: 150px; contain-intrinsic-size: 400px 150px; } /* Preload hint para navegadores */ img.bannerEmpresa[src] { /* Hint para preload */ loading: eager; fetchpriority: high; decoding: sync; } /* Fallback para navegadores antigos */ @supports not (content-visibility: auto) { img.bannerEmpresa { /* Fallback sem content-visibility */ display: block; visibility: visible; } } /* Otimização de animações */ .swiper-slide { /* Reduzir animações que podem afetar LCP */ transition: none !important; animation: none !important; } .swiper-slide:first-child { /* Garantir que o primeiro slide não tenha delay */ transition-delay: 0s !important; animation-delay: 0s !important; } /* Critical CSS para evitar FOUC */ .bannerEmpresa { /* Evitar flash of unstyled content */ background-color: #f8f9fa; background-image: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); } /* Otimização para imagens responsivas */ img.bannerEmpresa { /* Responsive otimizado */ max-width: 100%; height: auto; /* Suavização de imagem */ image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } /* Fix para problemas de z-index */ .swiper-slide img.bannerEmpresa { z-index: 1; position: relative; } /* Prevenção de render blocking */ .bannerEmpresa[data-src] { /* Para lazy loading, mas não o primeiro */ loading: lazy; fetchpriority: low; } .bannerEmpresa[data-src]:first-of-type { /* Primeiro banner sempre eager */ loading: eager !important; fetchpriority: high !important; } /* 🚨 FIX ÁREA EM BRANCO - DESTAQUE CARROUSEL */ /* Ocultar destaqueCarrousel quando não tem conteúdo */ .destaquesDiv:empty, .destaquesDiv .swiper-wrapper:empty { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* Se não tem slides, ocultar o container */ #destaqueCarrousel .swiper-wrapper:empty { display: none !important; } #destaqueCarrousel:has(.swiper-wrapper:empty) { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* Fallback para navegadores que não suportam :has() */ .destaquesDiv .swiper-wrapper { min-height: 0 !important; } .destaquesDiv h5:only-child { /* Se só tem o título "Destaques" sem conteúdo, ocultar */ display: none !important; }