/* =========================================================
   components.css
   Elementos gráficos de leitura: ícones, cabeçalho editorial,
   jornada do método, abas, matriz de atuação, ciclos, camadas,
   legendas e destaques. Usa os tokens de base.css.
   ========================================================= */

[hidden]{ display:none !important; }

.t-plum{ color:var(--plum); }
.t-sage{ color:var(--sage); }
.t-pink{ color:var(--pink); }
.t-dim{ color:var(--ink-dim); }

.mt-l{ margin-top:clamp(40px,6vh,64px); }
.mt-m{ margin-top:clamp(24px,4vh,40px); }
.mt-s{ margin-top:clamp(14px,2vh,20px); }

/* ---------- ícones ---------- */
.ico{
  width:22px; height:22px; flex-shrink:0;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.ico-sm{ width:16px; height:16px; }
.ico-lg{ width:30px; height:30px; }

.badge-ico{
  width:46px; height:46px; border-radius:14px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong); background:rgba(245,243,242,.04); color:var(--ink);
}
.badge-ico.sm{ width:38px; height:38px; border-radius:12px; }
.badge-ico.sm .ico{ width:19px; height:19px; }
.badge-ico.plum{ color:var(--plum); border-color:rgba(160,110,140,.38); background:rgba(160,110,140,.10); }
.badge-ico.sage{ color:var(--sage); border-color:rgba(159,192,185,.34); background:rgba(159,192,185,.08); }
.badge-ico.pink{ color:var(--pink); border-color:rgba(238,171,172,.34); background:rgba(238,171,172,.08); }

/* ---------- tipografia de apoio ---------- */
.section-head{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(18px,4vw,72px); align-items:end;
}
@media (max-width:900px){ .section-head{ grid-template-columns:1fr; } }
.section-head h2{ max-width:21ch; }

.lead{ color:var(--ink-dim); font-size:clamp(.98rem,1.25vw,1.08rem); line-height:1.7; max-width:54ch; }
.lead strong{ color:var(--ink); font-weight:600; }

.kicker{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; margin-bottom:10px; }

.mini-label{
  display:flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:var(--ink-dim); margin-bottom:12px;
}
.mini-label .ico{ width:14px; height:14px; }

.caption{
  display:flex; gap:10px; align-items:flex-start;
  color:var(--ink-dim); font-size:.87rem; line-height:1.6; max-width:76ch;
}
.caption .ico{ width:16px; height:16px; margin-top:3px; }
.caption strong{ color:var(--ink); font-weight:600; }
.caption a{ color:var(--ink); text-underline-offset:3px; }

.pull{
  font-size:clamp(1.25rem,2.3vw,1.85rem); line-height:1.35; font-weight:600; letter-spacing:-.01em;
  max-width:30ch; padding-left:clamp(18px,2vw,26px); border-left:2px solid var(--plum);
}

.more-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  font-size:.86rem; font-weight:600; color:var(--ink); text-decoration:none;
}
.more-link .ico{ width:16px; height:16px; transition:transform .3s ease; }
.more-link:hover .ico{ transform:translateX(4px); }

/* ---------- chips ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; }
/* etiqueta (li ou span .chip) é preenchida e não reage; link (a.chip) é contornado e leva seta */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 13px; border-radius:var(--radius-sm);
  border:1px solid transparent; background:rgba(245,243,242,.07);
  font-size:.8rem; line-height:1.25; color:var(--ink);
}
.chip .ico{ width:14px; height:14px; }
.chip.plum{ background:rgba(160,110,140,.18); }
.chip.sage{ background:rgba(159,192,185,.14); }
.chip.pink{ background:rgba(238,171,172,.14); }
.chip-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
a.chip{ background:transparent; border-color:var(--line-strong); text-decoration:none; transition:border-color .3s ease, background .3s ease; }
a.chip.plum{ border-color:rgba(160,110,140,.55); }
a.chip.sage{ border-color:rgba(159,192,185,.5); }
a.chip.pink{ border-color:rgba(238,171,172,.5); }
a.chip::after{
  content:""; width:5px; height:5px; margin-left:1px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg); opacity:.6; transition:transform .25s ease, opacity .25s ease;
}
a.chip:hover{ border-color:var(--ink); background:rgba(245,243,242,.07); }
a.chip:hover::after{ opacity:1; transform:translateX(2px) rotate(-45deg); }

/* ---------- destaques ---------- */
.callout{ padding:clamp(28px,4vw,52px); overflow:hidden; }
.callout-text{
  font-size:clamp(1.4rem,2.8vw,2.3rem); line-height:1.2; font-weight:700;
  letter-spacing:-.018em; max-width:26ch;
}
.callout-foot{ margin-top:18px; color:var(--ink-dim); font-size:.95rem; line-height:1.65; max-width:62ch; }

.probe{
  display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start;
  padding:clamp(22px,3vw,34px); border-radius:var(--radius-lg); border:1px dashed var(--line-strong);
}
.probe p{ font-size:clamp(1.1rem,1.9vw,1.5rem); font-weight:600; line-height:1.35; max-width:38ch; }

/* ---------- palavra por palavra ---------- */
.words{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.6vw,18px); }
@media (max-width:980px){ .words{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .words{ grid-template-columns:1fr; } }
.word{ padding:clamp(22px,2.6vw,30px); }
.word-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.word-bar{ display:block; width:34px; height:3px; border-radius:3px; }
.word-top .ico{ color:var(--ink-dim); }
.word h3{ font-size:clamp(1.3rem,2.1vw,1.8rem); font-weight:800; letter-spacing:-.02em; margin-bottom:12px; }
.word p{ color:var(--ink-dim); font-size:.92rem; line-height:1.6; }

/* ---------- listas com ícone e divisão em duas colunas ---------- */
.split{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,5vw,80px); align-items:start; }
@media (max-width:980px){ .split{ grid-template-columns:1fr; } }

.icon-list{ list-style:none; display:flex; flex-direction:column; }
.icon-list li{
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center;
  padding:clamp(14px,2vh,18px) 0; border-top:1px solid var(--line);
}
.icon-list li:last-child{ border-bottom:1px solid var(--line); }
.icon-list p{ font-size:1rem; line-height:1.5; }

/* ---------- pedido x investigação ---------- */
.reframe{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1.3fr); gap:clamp(12px,2vw,24px); align-items:stretch; }
.reframe-arrow{ display:flex; align-items:center; justify-content:center; color:var(--ink-dim); }
.reframe-arrow .ico{ width:28px; height:28px; }
@media (max-width:820px){ .reframe{ grid-template-columns:1fr; } .reframe-arrow .ico{ transform:rotate(90deg); } }
.reframe-card{ padding:clamp(22px,2.6vw,30px); }
.reframe-card h4{ font-size:clamp(1.1rem,1.6vw,1.3rem); font-weight:700; line-height:1.35; }
.reframe-card p{ color:var(--ink-dim); font-size:.9rem; line-height:1.6; margin-top:16px; }

