/* ============================================================
   FUNNEL MÉTODO TBC · sistema visual compartido
   Hereda el lenguaje del landing (Home.html): dark, Helvetica, pink.
   ============================================================ */
:root{
  --bg:#0a0a0b;
  --card:#141416;
  --card-2:#1a1a1d;
  --line:#262629;
  --line-soft:#1e1e21;
  --fg:#f4f2ee;
  --fg-mid:#b6b4b0;
  --fg-soft:#7d7b78;
  --pink:#ED1B69;
  --pink-soft:rgba(237,27,105,.12);
  --pink-line:rgba(237,27,105,.32);
  --green:#25D366;
  --font-sans:'Helvetica Neue','Helvetica','Arial',sans-serif;
  --font-mono:'Helvetica Neue','Helvetica','Arial',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  letter-spacing:-.005em;
  line-height:1.45;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}

/* ---------- Topbar (linea, sin nav) ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(10,10,11,.85);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.topbar .row{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  height:64px;max-width:1080px;margin:0 auto;padding:0 24px;
}
.topbar .cw-logo{display:block;height:34px;width:auto;}
.step-pill{
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-soft);
  white-space:nowrap;
}
.step-pill b{color:var(--pink);}

/* ---------- Progreso 4 pasos ---------- */
.progress{
  max-width:1080px;margin:0 auto;width:100%;padding:18px 24px 0;
  display:flex;align-items:center;gap:10px;
}
.progress .seg{
  flex:1;height:3px;background:var(--line);position:relative;overflow:hidden;
}
.progress .seg.done{background:var(--pink);}
.progress .seg.active::after{
  content:"";position:absolute;inset:0;width:55%;background:var(--pink);
}
.progress .pnum{
  font-family:var(--font-mono);font-size:10px;font-weight:700;
  letter-spacing:.12em;color:var(--fg-soft);flex:0 0 auto;
}

/* ---------- Layout ---------- */
.app{
  flex:1;width:100%;max-width:1080px;margin:0 auto;padding:0 24px;
  display:flex;flex-direction:column;
}
.stage{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:54px 0;
}

/* ---------- Tipos ---------- */
.eyebrow{
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--pink);
  display:block;margin-bottom:18px;
}
h1.headline{
  font-weight:700;font-size:clamp(34px,5.4vw,60px);line-height:.96;
  letter-spacing:-.04em;text-wrap:balance;
}
h1.headline .pk{color:var(--pink);}
.lede{
  font-size:clamp(17px,2vw,21px);color:var(--fg-mid);line-height:1.55;
  max-width:54ch;margin-top:20px;text-wrap:pretty;
}
.lede b{color:var(--fg);font-weight:600;}
.mono-note{
  font-family:var(--font-mono);font-size:12px;font-weight:600;
  letter-spacing:.04em;color:var(--fg-soft);line-height:1.6;
}
.mono-note a{color:var(--pink);}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-family:var(--font-sans);font-weight:700;font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;
  padding:19px 26px;border:1.5px solid transparent;cursor:pointer;
  transition:transform .14s ease,background .14s ease,opacity .14s ease,color .14s;
  width:100%;text-align:center;
}
.btn .arw{font-size:1.15em;line-height:1;}
.btn--pink{background:var(--pink);color:#fff;}
.btn--pink:hover{background:#ff2b78;}
.btn--green{background:var(--green);color:#063d1c;}
.btn--green:hover{background:#33e072;}
.btn--ghost{background:transparent;color:var(--fg);border-color:var(--line);}
.btn--ghost:hover{border-color:var(--fg);}
.btn:active{transform:scale(.99);}
.btn[disabled],.btn.is-locked{
  opacity:.4;cursor:not-allowed;pointer-events:none;
  background:var(--card-2);color:var(--fg-soft);border-color:var(--line);
}

/* ---------- Footer ---------- */
.foot{
  padding:26px 24px 36px;text-align:center;border-top:1px solid var(--line-soft);
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-soft);
}
.foot .pk{color:var(--pink);}

/* ---------- Entrada suave (nunca oculta) ----------
   El contenido SIEMPRE es opaco. La entrada solo desplaza la posición,
   así que si una transición se congela el contenido sigue visible. */
@media (prefers-reduced-motion:no-preference){
  body.js-reveal .reveal{transform:translateY(18px);}
  body.js-reveal .reveal.in{transform:none;transition:transform .55s cubic-bezier(.2,.7,.2,1);}
}

@media(min-width:820px){
  .topbar .row{padding:0 48px;}
  .progress{padding:22px 48px 0;}
  .app{padding:0 48px;}
  .stage{padding:72px 0;}
  .btn{width:auto;}
}
@media(min-width:820px){
  .btn:hover{transform:translateY(-2px);}
}