/* ================================= */
/* HERO BJXMODA */
/* ================================= */

.container-carrusel-fotos{

    width: 100%;

    background-color: black;

    overflow: hidden;

    position: relative;

    padding-top: 20px;
}

/* DEGRADADO INFERIOR */

.container-carrusel-fotos::after{

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 200px;

    background: linear-gradient(
        transparent,
        rgba(0,0,0,0.9)
    );

    pointer-events: none;
}

/* ================================= */
/* TRACK */
/* ================================= */

.slider-track{

    display: flex;

    animation: slider 28s infinite ease-in-out;
}

/* ================================= */
/* GRUPOS */
/* ================================= */

.grupo-fotos{

    width: 100vw;

    flex-shrink: 0;

    display: flex;

    gap: 12px;

    padding: 0 20px;

    box-sizing: border-box;
}

/* ================================= */
/* IMAGENES */
/* ================================= */

.grupo-fotos img{

    width: calc((100% - 36px) / 4);

    aspect-ratio: 3 / 4.5;

    object-fit: cover;

    border-radius: 10px;

    filter: grayscale(100%);

    transition:
    transform 0.5s ease,
    filter 0.5s ease,
    opacity 0.5s ease;

    cursor: pointer;
}

/* HOVER */

.grupo-fotos img:hover{

    filter: grayscale(0%);

    transform: scale(1.03);

    opacity: 0.95;
}

/* ================================= */
/* FLECHAS */
/* ================================= */

.arrow{

    position: absolute;

    top: 32%;

    transform: translateY(-50%);

    width: 55px;

    height: 55px;

    border: 1px solid rgba(255,255,255,0.15);

    border-radius: 50%;

    backdrop-filter: blur(5px);

    background: rgba(0,0,0,0.8);

    color: white;

    font-size: 30px;

    cursor: pointer;

    z-index: 10;

    transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

/* HOVER */

.arrow:hover{

    background: white;

    color: black;

    transform:
    translateY(-50%)
    scale(1.05);
}

/* IZQUIERDA */

.arrow.left{

    left: 20px;
}

/* DERECHA */

.arrow.right{

    right: 20px;
}

/* ================================= */
/* DOTS */
/* ================================= */

.dots{

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 12px;

    margin-top: 35px;
}

/* DOT */

.dot{

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: rgba(255,255,255,0.3);

    transition: 0.3s ease;
}

/* DOT ACTIVO */

.dot.active{

    background: white;

    transform: scale(1.2);
}

/* ================================= */
/* LOGO */
/* ================================= */

.contenedor-logo{

    display: flex;

    justify-content: center;

    padding: 90px 0 70px;
}

.contenedor-logo img{

    width: 520px;

    max-width: 80%;
}

/* ================================= */
/* ANIMACION */
/* ================================= */

@keyframes slider{

    /* SLIDE 1 */

    0%,20%{

        transform: translateX(0);
    }

    /* SLIDE 2 */

    25%,45%{

        transform: translateX(-100vw);
    }

    /* SLIDE 3 */

    50%,70%{

        transform: translateX(-200vw);
    }

    /* SLIDE 4 */

    75%,95%{

        transform: translateX(-300vw);
    }

    /* RESET */

    100%{

        transform: translateX(0);
    }
}

/* ================================= */
/* TABLET */
/* ================================= */

@media(max-width: 900px){

    .grupo-fotos{

        flex-wrap: nowrap;

        gap: 8px;

        padding: 0 10px;
    }

    .grupo-fotos img{

        width: calc((100% - 24px) / 4);

        aspect-ratio: 3 / 5;

        border-radius: 8px;
    }

    .contenedor-logo{

        padding: 70px 0 55px;
    }

    .contenedor-logo img{

        width: 320px;
    }

    .arrow{

        width: 42px;

        height: 42px;

        font-size: 22px;
    }
}

/* ================================= */
/* MOBILE */
/* ================================= */

@media(max-width: 600px){

    .container-carrusel-fotos{

        padding-top: 10px;
    }

    .grupo-fotos{

        gap: 6px;

        padding: 0 8px;
    }

    .grupo-fotos img{

        width: calc((100% - 18px) / 4);

        aspect-ratio: 3 / 5.5;

        border-radius: 6px;
    }

    .arrow{

        width: 38px;

        height: 38px;

        font-size: 18px;
    }

    .arrow.left{

        left: 10px;
    }

    .arrow.right{

        right: 10px;
    }

    .dots{

        margin-top: 22px;

        gap: 10px;
    }

    .dot{

        width: 10px;

        height: 10px;
    }

    .contenedor-logo{

        padding: 50px 0 40px;
    }

    .contenedor-logo img{

        width: 240px;
    }
}