/* ─── MASTER ADS · GLOBAL ANIMATIONS & MICROINTERACTIONS ─── */

/* ── SCROLL REVEAL ─────────────────────────────────────────── */
.ma-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s cubic-bezier(.22,1,.36,1), transform 0.55s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.ma-reveal.ma-visible {
  opacity: 1;
  transform: none;
}
.ma-reveal-left {
  opacity: 0;
  transform: translateX(-22px);
  transition: opacity 0.55s cubic-bezier(.22,1,.36,1), transform 0.55s cubic-bezier(.22,1,.36,1);
}
.ma-reveal-left.ma-visible { opacity: 1; transform: none; }

/* Stagger delays for grid children */
.ma-stagger > *:nth-child(1)  { transition-delay: 0s;     }
.ma-stagger > *:nth-child(2)  { transition-delay: 0.06s;  }
.ma-stagger > *:nth-child(3)  { transition-delay: 0.12s;  }
.ma-stagger > *:nth-child(4)  { transition-delay: 0.18s;  }
.ma-stagger > *:nth-child(5)  { transition-delay: 0.24s;  }
.ma-stagger > *:nth-child(6)  { transition-delay: 0.30s;  }
.ma-stagger > *:nth-child(7)  { transition-delay: 0.36s;  }
.ma-stagger > *:nth-child(8)  { transition-delay: 0.42s;  }
.ma-stagger > *:nth-child(n+9){ transition-delay: 0.48s;  }

/* ── CARD HOVER — HOME (herramienta-card, curso-card) ──────── */
.herramienta-card,
.curso-card {
  transition: transform 0.22s cubic-bezier(.22,1,.36,1),
              box-shadow 0.22s cubic-bezier(.22,1,.36,1),
              border-color 0.22s ease !important;
}
.herramienta-card:hover,
.curso-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(201,168,76,0.13), 0 2px 8px rgba(0,0,0,0.4);
  border-color: rgba(201,168,76,0.5) !important;
}

/* ── CARD HOVER — HERRAMIENTAS (tool-card) ─────────────────── */
.tool-card {
  transition: transform 0.22s cubic-bezier(.22,1,.36,1),
              box-shadow 0.22s cubic-bezier(.22,1,.36,1),
              border-color 0.22s ease !important;
  cursor: pointer;
}
.tool-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 36px rgba(201,168,76,0.12), 0 2px 8px rgba(0,0,0,0.35);
  border-color: rgba(201,168,76,0.45) !important;
}
.tool-arrow {
  transition: transform 0.2s ease;
}
.tool-card:hover .tool-arrow {
  transform: translateX(4px);
}

/* ── PANEL HOVER — CALCULADORAS ─────────────────────────────── */
.panel {
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.panel:hover {
  border-color: rgba(201,168,76,0.3) !important;
  box-shadow: 0 0 0 1px rgba(201,168,76,0.06);
}

/* ── INPUTS — FOCUS GLOW ────────────────────────────────────── */
input:focus,
textarea:focus,
select:focus {
  box-shadow: 0 0 0 3px rgba(201,168,76,0.12) !important;
  outline: none;
}

/* ── BUTTONS — MICROINTERACTIONS ────────────────────────────── */
.btn-gold,
.btn-ghost,
.nav-cta,
.nl-btn,
[class*="btn"] {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease, opacity 0.15s ease !important;
}
.btn-gold:hover,
.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(201,168,76,0.35);
}
.btn-ghost:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(201,168,76,0.15);
}
.btn-gold:active,
.btn-ghost:active,
.nav-cta:active,
.nl-btn:active {
  transform: scale(0.97) !important;
  box-shadow: none !important;
}

/* ── STAT ITEMS — ENTRY GLOW ────────────────────────────────── */
.stat-item {
  transition: transform 0.2s ease;
}
.stat-item:hover {
  transform: translateY(-3px);
}
.stat-num {
  transition: color 0.3s ease;
}

/* ── LOGROS ─────────────────────────────────────────────────── */
.logro-item {
  transition: transform 0.2s ease, border-color 0.2s ease !important;
}
.logro-item:hover {
  transform: translateY(-3px);
  border-color: rgba(201,168,76,0.4) !important;
}

/* ── FEAT ITEMS ─────────────────────────────────────────────── */
.feat-item {
  transition: transform 0.2s ease !important;
}
.feat-item:hover {
  transform: translateX(4px);
}

/* ── RED BUTTONS (Redes sociales) ───────────────────────────── */
.red-btn {
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease !important;
}
.red-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  opacity: 0.92;
}
.red-btn:active {
  transform: scale(0.96) !important;
}

/* ── GATE ROWS (Calculadora Testeo) ─────────────────────────── */
.gate {
  transition: transform 0.18s ease !important;
}
.gate:hover {
  transform: translateX(3px);
}

/* ── FILTER CHIPS (Herramientas) ─────────────────────────────── */
.chip {
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(201,168,76,0.15);
}

/* ── NAV LINKS ──────────────────────────────────────────────── */
.nav-back {
  transition: transform 0.15s ease, color 0.15s ease !important;
}
.nav-back:hover {
  transform: translateX(-3px);
}

/* ── GOLD COUNTER PULSE ─────────────────────────────────────── */
@keyframes ma-counter-done {
  0%   { text-shadow: 0 0 0px rgba(201,168,76,0); }
  50%  { text-shadow: 0 0 18px rgba(201,168,76,0.6); }
  100% { text-shadow: 0 0 0px rgba(201,168,76,0); }
}
.ma-counter-done {
  animation: ma-counter-done 0.6s ease forwards;
}

/* ── SECTION TITLE LINE UNDERLINE ───────────────────────────── */
.section-title {
  position: relative;
}

/* ── SMOOTH SCROLL ──────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

/* ── REDUCE MOTION ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ma-reveal,
  .ma-reveal-left {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .herramienta-card:hover,
  .curso-card:hover,
  .tool-card:hover,
  .logro-item:hover,
  .gate:hover {
    transform: none !important;
  }
}