/* ========================================
   MOBILE OPTIMIZATIONS
   Otimizações específicas para dispositivos móveis
   ======================================== */

/* Otimizações de performance para mobile */
@media (max-width: 768px) {
    
    /* Reduz animações em dispositivos com pouca bateria */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
    
    /* Otimiza o hero para mobile: usar altura menor que 100vh */
    .hero {
        height: 360px;
        min-height: 0;
        background-attachment: scroll; /* Melhora performance no mobile */
    }
    
    .hero-slide {
        background-attachment: scroll;
        background-size: cover;
        background-position: center;
        will-change: opacity; /* Otimiza animações */
    }
    
    /* Otimiza navegação mobile */
    .mobile-menu-toggle {
        touch-action: manipulation; /* Melhora responsividade do toque */
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Otimiza formulários para mobile */
    input, textarea, select {
        font-size: 16px; /* Previne zoom no iOS */
        -webkit-appearance: none;
        border-radius: 0; /* Remove bordas arredondadas padrão do iOS */
    }
    
    /* Otimiza botões para toque */
    .cta-button,
    .contact-us-button,
    button {
        min-height: 44px; /* Tamanho mínimo recomendado para toque */
        min-width: 44px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Otimiza imagens para mobile */
    img {
        height: auto;
        max-width: 100%;
        image-rendering: -webkit-optimize-contrast; /* Otimiza renderização */
    }
    
    /* Reduz motion blur em scroll */
    .hero-content,
    .welcome-message-section,
    .main-services-section {
        transform: translateZ(0); /* Força aceleração de hardware */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
    /* Otimiza texto para leitura mobile */
    body {
        -webkit-text-size-adjust: 100%; /* Previne zoom automático de texto */
        text-size-adjust: 100%;
    }
    
    /* Melhora performance de scroll */
    .nav-menu-wrapper,
    .hero-slideshow,
    .certificates-grid {
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
    }
    
    /* Otimiza carregamento de fontes */
    @font-face {
        font-family: 'Quattrocento Sans';
        font-display: swap; /* Melhora carregamento de fontes */
    }
    
    /* Reduz complexidade visual em telas pequenas */
    .hero::before,
    .section::before {
        display: none; /* Remove overlays desnecessários */
    }
    
    /* Otimiza grid layouts */
    .certificates-grid,
    .services-grid,
    .clients-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
        contain: layout; /* Otimiza recálculos de layout */
    }
    
    /* Melhora performance de hover em touch devices */
    @media (hover: none) and (pointer: coarse) {
        .service-card:hover,
        .certificate-item:hover,
        .client-item:hover {
            transform: none;
            box-shadow: none;
        }
    }
    
    /* Otimiza carregamento de background images */
    .hero-slide[data-bg-src] {
        background-image: none;
        background-color: #004574; /* Fallback color */
    }
    
    /* Reduz repaints */
    .navbar,
    .footer {
        will-change: transform;
        contain: layout style paint;
    }
    
    /* Otimiza animações críticas */
    .hero-slide.active {
        animation: fadeIn 1s ease-in-out;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    /* Melhora acessibilidade em mobile */
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    
    /* Focus states otimizados para mobile */
    button:focus,
    a:focus,
    input:focus,
    textarea:focus {
        outline: 2px solid #007acc;
        outline-offset: 2px;
    }
    
    /* Otimiza carregamento de vídeos em mobile */
    video {
        preload: metadata; /* Carrega apenas metadados */
    }
    
    /* Reduz uso de CPU em animações */
    .loading-spinner,
    .rotating-element {
        animation-play-state: paused;
    }
    
    /* Ativa animações apenas quando necessário */
    .in-viewport .loading-spinner,
    .in-viewport .rotating-element {
        animation-play-state: running;
    }
}

/* Otimizações para conexões lentas */
@media (prefers-reduced-data: reduce) {
    .hero-slide {
        background-image: none !important;
        background-color: #004574;
    }
    
    .background-image {
        display: none;
    }
    
    video {
        display: none;
    }
}

/* Otimizações para modo escuro */
@media (prefers-color-scheme: dark) {
    .hero-slide {
        filter: brightness(0.8);
    }
}

/* Otimizações para telas de alta densidade */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .main-logo {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

@media (max-width: 480px) {
    .hero {
        height: 320px;
        min-height: 0;
        background-attachment: scroll;
    }
}