/* --- VARIABLES & SETUP --- */
        :root {
            --red: #FF1F1F;
            --red-dark: #b30000;
            --bg-body: #0a0a0a;
            --bg-card: rgba(28, 28, 28, 0.65); /* Made transparent for glass */
            --bg-header: rgba(10, 10, 10, 0.75); /* More transparent */
            --bg-cart: rgba(28, 28, 28, 0.75); /* Transparent for glass */
            --bg-cart-item: rgba(255, 255, 255, 0.05);
            --bg-modal: rgba(20, 20, 20, 0.75); /* Transparent for glass */
            --input-bg: rgba(15, 15, 15, 0.8);
            --text-main: #ffffff;
            --text-secondary: #a0a0a0;
            --border-color: rgba(255, 255, 255, 0.1);
            --shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
            --glow: 0 0 20px rgba(255, 31, 31, 0.3);
            --success: #00e676;
            --warning: #ffea00;
        }

        [data-theme="light"] {
            --bg-body: #f0f0f0;
            --bg-card: rgba(255, 255, 255, 0.65);
            --bg-header: rgba(255, 255, 255, 0.75);
            --bg-cart: rgba(255, 255, 255, 0.75);
            --bg-cart-item: rgba(0, 0, 0, 0.05);
            --bg-modal: rgba(255, 255, 255, 0.75);
            --input-bg: rgba(245, 245, 245, 0.8);
            --text-main: #111111;
            --text-secondary: #666666;
            --border-color: rgba(0, 0, 0, 0.1);
            --shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
            --glow: 0 0 15px rgba(255, 31, 31, 0.2);
            --bg-modal-glass: rgba(255, 255, 255, 0.95);
            /* Light mode glass */
        }

        /* Default Dark Mode Glass (Ensure default defines it too) */
        :root {
            --bg-modal-glass: rgba(10, 10, 15, 0.85);
        }

        /* SCROLLBAR PERSONALIZADO HIDDEN FOR NATIVE APP FEEL */
        ::-webkit-scrollbar {
            display: none;
        }

        ::-webkit-scrollbar-track {
            background: var(--bg-body);
        }

        ::-webkit-scrollbar-thumb {
            background: #333;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--red);
        }

        * {
            scrollbar-width: none; /* Hide on Firefox */
            -ms-overflow-style: none; /* Hide on IE/Edge */
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Montserrat', sans-serif;
            background-color: var(--bg-body);
            color: var(--text-main);
            overflow-x: hidden;
            width: 100vw;
            transition: background 0.3s, color 0.3s;
            padding-top: 80px;
        }

        .btn {
            cursor: pointer;
            border: none;
            outline: none;
            font-family: inherit;
            transition: 0.3s;
        }

        /* --- HEADER & SEARCH --- */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 100;
            background: var(--bg-header);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            padding: 0.8rem 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border-color);
            gap: 20px;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: 900;
            letter-spacing: 2px;
            color: var(--text-main);
            text-decoration: none;
            white-space: nowrap;
        }

        .logo-square {
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: var(--red);
            margin-left: 2px;
        }

        /* --- ANIMATED SEARCH BAR (Background Preserved) --- */
        .search-container {
            position: relative;
            flex-grow: 1;
            max-width: 650px;
            margin: 0 20px;
            /* Prevent overlap */

            /* Background Preserved */
            background: var(--bg-cart-item);
            border: 1px solid var(--border-color);
            border-radius: 30px;

            display: flex;
            align-items: center;
            padding: 5px 15px;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        /* Focus Animation: Glow & Border */
        .search-container:focus-within {
            border-color: var(--red);
            box-shadow: 0 0 15px rgba(255, 31, 31, 0.2);
            transform: scale(1.02);
            background: var(--bg-cart-item);
            /* Ensure it stays same */
        }

        .search-input {
            width: 100%;
            background: transparent;
            /* Transparent to show container bg */
            border: none;
            padding: 10px 10px 10px 10px;
            color: var(--text-main);
            font-family: inherit;
            font-size: 0.95rem;
            outline: none;
            font-weight: 500;
        }

        .search-input::placeholder {
            color: var(--text-secondary);
            opacity: 0.7;
        }

        .search-icon {
            color: var(--text-secondary);
            transition: 0.3s;
            flex-shrink: 0;
            position: static;
            /* Reset absolute positioning */
            transform: none;
            margin-right: 5px;
        }

        .search-input:focus {
            box-shadow: none;
            /* Handled by container */
        }

        .search-container:focus-within .search-icon {
            color: var(--red);
            filter: drop-shadow(0 0 2px var(--red));
            transform: scale(1.1);
        }

        .search-dropdown {
            position: absolute;
            top: 110%;
            left: 0;
            width: 100%;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1);
            overflow: hidden;
            z-index: 101;
        }

        .search-dropdown.active {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .search-section-title {
            padding: 10px 15px;
            font-size: 0.7rem;
            font-weight: 800;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 1px;
            background: rgba(255, 255, 255, 0.03);
        }

        .search-result-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 15px;
            cursor: pointer;
            transition: 0.2s;
            border-bottom: 1px solid rgba(255, 255, 255, 0.03);
        }

        .search-result-item:last-child {
            border-bottom: none;
        }

        .search-result-item:hover {
            background: rgba(255, 255, 255, 0.05);
            padding-left: 20px;
        }

        .s-res-img {
            width: 35px;
            height: 35px;
            border-radius: 6px;
            object-fit: cover;
        }

        .s-res-info {
            display: flex;
            flex-direction: column;
        }

        .s-res-name {
            font-weight: 700;
            font-size: 0.9rem;
            color: var(--text-main);
        }

        .s-res-price {
            font-size: 0.8rem;
            color: var(--red);
            font-weight: 600;
        }

        .s-cat-item {
            color: var(--text-main);
            font-weight: 600;
            font-size: 0.9rem;
        }

        .s-cat-item span {
            color: var(--red);
            margin-right: 8px;
        }

        .mode-switcher {
            display: none;
            /* Hidden by default */
            background: var(--bg-cart-item);
            padding: 4px;
            border-radius: 30px;
            border: 1px solid var(--border-color);
            margin: 0;
        }

        .mode-btn {
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--text-secondary);
            background: transparent;
            border: none;
            transition: 0.2s;
        }

        .mode-btn.active {
            background-color: var(--text-main);
            color: var(--bg-body);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        .mode-btn.admin-active {
            background-color: var(--red);
            color: white;
        }

        .nav-icons {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .nav-capsule {
            display: flex;
            align-items: center;
            gap: 8px;
            background: var(--bg-cart-item);
            padding: 4px 10px;
            border-radius: 30px;
            border: 1px solid var(--border-color);
        }

        .theme-toggle,
        .cart-trigger,
        .fav-trigger,
        .nav-icon-premium {
            background: none;
            color: var(--text-main);
            font-size: 1.2rem;
            padding: 8px;
            border: none;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: 0.3s;
        }

        .nav-icon-premium:hover {
            background: rgba(255, 255, 255, 0.1);
            color: var(--red);
        }

        .cart-trigger,
        .fav-trigger {
            position: relative;
            font-size: 1.5rem;
        }

        .cart-count,
        .fav-count {
            position: absolute;
            top: -5px;
            right: -8px;
            background-color: var(--red);
            color: #ffffff;
            font-size: 0.7rem;
            font-weight: 700;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transform: scale(0);
            transition: 0.3s;
        }

        .cart-count.active,
        .fav-count.active {
            opacity: 1;
            transform: scale(1);
        }

        @keyframes popBounce {
            0% { transform: scale(1); }
            40% { transform: scale(1.4); }
            60% { transform: scale(0.9); }
            80% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

        .bounce-anim {
            animation: popBounce 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        /* --- HERO RENOVADO --- */
        .hero {
            position: relative;
            height: 55vh;
            min-height: 450px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            overflow: hidden;
            margin-top: -20px;
            background: transparent;
        }

        .hero-backdrop {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--bg-body);
            z-index: -2;
        }

        .hero::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 120px;
            background: linear-gradient(to bottom, transparent, var(--bg-body));
            pointer-events: none;
            z-index: 1;
        }

        .hero-content {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .hero-title {
            font-size: 4rem;
            font-weight: 900;
            line-height: 0.95;
            margin-bottom: 1.5rem;
            text-transform: uppercase;
            letter-spacing: -2px;
            display: flex;
            flex-direction: column;
        }

        .line-1 {
            display: block;
            opacity: 0;
            transform: translateY(30px);
            animation: textEnter 0.8s cubic-bezier(0.2, 1, 0.3, 1) forwards;
        }

        .line-2 {
            display: block;
            color: var(--red);
            position: relative;
            opacity: 0;
            transform: translateY(30px);
            animation: textEnter 0.8s cubic-bezier(0.2, 1, 0.3, 1) 0.15s forwards;
            transition: 0.3s;
        }

        .hero-subtitle {
            color: var(--text-secondary);
            font-size: 1.1rem;
            max-width: 500px;
            margin-bottom: 2.5rem;
            font-weight: 500;
            opacity: 0;
            transform: translateY(20px);
            animation: textEnter 0.8s cubic-bezier(0.2, 1, 0.3, 1) 0.4s forwards;
        }

        .hero-cta {
            background: transparent;
            color: var(--text-main);
            border: 1px solid var(--border-color);
            padding: 14px 35px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 0.9rem;
            border-radius: 50px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            gap: 10px;
            opacity: 0;
            transform: translateY(20px);
            animation: textEnter 0.8s cubic-bezier(0.2, 1, 0.3, 1) 0.6s forwards;
            transition: 0.3s;
            backdrop-filter: blur(10px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        .hero-cta::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: 0.5s;
        }

        .hero-cta:hover {
            border-color: var(--red);
            background: rgba(255, 31, 31, 0.1);
            color: var(--red);
            box-shadow: 0 0 20px rgba(255, 31, 31, 0.2);
            padding-right: 45px;
        }

        .hero-cta svg {
            transition: 0.3s;
        }

        .hero-cta:hover svg {
            transform: translateX(5px);
        }

        .hero-cta:hover::before {
            left: 100%;
        }

        @keyframes textEnter {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* --- NAV (3 LEVELS) --- */
        .nav-wrapper {
            position: relative;
            z-index: 90;
            background: var(--bg-body);
            padding: 25px 0 0 0;
            border-bottom: 1px solid var(--border-color);
            transition: background 0.3s ease;
            display: flex;
            flex-direction: column;
        }

        .cat-scroll-outer {
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }

        .cat-scroll-outer::-webkit-scrollbar {
            display: none;
        }

        .cat-scroll {
            display: inline-flex;
            gap: 20px;
            padding: 40px 25px 25px 25px;
            align-items: flex-end;
            height: 200px;
            z-index: 2;
            position: relative;
        }

        .sub-nav-wrapper {
            height: 0;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            opacity: 0;
            transform: translateY(-10px);
            background: rgba(255, 255, 255, 0.02);
            position: relative;
            z-index: 1;
        }

        .sub-nav-wrapper.show {
            height: 60px;
            opacity: 1;
            transform: translateY(0);
            border-top: 1px solid var(--border-color);
        }

        .franchise-wrapper {
            background: rgba(0, 0, 0, 0.2);
        }

        .sub-scroll-outer {
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            height: 100%;
        }

        .sub-scroll-outer::-webkit-scrollbar {
            display: none;
        }

        .sub-scroll {
            display: inline-flex;
            gap: 10px;
            align-items: center;
            height: 100%;
            padding: 0 25px;
        }

        .sub-link {
            color: var(--text-secondary);
            font-size: 0.85rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1);
            white-space: nowrap;
            padding: 10px 24px;
            border-radius: 50px;
            border: 1px solid rgba(255, 255, 255, 0.05);
            background: rgba(255, 255, 255, 0.02);
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
            text-transform: uppercase;
            letter-spacing: 1px;
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(5px);
        }

        .sub-link:hover {
            color: var(--text-main);
            background-color: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.15);
            transform: translateY(-2px);
        }

        .sub-link.active {
            color: var(--bg-body);
            background-color: var(--text-main);
            border-color: var(--text-main);
            box-shadow: 0 5px 20px rgba(255, 255, 255, 0.25);
            font-weight: 900;
            transform: translateY(-2px);
        }

        .sub-link.active-red {
            color: white;
            background-color: var(--red);
            border-color: var(--red);
            box-shadow: 0 5px 20px rgba(255, 31, 31, 0.4);
            font-weight: 900;
            transform: translateY(-2px);
        }

        /* Cat Cards */
        .cat-card {
            min-width: 130px;
            width: 130px;
            height: 110px;
            border-radius: 16px;
            position: relative;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            background-color: var(--bg-card);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            margin-top: 20px;
            overflow: visible !important;
            touch-action: manipulation;
            /* Fix for mobile tap delay */
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            /* Remove default blue highlight */
        }

        .cat-card-bg-wrapper {
            position: absolute;
            inset: 0;
            border-radius: 14px;
            overflow: hidden;
            z-index: 0;
            background-color: var(--bg-cart-item);
        }

        .cat-bg-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: grayscale(100%) brightness(0.6);
            transition: 0.4s ease;
        }

        .cat-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 10%, transparent);
            z-index: 1;
        }

        .cat-fg-img {
            position: absolute;
            bottom: 5px;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            height: auto;
            max-height: 150%;
            object-fit: contain;
            transition: transform 0.3s ease;
            z-index: 2;
            pointer-events: none;
        }

        .cat-name {
            position: absolute;
            bottom: 10px;
            left: 0;
            width: 100%;
            text-align: center;
            color: white;
            font-weight: 800;
            text-transform: uppercase;
            font-size: 0.85rem;
            z-index: 3;
            letter-spacing: 1px;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
        }

        @media (hover: hover) {
            .cat-card:hover {
                transform: translateY(-5px);
                border-color: var(--text-secondary);
            }

            .cat-card:hover .cat-bg-img {
                filter: grayscale(0%) brightness(1);
                transform: scale(1.1);
            }

            .cat-card:hover .cat-fg-img {
                transform: translateX(-50%) scale(1.15) translateY(-10px);
            }
        }

        .cat-card:active {
            transform: scale(0.95);
            border-color: var(--text-secondary);
        }

        .cat-card:active .cat-bg-img,
        .cat-card.active .cat-bg-img {
            filter: grayscale(0%) brightness(1);
            transform: scale(1.1);
        }

        .cat-card:active .cat-fg-img,
        .cat-card.active .cat-fg-img {
            transform: translateX(-50%) scale(1.15) translateY(-10px);
        }

        .cat-card.active {
            border-color: var(--red);
            box-shadow: 0 0 15px rgba(255, 31, 31, 0.3);
            transform: translateY(-5px);
            /* Ensure selected stays popped up */
        }

        .cat-card.active .cat-name {
            color: var(--red);
        }

        .cat-edit-btn {
            position: absolute;
            top: -10px;
            right: -10px;
            width: 25px;
            height: 25px;
            background: var(--red);
            color: white;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 0.8rem;
            z-index: 10;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
            cursor: pointer;
            border: 2px solid var(--bg-body);
        }

        /* --- CATALOG --- */
        .catalog {
            padding: 2rem 5%;
            max-width: 1400px;
            margin: 0 auto;
            min-height: 60vh;
        }

        .section-header {
            margin-bottom: 2rem;
            display: flex;
            align-items: baseline;
            gap: 15px;
        }

        .section-title {
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--text-main);
            text-transform: uppercase;
        }

        .section-subtitle {
            color: var(--text-secondary);
            font-size: 0.9rem;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 2rem;
        }

        .fade-in {
            animation: fadeIn 0.5s ease-out forwards;
            opacity: 0;
        }

        @keyframes fadeIn {
            to {
                opacity: 1;
            }
        }

        .card {
            background-color: var(--bg-card);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border-radius: 12px;
            overflow: hidden;
            position: relative;
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease;
            box-shadow: var(--shadow);
            display: flex;
            flex-direction: column;
            border: 1px solid var(--border-color);
            cursor: pointer;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }

        /* --- SKELETON LOADER --- */
        .skeleton-card {
            background-color: var(--bg-card);
            backdrop-filter: blur(15px);
            border-radius: 12px;
            height: 380px; /* match approximate card height */
            position: relative;
            overflow: hidden;
            border: 1px solid var(--border-color);
        }
        .skeleton-card::after {
            content: "";
            position: absolute;
            top: 0; left: -100%; width: 50%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
            animation: skeletonGlow 1.5s infinite;
        }
        @keyframes skeletonGlow {
            100% { left: 100%; }
        }

        .card:hover {
            transform: translateY(-8px) scale(1.02);
            /* Sombra principal oscura + Haz original pero con rojo al 100% de intensidad */
            box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 20px rgb(255, 31, 31);
            border-color: rgba(255, 255, 255, 0.05); 
        }

        [data-theme="dark"] .card:hover {
            box-shadow: 0 10px 30px rgba(0,0,0,0.8), 0 0 20px rgb(255, 31, 31);
            border-color: rgba(255, 255, 255, 0.05);
        }

        .card-img-wrapper {
            width: 100%;
            height: 280px;
            position: relative;
            background-color: #000;
            overflow: hidden;
        }

        .card-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: 0.5s ease;
        }

        .card:hover .card-img {
            transform: scale(1.05);
        }

        .badge-top {
            position: absolute;
            top: 10px;
            left: 10px;
            background: var(--red);
            color: white;
            font-size: 0.7rem;
            font-weight: 800;
            padding: 4px 8px;
            border-radius: 4px;
            text-transform: uppercase;
            z-index: 2;
        }

        .fav-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(5px);
            width: 35px;
            height: 35px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #ffffff;
            font-size: 1.1rem;
            z-index: 10;
            transition: 0.2s;
            border: none;
        }

        .fav-btn:hover {
            transform: scale(1.1);
            background: #ffffff;
            color: var(--red);
        }

        .fav-btn.active {
            color: var(--red);
            background: #ffffff;
        }

        .admin-controls {
            position: absolute;
            bottom: 10px;
            right: 10px;
            display: flex;
            gap: 8px;
            z-index: 50;
        }

        .admin-btn {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: white;
            font-size: 1rem;
            transition: 0.2s;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
            pointer-events: auto;
        }

        .admin-edit {
            background-color: #2196F3;
        }

        .admin-delete {
            background-color: var(--red);
        }

        .card-info {
            padding: 1.2rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .card-cat {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--red);
            font-weight: 700;
            margin-bottom: 0.4rem;
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
        }

        .card-title {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 0.4rem;
            line-height: 1.4;
            color: var(--text-main);
        }

        .card-price {
            font-size: 1.2rem;
            font-weight: 800;
            margin-top: auto;
            margin-bottom: 0.8rem;
            color: var(--text-main);
        }

        .view-btn {
            width: 100%;
            padding: 0.8rem;
            background-color: transparent;
            border: 1px solid var(--text-main);
            color: var(--text-main);
            font-weight: 700;
            text-transform: uppercase;
            font-size: 0.8rem;
            border-radius: 8px;
            transition: 0.3s;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
        }

        .view-btn:hover {
            background-color: var(--text-main);
            color: var(--bg-card);
        }

        /* --- CART & SIDEBAR --- */
        .cart-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 150;
            opacity: 0;
            visibility: hidden;
            transition: 0.3s;
        }

        .cart-overlay.open {
            opacity: 1;
            visibility: visible;
        }

        .cart-sidebar {
            position: fixed;
            top: 0;
            right: 0;
            /* Always anchored to right */
            width: 400px;
            max-width: 85%;
            height: 100%;
            background: var(--bg-cart);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border-left: 1px solid var(--border-color);
            z-index: 200;
            transform: translateX(100%);
            /* Hide by moving right */
            transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
            display: flex;
            flex-direction: column;
            box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
            color: var(--text-main);
        }

        .cart-sidebar.open {
            transform: translateX(0);
            /* Bring into view */
        }

        .cart-header {
            padding: 2rem;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .close-cart {
            background: none;
            color: var(--text-main);
            font-size: 1.5rem;
        }

        .cart-items {
            flex-grow: 1;
            overflow-y: auto;
            padding: 2rem;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .cart-item {
            display: flex;
            gap: 15px;
            background: var(--bg-cart-item);
            padding: 10px;
            border-radius: 8px;
            align-items: center;
        }

        .cart-item img {
            width: 60px;
            height: 60px;
            border-radius: 6px;
            object-fit: cover;
        }

        .cart-footer {
            padding: 2rem;
            background: rgba(0, 0, 0, 0.1);
            border-top: 1px solid var(--border-color);
        }

        .total-row {
            display: flex;
            justify-content: space-between;
            font-size: 1.5rem;
            font-weight: 800;
            margin-bottom: 1.5rem;
        }

        .checkout-btn {
            width: 100%;
            padding: 1.2rem;
            background-color: var(--red);
            color: #ffffff;
            font-weight: 800;
            text-transform: uppercase;
            font-size: 1rem;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
        }

        .btn-trash {
            background: transparent;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            padding: 8px;
            border-radius: 8px;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: auto;
        }

        .btn-trash:hover {
            color: var(--red);
            background-color: rgba(255, 31, 31, 0.1);
        }

        .qty-controls {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 8px;
        }

        .btn-qty {
            width: 22px;
            height: 22px;
            background: rgba(255, 255, 255, 0.1);
            color: var(--text-main);
            border: 1px solid var(--border-color);
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            cursor: pointer;
            font-size: 1rem;
            line-height: 1;
            padding: 0;
            transition: 0.2s;
        }

        .btn-qty:hover {
            background: var(--text-main);
            color: var(--bg-body);
        }

        .fav-actions {
            display: flex;
            flex-direction: column;
            gap: 5px;
            margin-left: auto;
        }

        .btn-mini {
            padding: 4px 8px;
            font-size: 0.7rem;
            border-radius: 4px;
            font-weight: 700;
        }

        .btn-add-fav {
            background: var(--text-main);
            color: var(--bg-body);
        }

        .btn-rem-fav {
            background: transparent;
            color: var(--text-secondary);
            border: 1px solid var(--border-color);
        }

        /* --- MODALS GENERAL --- */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(8px);
            z-index: 1000;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            visibility: hidden;
            transition: 0.3s ease;
        }

        .modal.open {
            opacity: 1;
            visibility: visible;
        }

        .modal-content {
            background-color: var(--bg-modal);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border-radius: 20px;
            box-shadow: var(--shadow), 0 0 0 1px rgba(255, 255, 255, 0.05);
            border: 1px solid var(--border-color);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transform: scale(0.9) translateY(20px);
            opacity: 0;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .modal.open .modal-content {
            transform: scale(1) translateY(0);
            opacity: 1;
        }

        /* --- USER DETAILS MODAL (ESTILO ZARA/MANGO) --- */
        .modal-zara {
            width: 100vw;
            height: 100vh;
            max-width: none;
            border-radius: 0;
            border: none;
            background: var(--bg-body);
        }

        .modal-close-btn-zara {
            position: absolute;
            top: 35px;
            right: 35px;
            z-index: 100;
            width: 45px;
            height: 45px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            color: var(--text-main);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .modal-close-btn-zara:hover {
            transform: scale(1.1) rotate(90deg);
            background: var(--red);
            color: white;
            border-color: var(--red);
            box-shadow: 0 4px 15px rgba(255, 31, 31, 0.4);
        }

        .zara-layout {
            display: flex;
            width: 100%;
            height: 100vh;
            overflow: hidden;
            background: var(--bg-body);
        }

        /* COL 1: FOTO FIJA GIGANTE */
        .zara-gallery-col {
            flex: 0 0 48%;
            height: 100vh;
            background: var(--bg-body); /* Matching main site */
            display: flex;
            justify-content: center;
            align-items: center;
            position: sticky;
            top: 0;
            overflow: hidden;
        }

        [data-theme="dark"] .zara-gallery-col {
            background: var(--bg-body);
        }

        .zara-main-image-wrapper {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
        }

        .zara-main-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            cursor: zoom-in;
            transition: opacity 0.3s ease;
        }

        .zara-main-img.img-loading {
            opacity: 0.15;
            animation: img-pulse 1s ease-in-out infinite;
        }

        @keyframes img-pulse {
            0%, 100% { opacity: 0.15; }
            50% { opacity: 0.3; }
        }

        /* COL 2: MINIATURAS VERTICALES SCROLL */
        .zara-thumbs-col {
            flex: 0 0 20%;
            height: 100vh;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 4px;
            background: var(--bg-modal);
            scroll-behavior: smooth;
        }

        [data-theme="dark"] .zara-thumbs-col {
            background: var(--bg-modal);
        }

        .zara-thumbs-col::-webkit-scrollbar {
            width: 4px;
        }

        .zara-thumbs-col::-webkit-scrollbar-thumb {
            background-color: transparent;
        }

        .zara-thumbs-col:hover::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, 0.2);
        }

        [data-theme="dark"] .zara-thumbs-col:hover::-webkit-scrollbar-thumb {
            background-color: rgba(255, 255, 255, 0.2);
        }

        .thumb-img {
            width: 100%;
            height: auto;
            aspect-ratio: 3/4;
            object-fit: cover;
            cursor: pointer;
            opacity: 1;
            /* Removed opacity fade per user request */
            transition: transform 0.3s ease;
        }

        .thumb-img:hover,
        .thumb-img.active {
            opacity: 1;
        }

        /* COL 3: INFO Y COMPRA */
        .zara-info-col {
            flex: 0 0 32%;
            height: 100vh;
            overflow-y: auto;
            padding: 80px 60px 80px 50px;
            background: var(--bg-card); /* Site modal background */
            color: var(--text-main);
            font-family: inherit; /* Use site typography */
            border-left: 1px solid var(--border-color);
        }

        [data-theme="dark"] .zara-info-col {
            background: var(--bg-card);
            color: var(--text-main);
            border-left: 1px solid var(--border-color);
        }

        .zara-info-col::-webkit-scrollbar {
            width: 6px;
        }

        .zara-info-col::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, 0.1);
        }

        [data-theme="dark"] .zara-info-col::-webkit-scrollbar-thumb {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .zara-info-header {
            margin-bottom: 35px;
        }

        #detail-cat {
            font-size: 0.75rem;
            color: var(--red);
            font-weight: 800;
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-bottom: 8px;
            display: block;
        }

        .zara-title {
            font-size: 1.6rem;
            font-weight: 600;
            line-height: 1.3;
            margin-bottom: 12px;
            letter-spacing: -0.5px;
            font-family: 'Montserrat', sans-serif;
        }

        .zara-price {
            font-size: 1.35rem;
            font-weight: 700;
            margin-bottom: 8px;
            letter-spacing: 0.5px;
        }

        .mobile-bottom-bar {
            margin-top: 30px;
        }

        .mobile-price-qty-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
        }

        .zara-price-box {
            display: flex;
            flex-direction: column;
        }

        .zara-price-label {
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .zara-tax-notice {
            font-size: 0.75rem;
            color: var(--text-secondary);
            margin-bottom: 25px;
            padding-bottom: 25px;
            border-bottom: 1px solid var(--border-color);
        }

        [data-theme="dark"] .zara-tax-notice {
            color: var(--text-secondary);
            border-bottom-color: var(--border-color);
        }

        .zara-variants-box {
            margin-bottom: 25px;
        }

        .zara-variants-label {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .zara-label {
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .variant-grid.zara-variants {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .variant-btn {
            padding: 12px 18px;
            border: 1px solid var(--border-color);
            background: rgba(255, 255, 255, 0.02);
            color: var(--text-secondary);
            font-size: 0.8rem;
            cursor: pointer;
            min-width: 65px;
            text-align: center;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 8px;
            position: relative;
            overflow: hidden;
            transform-origin: center;
        }

        [data-theme="dark"] .variant-btn {
            border-color: var(--border-color);
            color: var(--text-secondary);
            background: rgba(0, 0, 0, 0.2);
        }

        .variant-btn:hover {
            border-color: var(--text-main);
            color: var(--text-main);
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        [data-theme="dark"] .variant-btn:hover {
            border-color: #fff;
            color: #fff;
        }

        .variant-btn.selected {
            border-color: var(--text-main);
            background: var(--text-main);
            color: var(--bg-body); /* Forzado a usar el color del fondo (Blanco en Claro / Negro en Oscuro) */
            font-weight: 800;
            transform: translateY(0); /* Clean flat look from screenshot */
            box-shadow: none; /* Removed heavy popup to match screenshot perfectly */
        }

        [data-theme="dark"] .variant-btn.selected {
            border-color: #fff;
            background: #fff;
            color: #000;
            box-shadow: none;
            transform: translateY(0);
        }

        .zara-qty-box {
            margin-bottom: 0;
        }

        .zara-qty-selector {
            display: flex;
            align-items: center;
            border: 1px solid var(--border-color);
            background: rgba(255, 255, 255, 0.02);
            width: fit-content;
            margin-top: 10px;
            border-radius: 8px;
            overflow: hidden;
        }

        [data-theme="dark"] .zara-qty-selector {
            border-color: var(--border-color);
        }

        .zara-qty-btn {
            width: 45px;
            height: 45px;
            background: transparent;
            border: none;
            font-size: 1.2rem;
            cursor: pointer;
            color: var(--text-secondary);
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.2s;
        }

        [data-theme="dark"] .zara-qty-btn {
            color: var(--text-secondary);
        }

        .zara-qty-btn:hover {
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-main);
        }

        [data-theme="dark"] .zara-qty-btn:hover {
            background: rgba(255, 255, 255, 0.05);
        }

        .zara-qty-val {
            width: 45px;
            text-align: center;
            font-size: 0.95rem;
            font-weight: 600;
        }

        .zara-benefits {
            margin-bottom: 30px;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        [data-theme="dark"] .zara-benefit-item {
            color: var(--text-secondary);
        }

        .zara-action-row {
            display: flex;
            gap: 15px;
            margin-bottom: 40px;
        }

        .zara-add-btn {
            flex: 1;
            background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
            color: white;
            padding: 20px;
            border: none;
            font-size: 0.95rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1px;
            cursor: pointer;
            border-radius: 12px;
            transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
            box-shadow: 0 4px 20px rgba(255, 31, 31, 0.35);
            position: relative;
            overflow: hidden;
        }

        .zara-add-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
            transform: skewX(-20deg);
            transition: none;
        }

        .zara-add-btn:hover::before {
            animation: shineLeftToRight 0.8s forwards;
        }

        @keyframes shineLeftToRight {
            0% { left: -100%; }
            100% { left: 200%; }
        }

        [data-theme="dark"] .zara-add-btn {
            background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
            color: #fff;
        }

        .zara-add-btn:hover {
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 10px 25px rgba(255, 31, 31, 0.6);
        }

        [data-theme="dark"] .zara-add-btn:hover {
            box-shadow: 0 10px 25px rgba(255, 31, 31, 0.6);
        }

        .zara-add-btn:active {
            transform: translateY(1px) scale(0.98);
        }

        .zara-fav-btn {
            width: 55px;
            flex-shrink: 0;
            background: rgba(255, 255, 255, 0.02);
            color: var(--text-secondary);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
            backdrop-filter: blur(5px);
        }

        [data-theme="dark"] .zara-fav-btn {
            color: var(--text-secondary);
            border-color: rgba(255, 255, 255, 0.15);
        }

        .zara-fav-btn:hover {
            color: var(--red);
            border-color: var(--red);
            transform: scale(1.1);
            background: rgba(255, 31, 31, 0.05);
            box-shadow: 0 5px 15px rgba(255, 31, 31, 0.2);
        }

        .zara-fav-btn:active {
            transform: scale(0.95);
        }

        @keyframes heartbeat {
            0% { transform: scale(1); }
            15% { transform: scale(1.3); }
            30% { transform: scale(1); }
            45% { transform: scale(1.3); }
            60% { transform: scale(1); }
            100% { transform: scale(1); }
        }

        .heartbeat-anim {
            animation: heartbeat 0.8s ease-in-out;
        }

        .zara-accordions {
            border-top: 1px solid var(--border-color);
        }

        .zara-accordion {
            border-bottom: 1px solid var(--border-color);
        }

        .zara-accordion summary {
            padding: 22px 0;
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--text-main);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            cursor: pointer;
            list-style: none;
            /* Hide default arrow */
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .zara-accordion summary::-webkit-details-marker {
            display: none;
        }

        .accordion-icon {
            font-size: 1.4rem;
            font-weight: 300;
            line-height: 1;
        }

        .zara-accordion[open] .accordion-icon {
            transform: rotate(45deg);
        }

        .zara-accordion-content {
            padding-bottom: 25px;
            animation: zaraFadeIn 0.3s ease;
        }

        @keyframes zaraFadeIn {
            from {
                opacity: 0;
                transform: translateY(-5px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .details-cat-pill {
            display: inline-block;
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-secondary);
            padding: 6px 12px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 20px;
            border-radius: 6px;
        }

        .zara-spec-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 12px;
            font-size: 0.85rem;
        }

        .zara-spec-label {
            color: var(--text-secondary);
        }

        .zara-spec-val {
            font-weight: 600;
            color: var(--text-main);
        }

        .zara-desc-text {
            font-size: 0.85rem;
            line-height: 1.7;
            color: var(--text-secondary);
            margin-top: 15px;
        }

        /* --- RESPONSIVE MODAL ZARA --- */
        @media (max-width: 900px) {
            .modal {
                align-items: flex-end; /* Align the bottom-sheet to the bottom */
                padding-top: 8vh;
            }

            .modal-details-content {
                height: 92vh;
                margin-top: auto;
                border-radius: 24px 24px 0 0;
                position: relative;
                display: block; /* Remove flex constraint completely */
                overflow-y: auto; /* This is the ONLY thing that scrolls */
                overflow-x: hidden;
                background: var(--bg-card); /* Ensure background paints completely */
            }

            .modal-close-btn-zara {
                top: 15px;
                right: 15px;
                width: 35px;
                height: 35px;
                z-index: 1000;
                background: rgba(10, 10, 10, 0.7);
                color: #fff;
            }

            .zara-layout {
                display: block; /* Native block flow, no height constraints */
                height: auto;
                padding: 15px;
                background: var(--bg-card);
                overflow: visible; 
            }

            .zara-gallery-col {
                flex: none;
                width: 100%;
                height: auto;
                position: relative;
            }

            .zara-main-image-wrapper {
                padding: 0;
                height: 300px; /* Constrained compact height */
                border-radius: 16px;
                overflow: hidden;
                box-shadow: 0 5px 20px rgba(0,0,0,0.3);
            }
            
            .zara-main-img {
                object-fit: cover;
                width: 100%;
                height: 100%;
            }

            .zara-thumbs-col {
                flex: none;
                width: auto;
                height: auto; /* CRITICAL FIX: Overriding the desktop 100vh height */
                display: flex; /* Override original grid/flex */
                flex-direction: row;
                justify-content: center;
                gap: 12px;
                padding: 8px 15px;
                margin: -40px auto 20px auto; /* Overlaps bottom of main image */
                background: rgba(10, 10, 10, 0.85); /* Pill background */
                backdrop-filter: blur(10px);
                border-radius: 16px;
                width: max-content;
                max-width: 90%;
                overflow-x: auto;
                border: 1px solid rgba(255,255,255,0.05);
                z-index: 10;
                position: relative;
            }

            .thumb-img {
                width: 45px;
                height: 45px;
                max-width: none;
                aspect-ratio: 1;
                flex-shrink: 0;
                border-radius: 8px;
                border: 2px solid transparent;
                object-fit: cover;
            }

            .thumb-img.active {
                border-color: var(--red);
            }

            [data-theme="dark"] .thumb-img {
                border-right-color: transparent; /* Remove old border */
            }

            .zara-info-col {
                display: block;
                width: 100%;
                height: auto;
                padding: 10px 5px 60px 5px; /* Extra padding bottom so it doesn't get cut off */
                overflow: visible; 
                border: none;
            }

            [data-theme="dark"] .zara-info-col {
                border-left: none;
            }
            
            .zara-info-header {
                margin-bottom: 20px;
            }

            .zara-title {
                font-size: 2rem;
                font-weight: 900;
                line-height: 1;
                margin-bottom: 20px;
                text-transform: uppercase;
            }
            
            #detail-cat {
                font-size: 0.7rem;
                color: var(--red);
                font-weight: 800;
                letter-spacing: 1px;
                text-transform: uppercase;
                margin-bottom: 5px;
                display: block;
            }

            .zara-price {
                font-size: 1.8rem;
                margin-bottom: 0;
            }

            .zara-tax-notice {
                display: none; /* Hide confusing notice on mobile */
            }
            
            .zara-variants-label {
                margin-bottom: 10px;
            }
            
            /* Rearrange Action Row to match reference image (Price Left, Qty Right, Add Bottom) */
            .mobile-bottom-bar {
                display: flex;
                flex-direction: column;
                gap: 15px;
                margin-top: 30px;
            }
            
            .mobile-price-qty-row {
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid var(--border-color);
                padding-bottom: 15px;
            }
            
            .mobile-price-qty-row .zara-price-box {
                display: flex;
                flex-direction: column;
            }
            
            .mobile-price-qty-row .zara-price-label {
                font-size: 0.7rem;
                font-weight: 700;
                color: var(--text-secondary);
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }
            
            .zara-qty-box {
                margin-bottom: 0; /* Clear existing margin */
            }
            
            .zara-qty-selector {
                margin-top: 0; /* Clear existing margin */
                border-radius: 20px;
                height: 40px;
                background: rgba(255,255,255,0.05);
                border: none;
            }
            
            .zara-qty-btn {
                height: 40px;
                width: 40px;
            }
            
            .zara-action-row {
                margin-bottom: 0;
                gap: 10px;
            }
            
            .zara-add-btn {
                padding: 16px;
                border-radius: 16px;
                font-size: 1.1rem;
            }
        }

        /* --- ADDRESS BOOK PREMIUM --- */
        .address-modal-content {
            max-width: 600px;
            width: 95%;
            border: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            background: var(--bg-modal);
            /* Ensure base background */
        }

        .modal-header-custom {
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding-bottom: 15px;
        }

        .main-action-btn {
            background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
            color: white;
            border: none;
            padding: 15px;
            border-radius: 12px;
            font-weight: 700;
            cursor: pointer;
            font-size: 1rem;
            width: 100%;
            margin-top: 20px;
            box-shadow: 0 4px 15px rgba(255, 31, 31, 0.3);
            transition: transform 0.2s;
        }

        .main-action-btn:hover {
            transform: translateY(-2px);
        }

        .confirm-btn {
            background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
            color: white;
            border: none;
            padding: 15px;
            border-radius: 12px;
            font-weight: 700;
            cursor: pointer;
            font-size: 1rem;
            width: 100%;
            margin-top: 20px;
            box-shadow: 0 4px 15px rgba(255, 31, 31, 0.3);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .back-btn {
            background: none;
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: var(--text-secondary);
            padding: 5px 10px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.9rem;
        }

        .back-btn:hover {
            border-color: white;
            color: white;
        }

        /* Cards Logic */
        .addresses-container {
            display: grid;
            grid-template-columns: 1fr;
            gap: 15px;
            max-height: 400px;
            overflow-y: auto;
        }

        .address-card {
            background: rgba(40, 40, 40, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 15px;
            border-radius: 12px;
            transition: all 0.2s;
            position: relative;
        }

        .address-card:hover {
            background: rgba(60, 60, 60, 0.8);
            border-color: var(--red);
        }

        .address-card h4 {
            margin: 0 0 5px 0;
            color: var(--text-main);
            font-size: 1.1rem;
        }

        .address-card p {
            margin: 0;
            color: var(--text-secondary);
            font-size: 0.9rem;
            line-height: 1.4;
        }

        .delete-addr-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            background: none;
            border: none;
            color: #666;
            font-size: 1.2rem;
            cursor: pointer;
            transition: 0.2s;
        }

        .delete-addr-btn:hover {
            color: var(--red);
            transform: scale(1.1);
            background: rgba(255, 69, 58, 0.15);
        }


        /* --- ADDRESS BOOK --- */
        .address-modal-content {
            max-width: 700px;
            width: 95%;
            border: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            /* For transitions */
        }

        /* Views Transition */
        .addr-view {
            transition: all 0.3s ease-in-out;
            width: 100%;
            opacity: 1;
        }

        .addr-view.hidden {
            display: none;
            opacity: 0;
            transform: translateX(20px);
        }

        /* ADDRESS LIST VIEW */
        .addr-list-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
            max-height: 400px;
            overflow-y: auto;
            padding-right: 5px;
        }

        .address-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            padding: 15px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            transition: all 0.2s ease;
            position: relative;
            overflow: hidden;
        }

        .address-card:hover {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .addr-card-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 5px;
        }

        .addr-card-icon {
            font-size: 1.5rem;
        }

        .addr-card-title {
            font-weight: 600;
            font-size: 1.1rem;
            color: var(--text-main);
        }

        .addr-card-detail {
            font-size: 0.9rem;
            color: var(--text-secondary);
            line-height: 1.4;
        }

        .addr-card-actions {
            display: flex;
            gap: 10px;
            margin-top: 10px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            padding-top: 10px;
        }

        .addr-action-btn {
            flex: 1;
            background: none;
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--text-secondary);
            padding: 6px;
            border-radius: 6px;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }

        .addr-action-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            color: var(--text-main);
        }

        .addr-action-btn.delete:hover {
            background: rgba(255, 59, 48, 0.1);
            border-color: rgba(255, 59, 48, 0.3);
            color: #ff453a;
        }

        .add-new-addr-btn {
            background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
            color: white;
            border: none;
            padding: 12px;
            border-radius: 12px;
            font-weight: 600;
            cursor: pointer;
            font-size: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            margin-top: 10px;
            box-shadow: 0 4px 12px rgba(255, 31, 31, 0.3);
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .add-new-addr-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(255, 31, 31, 0.4);
        }

        /* Form Back Button */
        .addr-back-btn {
            background: none;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 1rem;
            display: flex;
            align-items: center;
            gap: 5px;
            margin-bottom: 15px;
            padding: 0;
        }

        .addr-back-btn:hover {
            color: var(--text-main);
            text-decoration: underline;
        }

        /* --- LIGHTBOX --- */
        .lightbox {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.95);
            z-index: 2000;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            visibility: hidden;
            transition: 0.3s;
        }

        .lightbox.open {
            opacity: 1;
            visibility: visible;
        }

        .lightbox img {
            width: auto;
            height: auto;
            max-width: 95vw;
            max-height: 95vh;
            object-fit: contain;
            border-radius: 8px;
            box-shadow: 0 0 80px rgba(0, 0, 0, 0.8);
        }

        .lightbox-close {
            position: absolute;
            top: 20px;
            right: 30px;
            color: white;
            font-size: 2.5rem;
            cursor: pointer;
            background: none;
            border: none;
            z-index: 2002;
            transition: 0.2s;
        }

        .lightbox-close:hover {
            color: var(--red);
            transform: rotate(90deg);
        }

        .lb-nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.1);
            border: none;
            color: white;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            font-size: 2rem;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: 0.2s;
            z-index: 2001;
        }

        .lb-nav-btn:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        .lb-prev {
            left: 30px;
        }

        .lb-next {
            right: 30px;
        }

        /* --- PROFILE UI --- */
        .profile-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 30px;
        }

        .profile-avatar-wrapper {
            position: relative;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin-bottom: 20px;
            border: 2px solid var(--red);
            padding: 4px;
            background: rgba(255, 31, 31, 0.05);
        }

        .profile-avatar-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
            background: #111;
        }

        .profile-edit-avatar-btn {
            position: absolute;
            bottom: 0;
            right: 0;
            background: var(--red);
            border: none;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(255, 31, 31, 0.4);
            transition: transform 0.2s;
        }

        .profile-edit-avatar-btn:hover {
            transform: scale(1.1);
            background: #ff4d4d;
        }

        .profile-email-badge {
            background: rgba(255, 255, 255, 0.05);
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.9rem;
            color: var(--text-secondary);
            border: 1px solid var(--border-color);
            letter-spacing: 0.5px;
        }

        /* --- ADMIN MODALS --- */
        .modal-admin-content {
            width: 95%;
            max-width: 700px;
            max-height: 90vh;
        }

        .admin-modal-header {
            padding: 25px 35px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(to right, rgba(255, 255, 255, 0.02), transparent);
        }

        .admin-modal-title {
            font-size: 1.4rem;
            font-weight: 800;
            margin: 0;
            letter-spacing: 0.5px;
        }

        .admin-modal-body {
            padding: 35px;
            overflow-y: auto;
        }

        .admin-modal-footer {
            padding: 25px 35px;
            border-top: 1px solid var(--border-color);
            display: flex;
            justify-content: flex-end;
            gap: 15px;
            background: rgba(0, 0, 0, 0.2);
        }

        /* --- ANALYTICS DASHBOARD --- */
        .modal-analytics-content {
            width: 95%;
            max-width: 900px !important;
            margin: 0 auto;
            overflow: hidden;
        }

        .analytics-summary-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 15px;
            margin-bottom: 30px;
        }

        .analytics-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 15px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .analytics-card:hover {
            transform: translateY(-5px);
        }

        .analytics-card-title {
            font-size: 0.75rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-weight: 800;
            margin-bottom: 10px;
            line-height: 1.2;
        }

        .analytics-card-value {
            font-size: 1.6rem;
            font-weight: 800;
            color: var(--text-main);
            line-height: 1.1;
        }

        .analytics-charts-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        .analytics-chart-box {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
        }

        .analytics-chart-box canvas {
            width: 100% !important;
            height: 100% !important;
        }

        .analytics-chart-box.full-width {
            grid-column: span 2;
        }

        .analytics-chart-title {
            font-size: 1rem;
            font-weight: 700;
            color: var(--text-main);
            margin-bottom: 15px;
            align-self: flex-start;
        }

        .form-section-title {
            font-size: 0.85rem;
            font-weight: 800;
            color: var(--red);
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 10px;
            margin-bottom: 25px;
            margin-top: 10px;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 25px;
            margin-bottom: 25px;
        }

        .form-group {
            margin-bottom: 25px;
        }

        .form-label {
            display: block;
            margin-bottom: 10px;
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .form-input,
        .form-select {
            width: 100%;
            padding: 16px 20px;
            background-color: var(--input-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            color: var(--text-main);
            font-family: inherit;
            font-size: 0.95rem;
            outline: none;
            transition: all 0.3s ease;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .form-input:hover,
        .form-select:hover {
            border-color: rgba(255, 255, 255, 0.2);
            background-color: rgba(255, 255, 255, 0.02);
        }

        .form-input:focus,
        .form-select:focus {
            border-color: var(--red);
            box-shadow: 0 0 0 3px rgba(255, 31, 31, 0.15);
            transform: translateY(-2px);
            background-color: var(--input-bg);
        }

        .variants-box {
            background: rgba(255, 255, 255, 0.02);
            border-radius: 14px;
            padding: 20px;
            border: 1px solid var(--border-color);
        }

        .variant-header-row {
            display: grid;
            grid-template-columns: 2fr 2fr 1.5fr 40px;
            gap: 15px;
            margin-bottom: 15px;
            color: var(--text-secondary);
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .variant-input-row {
            display: grid;
            grid-template-columns: 2fr 2fr 1.5fr 40px;
            gap: 15px;
            margin-bottom: 12px;
            align-items: center;
            animation: fadeIn 0.3s ease;
        }

        .btn-icon {
            width: 42px;
            height: 42px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
            border: 1px solid var(--border-color);
            background: transparent;
            color: var(--text-secondary);
            cursor: pointer;
            transition: 0.2s;
        }

        .btn-icon:hover {
            color: var(--red);
            border-color: var(--red);
            background: rgba(255, 31, 31, 0.1);
            transform: rotate(90deg);
        }

        /* --- ADDRESS MODAL REFACTOR (CSS GRID) --- */
        .address-modal-content {
            background: var(--bg-modal-glass);
            backdrop-filter: blur(25px);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            width: 95%;
            max-width: 750px;
            padding: 30px;
            color: var(--text-main);
            box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8);
            position: relative;
            max-height: 90vh;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .addr-title {
            text-align: center;
            font-size: 1.6rem;
            font-weight: 800;
            margin-bottom: 10px;
            color: var(--text-main);
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .addr-row-selectors {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .addr-row-street {
            display: grid;
            grid-template-columns: 3fr 1fr;
            gap: 20px;
        }

        .addr-row-contact {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 20px;
            align-items: end;
        }



        .upload-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 15px;
        }

        .upload-item {
            position: relative;
            aspect-ratio: 1;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid var(--border-color);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            transition: 0.3s;
        }

        .upload-item:hover {
            transform: scale(1.05);
            border-color: var(--text-main);
        }

        .upload-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .upload-remove {
            position: absolute;
            top: 5px;
            right: 5px;
            width: 24px;
            height: 24px;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            cursor: pointer;
            border: none;
            transition: 0.2s;
        }

        .upload-remove:hover {
            background: var(--red);
            transform: scale(1.1);
        }

        .upload-add {
            aspect-ratio: 1;
            border: 2px dashed var(--border-color);
            border-radius: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            color: var(--text-secondary);
            font-size: 2rem;
            transition: 0.3s;
            background: rgba(255, 255, 255, 0.01);
        }

        .upload-add:hover {
            border-color: var(--red);
            color: var(--red);
            background: rgba(255, 31, 31, 0.05);
            transform: scale(1.02);
        }

        .size-bar-container {
            width: 100%;
            height: 6px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
            margin-top: 10px;
            overflow: hidden;
        }

        .size-bar {
            height: 100%;
            background: var(--success);
            width: 0%;
            transition: width 0.3s ease, background 0.3s;
        }

        .size-text {
            font-size: 0.7rem;
            color: var(--text-secondary);
            margin-top: 5px;
            text-align: right;
        }

        .modal-close-btn {
            background: none;
            border: none;
            font-size: 1.8rem;
            color: var(--text-secondary);
            cursor: pointer;
            line-height: 1;
            transition: 0.2s;
        }

        .modal-close-btn:hover {
            color: var(--red);
            transform: rotate(90deg);
        }

        .primary-btn {
            width: auto;
            background-color: var(--red);
            color: white;
            padding: 14px 35px;
            border-radius: 50px;
            font-weight: 700;
            border: none;
            cursor: pointer;
            transition: 0.3s;
            box-shadow: 0 10px 20px rgba(255, 31, 31, 0.2);
        }

        .primary-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 30px rgba(255, 31, 31, 0.4);
        }

        .cancel-btn {
            background-color: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
            padding: 14px 30px;
            border-radius: 50px;
            font-weight: 600;
            cursor: pointer;
            transition: 0.2s;
        }

        .cancel-btn:hover {
            border-color: var(--text-main);
            color: var(--text-main);
        }

        .admin-fab {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 60px;
            height: 60px;
            background-color: var(--red);
            color: white;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2rem;
            box-shadow: 0 10px 20px rgba(255, 31, 31, 0.3);
            cursor: pointer;
            z-index: 200;
            display: none;
            transition: 0.3s;
        }

        .admin-fab:hover {
            transform: scale(1.1) rotate(90deg);
        }

        .toast {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%) translateY(100px);
            background-color: var(--text-main);
            color: var(--bg-body);
            padding: 12px 24px;
            border-radius: 50px;
            font-weight: 600;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
            z-index: 2000;
            opacity: 0;
            transition: 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        }

        .toast.show {
            transform: translateX(-50%) translateY(0);
            opacity: 1;
        }

        .img-preview-box {
            margin-top: 10px;
            width: 100%;
            height: 150px;
            border-radius: 12px;
            background-color: var(--input-bg);
            border: 2px dashed var(--border-color);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            display: none;
            transition: 0.3s;
        }

        .checkbox-wrapper label {
            display: flex;
            align-items: center;
            gap: 15px;
            font-weight: 600;
            cursor: pointer;
            padding: 15px;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            transition: 0.2s;
            background: rgba(255, 255, 255, 0.02);
        }

        .checkbox-wrapper label:hover {
            background: rgba(255, 255, 255, 0.05);
            border-color: var(--text-secondary);
        }

        .checkbox-wrapper input[type="checkbox"] {
            width: 20px;
            height: 20px;
            accent-color: var(--red);
        }

        @media (max-width: 768px) {
            .modal-analytics-content {
                width: 100%;
                height: 100vh;
                max-height: 100vh;
                border-radius: 0;
                margin: 0;
            }

            .analytics-summary-grid,
            .analytics-charts-container {
                grid-template-columns: 1fr;
                gap: 15px;
            }

            .analytics-chart-box.full-width {
                grid-column: span 1;
            }

            .admin-modal-body {
                padding: 15px;
            }

            .admin-modal-header {
                padding: 15px;
            }

            .analytics-card {
                padding: 15px;
            }

            .analytics-card-value {
                font-size: 1.8rem;
            }

            .hero h1 {
                font-size: 2.5rem;
            }

            .grid {
                grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
                gap: 1rem;
            }

            .card-img-wrapper {
                height: 200px;
            }

            .cart-sidebar {
                width: 100%;
                max-width: 100%;
            }

            .modal-details-content {
                flex-direction: column;
                height: auto;
                max-height: 90vh;
                overflow-y: auto;
            }

            .details-gallery {
                height: 350px;
                flex: none;
                border-right: none;
                border-bottom: 1px solid var(--border-color);
            }

            .details-info {
                padding: 25px;
            }

            .zoom-btn {
                bottom: 10px;
                right: 10px;
                top: auto;
            }

            .details-footer {
                grid-template-columns: 1fr 1fr;
                grid-template-areas: "price qty" "btn btn";
                gap: 15px;
            }

            .price-group {
                grid-area: price;
            }

            .detail-qty-selector {
                grid-area: qty;
                justify-self: end;
            }

            .add-btn-large {
                grid-area: btn;
                width: 100%;
            }

            .form-row {
                grid-template-columns: 1fr;
                gap: 0;
            }

            .variant-header-row {
                display: none;
            }

            .variant-input-row {
                grid-template-columns: 1fr 1fr 1fr 40px;
                gap: 8px;
            }

            .variant-input-row input {
                padding: 10px;
                font-size: 0.8rem;
            }

            .admin-modal-header,
            .admin-modal-footer {
                padding: 15px 20px;
            }

            .admin-modal-body {
                padding: 20px;
            }
        }

        /* --- ADMIN FAB BUTTONS --- */
        .admin-fab {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--red);
            color: white;
            font-size: 1.5rem;
            display: none;
            justify-content: center;
            align-items: center;
            box-shadow: 0 10px 25px rgba(255, 31, 31, 0.4);
            cursor: pointer;
            z-index: 1000;
            transition: transform 0.2s, background 0.2s;
        }

        .admin-fab.show-fab {
            display: flex !important;
        }

        .admin-fab:hover {
            transform: scale(1.1);
            background: var(--red-dark);
        }

        /* AUTH MODAL & USER MENU */
        /* AUTH MODAL - PREMIUM REDESIGN (OPTIMIZED) */
        .auth-modal-content {
            background-color: var(--bg-header);
            /* Translucent by default (rgba) */
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border: 1px solid var(--border-color);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
            border-radius: 16px;
            padding: 40px;
            color: var(--text-main);
        }

        .auth-tabs {
            display: flex;
            border-bottom: 2px solid var(--border-color);
            margin-bottom: 30px;
            position: relative;
        }

        .auth-tab {
            flex: 1;
            background: none;
            border: none;
            padding: 15px;
            color: var(--text-secondary);
            font-size: 1rem;
            font-family: 'Montserrat', sans-serif;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            white-space: nowrap;
            /* CRITICAL: Prevent line break */
        }

        .auth-tab:hover {
            color: var(--text-main);
        }

        .auth-tab.active {
            color: var(--text-main);
            /* Adaptive: Black(Light)/White(Dark) */
            font-weight: 700;
        }

        .auth-tab.active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 2px;
            background: var(--red);
            box-shadow: 0 -2px 10px var(--red);
        }

        .auth-form {
            display: none;
            text-align: left;
            animation: slideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .auth-form.active {
            display: block;
        }

        .auth-input-group {
            margin-bottom: 20px;
        }

        .auth-label {
            display: block;
            margin-bottom: 8px;
            color: var(--text-secondary);
            font-size: 0.85rem;
            font-weight: 500;
        }

        .auth-input {
            width: 100%;
            background: var(--input-bg);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 12px 15px;
            color: var(--text-main);
            font-size: 1rem;
            font-family: inherit;
            transition: all 0.3s;
        }

        .auth-input:focus {
            outline: none;
            border-color: var(--red);
            box-shadow: 0 0 15px rgba(255, 31, 31, 0.2);
            background: var(--bg-cart-item);
        }

        .auth-btn {
            width: 100%;
            background: var(--red);
            color: white;
            /* Always white for readability on red */
            border: none;
            padding: 14px;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 800;
            font-family: 'Montserrat', sans-serif;
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 15px;
            text-transform: uppercase;
            letter-spacing: 1px;
            box-shadow: 0 4px 15px rgba(231, 29, 54, 0.4);
        }

        .auth-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(231, 29, 54, 0.6);
            filter: brightness(1.1);
        }

        .auth-footer-text {
            margin-top: 25px;
            font-size: 0.85rem;
            color: var(--text-secondary);
            text-align: center;
        }

        .auth-footer-text a {
            color: var(--red);
            text-decoration: none;
            font-weight: 700;
            transition: color 0.2s;
        }

        .auth-footer-text a:hover {
            color: var(--text-main);
            text-shadow: 0 0 8px var(--red);
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .user-menu {
            position: relative;
        }

        .user-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--gradient);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            border: 2px solid rgba(255, 255, 255, 0.2);
            cursor: pointer;
        }

        .user-dropdown {
            position: absolute;
            top: 120%;
            right: 0;
            width: 200px;
            background: rgba(20, 20, 30, 0.95);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 10px;
            display: none;
            flex-direction: column;
            gap: 5px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }

        .user-menu.active .user-dropdown {
            display: flex;
        }

        .user-info-row {
            padding: 10px;
            font-size: 0.85rem;
            color: var(--text-secondary);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            margin-bottom: 5px;
            word-break: break-all;
        }

        .dropdown-item {
            background: none;
            border: none;
            padding: 10px;
            color: var(--text-main);
            text-align: left;
            cursor: pointer;
            border-radius: 8px;
            transition: 0.2s;
            font-size: 0.9rem;
            width: 100%;
        }

        .dropdown-item:hover {
            background: rgba(255, 255, 255, 0.05);
        }

        /* Animation */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(5px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* --- MEDIA QUERIES (MOBILE FIXES) --- */
        @media (max-width: 768px) {

            /* HEADER & NAV */
            header {
                flex-wrap: wrap;
                padding: 10px 15px;
                gap: 10px;
            }

            .logo {
                font-size: 1.3rem;
            }

            .search-container {
                order: 3;
                width: 100%;
                max-width: none;
                margin: 5px 0 0 0;
                /* Reset Margin */
            }

            .nav-icons {
                gap: 5px;
            }

            /* Compact Mode Switcher */
            .mode-switcher {
                transform: scale(0.9);
            }

            .mode-btn {
                padding: 5px 12px;
                font-size: 0.75rem;
            }

            /* HERO */
            .hero-title {
                font-size: 2.2rem;
                line-height: 1;
                margin-bottom: 1rem;
            }

            .hero {
                height: auto;
                min-height: 400px;
                padding-top: 130px;
                /* Space for expanded header */
                padding-bottom: 40px;
            }

            /* CATALOG GRID (2 Columns) */
            .grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
            }

            .card-img-wrapper {
                height: 180px;
                /* Reduced height */
            }

            /* MODALS (GENERAL) - BOTTOM SHEET */
            .modal-content {
                margin: 0;
                position: absolute;
                bottom: 0;
                width: 100% !important;
                max-width: 100% !important;
                border-radius: 25px 25px 0 0;
                transform: translateY(100%) !important;
                transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
            }
            
            .modal.open .modal-content {
                transform: translateY(0) !important;
            }

            /* AUTH MODAL */
            .auth-modal-content {
                padding: 25px;
            }

            /* PRODUCT DETAILS MODAL (Vertical Layout) */
            .modal-details-content {
                flex-direction: column;
                height: auto;
                max-height: 90vh;
                overflow-y: auto;
            }

            .details-gallery {
                width: 100%;
                height: 300px;
                flex: none;
            }

            .details-info {
                width: 100%;
                padding: 20px;
                flex: none;
            }

            /* CART SIDEBAR - BOTTOM SHEET */
            .cart-sidebar {
                width: 100% !important;
                max-width: 100% !important;
                height: 85vh;
                top: auto;
                bottom: 0;
                right: auto;
                border-radius: 25px 25px 0 0;
                transform: translateY(100%) !important;
                transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
            }
            
            .cart-sidebar.open {
                transform: translateY(0) !important;
            }

            .cart-header,
            .cart-footer {
                padding: 15px;
            }
        }

        /* --- PREMIUM ICONS REDESIGN --- */
        .nav-capsule {
            display: flex;
            align-items: center;
            gap: 15px;
            background: rgba(0, 0, 0, 0.4);
            /* Translucent Capsule */
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            padding: 8px 18px;
            border-radius: 50px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
            margin-left: 10px;
            transition: 0.3s;
        }

        .nav-capsule:hover {
            background: rgba(0, 0, 0, 0.6);
            border-color: rgba(255, 255, 255, 0.15);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
        }

        .nav-icon-premium {
            background: transparent !important;
            border: none !important;
            color: rgba(255, 255, 255, 0.7);
            /* Clean White/Gray */
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            /* Bouncy */
            padding: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            position: relative;
            outline: none;
        }

        .nav-icon-premium svg {
            width: 22px;
            height: 22px;
            stroke-width: 2px;
            transition: 0.3s;
        }

        /* Hover Effect: Scale & Neon Red Glow */
        .nav-icon-premium:hover {
            transform: scale(1.15);
            color: var(--red) !important;
            filter: drop-shadow(0 0 6px var(--red));
            background: rgba(255, 31, 31, 0.05) !important;
        }



        /* Click Effect: Bounce */
        .nav-icon-premium:active {
            transform: scale(0.9);
        }

        /* Theme Toggle Rotation */
        .theme-toggle svg {
            transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .theme-toggle:hover svg {
            transform: rotate(180deg);
        }

        /* Avatar in Capsule */
        .user-avatar-premium {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: linear-gradient(135deg, #333, #111);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid rgba(255, 255, 255, 0.2);
            cursor: pointer;
            transition: 0.3s;
        }

        .user-avatar-premium:hover {
            border-color: var(--red);
            box-shadow: 0 0 10px rgba(255, 31, 31, 0.4);
            transform: scale(1.1);
        }

        /* Adjust Badges for Capsule */
        .count-badge {
            position: absolute;
            top: -2px;
            right: -2px;
            background-color: var(--red);
            color: #ffffff;
            font-size: 0.65rem;
            font-weight: 800;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 2px solid var(--bg-header);
            /* blending */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        }

        /* --- HERO UPDATES --- */
        .hero {
            position: relative;
            min-height: 85vh;
            /* Taller Hero */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            overflow: hidden;
            margin-top: -20px;
            background: radial-gradient(circle at center, var(--bg-card) 0%, var(--bg-body) 80%);
            padding-bottom: 50px;
        }

        .hero-title {
            font-size: 5rem;
            font-weight: 900;
            line-height: 0.9;
            margin-bottom: 1.5rem;
            text-transform: uppercase;
            letter-spacing: -3px;
            display: flex;
            flex-direction: column;
        }

        .hero-actions {
            display: flex;
            gap: 20px;
            margin-top: 10px;
            opacity: 0;
            transform: translateY(20px);
            animation: textEnter 0.8s cubic-bezier(0.2, 1, 0.3, 1) 0.6s forwards;
            flex-wrap: wrap;
            justify-content: center;
        }

        .hero-btn {
            background: rgba(255, 255, 255, 0.03);
            color: var(--text-main);
            border: 1px solid var(--border-color);
            padding: 14px 30px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 0.85rem;
            border-radius: 50px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: 0.3s;
            backdrop-filter: blur(10px);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .hero-btn:hover {
            background: var(--text-main);
            color: var(--bg-body);
            border-color: var(--text-main);
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(255, 255, 255, 0.2);
        }

        .hero-btn.primary {
            background: var(--red);
            border-color: var(--red);
            color: white;
            box-shadow: 0 10px 30px rgba(231, 29, 54, 0.3);
        }

        .hero-btn.primary:hover {
            background: #ff0000;
            box-shadow: 0 15px 40px rgba(231, 29, 54, 0.5);
            transform: translateY(-3px);
        }

        .social-hero {
            display: flex;
            gap: 20px;
            margin-top: 40px;
            opacity: 0;
            transform: translateY(20px);
            animation: textEnter 0.8s cubic-bezier(0.2, 1, 0.3, 1) 0.8s forwards;
        }

        .social-icon {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            border: 1px solid var(--border-color);
            background: rgba(255, 255, 255, 0.02);
            color: var(--text-secondary);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.2rem;
            transition: 0.3s;
            text-decoration: none;
        }

        .social-icon:hover {
            border-color: var(--red);
            color: var(--red);
            background: rgba(255, 31, 31, 0.1);
            transform: scale(1.1);
        }

        /* --- INFO MODALS (ABOUT & GUIDE) --- */
        .info-modal-content {
            background: var(--bg-modal);
            width: 90%;
            max-width: 600px;
            border-radius: 20px;
            border: 1px solid var(--border-color);
            padding: 40px;
            position: relative;
            max-height: 85vh;
            overflow-y: auto;
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8);
        }

        .info-modal-title {
            font-size: 2rem;
            font-weight: 900;
            color: var(--text-main);
            margin-bottom: 20px;
            text-transform: uppercase;
            text-align: center;
            letter-spacing: -1px;
            border-bottom: 2px solid var(--red);
            padding-bottom: 15px;
            display: inline-block;
        }

        .info-center-wrap {
            text-align: center;
        }

        .info-text {
            color: var(--text-secondary);
            font-size: 1rem;
            line-height: 1.7;
            margin-bottom: 20px;
            text-align: justify;
        }

        .info-guide-list {
            list-style: none;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .guide-item {
            background: rgba(255, 255, 255, 0.02);
            padding: 20px;
            border-radius: 12px;
            border: 1px solid transparent;
            transition: 0.2s;
        }

        .guide-item:hover {
            border-color: rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.04);
        }

        .guide-title {
            color: var(--red);
            font-weight: 800;
            font-size: 1.1rem;
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .guide-desc {
            color: var(--text-secondary);
            font-size: 0.95rem;
            line-height: 1.5;
        }

        .payment-list {
            list-style-type: none;
            padding-left: 0;
            margin-top: 5px;
            color: var(--text-main);
            font-weight: 600;
        }

        .payment-list li {
            margin-bottom: 5px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .payment-list li::before {
            content: '•';
            color: var(--red);
            font-size: 1.5rem;
            line-height: 0.5;
        }

        @media (max-width: 768px) {
            .hero-actions {
                flex-direction: column;
                width: 100%;
                padding: 0 40px;
            }

            .hero-btn {
                width: 100%;
                justify-content: center;
            }

            .hero-title {
                font-size: 3rem;
            }

            .info-modal-content {
                padding: 25px;
            }
        }

        .upload-item.drag-over {
            border: 2px dashed var(--red);
            transform: scale(0.95);
            opacity: 0.7;
        }

        .upload-item {
            cursor: grab;
        }

        .upload-item:active {
            cursor: grabbing;
        }

        /* --- 3D PRINTER LOADER W/ PERCENTAGE --- */
        .loader-container {
            grid-column: 1 / -1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 80px 20px;
            color: var(--text-main);
        }

        .loader-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 20px;
            letter-spacing: 1px;
            color: var(--text-secondary);
        }

        .printer-track {
            width: 300px;
            max-width: 80%;
            height: 6px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
            position: relative;
            margin-bottom: 15px;
        }

        .printer-fill {
            height: 100%;
            background: var(--red);
            width: 0%;
            border-radius: 3px;
            position: relative;
            box-shadow: 0 0 10px var(--red);
            transition: width 0.3s ease-out;
        }

        .printer-nozzle {
            position: absolute;
            right: -6px;
            top: -12px;
            width: 12px;
            height: 24px;
            background: #fff;
            clip-path: polygon(20% 0%, 80% 0%, 100% 60%, 50% 100%, 0% 60%);
            box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
        }

        .percent-text {
            font-family: 'Montserrat', sans-serif;
            font-size: 2rem;
            font-weight: 800;
            color: var(--red);
        }

        /* --- BROWSER BRIDGE (FB/INSTA) --- */
        .bridge-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(10, 10, 10, 0.96);
            backdrop-filter: blur(15px);
            z-index: 9999;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 40px;
        }

        .bridge-overlay.visible {
            display: flex;
            animation: fadeIn 0.5s ease;
        }

        .bridge-content {
            max-width: 400px;
            animation: slideUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .bridge-logo {
            font-size: 2.5rem;
            font-weight: 900;
            margin-bottom: 20px;
            letter-spacing: 3px;
            color: #fff;
        }

        .bridge-desc {
            font-size: 1.1rem;
            color: var(--text-secondary);
            margin-bottom: 40px;
            line-height: 1.6;
        }

        .bridge-btn {
            width: 100%;
            padding: 18px;
            font-size: 1.1rem;
            font-weight: 800;
            letter-spacing: 1px;
            margin-bottom: 20px;
            background: var(--red);
            color: white;
            box-shadow: 0 10px 30px rgba(255, 31, 31, 0.4);
            border-radius: 12px;
            text-transform: uppercase;
        }

        .bridge-link {
            color: var(--text-secondary);
            text-decoration: underline;
            font-size: 0.9rem;
            opacity: 0.6;
            cursor: pointer;
        }

        /* --- HERO BACKGROUND ANIMATION --- */
        .hero-bg-animated {
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 50% 50%, rgba(30, 30, 30, 0.8) 0%, var(--bg-body) 100%),
                url('data:image/svg+xml;utf8,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><circle cx="30" cy="30" r="1.5" fill="rgba(255,255,255,0.06)"/></svg>');
            background-size: 100% 100%, 60px 60px;
            z-index: 0;
            opacity: 0.8;
            animation: moveHeroBg 15s linear infinite alternate;
            pointer-events: none;
        }

        [data-theme="light"] .hero-bg-animated {
            background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.9) 0%, var(--bg-body) 100%),
                url('data:image/svg+xml;utf8,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><circle cx="30" cy="30" r="1.5" fill="rgba(0,0,0,0.06)"/></svg>');
        }

        @keyframes moveHeroBg {
            0% {
                transform: scale(1) translate(0, 0);
            }

            100% {
                transform: scale(1.15) translate(-1%, -1%);
            }
        }

        .pulse-glow {
            animation: pulseGlow 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
            box-shadow: 0 0 15px rgba(255, 31, 31, 0.4);
        }

        @keyframes pulseGlow {

            0%,
            100% {
                box-shadow: 0 0 15px rgba(255, 31, 31, 0.4);
                transform: scale(1);
            }

            50% {
                box-shadow: 0 0 25px rgba(255, 31, 31, 0.8);
                transform: scale(1.02);
            }
        }

        /* --- NOSOTROS (SPLIT LAYOUT) --- */
        .about-section {
            padding: 5rem 5%;
            background-color: var(--bg-body);
            border-bottom: 1px solid var(--border-color);
            position: relative;
        }

        .about-container {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
        }

        @media (max-width: 900px) {
            .about-container {
                grid-template-columns: 1fr;
            }
        }

        .about-text h2 {
            font-size: 2.5rem;
            font-weight: 900;
            margin-bottom: 1.5rem;
            text-transform: uppercase;
        }

        .about-text p {
            color: var(--text-secondary);
            line-height: 1.8;
            margin-bottom: 1rem;
            font-size: 1.05rem;
        }

        .about-cards {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }

        .about-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--border-color);
            padding: 1.5rem;
            border-radius: 12px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(10px);
            cursor: default;
        }

        .about-card:hover {
            transform: translateY(-5px);
            border-color: var(--red);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(255, 31, 31, 0.1);
            z-index: 10;
        }

        .about-card svg {
            margin-bottom: 1rem;
            transition: transform 0.3s ease;
        }

        .about-card:hover svg {
            transform: scale(1.1);
        }

        .about-card h3 {
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: var(--text-main);
        }

        .about-card p {
            color: var(--text-secondary);
            font-size: 0.9rem;
            line-height: 1.5;
        }

        /* --- GUÍA DE COMPRA (TIMELINE) --- */
        .guide-section {
            padding: 5rem 5%;
            background-color: var(--bg-cart-item);
            position: relative;
        }

        .guide-timeline {
            max-width: 1000px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2rem;
            position: relative;
        }

        @media (max-width: 900px) {
            .guide-timeline {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 500px) {
            .guide-timeline {
                grid-template-columns: 1fr;
            }
        }

        .guide-step {
            text-align: center;
            position: relative;
            z-index: 2;
        }

        @media (min-width: 901px) {
            .guide-timeline::before {
                content: '';
                position: absolute;
                top: 40px;
                left: 10%;
                width: 80%;
                height: 2px;
                background: rgba(255, 255, 255, 0.05);
                z-index: 1;
            }
        }

        .step-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 1.5rem auto;
            background: var(--bg-card);
            border: 2px solid var(--border-color);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--red);
            transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            z-index: 2;
        }

        .guide-step:hover .step-icon {
            border-color: var(--red);
            box-shadow: 0 0 20px rgba(255, 31, 31, 0.2);
            transform: scale(1.15);
        }

        .step-content h3 {
            font-size: 1.1rem;
            font-weight: 800;
            margin-bottom: 0.8rem;
            color: var(--text-main);
        }

        .step-content p {
            color: var(--text-secondary);
            font-size: 0.9rem;
            line-height: 1.5;
        }

        /* --- SCROLL REVEAL ANIMATIONS --- */
        .scroll-reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: all 0.8s cubic-bezier(0.2, 1, 0.3, 1);
        }

        .scroll-reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* --- ACCOUNT DASHBOARD MODAL --- */
        .account-modal-content {
            width: 95%;
            max-width: 1100px;
            padding: 0;
            overflow: hidden;
            background: var(--bg-body);
        }

        .account-modal-title {
            text-align: center;
            font-size: 1.5rem;
            margin: 25px 0 10px 0;
            color: var(--text-main);
        }

        .account-dashboard {
            display: flex;
            height: 75vh;
            max-height: 800px;
            border-top: 1px solid var(--border-color);
        }

        /* Sidebar */
        .account-sidebar {
            width: 250px;
            background: rgba(0, 0, 0, 0.2);
            border-right: 1px solid var(--border-color);
            padding: 20px 10px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .account-tab {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px 20px;
            background: transparent;
            border: none;
            color: var(--text-secondary);
            font-size: 1rem;
            text-align: left;
            border-radius: 8px;
            cursor: pointer;
            transition: 0.3s;
            font-weight: 500;
        }

        .account-tab svg {
            color: var(--text-secondary);
            transition: 0.3s;
        }

        .account-tab:hover {
            background: rgba(255, 31, 31, 0.05);
            color: var(--text-main);
        }

        .account-tab.active {
            background: rgba(255, 31, 31, 0.1);
            color: var(--red);
            font-weight: 700;
        }
        
        .account-tab.active svg {
            color: var(--red);
        }

        /* Main Content */
        .account-main {
            flex: 1;
            padding: 40px;
            overflow-y: auto;
            display: flex;
            gap: 30px;
        }

        .account-profile-overview {
            width: 320px;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 30px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            height: fit-content;
        }

        .profile-avatar-wrapper.lg {
            width: 150px;
            height: 150px;
            margin-bottom: 20px;
        }

        .profile-avatar-wrapper.lg img {
            width: 100%;
            height: 100%;
        }

        .profile-avatar-wrapper.lg .profile-edit-avatar-btn {
            bottom: 5px;
            right: 5px;
            width: 36px;
            height: 36px;
        }

        .overview-name {
            font-size: 1.5rem;
            color: var(--text-main);
            margin-bottom: 5px;
            word-break: break-word;
        }

        .overview-email {
            font-size: 0.85rem;
            color: var(--red);
            margin-bottom: 25px;
            word-break: break-word;
        }

        .overview-links {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .overview-link {
            width: 100%;
            padding: 15px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background: transparent;
            color: var(--text-main);
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            transition: 0.3s;
        }

        .overview-link:hover {
            border-color: var(--red);
        }

        .overview-link.active {
            background: rgba(255, 31, 31, 0.1);
            border-color: transparent;
            color: var(--text-main);
        }

        .account-profile-form {
            flex: 1;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 40px 30px;
        }

        .form-row-2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }

        .account-input {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--border-color);
        }
        
        .account-input[readonly] {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .btn-save-account {
            margin-top: 30px;
            width: auto;
            padding: 15px 40px;
            float: right;
            border-radius: 8px;
            font-size: 1rem;
        }

        /* Mobile Dashboard Adjustments */
        @media (max-width: 900px) {
            .account-dashboard {
                flex-direction: column;
                height: auto;
                max-height: 85vh;
            }

            .account-sidebar {
                width: 100%;
                border-right: none;
                border-bottom: 1px solid var(--border-color);
                flex-direction: row;
                overflow-x: auto;
                padding: 15px;
                gap: 10px;
                background: transparent;
            }
            
            /* Hide scrollbar for tabs */
            .account-sidebar::-webkit-scrollbar { display: none; }
            .account-sidebar { -ms-overflow-style: none; scrollbar-width: none; }

            .account-tab {
                flex-direction: column;
                justify-content: center;
                gap: 8px;
                padding: 12px;
                min-width: 100px;
                font-size: 0.85rem;
                background: var(--bg-card);
                border: 1px solid var(--border-color);
            }
            
            .account-tab.active {
                border-color: var(--red);
            }

            .account-main {
                flex-direction: column;
                padding: 20px;
                gap: 20px;
            }

            .account-profile-overview {
                width: 100%;
                padding: 20px;
            }
            
            .account-profile-form {
                padding: 20px;
                border: none;
                background: transparent;
            }

            .form-row-2 {
                grid-template-columns: 1fr;
            }

            .btn-save-account {
                width: 100%;
                float: none;
            }
        }

        /* --- 3D INTERACTIVE BACKGROUND --- */
        #mesh-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: -10;
            pointer-events: none;
            opacity: 0.8;
            transition: opacity 0.5s ease;
        }

        /* --- REAL PRE-LOADER --- */
        .loader-container {
            grid-column: 1 / -1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 100px 20px;
            min-height: 300px;
            background: transparent;
            transition: opacity 0.5s ease;
        }

        .loader-title {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--text-main);
            margin-bottom: 20px;
            letter-spacing: 2px;
            text-transform: uppercase;
            animation: pulse 1.5s infinite alternate;
        }

        .printer-track {
            width: 100%;
            max-width: 400px;
            height: 6px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            position: relative;
            overflow: visible;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
        }

        .printer-fill {
            height: 100%;
            width: 0%;
            background: var(--red);
            border-radius: 10px;
            position: relative;
            transition: width 0.3s ease-out;
            box-shadow: 0 0 10px var(--red);
        }

        .printer-nozzle {
            position: absolute;
            right: -10px;
            top: -15px;
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 15px solid #fff;
            filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
        }

        .percent-text {
            margin-top: 15px;
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--red);
            font-variant-numeric: tabular-nums;
        }

        /* --- NUEVO DISEÑO DESTACADOS PREMIUM --- */
        .destacados-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 40px;
            padding: 20px 0;
            width: 100%;
        }

        .destacados-card {
            position: relative;
            border-radius: 20px;
            height: 500px;
            overflow: hidden;
            cursor: pointer;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
            transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
            background: var(--bg-card);
            border: 1px solid rgba(255, 255, 255, 0.05);
            -webkit-tap-highlight-color: transparent;
        }

        @media (min-width: 1200px) {
            .destacados-grid {
                grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
            }
            .destacados-card {
                height: 600px;
            }
        }

        .destacados-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 30px 60px rgba(255, 31, 31, 0.2);
            border-color: rgba(255, 31, 31, 0.3);
            z-index: 10;
        }

        .destacados-bg-layer {
            position: absolute;
            inset: 0;
            z-index: 1;
        }

        .destacados-bg-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: blur(8px) brightness(0.3) saturate(1.2);
            transition: all 0.5s ease;
            transform: scale(1.15); /* Eliminar bordes borrosos */
        }

        .destacados-card:hover .destacados-bg-img {
            filter: blur(3px) brightness(0.6) saturate(1.5);
            transform: scale(1.2);
        }

        .destacados-gradient {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 5%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.1) 100%);
            z-index: 2;
        }

        .destacados-fg-container {
            position: absolute;
            top: 5%;
            left: 0;
            width: 100%;
            height: 65%;
            z-index: 3;
            display: flex;
            justify-content: center;
            align-items: center;
            pointer-events: none;
        }

        .destacados-fg-img {
            max-width: 85%;
            max-height: 110%;
            object-fit: contain;
            filter: drop-shadow(0 20px 30px rgba(0,0,0,0.8));
            animation: floating-anim 4s ease-in-out infinite alternate;
            transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .destacados-card:hover .destacados-fg-img {
            transform: scale(1.15) translateY(-20px);
            filter: drop-shadow(0 30px 40px rgba(255, 31, 31, 0.4));
        }

        @keyframes floating-anim {
            0% { transform: translateY(0px) rotate(0deg); }
            100% { transform: translateY(-15px) rotate(1.5deg); }
        }

        .destacados-content {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 30px;
            z-index: 4;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .destacados-badge {
            align-self: flex-start;
            background: linear-gradient(45deg, var(--red), #ff6b6b);
            color: white;
            font-size: 0.75rem;
            font-weight: 800;
            padding: 6px 15px;
            border-radius: 30px;
            text-transform: uppercase;
            letter-spacing: 2px;
            box-shadow: 0 4px 15px rgba(255, 31, 31, 0.4);
        }

        .destacados-title {
            font-size: 2rem;
            font-weight: 900;
            color: white;
            line-height: 1.1;
            text-shadow: 0 2px 10px rgba(0,0,0,0.8);
            margin: 0;
            text-transform: uppercase;
        }

        .destacados-cta {
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(5px);
            color: white;
            padding: 10px 25px;
            border-radius: 30px;
            font-weight: 700;
            border: 1px solid rgba(255,255,255,0.2);
            transition: all 0.3s;
            text-transform: uppercase;
            font-size: 0.8rem;
            letter-spacing: 1px;
        }

        .destacados-card:hover .destacados-cta {
            background: var(--red);
            border-color: var(--red);
            box-shadow: 0 5px 20px rgba(255, 31, 31, 0.4);
            transform: translateY(-2px);
        }