/* /departamento-pessoal — composição própria. Conceito: da admissão à rotina do funcionário, sem perder a trilha.
   Ritmo: hero com a trilha de uma pessoa (revelação) → três lados, cada um com sua forma de interface (explorável)
   → ficha de admissão com o item que falta (narrativo) → movimentações em abas tipográficas com régua de antecedência
   (explorável) → semana de ponto com exceção → conferência da folha (escuro, narrativo) → acesso por documento
   → portal no celular (explorável) → visão da empresa → storyboard da Kyra → fotografia de respiro → fechamento.
   Estados ocultos de motion só existem com .is-armed (aplicado pelo JS); sem JS ou com reduced motion, tudo no estado final. */

/* ---------- Utilitários ---------- */
.dp-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px clamp(40px,6vw,96px);align-items:end;margin-bottom:var(--space-head)}
.dp-head .eyebrow{display:block}
.dp-head-copy{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.dp-head-copy .link{margin-top:6px}
.dp-note{margin-top:16px;font-family:var(--f-ui);font-size:12px;color:var(--ink-2)}
.dark .dp-note{color:var(--paper-2)}
.dp-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:34px;margin-bottom:20px}
.dp-ui-foot{padding:11px 18px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-2)}
.dp-col-k{font-family:var(--f-ui);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);font-weight:500;margin-bottom:10px}
.dp-h2-s{font-size:clamp(1.9rem,1.2rem + 1.8vw,2.8rem)}
.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}
.dp-face.sm{width:30px;height:30px;font-size:11px}
@media (max-width:900px){.dp-head{grid-template-columns:minmax(0,1fr);align-items:start}}

/* ---------- 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 ---------- */
.dp-sides-seg{margin-bottom:28px}
.dp-sides-grid{display:grid;grid-template-columns:minmax(0,1.15fr) 96px minmax(0,1fr) 96px minmax(0,.8fr);align-items:start}
.dp-side{display:flex;flex-direction:column;gap:12px;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.dp-side-k{font-size:var(--fs-h3);letter-spacing:-.018em}
.dp-sides-grid:not([data-on="esc"]) [data-side="esc"],.dp-sides-grid:not([data-on="emp"]) [data-side="emp"],.dp-sides-grid:not([data-on="fun"]) [data-side="fun"]{opacity:.38}
.dp-bridge{position:relative;align-self:stretch;display:flex;justify-content:center;align-items:center;padding-top:36px}
.dp-bridge::before{content:"";position:absolute;left:8px;right:8px;top:calc(50% + 18px);height:1px;background:var(--line-2)}
.dp-bridge::after{content:"";position:absolute;left:4px;right:4px;top:calc(50% + 15px);height:7px;background:radial-gradient(circle at 3.5px 3.5px,var(--neutral) 3px,transparent 3.5px) left/7px 7px no-repeat,radial-gradient(circle at 3.5px 3.5px,var(--neutral) 3px,transparent 3.5px) right/7px 7px no-repeat}
.dp-bridge span{position:relative;z-index:1;font-family:var(--f-ui);font-size:11px;color:var(--ink-2);text-align:center;line-height:1.35;background:var(--white);padding:4px 2px;transform:translateY(-22px)}
.dp-s-esc .ui-row{padding:12px 16px}
.dp-s-list{list-style:none;margin:0;padding:0}
.dp-s-list li{display:flex;flex-direction:column;gap:1px;padding:12px 16px;border-bottom:1px solid var(--line)}
.dp-s-list li:last-child{border-bottom:0}
.dp-s-list span{font-size:11.5px;color:var(--ink-2)}
.dp-s-list b{font-weight:500}
.dp-s-list li.ask{background:var(--blue-wash)}
.dp-s-list li.ask span,.dp-s-list li.ask b{color:var(--blue-text)}
.dp-phone{border-radius:28px;background:var(--ink);padding:10px;box-shadow:0 24px 48px -28px rgba(29,29,31,.5)}
.dp-s-fun{display:flex;flex-direction:column;gap:8px;padding:18px 12px 14px;background:var(--paper);box-shadow:0 0 0 8px var(--ink),0 24px 48px -28px rgba(29,29,31,.5);margin:8px;border-radius:22px;font-family:var(--f-ui)}
.dp-phone-hi{font-family:var(--f-brand);font-size:1.05rem;padding:0 4px 4px}
.dp-ph-card{display:flex;flex-direction:column;gap:1px;padding:10px 12px;border-radius:12px;background:var(--white);font-size:12.5px}
.dp-ph-card .k{font-size:11px;color:var(--ink-2)}
.dp-ph-card .v{font-weight:500}
.dp-sees{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.dp-sees ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.dp-sees li{display:flex;gap:10px;align-items:baseline;font-size:.95rem}
.dp-sees li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);flex:none;transform:translateY(-2px)}
.dp-sees .no li::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--neutral)}
.dp-sees .no li{color:var(--ink-2)}
@media (max-width:1100px){.dp-sides-grid{grid-template-columns:minmax(0,1.1fr) 64px minmax(0,1fr) 64px minmax(0,.85fr)}.dp-bridge span{font-size:10.5px}}
@media (max-width:900px){
  .dp-sides-grid{grid-template-columns:minmax(0,1fr)}
  .dp-bridge{display:none}
  .dp-sides-grid:not([data-on="esc"]) [data-side="esc"],.dp-sides-grid:not([data-on="emp"]) [data-side="emp"],.dp-sides-grid:not([data-on="fun"]) [data-side="fun"]{display:none}
  .dp-s-fun{max-width:300px}
}
@media (max-width:560px){.dp-sees{grid-template-columns:minmax(0,1fr)}}

