/* ==========================================================
   MÉTODO SK — Bloque "siguiente paso" (embudo)
   Lo usan calculadora, roadmap y rutinas (js/funnel.js).
   Dos temas: .skf--dark (páginas oscuras) y .skf--light (páginas crema).
   ========================================================== */

.skf {
  --skf-naranja: #F26522;
  --skf-naranja-2: #E8530A;
  --skf-claro: #F59A6A;
  box-sizing: border-box;
  max-width: 560px;
  margin: 2rem auto;
  padding: clamp(1.5rem, 5vw, 2.2rem) clamp(1.1rem, 5vw, 2rem);
  border-radius: 22px;
  text-align: center;
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.skf *, .skf *::before, .skf *::after { box-sizing: border-box; }

/* Tema oscuro: igual que las tarjetas de CTA que ya tenían calculadora y roadmap */
.skf--dark {
  color: rgba(255,255,255,.78);
  background: linear-gradient(135deg, rgba(242,101,34,.14), rgba(242,101,34,.03));
  border: 1px solid rgba(242,101,34,.4);
}
.skf--dark .skf-title { color: #fff; }
.skf--dark .skf-note { color: rgba(255,255,255,.5); }
.skf--dark .skf-next { border-top-color: rgba(255,255,255,.12); }
.skf--dark .skf-next-lbl { color: rgba(255,255,255,.5); }
.skf--dark .skf-next a { color: var(--skf-claro); border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.04); }
.skf--dark .skf-next a:hover { border-color: var(--skf-naranja); }
.skf--dark .skf-next small { color: rgba(255,255,255,.5); }

/* Tema claro: panel oscuro sobre fondo crema, para que sea lo primero que se ve */
.skf--light {
  color: rgba(255,255,255,.8);
  background: #1A1A1A;
  border: 1px solid #1A1A1A;
  box-shadow: 0 14px 40px rgba(26,26,26,.18);
}
.skf--light .skf-title { color: #fff; }
.skf--light .skf-note { color: rgba(255,255,255,.55); }
.skf--light .skf-next { border-top-color: rgba(255,255,255,.14); }
.skf--light .skf-next-lbl { color: rgba(255,255,255,.55); }
.skf--light .skf-next a { color: var(--skf-claro); border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.05); }
.skf--light .skf-next a:hover { border-color: var(--skf-naranja); }
.skf--light .skf-next small { color: rgba(255,255,255,.55); }

.skf-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.35rem, 5vw, 1.8rem);
  line-height: 1.18;
  margin: 0 0 .75rem;
}
.skf-text {
  font-size: .95rem;
  max-width: 420px;
  margin: 0 auto 1.4rem;
}
.skf-btn {
  display: inline-block;
  max-width: 100%;
  padding: 1rem 2rem;
  border-radius: 100px;
  background: linear-gradient(160deg, #F47A3A 0%, #E8530A 55%, #C94000 100%);
  color: #fff !important;
  font-family: inherit;
  font-weight: 800;
  font-size: .98rem;
  text-decoration: none;
  box-shadow: 0 8px 28px rgba(242,101,34,.35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.skf-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(242,101,34,.5); }
.skf-btn:active { transform: translateY(0); }
.skf-btn:focus-visible, .skf-next a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.skf-note { font-size: .78rem; margin: 1rem 0 0; }

.skf-next {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid;
  display: grid;
  gap: .6rem;
  text-align: left;
}
.skf-next-lbl { font-size: .78rem; font-weight: 600; margin: 0 0 .1rem; text-align: center; }
.skf-next a {
  display: block;
  padding: .8rem 1rem;
  border: 1px solid;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 700;
  font-size: .9rem;
  transition: border-color .15s ease;
}
.skf-next small { display: block; font-weight: 400; font-size: .78rem; margin-top: .1rem; }

@media (prefers-reduced-motion: reduce) {
  .skf-btn { transition: none; }
  .skf-btn:hover { transform: none; }
}