/* ====================================
   PROMOTIONAL BANNER UNIFIED - CSS EXCLUSIVO
   Sistema completo e organizado do promotional banner
   ==================================== */

/* ====================================
   PROMOTIONAL BANNER - SEÇÃO PRINCIPAL
   ==================================== */
.promotional-banner {
  position: relative;
  padding: 25px 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

/* Container da imagem */
.promotional-banner > div {
  width: 100%;
  max-width: 800px;
  display: flex;
  justify-content: center;
}

/* Imagem principal do banner promocional */
.promotional-banner img {
  width: 100%;
  max-width: 500px;
  height: auto;
  display: block;
  max-height: 140px;
  object-fit: contain;
  object-position: center;
  border-radius: 12px;
  box-shadow: 0 15px 30px rgba(10, 29, 74, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efeito hover na imagem */
.promotional-banner img:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(10, 29, 74, 0.18);
}

/* Efeitos visuais - bolhas de sabão animadas */
.promotional-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 25%, rgba(39, 195, 216, 0.25) 6px, transparent 10px),
    radial-gradient(circle at 85% 30%, rgba(255, 255, 255, 0.4) 10px, transparent 14px),
    radial-gradient(circle at 35% 75%, rgba(39, 195, 216, 0.2) 8px, transparent 12px),
    radial-gradient(circle at 75% 70%, rgba(255, 255, 255, 0.35) 5px, transparent 9px),
    radial-gradient(circle at 20% 60%, rgba(125, 245, 210, 0.3) 7px, transparent 11px),
    radial-gradient(circle at 90% 85%, rgba(255, 255, 255, 0.45) 9px, transparent 13px),
    radial-gradient(circle at 55% 20%, rgba(39, 195, 216, 0.15) 4px, transparent 8px),
    radial-gradient(circle at 10% 85%, rgba(255, 255, 255, 0.3) 11px, transparent 15px),
    radial-gradient(circle at 70% 45%, rgba(125, 245, 210, 0.25) 6px, transparent 10px),
    radial-gradient(circle at 45% 55%, rgba(255, 255, 255, 0.38) 8px, transparent 12px);
  animation: promotionalBubbles1 15s ease-in-out infinite;
  z-index: 1;
}

.promotional-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 25% 40%, rgba(255, 255, 255, 0.35) 5px, transparent 9px),
    radial-gradient(circle at 80% 15%, rgba(39, 195, 216, 0.2) 9px, transparent 13px),
    radial-gradient(circle at 50% 85%, rgba(255, 255, 255, 0.4) 7px, transparent 11px),
    radial-gradient(circle at 5% 50%, rgba(125, 245, 210, 0.35) 6px, transparent 10px),
    radial-gradient(circle at 95% 60%, rgba(255, 255, 255, 0.3) 10px, transparent 14px),
    radial-gradient(circle at 60% 10%, rgba(39, 195, 216, 0.25) 4px, transparent 8px),
    radial-gradient(circle at 30% 90%, rgba(255, 255, 255, 0.42) 8px, transparent 12px),
    radial-gradient(circle at 85% 75%, rgba(125, 245, 210, 0.2) 5px, transparent 9px),
    radial-gradient(circle at 15% 10%, rgba(255, 255, 255, 0.45) 11px, transparent 15px),
    radial-gradient(circle at 65% 65%, rgba(39, 195, 216, 0.3) 7px, transparent 11px);
  animation: promotionalBubbles2 18s ease-in-out infinite reverse;
  z-index: 1;
}

/* Animações das bolhas */
@keyframes promotionalBubbles1 {
  0%, 100% {
    transform: scale(1) rotate(0deg) translateY(0px);
    opacity: 0.7;
  }
  25% {
    transform: scale(1.15) rotate(90deg) translateY(-5px);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.3) rotate(180deg) translateY(-8px);
    opacity: 1;
  }
  75% {
    transform: scale(1.15) rotate(270deg) translateY(-5px);
    opacity: 0.9;
  }
}

@keyframes promotionalBubbles2 {
  0%, 100% {
    transform: scale(0.9) rotate(0deg) translateX(0px);
    opacity: 0.6;
  }
  30% {
    transform: scale(1.1) rotate(-120deg) translateX(3px);
    opacity: 0.85;
  }
  60% {
    transform: scale(1.25) rotate(-240deg) translateX(6px);
    opacity: 1;
  }
  90% {
    transform: scale(1.05) rotate(-360deg) translateX(3px);
    opacity: 0.75;
  }
}

/* ====================================
   RESPONSIVIDADE
   ==================================== */

/* Tablet */
@media (max-width: 1024px) {
  .promotional-banner {
    padding: 20px 15px;
  }

  .promotional-banner > div {
    max-width: 700px;
  }

  .promotional-banner img {
    max-width: 450px;
    max-height: 130px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .promotional-banner {
    padding: 18px 15px;
  }

  .promotional-banner > div {
    max-width: 600px;
  }

  .promotional-banner img {
    max-width: 100%;
    max-height: 120px;
    border-radius: 10px;
  }
}

/* Mobile pequeno */
@media (max-width: 480px) {
  .promotional-banner {
    padding: 15px 10px;
  }

  .promotional-banner > div {
    max-width: 500px;
  }

  .promotional-banner img {
    max-height: 100px;
    border-radius: 8px;
  }
}

/* ====================================
   COMPATIBILIDADE COM SISTEMA ANTIGO
   ==================================== */

/* Suporte para classe .promo-panel (sistema antigo) */
.promo-panel {
  padding: 0 0 40px 0;
  position: relative;
  overflow: hidden;
}

.promo-panel img {
  max-height: 140px;
  border-radius: 12px;
}

/* Responsive para sistema antigo */
@media (max-width: 768px) {
  .promo-panel {
    margin: -30px 0 0 0;
    padding: 0 20px;
  }

  .promo-panel img {
    max-height: 120px;
    border-radius: 10px;
  }
}