/* Configuración de optimización web para EnergizeX */

/* Critical CSS - Estilos principales que deben cargar primero */
:root {
  --primary-color: #facc15;
  --secondary-color: #111827;
  --text-dark: #f9fafb;
  --text-light: #9ca3af;
  --border-color: #374151;
}

/* Optimización de fuentes */
@font-face {
  font-family: 'LEMONMILK';
  src: url('assets/fonts/LEMONMILK-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap; /* Mejora la velocidad de carga */
}

@font-face {
  font-family: 'Lato';
  src: url('assets/fonts/Lato-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Clases de utilidad optimizadas */
.title-primary {
  font-family: 'LEMONMILK', 'Lexend', sans-serif;
  font-weight: 500;
}

.title-secondary {
  font-family: 'Lato', 'Antonio', sans-serif;
  font-weight: 500;
}

/* Optimización de imágenes lazy loading */
img[data-src] {
  filter: blur(5px);
  transition: filter 0.3s;
}

img[data-src].loaded {
  filter: blur(0);
}

/* Optimización de animaciones para rendimiento */
* {
  will-change: auto;
}

.hover-scale {
  will-change: transform;
}

/* Preload de recursos críticos */
.preload-font {
  font-family: 'LEMONMILK', 'Lato';
}

/* Media queries para optimización responsiva */
@media (max-width: 768px) {
  .title-primary {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
  }
}

/* Optimización de Core Web Vitals */
.container {
  contain: layout style paint;
}

/* Reducir layout shift */
.aspect-video {
  aspect-ratio: 16 / 9;
}

.aspect-square {
  aspect-ratio: 1;
}