/* ---------- critérios de entrada ---------- */
.refuse{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.8vw,20px); margin-top:clamp(36px,5vh,52px); }
@media (max-width:980px){ .refuse{ grid-template-columns:1fr; } }
.refuse-card{ padding:clamp(24px,3vw,34px); }
.refuse-card > .ico{ width:30px; height:30px; color:var(--pink); margin-bottom:26px; }
.refuse-card h3{ font-size:clamp(1.15rem,1.7vw,1.4rem); font-weight:700; line-height:1.25; margin-bottom:12px; letter-spacing:-.01em; }
.refuse-card p{ color:var(--ink-dim); font-size:.92rem; line-height:1.6; }

/* ---------- legenda de formas ---------- */
.legend{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 28px; font-size:.86rem; color:var(--ink-dim); }
.legend-item{ display:inline-flex; align-items:center; gap:10px; }
.legend-item strong{ color:var(--ink); font-weight:600; }
.shape-gate, .shape-move{ display:inline-block; flex-shrink:0; border:1.5px solid currentColor; }
.shape-gate{ width:9px; height:9px; transform:rotate(45deg); border-radius:2px; margin:0 2px; }
.shape-move{ width:11px; height:11px; border-radius:50%; }

/* ---------- jornada do método (abas) ---------- */
.journey{ margin-top:clamp(26px,4vh,36px); }
.journey-scroll{
  overflow-x:auto; scrollbar-width:none;
  margin:0 calc(-1 * clamp(20px,5vw,72px)); padding:8px clamp(20px,5vw,72px) 0;
}
.journey-scroll::-webkit-scrollbar{ display:none; }
.journey-track{ position:relative; display:grid; grid-template-columns:repeat(6,minmax(120px,1fr)); min-width:760px; }
.journey-track::before,
.journey-track::after{ content:""; position:absolute; top:27px; left:calc(100% / 12); height:2px; border-radius:2px; }
.journey-track::before{ right:calc(100% / 12); background:var(--line-strong); }
.journey-track::after{
  width:calc((100% - 100% / 6) * var(--active, 0) / 5);
  background:linear-gradient(90deg, var(--plum), var(--pink));
  transition:width .6s cubic-bezier(.2,.8,.2,1);
}

.j-node{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:0 6px 10px; text-align:center;
  background:none; border:0; color:var(--ink-dim); font:inherit; cursor:pointer;
  transition:color .3s ease;
}
.j-mark{ position:relative; width:56px; height:56px; display:grid; place-items:center; }
.j-mark::before{
  content:""; position:absolute; inset:8px;
  border:1.5px solid var(--line-strong); background:var(--bg);
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.j-node.move .j-mark::before{ border-radius:50%; }
.j-node.gate .j-mark::before{ inset:11px; border-radius:7px; transform:rotate(45deg); }
.j-mark b{ position:relative; font-size:12px; font-weight:700; letter-spacing:.04em; transition:color .35s ease; }
.j-mark .ico{ position:relative; width:18px; height:18px; transition:color .35s ease; }
.j-name{ font-size:.86rem; line-height:1.3; font-weight:600; max-width:14ch; }
.j-kind{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; opacity:.75; }
.j-node:hover{ color:var(--ink); }
.j-node:hover .j-mark::before{ border-color:var(--ink-dim); }
.j-node.is-done .j-mark::before{ border-color:var(--plum); }
.j-node[aria-selected="true"]{ color:var(--ink); }
.j-node[aria-selected="true"] .j-mark::before{
  background:var(--ink); border-color:var(--ink);
  box-shadow:0 0 0 6px rgba(245,243,242,.06), 0 0 40px rgba(238,171,172,.35);
}
.j-node[aria-selected="true"] .j-mark b,
.j-node[aria-selected="true"] .j-mark .ico{ color:var(--bg); }
.j-node:focus-visible{ outline:none; }
.j-node:focus-visible .j-name{ text-decoration:underline; text-underline-offset:4px; }

.j-panel{ margin-top:clamp(18px,3vh,28px); padding:clamp(24px,3.2vw,42px); }
.j-head{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin-bottom:clamp(22px,3vh,30px); }
.j-head h3{ font-size:clamp(1.35rem,2.3vw,1.9rem); font-weight:700; letter-spacing:-.015em; }
.j-step{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--pink); margin-bottom:4px; }
.j-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.j-col{ padding-right:clamp(18px,2.6vw,36px); }
.j-col + .j-col{ border-left:1px solid var(--line); padding-left:clamp(18px,2.6vw,36px); }
.j-col p{ font-size:.98rem; line-height:1.6; }
.j-col .mini-label + .chips{ margin-bottom:16px; }
.j-foot{ margin-top:clamp(20px,3vh,28px); padding-top:18px; border-top:1px solid var(--line); max-width:none; }
@media (max-width:900px){
  .j-grid{ grid-template-columns:1fr; }
  .j-col{ padding-right:0; }
  .j-col + .j-col{ border-left:0; padding-left:0; border-top:1px solid var(--line); margin-top:18px; padding-top:18px; }
}

