/* ─────────────────────────────────────────────────────────────
   VALORA · animations.css — keyframes, reveal, microinteracciones
───────────────────────────────────────────────────────────── */

/* ── KEYFRAMES ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes phoneFloat {
  0%, 100% { transform: translateY(0);     }
  50%       { transform: translateY(-10px); }
}

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

@keyframes shimmerGold {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── HERO ENTRANCE ── */
.hero > * {
  animation: fadeUp 0.72s var(--ease) both;
}
.hero > *:nth-child(1) { animation-delay: 0.05s; }
.hero > *:nth-child(2) { animation-delay: 0.12s; }
.hero > *:nth-child(3) { animation-delay: 0.19s; }
.hero > *:nth-child(4) { animation-delay: 0.26s; }
.hero > *:nth-child(5) { animation-delay: 0.34s; }
.hero > *:nth-child(6) { animation-delay: 0.43s; }

/* ── SCROLL REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity  0.65s var(--ease),
    transform 0.65s var(--ease);
}

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

.reveal-d1 { transition-delay: 0.06s; }
.reveal-d2 { transition-delay: 0.12s; }
.reveal-d3 { transition-delay: 0.18s; }
.reveal-d4 { transition-delay: 0.24s; }
.reveal-d5 { transition-delay: 0.30s; }
.reveal-d6 { transition-delay: 0.36s; }

/* ── PHONE FLOAT ── */
.phone-wrap { animation: phoneFloat 5s ease-in-out infinite; }

/* ── LIVE DOT ── */
.live-dot { animation: pulseDot 2.2s ease-in-out infinite; }

/* ── BTN PRIMARY SHIMMER ── */
.btn-primary {
  background-image: linear-gradient(
    105deg,
    var(--gold)    40%,
    rgba(255,255,255,0.20) 50%,
    var(--gold)    60%
  );
  background-size: 220% auto;
  transition: opacity 0.2s, transform 0.2s, background-position 0.6s ease;
}

.btn-primary:hover {
  background-position: right center;
}

/* ── STORE BTN ICON SCALE ── */
.store-btn svg { flex-shrink: 0; transition: transform 0.25s var(--ease); }
.store-btn:hover svg { transform: scale(1.10); }

/* ── PLAN CARD FEATURED GLOW ── */
.plan-card.featured {
  box-shadow: 0 0 0 0.5px rgba(201,168,108,0.30),
              0 8px 32px rgba(201,168,108,0.06);
}

/* ── PHONE DOTS ── */
.phone-dot {
  transition: width 0.35s var(--ease), background 0.35s ease;
}

/* ── CONSULTORIA CARD HOVER ── */
.consultoria-card {
  transition: box-shadow 0.3s ease;
}
.consultoria-card:hover {
  box-shadow: 0 24px 64px rgba(201,168,108,0.08);
}

/* ── SPLIT VISUAL INNER GLOW ── */
.split-visual {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.split-visual:hover {
  border-color: rgba(201,168,108,0.40);
  box-shadow: 0 0 32px rgba(201,168,108,0.07);
}

/* ── NAV TRANSITION ── */
nav { transition: background 0.3s ease; }

/* ── SECTION LABELS APPEAR ── */
.section-label {
  transition: opacity 0.4s ease;
}