/* =========================================================
   Liderança Profunda · Trilha Comunicação Não-Violenta
   Componentes próprios desta trilha — carrega depois de style.css
   e reaproveita todo o sistema visual (anéis, tipografia, cores).
   ========================================================= */

/* ---------- Diagrama dos quatro componentes (dentro do card escuro) ---------- */
/* largura explícita: como grid item, shrink-to-fit deixaria a caixa colada no texto */
.osnp{position:relative;width:min(100%,352px);justify-self:center;margin:0 auto;padding:30px 28px 26px;border-radius:var(--r-lg);background:radial-gradient(120% 110% at 18% 0%,rgba(255,255,255,.10),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(3px)}
.osnp .cap{font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);text-align:center;margin-bottom:24px}
.osnp ol{list-style:none;margin:0;padding:0}
.osnp li{position:relative;display:grid;grid-template-columns:36px 1fr;gap:16px;padding-bottom:22px}
.osnp li:last-child{padding-bottom:0}
/* fio entre as bolinhas: começa abaixo de uma e morre no topo da seguinte */
.osnp li::before{content:"";position:absolute;left:17.5px;top:38px;bottom:4px;width:1px;background:linear-gradient(180deg,rgba(239,182,94,.4),rgba(255,255,255,.06))}
.osnp li:last-child::before{display:none}
.osnp li i{grid-row:span 2;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--gold);background:rgba(239,182,94,.13);border:1px solid rgba(239,182,94,.36);position:relative;z-index:1;transition:.4s var(--ease)}
.osnp li b{font-family:var(--display);font-weight:600;font-size:19.5px;letter-spacing:-.025em;color:#fff;line-height:1.2;margin-bottom:3px}
.osnp li span{font-size:13.5px;line-height:1.5;color:#A9B6C7;font-weight:350}
.osnp li:hover i{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.osnp .foot{margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;line-height:1.55;color:#C3CEDC;font-weight:350}
.osnp .foot em{font-style:normal;color:var(--gold)}
@media(max-width:600px){.osnp{padding:26px 22px 22px}}

/* ---------- As cinco diferenciações ---------- */
.diffs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
@media(max-width:940px){.diffs{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.diffs{grid-template-columns:1fr}}
.diff{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 28px 26px;box-shadow:var(--sh-xs);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .4s}
.diff:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:#E0D6C9}
.diff .row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.diff .row b{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.025em;color:var(--ink)}
.diff .row s{font-family:var(--display);font-size:19px;letter-spacing:-.025em;color:var(--soft);text-decoration:none}
.diff .row .x{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--orange-soft);color:var(--orange-d);font-size:13px;font-weight:600}
.diff p{margin:0;font-size:15px;line-height:1.62;color:var(--mid);font-weight:350}
.diff.head{background:var(--navy);color:#fff;border-color:var(--navy);overflow:hidden}
.diff.head .rings-art{width:220px;right:-80px;bottom:-96px;opacity:.2;border-color:var(--gold)}
.diff.head .rings-art::before,.diff.head .rings-art::after{border-color:var(--gold)}
.diff.head .eyebrow{color:var(--gold);margin-bottom:14px;position:relative}
.diff.head h3{color:#fff;font-size:26px;margin-bottom:12px;position:relative}
.diff.head p{color:#C3CEDC;position:relative}
.diff.head:hover{border-color:var(--navy)}

/* ---------- Como acontece ---------- */
.how{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-top:22px}
@media(max-width:900px){.how{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.how{grid-template-columns:1fr}}
.how div{background:#fff;padding:28px 24px;font-size:15px;line-height:1.55;color:var(--mid);font-weight:350;transition:background .4s var(--ease)}
.how div:hover{background:var(--cream)}
.how i{display:block;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--orange);margin-bottom:16px}

/* ---------- Linha do tempo das sete semanas ---------- */
.rail{position:relative;display:grid;grid-template-columns:1.45fr repeat(5,1fr);align-items:start;margin-top:46px}
/* o fio nasce no centro do primeiro nó (coluna 1.45fr) e morre no centro do último */
.rail::before{content:"";position:absolute;left:11.2%;right:7.75%;top:11.5px;height:1px;background:linear-gradient(90deg,var(--orange),var(--line) 40%,var(--line))}
.rail .node{position:relative;text-align:center;padding:0 8px}
.rail .node .d{width:14px;height:14px;border-radius:50%;background:#fff;border:1.5px solid var(--line);margin:5px auto 16px;transition:.4s var(--ease)}
.rail .node.start .d{width:24px;height:24px;margin:0 auto 16px;background:var(--orange);border-color:var(--orange);box-shadow:0 0 0 6px rgba(244,101,12,.13)}
.rail .node:hover .d{border-color:var(--orange)}
.rail .node .et{display:block;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin-bottom:7px}
.rail .node.start .et{color:var(--orange)}
.rail .node b{display:block;font-family:var(--display);font-weight:600;font-size:17.5px;letter-spacing:-.025em;color:var(--ink);line-height:1.2;margin-bottom:5px}
.rail .node span{display:block;font-size:12.5px;line-height:1.5;color:var(--soft);font-weight:350}
@media(max-width:820px){
  .rail{grid-template-columns:1fr;margin-top:34px}
  .rail::before{left:11.5px;right:auto;top:12px;bottom:16px;width:1px;height:auto;background:linear-gradient(180deg,var(--orange),var(--line))}
  .rail .node{display:grid;grid-template-columns:24px 1fr;gap:16px;text-align:left;padding:0 0 22px}
  .rail .node:last-child{padding-bottom:0}
  .rail .node .d{grid-row:span 3;justify-self:center;margin:5px 0 0}
  .rail .node.start .d{margin:0}
}

/* ---------- Nota clínica / ressalva ---------- */
.caveat{max-width:820px;margin:34px auto 0}

/* ---------- Frase de reconhecimento no topo de "Para quem é" ---------- */
.statement{max-width:none;margin:0;text-align:center;font-family:var(--display);font-weight:600;
  font-size:clamp(21px,2.6vw,30px);line-height:1.32;letter-spacing:-.028em;color:var(--ink)}
.sec-head .statement{margin-top:22px}
.statement em{font-style:normal;color:var(--orange-d)}

/* ---------- Segundo cabeçalho dentro de uma seção ---------- */
.sec-head.sub-head{margin:80px auto 36px}
@media(max-width:680px){.sec-head.sub-head{margin:54px auto 26px}}

/* ---------- Ajustes de reaproveitamento ---------- */
.skills.four{grid-template-columns:repeat(2,1fr)}
@media(max-width:700px){.skills.four{grid-template-columns:1fr}}
/* etapa 2 é online: o card recebe o mesmo peso do presencial, com marca própria */
.lvl.online .tagl{background:var(--gold-soft);color:#8A6220}
.lvl.online .mlist li::before{color:#B98428}
/* frase de método dentro do card da Etapa 1 */
.lvl .intro{margin:0 0 20px;font-size:15.5px;line-height:1.62;color:var(--mid);font-weight:350}
.lvl .fmt{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin:0 0 22px 12px}
.lvl .fmt::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--soft)}
/* quando o formato quebra para a linha de baixo, o recuo de 12px vira desalinho */
@media(max-width:600px){.lvl .when{margin-bottom:12px}.lvl .fmt{margin-left:0}}

/* sete itens no menu desta página: respiro menor para não estourar a linha */
@media(min-width:1041px){.nav .wrap{gap:14px}.nav-links a{padding:9px 9px}}