[role="tabpanel"]:not([hidden]){ animation:panel-in .5s cubic-bezier(.2,.8,.2,1); }
@keyframes panel-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* ---------- seis movimentos ---------- */
.moves{ list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.8vw,20px); margin-top:clamp(40px,6vh,56px); }
@media (max-width:980px){ .moves{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .moves{ grid-template-columns:1fr; } }
.move{ padding:clamp(22px,2.6vw,30px); display:flex; flex-direction:column; }
.move-top{ display:flex; align-items:center; justify-content:space-between; }
.move-num{ font-size:clamp(2.2rem,3.6vw,3rem); font-weight:300; letter-spacing:-.04em; line-height:1; color:var(--ink-dim); }
.move-seg{ display:grid; grid-template-columns:repeat(6,1fr); gap:4px; margin:20px 0 22px; }
.move-seg span{ height:3px; border-radius:2px; background:var(--line-strong); }
.move-seg span.on{ background:var(--plum); }
.move h3{ font-size:1.12rem; font-weight:700; margin-bottom:10px; }
.move p{ color:var(--ink-dim); font-size:.92rem; line-height:1.6; }
.move-exit{ margin-top:auto; padding-top:20px; }
.move-exit div{ padding-top:16px; border-top:1px solid var(--line); }
.move-exit .mini-label{ margin-bottom:6px; color:var(--pink); }
.move-exit p{ color:var(--ink); font-size:.9rem; }

/* ---------- faixa de três ---------- */
.triad{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; }
.triad > div{ display:flex; gap:14px; align-items:center; padding:clamp(18px,2.4vw,26px); }
.triad > div + div{ border-left:1px solid var(--line); }
.triad .ico{ color:var(--pink); }
.triad strong{ font-size:1rem; font-weight:600; line-height:1.35; }
@media (max-width:760px){ .triad{ grid-template-columns:1fr; } .triad > div + div{ border-left:0; border-top:1px solid var(--line); } }

/* ---------- abas em pílula ---------- */
.tabs-bar{
  display:inline-flex; flex-wrap:wrap; gap:6px; padding:6px;
  border-radius:var(--radius-sm); border:1px solid var(--line); background:rgba(245,243,242,.03);
}
.tab-btn{
  display:inline-flex; align-items:center; gap:10px; padding:11px 20px;
  border-radius:var(--radius-sm); border:0; background:transparent;
  color:var(--ink-dim); font:inherit; font-size:.9rem; font-weight:600; cursor:pointer;
  transition:background .3s ease, color .3s ease;
}
.tab-btn:hover{ color:var(--ink); }
.tab-btn[aria-selected="true"]{ background:var(--ink); color:var(--bg); }
.tab-btn:focus-visible{ outline:2px solid var(--pink); outline-offset:2px; }
@media (max-width:640px){
  .tabs-bar{ display:flex; border-radius:22px; }
  .tab-btn{ flex:1 1 100%; border-radius:16px; }
}

/* ---------- entregáveis ---------- */
.deliv-wrap{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:clamp(14px,2vw,22px); margin-top:clamp(22px,3vh,30px); align-items:start; }
@media (max-width:980px){ .deliv-wrap{ grid-template-columns:1fr; } }
.deliv-list{ list-style:none; padding:clamp(6px,1vw,10px) clamp(22px,2.6vw,32px); }
.deliv{ display:grid; grid-template-columns:auto 1fr; gap:18px; padding:clamp(18px,2.4vh,24px) 0; align-items:start; }
.deliv + .deliv{ border-top:1px solid var(--line); }
.deliv h4{ font-size:1.02rem; font-weight:700; margin-bottom:6px; }
.deliv p{ color:var(--ink-dim); font-size:.92rem; line-height:1.6; }
.aside-card{ padding:clamp(24px,3vw,34px); }
.aside-card + .aside-card{ margin-top:clamp(14px,2vw,22px); }
.quote-big{ font-size:clamp(1.2rem,1.9vw,1.55rem); line-height:1.35; font-weight:600; letter-spacing:-.01em; }
.tool-list{ list-style:none; display:flex; flex-direction:column; gap:16px; }
.tool-list li{ display:grid; gap:4px; padding-left:14px; border-left:2px solid var(--line-strong); }
.tool-list strong{ font-size:.95rem; font-weight:700; letter-spacing:.06em; }
.tool-list span{ color:var(--ink-dim); font-size:.88rem; line-height:1.55; }
.checklist{ list-style:none; display:flex; flex-direction:column; gap:14px; }
.checklist li{ display:grid; grid-template-columns:auto 1fr; gap:12px; font-size:.94rem; line-height:1.5; }
.checklist .ico{ color:var(--sage); margin-top:1px; }

/* ---------- matriz de atuação ---------- */
.matrix{
  display:grid; grid-template-columns:minmax(130px,.62fr) repeat(3,minmax(0,1fr));
  grid-template-rows:auto repeat(4,auto); column-gap:clamp(10px,1.4vw,16px);
  margin-top:clamp(36px,5vh,52px);
}
.matrix-labels, .matrix-col{ grid-row:1 / span 5; display:grid; grid-template-rows:subgrid; }
.matrix-labels > div{
  padding:18px 0; border-top:1px solid var(--line);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--ink-dim);
}
.matrix-labels > div:first-child{ border-top:0; }
.matrix-col{ padding:0 clamp(18px,2vw,24px); }
.m-head{ padding:clamp(22px,2.6vw,28px) 0 18px; }
.m-head .badge-ico{ margin-bottom:16px; }
.m-need{ font-size:1.14rem; font-weight:700; line-height:1.25; }
.m-cell{ padding:18px 0; border-top:1px solid var(--line); font-size:.92rem; line-height:1.55; }
.m-cell .chip{ margin:-2px 0; }
@media (max-width:900px){
  .matrix{ display:flex; flex-direction:column; gap:14px; }
  .matrix-labels{ display:none; }
  .matrix-col{ display:block; }
  .m-cell::before{
    content:attr(data-label); display:block; margin-bottom:6px;
    font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--ink-dim);
  }
}

/* ---------- ciclos de cadência ---------- */
.cycles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,1.8vw,20px); }
@media (max-width:900px){ .cycles{ grid-template-columns:1fr; } }
.cycle-card{ padding:clamp(24px,3vw,34px); display:grid; grid-template-columns:minmax(140px,200px) 1fr; gap:clamp(20px,3vw,34px); align-items:center; }
@media (max-width:520px){ .cycle-card{ grid-template-columns:1fr; } .cycle-svg{ max-width:220px; } }
.cycle-svg{ width:100%; height:auto; display:block; overflow:visible; }
.cycle-svg .node{ fill:var(--bg); stroke:currentColor; stroke-width:1.5; }
.cycle-svg .num{ fill:var(--ink); font-size:12px; font-weight:700; text-anchor:middle; }
.cycle-svg .c-title{ fill:var(--ink); font-size:16px; font-weight:700; text-anchor:middle; }
.cycle-svg .c-sub{ fill:var(--ink-dim); font-size:10px; font-weight:600; letter-spacing:1.6px; text-anchor:middle; }
.cycle-steps{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.cycle-steps li{ display:grid; grid-template-columns:28px 1fr; gap:12px; align-items:center; font-size:.95rem; line-height:1.35; }
.cycle-steps b{
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  font-size:12px; font-weight:700; border:1px solid var(--line-strong);
}

/* ---------- camadas da entrega ---------- */
.layers{ display:flex; flex-direction:column; gap:12px; }
.layer{
  display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center;
  padding:clamp(18px,2.4vw,26px) clamp(20px,2.6vw,30px);
  margin-left:calc(var(--i, 0) * clamp(0px,4vw,56px));
}
@media (max-width:640px){ .layer{ margin-left:0; } }
.layer h4{ font-size:1.05rem; font-weight:700; margin-bottom:4px; }
.layer p{ color:var(--ink-dim); font-size:.9rem; line-height:1.55; }

.questions{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(10px,1.4vw,16px); }
@media (max-width:980px){ .questions{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .questions{ grid-template-columns:1fr; } }
.question{ padding:clamp(18px,2.2vw,24px); border-radius:var(--radius-md); border:1px dashed var(--line-strong); }
.question b{ display:block; font-size:12px; color:var(--pink); letter-spacing:.1em; margin-bottom:12px; }
.question p{ font-size:1.02rem; font-weight:600; line-height:1.35; }

/* ---------- degraus de prova ---------- */
.proof{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.6vw,18px); align-items:end; margin-top:clamp(36px,5vh,52px); }
@media (max-width:820px){ .proof{ grid-template-columns:1fr; align-items:stretch; } }
.proof-step{
  padding:clamp(22px,2.6vw,30px); display:flex; flex-direction:column;
  min-height:calc(230px + var(--i, 0) * 60px);
}
@media (max-width:820px){ .proof-step{ min-height:0; } }
.proof-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:auto; padding-bottom:28px; }
.proof-bar{ display:grid; grid-template-columns:repeat(3,22px); gap:4px; }
.proof-bar span{ height:4px; border-radius:4px; background:var(--line-strong); }
.proof-bar span.on{ background:var(--sage); }
.proof-level{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--sage); font-weight:700; margin-bottom:8px; }
.proof-step h3{ font-size:1.25rem; font-weight:700; margin-bottom:10px; }
.proof-step p{ color:var(--ink-dim); font-size:.92rem; line-height:1.6; }

