/* 
 * Core Web Vitals Optimization CSS
 * Optimizaciones específicas para mejorar LCP, FID y CLS
 * Via Motos SAS - Honda Autorizado
 */

/* Prevención de Cumulative Layout Shift (CLS) */
img, video, iframe {
    width: auto;
    height: auto;
    max-width: 100%;
    aspect-ratio: attr(width) / attr(height);
}

/* Optimización para imágenes lazy loading */
.lazy {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.lazy.loaded {
    opacity: 1;
}

/* Placeholder para imágenes mientras cargan */
.image-placeholder {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
    border-radius: 4px;
}

@keyframes loading-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Optimización de fuentes para mejorar LCP */
@font-face {
    font-family: 'Inter-optimized';
    src: url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
    font-display: swap;
    font-weight: 400 700;
}

/* Variables CSS optimizadas para rendimiento */
:root {
    --fuente-principal: 'Inter-optimized', 'Inter', system-ui, -apple-system, sans-serif;
    --fuente-titulos: 'Inter-optimized', 'Inter', system-ui, -apple-system, sans-serif;
    
    /* Colores Honda optimizados */
    --color-honda-rojo: #e60012;
    --color-honda-rojo-hover: #cc0010;
    --color-honda-rojo-oscuro: #b30010;
    
    /* Colores base */
    --color-blanco: #ffffff;
    --color-negro: #111827;
    --color-gris-claro: #f9fafb;
    --color-gris-medio: #6b7280;
    --color-gris-oscuro: #374151;
    
    /* Espaciado */
    --espaciado-xs: 0.25rem;
    --espaciado-sm: 0.5rem;
    --espaciado-md: 1rem;
    --espaciado-lg: 1.5rem;
    --espaciado-xl: 2rem;
    --espaciado-2xl: 3rem;
    
    /* Bordes */
    --border-radius: 8px;
    --border-radius-sm: 4px;
    --border-radius-lg: 12px;
    
    /* Sombras */
    --sombra-suave: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --sombra-media: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --sombra-fuerte: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    
    /* Transiciones */
    --transicion-rapida: all 0.15s ease-in-out;
    --transicion-suave: all 0.3s ease-in-out;
    --transicion-lenta: all 0.5s ease-in-out;
}

/* Optimización del fondo abstracto para mejor rendimiento */
.abstract-background {
    contain: layout style paint;
    transform: translateZ(0);
    will-change: auto;
}

.abstract-background.loaded {
    opacity: 1;
}

/* Optimización de botones para mejor interactividad */
.btn {
    contain: layout style;
    transform: translateZ(0);
    will-change: transform;
}

.btn:hover {
    transform: translateY(-1px) translateZ(0);
}

/* Optimización para elementos que aparecen/desaparecen */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Optimización para scroll suave */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    
    .fade-in {
        transition: none;
    }
    
    .abstract-background::before,
    .abstract-background::after {
        animation: none;
    }
}

/* Optimización específica para móviles */
@media (max-width: 768px) {
    /* Reducir complejidad visual en móviles */
    .abstract-background::before {
        opacity: 0.06;
    }
    
    .abstract-background::after {
        opacity: 0.04;
    }
    
    /* Optimizar tipografía móvil */
    :root {
        --espaciado-xs: 0.2rem;
        --espaciado-sm: 0.4rem;
        --espaciado-md: 0.8rem;
        --espaciado-lg: 1.2rem;
        --espaciado-xl: 1.6rem;
        --espaciado-2xl: 2.4rem;
    }
}

/* Optimización para dispositivos de alta densidad */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .image-placeholder {
        background-size: 400% 100%;
    }
}

/* Contenedor principal optimizado */
.main-container {
    contain: layout;
    isolation: isolate;
}

/* Optimización para elementos críticos above the fold */
.hero-section,
.navigation-bar {
    contain: layout style;
    transform: translateZ(0);
}

/* Optimización para elementos de carga diferida */
.below-fold {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}

/* Optimización para Web Vitals específicos */
/* LCP - Largest Contentful Paint */
.lcp-element {
    contain: layout style paint;
    transform: translateZ(0);
}

/* FID - First Input Delay - Optimización de interactividad */
.interactive-element {
    contain: layout style;
    cursor: pointer;
    touch-action: manipulation;
}

/* CLS - Cumulative Layout Shift - Reserva de espacio */
.reserve-space {
    min-height: var(--min-height, 200px);
    contain: layout;
}

/* Optimización de recursos críticos */
.critical-resource {
    font-display: swap;
    loading: eager;
    decoding: sync;
}

/* Optimización para elementos flotantes */
.floating-element {
    position: fixed;
    contain: layout style paint;
    transform: translateZ(0);
    will-change: transform;
}

/* Micro-optimizaciones adicionales */
* {
    box-sizing: border-box;
}

body {
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Optimización para elementos de lista */
ul, ol {
    contain: layout;
}

/* Optimización para formularios */
form {
    contain: layout style;
}

input, textarea, select {
    touch-action: manipulation;
}