/* ── PÁGINA DE FLUJO ─────────────────────────────────────────────
   Réplica de /ayuda/<forma>: cabecera con ícono, selector de rubro,
   paso a paso, las dos caras (WhatsApp del cliente | Telegram del
   emprendedor) y las features destacadas con su mock cada una.
   Depende de pieza5-legales.css (tokens, nav, pie, fondo, botones). */
.f-head{padding:clamp(96px,13vw,150px) 0 clamp(24px,3vw,36px);position:relative;z-index:1}
.f-top{display:flex;align-items:center;gap:14px;margin-bottom:clamp(16px,2vw,22px)}
.f-ic{width:52px;height:52px;border-radius:12px;display:grid;place-items:center;font-size:25px;background:linear-gradient(180deg,rgba(108,99,255,.22),transparent 70%),var(--g900);border:1px solid var(--vB);flex:none}
.f-top .glosa{display:inline-flex;align-items:center;gap:10px;color:var(--vTxt);margin:0}
.f-top .glosa::before{content:'';width:22px;height:1.5px;background:var(--v);flex:none}
.f-head h1{font-family:var(--display);font-size:clamp(40px,8.4vw,104px);line-height:.9;letter-spacing:-.4px;text-transform:uppercase;max-width:22ch}
.f-head .bajada{margin-top:clamp(18px,2.4vw,26px);padding-top:clamp(16px,2vw,20px);border-top:1px solid rgba(245,244,242,.07);display:flex;flex-wrap:wrap;gap:12px 26px;align-items:baseline}
.f-head .bajada p{font-size:clamp(16px,1.9vw,19.5px);line-height:1.6;color:var(--c300);max-width:62ch;text-wrap:pretty}

/* ── Selector de rubro ─────────────────────────────────────────── */
.rub{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(18px,2.4vw,26px)}
.rub button{font-family:inherit;font-size:14.5px;font-weight:600;letter-spacing:-.1px;padding:9px 17px;border-radius:999px;border:1px solid var(--g700);background:transparent;color:var(--c300);cursor:pointer;transition:background 200ms ease,border-color 200ms ease,color 200ms ease,transform 200ms cubic-bezier(.4,0,.2,1)}
.rub button:hover{color:var(--c100);border-color:var(--c500);transform:translateY(-1px)}
.rub button:focus-visible{outline:2px solid var(--v);outline-offset:3px}
.rub button.on{background:var(--v);border-color:var(--v);color:#fff}
@media (prefers-reduced-motion:reduce){.rub button:hover{transform:none}}

.bloque{padding:clamp(36px,5vw,70px) 0;position:relative;z-index:1}
.gl{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--c500);margin-bottom:clamp(14px,1.8vw,20px);display:inline-flex;align-items:center;gap:10px}
.gl::before{content:'';width:22px;height:1.5px;background:var(--v);flex:none}
.h2{font-family:var(--display);font-size:clamp(30px,5.4vw,66px);line-height:.94;letter-spacing:-.3px;text-transform:uppercase}
.lead{font-size:clamp(16px,1.9vw,19px);line-height:1.62;color:var(--c300);max-width:58ch;margin-top:clamp(14px,1.8vw,20px);text-wrap:pretty}
.lead a{color:var(--vTxt);text-decoration:underline;text-decoration-color:var(--vB);text-underline-offset:3px}

/* ── Paso a paso ───────────────────────────────────────────────── */
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:clamp(16px,2.2vw,28px);margin-top:clamp(16px,2vw,24px)}
.pasos>div{display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:1.5px solid var(--vB)}
.pasos .np{font-family:var(--display);font-size:clamp(34px,4.4vw,56px);line-height:.82;color:var(--v)}
.pasos h3{font-family:var(--display);font-size:clamp(19px,2.2vw,25px);font-weight:400;letter-spacing:.2px;text-transform:uppercase;line-height:1.04}
.pasos p{font-size:14.5px;line-height:1.62;color:var(--c300);text-wrap:pretty}

