/* =============================================
   /simulaciones/ — contraste, efectos y animaciones
   Todo va acotado a .sim-page para no afectar al resto del sitio.
   ============================================= */

/* ---------- 1. CONTRASTE (texto blanco heredado del tema oscuro) ---------- */
.sim-page [style*="color:#fff"],
.sim-page [style*="color: #fff"],
.sim-page .meta-chip strong {
  color: var(--ink) !important;
}
/* ...pero se mantiene blanco sobre superficies oscuras o con relleno de color */
.sim-page .btn[style*="background"],
.sim-page .btn[style*="background"] *,
.sim-page .btn-primary,
.sim-page .btn-primary *,
.sim-page .course-hero-mockup [style*="color:#fff"],
.sim-page .hero-float-badge,
.sim-page .hero-float-badge * {
  color: #fff !important;
}
.sim-page .btn-outline { color: var(--purple-primary) !important; }

/* Etiquetas tenues blancas (rgba blanco) -> gris legible sobre fondo claro */
.sim-page [style*="color:rgba(255,255,255,0.4)"] { color: var(--text-muted) !important; }
.sim-page .course-hero-mockup [style*="color:rgba(255,255,255,0.4)"] { color: #aab0cc !important; }

/* Panel oscuro del hero: texto claro garantizado */
.sim-page .course-hero-mockup { color: #fff; }
.sim-page .course-hero-mockup .chm-course-name { color: #fff !important; }
.sim-page .course-hero-mockup .chm-course-sub,
.sim-page .course-hero-mockup [style*="color:var(--text-muted)"] { color: #aab0cc !important; }
.sim-page .course-hero-mockup [style*="color:var(--cyan-bright)"] { color: #7fb0ff !important; }
.sim-page .course-hero-mockup [style*="color:var(--purple-light)"] { color: #b9a6ff !important; }
.sim-page .course-hero-mockup [style*="color:var(--green)"] { color: #4ade9a !important; }
.sim-page .chm-icon-big { color: #fff; }

/* Badge flotante del hero */
.sim-page .hero-float-badge {
  background: var(--surface-dark) !important;
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow: 0 14px 34px rgba(20,22,52,0.25);
}
.sim-page .hero-float-badge [style*="rgba(255,255,255,0.4)"] { color: #aab0cc !important; }

/* Acentos azul/cian demasiado claros sobre blanco -> azul de marca */
.sim-page .section-label { color: var(--purple-primary); }

/* ---------- 2. HERO: fondo vivo ---------- */
.sim-page .inner-hero { position: relative; overflow: hidden; isolation: isolate; }
.sim-page .inner-hero::before,
.sim-page .inner-hero::after {
  content: ""; position: absolute; z-index: 0; border-radius: 50%;
  filter: blur(70px); pointer-events: none; opacity: .55;
}
.sim-page .inner-hero::before {
  width: 460px; height: 460px; top: -140px; left: -120px;
  background: radial-gradient(circle, rgba(91,60,196,.35), transparent 70%);
  animation: sim-drift-a 16s ease-in-out infinite alternate;
}
.sim-page .inner-hero::after {
  width: 520px; height: 520px; bottom: -200px; right: -140px;
  background: radial-gradient(circle, rgba(37,99,235,.32), transparent 70%);
  animation: sim-drift-b 19s ease-in-out infinite alternate;
}
.sim-page .inner-hero .container { position: relative; z-index: 3; }
@keyframes sim-drift-a { to { transform: translate(120px, 80px) scale(1.15); } }
@keyframes sim-drift-b { to { transform: translate(-110px, -70px) scale(1.1); } }

/* Entrada escalonada del contenido del hero */
.sim-page .inner-hero-content > * { animation: sim-rise .8s cubic-bezier(.2,.7,.2,1) both; }
.sim-page .inner-hero-content > :nth-child(1) { animation-delay: .05s; }
.sim-page .inner-hero-content > :nth-child(2) { animation-delay: .15s; }
.sim-page .inner-hero-content > :nth-child(3) { animation-delay: .25s; }
.sim-page .inner-hero-content > :nth-child(4) { animation-delay: .35s; }
.sim-page .inner-hero-content > :nth-child(5) { animation-delay: .45s; }
@keyframes sim-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Mockup del hero: flota y reacciona */
.sim-page .course-hero-mockup { animation: sim-float 7s ease-in-out infinite, sim-rise .9s .3s both; transition: box-shadow .4s; }
.sim-page .course-hero-mockup:hover { box-shadow: 0 34px 80px rgba(29,78,216,.28) !important; }
@keyframes sim-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Punto "en vivo" con pulso */
.sim-page .hero-badge .dot { position: relative; }
.sim-page .hero-badge .dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid currentColor; opacity: .5; animation: sim-ping 1.8s ease-out infinite;
}
@keyframes sim-ping { to { transform: scale(2.2); opacity: 0; } }

/* Chips de métricas */
.sim-page .meta-chip { transition: transform .3s, box-shadow .3s, border-color .3s; }
.sim-page .meta-chip:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(91,60,196,.14); border-color: var(--purple-primary) !important; }

/* Botones: brillo que cruza al pasar el mouse */
.sim-page .btn { position: relative; overflow: hidden; transition: transform .25s, box-shadow .25s; }
.sim-page .btn:hover { transform: translateY(-2px); }
.sim-page .btn-large::after {
  content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg); transition: left .6s;
}
.sim-page .btn-large:hover::after { left: 130%; }

/* ---------- 3. ESTADÍSTICAS ---------- */
.sim-page .stats-section { position: relative; }
.sim-page .stat-item { transition: transform .3s, box-shadow .3s; border-radius: 16px; }
.sim-page .stat-item:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(91,60,196,.14); }
.sim-page .stat-number { transition: transform .3s; display: block; }
.sim-page .stat-item:hover .stat-number { transform: scale(1.08); }

/* ---------- 4. TARJETAS DE TIPOS DE ATAQUE ---------- */
.sim-page .sim-card { position: relative; overflow: hidden; box-shadow: 0 6px 22px rgba(20,22,52,.05); }
.sim-page .sim-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--purple-primary), var(--cyan-bright));
  transform: scaleX(0); transform-origin: left; transition: transform .5s;
}
.sim-page .sim-card:hover { box-shadow: 0 20px 44px rgba(91,60,196,.16); }
.sim-page .sim-card:hover::before { transform: scaleX(1); }
.sim-page .sim-card > div:first-child > div:first-child { transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.sim-page .sim-card:hover > div:first-child > div:first-child { transform: scale(1.18) rotate(-6deg); }
.sim-page .sim-card li { transition: transform .25s; }
.sim-page .sim-card li:hover { transform: translateX(6px); }

/* ---------- 5. PASOS DE LA CAMPAÑA ---------- */
.sim-page .sim-steps { position: relative; }
.sim-page .sim-steps::before {
  content: ""; position: absolute; top: 24px; left: 10%; right: 10%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--purple-primary) 0 8px, transparent 8px 16px);
  opacity: .25; transform: scaleX(0); transform-origin: left; transition: transform 1.4s .3s;
}
.sim-page .sim-steps.visible::before { transform: scaleX(1); }
.sim-page .sim-steps > div { position: relative; transition: transform .3s; }
.sim-page .sim-steps > div:hover { transform: translateY(-6px); }
.js-ready .sim-steps > div { opacity: 0; transform: translateY(24px); }
.js-ready .sim-steps.visible > div { animation: sim-rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
.js-ready .sim-steps.visible > div:nth-child(1) { animation-delay: .10s; }
.js-ready .sim-steps.visible > div:nth-child(2) { animation-delay: .25s; }
.js-ready .sim-steps.visible > div:nth-child(3) { animation-delay: .40s; }
.js-ready .sim-steps.visible > div:nth-child(4) { animation-delay: .55s; }
.js-ready .sim-steps.visible > div:nth-child(5) { animation-delay: .70s; }
.sim-page .sim-steps > div > div:first-child { box-shadow: 0 0 0 6px rgba(91,60,196,.10); transition: box-shadow .3s; }
.sim-page .sim-steps > div:hover > div:first-child { box-shadow: 0 0 0 10px rgba(91,60,196,.16); }

/* ---------- 6. CAPTURAS REALES (fotografías del producto) ---------- */
.sim-page .sim-showcase { background: linear-gradient(180deg, transparent, #f1f0fd 40%, transparent); }
.sim-page .sim-shots {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px;
  max-width: 1040px; margin: 0 auto; perspective: 1400px;
}
.sim-page .sim-shot-main { grid-column: 1 / -1; }
.sim-page .sim-shot {
  position: relative; margin: 0; background: #fff; border-radius: 18px;
  border: 1px solid var(--dark-border); overflow: visible;
  box-shadow: 0 22px 54px rgba(20,22,52,.12);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s;
  transform-style: preserve-3d;
}
.sim-page .sim-shot:hover { box-shadow: 0 34px 70px rgba(91,60,196,.22); }
.sim-page .sim-frame {
  display: flex; align-items: center; gap: 7px; padding: 11px 16px;
  background: #f5f6fb; border-bottom: 1px solid var(--dark-border); border-radius: 18px 18px 0 0;
}
.sim-page .sim-frame span { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.sim-page .sim-frame span:nth-child(2) { background: #ffbd2e; }
.sim-page .sim-frame span:nth-child(3) { background: #28ca41; }
.sim-page .sim-frame em { margin-left: 10px; font-style: normal; font-size: .72rem; color: var(--text-muted); }
.sim-page .sim-shot picture { display: block; overflow: hidden; }
.sim-page .sim-shot img {
  display: block; width: 100%; height: auto; transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.sim-page .sim-shot:hover img { transform: scale(1.05); }
.sim-page .sim-shot figcaption {
  padding: 16px 20px 18px; font-size: .86rem; line-height: 1.55; color: var(--text-secondary);
  border-radius: 0 0 18px 18px;
}
.sim-page .sim-shot figcaption strong { display: block; color: var(--ink); font-size: .95rem; margin-bottom: 2px; }
.sim-page .sim-chip {
  position: absolute; top: 56px; right: -14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px;
  background: #fff; color: var(--purple-primary); font-size: .76rem; font-weight: 700;
  border: 1px solid var(--dark-border); box-shadow: 0 10px 26px rgba(20,22,52,.16);
  animation: sim-float 5s ease-in-out infinite;
}
.sim-page .sim-chip-b { color: #1d4ed8; animation-delay: -1.5s; }
.sim-page .sim-chip-c { color: #0f9d58; animation-delay: -3s; }

/* ---------- 7. ANALÍTICA: barras que crecen ---------- */
.js-ready .sim-bars > div > div:first-child {
  transform: scaleY(0); transform-origin: bottom; transition: transform .9s cubic-bezier(.2,.8,.2,1);
}
.js-ready .reveal.visible .sim-bars > div > div:first-child { transform: scaleY(1); }
.js-ready .reveal.visible .sim-bars > div:nth-child(2) > div:first-child { transition-delay: .1s; }
.js-ready .reveal.visible .sim-bars > div:nth-child(3) > div:first-child { transition-delay: .2s; }
.js-ready .reveal.visible .sim-bars > div:nth-child(4) > div:first-child { transition-delay: .3s; }
.js-ready .reveal.visible .sim-bars > div:nth-child(5) > div:first-child { transition-delay: .4s; }
.js-ready .reveal.visible .sim-bars > div:nth-child(6) > div:first-child { transition-delay: .5s; }

/* ---------- 8. FAQ ---------- */
.sim-page details { transition: box-shadow .3s, border-color .3s, transform .3s; }
.sim-page details:hover { box-shadow: 0 12px 30px rgba(91,60,196,.10); }
.sim-page details[open] { border-color: var(--purple-primary) !important; box-shadow: 0 14px 34px rgba(91,60,196,.12); }
.sim-page details summary { transition: color .25s; }
.sim-page details summary:hover { color: var(--purple-primary) !important; }
.sim-page details[open] > div { animation: sim-rise .45s both; }

/* ---------- 9. PLANES ---------- */
.sim-page .pricing-card { transition: transform .35s, box-shadow .35s; }
.sim-page .pricing-card:hover { box-shadow: 0 26px 56px rgba(91,60,196,.18); }
.sim-page .pricing-card.featured { animation: sim-glow 4s ease-in-out infinite; }
@keyframes sim-glow {
  0%,100% { box-shadow: 0 0 0 rgba(91,60,196,0), 0 14px 34px rgba(91,60,196,.10); }
  50%     { box-shadow: 0 0 0 6px rgba(91,60,196,.08), 0 22px 48px rgba(91,60,196,.20); }
}

/* ---------- 10. BARRA DE PROGRESO DE LECTURA ---------- */
.sim-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000; pointer-events: none; }
.sim-progress span {
  display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--purple-primary), var(--cyan-bright));
}

/* ---------- 11. RESPONSIVE ---------- */
@media (max-width: 900px) {
  .sim-page .sim-shots { grid-template-columns: 1fr; }
  .sim-page .sim-shot-main { grid-column: auto; }
  .sim-page .sim-chip { right: 10px; }
  .sim-page .sim-steps { grid-template-columns: repeat(2, 1fr) !important; }
  .sim-page .sim-steps::before { display: none; }
}
@media (max-width: 768px) {
  .sim-page #tipos .container > div:nth-child(2) { grid-template-columns: 1fr !important; }
}

/* ---------- 12. ACCESIBILIDAD: menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .sim-page *, .sim-page *::before, .sim-page *::after {
    animation: none !important; transition: none !important;
  }
  .js-ready .sim-steps > div,
  .js-ready .sim-bars > div > div:first-child { opacity: 1 !important; transform: none !important; }
}

/* ---------- 13. Contraste de acentos de color sobre fondo blanco ---------- */
.sim-page [style*="color:#ff9d3d"],
.sim-page [style*="color: #ff9d3d"] { color: #b45309 !important; }
.sim-page [style*="color:#a882ff"] { color: #6d4fd0 !important; }
.sim-page [style*="color:#ff5050"] { color: #c62828 !important; }
.sim-page [style*="color:#00ff88"],
.sim-page [style*="color:#00c96e"] { color: #0b7a44 !important; }
.sim-page .course-hero-mockup [style*="color:#ff9d3d"] { color: #ffb765 !important; }
.sim-page .featured-badge { color: #fff !important; }

/* ---------- 14. ESTADÍSTICAS: sección oscura ---------- */
.sim-page .stats-section {
  background: linear-gradient(135deg, #141634 0%, #1c1f4a 55%, #2a1f6b 100%);
  position: relative; overflow: hidden;
}
.sim-page .stats-section::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 80% at 15% 0%, rgba(124,92,255,.28), transparent 60%),
              radial-gradient(ellipse 50% 70% at 90% 100%, rgba(37,99,235,.25), transparent 60%);
}
.sim-page .stats-section .container { position: relative; }
.sim-page .stats-grid {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 24px 60px rgba(0,0,0,.30);
}
.sim-page .stat-item { background: rgba(20,22,52,.72); border-radius: 0; }
.sim-page .stat-item:hover { background: rgba(43,36,110,.85); transform: none; box-shadow: none; }
.sim-page .stat-item::before { background: linear-gradient(90deg, transparent, #8b6dff, transparent); }
.sim-page .stat-item .stat-number {
  background: linear-gradient(135deg, #ffffff 30%, #b9a6ff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 18px rgba(124,92,255,.45));
}
.sim-page .stat-item .stat-label { color: #c9cee0; }
.sim-page .stat-item:hover .stat-number { transform: scale(1.06); }