/* ===================================
   PORTAFOLIO CSS PRINCIPAL - MODULAR OPTIMIZADO
   =================================== */

/* ===== IMPORTACIÓN DE MÓDULOS CSS ===== */
@import url('variables.css');
@import url('base.css');
@import url('components.css');
@import url('animations.css');
@import url('responsive.css');
/* Cargar solo lo necesario en el viewport */
@import url('navigation-modern.css');
@import url('hero.css');
@import url('about.css');
@import url('skills.css');
@import url('projects.css');
@import url('contact.css');
@import url('footer.css');

/* ===== ESTILOS GLOBALES OPTIMIZADOS ===== */

/* Desabilitar todas las animaciones por defecto */
* {
  will-change: auto;
}

/* Smooth scroll solo si no hay preferencia de movimiento reducido */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Optimizar para dispositivos táctiles */
@media (hover: none) and (pointer: coarse) {
  .btn:hover,
  .nav-link:hover,
  .project-card:hover,
  .skill-category:hover {
    transform: none;
  }
  
  .btn:active,
  .nav-link:active,
  .project-card:active {
    transform: scale(0.98);
  }
}

/* Alto contraste */
@media (prefers-contrast: high) {
  :root {
    --border-color: #000000;
    --shadow: rgba(0, 0, 0, 0.8);
  }
  
  .dark-theme {
    --border-color: #ffffff;
    --text-secondary: #ffffff;
  }
}

/* Tema del sistema */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --border-color: #475569;
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-lg: rgba(0, 0, 0, 0.4);
  }
}

/* CRÍTICO: Optimización agresiva para movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  [data-animate],
  .animated-bg,
  .animated-bg-gradient,
  .decorative-circles,
  .floating-particles,
  .particle,
  .circle,
  [data-animate*="float"],
  [data-animate*="bounce"],
  [data-animate*="rotate"],
  [data-animate*="flip"] {
    animation: none !important;
    opacity: 1 !important;
  }
  
  :root {
    --transition: none;
  }
}

/* Optimización para pantallas pequeñas */
@media (max-width: 768px) {
  * {
    animation-duration: 0.2s !important;
  }
  
  .decorative-circles,
  .floating-particles,
  .wave-background,
  .animated-bg-gradient {
    display: none !important;
  }
  
  button, a, input, select, textarea {
    transition: color 0.15s ease;
  }
}

/* Ultra-optimización para móviles antiguos */
@media (max-width: 480px) {
  .animated-bg,
  .animated-bg-gradient,
  .decorative-circles,
  .floating-particles,
  .wave-background,
  .parallax-element,
  [data-animate*="float"],
  [data-animate*="bounce"] {
    animation: none !important;
    display: none !important;
  }
  
  * {
    will-change: auto !important;
  }
}