/* ---------- 5 · Cómo funciona ---------- */
.how-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; list-style: none; padding: 0; margin: 0; }
.how-step { position: relative; padding: clamp(14px, 2.4vh, 22px); border-radius: 22px; border: 1px solid var(--line); background: var(--glass); display: grid; gap: clamp(8px, 1.4vh, 12px); align-content: start; }
.how-step:not(:last-child)::after { content: ""; position: absolute; right: -15px; top: 40%; width: 16px; border-top: 1px dashed var(--line-2); }
.how-n { font-size: 11px; letter-spacing: .1em; color: var(--accent); }
.how-step h3 { font-size: clamp(16px, 2.6vh, 20px); letter-spacing: -.03em; }
.how-step p { font-size: clamp(12.5px, 1.8vh, 14px); line-height: 1.6; }
.mock { height: clamp(96px, 21vh, 190px); border-radius: 14px; border: 1px solid var(--line); background: var(--field); padding: 12px; display: grid; gap: 8px; align-content: center; overflow: hidden; }
.mock-input { border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 600; color: var(--strong); }
.mock-chips { display: flex; gap: 6px; }
.mock-chips i { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-size: 12px; color: var(--accent); background: color-mix(in srgb, var(--sky) 10%, transparent); border: 1px solid color-mix(in srgb, var(--sky) 24%, transparent); }
.mock-chips i:first-child { background: var(--sky); color: var(--accent-ink); }
.mock-lines b,
.sheet-lines b { display: block; height: 6px; border-radius: 3px; background: var(--line); margin: 5px 0; }
.mock-lines b:nth-child(2),
.sheet-lines b:nth-child(2) { width: 78%; }
.mock-lines b:nth-child(3),
.sheet-lines b:nth-child(3) { width: 52%; }
.mock-live { padding: 0; align-content: stretch; background: var(--card); }
.mock-live .ring-stage { height: 100%; display: grid; place-items: center; }
.mock-live svg { width: 100%; max-height: 100%; }
.mock-sheet { background: #fff; border-color: var(--line-2); }
:root:not([data-theme="light"]) .mock-sheet { background: #EAF1F8; }
.sheet-head { display: block; height: 12px; width: 46%; border-radius: 3px; background: var(--navy); }
.sheet-lines b { background: #C4D2E0; }
.sheet-total { display: flex; justify-content: space-between; margin-top: 4px; padding: 6px 8px; border-radius: 6px; background: var(--navy); }
.sheet-total i { display: block; height: 6px; width: 28%; background: rgba(255, 255, 255, .8); border-radius: 3px; }
.sheet-total i:last-child { width: 20%; background: var(--amber); }
.how-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: clamp(12px, 2.6vh, 28px); }
.how-cta p { font-size: 12.5px; color: var(--muted); max-width: 36ch; }
.m-agenda { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 3px; width: 100%; }
.m-agenda span { border-radius: 3px; background: var(--line); }
.m-agenda span.on { background: color-mix(in srgb, var(--sky) 70%, transparent); }
.m-agenda span.on2 { background: color-mix(in srgb, var(--mint) 70%, transparent); }
.m-list { display: grid; gap: 4px; width: 100%; align-content: center; }
.m-list div { display: flex; align-items: center; gap: 5px; }
.m-list i { width: 9px; height: 9px; border-radius: 50%; background: var(--sky); flex: none; }
.m-list b { height: 4px; border-radius: 2px; background: var(--line-2); flex: 1; }
.m-list b:last-child { flex: .5; }
.m-pos { display: grid; gap: 3px; width: 100%; align-content: center; }
.m-pos div { display: flex; justify-content: space-between; gap: 6px; }
.m-pos b { height: 4px; border-radius: 2px; background: var(--line-2); width: 55%; }
.m-pos i { height: 4px; border-radius: 2px; background: var(--line-2); width: 18%; }
.m-pos div:last-child b,
.m-pos div:last-child i { background: var(--amber); }
.m-bars { display: flex; align-items: flex-end; gap: 4px; width: 100%; }
.m-bars span { flex: 1; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--mint) 65%, transparent); }
.m-chat { display: grid; gap: 4px; width: 100%; align-content: center; }
.m-chat span { height: 8px; width: 62%; border-radius: 6px; background: var(--line-2); }
.m-chat span:nth-child(2) { margin-left: auto; width: 48%; background: color-mix(in srgb, var(--mint) 60%, transparent); }
.m-chat span:nth-child(3) { width: 38%; }
.m-chart { width: 100%; }
.m-chart svg { width: 100%; height: 100%; }
.m-chart polyline { fill: none; stroke: var(--sky); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Pantallas bajas de computadora: tarjetas más compactas, mismo texto. */
@media (min-width: 901px) and (max-height: 880px) {
  .mock { height: clamp(80px, 17vh, 150px); }
  .how-step p { font-size: 13px; line-height: 1.5; }
}

/* Celulares: los tres pasos uno debajo del otro, cada uno con su ilustración y su texto completo. */
@media (max-width: 760px) {
  .how-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .how-step::after { display: none; }
  .mock { height: clamp(96px, 16vh, 130px); }
  .mock-live .ring-stage { padding: 4px; }
  .how-cta .btn { flex: 1 1 100%; min-height: 48px; justify-content: center; }
}
@media (max-width: 900px) {
  .how-step::after { display: none; }
}