/* Páginas argentinas (26-oct): la portada (inicio-ar.html), el diagnóstico de cobranzas (/cobranzas/) y las de Clara (/tesoreria/), Vera (/atencion/) y Mateo
   (/comex/). El estilo es el de /us/assets/site.css, la «Grilla de puestos» de Javier; acá va solo lo que suman estas
   páginas. Si se toca site.css, se miran las cuatro y las de /us/. Sin precios: todo a consultar por WhatsApp. */

/* ── lo que comparten las cuatro ── */
.kick{font-family:var(--mono);font-size:12.5px;letter-spacing:-.01em;color:var(--cobalt-d)}
.hero .kick{margin-bottom:18px}
.sh .kick,.pr-hd .kick,.ficha-t .kick{margin-bottom:16px}
.pr-hd>div{position:sticky;top:110px}
.pr-hd>div .h2{position:static}
.pr-hd .note{margin-top:20px}
.paso-n{font-family:var(--mono);font-size:12px;color:var(--muted)}
.l-sm{display:none}
@media (max-width:1180px){.top-cta{margin-left:auto}}
@media (max-width:960px){.pr-hd>div{position:static}}
@media (max-width:720px){.top-cta{display:inline-flex}.top-cta .l-lg{display:none}.top-cta .l-sm{display:inline}}

/* ── las páginas de cada empleado ── */
/* el hero: quién es, qué hace y su tablero */
.hero-p h1{max-width:21ch;font-size:clamp(38px,5.2vw,72px)}
.quien{display:inline-flex;align-items:center;gap:12px;max-width:100%;margin-bottom:22px;padding:7px 10px 7px 8px;border:1px solid var(--line);border-radius:var(--r);background:var(--white);text-align:left}
.q-t{min-width:0}
.q-t b{display:block;font-size:15px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.q-t small{display:block;font-size:12.5px;color:var(--muted);line-height:1.25}
.quien .tag{margin-left:4px}
.f-k.ok{color:var(--green)}.f-k.bad{color:var(--red)}
.feed.st{height:auto;padding-bottom:236px;-webkit-mask:none;mask:none}
.feed.st .ev{height:auto;min-height:61px;padding-block:12px}
.feed.st .ev p{white-space:normal}
.av.n{background:var(--paper-2);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px}
.cmp div{padding:10px 12px;border-radius:2px;background:var(--paper);font-size:12px;color:var(--muted)}
.cmp strong{display:block;margin-top:2px;font-family:var(--mono);font-size:16px;font-weight:500;color:var(--red)}

/* con qué trabaja */
.usan{padding:clamp(32px,4vw,48px) var(--pad);text-align:center}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:16px}
.chips li{display:inline-flex;align-items:center;height:34px;padding:0 13px;border-radius:2px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);font-size:14px;font-weight:500;letter-spacing:-.01em;color:var(--ink-2)}

/* el puesto según los avisos, de un solo empleado */
.pu-r{padding:calc(var(--sec) - 15px) var(--pad) var(--sec)}
.pu-l small{display:block;margin-top:3px;font-size:13px;font-weight:400;letter-spacing:0;color:var(--muted);line-height:1.4}

