/* styles.css */

/* ------------------- christmas-effects.css ------------------- */

/* Opcional: Estilos para marcos navideños alrededor de imágenes */
.christmas-frame {
    border: 5px solid red;
    padding: 10px;
    border-radius: 10px;
    background-image: url("../../img/ujjina-navidad/xmas-frame.png"); /* Asegúrate de tener esta imagen */
    background-size: cover;
    background-repeat: no-repeat;
}

/* ------------------- ujjina-navidad-adornos.css ------------------- */

:root {
    /* Define el índice z para los stickers */
    --pimp-sticker-zindex: 9999;
}

body {
    position: relative;
    /* Cursor personalizado navideño con rutas corregidas */
    cursor: url('../../img/ujjina-navidad/cursors/christmas/cursor-1.svg'), auto;
}

.pimp-my-site-sticker-board {
    /* Posiciona el contenedor de stickers de forma fija */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--pimp-sticker-zindex);
    pointer-events: none; /* Permite interactuar con los elementos debajo */
}

.pimp-my-site-sticker-board img {
    /* Estilos básicos para las imágenes de stickers */
    max-width: 100%;
    height: auto;
    -webkit-user-select: none; /* Previene selección de imagen en navegadores WebKit */
       -moz-user-select: none; /* Previene selección de imagen en Firefox */
            user-select: none; /* Previene selección de imagen en otros navegadores */
    -webkit-user-drag: none; /* Previene arrastre de imagen en navegadores WebKit */
    -o-object-fit: contain;
       object-fit: contain;
}

.pimp-my-site-sticker-board.pimp-my-site-sticker-board--fixed {
    /* Asegura que el contenedor de stickers permanezca fijo */
    position: fixed;
}

.pimp-my-site-sticker-board .pimp-my-site-sticker-board__top-left-sticker-wrapper,
.pimp-my-site-sticker-board .pimp-my-site-sticker-board__top-right-sticker-wrapper,
.pimp-my-site-sticker-board .pimp-my-site-sticker-board__bottom-left-sticker-wrapper,
.pimp-my-site-sticker-board .pimp-my-site-sticker-board__bottom-right-sticker-wrapper {
    /* Posiciona los wrappers de los stickers en las esquinas */
    position: absolute;
    display: flex;
    width: auto;
    max-width: clamp(20px, 9vw, 280px);
    height: auto;
    max-height: clamp(20px, 9vw, 280px);
}

.pimp-my-site-sticker-board .pimp-my-site-sticker-board__top-left-sticker-wrapper {
    /* Posiciona el sticker en la esquina superior izquierda */
    top: 0;
    left: 0;
}

.pimp-my-site-sticker-board .pimp-my-site-sticker-board__top-left-sticker-wrapper img {
    /* Invierte verticalmente el sticker de la esquina superior izquierda */
    transform: translate3d(0, 0, 0) scaleY(-1);
}

.pimp-my-site-sticker-board .pimp-my-site-sticker-board__top-right-sticker-wrapper {
    /* Posiciona el sticker en la esquina superior derecha */
    top: 0;
    right: 0;
}

.pimp-my-site-sticker-board .pimp-my-site-sticker-board__top-right-sticker-wrapper img {
    /* Invierte horizontalmente el sticker de la esquina superior derecha */
    transform: translate3d(0, 0, 0) scale(-1);
}

.pimp-my-site-sticker-board .pimp-my-site-sticker-board__bottom-left-sticker-wrapper {
    /* Posiciona el sticker en la esquina inferior izquierda */
    bottom: 0;
    left: 0;
}

.pimp-my-site-sticker-board .pimp-my-site-sticker-board__bottom-right-sticker-wrapper {
    /* Posiciona el sticker en la esquina inferior derecha */
    bottom: 0;
    right: 0;
}

.pimp-my-site-sticker-board .pimp-my-site-sticker-board__bottom-right-sticker-wrapper img {
    /* Invierte horizontalmente el sticker de la esquina inferior derecha */
    transform: translate3d(0, 0, 0) scaleX(-1);
}

