/* Shiny CTA adapted to the site's static HTML and brand palette. */
@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@property --gradient-angle-offset {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@property --gradient-percent {
  syntax: "<percentage>";
  initial-value: 5%;
  inherits: false;
}
@property --gradient-shine {
  syntax: "<color>";
  initial-value: #E6FFEF;
  inherits: false;
}
.btn-main.shiny-cta {
  --gradient-angle: 0deg;
  --gradient-angle-offset: 0deg;
  --gradient-percent: 5%;
  --gradient-shine: #E6FFEF;
  --shiny-highlight: var(--teal);
  isolation: isolate;
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  color: var(--chalk);
  background: linear-gradient(#0B1A10, #0B1A10) padding-box,
    conic-gradient(
      from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
      #1F4A2E,
      var(--shiny-highlight) var(--gradient-percent),
      var(--gradient-shine) calc(var(--gradient-percent) * 2),
      var(--shiny-highlight) calc(var(--gradient-percent) * 3),
      #1F4A2E calc(var(--gradient-percent) * 4)
    ) border-box;
  box-shadow: inset 0 0 0 1px rgba(61, 255, 143, .08);
  animation: cta-gradient 4s linear infinite;
  transition: --gradient-angle-offset .8s, --gradient-percent .8s,
    --gradient-shine .8s, transform .2s, box-shadow .3s;
}
.shiny-cta::before,
.shiny-cta::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}
.shiny-cta::before {
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border-radius: inherit;
  background: radial-gradient(circle at 2px 2px, #E6FFEF .5px, transparent .6px);
  background-size: 4px 4px;
  mask-image: conic-gradient(from calc(var(--gradient-angle) + 45deg), black, transparent 10% 90%, black);
  opacity: .24;
  animation: cta-gradient 4s linear infinite;
}
.shiny-cta::after {
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(-50deg, transparent 35%, var(--shiny-highlight), transparent 65%);
  mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  opacity: .18;
  animation: cta-shimmer 6s linear infinite;
}
.shiny-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  z-index: 1;
}
.shiny-content::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  box-shadow: inset 0 -10px 24px rgba(61, 255, 143, .22);
  opacity: 0;
  transition: opacity .8s;
  animation: cta-breathe 6s linear infinite;
}
.btn-main.shiny-cta:is(:hover, :focus-visible) {
  --gradient-percent: 20%;
  --gradient-angle-offset: 95deg;
  --gradient-shine: #A6F5C6;
  box-shadow: 0 8px 30px -12px rgba(61, 255, 143, .45);
}
.shiny-cta:is(:hover, :focus-visible) .shiny-content::before { opacity: 1; }
.shiny-cta:active { translate: 0 1px; }
@keyframes cta-gradient { to { --gradient-angle: 360deg; } }
@keyframes cta-shimmer { to { rotate: 360deg; } }
@keyframes cta-breathe { 50% { scale: 1.15; } }

/* Banner final: só preto, com borda discreta (sem luz verde). */
.final {
  position: relative;
  background: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
  .shiny-cta, .shiny-cta::before, .shiny-cta::after,
  .shiny-content::before {
    animation: none !important;
    transition: none !important;
  }
  .btn-main.shiny-cta:hover { transform: none; }
}