/*
|--------------------------------------------------------------------------
| MEMORIAS — GALERÍA DE IMÁGENES
|--------------------------------------------------------------------------
| FRONTEND
|--------------------------------------------------------------------------
|
| Gutenberg administra:
| - imágenes;
| - orden;
| - captions.
|
| JavaScript administra:
| - flechas;
| - dots;
| - slide activo;
| - abrir imagen.
|
|--------------------------------------------------------------------------
*/


/* ==========================================================================
   VARIABLES
   ========================================================================== */

.memorias-galeria {
    /*
     * Cuánto sube la sección clara dentro
     * del slider de entrevistas.
     */
    --memorias-galeria-overlap:
        clamp(175px, 14vw, 225px);


    /*
     * Ancho de los SVG laterales.
     */
    --memorias-galeria-rail:
        clamp(30px, 2.8vw, 44px);


    /*
     * SVG existente del proyecto.
     */
    --memorias-galeria-pattern:
        url("../../svg/linea-decorativa-hero.svg");
}


/* ==========================================================================
   ENTREVISTAS — SUPERPOSICIÓN
   ========================================================================== */

.memorias-entrevistas {
    position:
        relative;
    overflow:
        visible !important;
         padding-bottom: 0px;
}


.memorias-entrevistas__inner {
    position:
        relative;

    overflow:
        visible !important;
}


.memorias-entrevistas__slider {
    position:
        relative;

    z-index:
        20;

    overflow:
        visible !important;
}


/* ==========================================================================
   SECTION — BREAKOUT FULL WIDTH
   ========================================================================== */

.memorias-galeria {
    position:
        relative;

    z-index:
        5;

    /*
     * IMPORTANTE:
     *
     * La sección está anidada dentro de
     * memorias-entrevistas__inner.
     *
     * Rompemos ese ancho para ocupar todo
     * el viewport y eliminar las franjas verdes.
     */
    width:
        100vw !important;

    max-width:
        none !important;

    margin-top:
        calc(
            var(--memorias-galeria-overlap)
            * -1
        )
        !important;

    margin-right:
        calc(
            50% - 50vw
        )
        !important;

    margin-bottom:
        0 !important;

    margin-left:
        calc(
            50% - 50vw
        )
        !important;

    box-sizing:
        border-box;

    padding-top:
        calc(
            var(--memorias-galeria-overlap)
            + clamp(42px, 4vw, 66px)
        );

    padding-right:
        0 !important;

    padding-bottom:
        clamp(52px, 5vw, 82px);

    padding-left:
        0 !important;

    background:
        var(--amoladero-light);

    color:
        var(--amoladero-primary);

    overflow:
        hidden;

    isolation:
        isolate;
}


/* ==========================================================================
   RIELES DECORATIVOS
   ========================================================================== */

/*
 * No utilizamos background-image directamente porque
 * el SVG original puede ser blanco.
 *
 * Lo usamos como MASK.
 *
 * El color visible lo pone background-color:
 *
 * var(--amoladero-primary)
 *
 * Por eso los laterales aparecen verdes.
 */

.memorias-galeria::before,
.memorias-galeria::after {
    content:
        "";

    position:
        absolute;

    z-index:
        30;

    top:
        0;

    width:
        max(
            2200px,
            180vh
        );

    height:
        var(--memorias-galeria-rail);

    margin:
        0;

    padding:
        0;

    background-color:
        var(--amoladero-primary);

    -webkit-mask-image:
        var(--memorias-galeria-pattern);

    mask-image:
        var(--memorias-galeria-pattern);

    -webkit-mask-repeat:
        repeat-x;

    mask-repeat:
        repeat-x;

    -webkit-mask-position:
        left center;

    mask-position:
        left center;

    -webkit-mask-size:
        auto 100%;

    mask-size:
        auto 100%;

    pointer-events:
        none;
}


/* izquierda */

.memorias-galeria::before {
    left:
        var(--memorias-galeria-rail);

    transform-origin:
        top left;

    transform:
        rotate(90deg);
}


/* derecha */

.memorias-galeria::after {
    right:
        var(--memorias-galeria-rail);

    transform-origin:
        top right;

    transform:
        rotate(-90deg);
}


/* ==========================================================================
   TITLE
   ========================================================================== */

.memorias-galeria__title {
    position:
        relative;

    z-index:
        40;

    width:
        min(
            calc(100% - 120px),
            1100px
        );

    margin:
        0 auto
        clamp(28px, 3vw, 44px)
        !important;

    padding:
        0 !important;

    color:
        var(--amoladero-primary);

    font-family:
        var(--amoladero-font-display);

    font-size:
        clamp(2.7rem, 4vw, 4.8rem);

    font-weight:
        400;

    line-height:
        0.9;

    letter-spacing:
        -0.02em;

    text-align:
        center;

    text-transform:
        uppercase;
}


/* ==========================================================================
   SLIDER
   ========================================================================== */

.memorias-galeria__slider {
    position:
        relative;

    z-index:
        15;

    /*
     * Solamente dejamos espacio para
     * el patrón vertical.
     *
     * NO dejamos aire verde.
     */
  

    max-width:
        none !important;

    margin:
        0 auto !important;

    padding:
        0 !important;

    overflow:
        hidden;

    box-sizing:
        border-box;
}


/* ==========================================================================
   GALLERY NATIVA
   ========================================================================== */

.memorias-galeria__gallery,
.memorias-galeria__gallery.wp-block-gallery {
    position:
        relative;

    display:
        block !important;

    width:
        100% !important;

    max-width:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    gap:
        0 !important;

    overflow:
        hidden;

    background:
        var(--amoladero-deep);
}


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

.memorias-galeria__gallery
> .wp-block-image {
    position:
        relative;

    display:
        none !important;

    width:
        100% !important;

    min-width:
        100% !important;

    max-width:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        hidden;

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    background:
        var(--amoladero-deep);
}


/*
 * Fallback mientras carga JavaScript.
 */

.memorias-galeria:not(.is-slider-ready)
.memorias-galeria__gallery
> .wp-block-image:first-child {
    display:
        block !important;

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;
}


/*
 * Slide activo.
 */

.memorias-galeria.is-slider-ready
.memorias-galeria__gallery
> .wp-block-image.is-active {
    display:
        block !important;

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;
}


/* ==========================================================================
   IMAGE
   ========================================================================== */

.memorias-galeria__gallery
.wp-block-image img {
    display:
        block;

    width:
        100% !important;

    max-width:
        none !important;

    height:
        clamp(520px, 53vw, 800px)
        !important;

    min-height:
        0;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0;

    object-fit:
        cover;

    object-position:
        center center;
}


/* ==========================================================================
   IMAGE LINK
   ========================================================================== */

.memorias-galeria__gallery
.wp-block-image
> a {
    position:
        relative;

    display:
        block;

    width:
        100%;

    height:
        100%;

    margin:
        0;

    padding:
        0;

    line-height:
        0;
}


/* ==========================================================================
   GRADIENT
   ========================================================================== */

