/* ============================================================
   CARE CACA — animations.css
   ============================================================ */

/* ===== REVEAL VARIANTES ===== */
.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.75);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34,1.56,0.64,1);
}
.reveal-rotate {
  opacity: 0;
  transform: rotate(-6deg) translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible,
.reveal-rotate.visible {
  opacity: 1;
  transform: none;
}

/* ===== CARD POP (tabs) ===== */
@keyframes card-pop {
  0%   { opacity: 0; transform: translateY(20px) scale(0.85); }
  60%  { transform: translateY(-4px) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.card-pop {
  animation: card-pop 0.45s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* ===== CONFETTI ===== */
@keyframes confetti-fall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.confetti-piece {
  position: fixed;
  top: 0;
  z-index: 9000;
  pointer-events: none;
  animation: confetti-fall linear forwards;
}

/* ===== EMOJI LLUVIA ===== */
@keyframes emoji-fall {
  0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translateY(120px) rotate(360deg) scale(0.5); opacity: 0; }
}
.emoji-rain {
  position: absolute;
  pointer-events: none;
  z-index: 8000;
  animation: emoji-fall 1.2s ease-in forwards;
}

/* ===== QTY BOUNCE ===== */
@keyframes qty-bounce {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.4); }
}
.qty-bounce { animation: qty-bounce 0.25s ease; }

/* ===== SECTION ACTIVE — title highlight ===== */
.section-active .section-title .highlight {
  color: var(--orange);
}

/* ===== STAT CARD — shimmer ===== */
.stat-card { overflow: hidden; }
.stat-card::after {
  content: '';
  position: absolute;
  top: -50%; left: -60%;
  width: 40%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}
.stat-card:hover::after { left: 130%; }

/* ===== FAQ — underline slide ===== */
.faq-question { position: relative; }
.faq-question::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background: var(--orange);
  transition: width 0.35s ease;
}
.faq-item.open .faq-question::after { width: 100%; }

/* ===== HERO CARDS — glow ===== */
.floating-card {
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.4));
  transition: filter 0.3s;
}
.floating-card:hover {
  filter: drop-shadow(0 0 20px rgba(243,107,18,0.6)) drop-shadow(0 20px 30px rgba(0,0,0,0.4));
}

/* ===== HERO PRETITLE — animated gradient ===== */
.hero-pretitle {
  background: linear-gradient(90deg, var(--light-blue), var(--white), var(--orange), var(--light-blue));
  background-size: 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-move 4s linear infinite;
}
@keyframes gradient-move {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* ===== INSTRUCCIONES CARD — pulse (hover only) ===== */
.instrucciones-card:hover {
  box-shadow: 0 12px 40px rgba(0,74,173,0.4), 0 0 0 6px rgba(82,113,255,0.25);
  transition: box-shadow 0.4s ease;
}

/* ===== PRICE — highlight color only ===== */
.price-amount { color: var(--orange); }

/* ===== MERCADOPAGO — shimmer ===== */
.btn-mercadopago { position: relative; overflow: hidden; }
.btn-mercadopago::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: mp-shimmer 2.5s infinite;
}
@keyframes mp-shimmer {
  0%   { left: -100%; }
  100% { left: 200%; }
}

/* ===== BADGE hover ===== */
.badge { transition: all 0.25s ease; }
.badge:hover {
  background: rgba(255,255,255,0.28);
  transform: translateY(-3px) scale(1.05);
}

/* ===== REGLA CARD — hover ===== */
.regla-card { position: relative; overflow: hidden; isolation: isolate; }
.regla-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--orange), var(--red));
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 0;
  pointer-events: none;
}
.regla-card:hover::before { opacity: 0.06; }
.regla-card > * { position: relative; z-index: 1; }
.regla-num {
  display: inline-block;
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
  will-change: transform;
}
.regla-card:hover .regla-num { transform: scale(1.12); }

/* ===== FOOTER links underline ===== */
.footer-links a { position: relative; }
.footer-links a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1.5px;
  background: var(--orange);
  transition: width 0.3s ease;
}
.footer-links a:hover::after { width: 100%; }

/* ===== NAV LINK — active underline ===== */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; right: 50%;
  height: 2px;
  background: var(--orange);
  border-radius: 2px;
  transition: left 0.25s ease, right 0.25s ease;
}
.nav-link { position: relative; }
.nav-link:hover::after, .nav-link.active::after { left: 12px; right: 12px; }

/* ===== SECTION TAG — accent ===== */
.section-active .section-tag {
  background: rgba(243,107,18,0.18);
  transition: background 0.3s;
}

/* ===== STAT CARDS — stagger delay ===== */
.contenido-stats .stat-card:nth-child(1) { transition-delay: 0s; }
.contenido-stats .stat-card:nth-child(2) { transition-delay: 0.08s; }
.contenido-stats .stat-card:nth-child(3) { transition-delay: 0.16s; }
.contenido-stats .stat-card:nth-child(4) { transition-delay: 0.24s; }
.contenido-stats .stat-card:nth-child(5) { transition-delay: 0.32s; }

/* ===== WAVE separators ===== */
.juego-section { position: relative; overflow: hidden; }
.juego-section::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 70px;
  background: var(--gray-light);
  clip-path: ellipse(55% 100% at 50% 100%);
}
.video-preview-section { position: relative; }
.video-preview-section::before {
  content: '';
  position: absolute;
  top: -2px; left: 0; right: 0;
  height: 70px;
  background: var(--white);
  clip-path: ellipse(55% 100% at 50% 0%);
  z-index: 1;
}

/* ===== FAN CARD FLIP ===== */
.fan-card { transform-style: preserve-3d; }
.fan-card.fan-flipped { transform: rotateY(180deg) !important; }

/* ===== TEAM CARD — gradient border on hover ===== */
.team-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.team-card:hover {
  border-bottom-color: var(--orange);
  box-shadow: 0 24px 60px rgba(0,0,0,0.15);
}

/* ===== JUEGO DESC — highlight hover ===== */
.juego-desc strong {
  position: relative;
  display: inline;
}
.juego-desc strong::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px; right: 0;
  height: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.juego-desc:hover strong::after { transform: scaleX(1); }

/* ===== PRODUCT CARDS — hover glow ===== */
.product-card:hover {
  box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 40px rgba(243,107,18,0.15);
  transition: box-shadow 0.4s ease;
}

/* ===== CONTACT FORM — input focus glow ===== */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  box-shadow: 0 0 0 3px rgba(243,107,18,0.18);
}

/* ===== HERO scroll arrow animation ===== */
@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%       { transform: translateY(10px); opacity: 0.5; }
}
.scroll-arrow { animation: scroll-bounce 1.5s ease infinite; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .juego-section::after,
  .video-preview-section::before { display: none; }
}