/**
 * Optimizaciones CSS para mejorar la carga de productos
 * Versión 3.1 - Mejoras visuales y de rendimiento
 */

/* Ajustes para la carga de imágenes - corregidos para eliminar espacios en blanco */
.modern-product-img {
    position: relative !important;
    overflow: hidden !important;
    background-color: #f5f5f5 !important;
    height: 220px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important; /* Eliminar padding */
    width: 100% !important; /* Asegurar ancho completo */
    border: none !important; /* Eliminar bordes */
    box-sizing: border-box !important;
}

.modern-product-img img {
    width: 100% !important; /* Ancho completo */
    height: 100% !important; /* Altura completa */
    object-fit: cover !important; /* Cambiado a 'cover' con !important para asegurar que se aplique */
    transition: opacity 0.5s ease, transform 0.3s ease !important;
    margin: 0 !important; /* Eliminar márgenes */
    padding: 0 !important; /* Eliminar padding */
    border: none !important; /* Eliminar bordes */
}

/* Efecto de hover para imágenes de productos */
.modern-product-card:hover .modern-product-img img {
    transform: scale(1.05); /* Efecto sutil de zoom al pasar el cursor */
}

/* Precargar imagen de fondo del hero - manteniendo efectos visuales */
.hero-section {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Animaciones para AOS - restauradas para mantener efectos visuales */
[data-aos] {
    transition-duration: 800ms !important; /* Valor original para mantener efectos */
}

/* Mantener efectos visuales entre elementos */
.product-item[data-aos] {
    transition: transform 0.5s ease, opacity 0.5s ease !important;
}

/* Optimización para tamaños de texto y elementos críticos - restaurado */
/* Los elementos h1, h2, h3, etc. se mantienen con sus estilos originales */

/* Placeholder para imágenes - mantenido para carga visual */
.img-placeholder {
    position: relative;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 10px;
}

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

/* Optimización para móviles - ajustado para mantener efectos visuales */
@media (max-width: 767.98px) {
    [data-aos] {
        transition-duration: 600ms !important; /* Ajustado para mantener efectos */
    }
    
    /* Permitir delays en móviles para efectos visuales */
    [data-aos][data-aos-delay] {
        transition-delay: inherit !important; /* Restaurado */
    }
    
    /* Restaurar animaciones en móvil */
    .hero-title {
        /* Manteniendo animaciones originales */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
    }
    
    /* Permitir efectos de hover en móvil para mantener experiencia visual */
    
    /* Ajustar altura y presentación de imágenes en móvil */
    .modern-product-img {
        height: 180px !important; /* Altura ajustada para móvil */
        padding: 0 !important; /* Sin padding */
    }
    
    .modern-product-img img {
        width: 100% !important; /* Ancho completo */
        height: 100% !important; /* Altura completa */
        object-fit: cover !important; /* Llenar todo el espacio */
        object-position: center !important; /* Centrar imagen */
    }
}

/* Optimización de la sección hero para carga progresiva - restaurada para mantener efectos */
.hero-content {
    opacity: 1;
    transition: opacity 0.8s ease; /* Aumentado para mejor efecto visual */
}

/* Mejoras para los efectos de títulos y degradados */
.hero-title, .section-title h2 {
    /* Restaurar efectos visuales */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Asegurar carga uniforme de elementos con transiciones suaves */
.product-item {
    transition: transform 0.5s ease, opacity 0.8s ease;
}

/* Estilos para asegurar carga uniforme de productos */
.modern-product-card {
    transition: all 0.5s ease; /* Más lento para carga uniforme */
    height: 100%; /* Asegurar altura completa */
    display: flex;
    flex-direction: column;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    border-radius: 8px; /* Bordes redondeados */
    overflow: hidden; /* Evitar que el contenido sobresalga */
    padding: 0; /* Sin padding en la tarjeta */
    margin: 0; /* Sin margen en la tarjeta */
}

/* Contenido de la tarjeta de producto */
.modern-product-card .card-body {
    flex: 1; /* Hacer que ocupe el espacio disponible */
    display: flex;
    flex-direction: column;
    padding: 12px; /* Padding reducido */
    margin: 0; /* Sin margen */
}

/* Título del producto */
.modern-product-title {
    font-weight: 600; /* Más peso visual */
    margin-bottom: 10px;
    min-height: 40px; /* Altura mínima para alinear */
}

/* Precio del producto */
.modern-product-price {
    font-weight: bold;
    color: #e74c3c; /* Color destacado */
    margin: 10px 0;
    font-size: 1.1rem;
}

/* Mejorar visualización de productos durante el scroll */
.product-container [data-aos] {
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1) !important; /* Más suave */
}

/* Ajustes para el contenedor de productos */
.product-container {
    padding: 5px 0; /* Padding vertical reducido */
}

/* Espaciado uniforme entre productos pero sin espacios laterales */
.product-item {
    margin-bottom: 20px; /* Espacio entre productos */
    padding: 0 5px; /* Padding horizontal mínimo */
}

/* Contenedor de la imagen específicamente - asegurar que ocupe todo el ancho */
.modern-product-img-container {
    width: 100%;
    padding: 0;
    margin: 0;
}

/* Botón de agregar al carrito */
.btn-add-cart {
    margin-top: auto; /* Empuja el botón hacia abajo */
    transition: all 0.3s ease;
    width: 100%; /* Ocupa todo el ancho */
    border-radius: 6px; /* Bordes redondeados */
    padding: 8px 15px; /* Padding adecuado */
    font-weight: 600; /* Texto más visible */
}

/* Optimización adicional para carga de imágenes */
img[data-src], img.lazy {
    opacity: 0; 
    transition: opacity 0.5s ease-in;
}

img[data-src].loaded, img.lazy.loaded {
    opacity: 1;
}

/* Correcciones adicionales para eliminar espacios en blanco en tarjetas */
.row.product-container > div {
    padding: 0 8px !important; /* Reducir padding en columnas del grid */
}

.card {
    margin: 0 !important;
    border: none !important; /* Eliminar bordes que pueden causar espacios */
    overflow: hidden !important; /* Evitar desbordamiento */
}

/* Asegurar que la tarjeta ocupe todo el ancho disponible */
.product-item .modern-product-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}