/* ---------- pares de decisão (CSO) ---------- */
.pairs{ list-style:none; }
.pair{
  display:grid; grid-template-columns:minmax(0,1fr) clamp(56px,8vw,110px) minmax(0,1fr);
  align-items:center; gap:14px; padding:clamp(14px,2vh,18px) 0; border-top:1px solid var(--line);
}
.pair:last-child{ border-bottom:1px solid var(--line); }
.pair > span:not(.pair-link){ font-size:clamp(1rem,1.5vw,1.2rem); font-weight:600; }
.pair > span:first-child{ text-align:right; }
.pair-link{ position:relative; height:1.5px; background:linear-gradient(90deg, var(--pink), var(--plum)); }
.pair-link::before, .pair-link::after{
  content:""; position:absolute; top:50%; width:7px; height:7px; border-radius:50%; transform:translateY(-50%);
}
.pair-link::before{ left:-3px; background:var(--pink); }
.pair-link::after{ right:-3px; background:var(--plum); }

/* ---------- mandato ---------- */
.mandate{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:rgba(245,243,242,.02);
}
.mandate > div{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; padding:clamp(22px,3vw,34px); }
.mandate > div:nth-child(even){ border-left:1px solid var(--line); }
.mandate > div:nth-child(n+3){ border-top:1px solid var(--line); }
.mandate h4{ font-size:1.08rem; font-weight:700; margin-bottom:6px; }
.mandate p{ color:var(--ink-dim); font-size:.9rem; line-height:1.55; }
@media (max-width:700px){
  .mandate{ grid-template-columns:1fr; }
  .mandate > div:nth-child(even){ border-left:0; }
  .mandate > div + div{ border-top:1px solid var(--line); }
}

/* ---------- cadência + registro (CSO) ---------- */
.cad-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(14px,1.8vw,20px); align-items:stretch; }
@media (max-width:1100px){ .cad-grid{ grid-template-columns:1fr; } }
.reg-card{ padding:clamp(22px,2.8vw,32px); }
.board{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
@media (max-width:640px){ .board{ grid-template-columns:1fr; } }
.board-col{ padding:clamp(16px,2vw,22px); border-radius:var(--radius-md); border:1px solid var(--line); background:rgba(245,243,242,.025); }
.board-col h4{ display:flex; align-items:center; gap:10px; font-size:.96rem; font-weight:700; margin-bottom:8px; }
.board-col p{ color:var(--ink-dim); font-size:.86rem; line-height:1.55; }
.status-legend{ display:flex; flex-wrap:wrap; gap:10px 22px; font-size:.86rem; }
.status-legend span{ display:inline-flex; align-items:center; gap:8px; }
.st-done{ color:var(--sage); }
.st-part{ color:var(--plum); }
.st-miss{ color:var(--pink); }
.st-open{ color:var(--ink-dim); }

/* ---------- ramificação (autonomia) ---------- */
.branch{ display:grid; grid-template-columns:minmax(0,.9fr) 90px minmax(0,1.1fr); align-items:stretch; }
.branch-root{ align-self:center; padding:clamp(24px,3vw,34px); }
.branch-root .badge-ico{ margin-bottom:20px; }
.branch-root h3{ font-size:clamp(1.2rem,1.9vw,1.5rem); font-weight:700; margin-bottom:10px; }
.branch-root p{ color:var(--ink-dim); font-size:.93rem; line-height:1.6; }
.branch-lines{ width:100%; height:100%; display:block; color:var(--line-strong); }
.branch-leaves{ display:flex; flex-direction:column; gap:12px; }
.branch-leaf{ flex:1; display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; padding:clamp(16px,2vw,22px) clamp(18px,2.4vw,26px); }
.branch-leaf h4{ font-size:1.02rem; font-weight:700; margin-bottom:4px; }
.branch-leaf p{ color:var(--ink-dim); font-size:.88rem; line-height:1.5; }
@media (max-width:820px){ .branch{ grid-template-columns:1fr; gap:12px; } .branch-lines{ display:none; } }

/* ---------- conexão entre as frentes (home) ---------- */
.connect{
  grid-column:1 / -1;
  display:grid; grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr); grid-template-rows:auto 56px auto;
  margin-top:clamp(40px,6vh,64px);
}
.connect-node{ padding:clamp(24px,3vw,34px); }
.connect-node h3, .connect-lead h3{ font-size:clamp(1.15rem,1.7vw,1.35rem); font-weight:700; margin-bottom:10px; }
.connect-node p, .connect-lead p{ color:var(--ink-dim); font-size:.93rem; line-height:1.6; }
.connect-node .node-caption, .connect-lead .node-caption{ font-size:.78rem; line-height:1.4; margin:2px 0 10px; }
.connect-arrow{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  color:var(--ink-dim); font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
}
.connect-stem{ grid-column:1 / -1; position:relative; }
.connect-stem::before{
  content:""; position:absolute; top:0; height:50%;
  left:calc(25% - 16px); right:calc(25% - 16px);
  border:1.5px solid var(--line-strong); border-top:0; border-radius:0 0 22px 22px;
}
.connect-stem::after{ content:""; position:absolute; left:50%; top:50%; bottom:0; width:1.5px; margin-left:-.75px; background:var(--line-strong); }
.connect-lead{
  grid-column:1 / -1; padding:clamp(24px,3vw,34px);
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(14px,3vw,40px); align-items:center;
}
@media (max-width:820px){
  .connect{ grid-template-columns:1fr; grid-template-rows:none; gap:10px; }
  .connect-arrow{ padding:6px 0; }
  .connect-arrow .ico{ transform:rotate(90deg); }
  .connect-stem{ display:none; }
  .connect-lead{ grid-template-columns:1fr; }
}

/* ---------- seletor de necessidade (home) ---------- */
.needs{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(14px,2vw,24px); margin-top:clamp(36px,5vh,52px); align-items:stretch; }
@media (max-width:980px){ .needs{ grid-template-columns:1fr; } }
.need-tabs{ display:flex; flex-direction:column; gap:10px; }
.need-tab{
  display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center;
  width:100%; text-align:left; padding:clamp(16px,2vw,22px) clamp(18px,2.2vw,24px);
  border-radius:var(--radius-md); border:1px solid var(--line); background:transparent;
  color:var(--ink-dim); font:inherit; cursor:pointer;
  transition:border-color .3s ease, background .3s ease, color .3s ease;
}
.need-tab:hover{ border-color:var(--line-strong); color:var(--ink); }
.need-tab[aria-selected="true"]{ border-color:var(--line-strong); background:rgba(245,243,242,.06); color:var(--ink); }
.need-tab small{ display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--ink-dim); margin-bottom:4px; }
.need-tab strong{ display:block; font-size:1.06rem; font-weight:700; }
.need-tab .ico-go{ opacity:0; transform:translateX(-6px); transition:opacity .3s ease, transform .3s ease; }
.need-tab[aria-selected="true"] .ico-go{ opacity:1; transform:none; }
.need-tab:focus-visible{ outline:2px solid var(--pink); outline-offset:2px; }
.need-panel{ padding:clamp(26px,3.2vw,40px); }
.need-panel h3{ font-size:clamp(1.3rem,2.2vw,1.8rem); font-weight:700; letter-spacing:-.015em; line-height:1.2; margin-bottom:22px; max-width:24ch; }
.facts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(18px,2.6vw,32px); }
@media (max-width:560px){ .facts{ grid-template-columns:1fr; } }
.fact{ padding:16px 0; border-top:1px solid var(--line); }
.fact.wide{ grid-column:1 / -1; }
.fact p{ font-size:.98rem; line-height:1.55; }

