.hero-fido{
    padding:90px 0;
    overflow:hidden;
    background:

    radial-gradient(
        circle at 15% 15%,
        rgba(34,87,163,.30),
        transparent 35%
    ),

    radial-gradient(
        circle at 85% 75%,
        rgba(15,44,82,.75),
        transparent 45%
    ),

    radial-gradient(
        circle at 50% 0%,
        rgba(80,140,255,.10),
        transparent 55%
    ),

    radial-gradient(
        circle at 92% 18%,
        rgba(255,255,255,.05),
        transparent 28%
    ),

    linear-gradient(
        135deg,
        #020202,
        #0a0f18,
        #132235
    );
}

.hero-fido::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            120deg,
            transparent 0%,
            rgba(255,255,255,.03) 48%,
            rgba(255,255,255,.08) 50%,
            rgba(255,255,255,.03) 52%,
            transparent 100%
        );

    background-size:40px 40px;
    opacity:.35;
}
.hero-fido h1{
    font-weight:700;
}

.fido-badge{
    display:inline-block;
    margin-top:15px;
    padding:10px 18px;
    border-radius:30px;
    background:rgba(255,255,255,.15);
    color:#fff;
    font-size:15px;
    backdrop-filter:blur(8px);
}

.video-box{
    position:relative;
}

.video-box video{
    width:100%;
    border-radius:18px;
    box-shadow:0 25px 50px rgba(0,0,0,.35);
}


a{
    color:#ED1C24;
}

table,th,td{
    border:2px solid #000;
    border-collapse:collapse;
    padding:8px;
}

/* ---------- CONTENEDOR ---------- */

.logo-item{
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    animation:logoIn .8s cubic-bezier(.22,1,.36,1) forwards;
}

/* ---------- LOGO ---------- */

.img-hover{
    width:90%;
    transition:
        transform .45s ease,
        filter .45s ease;
    animation:logoFloat 5s ease-in-out infinite;
    will-change:transform;
}

/* velocidades distintas */

.logo-item:nth-child(2n) .img-hover{
    animation-duration:6.5s;
}

.logo-item:nth-child(3n) .img-hover{
    animation-duration:5.3s;
}

.logo-item:nth-child(4n) .img-hover{
    animation-duration:7.2s;
}

/* hover */

.logo-item:hover{
    z-index:10;
}

.logo-item:hover .img-hover{
    transform:scale(1.18) rotate(8deg);
}

/* atenúa los demás */

.row:hover .logo-item{
    opacity:.35;
    transition:opacity .3s;
}

.row:hover .logo-item:hover{
    opacity:1;
}

/* ---------- ANIMACIONES ---------- */

@keyframes logoIn{

    0%{
        opacity:0;
        transform:
            translateY(60px)
            scale(.4)
            rotate(-25deg);
    }

    60%{
        opacity:1;
    }

    100%{
        opacity:1;
        transform:
            translateY(0)
            scale(1)
            rotate(0);
    }

}

@keyframes logoFloat{

    0%{
        transform:
            translateY(0)
            rotate(0deg);
    }

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

    50%{
        transform:
            translateY(-14px)
            rotate(-2deg);
    }

    75%{
        transform:
            translateY(-6px)
            translateX(-4px)
            rotate(1deg);
    }

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

}