/* 
 * Optimizaciones específicas para Cumulative Layout Shift (CLS)
 * Este archivo contiene reglas CSS para prevenir cambios de layout inesperados
 */

/* === Contenedor principal === */
.root {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* === Header optimizado === */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    z-index: 1000;
    contain: layout style;
    will-change: transform;
}

/* === Contenido principal === */
#inside {
    margin-top: 0;
    padding-top: 80px;
    min-height: calc(100vh - 80px);
    contain: layout;
}

#content {
    min-height: 60vh;
    contain: layout;
}

/* === Placeholder para contenido dinámico === */
.content-placeholder {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    contain: layout style;
    transition: opacity 0.3s ease-out;
}

/* === Imágenes responsivas === */
img {
    height: auto;
    max-width: 100%;
    contain: layout;
}

.logoMain img,
.logo-footer img,
.logo-left img {
    width: auto;
    height: auto;
    object-fit: contain;
    aspect-ratio: attr(width) / attr(height);
}

/* === Loader optimizado === */
.loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    contain: strict;
    transition: opacity 0.3s ease;
}

/* === Footer === */
.footer {
    margin-top: auto;
    contain: layout style;
}

/* === Elementos con animaciones === */
.cursor,
.mouse-cursor {
    contain: layout style;
    will-change: transform;
}

/* === Modal === */
.modal {
    contain: layout style;
}

.modal[style*="display: block"],
.modal.show {
    contain: none;
}

/* === Elementos de navegación === */
.menu-btns nav,
.menu-movil {
    contain: layout style;
}

/* === WhatsApp button === */
.send-msg {
    position: fixed;
    bottom: 20px;
    right: 20px;
    contain: layout style;
    will-change: transform;
}

/* === Alert box === */
.box-alert {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    contain: layout style;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.box-alert.show {
    transform: translateY(0);
}

/* === Responsive optimizations === */
@media (max-width: 768px) {
    .header {
        height: 70px;
    }
    
    #inside {
        margin-top: 0;
        padding-top: 70px;
    }
    
    .content-placeholder {
        min-height: 50vh;
    }
}

/* === Critical font loading === */
.font-loading {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.font-loaded {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* === Preload hints for browsers === */
.preload-hint {
    content-visibility: auto;
    contain-intrinsic-size: 300px;
}

/* === Scroll behavior === */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}