:root {
  --ancho-logo: 700px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}

.contenedor-publicidad {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1200px;
  pointer-events: none;
  z-index: 9999;
}

/* PLACA TIPO TRANSMISIÓN MUNDIALISTA */
.contenedor-publicidad::before {
  content: "";
  position: absolute;
  width: 760px;
  height: 300px;
  opacity: 0;
  border-radius: 34px;
  clip-path: polygon(7% 0%, 100% 0%, 93% 100%, 0% 100%);
  background:
    linear-gradient(135deg,
      rgba(0, 190, 255, 0.42),
      rgba(8, 18, 55, 0.72) 38%,
      rgba(240, 190, 60, 0.48) 72%,
      rgba(255, 255, 255, 0.22)
    );
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 0 35px rgba(0, 195, 255, 0.45),
    0 0 70px rgba(245, 190, 60, 0.35),
    inset 0 0 30px rgba(255, 255, 255, 0.18);
  transform: scale(0.65) rotateX(55deg);
}

.contenedor-publicidad.activo::before {
  animation: placaMundialEntrada 950ms ease-out forwards,
             placaMundialPulso 2600ms ease-in-out 950ms infinite;
}

.contenedor-publicidad.saliendo::before {
  animation: placaMundialSalida 850ms ease-in forwards;
}

.logo-publicidad {
  position: absolute;
  width: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
  opacity: 0;
  z-index: 3;
  transform-origin: center;
  filter:
    drop-shadow(0 18px 25px rgba(0, 0, 0, 0.65))
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.25));
}

/* ENTRADA ESTILO MUNDIAL */
.entrada {
  animation: entradaMundial 1050ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* SALIDA ESTILO MUNDIAL */
.salida {
  animation: salidaMundial 850ms cubic-bezier(0.7, 0, 0.84, 0) forwards;
}

@keyframes entradaMundial {
  0% {
    opacity: 0;
    transform:
      translateY(-180px)
      scale(0.35)
      rotateX(75deg)
      rotateZ(-8deg);
    filter:
      blur(12px)
      brightness(1.7)
      drop-shadow(0 18px 25px rgba(0, 0, 0, 0.65));
  }

  45% {
    opacity: 1;
    transform:
      translateY(18px)
      scale(1.14)
      rotateX(-10deg)
      rotateZ(2deg);
    filter:
      blur(0)
      brightness(1.25)
      drop-shadow(0 18px 25px rgba(0, 0, 0, 0.65));
  }

  72% {
    transform:
      translateY(-6px)
      scale(0.96)
      rotateX(5deg)
      rotateZ(-1deg);
  }

  100% {
    opacity: 1;
    transform:
      translateY(0)
      scale(1)
      rotateX(0)
      rotateZ(0);
    filter:
      blur(0)
      brightness(1)
      drop-shadow(0 18px 25px rgba(0, 0, 0, 0.65))
      drop-shadow(0 0 18px rgba(255, 255, 255, 0.25));
  }
}

@keyframes salidaMundial {
  0% {
    opacity: 1;
    transform:
      translateY(0)
      scale(1)
      rotateX(0)
      rotateZ(0);
    filter:
      blur(0)
      brightness(1)
      drop-shadow(0 18px 25px rgba(0, 0, 0, 0.65));
  }

  35% {
    opacity: 1;
    transform:
      translateY(0)
      scale(1.12)
      rotateX(0)
      rotateZ(0);
    filter:
      blur(0)
      brightness(1.4)
      drop-shadow(0 18px 25px rgba(0, 0, 0, 0.65));
  }

  100% {
    opacity: 0;
    transform:
      translateY(170px)
      scale(0.38)
      rotateX(-75deg)
      rotateZ(8deg);
    filter:
      blur(12px)
      brightness(1.7)
      drop-shadow(0 18px 25px rgba(0, 0, 0, 0.65));
  }
}

@keyframes placaMundialEntrada {
  0% {
    opacity: 0;
    transform: scale(0.45) rotateX(65deg) rotateZ(-8deg);
  }

  65% {
    opacity: 1;
    transform: scale(1.08) rotateX(-6deg) rotateZ(1deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotateX(0) rotateZ(0);
  }
}

@keyframes placaMundialPulso {
  0%, 100% {
    box-shadow:
      0 0 35px rgba(0, 195, 255, 0.45),
      0 0 70px rgba(245, 190, 60, 0.35),
      inset 0 0 30px rgba(255, 255, 255, 0.18);
  }

  50% {
    box-shadow:
      0 0 48px rgba(0, 195, 255, 0.65),
      0 0 90px rgba(245, 190, 60, 0.5),
      inset 0 0 40px rgba(255, 255, 255, 0.24);
  }
}

@keyframes placaMundialSalida {
  0% {
    opacity: 1;
    transform: scale(1) rotateX(0) rotateZ(0);
  }

  100% {
    opacity: 0;
    transform: scale(0.45) rotateX(-65deg) rotateZ(8deg);
  }
}