/* ===========================================================
   SoulfulSync — HOME 2026 PREMIUM REDESIGN (FINAL CLEAN)
   ✅ HERO intacto
   ✅ How It Works: Timeline Futurista
   ✅ Imágenes: Restringidas y centradas (no gigantes)
   ✅ Limpieza: Sin código duplicado
=========================================================== */

/* ---------- Tokens (extiende base.css) ---------- */
:root{
  --ss-max: 1200px;
  --ss-radius: 20px;
  --ss-gap: 28px;

  /* Paleta principal */
  --ss-primary: #7e3af2;
  --ss-secondary: #ff63b3;
  --ss-cyan: #24d1ff;
  --ss-lime: #b2ff59;

  /* Gradientes iOS */
  --ss-grad-1: linear-gradient(135deg, #7e3af2 0%, #a56bff 50%, #ff63b3 100%);
  --ss-grad-2: linear-gradient(135deg, #24d1ff 0%, #7e3af2 50%, #ff63b3 100%);

  /* Fondo suave base (se mezcla con video) */
  --ss-grad-soft:
    radial-gradient(900px 500px at 10% -10%, rgba(126,58,242,.28), transparent 60%),
    radial-gradient(800px 420px at 90% 5%, rgba(255,99,179,.22), transparent 65%);

  /* Fondos de sección */
  --ss-surface-1:
    radial-gradient(1100px 540px at 10% -20%, rgba(126,58,242,.18), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(36,209,255,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,1));

  --ss-surface-2:
    radial-gradient(900px 520px at 15% 0%, rgba(255,99,179,.14), transparent 60%),
    radial-gradient(1000px 600px at 85% 10%, rgba(126,58,242,.16), transparent 60%);

  --ss-surface-3:
    radial-gradient(900px 540px at 0% 0%, rgba(36,209,255,.16), transparent 60%),
    radial-gradient(900px 540px at 100% 0%, rgba(126,58,242,.18), transparent 60%);

  --ss-grid-glow:
    radial-gradient(600px 300px at 10% 0%, rgba(126,58,242,.22), transparent 60%),
    radial-gradient(600px 300px at 90% 10%, rgba(255,99,179,.18), transparent 60%);

  /* Sombras */
  --ss-shadow-1: 0 10px 30px rgba(15,23,42,.10);
  --ss-shadow-2: 0 18px 60px rgba(15,23,42,.18);

  /* Glass */
  --ss-glass: rgba(255,255,255,.65);
  --ss-glass-strong: rgba(255,255,255,.85);
}

html[data-theme="dark"]{
  --ss-grad-soft:
    radial-gradient(900px 500px at 10% -10%, rgba(126,58,242,.34), transparent 60%),
    radial-gradient(800px 420px at 90% 5%, rgba(255,99,179,.22), transparent 65%);

  --ss-surface-1:
    radial-gradient(1100px 540px at 10% -20%, rgba(126,58,242,.25), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(36,209,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(8,10,16,1), rgba(10,12,20,1));

  --ss-surface-2:
    radial-gradient(900px 520px at 15% 0%, rgba(255,99,179,.18), transparent 60%),
    radial-gradient(1000px 600px at 85% 10%, rgba(126,58,242,.22), transparent 60%);

  --ss-surface-3:
    radial-gradient(900px 540px at 0% 0%, rgba(36,209,255,.22), transparent 60%),
    radial-gradient(900px 540px at 100% 0%, rgba(126,58,242,.22), transparent 60%);

  --ss-grid-glow:
    radial-gradient(600px 300px at 10% 0%, rgba(126,58,242,.30), transparent 60%),
    radial-gradient(600px 300px at 90% 10%, rgba(255,99,179,.25), transparent 60%);

  --ss-shadow-1: 0 12px 36px rgba(0,0,0,.35);
  --ss-shadow-2: 0 22px 70px rgba(0,0,0,.55);

  --ss-glass: rgba(14,16,24,.6);
  --ss-glass-strong: rgba(14,16,24,.85);
}

/* ---------- Helpers ---------- */
.ss-home{ background: var(--ss-bg); color: var(--ss-ink); overflow-x: hidden; }
.container{ width:min(100%, var(--ss-max)); margin:0 auto; padding:0 22px; }
.section{ padding: clamp(56px, 6.5vw, 96px) 0; position: relative; }
.center{ text-align:center; }
.mt-3{ margin-top:1.25rem; }

.section__head{ text-align:center; margin-bottom:28px; }
.section__head h2{ font-size:clamp(28px,4vw,44px); line-height:1.1; margin:0 0 8px; }
.section__head .sub{ color:var(--ss-muted); max-width:850px; margin:0 auto; }

.eyebrow{
  text-transform:uppercase; letter-spacing:.14em; font-weight:800; color: var(--ss-primary);
}

.fx-gradient-title{
  background: var(--ss-grad-2);
  -webkit-background-clip:text; background-clip:text;
  color: transparent;
  filter: drop-shadow(0 6px 22px rgba(126,58,242,.22));
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 20px; border-radius:999px; border:1px solid var(--ss-border);
  text-decoration:none; font-weight:800; cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, opacity .18s, border-color .18s;
  will-change: transform;
  backdrop-filter: blur(6px);
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--ss-shadow-1); }
.btn--primary{ background:var(--ss-grad-1); color:#fff; border-color:transparent; }
.btn--ghost{ background:transparent; color:var(--ss-ink); }
.btn--dark{ background:#0f152b; color:#fff; border-color:transparent; }
html[data-theme="dark"] .btn--dark{ background:#fff; color:#0f152b; }

.btn--shine{ position:relative; overflow:hidden; isolation:isolate; }
.btn--shine::after{
  content:""; position:absolute; inset:-200% -60%;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.7) 50%, transparent 70%);
  transform: translateX(-10%); mix-blend-mode: screen; transition: transform .6s ease;
}
.btn--shine:hover::after{ transform:translateX(55%); }

/* ===========================================================
   HERO — Cinematic iOS (video + overlays + parallax)
=========================================================== */
.hero{
  position:relative; overflow:hidden;
  min-height: clamp(680px, 92vh, 980px);
  display:grid; place-items:center;
  background: var(--ss-grad-soft);
}

/* BG */
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }

/* Video */
.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; opacity:1; transform:none;
}

/* DARK — Ajustes */
html[data-theme="dark"] .hero__video{ filter: saturate(1.05) brightness(.6); opacity:.55; }

/* Tinte */
.hero__tint{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(15,21,43,.10) 0%, rgba(15,21,43,.35) 60%, rgba(15,21,43,.55) 100%);
  mix-blend-mode: multiply;
}
html[data-theme="dark"] .hero__tint{
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.75) 100%);
}

