/* ── CENTRO DE AYUDA ─────────────────────────────────────────────
   Réplica de la estructura de producción con la identidad de la
   landing: tarjetas por tipo de trabajo → panel con las dos caras
   (WhatsApp del cliente | Telegram del emprendedor), features por
   flujo, qué incluye, los tres pasos y el panel sección por sección.
   Depende de pieza5-legales.css (tokens, nav, pie, fondo, botones). */
.hero-ayuda{padding-bottom:clamp(20px,2.6vw,32px)}
.bloque{padding:clamp(38px,5.5vw,74px) 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(32px,6vw,74px);line-height:.92;letter-spacing:-.3px;text-transform:uppercase}
.lead{font-size:clamp(16px,1.9vw,19px);line-height:1.62;color:var(--c300);max-width:56ch;margin-top:clamp(16px,2vw,22px);text-wrap:pretty}
.lead a{color:var(--vTxt);text-decoration:underline;text-decoration-color:var(--vB);text-underline-offset:3px}
.lead a:hover{text-decoration-color:var(--v)}

/* ── Tarjetas: una por tipo de trabajo ─────────────────────────── */
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,286px),1fr));gap:clamp(12px,1.6vw,16px)}
.tj{display:flex;flex-direction:column;gap:9px;text-align:left;padding:clamp(18px,2.2vw,24px);border:1px solid var(--g800);border-radius:4px;background:linear-gradient(180deg,var(--vSoft),transparent 62%),var(--g900);color:var(--c100);font-family:inherit;cursor:pointer;position:relative;isolation:isolate;overflow:hidden;transition:transform 280ms cubic-bezier(.2,.7,.2,1),border-color 240ms ease,box-shadow 280ms ease}
.tj::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity 300ms ease;background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%),rgba(108,99,255,.20),transparent 70%)}
.tj:hover{transform:translateY(-4px);border-color:var(--v);box-shadow:0 16px 44px rgba(0,0,0,.42),0 0 0 1px rgba(108,99,255,.32)}
.tj:hover::before{opacity:1}
.tj:focus-visible{outline:2px solid var(--v);outline-offset:3px}
.tj .l{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--c500)}
.tj .nm{font-family:var(--display);font-size:clamp(24px,2.8vw,32px);line-height:1;letter-spacing:.2px;text-transform:uppercase}
.tj .qes{font-size:14px;line-height:1.6;color:var(--c500);text-wrap:pretty}
.tj .pie-tj{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:12px}
.tj .ver{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--c500);white-space:nowrap;transition:color 200ms ease,transform 220ms cubic-bezier(.4,0,.2,1)}
.tj:hover .ver{color:var(--v);transform:translateX(3px)}
.tj[aria-selected="true"]{border-color:var(--v);background:linear-gradient(180deg,rgba(108,99,255,.18),transparent 62%),var(--g900)}
.tj[aria-selected="true"] .ver{color:var(--v)}
.cnt{font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--vTxt);background:var(--vSoft);border:1px solid var(--vB);border-radius:3px;padding:4px 8px;white-space:nowrap;flex:none}
@media (prefers-reduced-motion:reduce){.tj:hover{transform:none}.tj:hover .ver{transform:none}}

/* ── Panel de detalle del flujo elegido ───────────────────────── */
.detalles{padding-bottom:clamp(30px,4vw,52px);position:relative;z-index:1}
.detalle{border:1px solid var(--vB);border-radius:6px;padding:clamp(20px,3vw,38px);background:linear-gradient(180deg,rgba(108,99,255,.07),transparent 46%),var(--g900);scroll-margin-top:84px}
.det-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,min(40%,400px));gap:clamp(16px,3vw,44px);align-items:start;padding-bottom:clamp(18px,2.4vw,26px);border-bottom:1px solid rgba(245,244,242,.07)}
@media (max-width:860px){.det-head{grid-template-columns:minmax(0,1fr)}}
.det-head h2{font-family:var(--display);font-size:clamp(30px,4.6vw,58px);line-height:.94;letter-spacing:-.2px;text-transform:uppercase;margin:0 0 12px}
.det-qes{font-size:clamp(16px,1.8vw,18px);line-height:1.55;color:var(--c100);align-self:center;text-wrap:pretty}
.flujo{display:flex;flex-wrap:wrap;align-items:center;gap:5px 2px;margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;line-height:1.7}
.flujo span{color:var(--c300)}
.flujo i{font-style:normal;color:var(--vTxt);display:inline-block;position:relative;top:-.5px;padding:0 .34em}
.detalle h3{font-family:var(--mono);font-size:9.5px;font-weight:400;letter-spacing:.15em;text-transform:uppercase;color:var(--c500);margin:clamp(24px,3vw,34px) 0 14px}
.feat{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:11px clamp(18px,2.6vw,34px)}
.feat li{display:block;position:relative;padding-left:16px;font-size:15px;line-height:1.6;color:var(--c300);text-wrap:pretty}
.feat li::before{content:'';position:absolute;left:0;top:.7em;width:5px;height:5px;border-radius:50%;background:var(--v)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips span{font-size:13px;line-height:1.4;color:var(--c300);border:1px solid var(--g800);border-radius:999px;padding:6px 12px;background:var(--g950);white-space:nowrap}
.detalle .destacado{margin-top:18px;padding:15px 17px;border-left:2px solid var(--v);background:var(--vSoft)}
.detalle .destacado p{font-size:14.5px;line-height:1.65;color:var(--c100);text-wrap:pretty}

/* ── Las dos caras ────────────────────────────────────────────── */
.caras{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));gap:clamp(16px,2.4vw,28px);margin-top:clamp(20px,2.6vw,28px)}
.cara{display:flex;flex-direction:column;gap:12px;min-width:0}
.cara .top{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--c500)}
.cara .top i{width:7px;height:7px;border-radius:50%;flex:none;display:block}
.cara .top i.v{background:var(--green);box-shadow:0 0 0 3px var(--gSoft)}
.cara .top i.t{background:var(--v);box-shadow:0 0 0 3px var(--vSoft)}

