/* /plataforma — hero com as cinco áreas, seções no padrão r2 (texto | motion) e fechamento.
   Motions (prefixo pl-) inspirados em funções reais do sistema; roteiros em page.js. Critérios: docs/motion/CRITERIOS_MOTION.md */

/* ---------- Hero ---------- */
.p-hero{padding-block:clamp(48px,6vw,104px) var(--space-section)}
.p-h1{font-size:clamp(2.3rem,1.2rem + 3.4vw,4.4rem);line-height:1.04;max-width:none}
.p-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px clamp(48px,6vw,104px);align-items:center}
.p-hero-copy2{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.p-hero-copy2 .x-pill{margin:0}
.p-hero-copy2 .p-h1{font-size:clamp(2.3rem,1.2rem + 2.8vw,3.8rem);max-width:16ch}
.p-hero-copy2 .lead{max-width:44ch}
.p-areas{margin:0;gap:10px}
.p-areas li{padding:14px 16px;border-radius:16px;background:var(--white);box-shadow:0 0 0 1px var(--line),0 14px 30px -24px rgba(10,20,60,.3);align-items:center}
.p-areas li span{display:flex;flex-direction:column;gap:2px}
.p-areas li b{font-weight:500;font-size:15.5px}.p-areas li small{font-size:13px;color:var(--ink-3)}
.p-areas .ic{width:36px;height:36px;padding:9px;border-radius:11px;background:var(--blue-wash,#E8F1FF);color:var(--blue)}
@media (max-width:980px){.p-hero-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.p-areas li{text-align:left}}

/* ---------- Caminhos (três formas de contratar) ---------- */
.paths-sec{padding-block:var(--space-inner)}
.paths-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start}
.paths-title{max-width:22ch}
.paths{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.path{border-bottom:1px solid var(--line-2)}
.path a,.path.is-here{display:grid;grid-template-columns:minmax(0,1fr) auto 104px;align-items:baseline;gap:16px;padding:22px 2px;text-decoration:none;color:var(--ink)}
.path a{transition:padding .25s var(--ease),color .2s}
.path a:hover{padding-left:10px;color:var(--blue)}
.path-name{font-size:clamp(1.3rem,1.1rem + .6vw,1.6rem);letter-spacing:-.02em}
.path-sub{font-size:var(--fs-label);letter-spacing:.09em;text-transform:uppercase;color:var(--blue-text);font-weight:500}
.path .arrow,.path-here{justify-self:end}
.path .arrow{align-self:center}
.path.is-here{color:var(--ink-2)}
.path.is-here .path-sub{color:var(--ink-2)}
.path-here{font-size:12px;color:var(--ink-2)}
@media (max-width:900px){.paths-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.path a,.path.is-here{grid-template-columns:minmax(0,1fr) auto}.path-sub{grid-column:1;grid-row:2}}

/* ---------- CTA final ---------- */
.final2{padding-block:var(--space-section)}
.final2-grid{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.final2-grid > *{margin:0;max-width:62ch}
.final2-grid .h2{max-width:22ch}

/* =====================================================================
   Motions da página (pl-)
   ===================================================================== */
/* 1 · trilha: estações + pilha de cartões (o mesmo extrato passando pelas áreas) */
.pl-trilha{display:flex;flex-direction:column}
.pl-st{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.pl-st li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;min-width:0}
.pl-st li i{width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--sx-line2);transition:box-shadow .25s,background .25s}
.pl-st li span{font-size:12px;line-height:1.3;color:var(--sx-ink3);transition:color .25s}
.pl-st li.on i{box-shadow:inset 0 0 0 4px var(--sx-blue),0 0 0 4px rgba(0,122,255,.15)}
.pl-st li.ok i{background:var(--sx-blue);box-shadow:none}
.pl-st li.on span,.pl-st li.ok span{color:var(--ink)}
.pl-st-ln{position:absolute;left:calc(100% / 12);right:calc(100% / 12);top:6px;height:2px;border-radius:2px;background:var(--sx-line2)}
.pl-st-ln b{display:block;height:100%;border-radius:2px;background:var(--sx-blue);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .6s var(--sx-ease)}
.pl-deck{position:relative;height:184px;margin-top:26px}
.pl-cd{position:absolute;left:0;right:0;bottom:0;height:156px;display:flex;flex-direction:column;gap:10px;padding:16px 18px;background:#fff;border:1px solid var(--sx-line);border-radius:16px;box-shadow:0 18px 36px -28px rgba(10,20,60,.35);transform-origin:50% 0;opacity:0;transform:translateY(12px);transition:transform .45s var(--sx-ease),opacity .4s var(--sx-ease)}
.sx:not(.is-armed) .pl-cd:last-child,.pl-cd.in{opacity:1;transform:translateY(calc(var(--d,0) * -12px)) scale(calc(1 - var(--d,0) * .04))}
.pl-cd.in.far{opacity:0}
.pl-cd-k{font-size:12px;font-weight:500;color:var(--sx-blue-t)}
.pl-cd-r{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px}
.pl-cd-r .mv-tt b{font-size:15px}
.pl-cd-f{margin-top:auto;padding-top:10px;border-top:1px solid var(--sx-line);font-size:12.5px;color:var(--sx-ink3)}
.pl-trilha-f{margin-top:16px;font-size:13.5px;color:var(--sx-ink2)}
.pl-trilha-f b{font-family:var(--f-brand);font-weight:500;font-size:18px;color:var(--ink);font-variant-numeric:tabular-nums;margin-right:2px}

/* 2 · fechamento por área: barras e situação */
.pl-fe{background:#fff;border:1px solid var(--sx-line);border-radius:18px;padding:20px}
.pl-fe-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.pl-fe-l li{position:relative;display:flex;flex-direction:column;gap:8px;padding:14px 0;border-top:1px solid var(--sx-line)}
.pl-fe-l li::before{content:"";position:absolute;left:-20px;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--sx-blue);opacity:0;transition:opacity .25s}
.pl-fe-l li.is-hi::before{opacity:1}
.pl-fe-t{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px}
.pl-fe-t b{font-family:var(--f-brand);font-weight:500;font-size:15px}
.pl-fe-t span:not(.sx-badge){font-size:12.5px;color:var(--sx-ink3)}
.pl-fe-t .sx-badge{margin-left:auto}
.pl-bar{display:block;height:8px;border-radius:999px;background:var(--sx-wash);overflow:hidden}
.pl-bar b{display:block;height:100%;border-radius:999px;background:var(--sx-ok);transform-origin:left;transform:scaleX(var(--v));transition:transform .8s var(--sx-ease),background .3s}
.pl-fe-l [data-a="con"]:not(.fix) .pl-bar b{background:var(--sx-warn)}
.sx.is-armed .pl-fe-l li:not(.in) .pl-bar b{transform:scaleX(0)}
.pl-fe-d{font-size:12.5px;color:var(--sx-ink3)}

/* 3 · dois planos: escritório atrás, Minha Contabilidade na frente */
.pl-pl{display:flex;flex-direction:column}
.pl-pl-a{width:88%;background:var(--paper);border:1px solid var(--sx-line);border-radius:18px;padding:16px 18px 58px}
.pl-pl-k{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--sx-ink2);margin-bottom:6px;min-width:0}
.pl-pl-k span:not(.sx-badge){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-pl ul li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--sx-line);border-radius:8px;transition:opacity .4s var(--sx-ease),transform .4s var(--sx-ease),background .25s,box-shadow .25s}
.pl-pl ul li:first-child{border-top-color:transparent}
.pl-pl ul li.is-hi{background:var(--sx-blue-b);box-shadow:0 0 0 6px var(--sx-blue-b)}
.pl-pl-b{position:relative;z-index:1;width:84%;align-self:flex-end;margin-top:-42px;background:#fff;border:1px solid var(--sx-line);border-radius:18px;padding:16px 18px 10px;box-shadow:0 30px 60px -30px rgba(10,20,60,.38);transition:opacity .45s var(--sx-ease),transform .45s var(--sx-ease)}
.sx.is-armed .pl-pl-b:not(.in){opacity:0;transform:translateY(16px)}

/* 4 · Kyra: fontes consultadas, uma ação preparada */
.pl-ky{display:flex;flex-direction:column;gap:12px}
.pl-ky-q{display:flex;align-items:center;gap:12px;height:52px;padding:0 18px 0 9px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--sx-line)}
.pl-ky-q i{width:34px;height:34px;border-radius:50%;background:var(--sx-blue);color:#fff;display:grid;place-items:center;flex:none}
.pl-ky-q i svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}
.pl-ky-q .sx-ask-in{flex:1;min-width:0;font-size:14px;color:var(--sx-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-ky-q .sx-ask-in.typed{color:var(--ink)}
.pl-ky-s{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pl-ky-s li{display:flex;flex-direction:column;gap:4px;min-width:0;padding:12px 14px;background:#fff;border-radius:14px}
.pl-ky-n{display:flex;align-items:center;gap:8px;font-family:var(--f-brand);font-size:14px;font-weight:500}
.pl-ky-n em{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--sx-wash);color:transparent;flex:none;transition:background .25s,color .25s}
.pl-ky-n em svg{width:11px;height:11px}
.pl-ky-s li.ok em{background:var(--sx-ok);color:#fff}
.pl-ky-v{font-size:12.5px;color:var(--sx-ink3);padding-left:28px;transition:opacity .3s}
.sx.is-armed .pl-ky-s li:not(.ok) .pl-ky-v{opacity:0}
.pl-ky-r{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 16px;background:#fff;border-radius:16px}
.pl-ky-r .mv-tt small{font-weight:500;color:var(--sx-blue-t)}
.pl-ky-b{display:flex;gap:8px}

/* 5 · passagens entre áreas (de → para) */
.pl-ps-h{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);font-size:12.5px;color:var(--sx-ink3);margin-bottom:8px}
.pl-ps-h span:last-child{grid-column:3}
.pl-ps ul{display:flex;flex-direction:column;gap:10px}
.pl-ps li{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);align-items:center}
.pl-ps-a,.pl-ps-b{display:flex;align-items:center;gap:10px;min-height:72px;padding:12px 14px;background:#fff;border:1px solid var(--sx-line);border-radius:14px;min-width:0}
.pl-ps .mv-tt small{font-weight:500;color:var(--sx-blue-t)}
.pl-ps .mv-tt b{white-space:normal}
.pl-ps-b{transition:opacity .4s var(--sx-ease),transform .4s var(--sx-ease)}
.sx.is-armed .pl-ps-b:not(.in){opacity:0;transform:translateY(8px)}
.pl-ps-b .mv-tick{margin-left:auto;flex:none}
.pl-ps-b.ok .mv-tick{opacity:1;transform:none}
.pl-ps-w{position:relative;height:2px;margin:0 8px;background:var(--sx-line2)}
.pl-ps-w b{position:absolute;left:0;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--sx-blue);opacity:0;transition:transform .45s var(--sx-ease),opacity .2s}
.pl-ps-w.go b{opacity:1;transform:translateX(32px)}

/* 6 · integrações: dois nós, duas faixas, registro de envio */
.pl-api-d{display:grid;grid-template-columns:128px minmax(0,1fr) 128px;align-items:center;margin-bottom:16px}
.pl-node{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:124px;padding:14px;background:#fff;border:1px solid var(--sx-line);border-radius:16px;min-width:0}
.pl-node img{width:22px;height:auto;margin-bottom:6px}
.pl-node .sx-ic{margin-bottom:2px}
.pl-node b{font-family:var(--f-brand);font-weight:500;font-size:14px}
.pl-node span:not(.sx-ic){font-size:12px;line-height:1.35;color:var(--sx-ink3)}
.pl-lanes{display:flex;flex-direction:column;gap:30px;padding:0 10px}
.pl-ln{position:relative;height:28px}
.pl-ln > i{position:absolute;left:0;right:0;top:50%;border-top:2px dashed var(--sx-line2)}
.pl-lb{position:absolute;left:50%;top:-18px;transform:translateX(-50%);font-size:12px;font-weight:500;color:var(--sx-ink2)}
.pl-pk{position:absolute;left:0;top:50%;height:26px;margin-top:-13px;padding:0 10px;border-radius:999px;background:var(--sx-blue);color:#fff;font-size:12px;font-weight:500;display:inline-flex;align-items:center;white-space:nowrap;opacity:0;transform:translateX(0);transition:transform .9s var(--sx-ease),opacity .25s}
[data-l="api"] .pl-pk{transform:translateX(var(--d,0))}
.pl-pk.go{opacity:1}
[data-l="api"] .pl-pk.go{transform:translateX(0)}
[data-l="wh"] .pl-pk.go{transform:translateX(var(--d,0))}
.pl-pk.done{opacity:0}
.pl-api-l{display:flex;flex-direction:column;gap:8px}
.pl-api-l li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 14px;background:#fff;border:1px solid var(--sx-line);border-radius:14px}

/* celular: texto primeiro, motion depois; cada formato se ajusta à coluna */
@media (max-width:720px){
  .pl-st li span{display:none}
  .pl-deck{height:200px}
  .pl-cd{height:172px;padding:14px 16px}
  .pl-cd-r{grid-template-columns:auto minmax(0,1fr)}
  .pl-cd-r > :last-child{grid-column:2;justify-self:start}
  .pl-cd-r .mv-tt b,.pl-cd-r .mv-tt span{white-space:normal}
  .pl-fe{padding:16px}
  .pl-fe-l li::before{left:-16px}
  .pl-pl-a{width:100%;padding-bottom:52px}
  .pl-pl-b{width:94%}
  .pl-pl-b ul li .mv-tt b,.pl-pl-b ul li .mv-tt span{white-space:normal}
  .pl-ky-q .sx-ask-in{font-size:13.5px}
  .pl-ky-r{grid-template-columns:minmax(0,1fr)}
  .pl-ky-v{padding-left:0}
  .pl-ps-h{display:none}
  .pl-ps li:nth-child(4){display:none}
  .pl-ps li{grid-template-columns:minmax(0,1fr)}
  .pl-ps-a,.pl-ps-b{min-height:0}
  .pl-ps-w{width:2px;height:20px;margin:0 0 0 28px}
  .pl-ps-w b{left:-3px;top:0}
  .pl-ps-w.go b{transform:translateY(12px)}
  .pl-api-d{grid-template-columns:92px minmax(0,1fr) 92px}
  .pl-node{min-height:104px;padding:12px}
  .pl-node span:not(.sx-ic){display:none}
  .pl-lanes{padding:0 6px}
  .pl-api-l li{grid-template-columns:auto minmax(0,1fr)}
  .pl-api-l li .sx-badge{grid-column:2;justify-self:start}
}