/* Viñeta */
.hero__vignette{
  position:absolute; inset:-10%; z-index:2; pointer-events:none;
  background: radial-gradient(120% 85% at 50% 40%, transparent 55%, rgba(0,0,0,.35) 100%);
}
html[data-theme="dark"] .hero__vignette{
  background: radial-gradient(120% 85% at 50% 40%, transparent 50%, rgba(0,0,0,.6) 100%);
}

/* Bokeh */
.hero__bokeh{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    radial-gradient(120px 120px at 20% 30%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(160px 160px at 75% 25%, rgba(255,255,255,.12), transparent 70%),
    radial-gradient(140px 140px at 60% 70%, rgba(255,255,255,.10), transparent 70%);
  filter: blur(6px);
  opacity:.5;
}
html[data-theme="dark"] .hero__bokeh{ opacity:.35; }

/* Noise */
#ssNoise{
  position:absolute; inset:0; z-index:4; pointer-events:none; opacity:.08;
  mix-blend-mode: overlay;
}
@media (prefers-reduced-motion:reduce){ #ssNoise{ display:none; } }

/* Waves */
.hero__waves{
  position:absolute; inset:-10% -10% auto -10%; height:65%; z-index:5; pointer-events:none;
  background:
    radial-gradient(60% 40% at 20% 10%, rgba(126,58,242,.22), transparent 70%),
    radial-gradient(50% 35% at 90% 5%, rgba(255,99,179,.20), transparent 70%),
    radial-gradient(40% 30% at 60% 80%, rgba(36,209,255,.16), transparent 70%);
  animation: floatWaves 20s ease-in-out infinite;
}
@keyframes floatWaves{
  0%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(0,12px,0) scale(1.02); }
  100%{ transform: translate3d(0,0,0) scale(1); }
}
@media (prefers-reduced-motion:reduce){ .hero__waves{ animation:none; } }