.memorias-galeria__gallery
.wp-block-image::after {
    content:
        "";

    position:
        absolute;

    z-index:
        4;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    background:
        linear-gradient(
            180deg,

            rgba(
                0,
                70,
                55,
                0.00
            )
            0%,

            rgba(
                0,
                70,
                55,
                0.02
            )
            40%,

            rgba(
                0,
                64,
                50,
                0.14
            )
            58%,

            rgba(
                0,
                59,
                46,
                0.40
            )
            73%,

            rgba(
                0,
                52,
                41,
                0.76
            )
            88%,

            rgba(
                0,
                42,
                34,
                0.98
            )
            100%
        );

    pointer-events:
        none;
}


/* ==========================================================================
   CAPTION / DESCRIPCIÓN
   ========================================================================== */

.memorias-galeria__gallery
.wp-block-image
figcaption,

.memorias-galeria__gallery
.wp-block-image
.wp-element-caption {
    position:
        absolute;

    z-index:
        12;

    right:
        clamp(28px, 5vw, 88px);

    /*
     * Dejamos espacio debajo para el botón.
     */
    bottom:
        clamp(76px, 6vw, 94px);

    left:
        clamp(28px, 5vw, 88px);

    width:
        auto;

    max-width:
        1160px;

    margin:
        0 auto !important;

    padding:
        0 !important;

    border:
        0;

    background:
        transparent !important;

    color:
        var(--amoladero-white);

    font-family:
        var(--amoladero-font-heavy);

    font-size:
        clamp(
            0.62rem,
            0.7vw,
            0.82rem
        );

    font-style:
        normal;

    font-weight:
        700;

    line-height:
        1.25;

    text-align:
        center;

    text-transform:
        uppercase;

    text-shadow:
        0 1px 3px
        rgba(
            0,
            0,
            0,
            0.48
        );

    pointer-events:
        none;
}


/* ==========================================================================
   ABRIR IMAGEN — DEBAJO DEL TEXTO
   ========================================================================== */



.memorias-galeria__open:hover {
    background:
        var(--amoladero-primary);

    transform:
        translateX(-50%)
        translateY(-2px);
}


/* ==========================================================================
   CONTROLES GENERADOS POR JAVASCRIPT
   ========================================================================== */

/*
 * Antes de inicializar JS deshabilitamos completamente
 * cualquier wp:button antiguo.
 *
 * Así tampoco puede navegar a "#".
 */

.memorias-galeria:not(.is-slider-ready)
.memorias-galeria__nav {
    pointer-events:
        none;
}


/* wrappers */

.memorias-galeria__nav {
    position:
        absolute;

    z-index:
        25;

    top:
        50%;

    display:
        block;

    width:
        auto !important;

    margin:
        0 !important;

    padding:
        0 !important;

    transform:
        translateY(-50%);
}


/* anterior */

.memorias-galeria__nav--prev {
    left:
        clamp(14px, 2.2vw, 38px);
}


/* siguiente */

.memorias-galeria__nav--next {
    right:
        clamp(14px, 2.2vw, 38px);
}


/* ==========================================================================
   BOTONES
   ========================================================================== */

.memorias-galeria__control {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        clamp(62px, 5vw, 86px);

    height:
        clamp(62px, 5vw, 86px);

    min-width:
        0;

    min-height:
        0;

    margin:
        0;

    padding:
        0;

    border:
        0;

    border-radius:
        999px;

    outline:
        0;

    background:
        rgba(
            0,
            89,
            79,
            0.90
        );

    color:
        var(--amoladero-white);

    font-family:
        var(--amoladero-font-body);

    font-size:
        clamp(2rem, 2.8vw, 3rem);

    font-weight:
        300;

    line-height:
        1;

    cursor:
        pointer;

    appearance:
        none;

    user-select:
        none;

    transition:
        transform 180ms ease,
        background 180ms ease;
}


.memorias-galeria__control:hover {
    background:
        var(--amoladero-primary);

    transform:
        scale(1.05);
}


.memorias-galeria__control:focus-visible {
    outline:
        3px solid
        rgba(
            255,
            255,
            255,
            0.92
        );

    outline-offset:
        3px;
}


/* ==========================================================================
   ELIMINAR ESTILOS DE LOS WP:BUTTON VIEJOS
   ========================================================================== */

/*
 * JavaScript elimina estos enlaces al inicializar.
 *
 * Esta regla también evita que los estilos de Gutenberg
 * produzcan saltos visuales antes de ejecutar JavaScript.
 */

.memorias-galeria__nav
.wp-block-button,

.memorias-galeria__nav
.wp-block-button__link {
    margin:
        0 !important;
}


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

.memorias-galeria__dots {
    position:
        absolute;

    z-index:
        26;

    top:
        clamp(14px, 1.6vw, 24px);

    left:
        50%;

    display:
        flex !important;

    flex-wrap:
        nowrap !important;

    align-items:
        center;

    justify-content:
        center;

    gap:
        clamp(5px, 0.5vw, 8px);

    width:
        auto !important;

    max-width:
        calc(100% - 120px);

    margin:
        0 !important;

    padding:
        0 !important;

    transform:
        translateX(-50%);
}


.memorias-galeria__dot {
    display:
        block;

    flex:
        0 0 auto;

    width:
        clamp(9px, 0.72vw, 13px);

    height:
        clamp(9px, 0.72vw, 13px);

    margin:
        0;

    padding:
        0;

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

    border-radius:
        50%;

    outline:
        0;

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

    cursor:
        pointer;

    appearance:
        none;

    transition:
        transform 160ms ease,
        background 160ms ease;
}


.memorias-galeria__dot:hover {
    background:
        rgba(
            255,
            255,
            255,
            0.85
        );
}


.memorias-galeria__dot.is-active {
    background:
        var(--amoladero-white);

    transform:
        scale(1.15);
}


/* ==========================================================================
   OPEN IMAGE
   ========================================================================== */

.memorias-galeria__open {
    position:
        absolute;

    z-index:
        25;

    left:
        50%;

    bottom:
        clamp(18px, 2vw, 28px);

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        clamp(180px, 16vw, 240px);

    min-height:
        46px;

    padding:
        13px 34px;

    border:
        0;

    border-radius:
        var(--amoladero-radius-pill);

    background:
        var(--amoladero-accent);

    color:
        var(--amoladero-white);

    font-family:
        var(--amoladero-font-heavy);

    font-size:
        1.05rem;

    font-weight:
        800;

    line-height:
        1;

    text-align:
        center;

    text-decoration:
        none;

    text-transform:
        uppercase;

    cursor:
        pointer;

    appearance:
        none;

    transform:
        translateX(-50%);

    transition:
        background 180ms ease,
        transform 180ms ease;
}

/* ==========================================================================
   HARDENING — CONTROLES ANTIGUOS / ENLACES DE IMAGEN
   ========================================================================== */

/*
 * Hasta que JavaScript inicialice:
 *
 * - ningún enlace viejo href="#" puede ejecutarse;
 * - hacer clic sobre la fotografía tampoco abre
 *   directamente el archivo multimedia.
 */

.memorias-galeria:not(.is-slider-ready)
.memorias-galeria__nav
a,

.memorias-galeria__gallery
.wp-block-image
> a {
    pointer-events:
        none !important;
}


/*
 * Después de inicializar solo existen los botones
 * generados mediante JavaScript.
 */

.memorias-galeria.is-slider-ready
.memorias-galeria__control {
    pointer-events:
        auto;
}


/*
 * El slide completo ocupa todo el ancho disponible.
 */

