/* Estilos Base Miki Mottes-inspired: Colores brillantes y bordes redondeados - MEJORADO: Gradientes más suaves, sombras profundas y animaciones refinadas */
       :root {
            /* Variables Navideñas - ROJO, VERDE, ORO */
            --color-primary: #D32F2F; /* Rojo Vívido: Clásico color Santa/Nochebuena. */
            --color-secondary: #00796B; /* Verde Abeto Profundo: Representa los árboles de Navidad. */
            --color-accent: #FFC107; /* Oro/Amarillo Cálido: Para luces, adornos y brillo. */
            --color-bg: #FAFAFA; /* Fondo Neutro Festivo: Blanco Nieve */
        }

        /* Mejora de Fuente: Usar Fredoka One para headings (alegre y juguetona) - Refinado con letter-spacing */
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Fredoka One', cursive;
            font-weight: 400;
            letter-spacing: -0.025em; /* Ligero kerning para modernidad */
        }

        body {
            font-family: 'Inter', sans-serif;
            background: var(--color-bg);
            /* Para habilitar el gradiente animado en el fondo, descomenta las siguientes líneas: */
            /* background: linear-gradient(45deg, var(--color-bg) 0%, #FFF3E0 50%, var(--color-bg) 100%); */
            /* background-size: 400% 400%; */
            /* animation: gradientShift 20s ease infinite; */ 
            transition: background 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow-x: hidden;
            line-height: 1.6;
        }

        /* Animación de Gradiente Alegre: Cambia colores suavemente para transmitir diversión - Refinado con más fases */
        @keyframes gradientShift {
            0%, 100% { background-position: 0% 50%; }
            25% { background-position: 100% 50%; }
            50% { background-position: 100% 100%; }
            75% { background-position: 0% 100%; }
        }

        /* Partículas Flotantes Navideñas: Estrellas y bayas que flotan - CON COLORES NAVIDEÑOS */
        body::before,
        body::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
            opacity: 0.4; /* Reducido para sutileza */
        }

        body::before {
            background:
                /* Blanco: Nieve */
                radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.6) 1px, transparent 1px),
                /* Rojo Vívido */
                radial-gradient(circle at 80% 20%, rgba(211, 47, 47, 0.6) 1px, transparent 1px), 
                /* Oro/Amarillo */
                radial-gradient(circle at 40% 40%, rgba(255, 193, 7, 0.6) 1px, transparent 1px),
                /* Verde Abeto */
                radial-gradient(circle at 60% 60%, rgba(0, 121, 107, 0.6) 1px, transparent 1px);
            background-size: 50px 50px, 80px 80px, 60px 60px, 70px 70px;
            animation: floatParticles 25s linear infinite; /* Más lento */
        }

        body::after {
            background:
                /* Rojo/Rosa Intenso */
                radial-gradient(circle at 10% 10%, rgba(255, 105, 180, 0.6) 1px, transparent 1px),
                /* Verde Abeto */
                radial-gradient(circle at 90% 90%, rgba(0, 121, 107, 0.6) 1px, transparent 1px),
                /* Púrpura (opcional) */
                radial-gradient(circle at 30% 70%, rgba(138, 43, 226, 0.6) 1px, transparent 1px);
            background-size: 40px 40px, 90px 90px, 55px 55px;
            animation: floatParticlesReverse 30s linear infinite;
        }

        @keyframes floatParticles {
            0% { transform: translateY(0) rotate(0deg); }
            100% { transform: translateY(-100vh) rotate(360deg); }
        }

        @keyframes floatParticlesReverse {
            0% { transform: translateY(100vh) rotate(360deg); }
            100% { transform: translateY(0) rotate(0deg); }
        }

        /* Card Styles - mm-card (Glassmorphism con sombras navideñas) */
        .mm-card {
            background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85));
            border: 1px solid rgba(211, 47, 47, 0.2); /* Borde sutil Rojo Navideño */
            border-radius: 2rem;
            /* Sombras usando Rojo (Primary) y Verde (Secondary) */
            box-shadow: 0 20px 40px rgba(211, 47, 47, 0.1), 0 8px 16px rgba(0, 121, 107, 0.08); 
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
            backdrop-filter: blur(16px);
        }

        .mm-card:hover {
            transform: translateY(-8px);
            /* Sombras de hover más profundas */
            box-shadow: 0 32px 64px rgba(211, 47, 47, 0.15), 0 16px 24px rgba(0, 121, 107, 0.12);
        }

        /* Button Styles - mm-button */
        .mm-button {
            border-radius: 9999px;
            font-weight: 600;
            padding: 1rem 2rem;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 8px 16px rgba(0,0,0,0.12);
            position: relative;
            overflow: hidden;
        }

        .mm-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.6s;
        }

        .mm-button:hover::before {
            left: 100%;
        }

        .mm-button:hover {
            box-shadow: 0 16px 32px rgba(0,0,0,0.2);
            transform: translateY(-2px) scale(1.02);
        }

        .mm-button:active {
            transform: scale(0.98);
        }

        .admin-section {
            display: none;
        }

        /* NUEVO: Estilos para la Marquesina (marquee scrolling text) - CON COLORES NAVIDEÑOS */
        .marquee-container {
            /* Usar colores primarios y secundarios para el fondo del mensaje festivo */
            background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); 
            color: white;
            overflow: hidden;
            white-space: nowrap;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            position: relative;
            z-index: 10;
        }

        .marquee-text {
            display: inline-block;
            animation: marquee 15s linear infinite;
            padding: 0.75rem 0;
            font-weight: 600;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        .marquee-text:hover {
            animation-play-state: paused;
        }

        @keyframes marquee {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }

        /* Responsive: En mobile, texto más lento y más grande */
        @media (max-width: 768px) {
            .marquee-text {
                animation-duration: 20s;
                font-size: 1.1rem;
            }
        }

        /* Floating WhatsApp Button - Mantiene los colores de WA */
        .whatsapp-float {
            position: fixed;
            width: 64px;
            height: 64px;
            bottom: 24px;
            right: 24px;
            background: linear-gradient(145deg, #25D366, #128C7E);
            color: #FFF;
            border-radius: 50%;
            text-align: center;
            font-size: 32px;
            box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3), 0 4px 8px rgba(0,0,0,0.1);
            z-index: 100;
            animation: pulse 2.5s infinite;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .whatsapp-float:hover {
            text-decoration: none;
            color: #FFF;
            background: linear-gradient(145deg, #1ebe57, #0f9d6a);
            transform: scale(1.08) translateY(-4px);
            box-shadow: 0 12px 32px rgba(37, 211, 102, 0.4);
        }

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

        /* Floating Mute Button - Mantiene los colores originales para diferenciarlo del WA */
        .mute-float {
            position: fixed;
            width: 64px;
            height: 64px;
            bottom: 24px;
            left: 24px;
            background: linear-gradient(145deg, #10b981, #059669);
            color: #FFF;
            border-radius: 50%;
            text-align: center;
            font-size: 32px;
            box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3), 0 4px 8px rgba(0,0,0,0.1);
            z-index: 100;
            animation: pulse 2.5s infinite;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .mute-float:hover {
            text-decoration: none;
            color: #FFF;
            background: linear-gradient(145deg, #059669, #047857);
            transform: scale(1.08) translateY(-4px);
            box-shadow: 0 12px 32px rgba(16, 185, 129, 0.4);
        }

        /* Iconos Mejorados: Animaciones suaves y escalado - Refinado con ease-out */
        [data-lucide] {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        [data-lucide]:hover {
            transform: scale(1.15) rotate(5deg);
        }

        /* FAQ Accordion Styles - CON COLORES NAVIDEÑOS */
        .faq-item {
            border-bottom: 1px solid rgba(211, 47, 47, 0.2); /* Borde sutil Rojo Navideño */
            margin-bottom: 0.75rem;
            border-radius: 1rem;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0,0,0,0.06);
            transition: box-shadow 0.4s ease, transform 0.3s ease;
        }

        .faq-item:hover {
            box-shadow: 0 8px 24px rgba(211, 47, 47, 0.12); /* Sombra Rojo Navideño en hover */
            transform: translateY(-2px);
        }

        .faq-question {
            cursor: pointer;
            padding: 1.5rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            /* Gradiente con Rojo Vívido (Primary) */
            background: linear-gradient(90deg, transparent, rgba(211, 47, 47, 0.08), var(--color-primary));
            color: var(--color-secondary); /* Texto en Verde Abeto */
            font-weight: 600;
            transition: all 0.4s ease;
        }

        .faq-question:hover {
            background: linear-gradient(90deg, transparent, rgba(211, 47, 47, 0.16), var(--color-primary));
            color: var(--color-primary); /* Texto de hover en Rojo Vívido */
            padding-left: 2.25rem;
        }

        .faq-question i[data-lucide="help-circle"] {
            color: var(--color-accent); /* Icono de ayuda en Dorado */
        }

        .faq-question i[data-lucide="chevron-down"] {
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease;
            /* Fondo de respuesta con Verde Abeto (Secondary) */
            background: linear-gradient(180deg, rgba(0, 121, 107, 0.06), rgba(0, 121, 107, 0.12)); 
            padding: 0 2rem;
        }

        .faq-item.open .faq-answer {
            max-height: 400px;
            padding: 1.5rem 2rem;
            color: #374151;
            line-height: 1.8;
        }

        .faq-item.open .faq-question i[data-lucide="chevron-down"] {
            transform: rotate(180deg);
        }

        /* Carousel Styles - CON COLORES NAVIDEÑOS */
        .carousel {
            position: relative;
            overflow: hidden;
            border-radius: 2rem;
            /* Sombra con Rojo Vívido */
            box-shadow: 0 20px 40px rgba(211, 47, 47, 0.12);
        }

        .carousel-inner {
            display: flex;
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .carousel-slide {
            min-width: 100%;
            position: relative;
        }

        .carousel-slide img, .carousel-slide video {
            width: 100%;
            height: 450px;
            object-fit: cover;
            loading: lazy;
        }

        .carousel-slide video {
            background: #000;
        }

        .carousel-slide .overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0,0,0,0.8));
            color: white;
            padding: 2.5rem;
            backdrop-filter: blur(4px);
        }

        .carousel-dots {
            display: flex;
            justify-content: center;
            gap: 0.75rem;
            margin-top: 1.5rem;
        }

        .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            /* Puntos inactivos con Rojo Vívido suave */
            background: rgba(211, 47, 47, 0.5); 
            cursor: pointer;
            transition: all 0.4s ease;
        }

        .dot:hover {
            transform: scale(1.3);
            background: var(--color-primary); /* Rojo Vívido en hover */
        }

        .dot.active {
            background: var(--color-primary); /* Rojo Vívido activo */
            transform: scale(1.2);
        }

        .carousel-prev, .carousel-next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            /* Botones con Rojo Vívido */
            background: rgba(211, 47, 47, 0.9); 
            color: white;
            border: none;
            padding: 1.25rem;
            cursor: pointer;
            font-size: 1.75rem;
            border-radius: 50%;
            transition: all 0.3s ease;
            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
        }

        .carousel-prev:hover, .carousel-next:hover {
            background: var(--color-primary); /* Rojo Vívido más intenso */
            transform: translateY(-50%) scale(1.1);
            box-shadow: 0 12px 24px rgba(0,0,0,0.3);
        }

        .carousel-prev { left: 1.5rem; }
        .carousel-next { right: 1.5rem; }

        /* Carousel for Testimonials (Adapted for comments cards) */
        .testimonials-carousel {
            position: relative;
            overflow: hidden;
            border-radius: 2rem;
            /* Sombra con Rojo Vívido */
            box-shadow: 0 20px 40px rgba(211, 47, 47, 0.12);
            max-width: 900px;
            margin: 0 auto;
        }

        .testimonials-carousel .carousel-inner {
            display: flex;
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .testimonials-carousel .carousel-slide {
            min-width: 100%;
            padding: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .testimonials-carousel .comment-card {
            max-width: 100%;
            margin: 0;
            box-shadow: 0 12px 24px rgba(0,0,0,0.1);
        }

        .testimonials-carousel .carousel-dots {
            display: flex;
            justify-content: center;
            gap: 0.75rem;
            margin-top: 1.5rem;
        }

        .testimonials-carousel .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            /* Puntos inactivos con Rojo Vívido suave */
            background: rgba(211, 47, 47, 0.5); 
            cursor: pointer;
            transition: all 0.4s ease;
        }

        .testimonials-carousel .dot:hover {
            transform: scale(1.3);
            background: var(--color-primary); /* Rojo Vívido en hover */
        }

        .testimonials-carousel .dot.active {
            background: var(--color-primary); /* Rojo Vívido activo */
            transform: scale(1.2);
        }

        .testimonials-carousel .carousel-prev, .testimonials-carousel .carousel-next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            /* Botones con Rojo Vívido */
            background: rgba(211, 47, 47, 0.9);
            color: white;
            border: none;
            padding: 1.25rem;
            cursor: pointer;
            font-size: 1.75rem;
            border-radius: 50%;
            transition: all 0.3s ease;
            z-index: 10;
            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
        }

        .testimonials-carousel .carousel-prev:hover, .testimonials-carousel .carousel-next:hover {
            background: var(--color-primary);
            transform: translateY(-50%) scale(1.1);
            box-shadow: 0 12px 24px rgba(0,0,0,0.3);
        }

        .testimonials-carousel .carousel-prev { left: 1.5rem; }
        .testimonials-carousel .carousel-next { right: 1.5rem; }

        /* Audio Background */
        #bg-music {
            position: fixed;
            top: -100px;
            z-index: -1;
        }
        /* Mejora para preview de imágenes en admin - Soporte video - MEJORADO: Bordes más elegantes, transiciones extendidas */
        .banner-preview {
            aspect-ratio: 3 / 1;
            background: linear-gradient(145deg, #f8fafc, #e2e8f0); /* Gradiente gris sutil */
            border: 2px dashed rgba(37, 99, 235, 0.4);
            border-radius: 1rem;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.4s ease;
            cursor: grab;
            user-select: none;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
        }
        .banner-preview:hover {
            border-color: var(--color-primary);
            box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1), inset 0 2px 4px rgba(0,0,0,0.05);
            transform: scale(1.02);
        }
        .banner-preview:active {
            cursor: grabbing;
        }
        .banner-preview img, .banner-preview video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .banner-preview.error {
            background: linear-gradient(145deg, #fef2f2, #fee2e2);
            border-color: #ef4444;
            color: #dc2626;
        }
        /* Precios como Tarjetas Card Mejoradas - Estilo Bootstrap-like con estructura header/body/footer, badges y descripciones - MEJORADO: Gradientes vibrantes con brillos, iconos animados más grandes, bounce en precio, mejor responsive y integración de temas */
        .price-card {
            background: white;
            border: 1px solid #e5e7eb;
            border-radius: 1.5rem; /* Aún más redondeado para diversión infantil */
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255,255,255,0.5); /* Sombra más juguetona con inner glow */
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            height: 100%;
            display: flex;
            flex-direction: column;
            animation: cardFloat 3s ease-in-out infinite alternate; /* Nueva animación sutil de flotación */
        }
        @keyframes cardFloat {
            0% { transform: translateY(0); }
            100% { transform: translateY(-5px); }
        }
        /* Asumiendo las variables:
:root {
    --color-primary: #D32F2F;   // Rojo Vívido
    --color-secondary: #00796B; // Verde Abeto Profundo
    --color-accent: #FFC107;    // Oro/Amarillo Cálido
}
*/
/* Utiliza las mismas variables:
:root {
    --color-primary: #D32F2F;   // Rojo Vívido
    --color-secondary: #00796B; // Verde Abeto Profundo
    --color-accent: #FFC107;    // Oro/Amarillo Cálido
}
*/

