/* /departamento-pessoal — hero com a trilha de uma pessoa, seções r2 (texto | motion), foto, faixa e fechamento. */
.dp-face{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#E3DED6;color:var(--ink);font-family:var(--f-ui);font-size:14px;font-weight:600;flex:none}

/* ---------- Hero ---------- */
.dp-hero{padding-block:clamp(40px,5vw,88px) var(--space-section)}
.dp-hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:32px clamp(40px,5vw,80px);align-items:end}
.dp-hero .eyebrow{display:block;margin-bottom:24px}
.dp-h1{font-size:clamp(2.2rem,1.1rem + 3vw,4.1rem);line-height:1.05}
.dp-hero-side{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.dp-hero-side .btn-row{margin-top:12px}
@media (max-width:980px){.dp-hero-grid{grid-template-columns:minmax(0,1fr)}.dp-hero-side .lead{max-width:52ch}}

.dp-life{margin-top:var(--space-head);display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(24px,3vw,36px);border-radius:24px;background:var(--white);box-shadow:0 0 0 1px var(--line)}
.dp-person{display:flex;align-items:center;gap:14px}
.dp-person-n{font-size:1.15rem;letter-spacing:-.015em}
.dp-person-r{font-family:var(--f-ui);font-size:12.5px;color:var(--ink-2)}
.dp-life-line{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative;font-family:var(--f-ui)}
.dp-life-line::before{content:"";position:absolute;left:5px;right:0;top:5px;height:1px;background:var(--line-2)}
.dp-life-line li{position:relative;display:flex;flex-direction:column;gap:3px;padding:22px 16px 0 0;transition:opacity .55s var(--ease),transform .55s var(--ease)}
.dp-life-line li::before{content:"";position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;background:var(--ink)}
.dp-life-line li.next::before{background:var(--white);box-shadow:inset 0 0 0 2px var(--blue)}
.dp-life-d{font-size:11.5px;color:var(--ink-2)}
.dp-life-t{font-size:14px;font-weight:600}
.dp-life-s{font-size:12.5px;color:var(--ink-2);line-height:1.4}
.dp-life-line li.next .dp-life-t{color:var(--blue-text)}
.dp-life .dp-note{grid-column:1 / -1;margin-top:0}
.is-armed .dp-life-line li:not(.in){opacity:0;transform:translateY(8px)}
@media (max-width:900px){
  .dp-life{grid-template-columns:minmax(0,1fr)}
  .dp-life-line{grid-template-columns:minmax(0,1fr);gap:18px}
  .dp-life-line::before{left:5px;right:auto;top:6px;bottom:6px;width:1px;height:auto}
  .dp-life-line li{padding:0 0 0 28px}
}

/* ---------- Três lados ---------- */
/* ---------- Fechamento ---------- */
.dp-final-grid{display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:32px clamp(40px,6vw,96px);align-items:end}
.dp-final-grid .h2{max-width:28ch}
@media (max-width:900px){.dp-final-grid{grid-template-columns:minmax(0,1fr)}}
/* botões lado a lado no desktop: coluna lateral mais larga */
@media (min-width:1100px){.dp-hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}

/* hierarquia: título primeiro, texto logo abaixo, à esquerda (sem texto solto ao lado/acima) */
@media (min-width:901px){
  .dp-hero-grid{display:flex !important;flex-direction:column !important;align-items:flex-start !important;justify-content:flex-start !important;gap:18px !important;text-align:left}
  .dp-hero-grid > *{margin:0 !important;max-width:62ch;grid-column:auto !important;grid-row:auto !important}
  .dp-hero-grid :is(.h1,.h2,h1,h2){max-width:22ch}
}

@media (max-width:640px){.dp-life-d{font-size:12px}}

/* =====================================================================
   Motions da página (padrão mv/r2). Peças sx e mv vêm de src/styles/sysmock.css.
   Estados ocultos só com .sx.is-armed; sem JS ou com movimento reduzido, estado final.
   ===================================================================== */

/* 1 · quem vê o quê: matriz de acessos */
.dp-mx{background:#fff;border:1px solid var(--sx-line);border-radius:18px;padding:18px 20px}
.dp-mx-h,.dp-mx-r{display:grid;grid-template-columns:30px minmax(0,1fr) repeat(3,84px);align-items:center;column-gap:12px}
.dp-mx-h{padding:0 8px 10px}
.dp-mx-h p{grid-column:1 / 3;font-size:13px;color:var(--sx-ink2)}
.dp-mx-h p b{color:var(--ink);font-weight:500}
.dp-mx-h > span{font-size:12px;font-weight:500;color:var(--sx-ink2);text-align:center}
.dp-mx ul{display:flex;flex-direction:column}
.dp-mx-r{padding:12px 8px;border-top:1px solid var(--sx-line);border-radius:12px;transition:opacity .4s var(--sx-ease),transform .4s var(--sx-ease),background .3s}
.dp-mx-r.is-hi{background:var(--sx-blue-b);border-top-color:transparent}
.dp-mx-c{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;color:var(--sx-ink2);transition:opacity .3s var(--sx-ease),transform .3s var(--sx-ease)}
.dp-mx-c small{display:none;font-size:12px}
.dp-mx-c em{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--sx-ok);color:#fff}
.dp-mx-c em svg{width:13px;height:13px}
.dp-mx-c.no em{background:var(--sx-wash);color:var(--sx-ink3)}
.dp-mx-c.no em svg{fill:none;stroke:currentColor;stroke-width:1.8}
.dp-mx-c.no{color:var(--sx-ink3)}
.sx.is-armed .dp-mx-c:not(.on){opacity:0;transform:translateY(6px)}
@container (max-width:540px){
  .dp-mx{padding:14px}
  .dp-mx-h{padding:0 0 10px}
  .dp-mx-h p{grid-column:1 / -1}
  .dp-mx-h > span{display:none}
  .dp-mx-r{grid-template-columns:30px repeat(3,minmax(0,1fr));row-gap:10px;column-gap:8px;padding:12px 6px}
  .dp-mx-r .mv-tt{grid-column:2 / -1}
  .dp-mx-r .mv-tt b,.dp-mx-r .mv-tt span{white-space:normal}
  .dp-mx-c{grid-row:2;flex-direction:row;align-items:center;gap:6px;min-width:0}
  .dp-mx-c[data-c="0"]{grid-column:2}.dp-mx-c[data-c="1"]{grid-column:3}.dp-mx-c[data-c="2"]{grid-column:4}
  .dp-mx-c > span{display:flex;flex-direction:column;line-height:1.3;min-width:0}
  .dp-mx-c small{display:block;color:var(--sx-ink2)}
  .dp-mx-c em{width:20px;height:20px;flex:none}.dp-mx-c em svg{width:11px;height:11px}
}

/* 2 · admissão: peças que se encaixam */
.dp-adm{background:#fff;border:1px solid var(--sx-line);border-radius:18px;padding:18px 20px}
.dp-adm-h{display:flex;align-items:center;gap:12px}
.dp-adm-h .mv-tt{flex:1 1 180px}
.dp-adm-k{margin:16px 0 10px;font-size:13px;color:var(--sx-ink2)}
.dp-adm-k b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.dp-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.dp-slot{position:relative;min-height:70px;border-radius:12px;border:1.5px dashed var(--sx-line2);display:flex}
.dp-piece{flex:1;display:flex;align-items:center;gap:10px;margin:-1.5px;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid var(--sx-line);box-shadow:0 10px 20px -16px rgba(10,20,60,.4);transition:opacity .4s var(--sx-ease),transform .4s var(--sx-ease)}
.dp-piece b{font-family:var(--f-brand);font-weight:500;font-size:13px;line-height:1.3;min-width:0}
.sx.is-armed .dp-piece:not(.in){opacity:0;transform:translateY(-10px)}
.dp-miss{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:10px 12px;border-radius:11px;transition:background .3s,color .3s}
.dp-miss b{font-family:var(--f-brand);font-weight:500;font-size:13px;line-height:1.3;color:var(--sx-ink2)}
.dp-miss span{font-size:12px;color:var(--sx-ink3)}
.dp-slot-miss.on{border-color:rgba(255,59,48,.45)}
.dp-slot-miss.on .dp-miss{background:var(--sx-al-b)}
.dp-slot-miss.on .dp-miss b,.dp-slot-miss.on .dp-miss span{color:var(--sx-al-t)}
.dp-adm-ask{margin-top:14px;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--paper)}
.dp-adm-ask .mv-tt span{white-space:normal}
@container (max-width:540px){
  .dp-adm{padding:14px}
  .dp-adm-h{flex-wrap:wrap;row-gap:8px}.dp-adm-h .sx-badge{margin-left:48px}
  .dp-slots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dp-piece{padding:10px}.dp-piece .sx-ic{display:none}
}

/* 3 · férias: régua de prazos */
.dp-fer{background:#fff;border:1px solid var(--sx-line);border-radius:18px;padding:18px 20px}
.dp-fer-h{display:flex;align-items:center;gap:12px}
.dp-fer-h .mv-tt{flex:1}
.dp-track{position:relative;height:4px;margin:34px 8px 68px;border-radius:4px;background:var(--sx-line2)}
.dp-track-f{position:absolute;inset:0;border-radius:4px;background:var(--sx-blue);transform-origin:left;transform:scaleX(var(--v,0));transition:transform 1s var(--sx-ease)}
.dp-mk{position:absolute;left:var(--x);top:2px;transition:opacity .35s var(--sx-ease),transform .35s var(--sx-ease)}
.dp-mk i{position:absolute;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px #AAAAAA;transition:background .25s,box-shadow .25s}
.dp-mk[data-m="0"] i{background:var(--sx-blue);box-shadow:none}
.dp-mk.ok i{background:var(--sx-ok);box-shadow:0 0 0 4px var(--sx-ok-b)}
.dp-mk > span{position:absolute;top:16px;left:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;font-size:12px;color:var(--sx-ink3);white-space:nowrap}
.dp-mk > span b{font-family:var(--f-brand);font-weight:500;font-size:14px;color:var(--ink)}
.dp-mk[data-m="0"] > span{transform:translateX(-8px);align-items:flex-start}
.dp-mk[data-m="2"] > span{transform:translateX(calc(-100% + 8px));align-items:flex-end}
.sx.is-armed .dp-mk:not(.in){opacity:0;transform:translateY(6px)}
.dp-fer-l{display:flex;flex-direction:column}
.dp-fer-l li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--sx-line)}
@container (max-width:540px){
  .dp-fer{padding:14px}
  .dp-fer-h{flex-wrap:wrap}.dp-fer-h .mv-tt{flex-basis:100%}
  .dp-fer-l li{grid-template-columns:auto minmax(0,1fr)}
  .dp-fer-l li .sx-badge{grid-column:2;justify-self:start}
  .dp-fer-l .mv-tt span{white-space:normal}
}

/* 4 · ponto: fontes → central */
.dp-pt{--h:80px;display:grid;grid-template-columns:minmax(0,1fr) 44px 196px;align-items:center}
.dp-srcs{display:flex;flex-direction:column;gap:8px}
.dp-src{height:var(--h);display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:12px;padding:0 14px;background:#fff;border:1px solid var(--sx-line);border-radius:14px;transition:opacity .4s var(--sx-ease),transform .4s var(--sx-ease),border-color .3s}
.sx.is-armed .dp-src:not(.in){opacity:0;transform:translateY(8px)}
.dp-src .sx-ic{grid-row:1 / span 2}
.dp-src .mv-tt{align-self:end}
.dp-src-r{grid-column:2;align-self:start;margin-top:4px;transition:opacity .3s}
.sx.is-armed .dp-src:not(.ok):not(.bad) .dp-src-r{opacity:0}
.dp-src.ok .sx-ic{background:var(--sx-blue-b);color:var(--sx-blue-t)}
.dp-src.bad{border-color:rgba(255,59,48,.35)}
.dp-src.bad .sx-ic{background:var(--sx-al-b);color:var(--sx-al-t)}
.dp-wires{width:100%;height:calc(var(--h) * 4 + 24px);overflow:visible}
.dp-wires line{stroke:var(--sx-line2);stroke-width:1.5;vector-effect:non-scaling-stroke;transition:stroke .3s,opacity .3s}
.dp-wires line.on{stroke:var(--sx-blue)}
.dp-wires line.bad{stroke:var(--sx-al);stroke-dasharray:4 4;opacity:.6}
.dp-hubc{background:#fff;border:1px solid var(--sx-line);border-radius:16px;padding:16px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;box-shadow:0 20px 40px -30px rgba(10,20,60,.4)}
.dp-hub-n b{font-family:var(--f-brand);font-weight:400;font-size:44px;line-height:1.1;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.dp-hubc .sx-badge{margin-top:10px}
.dp-hub-al{display:flex;align-items:flex-start;gap:6px;margin-top:10px;font-size:12px;line-height:1.4;color:var(--sx-al-t)}
.dp-hub-al svg{width:14px;height:14px;flex:none;margin-top:1px;fill:none;stroke:currentColor;stroke-width:1.8}
@container (max-width:560px){
  .dp-pt{--h:auto;grid-template-columns:minmax(0,1fr);gap:12px}
  .dp-src{height:auto;padding:12px 14px}
  .dp-wires{display:none}
}

/* 5 · portal do funcionário: celular + objetos soltos */
.dp-pf{display:flex;align-items:center;gap:28px}
.dp-scr{min-height:0;padding-bottom:16px}
.dp-clock{background:#fff;border:1px solid var(--sx-line);border-radius:16px;padding:14px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px}
.dp-clock .s{font-size:12px;color:var(--sx-ink3)}
.dp-clock .v{font-family:var(--f-brand);font-size:34px;letter-spacing:-.03em;line-height:1.15;font-variant-numeric:tabular-nums}
.dp-clock .sx-btn{margin-top:10px;height:38px;width:100%}
.dp-marks li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid var(--sx-line)}
.dp-marks i{width:8px;height:8px;border-radius:50%;background:var(--sx-blue);flex:none}
.dp-marks b{display:block;font-size:13px;font-weight:500}
.dp-marks span{display:block;font-size:12px;color:var(--sx-ink3)}
.dp-objs{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.dp-objs li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;padding:14px 16px;background:#fff;border:1px solid var(--sx-line);border-radius:16px;box-shadow:0 18px 36px -28px rgba(10,20,60,.45);transition:opacity .45s var(--sx-ease),transform .45s var(--sx-ease)}
.dp-objs li:nth-child(2){margin-left:24px}
.dp-objs li:nth-child(3){margin-right:16px}
.dp-objs .mv-tt b{font-size:15px}
.sx.is-armed .dp-objs li:not(.in){opacity:0;transform:translateY(8px)}
@container (max-width:520px){
  .dp-pf{flex-direction:column;align-items:stretch;gap:16px}
  .dp-pf .mv-phone{align-self:center}
  .dp-objs li:nth-child(n){margin:0}
  .dp-pf .mv-ph-ln{display:none}
}

/* 6 · folha: barra segmentada da carteira */
.dp-fo{background:#fff;border:1px solid var(--sx-line);border-radius:18px;padding:20px}
.dp-fo .mv-sub{margin-bottom:16px;color:var(--sx-ink3)}
.dp-fo .mv-lbl{color:var(--sx-ink2)}
.dp-segs{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
.dp-segs i{height:34px;border-radius:7px;background:rgba(29,29,31,.12);transition:opacity .35s var(--sx-ease),transform .35s var(--sx-ease),background .3s}
.dp-segs i.ok,.dp-leg i.ok{background:var(--sx-ok)}
.dp-segs i.blue,.dp-leg i.blue{background:var(--sx-blue)}
.dp-segs i.al,.dp-leg i.al{background:var(--sx-al)}
.dp-leg i.mute{background:rgba(29,29,31,.12)}
.sx.is-armed .dp-segs i:not(.in){opacity:0;transform:translateY(8px)}
.dp-leg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 20px;margin-top:14px}
.dp-leg li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--sx-ink2)}
.dp-leg i{width:9px;height:9px;border-radius:3px;flex:none}
.dp-leg b{margin-left:auto;color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.dp-fo-row{margin-top:16px;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--paper)}
.dp-trail{display:flex;align-items:center;gap:8px}
.dp-trail-b{width:72px;height:6px;border-radius:6px;background:rgba(29,29,31,.08);overflow:hidden}
.dp-trail-b i{display:block;height:100%;border-radius:6px;background:var(--sx-blue);transform-origin:left;transform:scaleX(var(--v,.142857));transition:transform .8s var(--sx-ease)}
.dp-trail-n{font-size:12.5px;font-weight:500;font-variant-numeric:tabular-nums}
@container (max-width:540px){
  .dp-fo{padding:16px}
  .dp-leg{grid-template-columns:minmax(0,1fr)}
  .dp-fo-row{grid-template-columns:auto minmax(0,1fr)}
  .dp-fo-row .dp-trail,.dp-fo-row .sx-badge{grid-column:2;justify-self:start}
}

/* 7 · eSocial e FGTS: pilha que se reorganiza */
.dp-es{--h:66px;--g:8px}
.dp-es-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.dp-es-h p{font-size:14px;color:var(--sx-ink2)}
.dp-es-h p b{color:var(--ink);font-weight:500}
.dp-evs{display:flex;flex-direction:column;gap:var(--g)}
.dp-ev{height:var(--h);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:0 14px;background:#fff;border:1px solid var(--sx-line);border-radius:14px}
.sx [data-step].dp-ev{transition:opacity .4s var(--sx-ease),transform .55s var(--sx-ease),border-color .3s,box-shadow .3s}
.dp-es.is-sorted .dp-ev[data-i="2"]{transform:translateY(calc(-2 * (var(--h) + var(--g))))}
.dp-es.is-sorted .dp-ev[data-i="0"],.dp-es.is-sorted .dp-ev[data-i="1"]{transform:translateY(calc(var(--h) + var(--g)))}
.dp-ev.is-hi{border-color:rgba(255,59,48,.4);box-shadow:0 0 0 3px rgba(255,59,48,.1)}
@container (max-width:540px){
  .dp-es{--h:84px}
  .dp-es-h{flex-wrap:wrap}
  .dp-ev{grid-template-columns:auto minmax(0,1fr);row-gap:4px}
  .dp-ev .sx-ic{grid-row:1 / span 2}
  .dp-ev .mv-tt{align-self:end}
  .dp-ev .sx-badge{grid-column:2;justify-self:start;align-self:start}
}

/* 8 · Kyra: conversa com prévia */
.dp-ky{display:flex;flex-direction:column;gap:12px}
.dp-q{align-self:flex-end}
.dp-ka{background:#fff;border:1px solid var(--sx-line);border-radius:16px;padding:12px 16px 4px;max-width:88%}
.dp-ka .mv-k{padding-left:0;margin-bottom:6px}
.dp-ka li{display:flex;flex-direction:column;padding:8px 0;border-top:1px solid var(--sx-line)}
.dp-ka li b{font-family:var(--f-brand);font-weight:500;font-size:14.5px}
.dp-ka li span{font-size:12.5px;color:var(--sx-ink3)}
.dp-prev{background:#fff;border:1.5px dashed rgba(0,122,255,.35);border-radius:16px;padding:14px 16px;max-width:88%}
.dp-prev-k{font-size:12px;font-weight:500;color:var(--sx-blue-t);margin-bottom:6px}
.dp-prev p:not(.dp-prev-k){font-size:13.5px;line-height:1.5}
.dp-prev-b{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:12px}
@container (max-width:540px){.dp-ka,.dp-prev{max-width:none}}
/* celular estreito: ícone em cima do rótulo, sem quebrar "Funcionário" */
@media (max-width:420px){.dp-mx-c{flex-direction:column;align-items:flex-start;gap:4px}.dp-mx-r{column-gap:6px}}
@media (max-width:720px){.dp-mx-h{grid-template-columns:minmax(0,1fr)}}
@media (max-width:720px){#inicio :is(.x-pill,.eyebrow):not(.sx *){margin-bottom:16px !important}}