:root {
            --primary: #e63946;
            --primary-dark: #c1121f;
            --accent: #f4a261;
            --dark: #1a1a1a;
            --gray-600: #737373;
            --gray-400: #a3a3a3;
            --gray-200: #e5e5e5;
            --gray-100: #f5f5f5;
            --white: #ffffff;
            --whatsapp: #25D366;
            --green: #10b981;
            --radius-sm: 10px;
            --radius-md: 16px;
            --radius-lg: 20px;
            --radius-xl: 28px;
            --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
            --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
            --shadow-lg: 0 12px 28px rgba(0,0,0,0.12);
            --shadow-xl: 0 20px 40px rgba(0,0,0,0.15);
            --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

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

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background: #fafafa;
            color: var(--dark);
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
        }

        .topbar {
            position: sticky;
            top: 0;
            z-index: 100;
            background: rgba(255,255,255,0.98);
            backdrop-filter: blur(20px);
            padding: 0 24px;
            display: flex;
            align-items: center;
            gap: 16px;
            height: 64px;
            border-bottom: 1px solid var(--gray-200);
        }

        .topbar__back {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: none;
            background: var(--gray-100);
            color: var(--dark);
            font-size: 1.1rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
            text-decoration: none;
            flex-shrink: 0;
        }

        .topbar__back:hover { background: var(--gray-200); }

        .topbar__title {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
        }

        .topbar__logo { height: 32px; width: auto; flex-shrink: 0; }

        .topbar__city {
            font-size: 0.8rem;
            color: var(--gray-600);
            font-weight: 500;
            line-height: 1.2;
        }

        .topbar__city strong { color: var(--dark); display: block; font-size: 1rem; }

        .topbar__actions { display: flex; gap: 8px; }

        .topbar__btn {
            padding: 8px 16px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.85rem;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--primary);
            color: white;
            transition: var(--transition);
        }

        .topbar__btn:hover { background: var(--primary-dark); }

        .hero {
            background: linear-gradient(160deg, #1a1a1a 0%, #2d1a1a 40%, #1a1a1a 100%);
            padding: clamp(30px, 5vw, 50px) 24px;
            color: white;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: -30%;
            right: -10%;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(230,57,70,0.25) 0%, transparent 70%);
            border-radius: 50%;
        }

        .hero__content { max-width: 700px; margin: 0 auto; position: relative; z-index: 1; }

        .hero__greeting { font-size: 0.9rem; opacity: 0.8; margin-bottom: 6px; }

        .hero__title {
            font-size: clamp(2rem, 5vw, 3rem);
            font-weight: 800;
            letter-spacing: -0.03em;
            margin-bottom: 8px;
            line-height: 1.1;
        }

        .hero__subtitle { font-size: clamp(0.9rem, 2vw, 1.1rem); opacity: 0.75; margin-bottom: 20px; }

        .hero__stats {
            display: flex;
            justify-content: center;
            gap: clamp(16px, 4vw, 40px);
            flex-wrap: wrap;
        }

        .hero-stat {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.9rem;
            opacity: 0.9;
            background: rgba(255,255,255,0.08);
            padding: 10px 18px;
            border-radius: 50px;
        }

        .hero-stat i { color: var(--accent); }

        /* ===== CONTROLES ===== */
        .controls-wrapper {
            max-width: 700px;
            margin: -22px auto 20px;
            padding: 0 24px;
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            position: relative;
            z-index: 10;
        }

        .location-btn {
            flex: 1;
            min-width: 200px;
            background: var(--white);
            border: 2px solid var(--gray-200);
            padding: 14px 20px;
            border-radius: var(--radius-xl);
            font-weight: 600;
            font-size: 0.9rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: var(--transition);
            font-family: inherit;
            box-shadow: var(--shadow-lg);
        }

        .location-btn:hover { border-color: var(--primary); transform: translateY(-2px); }
        .location-btn--found { border-color: var(--green); background: #f0fdf4; }

        .city-select {
            flex: 1;
            min-width: 200px;
            padding: 14px 20px;
            border: 2px solid var(--gray-200);
            border-radius: var(--radius-xl);
            font-weight: 600;
            font-size: 0.9rem;
            cursor: pointer;
            font-family: inherit;
            background: var(--white);
            box-shadow: var(--shadow-lg);
            transition: var(--transition);
            appearance: none;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%23737373'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 16px center;
            padding-right: 40px;
        }

        .city-select:focus { outline: none; border-color: var(--primary); }

        /* ===== BARRA DE BÚSQUEDA ===== */
        .search-wrapper {
            max-width: 700px;
            margin: 0 auto 24px;
            padding: 0 24px;
        }

        .search-wrapper .search-inner {
            position: relative;
        }

        .search-wrapper .search-icon {
            position: absolute;
            left: 18px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gray-400);
            font-size: 1rem;
        }

        .search-wrapper .search-input {
            width: 100%;
            padding: 14px 20px 14px 48px;
            border: 2px solid var(--gray-200);
            border-radius: var(--radius-xl);
            font-size: 0.95rem;
            font-family: inherit;
            transition: var(--transition);
            background: var(--white);
        }

        .search-wrapper .search-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(230,57,70,0.08);
        }

        .main-content { max-width: 1200px; margin: 0 auto; padding: 0 24px 40px; }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 12px;
        }

        .section-header__title {
            font-size: clamp(1.3rem, 3vw, 1.6rem);
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .section-header__count {
            font-size: 0.85rem;
            color: var(--gray-600);
            background: var(--gray-100);
            padding: 6px 16px;
            border-radius: 50px;
            font-weight: 500;
        }

        .stores-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
            gap: 20px;
        }

        .store-card {
            background: var(--white);
            border-radius: var(--radius-lg);
            border: 1.5px solid var(--gray-200);
            overflow: hidden;
            transition: var(--transition);
            display: flex;
            flex-direction: column;
        }

        .store-card:hover { border-color: var(--accent); box-shadow: var(--shadow-lg); }

        .store-card--nearest {
            border-color: var(--primary);
            border-width: 2px;
            box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.06);
            animation: glowPulse 2.5s ease-in-out infinite;
        }

        @keyframes glowPulse {
            0%, 100% { box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.06); }
            50% { box-shadow: 0 0 0 16px rgba(230, 57, 70, 0); }
        }

        .store-card__header { padding: 20px 20px 0; }

        .store-card__name {
            font-size: 1.15rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 8px;
        }

        .store-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 12px;
            border-radius: 50px;
            font-size: 0.7rem;
            font-weight: 700;
        }

        .store-badge--nearest { background: #fee2e2; color: var(--primary); }
        .store-badge--open { background: #d1fae5; color: #059669; }
        .store-badge--closed { background: #fee2e2; color: #dc2626; }
        .store-badge--city { background: #e0e7ff; color: #3730a3; }

        .store-card__address {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.88rem;
            color: var(--gray-600);
            margin-bottom: 4px;
        }

        .store-card__address i { color: var(--primary); font-size: 0.8rem; width: 16px; }

        .store-card__distance {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 0.8rem;
            color: var(--primary);
            font-weight: 600;
            margin-bottom: 12px;
        }

        .carousel-section { padding: 0 20px 8px; }

        .carousel-label {
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--gray-600);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .swiper { width: 100%; padding-bottom: 8px; }
        .swiper-slide { height: auto; }

        .product-card {
            background: var(--white);
            border-radius: var(--radius-md);
            overflow: hidden;
            text-align: center;
            height: 100%;
            transition: var(--transition);
            display: flex;
            flex-direction: column;
            border: 1px solid var(--gray-200);
            box-shadow: var(--shadow-sm);
        }

        .product-card:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-lg);
            border-color: var(--accent);
        }

        .product-card__img { width: 100%; height: 180px; object-fit: cover; display: block; }

        .product-card__img-placeholder {
            width: 100%;
            height: 180px;
            background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            color: var(--gray-400);
        }

        .product-card__body { padding: 16px; flex: 1; display: flex; flex-direction: column; }

        .product-card__name {
            font-weight: 700;
            font-size: 1rem;
            margin-bottom: 4px;
            color: var(--dark);
        }

        .product-card__desc {
            font-size: 0.78rem;
            color: var(--gray-600);
            margin-bottom: 14px;
            line-height: 1.4;
            flex: 1;
        }

        .product-card__btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--whatsapp);
            color: white;
            padding: 10px 20px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.85rem;
            transition: var(--transition);
            width: 100%;
            justify-content: center;
            margin-top: auto;
        }

        .product-card__btn:hover { background: #128c7e; transform: scale(1.03); }

        .swiper-button-next,
        .swiper-button-prev {
            color: var(--primary);
            background: var(--white);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            box-shadow: var(--shadow-md);
            transition: var(--transition);
        }

        .swiper-button-next:hover,
        .swiper-button-prev:hover { background: var(--primary); color: white; transform: scale(1.1); }

        .swiper-button-next::after,
        .swiper-button-prev::after { font-size: 1rem; font-weight: 900; }

        .swiper-pagination-bullet { background: var(--gray-400); opacity: 0.5; }
        .swiper-pagination-bullet-active { background: var(--primary); opacity: 1; }

        .store-actions {
            display: flex;
            gap: 10px;
            padding: 16px 20px 20px;
            margin-top: auto;
        }

        .btn-store {
            flex: 1;
            padding: 11px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: var(--transition);
            font-family: inherit;
            border: none;
            cursor: pointer;
        }

        .btn-store--call { background: var(--white); border: 2px solid var(--gray-200); color: var(--dark); }
        .btn-store--call:hover { border-color: var(--primary); color: var(--primary); }
        .btn-store--whatsapp { background: var(--whatsapp); color: white; }
        .btn-store--whatsapp:hover { background: #128c7e; }
        .btn-store--directions { background: var(--dark); color: white; }
        .btn-store--directions:hover { background: #000; }

        .bottom-cta {
            background: var(--white);
            border-top: 1px solid var(--gray-200);
            padding: 16px 24px;
            display: flex;
            gap: 12px;
            justify-content: center;
            flex-wrap: wrap;
            position: sticky;
            bottom: 0;
            z-index: 50;
        }

        .bottom-cta__btn {
            padding: 14px 28px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 700;
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: var(--transition);
            white-space: nowrap;
        }

        .bottom-cta__btn--primary {
            background: var(--primary);
            color: white;
            box-shadow: 0 4px 16px rgba(230, 57, 70, 0.3);
        }

        .bottom-cta__btn--primary:hover { background: var(--primary-dark); transform: translateY(-2px); }
        .bottom-cta__btn--secondary { background: var(--gray-100); color: var(--dark); }
        .bottom-cta__btn--secondary:hover { background: var(--gray-200); }

        .landing-footer {
            text-align: center;
            padding: 24px;
            color: var(--gray-600);
            font-size: 0.8rem;
            background: var(--white);
            border-top: 1px solid var(--gray-200);
        }

        .landing-footer img { height: 30px; margin-bottom: 8px; opacity: 0.6; }
        .landing-footer a { color: var(--primary); text-decoration: none; }

        .empty-state {
            grid-column: 1 / -1;
            text-align: center;
            padding: 60px 20px;
        }

        .empty-state i { font-size: 3rem; color: var(--gray-400); margin-bottom: 16px; display: block; }
        .empty-state p { color: var(--gray-600); font-size: 1.1rem; }

        @keyframes spin { to { transform: rotate(360deg); } }

        @media (max-width: 768px) {
            .topbar { padding: 0 16px; height: 56px; }
            .topbar__btn { font-size: 0.75rem; padding: 6px 12px; }
            .hero { padding: 30px 16px; }
            .stores-grid { grid-template-columns: 1fr; gap: 16px; }
            .main-content { padding: 0 16px 24px; }
            .controls-wrapper { padding: 0 16px; flex-direction: column; }
            .search-wrapper { padding: 0 16px; }
            .store-actions { flex-wrap: wrap; }
            .btn-store { font-size: 0.8rem; padding: 10px; }
            .bottom-cta { padding: 12px 16px; flex-direction: column; }
            .bottom-cta__btn { justify-content: center; width: 100%; }
            .product-card__img { height: 150px; }
            .product-card__img-placeholder { height: 150px; }
        }

        @media (min-width: 769px) {
            .stores-grid { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }
            .product-card__img { height: 180px; }
            .product-card__img-placeholder { height: 180px; }
        }

        @media (min-width: 1200px) {
            .stores-grid { grid-template-columns: repeat(2, 1fr); }
        }

        @media (max-width: 380px) {
            .store-actions { flex-direction: column; gap: 8px; }
            .btn-store { width: 100%; }
            .product-card__img { height: 130px; }
            .product-card__img-placeholder { height: 130px; }
        }

          @keyframes spin {
            to { transform: rotate(360deg); }
        }