.xmas-card {
    /* Base más limpia y sólida */
    background: #FFFFFF; 
    border: 5px solid var(--color-primary); /* Borde grueso en Rojo Vívido */
    border-radius: 1.5rem;
    padding: 0; /* Quitamos padding aquí, se aplica dentro del header/body */
    transition: transform 0.4s ease-out, box-shadow 0.4s ease;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.xmas-card:hover {
    transform: translateY(-8px); /* Elevación más suave */
    /* Sombra con un toque dorado/oro */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15), 0 0 15px rgba(255, 193, 7, 0.5); 
}

/* 🎀 Simulación de Cinta/Borde 3D del Regalo 🎀 */
.xmas-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 25px; /* Ancho de la cinta vertical */
    height: 100%;
    background-color: var(--color-secondary); /* Color de cinta: Verde Abeto */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.xmas-card::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 25px; /* Ancho de la cinta horizontal */
    background-color: var(--color-secondary); /* Color de cinta: Verde Abeto */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

/* --- ENCABEZADO (HEADER) --- */
.xmas-card .card-header {
    background: var(--color-primary); /* Fondo sólido Rojo Vívido */
    color: white;
    padding: 1.5rem 2rem;
    border-radius: 0; /* Ya no redondeamos el borde superior */
    position: relative;
    z-index: 2; /* Sobre las cintas */
    display: block; /* Vuelve a ser un bloque sencillo */
    text-align: center;
}