/* Contenido */
.hero__content{ position:relative; z-index:6; text-align:left; }
.hero__title{ font-size: clamp(42px, 6.2vw, 78px); line-height:1.04; margin:10px 0 12px; }
.hero__title .gradient{
  background: var(--ss-grad-2);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 6px 24px rgba(126,58,242,.22));
}
.hero__lead{
  color:var(--ss-muted); max-width:780px; font-size:clamp(16px,2.2vw,20px);
}
.hero__actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }

/* Scroll Indicator */
.scroll-indicator{ margin-top:26px; height:28px; display:grid; place-items:center; }
.scroll-indicator span{
  width:8px; height:8px; border-radius:50%; background:var(--ss-primary);
  box-shadow:0 0 0 0 rgba(126,58,242,.55); animation:pulseDot 2s infinite;
}
@keyframes pulseDot{
  0%{ box-shadow:0 0 0 0 rgba(126,58,242,.55); }
  50%{ box-shadow:0 0 0 12px rgba(126,58,242,0); }
  100%{ box-shadow:0 0 0 0 rgba(126,58,242,0); }
}

/* ===========================================================
   HERO — LIGHT MODE FIX
=========================================================== */
html[data-theme="light"] .hero__video{ filter: brightness(1.22) saturate(1.12) contrast(1.08); opacity:1; }
html[data-theme="light"] .hero__tint{
  background: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.05) 100%);
  mix-blend-mode: screen;
}
html[data-theme="light"] .hero__vignette{
  background: radial-gradient(120% 85% at 50% 40%, transparent 60%, rgba(255,255,255,.25) 100%);
  mix-blend-mode: soft-light;
}
html[data-theme="light"] .hero__bokeh{ opacity:.7; filter: blur(10px); }
html[data-theme="light"] .hero__title{ color:#f5f7fa; text-shadow: 0 3px 12px rgba(0,0,0,.30), 0 0 18px rgba(0,0,0,.20); }
html[data-theme="light"] .hero__title .gradient{ opacity:1; filter: drop-shadow(0 6px 26px rgba(126,58,242,.35)) drop-shadow(0 0 14px rgba(255,255,255,.25)); }
html[data-theme="light"] .hero__lead{ color:#eef1f6; text-shadow: 0 3px 10px rgba(0,0,0,.32), 0 0 12px rgba(0,0,0,.20); }
html[data-theme="light"] .hero .eyebrow{ color:#d3ccff; text-shadow:0 2px 10px rgba(0,0,0,.25); }
html[data-theme="light"] .btn--ghost{ color:#0d0d0d; border-color: rgba(0,0,0,.18); background: rgba(255,255,255,.55); backdrop-filter: blur(6px); }
html[data-theme="light"] .btn--ghost:hover{ background: rgba(255,255,255,.75); }
html[data-theme="light"] .btn--dark{ background:#111; color:#fff; }
html[data-theme="light"] .scroll-indicator span{ background:#7e3af2; box-shadow:0 0 0 0 rgba(126,58,242,.45); }

/* ===========================================================
   DIVIDERS / BACKGROUNDS
=========================================================== */
.section::before{
  content:""; position:absolute; inset:-1px 0 auto 0; height:1px; opacity:.65;
  background: linear-gradient(90deg, transparent, rgba(126,58,242,.25), rgba(36,209,255,.20), transparent);
}
.section.bg-1{ background: var(--ss-surface-1); }
.section.bg-2{ background: var(--ss-surface-2); }
.section.bg-3{ background: var(--ss-surface-3); }

/* ===========================================================
   MOVEMENT V2 — HOLOGRAPHIC GRID
=========================================================== */
.movement-v2{ background: var(--ss-surface-2); }
.movement-v2__grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(14px, 2.2vw, 22px);
}
@media (max-width:1024px){ .movement-v2__grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:640px){ .movement-v2__grid{ grid-template-columns: 1fr; } }

.mv2-card{
  position:relative; padding:22px 20px; border-radius:22px;
  background: var(--ss-glass); border:1px solid var(--ss-border);
  box-shadow: var(--ss-shadow-1); backdrop-filter: blur(12px); overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.mv2-card::before{
  content:""; position:absolute; inset:-1px;
  background:
    radial-gradient(600px 200px at 0% 0%, rgba(126,58,242,.22), transparent 60%),
    radial-gradient(600px 200px at 100% 0%, rgba(36,209,255,.20), transparent 60%);
  opacity:.85; mix-blend-mode: screen; pointer-events:none;
}
.mv2-card::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.25));
  opacity:.0; transition: opacity .25s ease;
}
.mv2-card:hover{
  transform: translateY(-8px) scale(1.01); box-shadow: var(--ss-shadow-2); border-color: rgba(126,58,242,.45);
}
.mv2-card:hover::after{ opacity:.65; }
.mv2-card img{
  width:44px; height:44px; object-fit:contain;
  filter: drop-shadow(0 6px 18px rgba(126,58,242,.35)); margin-bottom:10px;
}
.mv2-card h3{ margin:4px 0 6px; font-size:18px; }
.mv2-card p{ margin:0; color:var(--ss-muted); font-size:14.5px; line-height:1.55; }

@media (prefers-reduced-motion:no-preference){
  .mv2-card{ animation: floatCard 8s ease-in-out infinite; }
  .mv2-card:nth-child(2){ animation-delay:1.2s;}
  .mv2-card:nth-child(3){ animation-delay:2.4s;}
  .mv2-card:nth-child(4){ animation-delay:3.6s;}
}
@keyframes floatCard{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}

/* ===========================================================
   HOW IT WORKS — FUTURISTIC TIMELINE (CORREGIDO)
=========================================================== */
.how{ background: var(--ss-surface-1); }

.how-timeline {
  position: relative; max-width: 1000px; margin: 40px auto 0; padding: 20px 0;
}
/* La línea de neón central */
.how-timeline__line {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, var(--ss-primary), var(--ss-cyan), transparent);
  transform: translateX(-50%); opacity: 0.6; box-shadow: 0 0 15px var(--ss-primary);
}
/* Contenedor de cada paso */
.how-step {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 60px; position: relative;
}
.how-step:last-child { margin-bottom: 0; }

/* El punto brillante en el centro */
.how-step__dot {
  width: 16px; height: 16px; background: #fff; border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(126,58,242,0.3), 0 0 20px var(--ss-primary);
  z-index: 2; flex-shrink: 0;
}
/* Espaciador */
.how-step__spacer { flex: 1; }
/* La tarjeta de contenido */
.how-step__content {
  flex: 1; background: var(--ss-glass); backdrop-filter: blur(12px);
  border: 1px solid var(--ss-border); padding: 28px; border-radius: 24px;
  box-shadow: var(--ss-shadow-1); position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin: 0 30px;
}
.how-step__content:hover {
  transform: translateY(-5px); box-shadow: var(--ss-shadow-2); border-color: rgba(126,58,242,0.4);
}
/* Número grande decorativo */
.how-step__num {
  display: block; font-size: 3rem; font-weight: 900; line-height: 1; margin-bottom: 10px;
  background: var(--ss-grad-2); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0.8;
}
.how-step__content h3 { margin: 0 0 10px; font-size: 1.4rem; }
.how-step__content p { margin: 0; color: var(--ss-muted); font-size: 0.95rem; line-height: 1.6; }

/* Responsive Timeline */
@media (max-width: 768px) {
  .how-timeline__line { left: 20px; }
  .how-step, .how-step.reverse { flex-direction: row; justify-content: flex-start; gap: 20px; }
  .how-step__spacer { display: none; }
  .how-step__dot { margin-left: 12px; }
  .how-step__content { margin: 0; width: 100%; }
}

/* ===========================================================
   SPLIT SECTIONS (Why, Mentor, Community)
   ✅ Grid unificado para alineación perfecta
=========================================================== */
.why, .why-works, .mentor-v2, .movement-join {
  background: var(--ss-surface-3);
}
/* Mentor usa surface-1 para variar */
.mentor-v2 { background: var(--ss-surface-1); }

/* GRID MAESTRO: Alinea verticalmente y divide 50/50 */
.why-works__grid,
.why__grid,
.mentor-v2__grid,
.join__grid,
.community-v2__grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Mitad y mitad estricto */
  align-items: center; /* CENTRADO VERTICAL OBLIGATORIO */
  gap: clamp(30px, 5vw, 60px);
}

/* CONTENEDORES DE TEXTO */
.why__info,
.why-works__info,
.mentor-v2__info,
.join__info,
.community-v2__info {
  background: var(--ss-glass); border:1px solid var(--ss-border);
  border-radius:24px; padding: clamp(18px,3vw,26px);
  backdrop-filter: blur(12px); box-shadow: var(--ss-shadow-1);
}
.why__info p, .join__info p, .mentor-v2__info p { color:var(--ss-muted); }

/* CONTENEDORES DE IMAGEN (Restricción de tamaño) */
.why__media,
.why-works__media,
.mentor-v2__media,
.join__media,
.community-v2__media {
  width: 100%;
  max-width: 550px; /* Evita que la imagen sea gigante */
  margin: 0 auto;   /* Centra la imagen en su columna */
}

.why__media img,
.why-works__media img,
.mentor-v2__media img,
.join__media img,
.community-v2__media img {
  width: 100%; height: auto; display: block;
  border-radius: 24px; box-shadow: var(--ss-shadow-2);
}

/* LISTAS INTERNAS */
.why__list, .why-works__list{
  margin:14px 0 0; padding-left:0; display:grid; grid-template-columns: repeat(2,1fr);
  gap:8px 10px; list-style:none;
}
.why__list li, .why-works__list span{
  background: rgba(126,58,242,.06); border:1px dashed rgba(126,58,242,.25);
  padding:10px 12px; border-radius:14px; font-weight:700; font-size:14px; display:block;
}
html[data-theme="dark"] .why__list li, html[data-theme="dark"] .why-works__list span{
  background: rgba(126,58,242,.12);
}

/* RESPONSIVE SPLIT SECTIONS */
@media (max-width: 980px){
  .why-works__grid,
  .why__grid,
  .mentor-v2__grid,
  .join__grid,
  .community-v2__grid {
    grid-template-columns: 1fr; /* Columna única */
    text-align: center;
  }
  /* En móvil la imagen puede ocupar todo el ancho disponible */
  .why__media, .mentor-v2__media, .join__media { max-width: 100%; }

  /* Mentor: Imagen arriba del texto en móvil */
  .mentor-v2__media { order: -1; }
}

/* ===========================================================
   COURSES V2 — PREMIUM GRID
=========================================================== */
.courses-v2{ background: var(--ss-surface-2); }
.courses-v2__grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(14px,2.2vw,22px);
}
@media (max-width:1024px){ .courses-v2__grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:640px){ .courses-v2__grid{ grid-template-columns: 1fr; } }