.memorias-galeria__gallery,
.memorias-galeria__gallery
> .wp-block-image,
.memorias-galeria__gallery
.wp-block-image
> a,
.memorias-galeria__gallery
.wp-block-image
img {
    width:
        100% !important;

    max-width:
        none !important;
}


/*
 * Breakout definitivo.
 *
 * El fondo claro debe tocar los bordes del viewport.
 */

.memorias-galeria {
    left:
        50%;

    width:
        100vw !important;

    max-width:
        100vw !important;

    margin-left:
        0 !important;

    margin-right:
        0 !important;

    transform:
        translateX(-50%);
}


/*
 * Los rieles deben quedar exactamente pegados
 * a ambos extremos del viewport.
 */

.memorias-galeria::before {
    left:
        var(--memorias-galeria-rail);
}


.memorias-galeria::after {
    right:
        var(--memorias-galeria-rail);
}


.memorias-galeria__open:hover {
    background:
        var(--amoladero-primary);

    color:
        var(--amoladero-white);

    transform:
        translateX(-50%)
        translateY(-2px);
}


/* ==========================================================================
   SINGLE IMAGE
   ========================================================================== */

.memorias-galeria.has-single-image
.memorias-galeria__nav,

.memorias-galeria.has-single-image
.memorias-galeria__dots {
    display:
        none !important;
}


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

@media (max-width: 1024px) {

    .memorias-galeria {
        --memorias-galeria-overlap:
            clamp(150px, 18vw, 190px);

        --memorias-galeria-rail:
            32px;
    }


    .memorias-galeria__title {
        width:
            calc(100% - 100px);

        font-size:
            clamp(2.5rem, 5vw, 4rem);
    }


    .memorias-galeria__gallery
    .wp-block-image img {
        height:
            clamp(470px, 62vw, 650px)
            !important;
    }

}


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

@media (max-width: 781px) {

    .memorias-galeria {
        --memorias-galeria-overlap:
            clamp(95px, 25vw, 135px);

        --memorias-galeria-rail:
            24px;

        padding-top:
            calc(
                var(--memorias-galeria-overlap)
                + 30px
            );

        padding-bottom:
            46px;
    }


    .memorias-galeria__title {
        width:
            calc(100% - 68px);

        margin-bottom:
            24px
            !important;

        font-size:
            clamp(2.1rem, 9vw, 3.3rem);
    }


    .memorias-galeria__gallery
    .wp-block-image img {
        height:
            clamp(390px, 100vw, 560px)
            !important;
    }


    .memorias-galeria__nav--prev {
        left:
            8px;
    }


    .memorias-galeria__nav--next {
        right:
            8px;
    }


    .memorias-galeria__control {
        width:
            54px;

        height:
            54px;

        font-size:
            1.8rem;
    }


    .memorias-galeria__dots {
        top:
            11px;

        gap:
            5px;

        max-width:
            calc(100% - 76px);
    }


    .memorias-galeria__dot {
        width:
            9px;

        height:
            9px;
    }


    .memorias-galeria__gallery
    .wp-block-image
    figcaption,

    .memorias-galeria__gallery
    .wp-block-image
    .wp-element-caption {
        right:
            18px;

        bottom:
            54px;

        left:
            18px;

        font-size:
            0.58rem;

        line-height:
            1.18;
    }


    .memorias-galeria__open {
        bottom:
            14px;

        min-width:
            120px;

        min-height:
            32px;

        padding:
            8px 16px;

        font-size:
            0.60rem;
    }
   

    .memorias-galeria__gallery
    .wp-block-image
    figcaption,

    .memorias-galeria__gallery
    .wp-block-image
    .wp-element-caption {
        right:
            18px;

        bottom:
            72px;

        left:
            18px;

        font-size:
            0.58rem;

        line-height:
            1.22;
    }


    .memorias-galeria__open {
        bottom:
            16px;

        min-width:
            126px;

        min-height:
            34px;

        padding:
            9px 18px;
    }

}


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

@media (max-width: 480px) {

    .memorias-galeria {
        --memorias-galeria-overlap:
            96px;

        --memorias-galeria-rail:
            20px;
    }


    .memorias-galeria__title {
        width:
            calc(100% - 54px);

        font-size:
            clamp(2rem, 10vw, 2.9rem);
    }


    .memorias-galeria__gallery
    .wp-block-image img {
        height:
            clamp(340px, 108vw, 490px)
            !important;
    }


    .memorias-galeria__control {
        width:
            48px;

        height:
            48px;

        font-size:
            1.65rem;
    }


    .memorias-galeria__gallery
    .wp-block-image
    figcaption,

    .memorias-galeria__gallery
    .wp-block-image
    .wp-element-caption {
        right:
            12px;

        bottom:
            48px;

        left:
            12px;

        font-size:
            0.52rem;
    }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

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

    .memorias-galeria__control,

    .memorias-galeria__dot,

    .memorias-galeria__open {
        transition:
            none;
    }

}



/* ==========================================================================
   LIGHTBOX — GALERÍA MEMORIAS
   ========================================================================== */

html.memorias-lightbox-open,
html.memorias-lightbox-open body {
    overflow:
        hidden;
}


/* ==========================================================================
   ROOT
   ========================================================================== */

.memorias-lightbox {
    position:
        fixed;

    z-index:
        999999;

    inset:
        0;

    width:
        100vw;

    height:
        100dvh;

    padding:
        clamp(18px, 3vw, 46px);
}


.memorias-lightbox[hidden] {
    display:
        none !important;
}


/* ==========================================================================
   BACKDROP
   ========================================================================== */

.memorias-lightbox__backdrop {
    position:
        absolute;

    inset:
        0;

    background:
        rgba(
            0,
            19,
            15,
            0.94
        );

    backdrop-filter:
        blur(5px);
}


/* ==========================================================================
   DIALOG
   ========================================================================== */

.memorias-lightbox__dialog {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        min(
            100%,
            1500px
        );

    height:
        100%;

    margin:
        0 auto;
}


/* ==========================================================================
   MAIN CARD
   ========================================================================== */

.memorias-lightbox__main {
    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1.6fr
        )
        minmax(
            300px,
            0.72fr
        );

    width:
        calc(100% - 180px);

    max-height:
        calc(
            100dvh - 92px
        );

    overflow:
        hidden;

    border-radius:
        8px;

    background:
        var(--amoladero-light);

    box-shadow:
        0 28px 100px
        rgba(
            0,
            0,
            0,
            0.45
        );
}


/* ==========================================================================
   IMAGE
   ========================================================================== */

.memorias-lightbox__media {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        0;

    min-height:
        520px;

    background:
        #06120e;

    overflow:
        hidden;
}


.memorias-lightbox__image {
    display:
        block;

    width:
        100%;

    height:
        100%;

    max-height:
        calc(
            100dvh - 92px
        );

    object-fit:
        contain;
}


/* ==========================================================================
   INFORMATION
   ========================================================================== */

.memorias-lightbox__info {
    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    gap:
        20px;

    min-width:
        0;

    padding:
        clamp(
            32px,
            4vw,
            70px
        );

    overflow-y:
        auto;

    background:
        var(--amoladero-light);

    color:
        var(--amoladero-primary);
}


.memorias-lightbox__counter {
    font-family:
        var(--amoladero-font-heavy);

    font-size:
        0.78rem;

    font-weight:
        800;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;

    opacity:
        0.62;
}


