/* =================================================================
   OPTIMIZACIONES ESPECÍFICAS PARA ESCRITORIO - PageSpeed Insights
   Archivo: desktop-optimizations.css
   Objetivo: Mejorar puntuación de escritorio de 78 a 90+
   ================================================================= */

/* 1. OPTIMIZACIÓN DE FUENTES PARA ESCRITORIO */
@media (min-width: 820px) {
    /* Precarga de fuentes críticas con font-display optimizado */
    @font-face {
        font-family: 'EB Garamond Optimized';
        src: url('https://fonts.gstatic.com/s/ebgaramond/v26/SlGDmQSNjdsmc35JDF1K5E55YMjF_7DPuGi-6_RkCw.woff2') format('woff2');
        font-display: swap;
        font-weight: 400;
    }
    
    @font-face {
        font-family: 'Great Vibes Optimized';
        src: url('https://fonts.gstatic.com/s/greatvibes/v18/RWmMoKWR9v4ksMfaWd_JN-XCg6UKDXlq.woff2') format('woff2');
        font-display: swap;
        font-weight: 400;
    }
}

/* 2. LAZY LOADING AVANZADO PARA ESCRITORIO */
@media (min-width: 820px) {
    /* Optimización del contenedor de imagen principal */
    .image-display-section {
        /* Usar loading condicional basado en viewport */
        background-image: none; /* Se carga vía JavaScript */
        background-color: var(--azul-profundo);
        position: relative;
        overflow: hidden;
    }
    
    .image-display-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #092543 0%, #1d4a7e 100%);
        opacity: 0.1;
        z-index: 1;
    }
    
    .image-display-section.loaded {
        background-image: url('knowledge_base/Imagenes del Web Site/Sala de juntas con vista panaromica.png');
    }
}

/* 3. OPTIMIZACIÓN DEL CRITICAL CSS PARA ESCRITORIO */
@media (min-width: 820px) {
    /* Grid optimizado para escritorio */
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
        max-width: 1200px;
        contain: layout style paint;
    }
    
    /* Optimización de animaciones 3D */
    .service-card-3d {
        transform: translateZ(0); /* Hardware acceleration */
        backface-visibility: hidden;
        perspective: 1000px;
        will-change: transform, box-shadow;
    }
    
    .service-card-3d:hover {
        transform: translateY(-8px) translateZ(0) scale(1.03);
        transition-duration: 0.3s; /* Reducir duración para desktop */
    }
}

/* 4. PRELOAD INTELIGENTE DE RECURSOS */
@media (min-width: 820px) {
    /* Container para logos optimizados */
    .logo-video {
        /* Optimizar dimensiones exactas para escritorio */
        width: 400px;
        max-width: 400px;
        height: 225px; /* Aspect ratio 16:9 exacto */
        object-fit: cover;
        transform: translateZ(0);
    }
    
    /* Header con altura optimizada */
    header {
        min-height: 200px;
        padding: 2rem 1rem;
    }
    
    header h1 {
        font-size: 2rem !important;
        font-family: 'EB Garamond Optimized', 'EB Garamond', Georgia, serif;
    }
    
    header p {
        font-size: 2rem;
        font-family: 'Great Vibes Optimized', 'Great Vibes', cursive, serif;
    }
}

/* 5. OPTIMIZACIÓN DEL VIEWPORT Y CONTENIDO */
@media (min-width: 820px) {
    /* Sección de imagen principal más eficiente */
    .image-display-section {
        height: 70vh;
        min-height: 500px;
        background-position: center center;
        background-size: cover;
    }
    
    /* Footer optimizado */
    .main-footer {
        min-height: 140px;
        padding: 2.5rem 1rem;
    }
}

/* 6. MICRO-OPTIMIZACIONES PARA CORE WEB VITALS */
@media (min-width: 820px) {
    /* Prevenir Layout Shift en navegación */
    .main-nav {
        min-height: 70px;
        contain: layout style;
    }
    
    /* Optimizar interacciones del menú */
    .nav-center a {
        transition: color 0.2s ease;
        transform: translateZ(0);
    }
    
    /* Service cards con mejores transiciones */
    .service-card-3d {
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                    box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* 7. OPTIMIZACIÓN DE IMÁGENES Y MEDIA */
@media (min-width: 820px) {
    /* WhatsApp icon optimizado */
    .whatsapp-link img {
        width: 32px;
        height: 32px;
        loading: lazy;
        decoding: async;
    }
    
    /* Video logo con optimizaciones */
    .logo-video {
        loading: lazy;
        preload: none;
    }
}

/* 8. CRITICAL PATH OPTIMIZATION */
@media (min-width: 820px) {
    /* Defer non-critical styles */
    .accordion-item,
    .landing-page-body,
    .contact-section {
        will-change: auto; /* Reset will-change después del uso */
    }
    
    /* Optimizar paint containment */
    .services-grid-container {
        contain: layout paint;
        min-height: 650px;
    }
    
    .service-card-3d {
        contain: layout paint;
    }
}

/* 9. PERFORMANCE HINTS PARA NAVEGADORES */
@media (min-width: 820px) {
    /* DNS prefetch para recursos externos */
    .external-resource-hint {
        display: none; /* Placeholder para hints */
    }
    
    /* Optimizar scroll behavior */
    html {
        scroll-behavior: smooth;
    }
    
    /* Reduce motion para usuarios sensibles */
    @media (prefers-reduced-motion: reduce) {
        .service-card-3d,
        .logo-video,
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* 10. CONTAINER QUERIES PARA FUTURO-PROOFING */
@media (min-width: 820px) {
    .services-grid-container {
        container-type: inline-size;
    }
    
    /* Usar container queries cuando estén disponibles */
    @container (min-width: 1000px) {
        .services-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: 3rem;
        }
    }
}