﻿/* ============================================================
   PREVIAS DE EVENTOS - CTA GUIAS
   Barra destacada + botao animado
   ============================================================ */

.compact-guides{
  position:relative!important;
  overflow:hidden!important;
  padding:42px 0!important;
  background:
    radial-gradient(circle at 82% 30%,rgba(139,92,246,.34),transparent 26%),
    radial-gradient(circle at 18% 80%,rgba(45,159,255,.22),transparent 30%),
    linear-gradient(115deg,#123b6f 0%,#2456a6 45%,#6547d8 100%)!important;
  border-top:1px solid rgba(255,255,255,.12)!important;
  border-bottom:1px solid rgba(255,255,255,.12)!important;
}

.compact-guides:before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:
    linear-gradient(120deg,transparent 0 32%,rgba(255,255,255,.08) 43%,transparent 54%),
    radial-gradient(rgba(255,255,255,.22) .7px,transparent .7px)!important;
  background-size:auto,26px 26px!important;
  animation:guidesBgMove 12s linear infinite!important;
}

.compact-guides .container{
  position:relative!important;
  z-index:2!important;
}

.compact-guides .compact-kicker{
  color:#bfe9ff!important;
}

.compact-guides h2{
  color:#fff!important;
}

.compact-guides p{
  color:#e4ecfb!important;
}

/* CTA animado */
.compact-guide-btn{
  position:relative!important;
  overflow:hidden!important;
  min-width:205px!important;
  min-height:52px!important;
  background:linear-gradient(135deg,#ffffff,#e9f2ff)!important;
  color:#17345f!important;
  border:1px solid rgba(255,255,255,.7)!important;
  box-shadow:
    0 12px 30px rgba(6,20,43,.24),
    0 0 0 0 rgba(255,255,255,.35)!important;
  transform-origin:center!important;
  animation:
    guidesButtonFloat 2.2s ease-in-out infinite,
    guidesButtonPulse 2.2s ease-in-out infinite!important;
}

.compact-guide-btn::before{
  content:""!important;
  position:absolute!important;
  top:-40%!important;
  left:-55%!important;
  width:42%!important;
  height:180%!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent)!important;
  transform:rotate(18deg)!important;
  animation:guidesShine 2.8s ease-in-out infinite!important;
}

.compact-guide-btn::after{
  content:""!important;
  position:absolute!important;
  inset:-6px!important;
  border-radius:18px!important;
  border:2px solid rgba(255,255,255,.22)!important;
  opacity:0!important;
  animation:guidesRing 2.2s ease-out infinite!important;
  pointer-events:none!important;
}

.compact-guide-btn:hover{
  transform:translateY(-4px) scale(1.035)!important;
  box-shadow:0 18px 38px rgba(6,20,43,.3)!important;
}

@keyframes guidesButtonFloat{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-6px) scale(1.025)}
}

@keyframes guidesButtonPulse{
  0%,100%{
    box-shadow:
      0 12px 30px rgba(6,20,43,.24),
      0 0 0 0 rgba(255,255,255,.28)
  }
  50%{
    box-shadow:
      0 16px 34px rgba(6,20,43,.28),
      0 0 0 12px rgba(255,255,255,0)
  }
}

@keyframes guidesShine{
  0%,20%{left:-55%}
  55%,100%{left:130%}
}

@keyframes guidesRing{
  0%{opacity:.55;transform:scale(.94)}
  70%,100%{opacity:0;transform:scale(1.12)}
}

@keyframes guidesBgMove{
  0%{background-position:0 0,0 0}
  100%{background-position:160px 0,26px 26px}
}

@media(max-width:650px){
  .compact-guides{
    padding:34px 0!important;
  }
  .compact-guide-btn{
    width:100%!important;
    min-width:0!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .compact-guides:before,
  .compact-guide-btn,
  .compact-guide-btn::before,
  .compact-guide-btn::after{
    animation:none!important;
  }
}