/* ---------- Admissão ---------- */
.dp-adm{overflow:hidden}
.dp-adm-top{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap;padding:20px 22px;border-bottom:1px solid var(--line)}
.dp-adm-n{font-size:15px;font-weight:600}
.dp-adm-steps{list-style:none;margin:0;padding:18px 22px 20px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;border-bottom:1px solid var(--line);font-size:12px;color:var(--ink-2)}
.dp-adm-steps li{display:flex;flex-direction:column;gap:8px}
.dp-adm-steps li::before{content:"";height:6px;border-radius:3px;background:var(--line-2);transition:background .4s}
.dp-adm-steps li.done::before{background:var(--ink)}
.dp-adm-steps li.done{color:var(--ink)}
.dp-adm-steps li.now::before{background:var(--alert)}
.dp-adm-steps li.now{color:var(--alert-text);font-weight:600}
.dp-adm-cur{display:none;padding:0 16px 14px;border-bottom:1px solid var(--line);font-family:var(--f-ui);font-size:12.5px;color:var(--alert-text);font-weight:600}
.dp-adm-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);padding:22px}
.dp-adm-got{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.dp-adm-got li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px;transition:color .3s}
.dp-adm-got li::before{content:"";width:16px;height:16px;border-radius:50%;flex:none;background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;transition:background-color .3s,box-shadow .3s}
.is-armed .dp-adm-got li:not(.in){color:var(--ink-3)}
.is-armed .dp-adm-got li:not(.in)::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.dp-missing{padding:20px 22px;border-radius:16px;background:rgba(255,59,48,.06);box-shadow:inset 0 0 0 1px rgba(255,59,48,.25);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.dp-missing .dp-col-k{color:var(--alert-text)}
.dp-missing-t{font-family:var(--f-brand);font-size:clamp(1.3rem,1.1rem + .6vw,1.6rem);letter-spacing:-.02em;line-height:1.2;margin-bottom:14px}
.dp-missing-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.dp-missing-l li{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-top:1px solid rgba(255,59,48,.15);font-size:13px}
.dp-missing-l span{color:var(--ink-2)}
.dp-missing-l b{font-weight:500;text-align:right}
.is-armed .dp-missing:not(.in){opacity:0;transform:translateY(10px)}
@media (max-width:760px){
  .dp-adm-steps{font-size:0;gap:4px;padding-bottom:8px;border-bottom:0}
  .dp-adm-steps li{gap:0}
  .dp-adm-cur{display:block}
  .dp-adm-body{grid-template-columns:minmax(0,1fr);padding:16px}
  .dp-adm-top,.dp-adm-steps{padding-inline:16px}
}

/* ---------- Movimentações ---------- */
.dp-mov-t{max-width:22ch;margin-bottom:var(--space-head)}
.dp-mov-tabs{display:flex;gap:clamp(16px,3vw,40px);border-bottom:1px solid var(--line-2);margin-bottom:clamp(28px,3vw,40px);overflow-x:auto}
.dp-mtab{appearance:none;border:0;background:none;padding:0 0 14px;margin-bottom:-1px;border-bottom:2px solid transparent;font-family:var(--f-brand);font-size:clamp(1.15rem,.95rem + .8vw,1.7rem);letter-spacing:-.02em;color:var(--ink-3);cursor:pointer;flex:none;transition:color .2s,border-color .2s;min-height:44px}
.dp-mtab:hover{color:var(--ink)}
.dp-mtab[aria-selected="true"]{color:var(--ink);border-color:var(--blue);cursor:default}
.dp-mov-panel{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,4vw,64px);align-items:start;min-height:300px}
.dp-req{list-style:none;margin:0;padding:0;font-family:var(--f-ui)}
.dp-req li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.dp-req li:first-child{border-top:1px solid var(--line)}
.dp-req li > span:first-child{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);padding-top:2px}
.dp-ruler{padding:22px 24px 26px;border-radius:20px;background:var(--paper);font-family:var(--f-ui)}
.dp-ruler-t{font-size:13px;font-weight:600;margin-bottom:4px}
.dp-ruler-s{font-size:12.5px;color:var(--ink-2);margin-bottom:28px}
.dp-track{position:relative;height:6px;border-radius:3px;background:var(--line-2);margin:0 6px 72px}
.dp-track-gap{position:absolute;top:0;bottom:0;border-radius:3px;background:var(--blue)}
.dp-mk{position:absolute;top:-5px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.dp-mk::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--white);box-shadow:inset 0 0 0 2px var(--ink)}
.dp-mk.blue::before{box-shadow:inset 0 0 0 2px var(--blue)}
.dp-mk span{position:absolute;top:24px;white-space:nowrap;font-size:11.5px;color:var(--ink-2);text-align:center;line-height:1.35}
.dp-mk b{display:block;color:var(--ink);font-weight:600}
.dp-mk.first span{left:-8px;text-align:left}
.dp-mk.last span{right:-8px;text-align:right}
.dp-mk:not(.first):not(.last) span{left:50%;transform:translateX(-50%)}
.dp-ruler-n{font-size:12.5px;color:var(--ink-2);padding-top:14px;border-top:1px solid var(--line)}
.dp-ruler-n b{color:var(--ink);font-weight:500}
@media (max-width:900px){.dp-mov-panel{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.dp-req li{grid-template-columns:minmax(0,1fr);gap:2px}}

/* ---------- Ponto ---------- */
.dp-ponto{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(240px,.7fr);gap:clamp(20px,3vw,40px);align-items:start}
.dp-week{overflow:hidden}
.dp-week{--wc:72px repeat(4,minmax(0,1fr)) 64px}
.dp-week-cols,.dp-week-list li{display:grid;grid-template-columns:var(--wc);gap:10px;align-items:center;padding:12px 18px;font-variant-numeric:tabular-nums}
.dp-week-cols{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);background:#FAFAFB;border-bottom:1px solid var(--line);padding-block:9px}
.dp-week-list{list-style:none;margin:0;padding:0}
.dp-week-list li{border-bottom:1px solid var(--line)}
.dp-week-list li:last-child{border-bottom:0}
.dp-week-list .d{font-weight:500}
.dp-week-list .s{text-align:right;color:var(--ink-2)}
.dp-week-cols span:last-child{text-align:right}
.dp-week-list li.exc{background:rgba(0,122,255,.04)}
.dp-week-list .miss{color:var(--alert-text);font-size:12px}
.dp-exc{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:12.5px;color:var(--ink-2)}
.dp-ponto-side{display:flex;flex-direction:column;gap:12px}
.dp-tile{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border-radius:18px;background:var(--white);box-shadow:0 0 0 1px var(--line);font-family:var(--f-ui)}
.dp-tile .k{font-size:11.5px;color:var(--ink-2)}
.dp-tile .v{font-family:var(--f-brand);font-size:2rem;letter-spacing:-.035em;line-height:1.1}
.dp-tile .m{font-size:12.5px;color:var(--ink-2)}
.dp-maybe{padding:18px 20px;border-radius:18px;box-shadow:inset 0 0 0 1px var(--line-2);border:1px dashed transparent}
.dp-maybe ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:.92rem}
.dp-maybe li{display:flex;gap:10px;align-items:baseline}
.dp-maybe li::before{content:"";width:6px;height:6px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--neutral);flex:none;transform:translateY(-2px)}
.dp-maybe-n{margin-top:12px;font-family:var(--f-ui);font-size:12px;color:var(--ink-2)}
@media (max-width:980px){.dp-ponto{grid-template-columns:minmax(0,1fr)}.dp-ponto-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.dp-maybe{grid-column:1 / -1}}
@media (max-width:620px){
  .dp-week-cols{display:none}
  .dp-week{--wc:56px repeat(4,minmax(0,1fr))}
  .dp-week-list .s{grid-column:1 / -1;text-align:left;font-size:12px}
  .dp-week-list .s::before{content:"Saldo do dia: "}
  .dp-week-list li{padding:12px 14px;gap:4px 8px;font-size:12.5px}
  .dp-ponto-side{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Folha (escuro) ---------- */
.dp-folha-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,4vw,64px);align-items:center}
.dp-fl{overflow:hidden}
.dp-fl-list{list-style:none;margin:0;padding:0}
.dp-fl-list li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line-d);transition:background .35s}
.dp-fl-list li:last-child{border-bottom:0}
.dp-fl-list .n{font-weight:500}
.dp-fl-list .v{font-size:12px;color:var(--paper-2);text-align:right}
.dp-fl-ck{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--paper-3);position:relative;transition:background .3s,box-shadow .3s}
.dp-fl-list li.ok .dp-fl-ck{background:var(--ok);box-shadow:none}
.dp-fl-list li.ok .dp-fl-ck::after{content:"";position:absolute;left:6px;top:3.5px;width:4px;height:8px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.dp-fl-list li.bad{background:rgba(255,59,48,.09)}
.dp-fl-list li.bad .dp-fl-ck{background:var(--alert);box-shadow:none}
.dp-fl-list li.bad .dp-fl-ck::after{content:"";position:absolute;left:8.2px;top:4px;width:1.6px;height:6px;background:#fff;box-shadow:0 8px 0 #fff;border-radius:1px}
.dp-fl-list li.bad .v{color:#FF8A82}
.is-armed .dp-fl-list li:not(.ok):not(.bad) .v{opacity:0}
.dp-fl-list .v{transition:opacity .3s}
.dp-fl-state{margin:0;display:flex;flex-direction:column}
.dp-fl-state div{display:flex;flex-direction:column;gap:2px;padding:14px 0;border-top:1px solid var(--line-d)}
.dp-fl-state div:last-child{border-bottom:1px solid var(--line-d)}
.dp-fl-state dt{font-family:var(--f-ui);font-size:11.5px;color:var(--paper-3)}
.dp-fl-state dd{margin:0;font-size:1.05rem;letter-spacing:-.01em}
[data-fl-deliver]{color:#FFB3AD}
@media (max-width:900px){.dp-folha-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.dp-fl-list li{grid-template-columns:22px minmax(0,1fr);row-gap:2px}.dp-fl-list .v{grid-column:2;text-align:left}}

/* ---------- Documentos · acesso ---------- */
.dp-acc{font-family:var(--f-ui)}
.dp-acc{--ac:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}
.dp-acc-head,.dp-acc-list li{display:grid;grid-template-columns:var(--ac);gap:12px;align-items:center}
.dp-acc-head{padding:0 0 12px;border-bottom:1px solid var(--line-2);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.dp-acc-list{list-style:none;margin:0;padding:0}
.dp-acc-list li{padding:16px 0;border-bottom:1px solid var(--line);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.dp-acc-doc{display:flex;flex-direction:column;gap:2px}
.dp-acc-doc b{font-weight:600;font-size:14px}
.dp-acc-doc span{font-size:12.5px;color:var(--ink-2)}
.dp-acc-c{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3)}
.dp-acc-c::before{content:"";width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--neutral);flex:none}
.dp-acc-c.on{color:var(--ink)}
.dp-acc-c.on::before{background:var(--ink);box-shadow:none}
.is-armed .dp-acc-list li:not(.in){opacity:0;transform:translateY(8px)}
@media (max-width:760px){
  .dp-acc-head{display:none}
  .dp-acc-list li{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px}
  .dp-acc-doc{grid-column:1 / -1}
  .dp-acc-c{flex-direction:column;align-items:flex-start;gap:3px;font-size:12px}
  .dp-acc-c::before{display:none}
  .dp-acc-c::after{content:attr(data-l);order:-1;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
  .dp-acc-c.on{font-weight:500}
}

/* ---------- Portal ---------- */
.dp-portal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,104px);align-items:center}
.dp-portal-demo{display:flex;flex-direction:column;align-items:center}
.dp-portal-demo .explore{align-self:center}
.dp-phone-lg{width:min(340px,100%);border-radius:40px;padding:12px;display:flex;flex-direction:column}
.dp-phone-screen{background:var(--paper);border-radius:30px 30px 8px 8px;padding:24px 16px 16px;min-height:430px;font-family:var(--f-ui);font-size:13px;display:flex;flex-direction:column;gap:10px}
.dp-phone-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:8px 4px 4px;background:var(--ink)}
.dp-phone-nav button{appearance:none;border:0;background:none;color:var(--paper-2);font-family:var(--f-ui);font-size:12px;min-height:40px;border-radius:10px;cursor:pointer;transition:background .2s,color .2s}
.dp-phone-nav button:hover{color:var(--paper);background:rgba(245,245,247,.08)}
.dp-phone-nav button[aria-selected="true"]{background:var(--paper);color:var(--ink);font-weight:500;cursor:default}
.dp-pt-h{font-family:var(--f-brand);font-size:1.25rem;letter-spacing:-.02em;margin-bottom:4px}
.dp-pt-card{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:14px;background:var(--white)}
.dp-pt-card .k{font-size:11px;color:var(--ink-2)}
.dp-pt-card .v{font-weight:500}
.dp-pt-card .m{font-size:12px;color:var(--ink-2)}
.dp-pt-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.dp-pt-note{margin-top:auto;font-size:11.5px;color:var(--ink-2);display:flex;gap:8px;align-items:center}
@media (max-width:900px){.dp-portal{grid-template-columns:minmax(0,1fr)}}

/* ---------- Empresa ---------- */
.dp-emp-ui{overflow:hidden}
.dp-emp-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line)}
.dp-emp-tiles div{display:flex;flex-direction:column;gap:2px;padding:18px 20px;border-right:1px solid var(--line)}
.dp-emp-tiles div:last-child{border-right:0}
.dp-emp-tiles .k{font-size:11.5px;color:var(--ink-2)}
.dp-emp-tiles .v{font-family:var(--f-brand);font-size:1.9rem;letter-spacing:-.035em;line-height:1.1}
.dp-emp-tiles .m{font-size:12px;color:var(--ink-2)}
.dp-emp-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);padding:20px}
.dp-team{list-style:none;margin:0;padding:0}
.dp-team li{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.dp-team li:last-child{border-bottom:0}
.dp-team b{color:var(--ink);font-weight:500}
.dp-needs{padding:16px 18px;border-radius:14px;background:var(--blue-wash)}
.dp-needs .dp-col-k{color:var(--blue-text)}
.dp-needs ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.dp-needs li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;align-items:center;padding:10px 0;border-top:1px solid rgba(0,122,255,.15)}
.dp-needs li b{font-weight:500;font-size:13px}
.dp-needs li span:not(.ui-btn){grid-column:1;font-size:12px;color:var(--ink-2)}
.dp-needs li .ui-btn{grid-column:2;grid-row:1 / span 2;background:var(--white)}
.dp-needs li .ui-btn.primary{background:var(--blue)}
@media (max-width:860px){.dp-emp-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.dp-emp-tiles div:nth-child(2){border-right:0}.dp-emp-tiles div:nth-child(-n+2){border-bottom:1px solid var(--line)}.dp-emp-body{grid-template-columns:minmax(0,1fr)}}
@media (max-width:420px){.dp-needs li{grid-template-columns:minmax(0,1fr)}.dp-needs li .ui-btn{grid-column:1;grid-row:auto;justify-self:start;margin-top:8px}}