.scenarios{ list-style:none; }
.scenario{
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1.1fr); gap:18px; align-items:center;
  padding:16px 12px; margin:0 -12px; border-top:1px solid var(--line);
  color:var(--ink); text-decoration:none; transition:background .25s ease;
}
.scenarios li:last-child .scenario{ border-bottom:1px solid var(--line); }
.scenario > span{ color:var(--ink-dim); }
.scenario .ico{ color:var(--ink-dim); transition:transform .25s ease, color .25s ease; }
a.scenario:hover{ background:rgba(245,243,242,.04); }
a.scenario:hover .ico{ color:var(--ink); transform:translateX(4px); }
.scenario strong{ font-weight:600; }
@media (max-width:640px){ .scenario{ grid-template-columns:1fr; gap:6px; } .scenario .ico{ transform:rotate(90deg); } }

/* ---------- compreender, praticar, aprender (home) ---------- */
.loop3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:clamp(36px,5vh,52px); }
.loop3-step{ position:relative; display:flex; flex-direction:column; gap:14px; padding-right:clamp(12px,2vw,28px); }
.loop3-step::after{
  content:""; position:absolute; top:23px; left:64px; right:14px; height:1.5px;
  background:linear-gradient(90deg, var(--line-strong), transparent);
}
.loop3-step:nth-child(3)::after{ display:none; }
.loop3-step h3{ font-size:1.3rem; font-weight:700; }
.loop3-step p{ color:var(--ink-dim); font-size:.93rem; line-height:1.6; max-width:30ch; }
.loop3-return{ grid-column:1 / -1; margin-top:26px; }
@media (max-width:760px){ .loop3{ grid-template-columns:1fr; gap:26px; } .loop3-step::after{ display:none; } }

/* ---------- estratégia x criação (IMM Studio) ---------- */
.spectrum{ margin-top:clamp(36px,5vh,52px); }
.spectrum-bar{
  position:relative; height:4px; border-radius:4px;
  background:linear-gradient(90deg, var(--plum) 0%, var(--plum) 20%, var(--pink) 50%, var(--sage) 80%, var(--sage) 100%);
}
.spectrum-bar span{
  position:absolute; top:50%; width:12px; height:12px; border-radius:50%;
  background:var(--bg); border:2px solid var(--ink); transform:translate(-50%,-50%);
}
.spectrum-cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.6vw,18px); margin-top:26px; }
@media (max-width:900px){ .spectrum-cols{ grid-template-columns:1fr; } .spectrum-bar{ display:none; } }
.spec-card{ padding:clamp(22px,2.6vw,30px); }
.spec-card h3{ font-size:1.22rem; font-weight:700; line-height:1.3; margin-bottom:10px; }
.spec-card p{ color:var(--ink-dim); font-size:.92rem; line-height:1.6; }
.spec-card .chips{ margin-top:18px; }

.mini-journey{ list-style:none; position:relative; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); }
.mini-journey::before{ content:""; position:absolute; top:13px; left:calc(100% / 12); right:calc(100% / 12); height:2px; background:var(--line-strong); }
.mj-step{ position:relative; display:flex; flex-direction:column; align-items:center; gap:12px; padding:0 6px; text-align:center; color:var(--ink-dim); font-size:.82rem; line-height:1.3; }
.mini-journey > li{ display:flex; justify-content:center; }
a.mj-step{ flex:1; padding-bottom:6px; text-decoration:none; transition:color .25s ease; }
a.mj-step:hover{ color:var(--ink); }
a.mj-step:hover .mj-dot::before{ border-color:var(--ink); }
.mj-dot{ width:28px; height:28px; display:grid; place-items:center; }
.mj-dot::before{ content:""; width:14px; height:14px; border-radius:50%; border:1.5px solid var(--line-strong); background:var(--bg); }
.mj-step.gate .mj-dot::before{ width:12px; height:12px; border-radius:3px; transform:rotate(45deg); }
.mj-step.on{ color:var(--ink); font-weight:600; }
.mj-step.on .mj-dot::before{ background:var(--sage); border-color:var(--sage); box-shadow:0 0 22px rgba(159,192,185,.55); }
@media (max-width:700px){
  .mini-journey{ grid-template-columns:1fr; gap:8px; }
  .mini-journey::before{ top:14px; bottom:14px; left:13px; right:auto; width:2px; height:auto; }
  .mj-step{ flex-direction:row; text-align:left; padding:0; }
  .mini-journey > li{ justify-content:flex-start; }
}

/* ---------- cartões que viraram links (home) ---------- */
a.connect-node, a.connect-lead{ color:var(--ink); text-decoration:none; transition:border-color .3s ease, transform .3s ease; }
a.connect-node:hover, a.connect-lead:hover{ border-color:var(--line-strong); transform:translateY(-3px); }
a.connect-node:hover .more-link .ico, a.connect-lead:hover .more-link .ico{ transform:translateX(4px); }

/* ---------- e-mail visível abaixo dos botões de contato ---------- */
.cta-mail{ margin-top:14px; color:var(--ink-dim); font-size:.9rem; }
.cta-mail a{ color:var(--ink); text-underline-offset:3px; }

/* ---------- imagem ampliada do portfólio ---------- */
.case-gallery a{ cursor:zoom-in; }
.lightbox{
  position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,4vw,48px); background:rgba(12,11,11,.84);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  animation:menu-drop .25s ease; cursor:zoom-out;
}
.lightbox figure{ max-width:min(1200px,100%); display:flex; flex-direction:column; align-items:center; gap:12px; }
.lightbox img{ max-width:100%; max-height:calc(100vh - 140px); border-radius:var(--radius-md); box-shadow:0 30px 80px -20px rgba(0,0,0,.8); cursor:default; }
.lightbox figcaption{ color:var(--ink-dim); font-size:.86rem; text-align:center; }
.lightbox-close{
  position:absolute; top:clamp(14px,3vw,28px); right:clamp(14px,3vw,28px);
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line-strong); background:rgba(245,243,242,.08); color:var(--ink); cursor:pointer;
}
.lightbox-close:focus-visible{ outline:2px solid var(--pink); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  .menu-panel, .lightbox{ animation:none; }
  [role="tabpanel"]:not([hidden]){ animation:none; }
  .journey-track::after{ transition:none; }
}

