/* =========================================================
   ALBUMSHOT EVENTOS
   BLOQUE: RECUERDOS
   ========================================================= */


/* =========================================================
   BLOQUE GENERAL
   ========================================================= */

.recuerdos-block{
    position: relative;
    width: 100%;
    box-sizing: border-box;

    padding-top: var(--recuerdos-padding-top, 24px);
    padding-bottom: var(--recuerdos-padding-bottom, 24px);
    padding-left: var(--recuerdos-padding-left, 16px);
    padding-right: var(--recuerdos-padding-right, 16px);

    overflow: hidden;

    background: var(--recuerdos-background, transparent);

    background-image:
        var(--recuerdos-background-image, none);

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.recuerdos-inner{
    position: relative;
    width: 100%;
    margin: 0 auto;
}


/* =========================================================
   CARRUSEL
   ========================================================= */

.recuerdos-carousel{
    position: relative;

    width: var(--recuerdos-width, 86%);
    max-width: 100%;

    margin: 0 auto;

    box-sizing: border-box;

    touch-action: pan-y;
    user-select: none;
}


.recuerdos-track{
    position: relative;

    width: 100%;
    min-height: 1px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}


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

.recuerdos-slide{
    position: relative;

    flex: 0 0 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    box-sizing: border-box;

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

    transform-origin: center center;
}


.recuerdos-photo{
    position: relative;

    width: 100%;

    overflow: hidden;

    box-sizing: border-box;

    border-radius:
        var(--recuerdos-radius, 18px);

    background: transparent;
}


.recuerdos-photo img{
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    border: 0;

    pointer-events: none;

    -webkit-user-drag: none;

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


/* =========================================================
   PROPORCIONES
   ========================================================= */

.recuerdos-ratio-4-5 .recuerdos-photo{
    aspect-ratio: 4 / 5;
}


.recuerdos-ratio-3-2 .recuerdos-photo{
    aspect-ratio: 3 / 2;
}


.recuerdos-ratio-1-1 .recuerdos-photo{
    aspect-ratio: 1 / 1;
}


/* =========================================================
   MARCO
   ========================================================= */

.recuerdos-with-frame .recuerdos-photo{
    border-style: solid;

    border-width:
        var(--recuerdos-frame-width, 0px);

    border-color:
        var(--recuerdos-frame-color, #ffffff);
}


.recuerdos-without-frame .recuerdos-photo{
    border: none;
}


/* =========================================================
   SOMBRA
   ========================================================= */

.recuerdos-with-shadow .recuerdos-photo{
    box-shadow:
        0 12px 30px rgba(0,0,0,0.18);
}


/* =========================================================
   MODELO CLASSIC
   ========================================================= */

.recuerdos-model-classic .recuerdos-track{
    overflow: hidden;
}


.recuerdos-model-classic .recuerdos-slide{
    display: none;
}


.recuerdos-model-classic .recuerdos-slide.is-active{
    display: flex;
}


/* =========================================================
   MODELO STACK
   ========================================================= */

.recuerdos-model-stack .recuerdos-track{
    min-height: 320px;

    overflow: visible;

    perspective: 1200px;
}


.recuerdos-model-stack .recuerdos-slide{
    position: absolute;

    top: 50%;
    left: 50%;

    width: 82%;

    opacity: 0;

    transform:
        translate(-50%, -50%)
        scale(0.88);

    pointer-events: none;

    z-index: 1;
}


.recuerdos-model-stack .recuerdos-slide.is-active{
    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1);

    z-index: 5;

    pointer-events: auto;
}


/*
   Estas clases serán administradas por recuerdos.js.
   Se dejan preparadas desde ahora.
*/

.recuerdos-model-stack .recuerdos-slide.is-prev{
    opacity: 0.65;

    transform:
        translate(-62%, -50%)
        rotate(-4deg)
        scale(0.92);

    z-index: 3;
}


.recuerdos-model-stack .recuerdos-slide.is-next{
    opacity: 0.65;

    transform:
        translate(-38%, -50%)
        rotate(4deg)
        scale(0.92);

    z-index: 3;
}


/* =========================================================
   MODELO PEEK
   ========================================================= */

.recuerdos-model-peek .recuerdos-track{
    overflow: visible;
}


.recuerdos-model-peek .recuerdos-slide{
    display: none;

    width: 76%;

    flex: 0 0 76%;
}


.recuerdos-model-peek .recuerdos-slide.is-active{
    display: flex;

    margin: 0 auto;

    z-index: 4;
}


/*
   Las clases is-prev e is-next serán puestas por JS.
*/

.recuerdos-model-peek .recuerdos-slide.is-prev,
.recuerdos-model-peek .recuerdos-slide.is-next{
    display: flex;

    position: absolute;

    top: 50%;

    width: 68%;

    opacity: 0.55;

    z-index: 2;

    pointer-events: none;
}


.recuerdos-model-peek .recuerdos-slide.is-prev{
    left: 0;

    transform:
        translate(-52%, -50%)
        scale(0.90);
}


.recuerdos-model-peek .recuerdos-slide.is-next{
    right: 0;

    transform:
        translate(52%, -50%)
        scale(0.90);
}


/* =========================================================
   TRANSICIONES
   ========================================================= */


/* FADE */

.recuerdos-transition-fade .recuerdos-slide{
    transition:
        opacity var(--recuerdos-transition-duration, 500ms) ease;
}


/* SLIDE */

.recuerdos-transition-slide .recuerdos-slide{
    transition:
        opacity var(--recuerdos-transition-duration, 500ms) ease,
        transform var(--recuerdos-transition-duration, 500ms) ease;
}


/* ZOOM */

.recuerdos-transition-zoom .recuerdos-slide{
    transition:
        opacity var(--recuerdos-transition-duration, 500ms) ease,
        transform var(--recuerdos-transition-duration, 500ms) ease;
}


.recuerdos-transition-zoom .recuerdos-slide:not(.is-active){
    transform: scale(0.92);
}


.recuerdos-transition-zoom .recuerdos-slide.is-active{
    transform: scale(1);
}


/* TILT */

.recuerdos-transition-tilt .recuerdos-slide{
    transition:
        opacity var(--recuerdos-transition-duration, 500ms) ease,
        transform var(--recuerdos-transition-duration, 500ms) ease;
}


.recuerdos-transition-tilt .recuerdos-slide:not(.is-active){
    transform:
        rotate(-2deg)
        scale(0.96);
}


.recuerdos-transition-tilt .recuerdos-slide.is-active{
    transform:
        rotate(0deg)
        scale(1);
}


/* NONE */

.recuerdos-transition-none .recuerdos-slide{
    transition: none !important;
}


.recuerdos-transition-none .recuerdos-photo img{
    transition: none !important;
}


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

.recuerdos-arrow{
    position: absolute;

    top: 50%;

    z-index: 20;

    width: 42px;
    height: 42px;

    border: none;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

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

    color: #222;

    font-size: 30px;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 5px 18px rgba(0,0,0,0.18);

    transform: translateY(-50%);

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        opacity 0.2s ease;

    -webkit-tap-highlight-color: transparent;
}


.recuerdos-arrow:hover{
    background: rgba(255,255,255,1);
}


.recuerdos-arrow:active{
    transform:
        translateY(-50%)
        scale(0.94);
}


.recuerdos-arrow-prev{
    left: 8px;
}


.recuerdos-arrow-next{
    right: 8px;
}


/* =========================================================
   INDICADORES / PUNTOS
   ========================================================= */

.recuerdos-dots{
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 8px;

    width: 100%;

    margin-top: 16px;

    box-sizing: border-box;
}


.recuerdos-dot{
    width: 9px;
    height: 9px;

    padding: 0;

    border: none;
    border-radius: 50%;

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

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        opacity 0.2s ease;

    -webkit-tap-highlight-color: transparent;
}


.recuerdos-dot:hover{
    transform: scale(1.15);
}


.recuerdos-dot.is-active{
    background: rgba(0,0,0,0.70);

    transform: scale(1.18);
}


/* =========================================================
   ESTADO VACÍO
   ========================================================= */

.recuerdos-empty{
    width: 100%;

    min-height: 220px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;

    box-sizing: border-box;

    border: 2px dashed rgba(0,0,0,0.14);

    border-radius:
        var(--recuerdos-radius, 18px);

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

    color:
        rgba(0,0,0,0.52);

    font-size: 14px;

    text-align: center;
}


/* =========================================================
   FONDO IMAGEN
   ========================================================= */

.recuerdos-background-image{
    background-color: transparent;
}


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

@media (max-width: 768px){

    .recuerdos-block{
        padding-left:
            min(
                var(--recuerdos-padding-left, 16px),
                16px
            );

        padding-right:
            min(
                var(--recuerdos-padding-right, 16px),
                16px
            );
    }


    .recuerdos-carousel{
        width:
            min(
                var(--recuerdos-width, 92%),
                96%
            );
    }


    .recuerdos-arrow{
        width: 38px;
        height: 38px;

        font-size: 27px;
    }


    .recuerdos-arrow-prev{
        left: 4px;
    }


    .recuerdos-arrow-next{
        right: 4px;
    }


    /* STACK */

    .recuerdos-model-stack .recuerdos-track{
        min-height: 300px;
    }


    .recuerdos-model-stack .recuerdos-slide{
        width: 86%;
    }


    .recuerdos-model-stack .recuerdos-slide.is-prev{
        transform:
            translate(-59%, -50%)
            rotate(-3deg)
            scale(0.92);
    }


    .recuerdos-model-stack .recuerdos-slide.is-next{
        transform:
            translate(-41%, -50%)
            rotate(3deg)
            scale(0.92);
    }


    /* PEEK */

    .recuerdos-model-peek .recuerdos-slide{
        width: 82%;
        flex-basis: 82%;
    }


    .recuerdos-model-peek .recuerdos-slide.is-prev,
    .recuerdos-model-peek .recuerdos-slide.is-next{
        width: 76%;
    }


    .recuerdos-model-peek .recuerdos-slide.is-prev{
        transform:
            translate(-58%, -50%)
            scale(0.91);
    }


    .recuerdos-model-peek .recuerdos-slide.is-next{
        transform:
            translate(58%, -50%)
            scale(0.91);
    }

}


/* =========================================================
   CELULARES PEQUEÑOS
   ========================================================= */

@media (max-width: 480px){

    .recuerdos-carousel{
        width: 94%;
    }


    .recuerdos-arrow{
        width: 36px;
        height: 36px;

        font-size: 25px;
    }


    .recuerdos-dots{
        gap: 7px;

        margin-top: 12px;
    }


    .recuerdos-dot{
        width: 8px;
        height: 8px;
    }


    .recuerdos-empty{
        min-height: 180px;

        padding: 24px;
    }

}


/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media (prefers-reduced-motion: reduce){

    .recuerdos-slide,
    .recuerdos-photo img,
    .recuerdos-arrow,
    .recuerdos-dot{
        transition: none !important;
    }

}