.memorias-lightbox__caption {
    color:
        var(--amoladero-primary);

    font-family:
        var(--amoladero-font-body);

    font-size:
        clamp(
            1rem,
            1.2vw,
            1.22rem
        );

    font-weight:
        400;

    line-height:
        1.65;

    text-align:
        left;

    text-transform:
        none;
}


.memorias-lightbox__caption p:first-child {
    margin-top:
        0;
}


.memorias-lightbox__caption p:last-child {
    margin-bottom:
        0;
}


/* ==========================================================================
   CLOSE
   ========================================================================== */

.memorias-lightbox__close {
    position:
        absolute;

    z-index:
        20;

    top:
        4px;

    right:
        4px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        54px;

    height:
        54px;

    padding:
        0;

    border:
        0;

    border-radius:
        50%;

    background:
        var(--amoladero-accent);

    color:
        var(--amoladero-white);

    font-size:
        2rem;

    font-weight:
        300;

    line-height:
        1;

    cursor:
        pointer;
}


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

.memorias-lightbox__arrow {
    position:
        absolute;

    z-index:
        20;

    top:
        50%;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        clamp(
            56px,
            5vw,
            76px
        );

    height:
        clamp(
            56px,
            5vw,
            76px
        );

    padding:
        0;

    border:
        0;

    border-radius:
        50%;

    background:
        var(--amoladero-light);

    color:
        var(--amoladero-primary);

    font-size:
        clamp(
            1.8rem,
            2.6vw,
            2.8rem
        );

    cursor:
        pointer;

    transform:
        translateY(-50%);

    transition:
        transform 180ms ease,
        background 180ms ease;
}


.memorias-lightbox__arrow:hover {
    background:
        var(--amoladero-accent);

    color:
        var(--amoladero-white);
}


.memorias-lightbox__arrow--prev {
    left:
        0;
}


.memorias-lightbox__arrow--next {
    right:
        0;
}


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

@media (max-width: 1024px) {

    .memorias-lightbox {
        padding:
            18px;
    }


    .memorias-lightbox__main {
        grid-template-columns:
            1fr;

        grid-template-rows:
            minmax(
                300px,
                60vh
            )
            auto;

        width:
            calc(100% - 110px);

        max-height:
            calc(
                100dvh - 36px
            );
    }


    .memorias-lightbox__media {
        min-height:
            0;
    }


    .memorias-lightbox__image {
        max-height:
            60vh;
    }


    .memorias-lightbox__info {
        max-height:
            30vh;

        padding:
            26px 30px;
    }


    .memorias-lightbox__close {
        top:
            4px;

        right:
            4px;

        width:
            48px;

        height:
            48px;
    }

}


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

@media (max-width: 640px) {

    .memorias-lightbox {
        padding:
            10px;
    }


    .memorias-lightbox__main {
        grid-template-columns:
            1fr;

        grid-template-rows:
            minmax(
                260px,
                56vh
            )
            auto;

        width:
            100%;

        height:
            auto;

        max-height:
            calc(
                100dvh - 20px
            );

        border-radius:
            6px;
    }


    .memorias-lightbox__image {
        max-height:
            56vh;
    }


    .memorias-lightbox__info {
        gap:
            12px;

        max-height:
            32vh;

        padding:
            22px 20px;
    }


    .memorias-lightbox__caption {
        font-size:
            0.95rem;

        line-height:
            1.5;
    }


    .memorias-lightbox__close {
        top:
            16px;

        right:
            16px;

        width:
            44px;

        height:
            44px;

        background:
            rgba(
                0,
                89,
                79,
                0.94
            );
    }


    .memorias-lightbox__arrow {
        top:
            48%;

        width:
            48px;

        height:
            48px;

        background:
            rgba(
                220,
                229,
                223,
                0.92
            );

        font-size:
            1.7rem;
    }


    .memorias-lightbox__arrow--prev {
        left:
            8px;
    }


    .memorias-lightbox__arrow--next {
        right:
            8px;
    }

}


/* ==========================================================================
   FIX FINAL — ORDEN CAPTION → BOTÓN
   ========================================================================== */

/*
 * Estructura visual:
 *
 *      DESCRIPCIÓN
 *
 *    [ ABRIR IMAGEN ]
 *
 * ---------------------
 */


/* ==========================================================================
   DESCRIPCIÓN
   ========================================================================== */

.memorias-galeria
.memorias-galeria__gallery
.wp-block-image
figcaption,

.memorias-galeria
.memorias-galeria__gallery
.wp-block-image
.wp-element-caption {
    position:
        absolute !important;

    z-index:
        20 !important;

    top:
        auto !important;

    right:
        clamp(
            28px,
            5vw,
            88px
        )
        !important;

    /*
     * El caption queda ARRIBA del botón.
     */
    bottom:
        82px !important;

    left:
        clamp(
            28px,
            5vw,
            88px
        )
        !important;

    width:
        auto !important;

    max-width:
        1160px !important;

    margin:
        0 auto !important;

    padding:
        0 !important;

    background:
        transparent !important;

    color:
        var(--amoladero-white)
        !important;

    text-align:
        center !important;

    pointer-events:
        none;
}


/* ==========================================================================
   BOTÓN — SIEMPRE DEBAJO DEL TEXTO
   ========================================================================== */

.memorias-galeria
.memorias-galeria__open {
    position:
        absolute !important;

    z-index:
        30 !important;

    top:
        auto !important;

    left:
        50% !important;

    /*
     * Botón pegado a la parte inferior,
     * debajo de la descripción.
     */
    bottom:
        20px !important;

    right:
        auto !important;

    margin:
        0 !important;

    transform:
        translateX(-50%)
        !important;
}


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

@media (max-width: 781px) {

    .memorias-galeria
    .memorias-galeria__gallery
    .wp-block-image
    figcaption,

    .memorias-galeria
    .memorias-galeria__gallery
    .wp-block-image
    .wp-element-caption {
        top:
            auto !important;

        right:
            18px !important;

        bottom:
            72px !important;

        left:
            18px !important;

        font-size:
            0.58rem;

        line-height:
            1.22;
    }


    .memorias-galeria
    .memorias-galeria__open {
        top:
            auto !important;

        bottom:
            16px !important;

        left:
            50% !important;

        transform:
            translateX(-50%)
            !important;
    }

}


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

@media (max-width: 480px) {

    .memorias-galeria
    .memorias-galeria__gallery
    .wp-block-image
    figcaption,

    .memorias-galeria
    .memorias-galeria__gallery
    .wp-block-image
    .wp-element-caption {
        bottom:
            68px !important;
    }


    .memorias-galeria
    .memorias-galeria__open {
        bottom:
            14px !important;
    }

}
/* ==========================================================================
   LIGHTBOX — FIX RESPONSIVE ÚNICAMENTE
   ==========================================================================
   IMPORTANTE:
   - NO modifica el slider de la página.
   - NO modifica la galería.
   - NO modifica dots.
   - NO modifica captions del frontend.
   - NO modifica escritorio.
   - Solo actúa cuando el lightbox está abierto
     en tablet y móvil.
   ========================================================================== */


/* ==========================================================================
   TABLET + MOBILE
   ========================================================================== */

