/* RZ-MASCOTA-INLINE-CSS-V2-INICIO */

.rz-inline-mascot,
.rz-inline-mascot-dialog-wrap {
    display: none;
}

@media (max-width: 768px) {

    body.page-id-1476 .sort-by.rz-inline-mascot-ready,
    body.page-id-532 .sort-by.rz-inline-mascot-ready {
        position: relative;
        min-height: 166px;
        overflow: hidden;
        align-content: center;
        isolation: isolate;
    }

    body.page-id-1476 .sort-by.rz-inline-mascot-ready > h3,
    body.page-id-532 .sort-by.rz-inline-mascot-ready > h3 {
        display: none !important;
    }

    body.page-id-1476 .sort-by.rz-inline-mascot-ready > ul.sort,
    body.page-id-532 .sort-by.rz-inline-mascot-ready > ul.sort {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: 100%;
    }

    .rz-inline-mascot {
        display: block;
        position: absolute;
        z-index: 1;
        top: 0;
        bottom: 0;
        overflow: hidden;
        pointer-events: none;
        contain: layout paint;
    }

    .rz-inline-mascot__character {
        position: absolute;
        top: 50%;
        background-repeat: no-repeat;
        background-position: 0 0;
        transform:
            translateY(-50%)
            rotate(0deg);
        transform-origin: 50% 88%;
        will-change:
            transform,
            background-position;
    }

    /*
     * Vida permanente:
     * respiración, balanceo y pequeño desplazamiento.
     */
    .rz-inline-mascot:not(.rz-inline-peeking)
    .rz-inline-mascot__character {
        animation:
            rzInlineAlive 2.8s ease-in-out infinite;
    }

    .rz-inline-mascot.rz-inline-gesture
    .rz-inline-mascot__character {
        animation:
            rzInlineGesture 1.15s ease-in-out;
    }

    .rz-inline-mascot.rz-inline-blink
    .rz-inline-mascot__character {
        animation:
            rzInlineHappyBlink 360ms ease-in-out;
    }

    /*
     * Al acercarse al borde inferior del header:
     * gira, baja y parece querer asomarse.
     */
    .rz-inline-mascot.rz-inline-reaction-shoulder
    .rz-inline-mascot__character {
        animation:
            rzInlineShoulder 1.45s ease-in-out;
    }

    .rz-inline-mascot.rz-inline-reaction-surprise
    .rz-inline-mascot__character {
        animation:
            rzInlineSurprise 1.4s ease-in-out;
    }

    .rz-inline-mascot.rz-inline-reaction-dance
    .rz-inline-mascot__character {
        animation:
            rzInlineDance 1.75s ease-in-out;
    }

    .rz-inline-mascot.rz-inline-reaction-laugh
    .rz-inline-mascot__character {
        animation:
            rzInlineLaugh 1.5s ease-in-out;
    }

    .rz-inline-mascot.rz-inline-reaction-hide
    .rz-inline-mascot__character {
        animation:
            rzInlineHide 1.55s ease-in-out;
    }

    .rz-inline-mascot.rz-inline-reaction-wave
    .rz-inline-mascot__character {
        animation:
            rzInlineWave 1.5s ease-in-out;
    }

    .rz-inline-mascot.rz-inline-reaction-notice
    .rz-inline-mascot__character {
        animation:
            rzInlineNotice 1.55s ease-in-out;
    }

    /*
     * Globo independiente: está después de .sort-by,
     * por lo tanto queda fuera del cuadro blanco.
     */
    .rz-inline-mascot-dialog-wrap {
        display: block;
        position: relative;
        z-index: 40;
        width: 100%;
        height: 0;
        pointer-events: none;
    }

    .rz-inline-mascot-dialog {
        pointer-events: auto;
        position: absolute;
        top: 10px;
        left: 50%;
        width: min(68vw, 330px);
        min-height: 82px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 19px 27px;
        border: 4px solid #7c197f;
        border-radius:
            48% 52% 46% 54% /
            42% 38% 62% 58%;
        background-color:
            var(
                --rz-search-background-color,
                #fff3e7
            );
        background-image:
            var(
                --rz-search-background-image,
                linear-gradient(
                    135deg,
                    #fffaf5 0%,
                    #ffe6cf 100%
                )
            );
        color: #f38121;
        box-shadow:
            5px 7px 0 rgba(124, 25, 127, 0.18),
            0 11px 20px rgba(30, 22, 50, 0.14);
        font-family:
            "Source Sans Pro",
            "Helvetica Neue",
            Arial,
            sans-serif;
        font-size: clamp(14px, 3.8vw, 19px);
        font-weight: 700;
        line-height: 1.32;
        letter-spacing: 0.01em;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
        -webkit-hyphens: none;
        text-align: center;
        opacity: 0;
        transform:
            translate(-50%, -12px)
            scale(0.92);
        transition:
            opacity 0.18s ease,
            transform 0.22s ease;
    }

    .rz-inline-mascot-dialog.rz-inline-dialog-single-line {
        font-size:
            clamp(
                17px,
                4.5vw,
                22px
            ) !important;
        line-height: 1.2;
    }

    /*
     * Cola hacia arriba porque la mascota está
     * dentro del cuadro superior.
     */
    .rz-inline-mascot-dialog::before {
        content: "";
        position: absolute;
        top: -31px;
        left: 15%;
        right: auto;
        width: 43px;
        height: 37px;
        background: #7c197f;
        clip-path:
            polygon(100% 0, 76% 100%, 0 100%);
        transform:
            rotate(-8deg)
            skewX(-5deg);
        transform-origin: 50% 100%;
    }

    .rz-inline-mascot-dialog::after {
        content: "";
        position: absolute;
        top: -21px;
        left: calc(15% + 8px);
        right: auto;
        width: 29px;
        height: 28px;
        background-color:
            var(
                --rz-search-background-color,
                #fff3e7
            );
        background-image:
            var(
                --rz-search-background-image,
                linear-gradient(
                    135deg,
                    #fffaf5 0%,
                    #ffe6cf 100%
                )
            );
        clip-path:
            polygon(100% 0, 76% 100%, 0 100%);
        transform:
            rotate(-8deg)
            skewX(-5deg);
        transform-origin: 50% 100%;
    }

    .rz-inline-mascot-dialog-wrap.rz-dialog-visible
    .rz-inline-mascot-dialog {
        opacity: 1;
        transform:
            translate(-50%, 0)
            scale(1);
    }

    @keyframes rzInlineAlive {
        0%,
        100% {
            transform:
                translateY(-50%)
                translateX(0)
                rotate(0deg)
                scale(1);
        }

        25% {
            transform:
                translateY(calc(-50% - 3px))
                translateX(-2px)
                rotate(-1.5deg)
                scale(1.018);
        }

        55% {
            transform:
                translateY(calc(-50% + 1px))
                translateX(1px)
                rotate(1deg)
                scale(0.992);
        }

        78% {
            transform:
                translateY(calc(-50% - 2px))
                translateX(2px)
                rotate(1.5deg)
                scale(1.01);
        }
    }

    @keyframes rzInlineGesture {
        0%,
        100% {
            transform:
                translateY(-50%)
                rotate(0deg)
                scale(1);
        }

        26% {
            transform:
                translateY(calc(-50% - 8px))
                rotate(-5deg)
                scale(1.04);
        }

        55% {
            transform:
                translateY(calc(-50% + 1px))
                rotate(4deg)
                scale(0.98);
        }

        78% {
            transform:
                translateY(calc(-50% - 5px))
                rotate(-2deg)
                scale(1.025);
        }
    }

    @keyframes rzInlineHappyBlink {
        0%,
        100% {
            transform:
                translateY(-50%)
                scaleY(1);
        }

        45%,
        58% {
            transform:
                translateY(-50%)
                scaleY(0.94)
                scaleX(1.025);
        }
    }

    @keyframes rzInlineShoulder {
        0%,
        100% {
            transform:
                translateY(-50%)
                rotate(0deg);
        }

        35% {
            transform:
                translateY(calc(-50% - 4px))
                translateX(-5px)
                rotate(-6deg);
        }

        70% {
            transform:
                translateY(-50%)
                translateX(3px)
                rotate(3deg);
        }
    }

    @keyframes rzInlineSurprise {
        0%,
        100% {
            transform:
                translateY(-50%)
                scale(1);
        }

        25% {
            transform:
                translateY(calc(-50% - 8px))
                scale(1.1);
        }

        54% {
            transform:
                translateY(-50%)
                scale(1.01);
        }

        75% {
            transform:
                translateY(calc(-50% - 5px))
                scale(1.07);
        }
    }

    @keyframes rzInlineDance {
        0%,
        100% {
            transform:
                translateY(-50%)
                rotate(0deg);
        }

        20% {
            transform:
                translateY(calc(-50% - 10px))
                rotate(-9deg);
        }

        45% {
            transform:
                translateY(calc(-50% - 3px))
                rotate(9deg);
        }

        70% {
            transform:
                translateY(calc(-50% - 11px))
                rotate(-6deg);
        }
    }

    @keyframes rzInlineLaugh {
        0%,
        100% {
            transform:
                translateY(-50%)
                scale(1);
        }

        28% {
            transform:
                translateY(calc(-50% - 14px))
                scale(1.05);
        }

        50% {
            transform:
                translateY(calc(-50% + 2px))
                scale(0.98);
        }

        72% {
            transform:
                translateY(calc(-50% - 9px))
                scale(1.035);
        }
    }

    @keyframes rzInlineHide {
        0%,
        100% {
            transform:
                translateY(-50%);
        }

        30% {
            transform:
                translateY(calc(-50% + 34px));
        }

        63% {
            transform:
                translateY(calc(-50% + 16px));
        }
    }

    @keyframes rzInlineWave {
        0%,
        100% {
            transform:
                translateY(-50%)
                rotate(0deg);
        }

        28% {
            transform:
                translateY(calc(-50% - 5px))
                rotate(-5deg);
        }

        58% {
            transform:
                translateY(-50%)
                rotate(5deg);
        }
    }

    @keyframes rzInlineNotice {
        0%,
        100% {
            transform:
                translateY(-50%)
                translateX(0);
        }

        28% {
            transform:
                translateY(calc(-50% - 4px))
                translateX(-8px)
                rotate(-3deg);
        }

        63% {
            transform:
                translateY(-50%)
                translateX(4px)
                rotate(2deg);
        }
    }
}

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

    .rz-inline-mascot *,
    .rz-inline-mascot *::before,
    .rz-inline-mascot *::after,
    .rz-inline-mascot-dialog,
    .rz-inline-mascot-dialog::before,
    .rz-inline-mascot-dialog::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}