.course-v2{
  position:relative; border-radius:20px; overflow:hidden;
  background: var(--ss-glass); border:1px solid var(--ss-border);
  box-shadow: var(--ss-shadow-1); transition: transform .25s ease, box-shadow .25s ease;
}
.course-v2 a{ color:inherit; text-decoration:none; display:block; height:100%; }
.course-v2__img img{
  width:100%; height:210px; object-fit:cover; display:block;
  transform: scale(1.02); transition: transform .5s ease;
}
.course-v2__body{ padding:14px 14px 16px; }
.course-v2__body h3{ margin:0 0 6px; font-size:18px; line-height:1.25; }
.course-v2__body p{ margin:0; font-size:14px; color:var(--ss-muted); }
.course-v2:hover{ transform: translateY(-8px); box-shadow: var(--ss-shadow-2); border-color: rgba(36,209,255,.45); }
.course-v2:hover .course-v2__img img{ transform: scale(1.08); }
.course-v2::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.12) 100%), radial-gradient(300px 140px at 0% 0%, rgba(126,58,242,.25), transparent 60%);
  pointer-events:none;
}

/* ===========================================================
   POSTS V2
=========================================================== */
.posts-v2{ background: var(--ss-surface-2); }
.posts-v2__grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(14px,2.2vw,22px);
}
@media (max-width:980px){ .posts-v2__grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:640px){ .posts-v2__grid{ grid-template-columns: 1fr; } }

