/* ============================================ */
/* CSS NO CRÍTICO - CARGA DIFERIDA */
/* ============================================ */

/* Font loading optimizations con font-display: swap */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuGKYAZ9hiA.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuI6fAZ9hiA.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuBefAZ9hiA.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Estilos adicionales que no son críticos para el primer renderizado */
.header-copilot.scrolled {
    background: rgba(10, 14, 19, 0.98);
    border-bottom-color: var(--accent-blue);
    box-shadow: var(--shadow-xl), var(--shadow-glow);
    transform: translateY(0);
}

.header-copilot.hidden {
    transform: translateY(-100%);
}

.logo-copilot:hover {
    transform: translateY(-2px);
}

.logo-copilot:active {
    transform: scale(0.98);
}

.logo-avatar-copilot::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.logo-copilot:hover .logo-avatar-copilot::before {
    left: 100%;
}

.mobile-toggle-copilot:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-blue);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.mobile-toggle-copilot:active {
    background: rgba(121, 192, 255, 0.15);
    border-color: rgba(121, 192, 255, 0.3);
    transform: scale(0.95);
    box-shadow: var(--shadow-glow);
}

.nav-link-copilot::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(121, 192, 255, 0.1);
    border-radius: 12px;
    opacity: 0;
    transform: scale(0.8);
    transition: var(--transition);
}

.nav-link-copilot:hover::before {
    opacity: 1;
    transform: scale(1);
}

.nav-link-copilot i {
    font-size: 14px;
    opacity: 0.8;
}

.mobile-menu-header-copilot::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.mobile-logo-copilot:active {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(0.98);
}

.mobile-close-copilot:active {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(0.95);
}

.mobile-nav-link-copilot::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(121, 192, 255, 0.1);
    transition: left 0.3s ease;
}

.mobile-nav-link-copilot:active::before {
    left: 0;
}

.mobile-nav-link-copilot:active {
    color: var(--accent-blue);
    transform: scale(0.98);
    box-shadow: var(--shadow-glow);
    background: var(--bg-tertiary);
    border-color: rgba(121, 192, 255, 0.3);
}

.mobile-nav-link-copilot:active i {
    transform: scale(1.1);
    opacity: 1;
}

