/* PROSPERA — estilos base y utilidades premium */
:root {
  --gold: #d4af37;
  --gold-soft: #f0d78c;
  --money: #00c853;
}

html { scroll-behavior: smooth; scroll-padding-top: 6.5rem; }
body { background-color: #080808; }

.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 20px 60px -25px rgba(0, 0, 0, 0.9);
  transition: transform .3s ease, border-color .3s ease;
}
.glass:hover { transform: translateY(-4px); border-color: rgba(212, 175, 55, .35); }

.shadow-gold { box-shadow: 0 24px 70px -30px rgba(212, 175, 55, .55); }
.shadow-green { box-shadow: 0 18px 45px -20px rgba(0, 200, 83, .6); }

.gold-text {
  background: linear-gradient(135deg, var(--gold-soft), #c99b2f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 60% at 50% 0%, rgba(212, 175, 55, .18), transparent 70%);
}

/* Animación de aparición al hacer scroll (mejora progresiva).
   Por defecto el contenido es visible SIEMPRE. Recién se oculta para
   animar cuando script.js confirmó que puede controlar toda la
   secuencia (agrega html.js-ready y .will-animate a cada nodo).
   Si el script tarda, falla o el navegador lo bloquea, nada se oculta:
   el contenido se ve igual, sin animación. */
.reveal { opacity: 1; transform: none; }
html.js-ready .reveal.will-animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
html.js-ready .reveal.will-animate[data-visible="true"] { opacity: 1; transform: none; }

/* Acordeón FAQ */
.faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.faq-item[data-open="true"] .faq-body { grid-template-rows: 1fr; }
.faq-item[data-open="true"] .faq-plus { transform: rotate(45deg); }
.faq-plus { transition: transform .3s ease; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}