.pimp-my-site-sticker-board .pimp-my-site-sticker-board__top-sticker-wrapper,
.pimp-my-site-sticker-board .pimp-my-site-sticker-board__bottom-sticker-wrapper {
    /* Posiciona los wrappers de los stickers superior e inferior en el centro */
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
}

.pimp-my-site-sticker-board .pimp-my-site-sticker-board__top-sticker-wrapper img,
.pimp-my-site-sticker-board .pimp-my-site-sticker-board__bottom-sticker-wrapper img {
    /* Estilos para las imágenes de stickers superior e inferior */
    width: auto;
    height: auto;
    max-width: 25vw;
    max-height: 4.5vw;
}

.pimp-my-site-sticker-board .pimp-my-site-sticker-board__top-sticker-wrapper {
    /* Posiciona el sticker superior */
    top: 0;
}

.pimp-my-site-sticker-board .pimp-my-site-sticker-board__top-sticker-wrapper img {
    /* Invierte verticalmente el sticker superior */
    transform: translate3d(0, 0, 0) scaleY(-1);
}

.pimp-my-site-sticker-board .pimp-my-site-sticker-board__bottom-sticker-wrapper {
    /* Posiciona el sticker inferior */
    bottom: 0;
}

/* Ajustes específicos para ciertos stickers de Thanksgiving */
.pimp-my-site-sticker-board .pimp-my-site-sticker-board__top-sticker-wrapper img[src*=thanksgiving][src*=decoration-10],
.pimp-my-site-sticker-board .pimp-my-site-sticker-board__bottom-sticker-wrapper img[src*=thanksgiving][src*=decoration-10],
.pimp-my-site-sticker-board .pimp-my-site-sticker-board__top-sticker-wrapper img[src*=thanksgiving][src*=decoration-11],
.pimp-my-site-sticker-board .pimp-my-site-sticker-board__bottom-sticker-wrapper img[src*=thanksgiving][src*=decoration-11] {
    /* Define la altura mínima para ciertos stickers de Thanksgiving */
    min-height: clamp(50px, 10vw, 140px);
}

.pimp-my-site-sticker-board [class*=pimp-my-site-sticker-board] img[src*=thanksgiving][src*=decoration-7] {
    /* Define la altura máxima para decoration-7 de Thanksgiving */
    max-height: clamp(50px, 10vw, 90px);
}

/* Ajustes para stickers de Valentine's Day */
.pimp-my-site-sticker-board [class*=pimp-my-site-sticker-board__top] img[src*=valentine][src*=decoration-4],
.pimp-my-site-sticker-board [class*=pimp-my-site-sticker-board__top] img[src*=valentine][src*=decoration-5] {
    /* Ajusta la transformación para ciertos stickers de Valentine */
    transform: translate3d(0, 0, 0) scale(1);
}

/* Animación de entrada para los stickers */
@keyframes pmsStickerEntrance {
    from {
        transform: translate3d(0, 0, 0) scale(0.5);
        opacity: 0;
    }
    to {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 1;
    }
}

/* Contenedor para la animación del pingüino con regalo */
.pimp-my-site-animation-gift-penguin {
    position: absolute;
    right: 4vw;
    bottom: -10px;
    z-index: 2;
    display: flex;
}

.pimp-my-site-animation-gift-penguin svg {
    /* Estilos para el SVG del pingüino con regalo */
    max-height: clamp(80px, 20vw, 200px);
    width: auto;
    transform: translateY(15%);
    overflow: visible;
}

.pimp-my-site-animation-gift-penguin svg #penguin,
.pimp-my-site-animation-gift-penguin svg #gift_top,
.pimp-my-site-animation-gift-penguin svg #gift_bottom {
    /* Transiciones para los elementos del SVG */
    transition: 0.25s ease-in-out;
    will-change: transform;
}

.pimp-my-site-animation-gift-penguin svg:hover #penguin {
    /* Movimiento del pingüino al hacer hover */
    transform: translate3d(0, -45%, 0);
}

.pimp-my-site-animation-gift-penguin svg:hover #gift_top {
    /* Movimiento y rotación del regalo al hacer hover */
    transform: translate3d(0, -45%, 0) rotate(5deg);
}