/* Animaciones adicionales */
@keyframes gradientGlow {
    0%, 100% { 
        background-position: 0% 50%;
        transform: scale(1);
    }
    25% { 
        background-position: 100% 0%;
        transform: scale(1.02);
    }
    50% { 
        background-position: 100% 100%;
        transform: scale(1);
    }
    75% { 
        background-position: 0% 100%;
        transform: scale(1.01);
    }
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

@keyframes messageShow {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes messageHide {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
}

/* Landscape mobile optimizations */
@media (max-height: 600px) and (orientation: landscape) {
    .header-content {
        height: 60px;
    }
    
    .logo-avatar-copilot {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
    
    .logo-text-copilot {
        font-size: 20px;
    }
    
    .mobile-toggle-copilot {
        width: 40px;
        height: 40px;
    }
    
    .mobile-menu-header-copilot {
        padding: var(--space-md) var(--space-md) var(--space-sm);
        padding-top: calc(env(safe-area-inset-top) + var(--space-md));
    }
    
    .mobile-nav-copilot {
        padding: var(--space-md) var(--space-md);
    }
    
    main {
        padding-top: calc(60px + env(safe-area-inset-top));
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .header-copilot {
        background: var(--bg-primary);
        border-bottom: 2px solid var(--accent-blue);
    }
    
    .nav-link-copilot,
    .mobile-nav-link-copilot {
        border: 1px solid var(--border-color);
    }
}

/* Print styles */
@media print {
    .header-copilot,
    .mobile-menu-copilot,
    .mobile-menu-overlay-copilot {
        display: none !important;
    }
    
    main {
        padding-top: 0 !important;
    }
}

/* Additional performance optimizations */
.nav-menu-copilot {
    contain: layout style;
}

.mobile-menu-copilot {
    contain: layout style;
}

/* ============================================ */
/* OPTIMIZACIONES PARA PREVENIR REDISTRIBUCIÓN FORZADA */
/* ============================================ */

/* Contenedores con dimensiones fijas para evitar reflow */
.header-copilot {
    height: 72px;
    contain: layout style;
}

.header-content {
    height: 72px;
    contain: layout;
}

.logo-avatar-copilot {
    contain: layout style;
}

.nav-menu-copilot {
    contain: layout style;
}

.mobile-menu-copilot {
    contain: layout style;
    transform: translate3d(0, 0, 0);
}

/* Prevenir layout shifts en responsive */
@media (min-width: 768px) {
    .header-copilot {
        height: 80px;
    }
    
    .header-content {
        height: 80px;
    }
}

/* GPU acceleration para elementos animados */
.logo-copilot,
.mobile-toggle-copilot,
.nav-link-copilot,
.mobile-nav-link-copilot {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* ============================================ */
/* OPTIMIZACIÓN ADICIONAL DE IMÁGENES */
/* ============================================ */

/* Lazy loading CSS para imágenes */
.lazy {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lazy-loaded {
    opacity: 1;
}

/* Optimización para imágenes de proyectos */
img[src*="proyectos/"] {
    will-change: auto;
    contain: layout style;
}

/* WebP support detection */
.webp .no-webp-fallback {
    display: none;
}

.no-webp .webp-image {
    display: none;
}

/* Preload de imágenes críticas */
.hero-image,
.logo-image {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Cache headers CSS para recursos críticos */
.critical-resource {
    /* Estos recursos tendrán cache de 1 año */
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB2aWV3Qm94PSIwIDAgMSAxIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InRyYW5zcGFyZW50Ii8+PC9zdmc+');
}

/* Optimización de FontAwesome con emojis nativos - CORREGIDO */
.fa-home, .fas.fa-home::before { content: "🏠"; font-size: 0.9em; }
.fa-cogs, .fas.fa-cogs::before { content: "⚙️"; font-size: 0.9em; }
.fa-briefcase, .fas.fa-briefcase::before { content: "💼"; font-size: 0.9em; }
.fa-microchip, .fas.fa-microchip::before { content: "💻"; font-size: 0.9em; }
.fa-users, .fas.fa-users::before { content: "👥"; font-size: 0.9em; }
.fa-envelope, .fas.fa-envelope::before { content: "✉️"; font-size: 0.9em; }
.fa-times, .fas.fa-times::before { content: "❌"; font-size: 0.8em; }
.fa-chevron-up, .fas.fa-chevron-up::before { content: "▲"; font-size: 0.8em; }
.fa-whatsapp, .fab.fa-whatsapp::before { content: "💬"; font-size: 0.9em; }
.fa-linkedin-in, .fab.fa-linkedin-in::before { content: "💼"; font-size: 0.9em; }
.fa-github, .fab.fa-github::before { content: "🔗"; font-size: 0.9em; }
.fa-instagram, .fab.fa-instagram::before { content: "📷"; font-size: 0.9em; }
.fa-x-twitter, .fab.fa-x-twitter::before { content: "🐦"; font-size: 0.9em; }
.fa-rocket, .fas.fa-rocket::before { content: "🚀"; font-size: 0.9em; }
.fa-phone, .fas.fa-phone::before { content: "📞"; font-size: 0.9em; }

/* ============================================ */
/* OPTIMIZACIÓN DE RECURSOS EXTERNOS */
/* ============================================ */

/* Fallback para cuando fallan recursos externos */
@font-face {
    font-family: 'FontAwesome-Fallback';
    font-display: swap;
    src: local('Apple Color Emoji'), local('Segoe UI Emoji'), local('Segoe UI Symbol');
    unicode-range: U+1F300-1F5FF, U+1F600-1F64F, U+1F680-1F6FF, U+2600-26FF;
}

/* Aplicar fallback si FontAwesome no carga */
.fas, .fab, .fa {
    font-family: 'FontAwesome', 'FontAwesome-Fallback', emoji;
}