/* =========================================================
   ULTRAPC - HEADER
   ========================================================= */


/* =========================================================
   LOGO AZUL METÁLICO
   UltraPC + símbolo ®
   ========================================================= */


/* Contenedor del logo */
.header-site-branding .header-logo-link {
    position: relative;
    display: inline-block;
    overflow: visible !important;
}

.header-site-branding svg {
    overflow: visible !important;
}


/* =========================================================
   ULTRAPC
   ========================================================= */

.header-site-branding svg #UltraPC path {
    fill: #003EB2 !important;

    filter:
        saturate(1.15)
        contrast(1.08)
        drop-shadow(0 1px 0 rgba(255,255,255,0.30))
        drop-shadow(0 2px 2px rgba(0,25,90,0.28));

    transition:
        filter 0.3s ease,
        fill 0.3s ease;
}


/* =========================================================
   SÍMBOLO ®
   ========================================================= */

.header-site-branding svg #R-2 text {
    fill: #003EB2 !important;

    filter:
        saturate(1.15)
        contrast(1.08)
        drop-shadow(0 1px 0 rgba(255,255,255,0.30))
        drop-shadow(0 2px 2px rgba(0,25,90,0.28));
}

.header-site-branding svg #R-2 circle {
    stroke: #003EB2 !important;

    filter:
        saturate(1.15)
        contrast(1.08)
        drop-shadow(0 1px 0 rgba(255,255,255,0.30))
        drop-shadow(0 2px 2px rgba(0,25,90,0.28));
}


/* =========================================================
   REFLEJO METÁLICO
   ========================================================= */

.header-site-branding .header-logo-link::after {
    content: "";

    position: absolute;

    top: 0;
    left: -35%;

    width: 18%;
    height: 68%;

    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255,255,255,0) 20%,
        rgba(255,255,255,0.18) 35%,
        rgba(255,255,255,0.70) 50%,
        rgba(255,255,255,0.18) 65%,
        rgba(255,255,255,0) 80%,
        transparent 100%
    );

    transform: skewX(-18deg);

    mix-blend-mode: screen;

    pointer-events: none;

    z-index: 10;

    animation: ultrapc-metal-shine 6s ease-in-out infinite;
}


/* =========================================================
   ANIMACIÓN DEL REFLEJO
   ========================================================= */

@keyframes ultrapc-metal-shine {

    0%,
    68% {
        left: -35%;
        opacity: 0;
    }

    72% {
        opacity: 1;
    }

    92% {
        left: 115%;
        opacity: 1;
    }

    100% {
        left: 115%;
        opacity: 0;
    }
}