@media (max-width: 1024px) {

    /*
     * El diálogo ocupa correctamente la pantalla
     * sin crear una segunda fila para el texto.
     */
    .memorias-lightbox__dialog {
        position: relative !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: 100% !important;

        height: 100% !important;

        max-height: none !important;

        margin: 0 auto !important;
    }


    /*
     * La tarjeta pasa a ser una sola pieza.
     *
     * La imagen ocupa toda la tarjeta y el texto
     * se superpone abajo mediante degradado.
     */
    .memorias-lightbox__main {
        position: relative !important;

        display: block !important;

        width: min(
            calc(100% - 90px),
            900px
        ) !important;

        height: min(
            82dvh,
            760px
        ) !important;

        max-height: 82dvh !important;

        overflow: hidden !important;

        border-radius: 8px;

        background: #06120e;
    }


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

    .memorias-lightbox__media {
        position: absolute !important;

        inset: 0 !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: 100% !important;

        height: 100% !important;

        min-height: 0 !important;

        background: #06120e;

        overflow: hidden !important;
    }


    .memorias-lightbox__image {
        display: block !important;

        width: 100% !important;

        height: 100% !important;

        max-width: 100% !important;

        max-height: 100% !important;

        margin: 0 !important;

        object-fit: contain !important;

        object-position: center center !important;
    }


    /* ==========================================================================
       TEXTO SOBRE LA IMAGEN
       ========================================================================== */

    .memorias-lightbox__info {
        position: absolute !important;

        z-index: 12 !important;

        right: 0 !important;

        bottom: 0 !important;

        left: 0 !important;

        display: flex !important;

        flex-direction: column !important;

        justify-content: flex-end !important;

        width: 100% !important;

        min-height: auto !important;

        max-height: 46% !important;

        margin: 0 !important;

        padding:
            clamp(90px, 14vw, 150px)
            clamp(22px, 5vw, 48px)
            clamp(22px, 4vw, 38px)
            !important;

        box-sizing: border-box;

        overflow-y: auto !important;

        /*
         * Referencia visual de tu imagen 3:
         * texto blanco directamente sobre la foto.
         */
        background:
            linear-gradient(
                to top,
                rgba(0, 28, 22, 0.96) 0%,
                rgba(0, 45, 35, 0.78) 38%,
                rgba(0, 55, 43, 0.34) 70%,
                rgba(0, 55, 43, 0.00) 100%
            )
            !important;

        color: #ffffff !important;
    }


    /*
     * En responsive simplificamos el modal.
     * La referencia no necesita mostrar "2 / 4".
     */
    .memorias-lightbox__counter {
        display: none !important;
    }


    .memorias-lightbox__caption {
        display: block !important;

        width: min(
            100%,
            720px
        ) !important;

        max-width: 720px !important;

        margin: 0 auto !important;

        padding: 0 !important;

        color: #ffffff !important;

        font-family:
            var(--amoladero-font-body);

        font-size:
            clamp(
                0.92rem,
                2.1vw,
                1.08rem
            ) !important;

        font-weight: 400 !important;

        line-height: 1.45 !important;

        text-align: center !important;

        text-transform: none !important;

        text-shadow:
            0 2px 6px
            rgba(
                0,
                0,
                0,
                0.55
            );
    }


    /*
     * Por si Gutenberg generó párrafos dentro del caption.
     */
    .memorias-lightbox__caption p {
        margin:
            0 !important;

        color:
            inherit !important;

        font:
            inherit !important;

        line-height:
            inherit !important;
    }


    /* ==========================================================================
       FLECHAS — CENTRADAS REALMENTE
       ========================================================================== */

    .memorias-lightbox__arrow {
        position: absolute !important;

        z-index: 30 !important;

        /*
         * 50% del diálogo, que ahora coincide con
         * el centro real de la tarjeta/imagen.
         */
        top: 50% !important;

        bottom: auto !important;

        display: inline-flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: 62px !important;

        height: 62px !important;

        margin: 0 !important;

        padding: 0 !important;

        border: 0 !important;

        border-radius: 50% !important;

        background:
            rgba(
                220,
                229,
                223,
                0.95
            )
            !important;

        color:
            var(--amoladero-primary)
            !important;

        transform:
            translateY(-50%)
            !important;

        cursor: pointer;
    }


    .memorias-lightbox__arrow--prev {
        left: 8px !important;

        right: auto !important;
    }


    .memorias-lightbox__arrow--next {
        right: 8px !important;

        left: auto !important;
    }


    /* ==========================================================================
       CERRAR
       ========================================================================== */

    .memorias-lightbox__close {
        position: absolute !important;

        z-index: 40 !important;

        top: 14px !important;

        right: 14px !important;

        bottom: auto !important;

        left: auto !important;
    }

}


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

@media (max-width: 640px) {

    .memorias-lightbox {
        padding:
            10px !important;
    }


    .memorias-lightbox__main {
        width:
            100% !important;

        height:
            min(
                84dvh,
                680px
            )
            !important;

        max-height:
            84dvh !important;

        border-radius:
            6px;
    }


    /*
     * Reducimos un poco el degradado para no tapar
     * demasiado la fotografía.
     */
    .memorias-lightbox__info {
        max-height:
            48% !important;

        padding:
            86px
            18px
            20px
            !important;
    }


    .memorias-lightbox__caption {
        width:
            100% !important;

        max-width:
            100% !important;

        font-size:
            clamp(
                0.78rem,
                3.5vw,
                0.95rem
            )
            !important;

        line-height:
            1.4 !important;
    }


    /*
     * Flechas un poco más pequeñas,
     * pero SIEMPRE centradas verticalmente.
     */
    .memorias-lightbox__arrow {
        top:
            50% !important;

        width:
            54px !important;

        height:
            54px !important;

        transform:
            translateY(-50%)
            !important;
    }


    .memorias-lightbox__arrow--prev {
        left:
            8px !important;
    }


    .memorias-lightbox__arrow--next {
        right:
            8px !important;
    }


    .memorias-lightbox__close {
        top:
            12px !important;

        right:
            12px !important;

        width:
            50px !important;

        height:
            50px !important;
    }

}


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

@media (max-width: 420px) {

    .memorias-lightbox__main {
        height:
            86dvh !important;

        max-height:
            86dvh !important;
    }


    .memorias-lightbox__info {
        padding:
            78px
            14px
            16px
            !important;
    }


    .memorias-lightbox__caption {
        font-size:
            0.76rem !important;

        line-height:
            1.35 !important;
    }


    .memorias-lightbox__arrow {
        width:
            48px !important;

        height:
            48px !important;
    }

}

/* ==========================================================================
   LIGHTBOX — MOBILE ONLY
   Descripción pegada a la parte inferior de la fotografía.
   NO modifica escritorio.
   ========================================================================== */

