/* ============================================================
   ALBUMSHOT EVENTOS
   BLOQUE · ACTIVIDADES
   ============================================================ */

.ev-actividades {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.ev-actividades *,
.ev-actividades *::before,
.ev-actividades *::after {
    box-sizing: border-box;
}


/* ============================================================
   INTERIOR DEL BLOQUE
   ============================================================ */

.ev-actividades .ev-block-inner {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}


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

.ev-actividades-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}


/* ============================================================
   TÍTULO
   ============================================================ */

.ev-actividades-title {
    display: block;
    position: relative;

    width: 100%;
    max-width: 100%;

    margin-top: 0;

    line-height: 1.15;

    overflow-wrap: anywhere;
    word-break: normal;
}

.ev-actividades-title > span {
    position: relative;
    z-index: 1;
}


/* ============================================================
   SUBTÍTULO / ESCRITURA ADICIONAL
   ============================================================ */

.ev-actividades-subtitle {
    display: block;
    position: relative;

    width: 100%;
    max-width: 100%;

    line-height: 1.3;

    white-space: pre-line;
    overflow-wrap: anywhere;
}

.ev-actividades-subtitle > span {
    position: relative;
    z-index: 1;
}


/* ============================================================
   BOTÓN · VER ACTIVIDADES
   ============================================================ */

.ev-actividades-open {
    display: block;

    position: relative;

    width: fit-content;
    max-width: 100%;

    margin-left: auto;
    margin-right: auto;

    border: 0;

    cursor: pointer;

    line-height: 1.15;

    appearance: none;
    -webkit-appearance: none;

    transition:
        transform .18s ease,
        filter .18s ease,
        opacity .18s ease;

    overflow-wrap: anywhere;
}

.ev-actividades-open:hover {
    filter: brightness(1.04);
}

.ev-actividades-open:active {
    transform: scale(.97);
}

.ev-actividades-open:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}


/* ============================================================
   ÁREA DESPLEGABLE
   ============================================================ */

.ev-actividades-reveal {
    position: relative;

    width: 100%;
    max-width: 100%;

    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(18px);

    transition:
        max-height var(--actividades-reveal-duration, 1800ms) cubic-bezier(.22,.61,.36,1),
        opacity .55s ease,
        transform .75s ease;
}

.ev-actividades-reveal.is-opening,
.ev-actividades-reveal.is-open {
    opacity: 1;
    transform: translateY(0);
}

.ev-actividades-reveal[hidden] {
    display: none !important;
}


/* ============================================================
   CONTENEDOR DE MOVIMIENTO DE LA IMAGEN
   ============================================================ */

.ev-actividades-motion {
    position: relative;

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

    width: 100%;
    max-width: 100%;

    margin: 0 auto;

    transform-origin: center center;

    --actividades-motion-duration: 4200ms;
    --actividades-image-size: 90%;
}


/* ============================================================
   IMAGEN DEL CRONOGRAMA
   ============================================================ */

.ev-actividades-image {
    display: block;

    width: var(--actividades-image-size);
    max-width: 100%;
    height: auto;

    margin: 0 auto;

    object-fit: contain;

    transform-origin: center center;

    transition:
        opacity .25s ease,
        transform .25s ease;
}


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

.ev-actividades-empty {
    width: 100%;

    padding: 22px 16px;

    border: 1px dashed rgba(127, 127, 127, .45);
    border-radius: 12px;

    text-align: center;

    font-size: 14px;
    line-height: 1.35;

    opacity: .65;
}


/* ============================================================
   BOTÓN · OCULTAR ACTIVIDADES
   ============================================================ */

.ev-actividades-close {
    display: block;

    position: relative;

    width: fit-content;
    max-width: 100%;

    margin-left: auto;
    margin-right: auto;

    border: 0;

    cursor: pointer;

    line-height: 1.15;

    appearance: none;
    -webkit-appearance: none;

    transition:
        transform .18s ease,
        filter .18s ease,
        opacity .18s ease;

    overflow-wrap: anywhere;
}

.ev-actividades-close:hover {
    filter: brightness(1.04);
}

.ev-actividades-close:active {
    transform: scale(.97);
}

.ev-actividades-close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}


/* ============================================================
   MOVIMIENTO · NINGUNO
   ============================================================ */

.ev-actividades-motion--none {
    animation: none;
}


/* ============================================================
   MOVIMIENTO · LATIDO
   ============================================================ */

.ev-actividades-motion--pulse {
    animation:
        actividadesPulse
        var(--actividades-motion-duration)
        ease-in-out
        infinite;
}

@keyframes actividadesPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.025);
    }
}


/* ============================================================
   MOVIMIENTO · BALANCEO
   ============================================================ */

.ev-actividades-motion--sway {
    animation:
        actividadesSway
        var(--actividades-motion-duration)
        ease-in-out
        infinite;
}

@keyframes actividadesSway {

    0%,
    100% {
        transform:
            translateX(0)
            rotate(0deg);
    }

    25% {
        transform:
            translateX(-5px)
            rotate(-.45deg);
    }

    75% {
        transform:
            translateX(5px)
            rotate(.45deg);
    }
}


/* ============================================================
   MOVIMIENTO · ZIGZAG
   ============================================================ */

.ev-actividades-motion--zigzag {
    animation:
        actividadesZigzag
        var(--actividades-motion-duration)
        ease-in-out
        infinite;
}

@keyframes actividadesZigzag {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0);
    }

    20% {
        transform:
            translate3d(-7px, -2px, 0);
    }

    40% {
        transform:
            translate3d(7px, 2px, 0);
    }

    60% {
        transform:
            translate3d(-5px, 2px, 0);
    }

    80% {
        transform:
            translate3d(5px, -2px, 0);
    }
}


/* ============================================================
   ACCESIBILIDAD · REDUCIR MOVIMIENTO
   ============================================================ */

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

    .ev-actividades-motion--pulse,
    .ev-actividades-motion--sway,
    .ev-actividades-motion--zigzag {
        animation: none !important;
    }

    .ev-actividades-open,
    .ev-actividades-close,
    .ev-actividades-image {
        transition: none !important;
    }
}


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

@media (max-width: 640px) {

    .ev-actividades {
        width: 100%;
    }

    .ev-actividades .ev-block-inner {
        width: 100%;
        max-width: 100%;
    }

    .ev-actividades-container {
        width: 100%;
        max-width: 100%;
    }

    .ev-actividades-title {
        max-width: 100%;
    }

    .ev-actividades-subtitle {
        max-width: 100%;
    }

    .ev-actividades-open,
    .ev-actividades-close {
        max-width: 100%;
    }

    .ev-actividades-motion {
        max-width: 100%;
    }

    .ev-actividades-image {
        max-width: 100%;
    }
}


/* ============================================================
   PANTALLAS MUY PEQUEÑAS
   ============================================================ */

@media (max-width: 380px) {

    .ev-actividades-open,
    .ev-actividades-close {
        width: 100%;
    }

    .ev-actividades-title,
    .ev-actividades-subtitle {
        overflow-wrap: break-word;
    }
}