/* ---------- IA · storyboard ---------- */
.dp-story{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;font-family:var(--f-ui)}
.dp-story > li{display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:18px;background:var(--white);box-shadow:0 0 0 1px var(--line);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.dp-story-k{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);font-weight:500}
.dp-story-q{font-family:var(--f-brand);font-size:1.1rem;letter-spacing:-.015em;line-height:1.35}
.dp-story-m{margin-top:auto;font-size:11.5px;color:var(--ink-2)}
.dp-story-r{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.dp-story-r li{display:flex;flex-direction:column;font-size:13px}
.dp-story-r span{font-size:12px;color:var(--ink-2)}
.dp-story-p{padding:12px;border-radius:12px;background:var(--paper);font-size:13px;line-height:1.5}
.dp-story > li.wait{background:var(--ink);color:var(--paper);box-shadow:none}
.dp-story > li.wait .dp-story-k{color:var(--paper-2)}
.dp-story-w{font-size:1rem;font-family:var(--f-brand);letter-spacing:-.01em;line-height:1.35}
.dp-story-b{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap}
.dp-story .wait .ui-btn:not(.primary){background:rgba(245,245,247,.1);color:var(--paper)}
.is-armed .dp-story > li:not(.in){opacity:0;transform:translateY(10px)}
@media (max-width:1000px){.dp-story{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.dp-story{grid-template-columns:minmax(0,1fr)}}

/* ---------- Pessoas ---------- */
.dp-people .wrap{display:flex;flex-direction:column;gap:clamp(28px,3vw,44px)}
.photo.dp-photo{aspect-ratio:21/9}
.dp-photo figcaption{max-width:440px}
.dp-people-t{font-size:clamp(1.5rem,1.05rem + 1.6vw,2.5rem);line-height:1.2;letter-spacing:-.025em;max-width:30ch}
@media (max-width:760px){.photo.dp-photo{aspect-ratio:4/3}}

/* ---------- 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)}}
.dp-s-esc .chip.alert{background:rgba(255,59,48,.18);color:#FF9C95}
.dp-s-esc .chip.blue{background:rgba(0,122,255,.22);color:#7DBBFF}

/* ===== Acabamento (QA visual) ===== */
/* Pontes entre os lados: o rótulo fica acima da linha, sem caixa branca encostando nos cards. */
.dp-bridge span{background:none;padding:0 6px;max-width:100%;transform:translateY(-26px)}
/* Cards arredondados recortam o conteúdo: a faixa "Precisa de você" acompanha o canto. */
.dp-sides-grid .ui{overflow:hidden}
/* Barra do portal: cada aba do tamanho do próprio rótulo, sem encavalar. */
.dp-phone-nav{grid-template-columns:repeat(4,auto);justify-content:space-between;gap:2px;padding:8px 6px 6px}
.dp-phone-nav button{padding:0 12px;white-space:nowrap}
@media (max-width:400px){.dp-phone-nav button{padding:0 8px;font-size:11.5px}}
/* Ícone de pendência: "!" tipográfico centrado, sem traços vazando do círculo. */
.dp-fl-list li.bad .dp-fl-ck::after{content:"!";left:0;top:0;width:100%;height:100%;background:none;box-shadow:none;border-radius:0;color:#fff;font:700 12px/18px var(--f-ui);text-align:center}
.dp-track{margin:0 8px 72px}

/* =====================================================================
   MOBILE (≤ 720px) · refinamento editorial — desktop/tablet intocados.
   Ritmo humano escritório → empresa → funcionário: visual logo após a primeira ideia,
   explicação detalhada depois da UI, linhas do tempo verticais e controles ≥ 44px.
   ===================================================================== */
@media (max-width:720px){
  /* links de texto com alvo de toque ≥ 44px */
  main .link{position:relative}
  main .link::after{content:"";position:absolute;left:0;right:0;top:-9px;bottom:-9px}
  /* Hero: título → lead → CTAs → trilha de Júlia (visual) → frase de apoio */
  .dp-hero .wrap{display:flex;flex-direction:column}
  .dp-hero-grid,.dp-hero-side{display:contents}
  .dp-hero-side .lead{order:1;margin-top:24px}
  .dp-hero-side .btn-row{order:2;margin-top:24px}
  .dp-life{order:3;margin-top:36px;padding:20px;gap:18px}
  .dp-hero-side .body{order:4;margin-top:24px}

  /* Três lados: seletor de largura total, um lado por vez */
  .dp-sides-seg{display:flex;width:100%}
  .dp-sides-seg button{flex:1;height:44px;font-size:13px;padding:0 8px}

  /* Admissão: etapas nomeadas em linha do tempo vertical (duas colunas, leitura de cima para baixo) */
  .dp-adm-steps{font-size:12.5px;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto);grid-auto-flow:column;gap:0 16px;padding:14px 16px;border-bottom:1px solid var(--line)}
  .dp-adm-steps li{position:relative;flex-direction:row;align-items:center;gap:10px;min-height:28px}
  .dp-adm-steps li::before{width:9px;height:9px;border-radius:50%;flex:none;position:relative;z-index:1}
  .dp-adm-steps li:not(:nth-child(4)):not(:last-child)::after{content:"";position:absolute;left:4px;top:calc(50% + 6px);height:calc(100% - 12px);width:1px;background:var(--line-2)}
  .dp-adm-cur{display:none}

  /* Movimentações: abas em faixa rolável, ativa sempre visível */
  .dp-mov-tabs{gap:22px;scrollbar-width:none;margin-bottom:24px}
  .dp-mov-tabs::-webkit-scrollbar{display:none}

  /* Ponto: UI primeiro, explicação depois; menos colunas (entrada → saída, saldo) e exceção/fechamento em foco */
  #ponto .wrap{display:flex;flex-direction:column}
  #ponto .dp-head{display:contents}
  #ponto .dp-head > .stack-m{order:0;margin-bottom:var(--space-head)}
  .dp-ponto{display:contents}
  .dp-week{order:1}
  #ponto .dp-head-copy{order:2;margin-top:24px}
  .dp-ponto-side{order:3;margin-top:20px;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  .dp-week{--wc:56px auto minmax(0,1fr)}
  .dp-week-list li > span:nth-child(3),.dp-week-list li > span:nth-child(4){display:none}
  .dp-week-list li > span:nth-child(5)::before{content:"→ ";color:var(--ink-3)}
  .dp-tile{padding:14px 16px}
  .dp-tile .v{font-size:1.6rem}

  /* Documentos: cards simples, não mosaico */
  .dp-acc-list{display:flex;flex-direction:column;gap:10px}
  .dp-acc-list li{padding:14px 16px;border-bottom:0;border-radius:14px;background:var(--paper)}

  /* Portal: celular quase na largura toda, abas da barra com toque ≥ 44px */
  .dp-phone-lg{width:100%;max-width:360px}
  .dp-phone-nav button{min-height:44px}
  .dp-phone-screen{min-height:400px}

  /* Empresa: painel enxuto */
  .dp-team li:last-child{display:none}
  .dp-team li:nth-last-child(2){border-bottom:0}
  .dp-emp-tiles div{padding:14px 16px}
  .dp-emp-body{padding:16px}

  /* Kyra: cartões compactos (resultado → prévia → aguarda decisão) */
  .dp-story{gap:10px}
  .dp-story > li{padding:16px;gap:10px}
}