/* Tailwind + modal PIX — compatibilidade com [hidden] */
#checkoutModal[hidden] {
  display: none !important;
}

#pixResult[hidden],
#pixQrWrap[hidden],
.checkout-form[hidden],
#pixPayBlock[hidden],
#pixLoadingRow[hidden] {
  display: none !important;
}

#pixPayBlock:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

#pixQrWrap:not([hidden]) {
  display: flex;
  justify-content: center;
  background: #fff;
  border-radius: 0.75rem;
  padding: 0.75rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

#pixQrWrap img {
  max-width: 240px;
  height: auto;
}

#pixCopy {
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(17, 24, 39, 0.8);
  color: #fff;
  padding: 0.875rem;
  font-size: 0.8rem;
  resize: vertical;
  min-height: 5rem;
  line-height: 1.45;
}

.pix-loading {
  text-align: center;
  color: #9ca3af;
  padding: 1.5rem 0.5rem;
  margin: 0;
}

#checkoutError:not([hidden]) {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: #fda4af;
}

/* Profundidade sutil no body */
body {
  background-color: #030712;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(168, 85, 247, 0.22), transparent),
    radial-gradient(ellipse 60% 40% at 100% 50%, rgba(236, 72, 153, 0.08), transparent),
    radial-gradient(ellipse 50% 30% at 0% 80%, rgba(139, 92, 246, 0.1), transparent);
  background-attachment: fixed;
}

/* FAQ — detalhes nativos */
.faq-details summary {
  list-style: none;
}
.faq-details summary::-webkit-details-marker {
  display: none;
}
.faq-details[open] summary .faq-chevron {
  transform: rotate(180deg);
}

/* Pulso leve no CTA principal do hero (só primeira âncora hero) */
@keyframes cta-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.45), 0 10px 40px -10px rgba(236, 72, 153, 0.5);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(236, 72, 153, 0), 0 14px 50px -8px rgba(168, 85, 247, 0.45);
  }
}
.hero-cta-primary {
  animation: cta-glow 2.8s ease-in-out infinite;
}

/* Barra fixa mobile — leve entrada */
@keyframes mobile-cta-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.mobile-cta-bar {
  animation: mobile-cta-in 0.45s ease-out both;
}

/* Hover lift nos cards de plano */
@media (hover: hover) {
  .plan-card-hover:hover {
    transform: translateY(-4px);
    border-color: rgba(236, 72, 153, 0.35);
  }
}