/* 
 * OPTIMIZACIONES CSS ESPECÍFICAS PARA NAVEGADORES
 * Especialmente diseñado para mejorar el rendimiento en Firefox
 * Versión: 2.0 - Octubre 2024
 */

/* 🦊 OPTIMIZACIONES ESPECÍFICAS PARA FIREFOX */
@-moz-document url-prefix() {
    /* Mejorar scrolling en Firefox */
    * {
        -moz-osx-font-smoothing: grayscale;
        -moz-font-feature-settings: "liga" 1, "kern" 1;
    }
    
    html {
        scroll-behavior: smooth;
        -moz-scroll-behavior: smooth;
    }
    
    body {
        -moz-font-smoothing: antialiased;
        -moz-text-size-adjust: 100%;
    }
    
    /* Optimizar rendering de imágenes en Firefox */
    img, .js-lazy-image {
        image-rendering: -moz-crisp-edges;
        image-rendering: optimizeQuality;
        -moz-transform: translateZ(0);
        transform: translateZ(0);
        will-change: transform;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
    /* Acelerar transiciones CSS en Firefox */
    .card, .btn, .modal, .dropdown-menu {
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;
        -moz-transform: translateZ(0);
        transform: translateZ(0);
        will-change: transform;
    }
    
    /* Optimizar carruseles en Firefox */
    .owl-carousel, .owl-stage {
        -moz-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        will-change: transform;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
    .owl-item {
        -moz-transform: translateZ(0);
        transform: translateZ(0);
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
    /* Mejorar performance de videos en Firefox */
    video {
        -moz-transform: translateZ(0);
        transform: translateZ(0);
        will-change: transform;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
    /* Optimizar flexbox en Firefox */
    .d-flex, .row, [class*="col-"] {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    /* Acelerar animaciones CSS en Firefox */
    .card-ospl:hover, .btn:hover {
        -moz-transform: translateZ(0) translateY(-2px);
        transform: translateZ(0) translateY(-2px);
        -moz-transition: -moz-transform 0.2s ease;
        transition: transform 0.2s ease;
    }
    
    /* Mejorar carga de fuentes en Firefox */
    @font-face {
        font-display: swap;
    }
    
    /* Optimizar background images en Firefox */
    .intro-banner, .section {
        -moz-background-size: cover;
        background-size: cover;
        -moz-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    /* Mejorar performance de gradientes en Firefox */
    .btn-primary, .badge {
        -moz-background-clip: padding-box;
        background-clip: padding-box;
    }
    
    /* Acelerar lazy loading en Firefox */
    .js-lazy-image {
        -moz-transition: opacity 0.3s ease;
        transition: opacity 0.3s ease;
        opacity: 1 !important; /* Carga inmediata en Firefox */
    }
    
    /* Optimizar performance de SVG en Firefox */
    svg {
        -moz-transform: translateZ(0);
        transform: translateZ(0);
        shape-rendering: optimizeSpeed;
    }
    
    /* Mejorar rendering de texto en Firefox */
    h1, h2, h3, h4, h5, h6, p, span, a {
        -moz-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* 🌟 SCROLLBAR PERSONALIZADO VERDE PARA FIREFOX */
@supports (-moz-appearance: none) {
    * {
        scrollbar-width: thin;
        scrollbar-color: #005F00 #f1f1f1;
    }
    
    *::-moz-scrollbar {
        width: 8px;
    }
    
    *::-moz-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }
    
    *::-moz-scrollbar-thumb {
        background: #005F00;
        border-radius: 10px;
        border: 1px solid #004000;
    }
    
    *::-moz-scrollbar-thumb:hover {
        background: #004000;
    }
    
    *::-moz-scrollbar-thumb:active {
        background: #002000;
    }
}

/* 🚀 OPTIMIZACIONES GENERALES DE PERFORMANCE */

/* Hardware acceleration para elementos críticos */
.card, .btn, .modal, .owl-carousel, .navbar {
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

/* Optimizar animaciones hover */
.card:hover, .btn:hover {
    transform: translateZ(0) translateY(-2px);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mejorar carga de imágenes */
img {
    content-visibility: auto;
    contain-intrinsic-size: 300px 200px;
}

.js-lazy-image {
    opacity: 1 !important;
    filter: blur(0px) !important;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

/* Optimizar videos */
video {
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

/* Acelerar lazy loading */
.js-lazy-image[data-src] {
    background: linear-gradient(90deg, #f0f0f0 25%, rgba(240,240,240,0.8) 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
}

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

/* Detener animación cuando la imagen se carga */
.js-lazy-image.loaded,
.js-lazy-image.firefox-loaded {
    animation: none !important;
    background: none !important;
}

/* Optimizar carruseles */
.owl-carousel {
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

.owl-stage {
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

.owl-item {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Mejorar performance de modales */
.modal {
    transform: translateZ(0);
    will-change: transform, opacity;
}

.modal.show {
    transform: translateZ(0);
}

/* Optimizar dropdowns */
.dropdown-menu {
    transform: translateZ(0);
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Acelerar transiciones de navegación */
.navbar, .nav-link {
    transform: translateZ(0);
    will-change: transform;
}

/* Optimizar tablas grandes */
table {
    contain: layout;
}

table tbody {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}

/* Mejorar performance de formularios */
input, textarea, select {
    will-change: contents;
    contain: layout;
}

/* Optimizar cards de anuncios */
.card-ospl {
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    contain: layout style paint;
}

.card-ospl .card-image {
    transform: translateZ(0);
    will-change: transform;
}

/* Acelerar hover effects */
.card-ospl:hover {
    transform: translateZ(0) translateY(-2px);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Optimizar badges y etiquetas */
.badge, .featured-label, .verified-label {
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

/* Mejorar performance de iconos */
i, .icon, .fa {
    transform: translateZ(0);
    will-change: transform;
}

/* Optimizar botones */
.btn {
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

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

.btn:active {
    transform: translateZ(0) translateY(0);
}

/* Acelerar animaciones de carga */
.loading, .spinner {
    will-change: transform;
    transform: translateZ(0);
}

/* Optimizar secciones de la página */
.section {
    contain: layout;
    transform: translateZ(0);
}

/* Mejorar performance del header */
#header {
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

/* Optimizar footer */
#footer {
    contain: layout;
    transform: translateZ(0);
}

/* 📱 OPTIMIZACIONES ESPECÍFICAS PARA MÓVIL */
@media (max-width: 768px) {
    /* Reducir animaciones en móvil para mejor performance */
    * {
        animation-duration: 0.2s !important;
        transition-duration: 0.2s !important;
    }
    
    /* Optimizar scroll en móvil */
    body {
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
    }
    
    /* Mejorar touch response */
    .card, .btn, a {
        -webkit-tap-highlight-color: rgba(0, 95, 0, 0.1);
        tap-highlight-color: rgba(0, 95, 0, 0.1);
    }
    
    /* Optimizar carruseles en móvil */
    .owl-carousel {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    
    /* Acelerar imágenes en móvil */
    img {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* 🎯 OPTIMIZACIONES ESPECÍFICAS PARA CHROME */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
    /* Optimizaciones específicas para Chrome */
    .card, .btn {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
    .js-lazy-image {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* 🍎 OPTIMIZACIONES ESPECÍFICAS PARA SAFARI */
@supports (-webkit-appearance: none) and (not (-ms-ime-align: auto)) and (not (-moz-appearance: none)) {
    /* Correcciones específicas para Safari */
    .item__svg {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
    .card-image img, .item__img {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
    
    .js-lazy-image.safari-loaded {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* 🔄 ANIMACIONES OPTIMIZADAS */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateZ(0);
    }
}

@keyframes slideIn {
    from {
        transform: translateX(-100%) translateZ(0);
    }
    to {
        transform: translateX(0) translateZ(0);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1) translateZ(0);
    }
    50% {
        transform: scale(1.05) translateZ(0);
    }
    100% {
        transform: scale(1) translateZ(0);
    }
}

/* 🏃‍♂️ OPTIMIZACIONES DE CONTENIDO CRÍTICO */
.above-fold {
    content-visibility: visible;
    contain-intrinsic-size: none;
}

.below-fold {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}

/* 🎨 MEJORAS VISUALES ESPECÍFICAS PARA FIREFOX */
@-moz-document url-prefix() {
    /* Mejorar contraste de texto en Firefox */
    body, p, span, div {
        -moz-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    /* Optimizar renderizado de bordes en Firefox */
    .card, .btn, .modal {
        -moz-border-radius: inherit;
        border-radius: inherit;
    }
    
    /* Mejorar sombras en Firefox */
    .card:hover, .btn:hover {
        -moz-box-shadow: inherit;
        box-shadow: inherit;
    }
}

/* 💻 OPTIMIZACIONES PARA DESKTOP */
@media (min-width: 992px) {
    /* Habilitar more hardware acceleration en desktop */
    .owl-carousel, .card, .btn {
        transform: translate3d(0, 0, 0);
        will-change: transform;
    }
    
    /* Optimizar hover effects en desktop */
    .card:hover {
        transform: translate3d(0, -4px, 0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* 🔧 OPTIMIZACIONES FINALES */
/* Reduce layout thrashing */
.layout-stable {
    contain: layout;
}

/* Optimize paint operations */
.paint-optimized {
    contain: paint;
}

/* Optimize style recalculation */
.style-optimized {
    contain: style;
}

/* Full containment for isolated components */
.fully-contained {
    contain: layout style paint;
}