.MAINCONTAINER {
        /*display: grid;*/
        /*display: block;*/
        /*display: flex;*/
        /*grid-template-columns: repeat(4, 1fr); /* 4 columnas en escritorio */
        /*gap: 8px;*/
        /*padding: 1%;*/
        /*align-items: center;*/
        /* nueva version */
        display: flex;
        align-items: center;
        width: 100%;
        /* max-width: 1200px; /* Ajusta según tu diseño */
        margin: 0 auto;
        position: relative;
        overflow: hidden; /* Oculta las cards que se desborden */
    }
    
    .CARDSCONTAINER {
        /*display: grid;*/
        /*grid-column: 1 / span 3; /* Ocupa las primeras 3 columnas */
        /*grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); /* Grid interno responsive */
        /*gap: 8px;*/
        /*padding: 1%;*/
        /* nueva version */
        display: flex;
        gap: 8px;
        padding: 1%;
        width: calc(100% - 100px); /* Resta el ancho de las flechas */
        margin: 0 auto;
        scroll-behavior: smooth;
    }

    .FILTERCONTAINER{
        display: inline-flex;
        width: 100%;
        height: 65px;
        /*margin: 0 0 20px 0;*/
        padding: 5px;
        background: #0f161e;
        gap: 0.7%;
        border-bottom: solid #ffffff2e 1px;
        border-top: solid #ffffff2e 1px;
        /*border-radius: 5px;*/
        color: #fff;
        /*align-items: center;*/
        position: sticky;
        top: 85px;
        z-index: 999;
    }

    /* Estilos cards */
    .AUTOCARD {
        background: linear-gradient(to bottom, #1e1e2f, #111);
        color: white;
        font-family: 'Arial', sans-serif;
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid #ffffff2e;
        flex: 0 0 calc(25% - 8px); /* 4 cards por fila (25% - gap) */
    }
    
    .AUTOCARD:hover {
        border-color: #d44941;
    }
    
    .brand-logo {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .LABELSLIDER {
        display: inline-flex;
        justify-content: center;
    }
    
    .LAST-INFO {
        display: flex;
        justify-content: space-around;
    }

    /* Para escritorio */
    @media (min-width: 1025px) {
        .CARDSCONTAINER {
            grid-template-columns: repeat(4, 1fr);
        }
        
        #checkbox-container {
            display: grid;
            padding: 3%;
            border: solid 1px #ffffff2e;
            width: 100%;
            justify-content: center;
            border-radius: 0 0 7px 7px;
            background: #0f161e;
            color: #fff;
            z-index: 999;
            font-size: larger;
            font-weight: normal;
        }
        
        button.FILTERBUTTON {
            /*display: grid;*/
            height: 50px;
            padding: 10px 40px !important;
            border-radius: 30px;
            /*align-content: center;*/
        }
        
        .FILTERDIV{
            display: flex;
            width: 100%;
            border-style: solid;
            border-right-width: 1px;
            border-left-width: 0;
            border-top-width: 0;
            border-bottom-width: 0;
            border-color: #ffffff2e;
            padding-right: 0.7%;
            flex-direction: column;
            justify-content: space-around;
        }
    }

    /* Responsive para tablets */
    @media (max-width: 1024px) {
        .MAINCONTAINER {
            grid-template-columns: repeat(3, 1fr);
        }
        
        .CARDSCONTAINER {
            grid-column: 1 / span 2; /* Ocupa 2 columnas */
        }
        
        .FILTERCONTAINER {
            grid-column: 3; /* Ocupa la tercera columna */
        }
        
    }
    
    /* Responsive para móviles */
    @media (max-width: 768px) {
        .MAINCONTAINER {
            grid-template-columns: 1fr;
            display: flex;
            /*flex-direction: column;*/
        }
        
        .CARDSCONTAINER {
            grid-column: 1;
            grid-template-columns: repeat(1, 1fr); /* 2 cards por fila en móviles */
        }
        
        .FILTERCONTAINER {
            grid-column: 1;
            order: -1; /* Mueve el filtro arriba en móviles */
            margin-bottom: 16px;
            z-index: 999;
            width: 100%;
            position: sticky;
            /*top: 9%;*/
            padding: 7%;
        }
        
        .SLIDER {
            display: inline-grid;
            width: 100%;
            align-items: center;
        }
        
        button.FILTERBUTTON {
            display: inline-grid;
            width: 100%;
            height: 30px;
            align-content: center;
            border-radius: 30px;
        }
        
        .FILTERDIV {
            margin-bottom: 1.5%;
        }
        
        .spec {
            font-size: smaller;
        }
        
        .AUTOCARD{
            flex: 0 0 100%; /* Cada card ocupa el 100% del contenedor */
            min-width: 280px; /* Ancho fijo para cada card (ajusta según tu diseño) */
            border-radius: 8px;
        }
        
    }
    
    @media (max-width: 660px) {
        .card-image {
            height: 180px;
        }
    }
    
    @media (max-width: 580px) {
        .card-image {
            height: auto;
        }
    }
    
    @media (max-width: 420px) {
        .card-image {
            height: auto;
        }
    }
    
    .card-image img {
      width: 100%;
      display: block;
    }
    
    .card-info {
      padding: 0 10px 10px 10px;
      text-align: center;
    }
    
    .carousel-dots span {
      display: inline-block;
      width: 6px;
      height: 6px;
      margin: 0 3px;
      border-radius: 50%;
      background: #666;
    }
    
    .carousel-dots .active {
      background: white;
    }
    
    .brand-logo img {
      width: 37.5px;
      height: 37.5px;
      margin: 10px 0;
    }
    
    .model {
      font-size: 18px;
      font-weight: bold;
      margin: 10px 0;
    }
    
    .specs {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        color: #8a8a8a;
        font-size: 13px;
        margin: 10px 0;
        align-items: stretch;
        justify-content: space-evenly;
    }
    
    .spec {
        display: inline-grid;
        justify-items: center;
    }
    
    .icon-spec{
     width: 30px;
     height: 30px;
    }
    
    .price {
      /*background: #ff2d2d;*/
      color: #918e8f;
      font-weight: bold;
      /*padding: 8px;*/
      /*font-size: 15px;*/
      /*margin-bottom: 10px;*/
    }
    
    .details-btn {
      /*background: #8a8a8a;*/
      /*color: white;*/
      padding: 8px 12px;
      text-decoration: none;
      font-weight: bold;
      border-radius: 4px;
      display: inline-block;
      background-size: contain;
      content: "";
      width: 24px;
      height: 24px;
      background-image: url('https://moccasin-nightingale-369301.hostingersite.com/wp-content/uploads/2025/07/eye-128x85-1.png');
      background-repeat: no-repeat;
      background-position: center;
    }
    
    .details-btn:hover {
        filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
    }
    
    /* ESTILOS SLIDER */
    .card-image .slider {
        display: flex;
        position: relative;
        width: 100%;
        height: 250px;
        overflow: hidden;
        cursor: pointer;
        justify-content: space-between;
    }
    
    /* ESTILOS FLECHAS */
    .arrows {
        display: flex    ;
        z-index: 1;
        height: 30px;
        width: 30px;
        margin-top: 25%;
    }
    
    .arrows:hover{
        filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
    }
    
    .arrowL {
        display: flex;
        top: 50%;
        height: 30px;
        width: 30px;
        left: 50%;
    }
    
    .slider-img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
    }
    
    .slider-img.active {
      opacity: 1;
    }
    
    .carousel-dots {
      text-align: center;
      margin-top: 10px;
    }
    
    .carousel-dots .dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      background: #666;
      border-radius: 50%;
      margin: 0 3px;
      cursor: pointer;
      transition: background 0.3s;
    }
    
    .carousel-dots .dot.active {
      background: white;
    }
    
    /* slider home */
    .arrowsHomeL, .arrowsHomeR {
        position: relative;
        width: 50px;
        height: 50px;
        display: flex;
        z-index: 999;
    }
    
    .arrowsHomeL:hover{
        filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
    }
    
    .arrowsHomeR:hover{
        filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
    }