/* la idea, en una frase */
.idea-in{padding-bottom:var(--sec)}
.idea-v{margin-top:clamp(40px,5vw,64px);padding:clamp(28px,4vw,56px) clamp(14px,4vw,56px);border-top:1px solid var(--line)}
.flujo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line);counter-reset:f}
.flujo li{border-left:1px solid var(--line);counter-increment:f}
.flujo li:first-child{border-left:0}
.flujo a{display:flex;flex-direction:column;gap:8px;height:100%;padding:24px clamp(18px,2.4vw,32px) 32px;transition:background .25s}
.flujo a::before{content:"0" counter(f);font-family:var(--mono);font-size:12px;color:var(--muted)}
.flujo a:hover{background:var(--white)}
.flujo h3{display:flex;align-items:center;gap:10px;font-size:clamp(21px,2vw,25px);font-weight:500;letter-spacing:-.03em}
.flujo h3 .chev{color:var(--cobalt)}
.flujo a:hover .chev{transform:translateX(3px)}
.flujo p{font-size:15.5px;color:var(--muted)}
.hace{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:22px var(--pad) 26px;border-top:1px solid var(--line)}
.hace p{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.hace .chips{justify-content:flex-start;margin-top:0}

/* lo que se ve en cada ficha */
.li{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--line-2);font-size:13.5px}
.li:last-child{border-bottom:0}
.li time{flex:none;width:52px;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.li>div{flex:1;min-width:0;color:var(--ink-2)}
.li b{display:block;font-weight:600;color:var(--ink)}
.li small{font-size:12px;color:var(--muted)}
.grp{padding:14px 18px 6px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.carta{margin:14px 16px;padding:14px 16px;border:1px solid var(--line-2);border-radius:2px;background:var(--paper);font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.carta p+p{margin-top:9px}
.para{display:flex;align-items:center;gap:10px;padding:14px 18px 0;font-size:13px;color:var(--muted)}
.para b{min-width:0;color:var(--ink)}
.pie-win{padding:12px 18px 14px;font-family:var(--mono);font-size:11.5px;line-height:1.5;color:var(--muted)}
.url{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 16px 16px;padding:10px 12px;border-radius:2px;box-shadow:inset 0 0 0 1px var(--line);font-family:var(--mono);font-size:11.5px;color:var(--muted);word-break:break-all}
.tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line-2);border-bottom:1px solid var(--line-2)}
.tres div{padding:12px 14px;background:var(--white);font-size:12px;color:var(--muted)}
.tres strong{display:block;margin-top:2px;font-family:var(--mono);font-size:15px;font-weight:500;color:var(--ink);white-space:nowrap}
.scroll{overflow-x:auto}
.win table{width:100%;min-width:440px;border-collapse:collapse;font-size:13.5px}
.win th{padding:11px 12px 11px 18px;border-bottom:1px solid var(--line-2);font-family:var(--mono);font-size:11px;font-weight:400;color:var(--muted);text-align:left;white-space:nowrap}
.win td{padding:13px 12px 13px 18px;border-bottom:1px solid var(--line-2);color:var(--ink-2);vertical-align:middle}
.win tr:last-child td{border-bottom:0}
.win td:first-child{min-width:170px}
.win td b{display:block;font-weight:600;color:var(--ink)}
.win td small{font-size:12px;color:var(--muted)}
.num{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl-pad{padding-bottom:170px}
.tbl-w table{min-width:860px}
.chat{display:flex;flex-direction:column;gap:8px;padding:18px 18px 22px}
.msg{max-width:80%;padding:9px 13px;border-radius:8px;font-size:13.5px;line-height:1.45}
.msg.in{align-self:flex-start;background:var(--paper);border-bottom-left-radius:2px;color:var(--ink-2)}
.msg.out{align-self:flex-end;background:var(--cobalt);border-bottom-right-radius:2px;color:#fff}
.sys{align-self:center;display:inline-flex;align-items:center;gap:7px;margin:6px 0;padding:4px 10px;border-radius:2px;background:var(--green-50);font-family:var(--mono);font-size:11.5px;color:var(--green)}
.sys::before{content:"";width:6px;height:6px;background:currentColor}
.sys.w{background:var(--ice);color:var(--cobalt-d)}
.ficha-v .f-a{position:relative;z-index:2;align-self:flex-end;width:min(100%,300px);margin:-36px -10px 0 0}
.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:10px 0 0;font-size:13px}
.kv dt{color:var(--muted)}.kv dd{font-weight:500;color:var(--ink)}
/* el adjunto dentro del teléfono: el link del estado de cuenta o el PDF que manda el forwarder */
.pz-ar{display:flex;align-items:center;gap:9px;margin:0 -3px 5px;padding:8px 9px;border-radius:7px;background:rgba(17,27,33,.055);font-size:12.5px;line-height:1.25}
.pz-ar i{flex:none;display:grid;place-items:center;width:30px;height:36px;border-radius:5px;background:#e5484d;color:#fff;font-style:normal;font-size:9px;font-weight:700}
.pz-ar i.l{background:var(--cobalt);font-size:14px}
.pz-ar b{display:block;font-weight:600;color:#111b21}
.pz-ar small{font-size:11px;color:#667781}

/* el cruce de papeles de Mateo: una línea baja por las dos hojas y marca lo que coincide y lo que no */
.cz-g{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hoja{min-width:0;background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-win);overflow:hidden}
.hoja h4{padding:11px 14px;border-bottom:1px solid var(--line-2);font-size:13.5px;font-weight:600;line-height:1.3}
.hoja h4 small{display:block;font-family:var(--mono);font-size:11px;font-weight:400;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cz-f{position:relative;display:flex;flex-direction:column;justify-content:center;height:54px;padding:0 32px 0 14px;border-bottom:1px solid var(--line-2);transition:background .35s}
.cz-f:last-child{border-bottom:0}
.cz-f small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cz-f b{font-family:var(--mono);font-size:13.5px;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums;transition:color .35s}
.cz-f::after{position:absolute;right:12px;top:50%;font-family:var(--mono);font-size:13px;font-weight:600;transform:translateY(-50%) scale(0);transition:transform .3s var(--ease)}
.cz-f.ok{background:var(--green-50)}.cz-f.ok b{color:var(--green)}.cz-f.ok::after{content:"✓";color:var(--green);transform:translateY(-50%) scale(1)}
.cz-f.bad{background:var(--red-50)}.cz-f.bad b{color:var(--red)}.cz-f.bad::after{content:"≠";color:var(--red);transform:translateY(-50%) scale(1)}
.cz-ln{position:absolute;z-index:2;left:-6px;right:-6px;top:-1px;height:2px;background:var(--cobalt);box-shadow:0 0 0 4px rgba(49,87,244,.12),0 0 18px rgba(49,87,244,.6);opacity:0;pointer-events:none;transition:transform .42s linear,opacity .3s}
.cz-r{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:10px;padding:14px;border-radius:var(--r);background:var(--white);box-shadow:var(--sh-float);font-size:13.5px;color:var(--ink-2)}
.cz-r p{flex:1 1 100%}
.js .cz-r{opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s var(--ease)}
.js .cz-r.vis{opacity:1;transform:none}

/* cuánto tiempo te devuelve (Mateo) */
.calc{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.entradas{display:flex;flex-direction:column;gap:26px;padding:clamp(24px,4vw,48px) var(--pad);background:var(--white)}
.campo label{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:15px;font-weight:500;letter-spacing:-.01em}
.campo output{font-family:var(--mono);font-size:16px;color:var(--cobalt);white-space:nowrap}
.campo input[type=range]{width:100%;margin:12px 0 0;accent-color:var(--cobalt)}
.campo small{display:block;margin-top:6px;font-size:13px;color:var(--muted)}
.salida{display:flex;flex-direction:column;justify-content:center;gap:26px;padding:clamp(24px,4vw,48px) var(--pad);background-color:var(--night);background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:40px 40px;color:#fff}
.salida .k{font-family:var(--mono);font-size:12px;color:var(--sky)}
.salida .v{margin-top:6px;font-size:clamp(44px,5.4vw,72px);font-weight:500;letter-spacing:-.045em;line-height:1}
.salida .v small{font-size:18px;font-weight:450;letter-spacing:-.01em;color:#c8d0f5}
.salida .aviso{padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-size:13.5px;color:#c8d0f5}

/* dónde estamos (Mateo) */
.dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.dos>div{padding:28px var(--pad) clamp(40px,5vw,64px)}
.dos>div+div{border-left:1px solid var(--line)}
.dos h3{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:clamp(21px,2vw,25px);font-weight:500;letter-spacing:-.03em}
.dos ul{margin-top:18px;border-bottom:1px solid var(--line)}
.dos li{padding:13px 0;border-top:1px solid var(--line);font-size:15.5px;color:var(--ink-2)}

@media (max-width:960px){
  .pu-r{padding-top:24px}
  .flujo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flujo li:nth-child(3){border-left:0}
  .flujo li:nth-child(n+3){border-top:1px solid var(--line)}
  .tbl-pad{padding-bottom:12px}
  .feed.st{padding-bottom:0}
  .calc,.dos{grid-template-columns:minmax(0,1fr)}
  .dos>div+div{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:720px){
  .flujo{grid-template-columns:minmax(0,1fr)}
  .flujo li{border-left:0}
  .flujo li+li{border-top:1px solid var(--line)}
  .ficha-v .f-a{align-self:stretch;width:auto;margin:12px 0 0}
  .li{flex-wrap:wrap;row-gap:6px}
  .li>div{flex:1 1 170px}
  .tres div{padding:10px}
  .tres strong{font-size:13.5px}
  .cz-g{gap:6px}
  .cz-f{padding:0 24px 0 10px}.cz-f::after{right:8px}
  .hoja h4{padding:10px}
}
@media (prefers-reduced-motion:reduce){
  .js .cz-r{opacity:1;transform:none}
}
/* la tabla de arriba en el celular: cada fila apilada, sin columnas cortadas */
@media (max-width:560px){
  .hero-p .win table,.hero-p .tbl-w table{min-width:0}
  .hero-p .win thead{display:none}
  .hero-p .win tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 12px;padding:12px 14px;border-bottom:1px solid var(--line-2)}
  .hero-p .win tbody tr:last-child{border-bottom:0}
  .hero-p .win td{padding:0;border:0}
  .hero-p .win td:first-child{min-width:0}
  .hero-p .tbl-pad:not(.tbl-w) td:nth-child(3){display:none}
  .hero-p .tbl-pad:not(.tbl-w) td:nth-child(4){grid-column:1/-1}
  .hero-p .tbl-w tbody tr{display:flex;flex-wrap:wrap}
  .hero-p .tbl-w td:first-child{flex:1 1 100%}
  .hero-p .tbl-w td:nth-child(n+2):nth-child(-n+6){display:flex;flex-direction:column;gap:3px}
  .hero-p .tbl-w td:nth-child(n+2):nth-child(-n+6)::before{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
  .hero-p .tbl-w td:nth-child(2)::before{content:"Proforma"}
  .hero-p .tbl-w td:nth-child(3)::before{content:"Factura"}
  .hero-p .tbl-w td:nth-child(4)::before{content:"Packing"}
  .hero-p .tbl-w td:nth-child(5)::before{content:"BL"}
  .hero-p .tbl-w td:nth-child(6)::before{content:"Despacho"}
  .hero-p .tbl-w td:nth-child(7){flex:1 1 100%;font-size:12px;color:var(--muted)}
  .hero-p .tbl-w td:nth-child(7)::after{content:" pendientes"}
  /* la de operaciones (comex), igual */
  .tbl-s table{min-width:0}
  .tbl-s thead{display:none}
  .tbl-s tbody tr{display:flex;flex-wrap:wrap;gap:4px 14px;padding:12px 14px;border-bottom:1px solid var(--line-2)}
  .tbl-s tbody tr:last-child{border-bottom:0}
  .tbl-s td{padding:0;border:0}
  .tbl-s td:nth-child(-n+2){flex:1 1 100%;min-width:0}
  .tbl-s td:nth-child(3)::before{content:"No coincide: ";font-family:var(--body,inherit);color:var(--muted)}
  .tbl-s td:nth-child(4)::before{content:"Pendientes: ";color:var(--muted)}
  /* los botones chicos y los textos que se cortaban */
  .mini{height:auto;min-height:32px;padding:6px 12px;line-height:1.25;text-align:center}
  .cn-c,.cn-r{grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);gap:0 4px}
  .cn-r{margin-inline:10px}
  .cn-m,.cn-x{padding:0 8px}
  .cn-m b,.cn-x b{font-size:12.5px;line-height:1.2;white-space:normal}
  .cn-m small,.cn-x small{font-size:11px;line-height:1.25;white-space:normal}
  .cz-f small{white-space:normal;line-height:1.2}
}

/* ── la portada (27-oct): un solo pedido, el diagnóstico gratis de quién te debe ── */
/* el diagnóstico de ejemplo, como imagen principal */
.hero .stage .dg{max-width:820px}
.dg-top small.dg-k{color:var(--red)}
.dg-l li{grid-template-columns:minmax(0,1fr) 128px 112px minmax(0,1fr)}
.dg-l .tag{justify-self:start}

/* cobranzas, en tres cosas */
.cta-n{margin-top:14px;font-size:13.5px;color:var(--muted)}
.tres-c{margin-top:26px;border-top:1px solid var(--line)}
.tres-c li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px;padding:16px 0;border-bottom:1px solid var(--line)}
.tc-n{padding-top:3px;font-family:var(--mono);font-size:12px;color:var(--cobalt-d)}
.tres-c b{display:block;font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.tres-c span:not(.tc-n){display:block;margin-top:4px;font-size:15.5px;color:var(--muted);line-height:1.5}
.ficha-t .tres-c+.cta-l{margin-top:28px}

/* los puestos: la lista a la izquierda (con su estado) y el elegido a la derecha; sin JS, se ven todos */
.pt{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);margin-top:clamp(36px,4vw,56px);border-top:1px solid var(--line)}
.pt-t{display:none}
.js .pt-t{display:flex;flex-direction:column;border-right:1px solid var(--line)}
.pt-t button{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;min-height:58px;padding:10px 16px 10px 18px;border:0;border-bottom:1px solid var(--line);background:none;font:inherit;text-align:left;color:var(--ink-2);cursor:pointer;box-shadow:inset 2px 0 0 transparent;transition:background .2s,box-shadow .2s,color .2s}
.pt-t button:hover{background:var(--white);color:var(--ink)}
.pt-t button[aria-selected=true]{background:var(--white);color:var(--ink);box-shadow:inset 2px 0 0 var(--cobalt)}
.pt-n{font-size:15.5px;font-weight:500;letter-spacing:-.015em;line-height:1.25}
.pt-t .tag{height:22px;padding:0 7px;font-size:11px}
.pt-p{grid-column:1/-1;padding:clamp(28px,3.4vw,44px) var(--pad) clamp(32px,4vw,52px);border-bottom:1px solid var(--line)}
.js .pt-p{grid-column:2;grid-row:1;border-bottom:0}
.js .pt-p[hidden]{display:none}
.pt-p{scroll-margin-top:76px}
.pt-p h3{font-size:clamp(26px,2.8vw,36px);font-weight:500;letter-spacing:-.035em;line-height:1.1}
.pt-d{margin-top:14px;max-width:60ch;font-size:17.5px;color:var(--ink-2);text-wrap:pretty}
.pt-s{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:18px;font-size:14.5px;color:var(--muted)}
.pt-a{margin-top:10px;font-size:14.5px;color:var(--muted)}
.pt-a b{font-weight:600;color:var(--ink)}
.pt-k{margin-top:28px;font-family:var(--mono);font-size:12px;color:var(--cobalt-d)}
.pt-e{margin-top:10px;border-top:1px solid var(--line)}
.pt-e li{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:6px 20px;padding:14px 0;border-bottom:1px solid var(--line)}
.pt-e span{font-size:15px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.pt-e p{font-size:15.5px;color:var(--ink-2);line-height:1.5;text-wrap:pretty}
.pt-c{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:26px}
.pu .in-note{padding-top:18px}
#diagnostico .ask{border-top:1px solid var(--line)}

@media (max-width:960px){
  .pt{grid-template-columns:minmax(0,1fr)}
  .js .pt-t{border-right:0}
  .js .pt-p{grid-column:1;grid-row:auto;border-top:1px solid var(--line)}
}
@media (max-width:720px){
  /* el diagnóstico de ejemplo: nombre y monto arriba, la etiqueta y la nota abajo */
  .dg-l li{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px}
  .dg-l b{white-space:normal}
  .dg-l li>span:nth-child(2){display:inline-flex;grid-column:1;grid-row:2}
  .dg-l .dg-a{grid-column:2;grid-row:1}
  .dg-l .dg-w{grid-row:3}
  .tres-c li{grid-template-columns:34px minmax(0,1fr)}
  /* los pasos: el ícono chico, sin la caja grande */
  .pasos li{padding-top:22px;padding-bottom:28px}
  .paso-px{width:84px;aspect-ratio:1.6;margin-bottom:4px}
  .pt-t button{min-height:52px;padding:8px 14px}
  .pt-n{font-size:15px}
  .pt-e li{grid-template-columns:minmax(0,1fr)}
}

/* el tablero de la portada con los seis lugares: dos filas de tres, y de dos en el celular */
.board-6{grid-template-columns:repeat(3,minmax(0,1fr))}
.board-6 .slot:nth-child(3n+1){border-left:0}
.board-6 .slot:nth-child(n+4){border-top:1px solid var(--line)}
@media (max-width:960px){
  .board-6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .board-6 .slot:nth-child(odd){border-left:0}
  .board-6 .slot:nth-child(even){border-left:1px solid var(--line)}
  .board-6 .slot:nth-child(n+3){border-top:1px solid var(--line)}
}

/* ── las páginas de cada puesto en cuatro capítulos (27-oct, tomado de la página de Clara de Dani): por qué, qué, cómo y ahora ── */
.cap{scroll-margin-top:64px}
.cap-in{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 28px;padding:clamp(40px,5vw,72px) var(--pad) clamp(30px,4vw,52px);border-block:1px solid var(--line)}
.cap-n{flex:1 1 100%;display:flex;align-items:center;gap:12px;margin-bottom:8px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.cap-n i{display:flex;gap:4px}
.cap-n i b{width:20px;height:4px;background:var(--line)}
.cap-n i b.on{background:var(--cobalt)}
.cap-w{font-size:clamp(68px,11vw,150px);font-weight:500;letter-spacing:-.06em;line-height:.88}
.cap-w em{font-style:normal;color:var(--cobalt)}
.cap-q{padding-bottom:.55em;font-size:clamp(18px,1.8vw,23px);letter-spacing:-.02em;color:var(--ink-2)}
/* por qué: lo que pasa hoy, en tres */
.dolor{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.dolor li{display:flex;flex-direction:column;gap:10px;padding:28px clamp(18px,2.6vw,36px) clamp(36px,4vw,56px);border-left:1px solid var(--line)}
.dolor li:first-child{border-left:0}
.dolor h3{font-size:clamp(21px,2vw,25px);font-weight:500;letter-spacing:-.03em;line-height:1.2}
.dolor p{font-size:15.5px;color:var(--muted)}
/* qué: cada tarea le pasa la posta a la siguiente */
.flujo-k{margin-top:clamp(40px,5vw,64px);padding:0 var(--pad) 16px}
.flujo-k+.flujo{margin-top:0}
.flujo .pasa{margin-top:auto;padding-top:12px;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.flujo .pasa b{font-weight:500;color:var(--cobalt-d);text-transform:uppercase}
.flujo.f5{grid-template-columns:repeat(5,minmax(0,1fr))}
/* cómo: la etiqueta de confianza de cada tarea y el bloque de control */
.sello{display:inline-flex;align-items:center;gap:6px;height:22px;margin-left:10px;padding:0 8px;border-radius:2px;background:var(--ice);font-size:11px;color:var(--cobalt-d);vertical-align:middle;white-space:nowrap}
.sello::before{content:"";width:6px;height:6px;background:currentColor}
.ctl-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.ctl-l li{display:grid;grid-template-columns:26px minmax(0,1fr);align-content:start;align-items:start;gap:4px 16px;padding:24px var(--pad) 26px;border-bottom:1px solid var(--line)}
.ctl-l li:nth-child(even){border-left:1px solid var(--line)}
.ctl-l .px{margin-top:1px}
.ctl-l p{grid-column:2}
.ctl-l h3{font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.ctl-l p{font-size:15px;color:var(--muted);line-height:1.5}
@media (max-width:960px){
  .dolor{grid-template-columns:minmax(0,1fr)}
  .dolor li{border-left:0;padding-bottom:28px}
  .dolor li+li{border-top:1px solid var(--line)}
  .flujo.f5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flujo.f5 li:nth-child(5){border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:720px){
  .flujo.f5{grid-template-columns:minmax(0,1fr)}
  .ctl-l{grid-template-columns:minmax(0,1fr)}
  .ctl-l li:nth-child(even){border-left:0}
  .sello{margin:8px 0 0;display:flex;width:max-content}
}

/* ── el primer paso gratis (27-oct): en la lista de la portada, la frase en negro ── */
.pt-s b{font-weight:600;color:var(--ink)}

/* ── en el celular, más corto (27-oct): capítulos compactos, sin «Te ahorra» ni los íconos de los pasos, y menos aire ── */
@media (max-width:720px){
  .cap-in{gap:4px 12px;padding:22px var(--pad) 18px}
  .cap-n{margin-bottom:2px}
  .cap-w{font-size:56px}
  .cap-q{flex:1 1 100%;padding-bottom:0;font-size:16px}
  .dolor li{gap:6px;padding:20px var(--pad) 22px}
  .flujo a{gap:6px;padding:16px var(--pad) 18px}
  .flujo .pasa{padding-top:4px}
  .emp .pts{display:none}
  .emp .ficha-t{padding-block:32px 28px}
  .emp .ficha-v{padding:20px 14px}
  .ctl-l li{padding:16px var(--pad) 18px}
  .pasos .paso-px{display:none}
}
@media (max-width:720px){
  /* «Lo que le piden a quien lleva…» repite la cadena de tareas que está justo arriba */
  .pu#puesto{display:none}
}