/* =====================================================
   SECCIÓN CARRUSEL
===================================================== */

.historia-carousel {

    width: 100%;
}


/* =====================================================
   CONTENEDOR
===================================================== */

.carousel-container {

    position: relative;

    width: min(1450px, 94%);

    margin: 0 auto;
}


/* =====================================================
   VIEWPORT
===================================================== */

.carousel-viewport {

    width: 100%;

    overflow: hidden;

    cursor: grab;

    touch-action: pan-y;

    user-select: none;
}


.carousel-viewport:active {

    cursor: grabbing;
}


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

.carousel-track {

    display: flex;

    gap: 28px;

    transition:
        transform 0.65s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

    will-change: transform;
}


/* =====================================================
   SLIDES
===================================================== */

.carousel-slide {

    flex: 0 0 calc(
        (100% - 56px) / 3
    );

    display: flex;

    justify-content: center;
}


/* =====================================================
   IMÁGENES
===================================================== */

.chapter-image {

    width: 100%;

    height: auto;

    display: block;

    object-fit: contain;

    cursor: zoom-in;

    user-select: none;

    -webkit-user-drag: none;

    box-shadow:
        0 15px 45px
        rgba(0, 0, 0, 0.45);

    transition:
        transform 0.4s ease,
        filter 0.4s ease;
}


/*
   Pequeño efecto al pasar el mouse
*/

.chapter-image:hover {

    transform: scale(1.015);

    filter:
        brightness(1.04);
}


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

.carousel-arrow {

    position: absolute;

    top: 50%;

    transform:
        translateY(-50%);

    z-index: 5;

    width: 48px;

    height: 48px;

    border-radius: 50%;

    border:
        1px solid
        rgba(225, 163, 181, 0.55);

    background:
        rgba(15, 8, 11, 0.78);

    color: #e8a8bb;

    font-size: 34px;

    font-family:
        Georgia,
        serif;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

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


.arrow-prev {

    left: -24px;
}


.arrow-next {

    right: -24px;
}


.carousel-arrow:hover {

    background:
        rgba(92, 22, 45, 0.9);

    border-color:
        #d68ca5;

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


/* =====================================================
   PAGINACIÓN
===================================================== */

.carousel-pagination {

    display: flex;

    justify-content: center;

    margin-top: 35px;
}


.pagination-dots {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    min-height: 30px;
}


/* =====================================================
   CIRCULITOS
===================================================== */

.dot {

    width: 8px;

    height: 8px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background:
        rgba(
            230,
            170,
            190,
            0.38
        );

    cursor: pointer;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}


.dot:hover {

    background:
        rgba(
            230,
            170,
            190,
            0.75
        );

    transform:
        scale(1.25);
}


.dot.active {

    background:
        #d88ca5;

    transform:
        scale(1.5);

    box-shadow:
        0 0 10px
        rgba(
            216,
            140,
            165,
            0.55
        );
}


/* =====================================================
   CEREZA
===================================================== */

.cherry-decoration {

    width: 42px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 3px;
}


.cherry-decoration span {

    font-size: 22px;

    filter:
        drop-shadow(
            0 0 6px
            rgba(
                210,
                80,
                110,
                0.45
            )
        );

    transform:
        translateY(-1px);
}


/* =====================================================
   LIGHTBOX
===================================================== */

.image-lightbox {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

    background:
        rgba(
            5,
            3,
            4,
            0.96
        );

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.45s ease,
        visibility 0.45s ease;
}


/*
   Cuando está abierto
*/

.image-lightbox.active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* =====================================================
   CONTENEDOR DE IMAGEN AMPLIADA
===================================================== */

.lightbox-content {

    position: relative;

    max-width: 92vw;

    max-height: 94vh;

    display: flex;

    align-items: center;

    justify-content: center;

    transform:
        scale(0.72);

    opacity: 0;

    transition:
        transform 0.55s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),

        opacity 0.4s ease;
}


/*
   Animación de entrada
*/

.image-lightbox.active
.lightbox-content {

    transform:
        scale(1);

    opacity: 1;
}


/* =====================================================
   IMAGEN DEL LIGHTBOX
===================================================== */

#lightboxImage {

    display: block;

    max-width: 92vw;

    max-height: 94vh;

    width: auto;

    height: auto;

    object-fit: contain;

    box-shadow:
        0 25px 80px
        rgba(
            0,
            0,
            0,
            0.75
        );

    border-radius: 2px;
}


/* =====================================================
   BOTÓN CERRAR
===================================================== */

.lightbox-close {

    position: fixed;

    top: 24px;

    right: 30px;

    z-index: 10000;

    width: 48px;

    height: 48px;

    border-radius: 50%;

    border:
        1px solid
        rgba(
            255,
            220,
            230,
            0.5
        );

    background:
        rgba(
            20,
            8,
            12,
            0.65
        );

    color: #ffffff;

    font-size: 34px;

    font-family:
        Arial,
        sans-serif;

    font-weight: 200;

    line-height: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

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


.lightbox-close:hover {

    background:
        rgba(
            100,
            20,
            45,
            0.8
        );

    transform:
        rotate(90deg);
}


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

@media (max-width: 1000px) {

    .carousel-slide {

        flex: 0 0 calc(
            (100% - 28px) / 2
        );

    }


    .arrow-prev {

        left: -15px;

    }


    .arrow-next {

        right: -15px;

    }

}


/* =====================================================
   CELULAR
===================================================== */

@media (max-width: 650px) {


    .carousel-container {

        width: 88%;

    }


    .carousel-track {

        gap: 0;

    }


    /*
       UNA SOLA FOTO
    */

    .carousel-slide {

        flex: 0 0 100%;

    }


    .chapter-image {

        width: 100%;

        box-shadow:
            0 10px 30px
            rgba(
                0,
                0,
                0,
                0.5
            );

    }


    /*
       Flechas
    */

    .carousel-arrow {

        width: 38px;

        height: 38px;

        font-size: 28px;

        background:
            rgba(
                13,
                9,
                11,
                0.7
            );

    }


    .arrow-prev {

        left: -19px;

    }


    .arrow-next {

        right: -19px;

    }


    /*
       Pagination
    */

    .carousel-pagination {

        margin-top: 25px;

    }


    .pagination-dots {

        gap: 8px;

    }


    .dot {

        width: 7px;

        height: 7px;

    }


    .cherry-decoration {

        width: 32px;

        margin:
            0 1px;

    }


    .cherry-decoration span {

        font-size: 18px;

    }


    /*
       LIGHTBOX MOBILE
    */

    .image-lightbox {

        padding:
            15px;

    }


    .lightbox-content {

        max-width: 96vw;

        max-height: 92vh;

    }


    #lightboxImage {

        max-width: 96vw;

        max-height: 92vh;

    }


    .lightbox-close {

        top: 15px;

        right: 15px;

        width: 42px;

        height: 42px;

        font-size: 29px;

    }

}