/* ── Las dos caras ─────────────────────────────────────────────── */
.caras{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:clamp(22px,3.4vw,52px);margin-top:clamp(20px,2.6vw,30px);justify-items:center}
.cara{display:flex;flex-direction:column;gap:4px;align-items:center;width:100%;max-width:296px}
.cara .t1{display:flex;align-items:center;gap:9px;font-family:var(--display);font-size:clamp(19px,2.1vw,24px);letter-spacing:.2px;text-transform:uppercase;line-height:1.1}
.cara .t1 em{font-style:normal;font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;color:var(--vTxt);background:var(--vSoft);border:1px solid var(--vB);border-radius:3px;padding:3px 7px}
.cara .t2{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--c500);margin-bottom:14px}

.tel{width:100%;border-radius:34px;padding:6px;background:#0B0A09;box-shadow:0 0 0 1px var(--g700),0 30px 70px rgba(0,0,0,.5)}
.tel .scr{border-radius:29px;overflow:hidden;display:flex;flex-direction:column;min-height:576px}
.tel .cab{display:flex;align-items:center;gap:9px;padding:13px 13px}
.tel .cab .fl{color:var(--c500);font-size:15px;line-height:1}
.tel .cab .av{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.tel .cab b{font-size:13px;font-weight:600;letter-spacing:-.1px;display:block}
.tel .cab em{font-style:normal;font-size:9.5px;display:block;margin-top:1px}
.tel .chat{flex:1;padding:11px 11px;display:flex;flex-direction:column;gap:7px}
.tel .dia{align-self:center;font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:999px;margin-bottom:4px}
.tel .campo{display:flex;align-items:center;gap:9px;padding:10px 11px 13px;font-size:11.5px}
.tel .campo u{flex:1;text-decoration:none;padding:9px 13px;border-radius:999px}
.tel .campo b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:13px;color:#fff}

/* WhatsApp · oscuro, como lo ve el cliente */
.wa .scr{background:#0E1418}
.wa .cab{background:#1B2429;border-bottom:1px solid rgba(255,255,255,.06)}
.wa .cab .av{background:var(--v);color:#fff}
.wa .cab b{color:#F2F5F6}
.wa .cab em{color:#8FA3AC}
.wa .dia{background:rgba(255,255,255,.07);color:#8FA3AC}
.wa .b{max-width:84%;padding:8px 11px;border-radius:9px;font-size:12.5px;line-height:1.42;background:#1F2C33;color:#F2F5F6;text-wrap:pretty}
.wa .b.cli{align-self:flex-end;background:#0F3D2E;color:#EAF6F0}
.wa .campo{background:#1B2429}
.wa .campo u{background:#0E1418;color:#7C8F98}
.wa .campo b{background:#1DB954}

/* Telegram · claro, es tu espacio de gestión */
.tg .scr{background:#EEF2F5}
.tg .cab{background:#fff;border-bottom:1px solid #DDE4E9}
.tg .cab .av{background:var(--v);color:#fff}
.tg .cab b{color:#15181B}
.tg .cab em{color:#8B959D;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase}
.tg .dia{background:rgba(20,24,27,.07);color:#6D767D}
.tg .card{background:#fff;border-radius:11px;padding:13px 14px;box-shadow:0 1px 2px rgba(20,24,27,.10)}
.tg .card dl{display:flex;flex-direction:column;gap:7px}
.tg .card .tt{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:#15181B;margin-bottom:9px}
.tg .card .ln{display:flex;gap:8px;font-size:12px;line-height:1.4;color:#3C444A}
.tg .card .ln i{font-style:normal;flex:none}
.tg .btns{display:flex;flex-wrap:wrap;gap:6px}
.tg .btns span{flex:1;min-width:104px;display:inline-flex;align-items:center;justify-content:center;gap:7px;background:#fff;border-radius:8px;padding:10px 8px;font-size:11.5px;font-weight:600;color:#2C7FD6;box-shadow:0 1px 2px rgba(20,24,27,.10)}
.tg .btns span.plena{background:#3A93E0;color:#fff}
.tg .msg{background:#fff;border-radius:11px;padding:10px 12px;font-size:12px;line-height:1.5;color:#3C444A;box-shadow:0 1px 2px rgba(20,24,27,.10);text-wrap:pretty}
.tg .campo{background:#fff;border-top:1px solid #DDE4E9}
.tg .campo u{background:#EEF2F5;color:#8B959D}
.tg .campo b{background:#3A93E0}
.caras-nota{margin-top:clamp(16px,2vw,22px);font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--c500);line-height:1.8}

/* ── Features destacadas · cada una con su mock ────────────────── */
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(14px,2vw,22px);margin-top:clamp(20px,2.6vw,30px)}
.ft{border:1px solid var(--g800);border-radius:6px;padding:clamp(16px,2vw,22px);background:linear-gradient(180deg,var(--vSoft),transparent 62%),var(--g900);display:flex;flex-direction:column;gap:14px;transition:transform 280ms cubic-bezier(.2,.7,.2,1),border-color 240ms ease,box-shadow 280ms ease}
.ft:hover{transform:translateY(-3px);border-color:var(--vB);box-shadow:0 14px 40px rgba(0,0,0,.38)}
@media (prefers-reduced-motion:reduce){.ft:hover{transform:none}}
.ft h3{font-family:var(--display);font-size:clamp(21px,2.3vw,27px);font-weight:400;letter-spacing:.2px;text-transform:uppercase;line-height:1.02;margin-top:auto}
.ft p{font-size:14.5px;line-height:1.62;color:var(--c300);text-wrap:pretty}
.mk{border-radius:8px;overflow:hidden}
.mk-mapa{background:#EEF2F5;padding:14px;display:flex;gap:11px;align-items:flex-start;color:#3C444A;font-size:13px;line-height:1.5}
.mk-mapa b{color:#15181B;display:block;font-size:13.5px}
.mk-mapa span{color:#6D767D;font-size:12px}
.mk-rec{background:#fff;color:#15181B;padding:15px 16px;display:flex;flex-direction:column;gap:9px}
.mk-rec .r1{display:flex;align-items:baseline;gap:10px;padding-bottom:9px;border-bottom:1px solid #DDE4E9}
.mk-rec .r1 b{font-size:13.5px;font-weight:700}
.mk-rec .r1 span{margin-left:auto;font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;color:#6D767D}
.mk-rec .nro{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:#8B959D}
.mk-rec .ln{display:flex;gap:10px;font-size:12.5px;color:#3C444A}
.mk-rec .ln em{margin-left:auto;font-style:normal;font-weight:600;color:#15181B;white-space:nowrap}
.mk-rec .pg{align-self:flex-start;font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;color:#0F7A3D;background:#E6F5EC;border:1px solid #B9E3C9;border-radius:3px;padding:4px 8px}
.mk-rec .dis{font-size:8.5px;line-height:1.5;color:#8B959D}
.mk-rem{background:#0E1418;padding:14px;display:flex;flex-direction:column;gap:8px}
.mk-rem .b{background:#1F2C33;color:#F2F5F6;border-radius:9px;padding:10px 12px;font-size:12.5px;line-height:1.45}
.mk-rem .bt{display:flex;gap:6px}
.mk-rem .bt span{flex:1;text-align:center;background:#1B2429;color:#5FC98C;border-radius:8px;padding:9px;font-size:12px;font-weight:600}
.mk-ag{background:#EEF2F5;padding:13px 14px;display:flex;flex-direction:column;gap:0;color:#15181B}
.mk-ag .hd{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;padding-bottom:9px}
.mk-ag .rw{display:flex;gap:12px;padding:8px 0;border-top:1px solid #DDE4E9;font-size:12.5px;color:#3C444A}
.mk-ag .rw b{font-family:var(--mono);font-size:11.5px;color:#15181B;flex:none;width:42px}

.cierre-f{padding:clamp(44px,6.5vw,90px) 0;text-align:center;position:relative;z-index:1;background:radial-gradient(ellipse at 50% 0%,rgba(108,99,255,.15),transparent 62%)}
.cierre-f .h2{margin-bottom:16px}
.cierre-f .lead{margin:0 auto 26px}
.ctas{display:flex;flex-wrap:wrap;gap:11px;justify-content:center}
.panel-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-top:clamp(18px,2.4vw,26px);padding:clamp(18px,2.4vw,26px);border:1px solid var(--vB);border-radius:6px;background:linear-gradient(180deg,var(--vSoft),transparent 70%),var(--g900)}
.panel-cta p{font-size:15px;line-height:1.6;color:var(--c300);max-width:52ch;text-wrap:pretty}
.ver-flujo{display:inline-flex;align-items:center;gap:9px;margin-top:18px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--vTxt)}
.ver-flujo:hover{color:var(--v)}