:root {
            /* Brand Colors */
            --primary: #01a551;
            --primary-dark: #008a43;
            --primary-light: #02c962;
            --secondary: #1f2937;
            --secondary-light: #374151;
            --accent: #f59e0b;
            --accent-gradient: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
            --primary-gradient: linear-gradient(135deg, #01a551 0%, #059669 100%);
            --dark-gradient: linear-gradient(135deg, #1f2937 0%, #111827 100%);
        }

        * {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: 'Poppins', sans-serif;
            font-weight: 700;
            letter-spacing: -0.02em;
        }

        /* Advanced Animations */

        /* Gradient text animation */
        @keyframes gradientShift {

            0%,
            100% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }
        }

        .gradient-text {
            background: linear-gradient(90deg, #000000ff, #7c7c7cff, #7c7c7cff, #000000ff);
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: gradientShift 3s ease infinite;
        }

        /* Parallax effect */
        .parallax {
            transform: translateY(0);
            transition: transform 0.5s cubic-bezier(0.23, 1, 0.320, 1);
        }

        /* Glassmorphism */
        .glass {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .glass-dark {
            background: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* Reveal animations with different effects */
        .reveal {
            opacity: 0;
            transform: translateY(40px);
            filter: blur(5px);
            transition: all 1s cubic-bezier(0.23, 1, 0.320, 1);
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }

        .reveal-scale {
            opacity: 0;
            transform: scale(0.95);
            filter: blur(3px);
            transition: all 0.8s cubic-bezier(0.23, 1, 0.320, 1);
        }

        .reveal-scale.active {
            opacity: 1;
            transform: scale(1);
            filter: blur(0);
        }

        .reveal-left {
            opacity: 0;
            transform: translateX(-60px);
            transition: all 0.8s cubic-bezier(0.23, 1, 0.320, 1);
        }

        .reveal-left.active {
            opacity: 1;
            transform: translateX(0);
        }

        .reveal-right {
            opacity: 0;
            transform: translateX(60px);
            transition: all 0.8s cubic-bezier(0.23, 1, 0.320, 1);
        }

        .reveal-right.active {
            opacity: 1;
            transform: translateX(0);
        }

        /* Vehicle card CLEAN & MINIMALIST */
        .vehicle-card {
            transition: all 0.3s ease;
            position: relative;
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            overflow: hidden;
        }

        /* Vehicle card premium subtle effects */
        .vehicle-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            position: relative;
        }

        .vehicle-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(1, 165, 81, 0.03) 0%, transparent 100%);
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
            z-index: 1;
        }

        .vehicle-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
        }

        .vehicle-card:hover::before {
            opacity: 1;
        }

        /* Container with more breathing room */
        .container {
            max-width: 1400px;
            padding-left: 3rem;
            padding-right: 3rem;
        }

        @media (max-width: 768px) {
            .container {
                padding-left: 1.5rem;
                padding-right: 1.5rem;
            }
        }

        /* Imagen limpia */
        .vehicle-card .vehicle-image {
            position: relative;
            overflow: hidden;
            background: #ffffff;
            height: 160px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px 12px 0 0;
        }

        .vehicle-card .vehicle-image img {
            transition: transform 0.4s ease;
            max-width: 90%;
            max-height: 90%;
            object-fit: contain;
        }

        .vehicle-card:hover .vehicle-image img {
            transform: scale(1.08);
        }

        /* Título limpio */
        .vehicle-card .vehicle-title {
            font-size: 1rem;
            font-weight: 600;
            color: #1f2937;
            margin-bottom: 0.375rem;
            line-height: 1.4;
        }

        /* Etiqueta "Desde" */
        .vehicle-card .desde-label {
            font-size: 0.8125rem;
            color: #6b7280;
            font-weight: 400;
            margin-bottom: 0.25rem;
        }

        /* Precio dual limpio */
        .vehicle-card .price-dual {
            font-size: 1rem;
            font-weight: 700;
            color: #111827;
            margin-bottom: 0.75rem;
            letter-spacing: -0.01em;
        }

        .vehicle-card .price-separator {
            color: #d1d5db;
            margin: 0 0.5rem;
        }

        /* Badge de transmisión minimalista */
        .vehicle-card .transmission-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;
            padding: 0.375rem 0.75rem;
            background: #f3f4f6;
            border-radius: 6px;
            font-size: 0.8125rem;
            font-weight: 500;
            color: #6b7280;
            margin-bottom: 1rem;
        }

        /* Botón limpio y simple */
        .vehicle-card .btn-ver-modelo {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.9375rem;
            font-weight: 500;
            color: #374151;
            transition: all 0.2s ease;
            text-decoration: none;
        }

        .vehicle-card .btn-ver-modelo:hover {
            color: #01a551;
        }

        .vehicle-card .btn-ver-modelo i {
            transition: transform 0.2s ease;
            font-size: 0.75rem;
        }

        .vehicle-card .btn-ver-modelo:hover i {
            transform: translateX(4px);
        }

        /* Hero card premium effects */
        .hero-card {
            background-size: contain;
            background-position: center center;
            background-repeat: no-repeat;
            background-color: #ffffff;
            position: relative;
            transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
            overflow: hidden;
        }

        .hero-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom,
                    transparent 0%,
                    transparent 50%,
                    rgba(0, 0, 0, 0.7) 100%);
            transition: all 0.4s;
        }

        /* Brillo rojo deslizante en hover */
        .hero-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 0%;
            background: rgba(0, 0, 0, 0.85);
            transition: height 0.5s cubic-bezier(0.23, 1, 0.320, 1);
            z-index: 1;
        }

        .hero-card:hover::before {
            background: transparent;
        }

        .hero-card:hover::after {
            height: 30%;
            /* Ajusta la altura del overlay */
        }

        /* Asegurar que el contenido esté sobre el overlay */
        .hero-card>div {
            position: relative;
            z-index: 2;
        }

        .hero-card:hover {
            transform: scale(1.05) translateY(-5px);
        }

        /* Botón "ver más" que se levanta desde esquina inferior derecha */
        .hero-card .botones-container {
            position: absolute;
            bottom: 0;
            right: -25%;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
            z-index: 20;

            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 0;
            width: 200px;

        }

        /* Regla para mostrar el contenedor al pasar el mouse por la card (SOLO DESKTOP) */
        @media (min-width: 1025px) {
            .hero-card:hover .botones-container {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* En tablets y móviles: botones SIEMPRE VISIBLES */
        @media (max-width: 1024px) {
            .hero-card .botones-container {
                opacity: 1;
                transform: translateY(0);
                right: 0;
                bottom: 1rem;
                width: auto;

            }

            .ver-mas-btn {
                width: auto;
                min-width: 120px;
            }
        }

        /* 2. La clase ver-mas-btn ahora solo maneja el estilo visual (el gradiente naranja/rojo) */
        /* NOTA: El botón Cotizar ya tiene bg-red-600, así que quizás no necesites esto en ambos */
        .ver-mas-btn {
            opacity: 1;
            width: 60%;
            margin-left: auto;
            text-align: center;
            padding: 0px;
            font-weight: 600;
            font-size: 0.9375rem;
            transition: all 0.3s ease;
            right: 0;
            border: none;
            margin: 0;

            /* Quitar la forma personalizada */
            /* clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%); */

            /* Ahora SÍ funciona border-radius */
            /* el valor que tú quieras */
        }

        /* Botón "ver más" que se levanta desde esquina inferior derecha */
        .ver-mas-btn:first-child {
            left: 6%;
            width: 60%;
            background: linear-gradient(135deg, #f59e0b 0%, #dc2626 100%);
            color: white;
            border-radius: 15px 0px 0px 0px;
        }

        /* Botón "cotizar" que se levanta desde esquina inferior izquierda */
        .ver-mas-btn:last-child {
            background: #10b981;
            color: white;
            border-radius: 15px 0px 15px 0px;
            width: 100%;
        }

        .ver-mas-btn:hover {
            transform: translateX(-3px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

        /* Efecto de brillo interno en el botón */
        .hero-card .ver-mas-btn::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .hero-card .ver-mas-btn:hover::before {
            opacity: 1;
        }

        .hero-card:hover .ver-mas-btn {
            opacity: 1;
            transform: translateX(0) translateY(0) scale(1);
        }

        .hero-card .ver-mas-btn:hover {
            transform: translateX(-4px) translateY(-4px) scale(1.02);
            box-shadow: 0 12px 48px 0 rgba(245, 158, 11, 0.6);
        }

        /* Animación de flecha */
        .hero-card .ver-mas-btn i {
            display: inline-block;
            transition: transform 0.3s cubic-bezier(0.23, 1, 0.320, 1);
        }

        .hero-card .ver-mas-btn:hover i {
            transform: translateX(5px);
        }


        /* Title badge - Always visible with simple style, special on hover */
        .hero-card .title-badge {
            position: relative;
            display: inline-block;
            padding: 2px 16px;
            border-radius: 6px;

            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            opacity: 1;
            color: #000000ff;
            transform: translateY(0);
            transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
            font-weight: 400;
            font-size: 0.9375rem;
        }

        .hero-card:hover .title-badge {
            color: #fff;
            padding: 10px 20px 10px 16px;
            background: linear-gradient(135deg, #dc2626 0%, #f59e0b 100%);
            clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
            transform: translateY(0) scale(1.05);
            font-weight: 500;
            box-shadow:
                0 0 20px rgba(220, 38, 38, 0.6),
                0 0 40px rgba(220, 38, 38, 0.4),
                0 0 60px rgba(220, 38, 38, 0.2);
            text-shadow:
                0 0 10px rgba(255, 255, 255, 0.8),
                0 0 20px rgba(255, 255, 255, 0.6),
                0 2px 4px rgba(0, 0, 0, 0.5);
            animation: redNeonPulse 1.5s ease-in-out infinite;
        }

        @keyframes redNeonPulse {

            0%,
            100% {
                box-shadow:
                    0 0 20px rgba(220, 38, 38, 0.6),
                    0 0 40px rgba(220, 38, 38, 0.4),
                    0 0 60px rgba(220, 38, 38, 0.2);
            }

            50% {
                box-shadow:
                    0 0 30px rgba(220, 38, 38, 0.8),
                    0 0 60px rgba(220, 38, 38, 0.6),
                    0 0 90px rgba(220, 38, 38, 0.4);
            }
        }

        .hero-card .title-badge::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            height: 100%;
            background: linear-gradient(to bottom, #dc2626, #f59e0b);
            transition: width 0.4s;
        }

        .hero-card:hover .title-badge::before {
            width: 3px;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
        }


        /* Category tab - Segmented Control Style (like reference image) */
        .category-tab {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 12px 24px;
            background: white;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 0.875rem;
            font-weight: 500;
            color: #374151;
            position: relative;
            margin: 0 !important;
        }

        /* First button rounded left */
        .category-tab:first-child {
            border-radius: 8px 0 0 8px;
        }

        /* Last button rounded right */
        .category-tab:last-child {
            border-radius: 0 8px 8px 0;
        }

        /* Only one button - fully rounded */
        .category-tab:only-child {
            border-radius: 8px;
        }

        .category-tab:hover:not(.active) {
            background: #f3f4f6;
        }

        .category-tab.active {
            background: #727272ff;
            color: white;
            z-index: 1;
        }

        .category-tab.active span {
            color: white;
        }

        /* Container for segmented control */
        #category-filters {
            background: white;
            padding: 4px;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            display: inline-flex;
            gap: 0;
        }

        /* Premium button effects */
        .btn-primary {
            background: var(--primary-gradient);
            color: white;
            font-weight: 600;
            transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
            position: relative;
            overflow: hidden;
        }

        .btn-primary::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }

        .btn-primary:hover::before {
            width: 300px;
            height: 300px;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 15px 35px -10px rgba(1, 165, 81, 0.5);
        }

        /* Scroll progress bar */
        .scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 0%;
            height: 4px;
            background: var(--primary-gradient);
            z-index: 9999;
            transition: width 0.1s ease-out;
            box-shadow: 0 0 10px rgba(1, 165, 81, 0.5);
        }

        /* Background patterns */
        .bg-pattern {
            background-image:
                radial-gradient(circle at 20% 50%, rgba(1, 165, 81, 0.03) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(245, 158, 11, 0.03) 0%, transparent 50%);
        }

        /* Brand filter - Segmented Control Style with Scroll */
        .brand-filters-wrapper {
            width: 100%;
            display: flex;
            justify-content: center;
            padding: 8px 0;
        }

        .brand-filters-scroll {
            display: inline-flex;
            gap: 0;
            overflow-x: auto;
            background: white;
            padding: 6px;
            border-radius: 12px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            scrollbar-width: thin;
            scrollbar-color: rgba(1, 165, 81, 0.3) transparent;
            -webkit-overflow-scrolling: touch;
            max-width: 100%;
        }

        .brand-filters-scroll::-webkit-scrollbar {
            height: 6px;
        }

        .brand-filters-scroll::-webkit-scrollbar-track {
            background: transparent;
            border-radius: 10px;
        }

        .brand-filters-scroll::-webkit-scrollbar-thumb {
            background: rgba(1, 165, 81, 0.3);
            border-radius: 10px;
        }

        .brand-filters-scroll::-webkit-scrollbar-thumb:hover {
            background: rgba(1, 165, 81, 0.5);
        }

        /* Brand filter buttons - Segmented style */
        .brand-filter-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 14px 28px;
            background: white;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 0.9375rem;
            font-weight: 500;
            color: #374151;
            position: relative;
            margin: 0 !important;
            white-space: nowrap;
            flex-shrink: 0;
        }

        /* First button rounded left */
        .brand-filter-btn:first-child {
            border-radius: 8px 0 0 8px;
        }

        /* Last button rounded right */
        .brand-filter-btn:last-child {
            border-radius: 0 8px 8px 0;
        }

        /* Only one button - fully rounded */
        .brand-filter-btn:only-child {
            border-radius: 8px;
        }

        .brand-filter-btn:hover:not(.active) {
            background: #f3f4f6;
        }

        .brand-filter-btn.active {
            background: #01a551;
            color: white;
            z-index: 1;
        }

        .brand-filter-btn.active span {
            color: white;
        }

        @media (max-width: 640px) {
            .brand-filter-btn {
                padding: 12px 20px;
                font-size: 0.875rem;
            }
        }

        .brand-filter-btn:hover {
            border-color: #9ca3af;
            background: #f9fafb;
        }

        .brand-filter-btn.active {
            border-color: #c0c0c0ff;
            background: #c0c0c0ff;
            color: white;
            box-shadow: 0 2px 8px rgba(87, 87, 87, 0.2);
        }

        .brand-filter-btn.active span {
            color: white;
        }

        /* ===========================
           RESPONSIVE DESIGN
           =========================== */

        /* Tablets and below (768px) */
        @media (max-width: 768px) {

            /* Hero cards - Stack better on mobile */
            .hero-card {
                height: 20rem !important;
                /* h-80 */
            }

            .hero-card .title-badge {
                font-size: 0.8125rem;
                padding: 6px 12px;
            }

            .hero-card:hover .title-badge {
                padding: 8px 14px 8px 12px;
            }

            /* Category filters - Better mobile spacing */
            .category-tab {
                padding: 10px 18px;
                font-size: 0.8125rem;
            }

            #category-filters {
                overflow-x: auto;
                justify-content: flex-start;
                max-width: 100%;
            }

            /* Brand filters scroll on mobile */
            .brand-filters-scroll {
                justify-content: flex-start;
            }

            /* Vehicle cards - Better sizing */
            .vehicle-card .vehicle-title {
                font-size: 0.9375rem;
            }

            .vehicle-card .price-dual {
                font-size: 0.9375rem;
            }

            /* Adjust h1 titles */
            h1 {
                font-size: 2rem !important;
            }

            h2 {
                font-size: 1.5rem !important;
            }
        }

        /* Mobile (640px and below) */
        @media (max-width: 640px) {

            /* Hero section adjustments */
            .hero-card {
                height: 18rem !important;
                /* h-72 on mobile */
            }

            /* Grid - Single column */
            #vehicles-grid {
                grid-template-columns: 1fr !important;
            }

            /* Category tabs - Smaller on mobile */
            .category-tab {
                padding: 8px 14px;
                font-size: 0.75rem;
            }

            /* Brand logo indicator - Hide on very small screens */
            #selected-brand-logo {
                display: none !important;
            }

            /* Titles */
            h1 {
                font-size: 1.75rem !important;
            }

            h2 {
                font-size: 1.25rem !important;
            }

            /* Vehicle card adjustments */
            .vehicle-card {
                max-width: 100% !important;
            }

            .vehicle-card .vehicle-image {
                height: 140px;
            }
        }

        /* Small tablets (between 640px and 1024px) */
        @media (min-width: 641px) and (max-width: 1024px) {

            /* 2 columns for tablets */
            #vehicles-grid {
                grid-template-columns: repeat(2, 1fr) !important;
            }

            .hero-card {
                height: 22rem !important;
                /* h-88 */
            }
        }

        /* Large screens (1536px and up) */
        @media (min-width: 1536px) {
            .hero-card {
                height: 28rem !important;
                /* h-112 */
            }

            .hero-card .title-badge {
                font-size: 1.0625rem;
            }
        }

        /* Landscape orientation adjustments */
        @media (max-width: 768px) and (orientation: landscape) {
            .hero-card {
                height: 16rem !important;
            }
        }