/* --- CUERPO (BODY) --- */
.xmas-card .card-body {
    padding: 3rem 2rem;
    position: relative;
    z-index: 2; /* Sobre las cintas */
    /* Mantenemos la estructura de flexbox */
}

/* --- PIE DE PÁGINA (FOOTER) --- */
.xmas-card .card-footer {
    background: rgba(255, 193, 7, 0.1); /* Fondo muy suave en Dorado (Accent) */
    border-top: 1px dashed rgba(211, 47, 47, 0.3); /* Línea de puntos Roja festiva */
    padding: 1.5rem;
    border-radius: 0 0 1rem 1rem;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* --- ELEMENTOS DE TEXTO E ICONOS --- */
.xmas-card i {
    font-size: 3.5rem;
    color: var(--color-accent); /* Iconos en Dorado */
    text-shadow: 0 0 8px rgba(255, 193, 7, 0.6); /* Glow sutil */
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.xmas-card:hover i {
    transform: scale(1.15); /* Icono pulsa sutilmente */
}

.price-title {
    color: var(--color-secondary); /* Título en Verde Abeto para legibilidad */
}

.price-amount {
    color: var(--color-primary); /* Precio en Rojo Vívido */
}

.price-badge {
    /* Estilo de la etiqueta de precio para que parezca una etiqueta de regalo */
    background: var(--color-accent);
    color: var(--color-primary); 
    top: 1.5rem;
    right: 1.5rem;
    transform: rotate(5deg); /* Ligera rotación para un toque artesanal */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

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

.price-title {
    font-size: 1.75rem;
    font-weight: bold;
    margin-bottom: 1rem;
    letter-spacing: -0.025em;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.price-description {
    color: #6b7280;
    font-size: 1.125rem;
    margin-bottom: 1.75rem;
    line-height: 1.7;
    font-style: italic;
}

.price-amount {
    font-size: 4rem;
    font-weight: bold;
    /* Precio en Rojo Vívido (Primary) */
    color: var(--color-primary); 
    margin-bottom: 0;
    text-shadow: 0 4px 8px rgba(211, 47, 47, 0.25); /* Sombra de texto con Rojo Vívido */
    animation: priceBounce 0.6s ease-out;
}

@keyframes priceBounce {
    0% { transform: scale(0.8); opacity: 0; }
    60% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

.price-footer-text {
    color: #6b7280;
    font-size: 1rem;
    text-align: center;
    font-style: italic;
    font-weight: 500;
}

/* Responsive para price-cards: En mobile, más compacto pero legible */
@media (max-width: 768px) {
    .price-card .card-body {
        padding: 2rem 1.5rem;
    }
    .price-card i {
        font-size: 3rem;
    }
    .price-amount {
        font-size: 3rem;
    }
}
        /* Estilos para tarjetas de comentarios coloridas - MEJORADO: Gradientes más suaves, glow más sutil, animaciones refinadas */
        .comment-card {
            position: relative;
            overflow: hidden;
            border-radius: 1.5rem;
            padding: 2rem;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            border-left: 5px solid;
            max-width: 550px;
            width: 100%;
            backdrop-filter: blur(8px);
        }
        .comment-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px);
            background-size: 25px 25px;
            opacity: 0;
            transition: opacity 0.6s ease;
            pointer-events: none;
        }
        .comment-card:hover::before {
            opacity: 1;
            animation: sparkle 2.5s linear infinite;
        }
        .comment-card:hover {
            transform: translateY(-8px) rotate(2deg);
            box-shadow: 0 20px 48px rgba(0, 0, 0, 0.15), 0 0 32px rgba(var(--comment-glow), 0.2);
            filter: brightness(1.05) contrast(1.08);
        }
        /* Colores existentes + nuevos para más variedad - Refinados para mejor armonía */
        .comment-card-blue {
            background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
            border-left-color: #2563eb;
            color: #1e40af;
            --comment-glow: 37, 99, 235;
        }
        .comment-card-orange {
            background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
            border-left-color: #ea580c;
            color: #c2410c;
            --comment-glow: 234, 88, 12;
        }
        .comment-card-red {
            background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
            border-left-color: #dc2626;
            color: #dc2626;
            --comment-glow: 220, 38, 38;
        }
        .comment-card-green {
            background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
            border-left-color: #059669;
            color: #065f46;
            --comment-glow: 5, 150, 105;
        }
        .comment-card-purple {
            background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
            border-left-color: #7c3aed;
            color: #581c87;
            --comment-glow: 124, 58, 237;
        }
        .comment-card-teal {
            background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
            border-left-color: #0d9488;
            color: #0f766e;
            --comment-glow: 13, 148, 136;
        }
        /* Nuevos colores para más variedad - Armonizados */
        .comment-card-pink {
            background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
            border-left-color: #db2777;
            color: #be185d;
            --comment-glow: 219, 39, 119;
        }
        .comment-card-yellow {
            background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
            border-left-color: #eab308;
            color: #ca8a04;
            --comment-glow: 234, 179, 8;
        }
        .comment-card-indigo {
            background: linear-gradient(135deg, #f0f7ff 0%, #e0e7ff 100%);
            border-left-color: #4f46e5;
            color: #3730a3;
            --comment-glow: 79, 70, 229;
        }
        .comment-card-cyan {
            background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
            border-left-color: #06b6d4;
            color: #0891b2;
            --comment-glow: 6, 182, 212;
        }
        .comment-card-lime {
            background: linear-gradient(135deg, #f7fee7 0%, #ecfdf5 100%);
            border-left-color: #65a30d;
            color: #4d7c0f;
            --comment-glow: 101, 163, 13;
        }
        /* Animaciones random de entrada - Aplicar clase random en JS - Refinadas con delays */
        .anim-fade-in-up {
            animation: fadeInUp 1s ease-out forwards;
        }
        .anim-slide-in-left {
            animation: slideInLeft 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.2s;
        }
        .anim-bounce-in {
            animation: bounceIn 0.8s ease-out forwards;
        }
        .anim-zoom-in {
            animation: zoomIn 0.8s ease-out forwards 0.1s;
        }
        .anim-rotate-in {
            animation: rotateIn 1s ease-out forwards 0.3s;
        }
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(40px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes slideInLeft {
            from { opacity: 0; transform: translateX(-60px); }
            to { opacity: 1; transform: translateX(0); }
        }
        @keyframes bounceIn {
            0% { transform: scale(0.3); opacity: 0; }
            50% { transform: scale(1.08); }
            70% { transform: scale(0.95); }
            100% { opacity: 1; transform: scale(1); }
        }
        @keyframes zoomIn {
            from { opacity: 0; transform: scale(0.6); }
            to { opacity: 1; transform: scale(1); }
        }
        @keyframes rotateIn {
            from { opacity: 0; transform: rotate(-180deg) scale(0.6); }
            to { opacity: 1; transform: rotate(0deg) scale(1); }
        }
        /* Animación random de partículas en hover */
        .comment-card:hover .comment-text {
            animation: textGlow 2s ease-in-out infinite alternate;
        }
        @keyframes textGlow {
            from { text-shadow: 0 0 8px rgba(var(--comment-glow), 0.4); }
            to { text-shadow: 0 0 20px rgba(var(--comment-glow), 0.6), 0 0 32px rgba(var(--comment-glow), 0.3); }
        }
        .comment-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 1.25rem;
        }
        .comment-text {
            font-style: italic;
            line-height: 1.7;
            margin-bottom: 1.25rem;
            position: relative;
            z-index: 1;
        }
        .comment-author {
            display: flex;
            align-items: center;
            font-weight: 600;
        }
        /* Mejora para Modales: Botón X de cierre fijo en la esquina superior derecha - MEJORADO: Más prominente */
        #modal-content {
            position: relative;
            padding: 2rem;
        }
        .modal-close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            border: none;
            border-radius: 50%;
            width: 2.5rem;
            height: 2.5rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            z-index: 10;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        .modal-close:hover {
            background: rgba(239, 68, 68, 0.9);
            transform: scale(1.1) rotate(90deg);
            box-shadow: 0 6px 12px rgba(0,0,0,0.3);
        }
        .modal-close i {
            font-size: 1.25rem;
        }
        /* Estilos para imagen grande en modal */
        .large-image-modal img {
            max-width: 90vw;
            max-height: 90vh;
            width: auto;
            height: auto;
            object-fit: contain;
            border-radius: 1.5rem;
            box-shadow: 0 32px 64px rgba(0, 0, 0, 0.25);
            transition: transform 0.3s ease;
        }
        .large-image-modal img:hover {
            transform: scale(1.02);
        }
        /* Optimizaciones: Lazy loading y preconnect para Firebase y CDN */
        img {
            loading: lazy;
            cursor: pointer;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        img:hover {
            transform: scale(1.08);
        }
        /* Preconnect para mejorar carga de Firebase y Tailwind */
        link[rel="preconnect"] {
            /* Añadir en HTML si es necesario, pero aquí en CSS no aplica; ver script */
        }
        /* Estilo secreto para el botón admin en mobile: pequeño y sutil */
        @media (max-width: 640px) {
            #admin-toggle {
                opacity: 0.8;
                transition: opacity 0.3s;
            }
            #admin-toggle:hover {
                opacity: 1;
            }
        }
        /* Footer Styles - MEJORADO: Gradiente más dinámico, enlaces con hover effects */
        footer {
            background: linear-gradient(135deg, var(--color-primary, #2563eb), var(--color-secondary, #059669));
            color: white;
            text-align: center;
            padding: 3rem 1rem;
            margin-top: 6rem;
            border-top-left-radius: 2rem;
            border-top-right-radius: 2rem;
            box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.1);
            transition: transform 0.4s ease;
            position: relative;
            overflow: hidden;
        }
        footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 20% 80%, rgba(255,255,255,0.1) 1px, transparent 1px);
            background-size: 40px 40px;
            opacity: 0.5;
            animation: sparkle 4s linear infinite;
        }
        footer:hover {
            transform: translateY(-4px);
        }
        .footer-link {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            color: white;
            text-decoration: none;
            font-weight: 600;
            padding: 1rem 2rem;
            border-radius: 9999px;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(12px);
            transition: all 0.4s ease;
            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
        }
        .footer-link:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: scale(1.08) translateY(-2px);
            box-shadow: 0 12px 24px rgba(0,0,0,0.3);
            color: white;
        }
        .footer-icon {
            width: 1.75rem;
            height: 1.75rem;
            transition: transform 0.3s ease;
        }
        .footer-link:hover .footer-icon {
            transform: rotate(360deg);
        }
        .footer-text {
            margin-top: 1.5rem;
            font-size: 0.875rem;
            opacity: 0.95;
            letter-spacing: 0.025em;
        }
        /* Mejoras SEO: Enlaces internos y navegación semántica */
        nav a {
            text-decoration: none;
            color: inherit;
        }
        /* Asegurar que los headings sean semánticos y únicos */
        h1, h2, h3 {
            font-weight: bold;
            position: relative;
        }
        h1::after, h2::after, h3::after {
            content: '';
            position: absolute;
            bottom: -0.5rem;
            left: 0;
            width: 2rem;
            height: 2px;
            background: var(--color-accent);
            border-radius: 1px;
            opacity: 0.7;
        }
        /* Optimización para móviles: Viewport ya incluido, pero asegurar - MEJORADO: Más breakpoints */
        @media (max-width: 768px) {
            .carousel-slide img, .carousel-slide video {
                height: 300px;
            }
            .mm-card {
                border-radius: 1.5rem;
                padding: 1.5rem;
            }
        }
        @media (max-width: 480px) {
            .carousel-slide img, .carousel-slide video {
                height: 250px;
            }
            .price-card .card-body {
                padding: 1.5rem 1rem;
            }
        }
        /* NUEVOS ESTILOS PARA BÚSQUEDA Y PAGINACIÓN COLORIDA EN CATÁLOGO - MEJORADO: Input con icono, paginación con transiciones */
        .catalog-search {
            background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85));
            border: 2px solid var(--color-primary);
            border-radius: 9999px;
            padding: 1rem 1.5rem 1rem 3rem; /* Espacio para icono */
            font-size: 1rem;
            transition: all 0.4s ease;
            box-shadow: 0 8px 16px rgba(37, 99, 235, 0.08);
            position: relative;
        }
        .catalog-search::before {
            content: '🔍';
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.25rem;
        }
        .catalog-search:focus {
            outline: none;
            border-color: var(--color-secondary);
            box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.15);
            transform: scale(1.03);
        }
        .catalog-search::placeholder {
            color: var(--color-accent);
        }
        /* MEJORADO: Estilo para botón "Mostrar Todo" - Más prominente con animación de rebote, icono más grande y texto dinámico */
        .show-all-btn {
            background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
            color: white;
            border: none;
            border-radius: 9999px;
            padding: 1.25rem 2.5rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            box-shadow: 0 8px 24px rgba(5, 150, 105, 0.25);
            display: flex;
            align-items: center;
            gap: 1rem;
            font-size: 1.125rem;
            position: relative;
            overflow: hidden;
        }
        .show-all-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
            transition: left 0.6s;
        }
        .show-all-btn:hover:not(:disabled)::before {
            left: 100%;
        }
        .show-all-btn:hover:not(:disabled) {
            transform: translateY(-4px) scale(1.05);
            box-shadow: 0 16px 32px rgba(5, 150, 105, 0.35);
        }
        .show-all-btn:disabled {
            background: rgba(156, 163, 175, 0.5);
            cursor: not-allowed;
            transform: none;
            opacity: 0.8;
        }
        .show-all-btn i {
            font-size: 1.5rem;
            transition: transform 0.4s ease;
        }
        .show-all-btn:hover i {
            transform: rotate(360deg);
        }
        .pagination-container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.75rem;
            margin-top: 2.5rem;
        }
        .pagination-btn {
            background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
            color: white;
            border: none;
            border-radius: 50%;
            width: 3rem;
            height: 3rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.4s ease;
            box-shadow: 0 8px 16px rgba(37, 99, 235, 0.2);
            font-weight: bold;
        }
        .pagination-btn:hover:not(:disabled) {
            transform: scale(1.15) rotate(180deg);
            box-shadow: 0 12px 24px rgba(37, 99, 235, 0.3);
        }
        .pagination-btn:disabled {
            background: rgba(156, 163, 175, 0.5);
            cursor: not-allowed;
            transform: none;
        }
        .pagination-page {
            background: linear-gradient(135deg, var(--color-accent), var(--color-secondary));
            color: white;
            border: none;
            border-radius: 50%;
            width: 3rem;
            height: 3rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.4s ease;
            box-shadow: 0 8px 16px rgba(217, 119, 6, 0.2);
            font-weight: bold;
        }
        .pagination-page:hover:not(.active) {
            transform: scale(1.15);
            box-shadow: 0 12px 24px rgba(217, 119, 6, 0.3);
        }
        .pagination-page.active {
            background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
            transform: scale(1.2);
            box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.25);
        }
        .search-results {
            color: var(--color-accent);
            font-weight: 600;
            text-align: center;
            margin-bottom: 1.25rem;
            font-size: 1.125rem;
        }
        .no-results {
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.04));
            border: 2px dashed rgba(239, 68, 68, 0.2);
            border-radius: 1.5rem;
            padding: 2.5rem;
            text-align: center;
            color: #dc2626;
            box-shadow: 0 8px 16px rgba(239, 68, 68, 0.1);
        }
        /* Mejora de diseño general: Mejores sombras en admin para profundidad */
        .admin-card {
            box-shadow: 0 8px 32px rgba(0,0,0,0.08);
            border-radius: 1.5rem;
            overflow: hidden;
            transition: box-shadow 0.3s ease;
        }
        .admin-card:hover {
            box-shadow: 0 16px 48px rgba(0,0,0,0.12);
        }
        /* Mejora responsive para grid en admin */
        @media (max-width: 768px) {
            .admin-grid {
                grid-template-columns: 1fr;
            }
        }