:root {
            --brand-color: #ff385c;
            --brand-gradient: linear-gradient(45deg, #ff385c, #ff8a00);
            --bg-light: #f8f9fa;
        }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: var(--bg-light);
            color: #2d3436;
            overflow-x: hidden;
        }

        /* --- Navbar --- */
        .navbar {
            background: rgba(255, 255, 255, 0.8) !important;
            backdrop-filter: blur(15px);
            border-bottom: 1px solid rgba(0,0,0,0.05);
            padding: 15px 0;
        }
        .navbar-brand { font-weight: 800; font-size: 1.6rem; color: var(--brand-color) !important; letter-spacing: -1px; }

        /* --- Hero Section --- */
        .hero {
            padding: 140px 0 80px;
            background: radial-gradient(circle at top right, rgba(255,56,92,0.1), transparent 400px);
        }
        .hero-title { font-weight: 800; font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: -2px; line-height: 1.1; }
        
        /* --- Cards de Comercios --- */
        .card-comercio {
            border: none;
            border-radius: 24px;
            transition: all 0.3s ease;
            background: white;
            overflow: hidden;
        }
        .card-comercio:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
        }
        .img-comercio { height: 160px; object-fit: cover; }

        /* --- Sección Publicitaria --- */
        .promo-box {
            background: white;
            border-radius: 40px;
            padding: 50px;
            border: 1px solid rgba(0,0,0,0.05);
        }
        .icon-circle {
            width: 60px; height: 60px;
            border-radius: 18px;
            display: flex; align-items: center; justify-content: center;
            margin-bottom: 20px;
        }

        /* --- Modales y Formularios --- */
        .modal-content { border-radius: 30px; border: none; overflow: hidden; }
        .form-control, .form-select {
            border-radius: 15px;
            padding: 12px 18px;
            border: 2px solid #eee;
            background: #f9f9f9;
        }
        .form-control:focus { border-color: var(--brand-color); box-shadow: none; background: white; }
        .btn-brand {
            background: var(--brand-gradient);
            color: white;
            border: none;
            border-radius: 15px;
            padding: 14px;
            font-weight: 700;
            transition: opacity 0.2s;
        }
        .btn-brand:hover { opacity: 0.9; color: white; }

        .nav-pills .nav-link { border-radius: 12px; font-weight: 600; color: #666; }
        .nav-pills .nav-link.active { background: var(--brand-color); }