/* RZ-MASCOTA-INLINE-CSS-V2-FIN */
/* RZ-MASCOTA-INLINE-AJUSTES-V22-INICIO */

@media (max-width: 768px) {

    .rz-inline-mascot-dialog {
        transform:
            translateY(-12px)
            scale(0.92) !important;
    }

    .rz-inline-mascot-dialog-wrap.rz-dialog-visible
    .rz-inline-mascot-dialog {
        transform:
            translateY(0)
            scale(1) !important;
    }
}

/* RZ-MASCOTA-INLINE-AJUSTES-V22-FIN */
/* RZ-MASCOTA-INLINE-AJUSTES-V23-INICIO */

@media (max-width: 768px) {

    /*
     * Menos espacio reservado porque la mascota
     * ahora mide 90px.
     */
    body.page-id-1476
    .sort-by.rz-inline-mascot-ready,
    body.page-id-532
    .sort-by.rz-inline-mascot-ready {
        padding-right: 108px !important;
    }

    /*
     * Dieciséis píxeles hacia nuestra izquierda
     * respecto de la posición de V2.2.
     */
    .rz-inline-mascot {
        right: 10px !important;
        width: 104px !important;
    }

    .rz-inline-mascot__character {
        right: 7px !important;
        width: 90px !important;
        height: 90px !important;
    }

    /*
     * Antes de los tres segundos permanece
     * escondida a la izquierda.
     */
    .rz-inline-mascot.rz-inline-awaiting-entry {
        opacity: 0;
        transform: translateX(-320px);
    }

    /*
     * Entrada desde la izquierda hasta su lugar.
     */
    .rz-inline-mascot.rz-inline-entering-page {
        animation:
            rzInlineEnterFromLeft
            1200ms
            cubic-bezier(
                0.2,
                0.82,
                0.26,
                1
            )
            forwards;
    }

    @keyframes rzInlineEnterFromLeft {

        0% {
            opacity: 0;
            transform:
                translateX(-320px)
                rotate(-10deg);
        }

        68% {
            opacity: 1;
            transform:
                translateX(8px)
                rotate(2deg);
        }

        84% {
            transform:
                translateX(-4px)
                rotate(-1deg);
        }

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

    /*
     * El wrapper del diálogo ocupa el ancho
     * real de la pantalla, independientemente
     * del ancho que le asigne el tema.
     */
    .rz-inline-mascot-dialog-wrap {
        position: relative !important;
        left: 50% !important;
        right: auto !important;
        width: 100vw !important;
        max-width: none !important;
        margin-left: -50vw !important;
        clear: both !important;
        transform: none !important;
    }

    /*
     * Globo dentro del viewport y alineado
     * desde nuestra derecha.
     */
    .rz-inline-mascot-dialog {
        top: 12px !important;
        right: 12px !important;
        left: auto !important;
        width: min(68vw, 330px) !important;
        max-width: 68vw !important;
    }

    /*
     * El triángulo queda arriba a la derecha,
     * debajo del centro de la mascota.
     */
    .rz-inline-mascot-dialog::before {
        right: 42px !important;
        left: auto !important;
    }

    .rz-inline-mascot-dialog::after {
        right: 47px !important;
        left: auto !important;
    }

    /*
     * La asomada boca abajo gana prioridad sobre
     * cualquier animación de reposo previa.
     */
}

@media (
    max-width: 768px
) and (
    prefers-reduced-motion: reduce
) {

    .rz-inline-mascot.rz-inline-entering-page {
        animation-duration:
            1ms !important;
    }
}

/* RZ-MASCOTA-INLINE-AJUSTES-V23-FIN */
/* RZ-MASCOTA-INLINE-AJUSTES-V24-INICIO */

@media (max-width: 768px) {

    /*
     * Cinco píxeles más arriba.
     */
    .rz-inline-mascot__character {
        top: calc(50% - 5px) !important;
    }

    /*
     * Secuencia tranquila de vuelta completa.
     */
    .rz-inline-mascot.rz-inline-full-turn
    .rz-inline-mascot__character {
        animation: none !important;
        transition:
            transform 220ms ease,
            background-position 160ms steps(1);
    }

    .rz-inline-mascot.rz-inline-full-turn
    .rz-inline-mascot__character {
        transform:
            translateY(-50%)
            rotate(-3deg)
            scaleX(1);
    }

    .rz-inline-mascot.rz-inline-full-turn.rz-inline-mirrored
    .rz-inline-mascot__character {
        transform:
            translateY(-50%)
            rotate(3deg)
            scaleX(-1);
    }

    /*
     * Pestañeo breve durante movimientos.
     */
    .rz-inline-mascot.rz-inline-motion-blink
    .rz-inline-mascot__character {
        animation:
            rzInlineMotionBlinkV24
            180ms ease-in-out !important;
    }

    @keyframes rzInlineMotionBlinkV24 {

        0%,
        100% {
            transform:
                translateY(-50%)
                scaleY(1);
        }

        50% {
            transform:
                translateY(-50%)
                scaleY(0.94)
                scaleX(1.025);
        }
    }
}

/* RZ-MASCOTA-INLINE-AJUSTES-V24-FIN */
/* RZ-MASCOTA-INLINE-PESTANEO-V305-INICIO */
@media (max-width: 768px) {
    .rz-inline-mascot__character { background-image: url("rz-inline-mascot-sprite-v3.webp") !important; background-size: 1400% 100% !important; }
    .rz-inline-frame-idle { background-position: 0% 0 !important; }
    .rz-inline-frame-surprise { background-position: 7.692308% 0 !important; }
    .rz-inline-frame-shoulder { background-position: 15.384615% 0 !important; }
    .rz-inline-frame-back { background-position: 23.076923% 0 !important; }
    .rz-inline-frame-dance { background-position: 30.769231% 0 !important; }
    .rz-inline-frame-laugh { background-position: 38.461538% 0 !important; }
    .rz-inline-frame-hide { background-position: 46.153846% 0 !important; }
    .rz-inline-frame-wave { background-position: 53.846154% 0 !important; }
    .rz-inline-frame-notice { background-position: 61.538462% 0 !important; }
    .rz-inline-frame-closed { background-position: 69.230769% 0 !important; }
    .rz-inline-frame-search-prep { background-position: 76.923077% 0 !important; }
    .rz-inline-frame-search-mid { background-position: 84.615385% 0 !important; }
    .rz-inline-frame-search-point { background-position: 92.307692% 0 !important; }
    .rz-inline-frame-peeking-closed { background-position: 100% 0 !important; }
}
/* RZ-MASCOTA-INLINE-PESTANEO-V305-FIN */
/* RZ-MASCOTA-INLINE-AJUSTES-V245-INICIO */
@media (max-width: 768px) {
    body.page-id-1476 .rz-inline-mascot-dialog,
    body.page-id-532 .rz-inline-mascot-dialog {
        top: -18px !important;
    }
}
/* RZ-MASCOTA-INLINE-AJUSTES-V245-FIN */
/* RZ-MASCOTA-INLINE-SCROLL-V249-INICIO */
@media (max-width: 768px) {
    body.page-id-1476
    .rz-inline-mascot.rz-inline-peeking
    .rz-inline-mascot__character,
    body.page-id-532
    .rz-inline-mascot.rz-inline-peeking
    .rz-inline-mascot__character {
        background-position: 46.153846% 0 !important;
        animation:
            rzInlineScrollDownTurnV249
            780ms
            cubic-bezier(0.2, 0.78, 0.28, 1)
            forwards !important;
    }

    body.page-id-1476 .rz-inline-mascot.rz-inline-peeking .rz-inline-mascot__character.rz-inline-frame-peeking-closed,
    body.page-id-532 .rz-inline-mascot.rz-inline-peeking .rz-inline-mascot__character.rz-inline-frame-peeking-closed {
        background-position: 100% 0 !important;
    }

    @keyframes rzInlineScrollDownTurnV249 {
        0% {
            transform:
                translateY(-50%)
                translateX(0)
                rotate(0deg)
                scale(1);
        }

        32% {
            transform:
                translateY(calc(-50% + 19px))
                translateX(1px)
                rotate(8deg)
                scale(0.98);
        }

        68% {
            transform:
                translateY(calc(-50% + 11px))
                translateX(3px)
                rotate(118deg)
                scale(0.95);
        }

        100% {
            transform:
                translateY(calc(-50% + 3px))
                translateX(3px)
                rotate(180deg)
                scale(0.94);
        }
    }
}
/* RZ-MASCOTA-INLINE-SCROLL-V249-FIN */
/* RZ-MASCOTA-INLINE-HEADER-TACTIL-V250-INICIO */
@media (max-width: 768px) {
    body.page-id-1476
    .rz-inline-mascot.rz-inline-peeking,
    body.page-id-532
    .rz-inline-mascot.rz-inline-peeking {
        position: fixed !important;
        right: 10px !important;
        bottom: auto !important;
        width: 104px !important;
        height: 104px !important;
        overflow: visible !important;
        contain: none !important;
    }

    body.page-id-1476
    .sort-by.rz-inline-mascot-ready
    a,
    body.page-id-532
    .sort-by.rz-inline-mascot-ready
    a {
        -webkit-touch-callout: none !important;
    }

    #rz-inline-mascot-hit-v249 {
        pointer-events: auto !important;
        touch-action: none !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }
}
/* RZ-MASCOTA-INLINE-HEADER-TACTIL-V250-FIN */
/* RZ-MASCOTA-INLINE-SCROLL-BAJO-V251-INICIO */
@media (max-width: 768px) {
    body.page-id-1476
    .rz-inline-mascot.rz-inline-peeking,
    body.page-id-532
    .rz-inline-mascot.rz-inline-peeking {
        top: -42px !important;
    }
}
/* RZ-MASCOTA-INLINE-SCROLL-BAJO-V251-FIN */
/* RZ-MASCOTA-INLINE-CAPA-SCROLL-V252-INICIO */
@media (max-width: 768px) {
    body.page-id-1476
    .sort-by.rz-inline-mascot-ready.rz-inline-peeking-parent,
    body.page-id-532
    .sort-by.rz-inline-mascot-ready.rz-inline-peeking-parent {
        overflow: visible !important;
        isolation: auto !important;
        z-index: 100000 !important;
    }

    body.page-id-1476
    .rz-inline-mascot.rz-inline-peeking,
    body.page-id-532
    .rz-inline-mascot.rz-inline-peeking {
        z-index: 100001 !important;
    }
}
/* RZ-MASCOTA-INLINE-CAPA-SCROLL-V252-FIN */
/* RZ-MASCOTA-INLINE-CAPAS-V254-INICIO */
@media (max-width: 768px) {
    body.page-id-1476.rz-inline-scroll-active .header,
    body.page-id-532.rz-inline-scroll-active .header {
        z-index: 100002 !important;
    }
}
/* RZ-MASCOTA-INLINE-CAPAS-V254-FIN */

/* RZ-MASCOTA-INLINE-CONSOLIDACION-V260 */

/* RZ-MASCOTA-INLINE-RECORDATORIO-ASOMADA-V275C */
@media (max-width: 768px) {
    body.page-id-1476 .rz-inline-mascot-dialog-wrap.rz-inline-peeking-reminder,
    body.page-id-532 .rz-inline-mascot-dialog-wrap.rz-inline-peeking-reminder {
        position: fixed !important;
        top: 94px !important;
        right: 0 !important;
        left: 0 !important;
        z-index: 100001 !important;
        width: 100vw !important;
        height: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        transform: none !important;
        pointer-events: none !important;
    }
    body.page-id-1476 .rz-inline-mascot-dialog-wrap.rz-inline-peeking-reminder .rz-inline-mascot-dialog,
    body.page-id-532 .rz-inline-mascot-dialog-wrap.rz-inline-peeking-reminder .rz-inline-mascot-dialog {
        top: 0 !important;
        right: 12px !important;
        left: auto !important;
    }
}