/* SOLUÇÃO DEFINITIVA 2024 - Baseada em pesquisas mais recentes */
/* Estilos do banner principal - movido de index.html para arquivo externo */

.main-banner {
    width: 100%;
    height: 450px;
    position: relative;
    background: #f5f5f5;
    overflow: hidden;
    /* Forçar aceleração de hardware */
    transform: translateZ(0);
    will-change: contents;
}

.main-banner img,
.main-banner picture img {
    /* Algoritmos de renderização mais avançados */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    image-rendering: high-quality;
    -ms-interpolation-mode: bicubic;
    
    /* Posicionamento e tamanho otimizado */
    image-orientation: from-image;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    
    /* Otimizações de performance */
    backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    
    /* Desabilitar suavização automática */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    /* Forçar qualidade máxima no carregamento */
    
    /* Evitar blur durante carregamento */
    filter: contrast(1.1) saturate(1.1);
}

/* Responsividade otimizada */
@media (max-width: 1200px) { 
    .main-banner { 
        height: 380px; 
    } 
}

@media (max-width: 768px) { 
    .main-banner { 
        height: 280px; 
    } 
}

@media (max-width: 480px) { 
    .main-banner { 
        height: 220px; 
    } 
}

/* Preload hint para melhor performance */
.main-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/fotosite.png');
    background-size: cover;
    background-position: center;
    opacity: 0;
    z-index: -1;
}

/* Link overlay do banner */
.banner-overlay-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    text-decoration: none;
    cursor: pointer;
}