/* ------------------- Cursores Personalizados ------------------- */

/* Cursores para imágenes con nombres específicos de Christmas */
img[src*="pimp-my.site"][src*="christmas1.gif"],
img[src*="partycles"][src*="christmas1.gif"] {
    cursor: url("../img/ujjina-navidad/cursors/christmas/cursor-4.svg"), url("../img/ujjina-navidad/cursors/christmas/cursor-4.png"), auto;
}

img[src*="pimp-my.site"][src*="christmas2.gif"],
img[src*="partycles"][src*="christmas2.gif"] {
    cursor: url("../img/ujjina-navidad/cursors/christmas/cursor-2.svg"), url("../img/ujjina-navidad/cursors/christmas/cursor-2.png"), auto;
}

img[src*="pimp-my.site"][src*="christmas3.gif"],
img[src*="partycles"][src*="christmas3.gif"] {
    cursor: url("../img/ujjina-navidad/cursors/christmas/cursor-3.svg"), url("../img/ujjina-navidad/cursors/christmas/cursor-3.png"), auto;
}

img[src*="pimp-my.site"][src*="christmas4.gif"],
img[src*="partycles"][src*="christmas4.gif"] {
    cursor: url("../img/ujjina-navidad/cursors/christmas/cursor-4.svg"), url("../img/ujjina-navidad/cursors/christmas/cursor-4.png"), auto;
}

img[src*="pimp-my.site"][src*="christmas5.gif"],
img[src*="partycles"][src*="christmas5.gif"] {
    cursor: url("../img/ujjina-navidad/cursors/christmas/cursor-6.svg"), url("../img/ujjina-navidad/cursors/christmas/cursor-6.png"), auto;
}

img[src*="pimp-my.site"][src*="christmas6.gif"],
img[src*="partycles"][src*="christmas6.gif"] {
    cursor: url("../img/ujjina-navidad/cursors/christmas/cursor-1.svg"), url("../img/ujjina-navidad/cursors/christmas/cursor-1.png"), auto;
}

img[src*="pimp-my.site"][src*="christmas7.gif"],
img[src*="partycles"][src*="christmas7.gif"] {
    cursor: url("../img/ujjina-navidad/cursors/christmas/cursor-3.svg"), url("../img/ujjina-navidad/cursors/christmas/cursor-3.png"), auto;
}

img[src*="pimp-my.site"][src*="christmas8.gif"],
img[src*="partycles"][src*="christmas8.gif"] {
    cursor: url("../img/ujjina-navidad/cursors/christmas/cursor-2.svg"), url("../img/ujjina-navidad/cursors/christmas/cursor-2.png"), auto;
}

/* Cursores para imágenes con nombres específicos de Halloween */
img[src*="pimp-my.site"][src*="halloween1.gif"],
img[src*="partycles"][src*="halloween1.gif"] {
    cursor: url("../img/ujjina-navidad/cursors/halloween/cursor-2.svg"), url("../img/ujjina-navidad/cursors/halloween/cursor-2.png"), auto;
}

img[src*="pimp-my.site"][src*="halloween2.gif"],
img[src*="partycles"][src*="halloween2.gif"] {
    cursor: url("../img/ujjina-navidad/cursors/halloween/cursor-1.svg"), url("../img/ujjina-navidad/cursors/halloween/cursor-1.png"), auto;
}

img[src*="pimp-my.site"][src*="halloween3.gif"],
img[src*="pimp-my.site"][src*="halloween4.gif"],
img[src*="partycles"][src*="halloween3.gif"],
img[src*="partycles"][src*="halloween4.gif"] {
    cursor: url("../img/ujjina-navidad/cursors/halloween/cursor-5.svg"), url("../img/ujjina-navidad/cursors/halloween/cursor-5.png"), auto;
}

img[src*="pimp-my.site"][src*="halloween5.gif"],
img[src*="partycles"][src*="halloween5.gif"] {
    cursor: url("../img/ujjina-navidad/cursors/halloween/cursor-6.svg"), url("../img/ujjina-navidad/cursors/halloween/cursor-6.png"), auto;
}

