/* =========================================================
   ULTRAPC - CAMPAÑAS Y ETIQUETAS PROMOCIONALES
   ========================================================= */


/* =========================================================
   DÍA DEL PADRE
   ========================================================= */

/* Catálogo / miniaturas */
.archive #día-del-padre,
.home #día-del-padre,
.tax-product_cat #día-del-padre,
.woocommerce-shop #día-del-padre {
    position: absolute;
    top: 1px;
    left: 100px;

    display: inline-block;

    padding: 3px 6px;

    background: linear-gradient(135deg, #0d47a1, #1976d2);
    color: #fff;

    border-radius: 5px;

    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;

    box-shadow: 0 2px 8px rgba(30,136,229,.4);

    animation: ultrapc-pulse-promo 2s infinite;
}


/* Ficha de producto */
.single-product #día-del-padre {
    display: inline-block;

    padding: 5px 10px;

    background: linear-gradient(135deg, #0d47a1, #1976d2);
    color: #fff;

    border-radius: 6px;

    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;

    box-shadow: 0 2px 8px rgba(30,136,229,.4);

    animation: ultrapc-pulse-promo 2s infinite;
}


#día-del-padre::before {
    content: "👔 ";
}


/* =========================================================
   PORCENTAJE / OFERTA
   ========================================================= */

.onsale {
    width: 75px !important;
    height: 75px !important;

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

    background: linear-gradient(135deg, #ff0000, #ff4d4d) !important;
    color: #fff !important;

    border-radius: 50% !important;

    font-size: 14px !important;
    font-weight: 800 !important;

    box-shadow: 0 4px 12px rgba(255,0,0,.4) !important;

    animation: ultrapc-pulse-promo 2s infinite;
}


.porcentaje {
    width: 25px !important;
    height: 25px !important;

    align-items: center !important;
    justify-content: center !important;

    background: linear-gradient(135deg, #ff0000, #ff4d4d) !important;
    color: #fff !important;

    border-radius: 50% !important;

    font-size: 14px !important;
    font-weight: 800 !important;

    box-shadow: 0 4px 12px rgba(255,0,0,.4) !important;

    animation: ultrapc-pulse-promo 2s infinite;
}


@keyframes ultrapc-pulse-promo {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

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


/* =========================================================
   DÍA DEL NIÑO
   ========================================================= */


/* =========================================================
   CATÁLOGO / MINIATURAS
   ========================================================= */

.archive #día-del-niño,
.home #día-del-niño,
.tax-product_cat #día-del-niño,
.woocommerce-shop #día-del-niño {
    position: absolute;

    top: 2px;
    left: 95px;

    z-index: 100;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    overflow: hidden;

    padding: 5px 12px;

    color: #ffffff;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;

    background:
        linear-gradient(
            135deg,
            rgba(5,12,30,.96) 0%,
            rgba(12,28,58,.96) 55%,
            rgba(8,18,42,.96) 100%
        );

    border: 1px solid rgba(0,200,255,.65);

    clip-path: polygon(
        8px 0,
        100% 0,
        100% calc(100% - 8px),
        calc(100% - 8px) 100%,
        0 100%,
        0 8px
    );

    box-shadow:
        inset 0 0 18px rgba(0,200,255,.20),
        inset 0 0 30px rgba(208,0,255,.10),
        0 0 8px rgba(0,200,255,.90),
        0 0 18px rgba(0,200,255,.60),
        0 0 25px rgba(208,0,255,.40),
        0 0 40px rgba(208,0,255,.20);

    animation: ultrapc-dia-nino-glow 2.8s ease-in-out infinite;
}


/* =========================================================
   FICHA DE PRODUCTO
   ========================================================= */

.single-product #día-del-niño {
    position: relative;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    overflow: hidden;

    padding: 8px 16px;

    color: #fff;

    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;

    background:
        linear-gradient(
            135deg,
            rgba(5,12,30,.96) 0%,
            rgba(12,28,58,.96) 55%,
            rgba(8,18,42,.96) 100%
        );

    border: 1px solid rgba(0,200,255,.65);

    clip-path: polygon(
        10px 0,
        100% 0,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        0 100%,
        0 10px
    );

    box-shadow:
        inset 0 0 18px rgba(0,200,255,.20),
        inset 0 0 30px rgba(208,0,255,.10),
        0 0 8px rgba(0,200,255,.90),
        0 0 18px rgba(0,200,255,.60),
        0 0 25px rgba(208,0,255,.40),
        0 0 40px rgba(208,0,255,.20);

    animation: ultrapc-dia-nino-glow 2.8s ease-in-out infinite;
}


/* Icono */
#día-del-niño::before {
    content: "🎁";

    font-size: 1.15em;

    filter:
        drop-shadow(0 0 5px #00C8FF)
        drop-shadow(0 0 12px #00C8FF)
        drop-shadow(0 0 22px #D000FF);
}


/* Destello */
#día-del-niño::after {
    content: "";

    position: absolute;

    top: -60%;
    left: -45%;

    width: 35%;
    height: 230%;

    transform: rotate(25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.45),
            transparent
        );

    animation: ultrapc-dia-nino-shine 3.5s linear infinite;
}


/* Línea RGB */
.archive #día-del-niño,
.single-product #día-del-niño {
    border-bottom: 2px solid transparent;

    border-image:
        linear-gradient(
            90deg,
            #00C8FF,
            #4D71FF,
            #D000FF
        ) 1;
}


/* =========================================================
   ANIMACIONES DÍA DEL NIÑO
   ========================================================= */

@keyframes ultrapc-dia-nino-glow {

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

        box-shadow:
            inset 0 0 18px rgba(0,200,255,.20),
            inset 0 0 30px rgba(208,0,255,.10),
            0 0 10px rgba(0,200,255,.70),
            0 0 18px rgba(0,200,255,.50),
            0 0 25px rgba(208,0,255,.35);
    }

    50% {
        transform: scale(1.05);

        box-shadow:
            inset 0 0 25px rgba(0,200,255,.35),
            inset 0 0 45px rgba(208,0,255,.18),
            0 0 15px rgba(0,200,255,1),
            0 0 30px rgba(0,200,255,.80),
            0 0 40px rgba(208,0,255,.70),
            0 0 60px rgba(208,0,255,.35);
    }
}


@keyframes ultrapc-dia-nino-shine {

    from {
        left: -45%;
    }

    to {
        left: 135%;
    }
}