/* ===================== CONTENEDOR PRINCIPAL DE MARCAS ===================== */
.contenedor-marcas {
    margin-top: 5rem;
    display: grid;
    gap: 35px;
    min-height: 250px;
    grid-template-rows: auto auto;
    overflow: hidden;
    position: relative;
}

/* ===================== ENVOLTORIO DE MARCAS ===================== */
.caja-marcas-wrapper {
    width: 100%;
    overflow: hidden;
}

/* ===================== CABECERA DEL BLOQUE ===================== */
.caja-texto-marcas {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 10px;
}

/* ===================== ICONOS SVG ===================== */
.caja-texto-marcas svg,
.btn-flecha svg {
    width: 20px;
    height: 20px;
    transition: all 0.3s ease;
}

.caja-texto-marcas svg {
    fill: red;
}

.btn-flecha svg {
    stroke: red;
}

/* ===================== BOTONES DE FLECHA ===================== */
.btn-flecha {
    display: grid;
    place-items: center;
    border: 2px solid red;
    border-radius: 50%;
    padding: 5px;
    background-color: #fff;
    transition: all 0.3s ease;
}

.btn-flecha:hover {
    background-color: red;
}

.btn-flecha:hover svg {
    stroke: white;
    fill: white;
}

/* ===================== CONTENEDOR DE LAS MARCAS ===================== */
.caja-marcas {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 300px;
    gap: 25px;
    align-items: center;
    width: max-content;
    animation: moverMarcas 20s linear infinite;
}

.caja-marcas:hover {
    animation-duration: 40s;
}

/* ===================== TARJETAS INDIVIDUALES DE MARCA ===================== */
.caja-marcas div {
    width: 250px;
    height: 130px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 10px;
}

/* ===================== IMÁGENES DE CADA MARCA ===================== */
.caja-marcas-1 {
    background-image: url(yang-zu-1.png);
}

.caja-marcas-2 {
    background-image: url(top-1.png);
}

.caja-marcas-3 {
    background-image: url(yang-zu-2.png);
}

/* ===================== ANIMACIÓN DE DESPLAZAMIENTO ===================== */
@keyframes moverMarcas {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}


/* ===================== RESPONSIVE PARA MÓVILES ===================== */
@media screen and (max-width: 600px) {
    .caja-marcas {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
        width: 100%;
        animation: none;
        /* Desactiva la animación para móviles */
    }

    .caja-marcas div {
        width: 100%;
        height: 130px;
    }
}