* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: transparent;
    font-family: Arial, sans-serif;
}

.contenedor-animacion {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
}

/* Contenedor de las 3 publicidades */
.barra-publicidad {
    position: absolute;
    left: 0;
    bottom: 45px;

    width: 100%;
    padding: 0 55px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
}

/* Caja de cada publicidad */
.panel-logo {
    position: relative;

    width: clamp(280px, 28vw, 420px);
    height: clamp(95px, 8vw, 135px);

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

    overflow: hidden;
    border-radius: 18px;

    background: linear-gradient(
        120deg,
        #020617 0%,
        #0f172a 40%,
        #0284c7 75%,
        #020617 100%
    );

    box-shadow:
        0 0 28px rgba(14, 165, 233, 0.75),
        inset 0 0 20px rgba(255, 255, 255, 0.10);

    opacity: 0;
    transform: translateY(180px);
}

/* Líneas diagonales deportivas */
.lineas {
    position: absolute;
    inset: 0;

    background: repeating-linear-gradient(
        120deg,
        transparent 0px,
        transparent 23px,
        rgba(255, 255, 255, 0.12) 24px,
        rgba(255, 255, 255, 0.12) 27px
    );

    animation: moverLineas 3s linear infinite;
    z-index: 1;
}

/* Logo */
.logo {
    position: relative;
    z-index: 2;

    width: 98%;
    max-height: 95%;
    object-fit: contain;

    filter:
        drop-shadow(0 0 8px rgba(56, 189, 248, 0.8))
        drop-shadow(0 0 16px rgba(14, 165, 233, 0.4));
}

/* Brillo */
.brillo {
    position: absolute;
    top: 0;
    left: -140px;

    width: 90px;
    height: 100%;

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

    transform: skewX(-25deg);
    opacity: 0;
    z-index: 3;
}

/* Mostrar publicidades */
.panel-logo.mostrar {
    animation: entrarPanel 1s ease-out forwards;
}

.panel-logo.mostrar .logo {
    animation: entrarLogo 1s ease-out forwards;
}

.panel-logo.mostrar .brillo {
    animation: pasarBrillo 1.2s ease-in-out forwards 1s;
}

/* Ocultar publicidades */
.panel-logo.ocultar {
    animation: salirPanel 1s ease-in forwards;
}

/* Entrada desde abajo */
@keyframes entrarPanel {
    from {
        transform: translateY(180px);
        opacity: 0;
        filter: blur(10px);
    }

    to {
        transform: translateY(0);
        opacity: 1;
        filter: blur(0);
    }
}

/* Salida hacia abajo */
@keyframes salirPanel {
    from {
        transform: translateY(0);
        opacity: 1;
        filter: blur(0);
    }

    to {
        transform: translateY(180px);
        opacity: 0;
        filter: blur(8px);
    }
}

/* Entrada del logo */
@keyframes entrarLogo {
    from {
        transform: scale(0.6);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Brillo */
@keyframes pasarBrillo {
    0% {
        left: -140px;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        left: 520px;
        opacity: 0;
    }
}

/* Movimiento de líneas */
@keyframes moverLineas {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 240px 0;
    }
}

/* Pantallas pequeñas */
@media screen and (max-width: 900px) {
    .barra-publicidad {
        bottom: 25px;
        padding: 0 20px;
        gap: 12px;
    }

    .panel-logo {
        width: 31%;
        height: 85px;
        border-radius: 12px;
    }

    .logo {
        width: 85%;
        max-height: 70%;
    }
}