/* ==========================================================================
   Smart Money Guide — Animaciones, scroll-reveal, hover states
   ========================================================================== */

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

@keyframes bounce-hint {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(10px); opacity: 1; }
}

@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes book-float {
  0%, 100% { transform: rotateY(-28deg) rotateX(4deg) translateY(0); }
  50% { transform: rotateY(-28deg) rotateX(4deg) translateY(-10px); }
}

/* ---- Scroll reveal ---- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.topics-grid .reveal:nth-child(2) { transition-delay: 0.06s; }
.topics-grid .reveal:nth-child(3) { transition-delay: 0.12s; }
.topics-grid .reveal:nth-child(4) { transition-delay: 0.18s; }
.topics-grid .reveal:nth-child(5) { transition-delay: 0.24s; }
.topics-grid .reveal:nth-child(6) { transition-delay: 0.3s; }

.testimonials-grid .reveal:nth-child(2) { transition-delay: 0.08s; }
.testimonials-grid .reveal:nth-child(3) { transition-delay: 0.16s; }

/* ---- Elementos animados de forma continua ---- */

.badge-dot {
  animation: pulse-dot 2.4s ease-in-out infinite;
}

.scroll-hint span {
  animation: bounce-hint 1.8s ease-in-out infinite;
}

.book {
  animation: book-float 6s ease-in-out infinite;
}

/* ---- Toast ---- */

.toast.is-visible {
  animation: toast-in 0.4s var(--ease) forwards;
}

/* ---- Transiciones base ---- */

a,
.btn,
.topic-card,
.price-card,
.testimonial-card,
.issue-item,
.accordion-trigger,
.brand-mark,
.link-arrow,
.split-piece,
input {
  transition: all 0.35s var(--ease);
}

.accordion-panel {
  transition: max-height 0.45s var(--ease);
}

/* ---- Hover: navegación ---- */

.nav-links a {
  position: relative;
  font-size: 0.88rem;
  color: var(--cream-dim);
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 1px;
  background: var(--gold);
  transition: width 0.3s var(--ease);
}

.nav-links a:hover {
  color: var(--cream);
}

.nav-links a:hover::after {
  width: 100%;
}

.footer-col a:hover {
  color: var(--gold-light);
}

/* ---- Hover: botones ---- */

.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(201, 169, 97, 0.35);
}

.btn-outline:hover {
  border-color: var(--gold);
  color: var(--gold-light);
  background: rgba(201, 169, 97, 0.06);
}

/* ---- Hover: tarjetas ---- */

.topic-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-gold-strong);
  box-shadow: var(--shadow-gold);
}

.topic-card:hover .topic-icon {
  color: var(--gold-light);
}

.price-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-gold-strong);
}

.testimonial-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-gold-strong);
}

.issue-item:hover {
  border-color: var(--border-gold-strong);
  padding-left: 8px;
}

.issue-item:hover .issue-number {
  color: var(--gold-light);
}

.split-visual:hover .split-piece {
  transform: scale(1.08) rotate(-3deg);
}

/* ---- Hover: enlaces de texto ---- */

.link-arrow:hover {
  color: var(--gold-light);
  border-color: var(--gold-light);
  transform: translateX(4px);
}

/* ---- Hover: inputs ---- */

input:focus {
  border-color: var(--gold);
  background: var(--surface-strong);
}

/* ---- Acordeón: rotación del icono ---- */

.accordion-trigger[aria-expanded="true"] .accordion-icon {
  transform: rotate(90deg);
  color: var(--gold-light);
}

.accordion-trigger:hover {
  color: var(--gold-light);
}

/* ---- Respeto por preferencias de movimiento reducido ---- */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}