img[src*="pimp-my.site"][src*="halloween6.gif"],
img[src*="partycles"][src*="halloween6.gif"] {
    cursor: url("../img/ujjina-navidad/cursors/halloween/cursor-4.svg"), url("../img/ujjina-navidad/cursors/halloween/cursor-4.png"), auto;
}

img[src*="pimp-my.site"][src*="halloween7.gif"],
img[src*="partycles"][src*="halloween7.gif"] {
    cursor: url("../img/ujjina-navidad/cursors/halloween/cursor-3.svg"), url("../img/ujjina-navidad/cursors/halloween/cursor-3.png"), auto;
}

/* Cursores para imágenes con nombres específicos de Thanksgiving */
img[src*="pimp-my.site"][src*="thanksgiving1.gif"],
img[src*="partycles"][src*="thanksgiving1.gif"] {
    cursor: url("../img/ujjina-navidad/cursors/thanksgiving/cursor-4.svg"), url("../img/ujjina-navidad/cursors/thanksgiving/cursor-4.png"), auto;
}

img[src*="pimp-my.site"][src*="thanksgiving2.gif"],
img[src*="partycles"][src*="thanksgiving2.gif"] {
    cursor: url("../img/ujjina-navidad/cursors/thanksgiving/cursor-2.svg"), url("../img/ujjina-navidad/cursors/thanksgiving/cursor-2.png"), auto;
}

img[src*="pimp-my.site"][src*="thanksgiving3.gif"],
img[src*="partycles"][src*="thanksgiving3.gif"] {
    cursor: url("../img/ujjina-navidad/cursors/thanksgiving/cursor-1.svg"), url("../img/ujjina-navidad/cursors/thanksgiving/cursor-1.png"), auto;
}

img[src*="pimp-my.site"][src*="thanksgiving4.gif"],
img[src*="partycles"][src*="thanksgiving4.gif"] {
    cursor: url("../img/ujjina-navidad/cursors/thanksgiving/cursor-3.svg"), url("../img/ujjina-navidad/cursors/thanksgiving/cursor-3.png"), auto;
}

/* Cursores para imágenes con nombres específicos de Valentine's Day */
img[src*="pimp-my.site"][src*="Valentines-Day-1.gif"],
img[src*="partycles"][src*="Valentines-Day-1.gif"] {
    cursor: url("../img/ujjina-navidad/cursors/valentine/cursor-6.svg"), url("../img/ujjina-navidad/cursors/valentine/cursor-6.png"), auto;
}

img[src*="pimp-my.site"][src*="Valentines-Day-2.gif"],
img[src*="partycles"][src*="Valentines-Day-2.gif"] {
    cursor: url("../img/ujjina-navidad/cursors/valentine/cursor-3.svg"), url("../img/ujjina-navidad/cursors/valentine/cursor-3.png"), auto;
}

img[src*="pimp-my.site"][src*="Valentines-Day-3.gif"],
img[src*="partycles"][src*="Valentines-Day-3.gif"] {
    cursor: url("../img/ujjina-navidad/cursors/valentine/cursor-2.svg"), url("../img/ujjina-navidad/cursors/valentine/cursor-2.png"), auto;
}

img[src*="pimp-my.site"][src*="Valentines-Day-4.gif"],
img[src*="partycles"][src*="Valentines-Day-4.gif"] {
    cursor: url("../img/ujjina-navidad/cursors/valentine/cursor-5.svg"), url("../img/ujjina-navidad/cursors/valentine/cursor-5.png"), auto;
}

img[src*="pimp-my.site"][src*="Valentines-Day-5.gif"],
img[src*="partycles"][src*="Valentines-Day-5.gif"] {
    cursor: url("../img/ujjina-navidad/cursors/valentine/cursor-1.svg"), url("../img/ujjina-navidad/cursors/valentine/cursor-1.png"), auto;
}

/* Ajustes para el contenedor y superposición de FF */
div.ff-container .ff-overlay {
    /* Ajusta el tamaño de fondo de la superposición */
    background-size: 40% !important;
}