/* proporción de celular real, igual que las páginas de flujo: angosto
   y alto. A 340 de ancho parecía una tablet. */
.celu{width:100%;max-width:290px;border-radius:32px;padding:6px;background:#0B0A09;box-shadow:0 0 0 1px var(--g700),0 26px 60px rgba(0,0,0,.5)}
.celu .scr{background:#0E1418;border-radius:27px;overflow:hidden;display:flex;flex-direction:column;min-height:548px}
.celu .cab{display:flex;align-items:center;gap:9px;padding:13px;background:#1B2429;border-bottom:1px solid rgba(255,255,255,.06)}
.celu .cab .av{border-radius:50%;flex:none}
.celu .cab b{font-size:12.5px;font-weight:600;letter-spacing:-.1px;display:block}
.celu .cab em{display:block;font-style:normal;font-size:9.5px;color:#8FA3AC;margin-top:1px}
.celu .chat{flex:1;padding:11px;display:flex;flex-direction:column;gap:7px}
.celu .campo{display:flex;align-items:center;gap:9px;padding:10px 11px 13px;background:#1B2429;font-size:11px;color:#7C8F98}
.celu .campo u{flex:1;text-decoration:none;background:#0E1418;border-radius:999px;padding:8px 12px}
.celu .campo b{width:26px;height:26px;border-radius:50%;background:#1DB954;flex:none}
/* misma convención que pieza5-flujo.css: `cli` es el mensaje del
   cliente y va saliente (verde, a la derecha); sin clase es el
   asistente, entrante y gris. */
.bur{max-width:84%;padding:8px 11px;border-radius:9px;font-size:12.5px;line-height:1.42;background:#1F2C33;color:#F2F5F6;text-wrap:pretty}
.bur.cli{align-self:flex-end;background:#0F3D2E;color:#EAF6F0}

/* El lado de Telegram va en el MISMO marco de teléfono que el de
   WhatsApp: en producción las dos caras son dos celulares del mismo
   alto, no un teléfono contra una tarjeta flotante. */
.tg{width:100%;max-width:290px;border-radius:32px;padding:6px;background:#0B0A09;box-shadow:0 0 0 1px var(--g700),0 26px 60px rgba(0,0,0,.5)}
.tg .scr-tg{background:#EEF2F5;border-radius:27px;overflow:hidden;display:flex;flex-direction:column;min-height:548px}
.tg .cuerpo{flex:1;padding:11px;display:flex;flex-direction:column;gap:9px}
.tg .campo-tg{display:flex;align-items:center;gap:9px;padding:10px 11px 13px;background:#fff;border-top:1px solid #DDE4E9;font-size:11.5px}
.tg .campo-tg u{flex:1;text-decoration:none;background:#EEF2F5;border-radius:999px;padding:8px 12px;color:#8B959D}
.tg .campo-tg b{width:26px;height:26px;border-radius:50%;background:#3A93E0;flex:none;display:grid;place-items:center;color:#fff;font-size:12px}
.tg-cab{display:flex;align-items:center;gap:9px;padding:13px;background:#fff;border-bottom:1px solid #DDE4E9}
.tg-cab .ic{width:29px;height:29px;border-radius:50%;background:var(--v);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.tg-cab b{font-size:13px;font-weight:600;display:block;letter-spacing:-.1px;color:#15181B}
.tg-cab em{font-style:normal;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:#8B959D;display:block;margin-top:1px}
.tg-card{border-radius:11px;padding:13px 14px;background:#fff;box-shadow:0 1px 2px rgba(20,24,27,.10)}
.tg-t{font-size:12.5px;font-weight:600;color:#15181B;line-height:1.3;margin-bottom:10px}
.tg-card dl{display:flex;flex-direction:column;gap:7px;margin-bottom:13px}
.tg-card dl>div{display:grid;grid-template-columns:66px minmax(0,1fr);gap:8px}
.tg-card dt{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:#8B959D;padding-top:.2em}
.tg-card dd{font-size:12px;line-height:1.45;color:#3C444A;margin:0;min-width:0}
.tg-btns{display:flex;flex-wrap:wrap;gap:7px}
.tg-btns span{flex:1;min-width:104px;text-align:center;font-size:11.5px;font-weight:600;padding:10px 8px;border-radius:8px;background:#fff;color:#2C7FD6;box-shadow:0 1px 2px rgba(20,24,27,.10)}
.tg-btns span.on{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}

/* ── Qué incluye · pasos · vistas del panel ───────────────────── */
.incluye{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px clamp(20px,3vw,44px);margin-top:clamp(22px,3vw,34px)}
/* La viñeta va absoluta, no como ítem flex: en flex el <b> de entrada
   se vuelve un ítem propio y la frase se parte en dos columnas, con el
   gap metiéndose antes de la coma. Así el <b> sigue siendo inline. */
.incluye li{display:block;position:relative;padding:11px 0 11px 17px;font-size:15.5px;line-height:1.62;color:var(--c300);border-top:1px solid rgba(245,244,242,.07);text-wrap:pretty}
.incluye li::before{content:'';position:absolute;left:0;top:calc(11px + .72em);width:5px;height:5px;border-radius:50%;background:var(--v)}
.incluye b{color:var(--c100);font-weight:600}
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:clamp(16px,2.4vw,30px);margin-top:clamp(10px,1.6vw,18px)}
.pasos>div{display:flex;flex-direction:column;gap:9px}
.np{font-family:var(--display);font-size:clamp(46px,6vw,80px);line-height:.82;color:var(--v)}
.pasos h3{font-family:var(--display);font-size:clamp(22px,2.6vw,30px);font-weight:400;letter-spacing:.2px;text-transform:uppercase;line-height:1.02}
.pasos p{font-size:15px;line-height:1.65;color:var(--c300);text-wrap:pretty}
/* ── El panel, vivo ─────────────────────────────────────────────
   Las pestañas eligen la sección y el panel de la Pieza 3 se monta
   adentro de la ventana de Chrome, a su tamaño de diseño y escalado
   a la columna. No son capturas: se puede navegar. */
.pnav{display:flex;flex-wrap:wrap;gap:7px;margin-top:clamp(22px,3vw,32px)}
.pt{display:inline-flex;align-items:center;gap:9px;padding:10px 15px;border-radius:3px;border:1px solid var(--g800);background:var(--g900);color:var(--c300);font-family:inherit;font-size:14px;font-weight:600;letter-spacing:-.1px;cursor:pointer;transition:border-color 200ms ease,color 200ms ease,background 200ms ease,transform 200ms cubic-bezier(.4,0,.2,1)}
.pt .n{font-family:var(--mono);font-size:9px;font-weight:400;letter-spacing:.1em;color:var(--c500);transition:color 200ms ease}
.pt:hover{color:var(--c100);border-color:var(--g700);transform:translateY(-1px)}
.pt:focus-visible{outline:2px solid var(--v);outline-offset:3px}
.pt.on{background:linear-gradient(180deg,rgba(108,99,255,.18),transparent 70%),var(--g900);border-color:var(--v);color:var(--c100)}
.pt.on .n{color:var(--vTxt)}
@media (prefers-reduced-motion:reduce){.pt:hover{transform:none}}
.pdesc{margin:clamp(14px,1.8vw,18px) 0 clamp(16px,2vw,20px);font-size:15.5px;line-height:1.6;color:var(--c300);max-width:60ch;text-wrap:pretty}
.pz{position:relative;overflow:hidden;border-radius:8px}
.pz .pz-in{transform-origin:0 0;width:max-content}
.pnota{margin-top:14px;font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--c500);line-height:1.7}
.modos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(14px,2vw,20px)}
.modos>div{border:1px solid var(--g800);border-radius:4px;padding:clamp(18px,2.2vw,24px);background:var(--g900);display:flex;flex-direction:column;gap:10px}
.modos .top{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--c500)}
.modos .top i{width:7px;height:7px;border-radius:50%;flex:none;display:block}
.modos .top i.t{background:var(--v);box-shadow:0 0 0 3px var(--vSoft)}
.modos .top i.w{background:var(--c300);box-shadow:0 0 0 3px rgba(245,244,242,.08)}
.modos p{font-size:14.5px;line-height:1.65;color:var(--c300);text-wrap:pretty}

.cierre-ayuda{padding:clamp(46px,7vw,96px) 0;text-align:center;position:relative;z-index:1;background:radial-gradient(ellipse at 50% 0%,rgba(108,99,255,.15),transparent 62%)}
.cierre-ayuda .h2{margin-bottom:18px}
.cierre-ayuda .lead{margin:0 auto 26px}
.ctas{display:flex;flex-wrap:wrap;gap:11px;justify-content:center}

/* El paso a paso es la acción principal del panel: botón violeta y
   centrado arriba de los teléfonos, como en producción. */
.btn.vio{background:var(--v);color:#fff}
.btn.vio:hover{background:var(--v2);color:#fff}
.ver-flujo{align-self:center;margin:clamp(18px,2.4vw,26px) auto clamp(4px,1vw,10px)}