/* ===== RESET & BASE ===== */
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            font-family: 'Lato', sans-serif;
            background: radial-gradient(circle at center, #1e1e2f 0%, #0a0a0a 100%);
            color: #e0e0e0;
            line-height: 1.6;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        h1, h2, h3 { font-family: 'Cinzel', serif; color: #d4af37; }
        a { text-decoration: none; color: inherit; }

        /* ===== LOADER ===== */
        #loader {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: #0a0a0a; display: flex; justify-content: center; align-items: center;
            z-index: 9999; transition: opacity 0.5s;
        }
        .spinner {
            width: 50px; height: 50px; border: 4px solid #3a3a50;
            border-top: 4px solid #d4af37; border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

        /* ===== HERO SECTION ===== */
        .hero {
            text-align: center;
            padding: 30px;
            max-width: 800px;
            margin: 0 auto;
            animation: fadeIn 1s ease-out;
        }
        .hero h1 {
            font-size: 3.5rem; font-weight: 900; letter-spacing: 4px;
            text-shadow: 0 4px 15px rgba(212, 175, 55, 0.4); margin-bottom: 10px;
        }
        .gold-divider {
            height: 2px; width: 80px; background: linear-gradient(90deg, transparent, #d4af37, transparent);
            margin: 0 auto 15px;
        }
        .hero h2 {
            font-size: 1.2rem; font-weight: 400; letter-spacing: 5px; color: #b0b0b0;
            text-transform: uppercase; margin-bottom: 25px;
        }
        .hero p {
            font-size: 1.1rem; color: #d0d0d0; max-width: 600px; margin: 0 auto 40px;
        }
        .cta-btn {
            display: inline-block;
            background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);
            color: #0a0a0a; font-family: 'Cinzel', serif; font-weight: 700;
            padding: 16px 40px; border-radius: 50px; font-size: 1.1rem;
            letter-spacing: 2px; text-transform: uppercase;
            box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
            transition: all 0.3s ease;
        }
        .cta-btn:hover {
            transform: translateY(-3px); box-shadow: 0 10px 30px rgba(212, 175, 55, 0.6);
        }

        /* ===== GALLERY SECTION ===== */
        .gallery-section {
            padding: 40px 20px; max-width: 1200px; margin: 0 auto; flex: 1;
        }
        .gallery-title {
            text-align: center; font-size: 2rem; margin-bottom: 30px;
            border-bottom: 1px solid #3a3a50; padding-bottom: 15px;
        }
        .gallery-grid {
            display: grid;
            /* Forzamos exactamente 2 columnas en pantallas de PC/Tablet */
            grid-template-columns: repeat(2, 1fr); 
            gap: 20px;
        }
        .gallery-item {
            position: relative; border-radius: 12px; overflow: hidden;
            box-shadow: 0 8px 20px rgba(0,0,0,0.5); border: 1px solid #2a2a3d;
            transition: transform 0.3s ease;
            background: #151515;
        }
        .gallery-item:hover { transform: translateY(-5px); border-color: #d4af37; }
        .gallery-item img {
            width: 100%; height: 300px; object-fit: cover; display: block;
        }
        .gallery-caption {
            padding: 15px; text-align: center; font-size: 0.9rem; color: #b0b0b0;
            background: #151515; border-top: 1px solid #2a2a3d;
        }

        /* ===== FOOTER ===== */
        footer {
            background: #0a0a0a; border-top: 1px solid #2a2a3d;
            padding: 40px 20px; text-align: center; margin-top: 40px;
        }
        .footer-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 30px; max-width: 1000px; margin: 0 auto 30px; text-align: left;
        }
        .footer-col h3 { font-size: 1.2rem; margin-bottom: 15px; color: #d4af37; }
        .footer-col p, .footer-col a {
            color: #b0b0b0; font-size: 0.95rem; margin-bottom: 10px; display: block;
            transition: color 0.3s;
        }
        .footer-col a:hover { color: #d4af37; }
        .social-icons a {
            display: inline-block; margin-right: 15px; font-size: 1.5rem;
        }
        .copyright {
            color: #555; font-size: 0.8rem; border-top: 1px solid #1a1a1a; padding-top: 20px;
        }

        @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

        /* Mobile */
        @media (max-width: 768px) {
            .hero h1 { font-size: 2.5rem; }
            .footer-grid { text-align: center; }
            .gallery-grid {grid-template-columns: 1fr;}
        }

    /* ===== CONTENEDOR PADRE (La fila que los agrupa) ===== */
    .videos-row {
        display: flex;              /* ¡Aquí va el flex! */
        justify-content: center;    /* Centra los videos en la pantalla */
        gap: 20px;                  /* Espacio perfecto entre cada video */
        flex-wrap: wrap;            /* Si la pantalla es pequeña, los baja de forma ordenada */
        max-width: 1100px;          /* Ancho máximo total de la fila */
        margin: 40px auto;          /* Centrado vertical y horizontal */
        padding: 0 20px;            /* Margen de seguridad a los lados en móviles */
    }

    /* ===== CONTENEDOR DE CADA VIDEO INDIVIDUAL ===== */
    .video-premium-container {
        /* QUITAMOS display: flex de aquí */
        flex: 1;                    /* Hace que los 3 videos se repartan el espacio por igual */
        min-width: 250px;           /* Evita que se aplasten demasiado */
        max-width: 350px;           /* Tamaño máximo de cada video */
        
        margin: 0;                  /* El margen ahora lo controla el 'gap' del padre */
        border-radius: 12px;
        overflow: hidden;
        border: 2px solid #d4af37;  /* Borde dorado elegante */
        box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);
        background: #000;           /* Fondo negro por si el video tarda en cargar */
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    /* Efecto al pasar el mouse por encima de un video */
    .video-premium-container:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(212, 175, 55, 0.4);
    }

    /* Asegura que el video llene su contenedor sin deformarse */
    .video-premium-container video {
        width: 100%;
        height: 100%;
        object-fit: cover;          /* Rellena el cuadro sin deformar la imagen */
        display: block;             /* Elimina un pequeño espacio blanco fantasma debajo del video */
    }

    /* ===== RESPONSIVE (Para Celulares) ===== */
    @media (max-width: 768px) {
        .videos-row {
            flex-direction: column; /* En celulares, uno debajo del otro */
            align-items: center;    /* Centrados */
            gap: 30px;
        }
        
        .video-premium-container {
            width: 100%;            /* Ocupa todo el ancho disponible */
            max-width: 400px;       /* Pero no más de 400px para que no se vea gigante */
        }
    }

    /* ===== MENÚ SUPERIOR ===== */
    .top-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 30px;
        background: #151515;
        border-bottom: 2px solid #d4af37;
        box-shadow: 0 4px 15px rgba(0,0,0,0.5);
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .nav-brand {
        font-family: 'Cinzel', serif;
        color: #d4af37;
        font-size: 22px;
        font-weight: 700;
        letter-spacing: 2px;
    }

    .nav-buttons {
        display: flex;
        gap: 12px;
    }

    .nav-btn {
        padding: 10px 20px;
        border: 1px solid #d4af37;
        border-radius: 6px;
        background: transparent;
        color: #d4af37;
        font-family: 'Cinzel', serif;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s ease;
        letter-spacing: 1px;
    }

    .nav-btn:hover:not(:disabled) {
        background: #d4af37;
        color: #0a0a0a;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
    }

    /* Botón deshabilitado (tono oscuro) */
    .nav-btn:disabled {
        background: #1a1a1a;
        border-color: #3a3a50;
        color: #555;
        cursor: not-allowed;
        opacity: 0.6;
    }

    /* Botón activo (logueado) */
    .nav-btn.active {
        background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);
        color: #0a0a0a;
    }

    .hidden {
        display: none !important;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .top-nav {
            flex-direction: column;
            gap: 15px;
            padding: 15px;
        }
        .nav-buttons {
            flex-wrap: wrap;
            justify-content: center;
        }
        .nav-btn {
            padding: 8px 14px;
            font-size: 12px;
        }
    }

    /* ===== MODAL MIS PEDIDOS ===== */
    .modal-overlay {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0,0,0,0.8);
        backdrop-filter: blur(5px);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        padding: 20px;
    }

    .modal-overlay.active {
        display: flex;
    }

    .modal-content {
        background: #1e1e2f;
        border: 2px solid #d4af37;
        border-radius: 12px;
        padding: 30px;
        max-width: 900px;
        width: 100%;
        max-height: 85vh;
        overflow-y: auto;
        box-shadow: 0 20px 60px rgba(0,0,0,0.7);
        animation: slideDown 0.4s ease;
    }

    @keyframes slideDown {
        from { transform: translateY(-30px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #3a3a50;
        padding-bottom: 15px;
        margin-bottom: 20px;
    }

    .modal-header h2 {
        color: #d4af37;
        font-family: 'Cinzel', serif;
        margin: 0;
    }

    .close-modal {
        background: none;
        border: none;
        color: #d4af37;
        font-size: 28px;
        cursor: pointer;
        transition: transform 0.3s;
    }

    .close-modal:hover {
        transform: rotate(90deg);
        color: #ff4757;
    }

    /* Tabla de pedidos */
    .orders-table {
        width: 100%;
        border-collapse: collapse;
        background: #151515;
        border-radius: 8px;
        overflow: hidden;
    }

    .orders-table thead {
        background: linear-gradient(135deg, #d4af37, #b8941f);
    }

    .orders-table th {
        padding: 14px;
        text-align: left;
        color: #0a0a0a;
        font-family: 'Cinzel', serif;
        font-weight: 700;
        font-size: 14px;
    }

    .orders-table td {
        padding: 14px;
        border-bottom: 1px solid #2a2a3d;
        color: #e0e0e0;
        font-size: 14px;
    }

    .orders-table tbody tr:hover {
        background: #2a2a3d;
    }

    /* Badges de estado */
    .status-badge {
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        display: inline-block;
    }

    .status-entregado { background: rgba(46, 213, 115, 0.2); color: #2ed573; }
    .status-pendiente { background: rgba(243, 156, 18, 0.2); color: #f39c12; }
    .status-confirmado { background: rgba(52, 152, 219, 0.2); color: #3498db; }
    .status-preparando { background: rgba(155, 89, 182, 0.2); color: #9b59b6; }
    .status-en_reparto { background: rgba(230, 126, 34, 0.2); color: #e67e22; }
    .status-cancelado { background: rgba(255, 71, 87, 0.2); color: #ff4757; }

    @media (max-width: 768px) {
        .orders-table { font-size: 12px; }
        .orders-table th, .orders-table td { padding: 10px 6px; }
    }