/* ============================================================
   JN ∴ — /como-trabajamos · estilos de página
   Página editorial: el proceso demo-first en 4 pasos.
   ============================================================ */

/* ---------- HERO ---------- */
.ct-hero{position:relative;padding-top:clamp(140px,18vh,200px);padding-bottom:clamp(56px,8vw,96px);overflow:hidden}
.ct-hero__inner{position:relative;z-index:2;max-width:880px}
.ct-hero h1{margin:18px 0 0;font-size:clamp(44px,7vw,88px)}
.ct-hero__sub{margin:26px 0 34px;max-width:48ch}
.ct-hero__cta{display:flex;gap:14px;flex-wrap:wrap}
/* mini rail preview */
.ct-rail{display:flex;gap:0;margin-top:clamp(40px,6vw,64px);border-top:1px solid var(--hair);padding-top:34px}
.ct-rail__item{flex:1;padding-right:24px;position:relative}
.ct-rail__item::before{content:"";position:absolute;top:-35px;left:0;width:24px;height:2px;background:var(--gold)}
.ct-rail__n{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--gold)}
.ct-rail__t{font-family:var(--display);font-size:clamp(17px,1.8vw,21px);margin-top:8px;line-height:1.1}
.ct-rail__d{font-size:12.5px;color:var(--muted);margin-top:6px;font-family:var(--mono)}

/* ---------- PASOS A DETALLE ---------- */
.steps-d{position:relative;margin-top:8px}
.step-d{display:grid;grid-template-columns:88px 1fr;gap:clamp(20px,3vw,44px);padding:clamp(36px,5vw,64px) 0;border-top:1px solid var(--hair);position:relative}
.step-d:first-child{border-top:0}
.step-d__num{font-family:var(--display);font-size:clamp(40px,5vw,64px);color:var(--gold);line-height:1;position:relative}
.step-d__num::after{content:"";position:absolute;left:50%;top:calc(100% + 14px);bottom:-64px;width:1px;background:var(--hair)}
.step-d:last-child .step-d__num::after{display:none}
.step-d__head{margin-bottom:24px}
.step-d__tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.step-d__t{font-family:var(--display);font-weight:500;font-size:clamp(26px,3.4vw,40px);line-height:1.05;margin:10px 0 0}
.step-d__lead{color:var(--lead);font-size:clamp(15px,1.7vw,18px);line-height:1.55;margin:14px 0 0;max-width:54ch}
.step-d__facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:14px;overflow:hidden;margin-top:24px}
.fact{background:var(--ink-soft);padding:18px 20px}
.fact__l{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:7px;margin-bottom:8px}
.fact__l .ico{width:15px;height:15px}
.fact__v{font-size:14px;color:var(--lead);line-height:1.45}
.section--soft .step-d__facts,.section--soft .fact{background:var(--ink-2)}

/* ---------- HONESTIDAD ---------- */
.ct-honest{position:relative;text-align:center;overflow:hidden}
.ct-honest__glow{display:none}
.ct-honest .wrap{position:relative;z-index:2}
.ct-honest__q{font-family:var(--display);font-weight:500;font-style:italic;font-size:clamp(26px,4.4vw,52px);line-height:1.14;max-width:20ch;margin:0 auto;text-wrap:balance}
.ct-honest__q .gold{font-style:normal;color:var(--gold)}
.ct-honest__by{margin-top:24px;font-family:var(--mono);font-size:13px;color:var(--muted);letter-spacing:.04em}

/* ---------- RESPONSIVE ---------- */
@media (max-width:880px){
  .ct-rail{flex-direction:column;gap:24px;border-top:0;padding-top:0}
  .ct-rail__item{padding-right:0}
  .ct-rail__item::before{display:none}
  .step-d{grid-template-columns:1fr;gap:14px}
  .step-d__num::after{display:none}
  .step-d__facts{grid-template-columns:1fr}
}
@media (max-width:560px){
  .ct-hero__cta .btn{width:100%}
}