.post-v2{
  position:relative; border-radius:20px; overflow:hidden;
  background: var(--ss-glass); border:1px solid var(--ss-border);
  box-shadow: var(--ss-shadow-1); transition: transform .25s ease, box-shadow .25s ease;
}
.post-v2 a{ color:inherit; text-decoration:none; display:block; height:100%; }
.post-v2__img img{ width:100%; height:210px; object-fit:cover; display:block; transition: transform .6s ease; }
.post-v2__body{ padding:14px 14px 16px; display:grid; gap:6px; }
.post-v2__body h3{ margin:0; font-size:18px; line-height:1.25; }
.post-v2__body span{ font-size:12.5px; color:var(--ss-muted); }
.post-v2:hover{ transform: translateY(-8px); box-shadow: var(--ss-shadow-2); border-color: rgba(255,99,179,.45); }
.post-v2:hover .post-v2__img img{ transform: scale(1.08); }

/* ===========================================================
   ROADMAP V2
=========================================================== */
.roadmap-v2{ background: var(--ss-surface-1); }
.roadmap-v2__list{
  list-style:none; padding:0; margin:22px auto 0; max-width: 760px; display:grid; gap:10px;
}
.roadmap-v2__list li{
  position:relative; display:flex; align-items:center; gap:12px; padding:14px 16px;
  border-radius:16px; background: var(--ss-glass-strong); border:1px solid var(--ss-border);
  box-shadow: var(--ss-shadow-1); overflow:hidden; font-weight:800;
}
.roadmap-v2__list li span{
  min-width:64px; height:36px; display:grid; place-items:center; border-radius:999px;
  background: var(--ss-grad-2); color:#fff; font-size:13px; box-shadow: 0 8px 22px rgba(126,58,242,.35);
}
.roadmap-v2__list li::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(126,58,242,.10), rgba(36,209,255,.08), rgba(255,99,179,.10));
  opacity:0; transition:opacity .25s ease;
}
.roadmap-v2__list li:hover::after{ opacity:.9; }