@media (max-width: 767px) {

    /*
     * El diálogo mantiene el modal centrado.
     */
    .memorias-lightbox__dialog {
        position: relative !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: 100% !important;

        height: 100% !important;

        margin: 0 !important;
    }


    /*
     * IMPORTANTE:
     * eliminamos la altura artificial enorme.
     *
     * Ahora la altura del bloque la determina
     * realmente la fotografía.
     */
    .memorias-lightbox__main {
        position: relative !important;

        display: block !important;

        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        max-height:
            calc(100dvh - 40px)
            !important;

        margin: 0 !important;

        overflow: hidden !important;

        border-radius: 7px;

        background:
            #06120e;
    }


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

    .memorias-lightbox__media {
        position: relative !important;

        inset: auto !important;

        display: block !important;

        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        overflow: hidden !important;

        background:
            #06120e;
    }


    .memorias-lightbox__image {
        display: block !important;

        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        max-height:
            calc(100dvh - 40px)
            !important;

        margin: 0 !important;

        padding: 0 !important;

        object-fit:
            contain !important;

        object-position:
            center center !important;
    }


    /* ==========================================================================
       DESCRIPCIÓN
       ========================================================================== */

    /*
     * Ahora el texto queda DIRECTAMENTE
     * sobre la parte inferior de la fotografía.
     */
    .memorias-lightbox__info {
        position: absolute !important;

        z-index: 20 !important;

        right: 0 !important;

        bottom: 0 !important;

        left: 0 !important;

        display: flex !important;

        flex-direction: column !important;

        justify-content: flex-end !important;

        gap: 0 !important;

        width: 100% !important;

        min-height:
            34% !important;

        max-height:
            48% !important;

        margin: 0 !important;

        padding:
            90px
            20px
            18px
            !important;

        box-sizing:
            border-box;

        overflow-y:
            auto !important;

        background:
            linear-gradient(
                180deg,

                rgba(
                    0,
                    57,
                    47,
                    0
                )
                0%,

                rgba(
                    0,
                    57,
                    47,
                    0.15
                )
                24%,

                rgba(
                    0,
                    57,
                    47,
                    0.58
                )
                58%,

                rgba(
                    0,
                    48,
                    39,
                    0.90
                )
                82%,

                rgba(
                    0,
                    38,
                    31,
                    0.98
                )
                100%
            )
            !important;

        color:
            #ffffff !important;
    }


    /*
     * Simplificamos el modal móvil.
     * No necesitamos el contador.
     */
    .memorias-lightbox__counter {
        display:
            none !important;
    }


    .memorias-lightbox__caption {
        display:
            block !important;

        width:
            min(
                100%,
                620px
            )
            !important;

        max-width:
            620px !important;

        margin:
            0 auto !important;

        padding:
            0 !important;

        color:
            #ffffff !important;

        font-family:
            var(--amoladero-font-body);

        font-size:
            clamp(
                0.76rem,
                3.2vw,
                0.92rem
            )
            !important;

        font-weight:
            400 !important;

        line-height:
            1.35 !important;

        text-align:
            center !important;

        text-transform:
            none !important;

        text-shadow:
            0 2px 5px
            rgba(
                0,
                0,
                0,
                0.55
            );
    }


    .memorias-lightbox__caption p {
        margin:
            0 !important;

        padding:
            0 !important;

        color:
            inherit !important;

        font:
            inherit !important;

        line-height:
            inherit !important;
    }


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

    /*
     * Permanecen centradas respecto a la fotografía.
     */
    .memorias-lightbox__arrow {
        top:
            50% !important;

        bottom:
            auto !important;

        width:
            54px !important;

        height:
            54px !important;

        margin:
            0 !important;

        transform:
            translateY(-50%)
            !important;
    }


    .memorias-lightbox__arrow--prev {
        left:
            10px !important;

        right:
            auto !important;
    }


    .memorias-lightbox__arrow--next {
        right:
            10px !important;

        left:
            auto !important;
    }


    /* ==========================================================================
       CERRAR
       ========================================================================== */

    .memorias-lightbox__close {
        top:
            12px !important;

        right:
            12px !important;

        bottom:
            auto !important;

        left:
            auto !important;

        width:
            50px !important;

        height:
            50px !important;
    }

}


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

@media (max-width: 480px) {

    .memorias-lightbox__info {
        min-height:
            36% !important;

        padding:
            72px
            14px
            14px
            !important;
    }


    .memorias-lightbox__caption {
        font-size:
            clamp(
                0.70rem,
                3.4vw,
                0.84rem
            )
            !important;

        line-height:
            1.32 !important;
    }


    .memorias-lightbox__arrow {
        width:
            48px !important;

        height:
            48px !important;
    }

}
/* ==========================================================================
   MEMORIAS — CONTINUIDAD GALERÍA → RELATOS
   ========================================================================== */

/*
 * Eliminamos únicamente el aire inferior que estaba
 * creando la franja clara entre ambos componentes.
 */
.memorias-galeria {
    padding-bottom:
        0 !important;
}


/*
 * Si el inner conserva padding inferior de alguna regla anterior,
 * también lo anulamos.
 */
.memorias-galeria__inner {
    padding-bottom:
        0 !important;
}


/*
 * El slider termina exactamente donde empieza
 * Relatos del Sendero.
 */
.memorias-galeria__slider {
    margin-bottom:
        0 !important;
}


/*
 * Bajamos ligeramente el botón.
 *
 * Sigue estando DENTRO de la imagen y debajo del texto,
 * pero visualmente queda mucho más cerca de la siguiente sección.
 */
.memorias-galeria
.memorias-galeria__open {
    bottom:
        8px !important;
}


/* Mobile */
@media (max-width: 781px) {

    .memorias-galeria
    .memorias-galeria__open {
        bottom:
            8px !important;
    }

}
/* ==========================================================================
   LIGHTBOX — MEJORA FINAL DESKTOP / TABLET / MOBILE
   --------------------------------------------------------------------------
   OBJETIVOS:
   - La longitud del texto NO modifica la geometría del modal.
   - La imagen permanece siempre centrada.
   - En escritorio, la información vive en una columna independiente.
   - La descripción tiene scroll propio cuando es extensa.
   - El contador permanece visible.
   - En tablet/móvil se conserva el diseño sobre la fotografía.
   - Imagen entra desde la izquierda.
   - Panel/texto entra desde la derecha.
   - La animación se repite al abrir y al cambiar de fotografía.
   ========================================================================== */


/* ==========================================================================
   ANIMACIONES
   ========================================================================== */

@keyframes memoriasLightboxMediaIn {

    from {
        opacity:
            0;

        transform:
            translate3d(
                -42px,
                0,
                0
            )
            scale(0.985);
    }

    to {
        opacity:
            1;

        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(1);
    }

}


@keyframes memoriasLightboxInfoIn {

    from {
        opacity:
            0;

        transform:
            translate3d(
                42px,
                0,
                0
            );
    }

    to {
        opacity:
            1;

        transform:
            translate3d(
                0,
                0,
                0
            );
    }

}


/*
 * La clase la controla memorias-galeria.js.
 *
 * Se elimina y vuelve a añadir en cada cambio,
 * por lo que la animación se reproduce tanto al abrir
 * como al navegar entre imágenes.
 */

.memorias-lightbox.is-content-animating
.memorias-lightbox__media {
    animation:
        memoriasLightboxMediaIn
        460ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        both;
}


.memorias-lightbox.is-content-animating
.memorias-lightbox__info {
    animation:
        memoriasLightboxInfoIn
        500ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        both;
}


/* ==========================================================================
   DESKTOP
   ========================================================================== */

