/* 
 * Optimizaciones de rendimiento para Core Web Vitals
 * Mejoras específicas para LCP, FID y CLS
 */

/* Critical CSS para Above the Fold */
.hero-section {
    min-height: 400px;
    contain: layout style;
}

/* Optimización de imágenes para LCP */
img[fetchpriority="high"] {
    /* Prioridad alta para imágenes críticas */
    content-visibility: auto;
}

/* Lazy loading optimizado */
img[loading="lazy"] {
    /* Mejora el lazy loading */
    content-visibility: auto;
    contain-intrinsic-size: 300px 200px;
}

/* Prevenir layout shift en imágenes */
picture, img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Contenedores de imágenes con aspect ratio */
.image-container {
    position: relative;
    overflow: hidden;
}

.image-container::before {
    content: '';
    display: block;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Optimización de fuentes para CLS - usar fuentes del sistema como fallback */
.preload-fonts {
    font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
    visibility: hidden;
    position: absolute;
    left: -9999px;
}

/* Optimización de animaciones para dispositivos con poca potencia */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Mejoras para Core Web Vitals específicas */

/* First Input Delay (FID) */
.interactive {
    pointer-events: auto;
    touch-action: manipulation;
}

/* Cumulative Layout Shift (CLS) */
.layout-stable {
    contain: layout;
}

/* Largest Contentful Paint (LCP) */
.above-fold {
    content-visibility: visible;
    contain-intrinsic-size: none;
}

/* Optimización del clima widget */
#_MI_242ac75e153077672d4a52380bc27b02 {
    min-height: 200px;
    contain: layout style;
}

/* Optimización de Bootstrap Icons */
.bi {
    font-display: swap;
}

/* Critical resource hints */
.resource-hint {
    display: none;
}