/* =========================================================
   Neural — upgrade de design (14/09/2026): gramática editorial
   com uma frase por bloco e um framework visual: curva do
   negócio, palavras gigantes, timeline por fase (#metodo),
   losango da Leitura de Valor (#leitura) e setas de navegação
   dentro dos painéis (.panel-nav). Aprovado pelo Leo.
   ========================================================= */

/* ---------- cabeçalho editorial: fio vertical + uma frase ---------- */
.editorial-head{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(18px,4vw,72px); align-items:start;
}
.editorial-head > div:first-child{ padding-left:clamp(16px,1.8vw,24px); border-left:1px solid var(--line-strong); }
.editorial-head .section-label{ margin-bottom:12px; }
.editorial-head h2{ max-width:20ch; font-size:clamp(1.9rem,3.8vw,3.1rem); letter-spacing:-.025em; line-height:1.06; }
.editorial-head .lead{ padding-top:6px; }
@media (max-width:900px){ .editorial-head{ grid-template-columns:1fr; } }

/* ---------- curva do negócio ---------- */
.curve{ position:relative; margin-top:clamp(36px,6vh,64px); aspect-ratio:1000 / 440; }
.curve-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.curve-grid line{ stroke:var(--line); stroke-width:1; vector-effect:non-scaling-stroke; }
.curve-area{ fill:url(#curve-area); }
.curve-base, .curve-flat, .curve-rise{ fill:none; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.curve-base{ stroke:rgba(245,243,242,.55); stroke-width:2; }
.curve-flat{ stroke:rgba(245,243,242,.32); stroke-width:1.5; stroke-dasharray:5 7; }
.curve-rise{ stroke:url(#curve-rise); stroke-width:3; filter:drop-shadow(0 0 10px rgba(238,171,172,.45)); }
.curve-dot{ fill:var(--bg); stroke:rgba(245,243,242,.7); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.curve-pivot{ fill:var(--ink); }
.curve-pivot-halo{ fill:rgba(238,171,172,.16); }

/* desenho da linha quando a curva entra na tela */
.curve .curve-base, .curve .curve-rise, .curve .curve-flat{ stroke-dashoffset:0; }
.curve[data-reveal] .curve-base, .curve[data-reveal] .curve-rise{ stroke-dasharray:1400; stroke-dashoffset:1400; transition:stroke-dashoffset 1.8s cubic-bezier(.45,.05,.2,1); }
.curve[data-reveal] .curve-rise{ transition-delay:.9s; }
.curve[data-reveal].is-visible .curve-base, .curve[data-reveal].is-visible .curve-rise{ stroke-dashoffset:0; }
.curve[data-reveal] .curve-label{ opacity:0; transition:opacity .7s ease; transition-delay:calc(.5s + var(--d, 0) * .35s); }
.curve[data-reveal].is-visible .curve-label{ opacity:1; }

.curve-labels{ list-style:none; }
.curve-label{ position:absolute; left:var(--x); top:var(--y); max-width:26ch; }
.curve-label.to-left{ left:auto; right:calc(100% - var(--x)); text-align:right; }
.curve-num{ display:block; font-size:11px; letter-spacing:.16em; font-weight:700; color:var(--ink-dim); margin-bottom:4px; }
.curve-label strong{ display:block; font-size:clamp(.98rem,1.4vw,1.2rem); font-weight:700; line-height:1.25; }
.curve-label small{ display:block; margin-top:4px; font-size:.84rem; line-height:1.45; color:var(--ink-dim); }
.curve-label.is-old strong{ color:var(--ink-dim); font-weight:600; }
.curve-label.is-new strong{ font-size:clamp(1.15rem,1.9vw,1.6rem); letter-spacing:-.01em; }
.curve-label.is-new small{ color:var(--pink); font-weight:600; }

.friction{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin-top:clamp(18px,3vh,28px); }
.friction .mini-label{ margin:0 6px 0 0; }

@media (max-width:760px){
  .curve{ aspect-ratio:auto; }
  .curve-svg{ position:relative; display:block; height:auto; aspect-ratio:1000 / 440; }
  .curve-labels{ display:grid; gap:14px; margin-top:18px; padding-left:18px; border-left:1px solid var(--line-strong); }
  .curve-label, .curve-label.to-left{ position:static; max-width:none; text-align:left; }
}

/* ---------- palavras gigantes ---------- */
.bigwords{ margin-top:clamp(40px,6vh,64px); border-top:1px solid var(--line); }
.bigword{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(14px,3vw,48px);
  align-items:center; padding:clamp(10px,1.6vh,18px) 0; border-bottom:1px solid var(--line);
}
.bw-word{
  font-size:clamp(2.6rem,7.4vw,6.6rem); font-weight:800; letter-spacing:-.045em; line-height:1;
  color:transparent; -webkit-text-stroke:1px color-mix(in srgb, var(--c) 82%, transparent);
  transition:color .5s ease, -webkit-text-stroke-color .5s ease, text-shadow .5s ease;
}
.bigword:hover .bw-word, .bigword:focus-within .bw-word{ color:var(--c); -webkit-text-stroke-color:transparent; text-shadow:0 0 50px color-mix(in srgb, var(--c) 45%, transparent); }
.bigword p{ color:var(--ink-dim); font-size:clamp(.95rem,1.2vw,1.05rem); line-height:1.55; max-width:34ch; }
.bigword p b{ display:block; margin-bottom:4px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--c); }
@media (max-width:760px){ .bigword{ grid-template-columns:1fr; gap:6px; padding:16px 0; } }

/* ---------- texto completo, atrás de um toque ---------- */
.fulltext{ margin-top:clamp(22px,3vh,30px); }
.fulltext summary{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer; list-style:none;
  font-size:.86rem; font-weight:600; color:var(--ink);
}
.fulltext summary::-webkit-details-marker{ display:none; }
.fulltext summary::before{
  content:""; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg); transition:transform .25s ease;
}
.fulltext[open] summary::before{ transform:rotate(45deg); }
.fulltext .hero-sub{ max-width:64ch; }

/* ---------- método: timeline por fase (nasce, ganha forma, se sustenta) ---------- */
#metodo{ position:relative; }
.watermark{
  position:absolute; left:50%; top:clamp(70px,11vh,130px); z-index:-1; transform:translateX(-50%);
  font-size:clamp(7rem,25vw,23rem); font-weight:800; letter-spacing:-.065em; line-height:.8;
  white-space:nowrap; pointer-events:none; user-select:none;
  background:linear-gradient(180deg, rgba(245,243,242,.075) 0%, rgba(245,243,242,0) 80%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.phases{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:clamp(40px,6vh,64px); }
.phase{ --c:var(--plum); padding:0 clamp(16px,2.2vw,34px); }
.phase.sage{ --c:var(--sage); }
.phase.pink{ --c:var(--pink); }
.phase:first-child{ padding-left:0; }
.phase:last-child{ padding-right:0; }
.phase + .phase{ border-left:1px solid var(--line-strong); }
.phase:nth-child(2){ padding-top:clamp(0px,4.4vw,60px); }
.phase:nth-child(3){ padding-top:clamp(0px,8.8vw,120px); }

.phase-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:clamp(18px,3vh,28px); }
.phase-pill{
  display:inline-flex; align-items:baseline; gap:10px; padding:9px 22px 10px; border-radius:var(--radius-sm);
  background:linear-gradient(180deg, color-mix(in srgb, var(--c) 78%, #fff) 0%, var(--c) 55%);
  color:#171515; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 12px 34px -14px var(--c);
}
.phase.plum .phase-pill{ color:var(--ink); }
.phase-pill b{ font-size:clamp(1.25rem,1.9vw,1.6rem); font-weight:700; letter-spacing:-.02em; line-height:1; }
.phase-pill span{ font-size:.92rem; font-weight:600; }
.phase-count{ font-size:clamp(.9rem,1.2vw,1.05rem); color:var(--ink-dim); }

.stage{
  position:relative; display:block; width:100%; text-align:left;
  padding:clamp(14px,2vh,20px) 0 clamp(18px,2.6vh,26px); border:0; border-top:1px solid var(--line);
  background:none; color:var(--ink-dim); font:inherit; cursor:pointer;
}
.stage::before{ content:""; position:absolute; top:-1px; left:0; width:0; height:2px; background:var(--c); transition:width .5s cubic-bezier(.2,.8,.2,1); }
.stage-kind{ display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; }
.stage-kind .shape-gate, .stage-kind .shape-move{ color:var(--c); }
.stage-title{
  display:block; margin:8px 0 14px; color:var(--ink); opacity:.5;
  font-size:clamp(1.3rem,2.3vw,2rem); font-weight:700; letter-spacing:-.02em; line-height:1.1;
  transition:opacity .3s ease;
}
.stage .chips{ display:flex; }
.stage .chip{ background:rgba(245,243,242,.05); color:var(--ink-dim); transition:background .3s ease, color .3s ease; }
.stage .chip.key{ background:color-mix(in srgb, var(--c) 30%, transparent); color:var(--ink); }
.stage:hover .stage-title{ opacity:.8; }
.stage[aria-selected="true"]::before{ width:100%; }
.stage[aria-selected="true"] .stage-kind{ color:var(--ink); }
.stage[aria-selected="true"] .stage-title{ opacity:1; }
.stage[aria-selected="true"] .chip{ background:rgba(245,243,242,.09); color:var(--ink); }
.stage[aria-selected="true"] .chip.key{ background:var(--c); color:#171515; font-weight:600; box-shadow:0 8px 26px -10px var(--c); }
.phase.plum .stage[aria-selected="true"] .chip.key{ color:var(--ink); }
.stage:focus-visible{ outline:2px solid var(--pink); outline-offset:6px; border-radius:10px; }

#metodo .j-panel{ margin-top:clamp(30px,4.4vh,44px); }

@media (max-width:900px){
  .phases{ grid-template-columns:1fr; gap:30px; }
  .phase, .phase:first-child, .phase:last-child{ padding:0; }
  .phase + .phase{ border-left:0; }
  .phase:nth-child(2), .phase:nth-child(3){ padding-top:0; }
  .watermark{ top:60px; }
}

/* ---------- losango da Leitura de Valor: investiga, fecha na decisão-mãe, constrói direção ---------- */
.diamond-wrap{ display:grid; grid-template-columns:minmax(0,1fr) clamp(180px,17vw,230px); margin-top:clamp(56px,8vh,84px); }
.diamond{ position:relative; aspect-ratio:1000 / 360; }
.diamond-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.diamond-svg-v{ display:none; }
.dm-shape{ stroke:rgba(245,243,242,.16); stroke-width:1; vector-effect:non-scaling-stroke; }
.dm-axis{ stroke:var(--line-strong); stroke-width:1; stroke-dasharray:3 7; vector-effect:non-scaling-stroke; }
.dm-phase{
  position:absolute; top:-34px; display:flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--ink-dim);
}
.dm-phase::before{ content:""; width:18px; height:1px; background:currentColor; opacity:.6; }
.dm-phase.first{ left:0; }
.dm-phase.second{ left:60%; }

.dm-nodes{ position:absolute; inset:0; }
.dm-node{
  position:absolute; left:var(--p); top:50%; transform:translate(-50%,-22px);
  display:flex; flex-direction:column; align-items:center; padding:0;
  background:none; border:0; color:var(--ink-dim); font:inherit; cursor:pointer;
}
.dm-dot{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  border:1.5px solid rgba(245,243,242,.3); background:var(--bg); color:var(--ink);
  font-size:12px; font-weight:700; letter-spacing:.04em;
  transition:background .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease;
}
.dm-name{ margin-top:10px; max-width:14ch; font-size:.88rem; font-weight:600; line-height:1.25; text-align:center; transition:color .3s ease; }
.dm-name small{ display:block; margin-top:3px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--pink); }
.dm-node.is-waist{ transform:translate(-50%,-27px); }
.dm-node.is-waist .dm-dot{ width:54px; height:54px; border-color:rgba(238,171,172,.7); box-shadow:0 0 34px rgba(238,171,172,.25); }
.dm-node:hover{ color:var(--ink); }
.dm-node:hover .dm-dot{ border-color:var(--ink-dim); }
.dm-node.is-done .dm-dot{ border-color:var(--plum); }
.dm-node[aria-selected="true"]{ color:var(--ink); }
.dm-node[aria-selected="true"] .dm-dot{ background:var(--ink); border-color:var(--ink); color:var(--bg); box-shadow:0 0 0 6px rgba(245,243,242,.06), 0 0 44px rgba(238,171,172,.42); }
.dm-node:focus-visible{ outline:none; }
.dm-node:focus-visible .dm-name{ text-decoration:underline; text-underline-offset:4px; }

.dm-mouth{ display:flex; flex-direction:column; justify-content:center; padding-left:clamp(14px,1.8vw,24px); border-left:1px solid var(--line-strong); }
.dm-mouth .mini-label{ margin-bottom:10px; }
.dm-mouth ul{ list-style:none; }
.dm-mouth li{ display:flex; align-items:center; gap:10px; padding:12px 0; border-top:1px solid var(--line); font-size:.95rem; font-weight:600; line-height:1.3; }
.dm-mouth .ico{ width:18px; height:18px; color:var(--pink); }

.dm-panel{
  margin-top:clamp(40px,6vh,60px); padding:clamp(24px,3vw,38px);
  display:grid; grid-template-columns:auto minmax(0,1.2fr) minmax(0,1fr); gap:clamp(18px,3vw,44px); align-items:start;
}
.dm-num{ font-size:clamp(3rem,6vw,5rem); font-weight:300; letter-spacing:-.05em; line-height:.85; color:var(--ink-dim); }
.dm-tag{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--pink); margin-bottom:8px; }
.dm-panel h3{ font-size:clamp(1.3rem,2.2vw,1.8rem); font-weight:700; letter-spacing:-.015em; margin-bottom:10px; }
.dm-panel p{ color:var(--ink-dim); font-size:.98rem; line-height:1.6; }
.dm-exit{ padding-left:clamp(18px,2.4vw,32px); border-left:1px solid var(--line); }
.dm-exit .mini-label{ color:var(--pink); }
.dm-exit p{ color:var(--ink); font-size:1.04rem; font-weight:600; line-height:1.45; }

@media (max-width:760px){
  .diamond-wrap{ grid-template-columns:1fr; margin-top:clamp(28px,4vh,40px); }
  .diamond{ aspect-ratio:auto; height:600px; }
  .diamond-svg{ display:none; }
  .diamond-svg-v{ display:block; position:absolute; left:0; top:0; width:120px; height:100%; overflow:visible; }
  .dm-phase{ display:none; }
  .dm-node, .dm-node.is-waist{ left:60px; top:var(--p); flex-direction:row; gap:16px; transform:translate(-22px,-50%); }
  .dm-node.is-waist{ transform:translate(-27px,-50%); }
  .dm-name{ margin-top:0; max-width:none; text-align:left; font-size:.95rem; }
  .dm-mouth{ padding:18px 0 0; margin-top:10px; border-left:0; border-top:1px solid var(--line-strong); }
  .dm-panel{ grid-template-columns:1fr; gap:14px; }
  .dm-exit{ padding:16px 0 0; border-left:0; border-top:1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce){
  .curve[data-reveal] .curve-base, .curve[data-reveal] .curve-rise{ transition:none; stroke-dashoffset:0; }
  .curve[data-reveal] .curve-label{ transition:none; opacity:1; }
  .stage::before{ transition:none; }
}

/* ---------- avançar etapa/movimento direto pelo painel, sem voltar à timeline/losango ---------- */
#metodo .j-panel, #leitura .dm-panel{ padding-left:clamp(56px,7vw,80px); padding-right:clamp(56px,7vw,80px); }

.panel-nav{
  position:absolute; top:50%; z-index:3; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line-strong); background:rgba(245,243,242,.05); color:var(--ink-dim);
  cursor:pointer; transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.panel-nav:hover{ background:rgba(245,243,242,.1); color:var(--ink); border-color:var(--ink-dim); }
.panel-nav .ico{ width:18px; height:18px; }
.panel-nav.prev{ left:12px; }
.panel-nav.next{ right:12px; }
.panel-nav.prev .ico{ transform:scaleX(-1); }
.panel-nav:focus-visible{ outline:2px solid var(--pink); outline-offset:2px; }

/* a cor de hover acompanha a fase/movimento em que o painel está */
.j-panel.glass-glow.plum .panel-nav:hover, .dm-panel.glass-glow.plum .panel-nav:hover{ color:var(--plum); border-color:var(--plum); }
.j-panel.glass-glow.sage .panel-nav:hover{ color:var(--sage); border-color:var(--sage); }
.j-panel.glass-glow.pink .panel-nav:hover, .dm-panel.glass-glow.pink .panel-nav:hover{ color:var(--pink); border-color:var(--pink); }

@media (max-width:640px){
  /* nas laterais o círculo esbarraria no texto empilhado; fica ancorado nos dois cantos de baixo, dentro do card */
  #metodo .j-panel, #leitura .dm-panel{
    padding-left:clamp(24px,3.2vw,42px); padding-right:clamp(24px,3.2vw,42px);
    padding-bottom:calc(clamp(24px,3.2vw,42px) + 46px);
  }
  .panel-nav{ width:34px; height:34px; top:auto; bottom:clamp(24px,3.2vw,42px); transform:none; }
  .panel-nav.prev{ left:clamp(24px,3.2vw,42px); }
  .panel-nav.next{ right:clamp(24px,3.2vw,42px); }
  .panel-nav .ico{ width:15px; height:15px; }
}

@media (prefers-reduced-motion: reduce){
  .panel-nav{ transition:none; }
}

/* ---------- IMM Studio: parede de marcas (14/09/2026); em 19/10/2026 cada cartão abre a página da marca no portfólio animado ---------- */
.wall{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.6vw,22px); margin-top:clamp(28px,4vh,40px); }
.wall-card{
  --accent: var(--line-strong);
  position:relative; display:block; border-radius:var(--radius-md); overflow:hidden;
  aspect-ratio:8/5; background:var(--panel); cursor:pointer; color:inherit; text-decoration:none;
  border:0;
}
/* contorno neutro sempre; a cor da marca aparece só em dois cantos opostos, e só quando o mouse (ou o foco do teclado) está no cartão */
.wall-card::before{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit;
  box-shadow:inset 0 0 0 1px var(--line-strong);
  background:
    linear-gradient(var(--accent),var(--accent)) top left / 0 2px no-repeat,
    linear-gradient(var(--accent),var(--accent)) top left / 2px 0 no-repeat,
    linear-gradient(var(--accent),var(--accent)) bottom right / 0 2px no-repeat,
    linear-gradient(var(--accent),var(--accent)) bottom right / 2px 0 no-repeat;
  transition:background-size .55s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.wall-card:hover::before, a.wall-card:focus-visible::before{
  box-shadow:inset 0 0 0 1px rgba(245,243,242,.26);
  background:
    linear-gradient(var(--accent),var(--accent)) top left / 46px 2px no-repeat,
    linear-gradient(var(--accent),var(--accent)) top left / 2px 46px no-repeat,
    linear-gradient(var(--accent),var(--accent)) bottom right / 46px 2px no-repeat,
    linear-gradient(var(--accent),var(--accent)) bottom right / 2px 46px no-repeat;
}
.wall-card img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.wall-card:hover img{ transform:scale(1.04); }
.wall-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,9,9,.94) 0%, rgba(10,9,9,.55) 30%, transparent 60%);
}
.wall-caption{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:clamp(14px,2vw,20px); display:flex; flex-direction:column; }
.wall-name{ color:var(--ink); font-weight:700; font-size:clamp(1rem,1.4vw,1.15rem); letter-spacing:-.01em; }
.wall-tag{ color:var(--ink-dim); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; margin-top:2px; }
.wall-desc{
  color:var(--ink-dim); font-size:.8rem; line-height:1.45; margin-top:0; max-width:32ch;
  max-height:0; opacity:0; overflow:hidden; transition:max-height .35s ease, opacity .3s ease, margin-top .35s ease;
}
.wall-card:hover .wall-desc{ max-height:6em; opacity:1; margin-top:6px; }
a.wall-card:focus-visible{ outline:2px solid var(--pink); outline-offset:3px; }
a.wall-card:focus-visible .wall-desc{ max-height:6em; opacity:1; margin-top:6px; }
.wall-go{
  position:absolute; top:12px; right:12px; z-index:2; display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:999px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--ink);
  background:rgba(20,18,18,.55); border:1px solid var(--line-strong); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; transform:translateY(-4px); transition:opacity .3s ease, transform .3s ease;
}
.wall-go .ico{ width:13px; height:13px; transition:transform .25s ease; }
.wall-card:hover .wall-go, a.wall-card:focus-visible .wall-go{ opacity:1; transform:none; }
.wall-card:hover .wall-go .ico{ transform:translateX(3px); }
@media (hover:none){ .wall-go{ opacity:1; transform:none; } }
@media (max-width:980px){ .wall{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .wall{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){ .wall-card img{ transition:none; } .wall-desc{ transition:none; } .wall-go{ transition:none; } .wall-card::before{ transition:none; } }