@media (min-width: 1025px) {

    /*
     * La tarjeta tiene una altura controlada por viewport.
     *
     * IMPORTANTE:
     * el texto ya no puede aumentar la altura del modal.
     */

    .memorias-lightbox__main {
        grid-template-columns:
            minmax(
                0,
                1fr
            )
            minmax(
                320px,
                400px
            )
            !important;

        grid-template-rows:
            minmax(
                0,
                1fr
            )
            !important;

        align-items:
            stretch;

        width:
            calc(100% - 180px);

        height:
            min(
                78dvh,
                780px
            );

        min-height:
            min(
                560px,
                78dvh
            );

        max-height:
            min(
                78dvh,
                780px
            );

        overflow:
            hidden;

        background:
            var(--amoladero-light);
    }


    /* ==========================================================================
       IMAGEN — GEOMETRÍA INDEPENDIENTE DEL TEXTO
       ========================================================================== */

    .memorias-lightbox__media {
        position:
            relative;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        width:
            100%;

        height:
            100%;

        min-width:
            0;

        min-height:
            0;

        max-height:
            none;

        overflow:
            hidden;

        background:
            #06120e;

        contain:
            layout paint;
    }


    .memorias-lightbox__image {
        display:
            block;

        width:
            100%;

        height:
            100%;

        min-width:
            0;

        min-height:
            0;

        max-width:
            100%;

        max-height:
            none;

        margin:
            0;

        padding:
            0;

        object-fit:
            contain;

        object-position:
            center center;
    }


    /* ==========================================================================
       PANEL DERECHO
       ========================================================================== */

    .memorias-lightbox__info {
        position:
            relative;

        display:
            flex;

        flex-direction:
            column;

        justify-content:
            flex-start;

        align-items:
            stretch;

        gap:
            clamp(
                18px,
                2vw,
                26px
            );

        width:
            100%;

        height:
            100%;

        min-width:
            0;

        min-height:
            0;

        max-width:
            none;

        max-height:
            none;

        padding:
            clamp(
                34px,
                4vw,
                64px
            )
            clamp(
                28px,
                3vw,
                52px
            );

        box-sizing:
            border-box;

        /*
         * El panel NO hace crecer el modal.
         * El scroll real vive en el caption.
         */
        overflow:
            hidden;

        background:
            var(--amoladero-light);

        color:
            var(--amoladero-primary);
    }


    /*
     * El contador queda siempre visible.
     */

    .memorias-lightbox__counter {
        flex:
            0 0 auto;

        margin:
            0;

        padding:
            0;

        position:
            relative;

        z-index:
            2;
    }


    /*
     * SOLO la descripción desplaza.
     *
     * Esto evita que un texto muy largo:
     * - desplace la imagen;
     * - altere la altura del modal;
     * - saque el contenido fuera del viewport.
     */

    .memorias-lightbox__caption {
        flex:
            1 1 auto;

        min-width:
            0;

        min-height:
            0;

        max-height:
            100%;

        margin:
            0;

        padding:
            0 12px 0 0;

        box-sizing:
            border-box;

        overflow-x:
            hidden;

        overflow-y:
            auto;

        overscroll-behavior:
            contain;

        -webkit-overflow-scrolling:
            touch;

        scrollbar-width:
            thin;

        scrollbar-color:
            rgba(
                0,
                103,
                72,
                0.58
            )
            rgba(
                0,
                103,
                72,
                0.10
            );
    }


    .memorias-lightbox__caption::-webkit-scrollbar {
        width:
            7px;
    }


    .memorias-lightbox__caption::-webkit-scrollbar-track {
        border-radius:
            999px;

        background:
            rgba(
                0,
                103,
                72,
                0.10
            );
    }


    .memorias-lightbox__caption::-webkit-scrollbar-thumb {
        border-radius:
            999px;

        background:
            rgba(
                0,
                103,
                72,
                0.54
            );
    }


    .memorias-lightbox__caption::-webkit-scrollbar-thumb:hover {
        background:
            rgba(
                0,
                103,
                72,
                0.76
            );
    }

}


/* ==========================================================================
   TABLET
   --------------------------------------------------------------------------
   Conservamos el diseño actual sobre la fotografía.
   Solo independizamos el scroll de la descripción.
   ========================================================================== */

@media (max-width: 1024px) {

    .memorias-lightbox__info {
        overflow:
            hidden !important;

        overscroll-behavior:
            contain;
    }


    .memorias-lightbox__caption {
        flex:
            1 1 auto;

        min-height:
            0;

        max-height:
            100%;

        overflow-x:
            hidden !important;

        overflow-y:
            auto !important;

        overscroll-behavior:
            contain;

        -webkit-overflow-scrolling:
            touch;

        scrollbar-width:
            thin;

        scrollbar-color:
            rgba(
                255,
                255,
                255,
                0.55
            )
            rgba(
                255,
                255,
                255,
                0.12
            );
    }


    .memorias-lightbox__caption::-webkit-scrollbar {
        width:
            5px;
    }


    .memorias-lightbox__caption::-webkit-scrollbar-track {
        background:
            rgba(
                255,
                255,
                255,
                0.10
            );
    }


    .memorias-lightbox__caption::-webkit-scrollbar-thumb {
        border-radius:
            999px;

        background:
            rgba(
                255,
                255,
                255,
                0.52
            );
    }

}


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

@media (max-width: 767px) {

    /*
     * En móvil la descripción sigue superpuesta a la fotografía.
     *
     * Si el texto es largo se desplaza dentro de su propia zona
     * sin modificar el tamaño de la fotografía.
     */

    .memorias-lightbox__info {
        overflow:
            hidden !important;
    }


    .memorias-lightbox__caption {
        min-height:
            0 !important;

        max-height:
            100% !important;

        padding-right:
            6px !important;

        overflow-x:
            hidden !important;

        overflow-y:
            auto !important;

        overscroll-behavior:
            contain;

        -webkit-overflow-scrolling:
            touch;
    }

}


/* ==========================================================================
   ACCESIBILIDAD — REDUCED MOTION
   ========================================================================== */

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

    .memorias-lightbox.is-content-animating
    .memorias-lightbox__media,

    .memorias-lightbox.is-content-animating
    .memorias-lightbox__info {
        animation:
            none !important;
    }

}
/* ==========================================================================
   MEMORIAS GALERÍA — LIGHTBOX MOBILE UX
   --------------------------------------------------------------------------
   Solo móvil.
   Desktop y tablet grande quedan intactos.
   ========================================================================== */

