/*
 * Página «Cómo funciona».
 *
 * Se carga solo donde hace falta. Ver medmovil_assets() en inc/setup.php.
 */
/* ---------- Cómo funciona ---------- */
.cf-hero{background:radial-gradient(780px 440px at 82% -12%, var(--blue-tint), transparent 66%),
  linear-gradient(180deg,var(--surface),var(--paper)); padding-block:32px 52px}
.cf-hero-in{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center}
.cf-hero h1{font-size:clamp(2.1rem,4.2vw,3.2rem); margin-top:14px}
.cf-btns{display:flex; gap:11px; flex-wrap:wrap; margin-top:26px}
.cf-num{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.cf-num div{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  padding:20px; box-shadow:var(--shadow-s)}
.cf-num b{display:block; font-family:var(--f-d); font-weight:800; font-size:1.85rem;
  letter-spacing:-.035em; color:var(--blue); line-height:1.05}
.cf-num span{display:block; margin-top:6px; font-size:.82rem; color:var(--ink-3); line-height:1.4}

.cf-pasos{display:flex; flex-direction:column; gap:16px}
.cf-paso{position:relative; overflow:hidden; display:grid; grid-template-columns:96px 1fr; gap:26px;
  align-items:flex-start; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:28px 30px; transition:box-shadow .22s, border-color .22s}
.cf-paso:hover{box-shadow:var(--shadow-m); border-color:var(--line-strong)}
.cf-paso-ic{width:96px; height:96px; border-radius:28px; display:grid; place-items:center;
  background:linear-gradient(155deg,var(--blue),var(--navy)); color:#fff; box-shadow:var(--shadow-m)}
.cf-paso-n{font-family:var(--f-d); font-weight:800; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue)}
.cf-paso h2{font-size:clamp(1.25rem,2.1vw,1.6rem); margin-top:8px}
.cf-paso p{margin-top:10px; color:var(--ink-2); font-size:.97rem; line-height:1.6; max-width:62ch}
.cf-paso ul{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:9px 22px}
.cf-paso li{display:flex; align-items:center; gap:8px; font-size:.86rem; color:var(--ink-2)}
.cf-paso-big{position:absolute; right:22px; top:-18px; font-family:var(--f-d); font-weight:800;
  font-size:8rem; line-height:1; color:var(--blue); opacity:.05; pointer-events:none;
  letter-spacing:-.06em}

.cf-incluye{display:grid; grid-template-columns:1.25fr .75fr; gap:18px}
.cf-si,.cf-no{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  padding:26px}
.cf-si{border-left:4px solid var(--ok)}
.cf-no{border-left:4px solid var(--line-strong); background:var(--surface-2)}
.cf-si>b,.cf-no>b{display:flex; align-items:center; gap:10px; font-family:var(--f-d);
  font-size:1.02rem; margin-bottom:16px}
.cf-si ul,.cf-no ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.cf-si li,.cf-no li{position:relative; padding-left:20px; font-size:.93rem; color:var(--ink-2);
  line-height:1.5}
.cf-si li::before{content:""; position:absolute; left:0; top:9px; width:7px; height:7px;
  border-radius:50%; background:var(--ok)}
.cf-no li::before{content:""; position:absolute; left:0; top:12px; width:9px; height:1.5px;
  background:var(--ink-3)}
.cf-no p{margin-top:16px; font-size:.85rem; color:var(--ink-3); line-height:1.5}

.cf-pagos{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.cf-pago{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  padding:24px; transition:transform .2s, box-shadow .2s}
.cf-pago:hover{transform:translateY(-3px); box-shadow:var(--shadow-m)}
.cf-pago b{display:block; font-family:var(--f-d); font-size:1.05rem; margin-bottom:7px}
.cf-pago p{font-size:.9rem; color:var(--ink-2); line-height:1.55}

@media (max-width:1040px){
  .cf-hero-in{grid-template-columns:1fr; gap:32px}
  .cf-incluye{grid-template-columns:1fr}}
@media (max-width:860px){
  .cf-paso{grid-template-columns:1fr; gap:18px; padding:24px}
  .cf-paso-ic{width:72px; height:72px; border-radius:22px}
  .cf-paso-big{font-size:5rem; top:-8px; right:14px}
  .cf-pagos{grid-template-columns:1fr}
  .cf-num{grid-template-columns:repeat(2,1fr)}}