/* ===========================================================
   CTA V2
=========================================================== */
.cta-v2{ background: var(--ss-surface-3); }
.cta-v2__box{
  position:relative; padding: clamp(22px,4.5vw,40px); border-radius:28px;
  background:
    radial-gradient(900px 400px at 0% -30%, rgba(126,58,242,.28), transparent 60%),
    radial-gradient(800px 360px at 100% -20%, rgba(36,209,255,.22), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,1));
  border:1px solid var(--ss-border); box-shadow: var(--ss-shadow-2); text-align:center; overflow:hidden;
}
html[data-theme="dark"] .cta-v2__box{
  background:
    radial-gradient(900px 400px at 0% -30%, rgba(126,58,242,.36), transparent 60%),
    radial-gradient(800px 360px at 100% -20%, rgba(36,209,255,.28), transparent 60%),
    linear-gradient(180deg, rgba(12,14,22,1), rgba(10,12,18,1));
}
.cta-v2__box h2{ font-size: clamp(24px,3.6vw,36px); margin:0 0 8px; }
.cta-v2__box p{ margin:0 auto 16px; max-width: 760px; color: var(--ss-muted); font-size: clamp(15px,2.1vw,18px); }
.cta-v2__actions{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.cta-v2__box::after{
  content:""; position:absolute; inset:-30%;
  background: conic-gradient(from 120deg, rgba(126,58,242,.18), transparent 35%, rgba(255,99,179,.18), transparent 70%, rgba(36,209,255,.18));
  animation: spinGlow 16s linear infinite; opacity:.55; filter: blur(60px);
}
@keyframes spinGlow{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .cta-v2__box::after{ animation:none; } }

/* ===========================================================
   ANIMACIONES
=========================================================== */
[data-animate]{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; will-change: opacity, transform; }
[data-animate].is-inview{ opacity:1; transform:translateY(0); }
[data-animate="fade-left"]{ transform:translateX(-18px); }
[data-animate="fade-right"]{ transform:translateX(18px); }
[data-animate="fade-left"].is-inview, [data-animate="fade-right"].is-inview{ transform:translateX(0); }
[data-animate="zoom"]{ transform:scale(.96); }
[data-animate="zoom"].is-inview{ transform:scale(1); }

@media (prefers-reduced-motion:reduce){
  [data-animate]{ opacity:1; transform:none; transition:none; }
}

/* ===========================================================
   PARCHE FINAL DE ALINEACIÓN (FORCE FIX)
   Pega esto al final de tu home.css para forzar el centrado
=========================================================== */

/* 1. Forzar el Grid a 2 columnas centradas */
.why-works__grid,
.why__grid,
.mentor-v2__grid,
.join__grid,
.community-v2__grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important; /* 50% y 50% */
  align-items: center !important; /* Esto arregla el desfase vertical */
  gap: 40px !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* 2. Restringir tamaño de imágenes y centrarlas */
.why-works__media,
.why__media,
.mentor-v2__media,
.join__media,
.community-v2__media {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  order: 2; /* Asegura que la imagen vaya después del texto en escritorio */
}

.why-works__media img,
.why__media img,
.mentor-v2__media img,
.join__media img,
.community-v2__media img {
  width: 100% !important;
  max-width: 480px !important; /* Tamaño ideal, ni muy grande ni muy chico */
  height: auto !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15) !important;
  display: block !important;
  margin: 0 auto !important;
}

/* 3. Texto a la izquierda (orden 1) */
.why-works__info,
.why__info,
.mentor-v2__info,
.join__info,
.community-v2__info {
  width: 100% !important;
  order: 1; /* Texto primero */
}

/* 4. Ajuste Móvil (Una sola columna) */
@media (max-width: 980px) {
  .why-works__grid,
  .mentor-v2__grid,
  .join__grid {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 30px !important;
  }
  
  /* En móvil: Imagen arriba, Texto abajo */
  .why-works__media, 
  .mentor-v2__media, 
  .join__media { 
    order: -1 !important; 
    margin-bottom: 10px !important;
  }
  
  .why-works__info,
  .mentor-v2__info,
  .join__info {
    order: 1 !important;
  }
}