/* ============================================================
   PROGRAMA — línea de tiempo de 12 semanas + CTA de mitad
   ============================================================ */
.programa{padding:var(--space-section) 0;border-top:1px solid #141414}

/* línea vertical con relleno según scroll */
.tl{position:relative;margin-top:56px;padding-left:clamp(28px,4vw,46px)}
.tl::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:2px;background:var(--color-line)}
.tl-fill{position:absolute;left:8px;top:0;width:2px;height:0;background:linear-gradient(180deg,var(--color-cyan),var(--color-blue) 55%,var(--color-coral));box-shadow:0 0 10px rgba(51,214,196,.5);transition:height .15s linear}

/* fases (cada una define su color en --fc) */
.fase{margin-bottom:clamp(40px,5vw,60px);position:relative}
.f1{--fc:var(--color-cyan)}
.f2{--fc:var(--color-blue)}
.f3{--fc:var(--color-coral)}
.fase-dot{position:absolute;left:calc(8px - clamp(28px,4vw,46px));top:6px;width:18px;height:18px;border-radius:var(--radius-pill);background:var(--color-bg);border:3px solid var(--color-line);transform:translateX(-8px);transition:border-color .3s,box-shadow .3s}
.fase.lit .fase-dot{border-color:var(--fc);box-shadow:0 0 14px var(--fc)}
.fase-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin-bottom:8px}
.fase-weeks{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fc)}
.fase-name{font-family:var(--font-heading);font-weight:900;font-size:clamp(26px,3.6vw,40px);letter-spacing:-.03em}
.fase-desc{color:var(--color-muted);font-size:16px;line-height:1.5;max-width:560px;margin-bottom:22px}

/* tarjetas de semana */
.weeks{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.week{border:1px solid var(--color-line);background:var(--color-panel);border-radius:var(--radius-card);padding:16px 18px;position:relative;overflow:hidden;transition:transform .2s,border-color .2s}
.week::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--fc);transform:scaleY(0);transform-origin:top;transition:transform .3s}
.week:hover{transform:translateY(-3px);border-color:#2c2c2c}
.week:hover::before{transform:scaleY(1)}
.week b{font-family:var(--font-mono);font-weight:400;font-size:12px;color:var(--fc);display:block;margin-bottom:7px}
.week p{font-size:14.5px;line-height:1.4;color:#e2e2e2;font-weight:500}
.week .hito{display:inline-block;font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.05em;color:var(--color-bg);background:var(--color-cyan);padding:3px 9px;border-radius:var(--radius-pill);margin-top:10px}

/* CTA de mitad de página */
.cta-mid{margin-top:clamp(56px,7vw,80px);border:1px solid var(--color-line);border-radius:var(--radius-hero);background:
  radial-gradient(ellipse 60% 120% at 50% -20%,rgba(51,214,196,.12),transparent 70%),linear-gradient(180deg,#0e0e0e,var(--color-bg));
  padding:clamp(38px,5vw,60px);text-align:center;position:relative;overflow:hidden}
.cta-mid h3{font-family:var(--font-heading);font-weight:900;font-size:clamp(26px,3.8vw,44px);letter-spacing:-.03em;line-height:1.02;max-width:20ch;margin:0 auto 26px;text-wrap:balance}
.cta-mid .btn-note{display:block;margin-top:16px}