@media (max-width: 680px) {
    
    
    /* ======================================================
   INDICADOR DE SCROLL DEL TEXTO
   ====================================================== */

.memorias-lightbox__info::after {
    content:
        "";

    position:
        absolute;

    z-index:
        20;

    left:
        50%;

    bottom:
        8px;

    width:
        10px;

    height:
        10px;

    border-right:
        2px solid
        rgba(
            255,
            255,
            255,
            0.85
        );

    border-bottom:
        2px solid
        rgba(
            255,
            255,
            255,
            0.85
        );

    pointer-events:
        none;

    transform:
        translateX(-50%)
        rotate(45deg);

    animation:
        memoriasGaleriaScrollHint
        1.4s
        ease-in-out
        infinite;
}


/*
 * Dejamos un poco de espacio debajo del texto
 * para que la flecha no quede encima del contenido.
 */

.memorias-lightbox__caption {
    padding-bottom:
        24px !important;
}


/* ======================================================
   ANIMACIÓN
   ====================================================== */

@keyframes memoriasGaleriaScrollHint {

    0%,
    100% {
        opacity:
            0.35;

        transform:
            translateX(-50%)
            translateY(-2px)
            rotate(45deg);
    }


    50% {
        opacity:
            1;

        transform:
            translateX(-50%)
            translateY(4px)
            rotate(45deg);
    }

}


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

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

    .memorias-lightbox__info::after {
        animation:
            none;
    }

}

    /* ======================================================
       MODAL
       ====================================================== */

    .memorias-lightbox__dialog {
        padding:
            0 !important;

        align-items:
            center !important;

        justify-content:
            center !important;
    }


    .memorias-lightbox__main {
        position:
            relative !important;

        width:
            calc(100% - 24px) !important;

        max-width:
            560px !important;

        height:
            auto !important;

        max-height:
            none !important;

        margin:
            auto !important;

        overflow:
            hidden !important;

        border-radius:
            16px !important;

        background:
            #022b26 !important;
    }


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

    .memorias-lightbox__media {
        position:
            relative !important;

        width:
            100% !important;

        height:
            auto !important;

        min-height:
            0 !important;

        overflow:
            hidden !important;

        border-radius:
            16px !important;

        background:
            #022b26 !important;
    }


    .memorias-lightbox__image {
        display:
            block !important;

        width:
            100% !important;

        height:
            auto !important;

        max-height:
            68dvh !important;

        object-fit:
            contain !important;

        object-position:
            center center !important;

        margin:
            0 auto !important;
    }


    /* ======================================================
       PANEL DE TEXTO
       ------------------------------------------------------
       En móvil se convierte en overlay inferior.
       ====================================================== */

    .memorias-lightbox__info {
        position:
            absolute !important;

        z-index:
            8 !important;

        right:
            0 !important;

        bottom:
            0 !important;

        left:
            0 !important;

        display:
            flex !important;

        flex-direction:
            column !important;

        justify-content:
            flex-end !important;

        width:
            100% !important;

        height:
            auto !important;

        max-height:
            46% !important;

        margin:
            0 !important;

        padding:
            48px
            20px
            18px
            !important;

        box-sizing:
            border-box !important;

        overflow:
            hidden !important;

        border:
            0 !important;

        border-radius:
            0 0 16px 16px !important;

        background:
            linear-gradient(
                180deg,
                rgba(2, 43, 38, 0) 0%,
                rgba(2, 43, 38, 0.55) 24%,
                rgba(2, 43, 38, 0.88) 62%,
                rgba(2, 43, 38, 0.97) 100%
            )
            !important;

        color:
            #ffffff !important;

        pointer-events:
            auto !important;
    }


    /* ======================================================
       CONTADOR
       ====================================================== */

    .memorias-lightbox__counter {
        flex:
            0 0 auto !important;

        margin:
            0 0 8px
            !important;

        padding:
            0 !important;

        color:
            rgba(
                255,
                255,
                255,
                0.74
            )
            !important;

        font-family:
            var(--amoladero-font-heavy) !important;

        font-size:
            0.78rem !important;

        font-weight:
            700 !important;

        line-height:
            1.2 !important;

        letter-spacing:
            0.06em !important;

        text-align:
            center !important;
    }


    /* ======================================================
       DESCRIPCIÓN
       ====================================================== */

    .memorias-lightbox__caption {
        width:
            100% !important;

        max-height:
            24dvh !important;

        margin:
            0 !important;

        padding:
            0 4px 2px
            !important;

        box-sizing:
            border-box !important;

        overflow-x:
            hidden !important;

        overflow-y:
            auto !important;

        overscroll-behavior:
            contain !important;

        -webkit-overflow-scrolling:
            touch !important;

        color:
            #ffffff !important;

        font-size:
            clamp(
                0.95rem,
                4vw,
                1.08rem
            )
            !important;

        font-weight:
            500 !important;

        line-height:
            1.45 !important;

        letter-spacing:
            0 !important;

        text-align:
            center !important;

        text-wrap:
            pretty;

        text-shadow:
            0 1px 4px
            rgba(
                0,
                0,
                0,
                0.42
            );
    }


    /*
     * Scrollbar discreta.
     */

    .memorias-lightbox__caption {
        scrollbar-width:
            thin;

        scrollbar-color:
            rgba(
                255,
                255,
                255,
                0.45
            )
            transparent;
    }


    .memorias-lightbox__caption::-webkit-scrollbar {
        width:
            4px;
    }


    .memorias-lightbox__caption::-webkit-scrollbar-track {
        background:
            transparent;
    }


    .memorias-lightbox__caption::-webkit-scrollbar-thumb {
        border-radius:
            999px;

        background:
            rgba(
                255,
                255,
                255,
                0.42
            );
    }


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

    .memorias-lightbox__arrow {
        top:
            50% !important;

        width:
            52px !important;

        height:
            52px !important;

        margin:
            0 !important;

        border:
            1px solid
            rgba(
                255,
                255,
                255,
                0.20
            )
            !important;

        background:
            rgba(
                220,
                229,
                223,
                0.90
            )
            !important;

        color:
            #046748 !important;

        box-shadow:
            0 8px 24px
            rgba(
                0,
                0,
                0,
                0.18
            );

        backdrop-filter:
            blur(8px);

        -webkit-backdrop-filter:
            blur(8px);

        transform:
            translateY(-50%)
            !important;
    }


    .memorias-lightbox__arrow--prev {
        left:
            12px !important;
    }


    .memorias-lightbox__arrow--next {
        right:
            12px !important;
    }


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

    .memorias-lightbox__close {
        position:
            fixed !important;

        z-index:
            9999999 !important;

        top:
            max(
                18px,
                env(
                    safe-area-inset-top,
                    0px
                )
            )
            !important;

        right:
            18px !important;

        width:
            48px !important;

        height:
            48px !important;

        border-radius:
            50% !important;

        background:
            rgba(
                45,
                137,
                86,
                0.94
            )
            !important;

        color:
            #ffffff !important;

        box-shadow:
            0 8px 24px
            rgba(
                0,
                0,
                0,
                0.22
            );

        backdrop-filter:
            blur(8px);

        -webkit-backdrop-filter:
            blur(8px);
    }


/* ==========================================================
   AMOLADERO — MEMORIAS
   SVG GALERÍA DE IMÁGENES
   Centrado validado en DevTools: diferencia 0px

   Ordenador: 560px
   Tablet:    440px
   Móvil:     290px

   No modifica el slider ni otras imágenes.
   ========================================================== */

/* Contenedor del SVG — centrado horizontal */

.memorias-galeria > figure.memorias-galeria__title-svg {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    width: 100% !important;
    max-width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;

    float: none !important;
}

/* SVG — ordenador */

.memorias-galeria > figure.memorias-galeria__title-svg img {
    display: block !important;

    width: 560px !important;
    max-width: calc(100% - 32px) !important;
    height: auto !important;

    margin-left: auto !important;
    margin-right: auto !important;
}

/* Tablet */

@media (min-width: 768px) and (max-width: 1024px) {
    .memorias-galeria > figure.memorias-galeria__title-svg img {
        width: 440px !important;
    }
}

/* Móvil */

@media (max-width: 767px) {
    .memorias-galeria > figure.memorias-galeria__title-svg img {
        width: 290px !important;
    }
}