/* ================= ENGENHARIA DE NEGÓCIOS · v2 =================
   Linguagem da apresentação da Engenharia: noite fria, títulos em gradiente
   de gelo, imagens em wireframe ciano. Tokens em base.css (data-theme="eng"). */

/* ---------- hero ---------- */
.eh { position: relative; min-height: 100svh; display: flex; overflow: hidden; }
.eh .atmos img { object-position: 70% 50%; }
.eh .frame { top: calc(var(--nav-h) + 4px); }
.eh-inner {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
  align-items: center; gap: clamp(28px, 4vw, 72px);
  padding-top: calc(var(--nav-h) + clamp(28px, 6vh, 64px)); padding-bottom: clamp(40px, 7vh, 80px);
}
.eh-copy { display: grid; gap: clamp(14px, 2.6vh, 26px); }
.eh-rule { margin: 0; font-family: var(--f-serif); font-style: italic; font-size: clamp(20px, 1.9vw, 28px); color: var(--accent); }
.eh-rule span { color: var(--text); }
.eh-copy .lede { max-width: 640px; }

.eh-map { margin: 0; background: linear-gradient(160deg, rgba(16, 22, 27, .82), rgba(10, 13, 16, .72)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.eh-map figcaption { margin-bottom: 18px; }
.eh-problem { margin: 8px 0 0; font-family: var(--f-serif); font-size: clamp(19px, 1.6vw, 24px); line-height: 1.3; min-height: 2.6em; color: var(--text); }
.caret { display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -.12em; background: var(--accent); animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.eh-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.eh-chips li {
  font-size: 13px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text-4);
  transition: background .5s var(--ease), color .5s, border-color .5s, box-shadow .5s;
}
.eh-chips li.on { background: rgba(156, 192, 212, .16); border-color: var(--accent); color: var(--text); box-shadow: 0 0 18px -4px rgba(156, 192, 212, .5); }
.eh-count { margin: 18px 0 0; font-size: 14px; color: var(--text-3); }
.eh-count b { color: var(--accent); font-weight: 600; }

/* ---------- princípio ---------- */
.pr-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.pr-grid .eyebrow { display: block; margin-bottom: 22px; }
.pr-no { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 6px; }
.pr-no li { font-family: var(--f-serif); font-size: clamp(19px, 1.7vw, 25px); color: var(--text-4); }
.pr-no s { text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; }
.pr-lede { margin-top: 20px; color: var(--text-3); }
.pr-form { display: grid; gap: 14px; }
.pr-form textarea {
  width: 100%; resize: vertical; min-height: 130px;
  background: rgba(10, 13, 16, .6); color: var(--text); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; font: 300 17px/1.5 var(--f-sans);
}
.pr-form textarea:focus { outline: none; border-color: var(--accent); }
.pr-form .btn { justify-self: start; }

/* ---------- blueprint ---------- */
.bp-stage { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 3vw, 48px); align-items: stretch; }
.bp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; align-content: start; }
.bp-list li {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 13px 18px; border-radius: 12px; border: 1px solid transparent; cursor: pointer;
  color: var(--text-3); transition: background .4s, border-color .4s, color .4s;
}
.bp-list li:hover { color: var(--text); }
.bp-list .n { font-size: 13px; font-weight: 600; letter-spacing: .16em; color: var(--text-4); }
.bp-list .t { font-family: var(--f-serif); font-size: clamp(18px, 1.5vw, 22px); }
.bp-list em { font-style: normal; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-left: auto; }
.bp-list li.done .n { color: var(--accent-2); }
.bp-list li.on { background: var(--card); border-color: var(--line-2); color: var(--text); }
.bp-list li.on .n { color: var(--accent); }
.bp-list li.is-critica.on { border-color: var(--accent); box-shadow: 0 0 30px -12px rgba(156, 192, 212, .6); }

.bp-detail { padding: 0; overflow: hidden; display: grid; grid-template-rows: minmax(160px, 1fr) auto; min-height: 420px; }
.bp-img { position: relative; overflow: hidden; }
.bp-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: transform 1.2s var(--ease-out), filter .8s; }
.bp-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(16, 22, 27, 1) 0%, rgba(16, 22, 27, 0) 60%); }
.bp.critica .bp-img img { filter: hue-rotate(-160deg) saturate(1.2); transform: scale(1.06); }
.bp-detail-body { padding: clamp(22px, 2.4vw, 34px); }
.bp-detail-body .label b { color: var(--accent); font-weight: 600; }
.bp-step-name { margin: 10px 0 10px; background: var(--title-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.bp-step-text { margin: 0; color: var(--text-2); max-width: 52ch; min-height: 4.8em; }
.bp-progress { height: 2px; background: var(--line); border-radius: 2px; margin-top: 22px; overflow: hidden; }
.bp-progress i { display: block; height: 100%; width: 0; background: var(--accent); box-shadow: 0 0 10px var(--accent); transition: width .6s var(--ease); }

.session { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: clamp(64px, 10vh, 120px); }
.session-img { aspect-ratio: 16 / 10; }
.session-copy { display: grid; gap: 22px; }
.session-copy p { margin: 0; }
.facts { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.facts div { border-top: 1px solid var(--line-2); padding-top: 14px; }
.facts dt { font-family: var(--f-serif); font-size: clamp(40px, 4.4vw, 64px); line-height: 1; }
.facts dd { margin: 8px 0 0; font-size: 14px; color: var(--text-3); line-height: 1.45; }

/* ---------- seis blocos ---------- */
.blocks { overflow: hidden; }
.blocks-atmos { bottom: auto; height: 640px; }
.blocks-atmos img { object-position: 60% 30%; opacity: .7; }
.blocks-atmos::after { background: linear-gradient(90deg, var(--bg) 0%, rgba(10, 13, 16, .85) 40%, rgba(10, 13, 16, .4) 100%), linear-gradient(0deg, var(--bg) 0%, transparent 60%); }
.bl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 20px); }
.block { display: flex; flex-direction: column; background: linear-gradient(160deg, rgba(20, 28, 34, .78), rgba(12, 16, 20, .7)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.block em { color: var(--text-2); }
.block strong { color: var(--text); font-weight: 500; }
.block-art { margin-top: auto; padding-top: 18px; color: var(--accent-2); width: 100%; }
.canvas-art .pin { fill: var(--accent); opacity: .9; animation: pin 4s var(--ease) infinite; }
@keyframes pin { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(-100px, -30px); } 66% { transform: translate(100px, 40px); } }
.tam { margin-top: auto; padding-top: 18px; display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; color: var(--accent-2); }
.tam .som { fill: var(--accent); }
.tam ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; color: var(--text-3); }
.tam b { color: var(--text); font-weight: 500; }
.tam li span { font-size: 11px; letter-spacing: .16em; color: var(--accent); margin-left: 6px; }
.plan10 { list-style: none; margin: auto 0 0; padding: 18px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; position: relative; }
.plan10::before { content: ""; position: absolute; left: 6%; right: 6%; top: calc(18px + 1.1em); height: 1px; background: var(--line-2); }
.plan10 li { position: relative; display: grid; gap: 4px; }
.plan10 b { font-family: var(--f-serif); font-weight: 400; font-size: 38px; line-height: 1.1; background: var(--title-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.plan10 span { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }

/* ---------- o que não construir ---------- */
.nao-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.nao-grid .head { margin-bottom: 0; }
.nao-grid .body-copy { margin-top: 22px; }
.nao-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.nao-list li { font-family: var(--f-serif); font-size: clamp(20px, 1.8vw, 26px); color: var(--text-2); padding: 20px 24px; }
.nao-list span { background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 55% / 0% 1.5px; transition: background-size 1.1s var(--ease); }
.nao-list.in li:nth-child(1) span { background-size: 100% 1.5px; transition-delay: .3s; }
.nao-list.in li:nth-child(2) span { background-size: 100% 1.5px; transition-delay: .6s; }
.nao-list.in li:nth-child(3) span { background-size: 100% 1.5px; transition-delay: .9s; }

/* ---------- cta ---------- */
.cta-panel {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center;
  padding: clamp(28px, 4vw, 60px);
  background: radial-gradient(120% 140% at 0% 0%, rgba(78, 113, 133, .35), transparent 60%), var(--card);
  border-color: var(--line-2);
}
.cta-panel .eyebrow { display: block; margin-bottom: 16px; }
.cta-btn { margin-top: 26px; }
.cta-facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.cta-facts div { padding: 16px 0; border-top: 1px solid var(--line); }
.cta-facts div:nth-child(odd) { padding-right: 16px; }
.cta-facts dt { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-4); font-weight: 500; }
.cta-facts dd { margin: 6px 0 0; font-family: var(--f-serif); font-size: clamp(18px, 1.5vw, 22px); color: var(--text); }

/* ---------- trilhas ---------- */
.tr-goals { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(28px, 4vh, 44px); }
.tr-goal {
  background: transparent; border: 1px solid var(--line-2); border-radius: 999px; padding: 12px 20px; cursor: pointer;
  font-family: var(--f-serif); font-style: italic; font-size: clamp(16px, 1.3vw, 19px); color: var(--text-3);
  transition: background .35s, color .35s, border-color .35s;
}
.tr-goal:hover { color: var(--text); border-color: var(--accent); }
.tr-goal[aria-selected="true"] { background: var(--title-grad); color: #10161B; border-color: transparent; }
.tr-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
.tr-label { margin: 0 0 14px; }
.tr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tr-list li {
  display: grid; grid-template-columns: auto 1fr; column-gap: 18px; row-gap: 4px;
  padding: 18px 22px; border-radius: 14px; border: 1px solid var(--line); background: transparent; cursor: pointer;
  transition: background .4s, border-color .4s;
}
.tr-list li > span { grid-row: span 2; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-4); padding-top: .4em; white-space: nowrap; }
.tr-list strong { font-family: var(--f-serif); font-weight: 400; font-size: clamp(19px, 1.6vw, 24px); color: var(--text-2); }
.tr-list p { margin: 0; color: var(--text-3); font-size: 15px; }
.tr-list li.on { background: var(--card); border-color: var(--line-2); }
.tr-list li.on > span { color: var(--accent); }
.tr-list li.on strong { color: var(--text); }
.tr-caps .label { display: block; margin-bottom: 14px; }
.tr-caplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tr-caplist li {
  display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 8px;
  font-size: 14px; color: var(--text-4); transition: background .45s, color .45s;
}
.tr-caplist li span:last-child { font-size: 12px; letter-spacing: .1em; }
.tr-caplist li.on { background: rgba(156, 192, 212, .14); color: var(--text); }
.tr-caplist li.on span:last-child { color: var(--accent); }
.tr-note { margin-top: 18px; }

/* ---------- capacidades ---------- */
.cp-list { display: grid; gap: 10px; }
.cp-row { border-radius: 14px; border: 1px solid var(--line); background: var(--card); transition: border-color .35s; }
.cp-row[open], .cp-row:hover { border-color: var(--line-2); }
.cp-row summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.3fr) 28px; gap: 18px; align-items: center;
  padding: 18px 22px;
}
.cp-row summary::-webkit-details-marker { display: none; }
.cp-n { font-family: var(--f-serif); font-size: 30px; line-height: 1; background: var(--title-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cp-name { font-family: var(--f-serif); font-size: clamp(19px, 1.5vw, 23px); color: var(--text); }
.cp-desc { color: var(--text-3); font-size: 15px; }
.cp-plus { font-size: 22px; font-weight: 300; color: var(--accent); text-align: center; transition: transform .4s var(--ease); }
.cp-row[open] .cp-plus { transform: rotate(45deg); }
.cp-body { padding: 0 22px 20px calc(22px + 56px + 18px); }
.cp-body ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cp-body li { font-size: 14px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-2); }
.cp-bridge { margin: 14px 0 0; color: var(--text-3); font-size: 15px; }
.cp-bridge a { color: #E0AE73; }
.cp-end { margin-top: clamp(36px, 6vh, 64px); display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 28px; align-items: center; padding: clamp(26px, 3vw, 44px); }
.cp-end p { margin: 0; }

/* ---------- business system ---------- */
.bs-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.bs-copy { display: grid; gap: 20px; justify-items: start; }
.bs-copy h2 { margin: 0; }
.bs-items { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bs-items li { font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-3); }

.bs-tool { padding: 16px; }
.bt-bar { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-4); padding: 0 4px 12px; }
#bt-ver { color: var(--accent); }
.bt-board {
  position: relative; display: grid; gap: 4px; aspect-ratio: 16 / 10;
  grid-template-columns: repeat(10, 1fr); grid-template-rows: 1fr 1fr .9fr;
  grid-template-areas:
    "pa pa at at pv pv rl rl se se"
    "pa pa re re pv pv ca ca se se"
    "cu cu cu cu cu rc rc rc rc rc";
}
.z { border-radius: 8px; border: 1px solid var(--line); background: rgba(10, 13, 16, .55); padding: 8px; transition: border-color .3s, background .3s; }
.z span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-4); }
.z.hot { border-color: var(--accent); background: rgba(156, 192, 212, .1); }
.note {
  position: absolute; width: clamp(108px, 24%, 168px); padding: 9px 10px 8px; border-radius: 8px;
  background: #E9EFF2; color: #10161B; cursor: grab; touch-action: none; user-select: none;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .7); transition: box-shadow .3s, transform .3s;
}
.note p { margin: 0 0 6px; font-size: 12.5px; line-height: 1.3; font-weight: 400; outline: none; }
.note p[contenteditable="true"] { cursor: text; background: rgba(78, 113, 133, .12); }
.note .st { border: 0; border-radius: 999px; padding: 3px 9px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; font-weight: 600; }
.note[data-s="hipótese"] { background: #F3EDE3; }
.note[data-s="hipótese"] .st { background: transparent; box-shadow: inset 0 0 0 1px #8A7E6F; color: #4A4137; }
.note[data-s="validado"] { background: #DCE8EE; }
.note[data-s="validado"] .st { background: #4E7185; color: #fff; }
.note[data-s="revisar"] { background: #F2E1D2; }
.note[data-s="revisar"] .st { background: #C4854A; color: #1B1510; }
.note.dragging { cursor: grabbing; box-shadow: 0 22px 40px -12px rgba(0, 0, 0, .8); transform: scale(1.04) rotate(-1.5deg); z-index: 3; }
.bt-help { margin: 12px 4px 0; font-size: 13px; color: var(--text-4); }

/* ---------- final ---------- */
.fin { overflow: hidden; }
.fin-atmos img { object-position: 80% 50%; opacity: .55; }
.fin-title { margin: 18px 0 32px; max-width: 900px; }

/* ---------- responsivo ---------- */
@media (max-width: 1100px) {
  .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-row summary { grid-template-columns: 48px minmax(0, 1fr) 28px; }
  .cp-desc { grid-column: 2; grid-row: 2; }
  .cp-plus { grid-column: 3; grid-row: 1; }
  .cp-body { padding-left: calc(22px + 48px + 18px); }
}
@media (max-width: 900px) {
  .eh-inner, .pr-grid, .bp-stage, .session, .nao-grid, .cta-panel, .tr-body, .bs-grid, .cp-end { grid-template-columns: 1fr; }
  .eh-inner { align-content: center; }
  .bp-detail { min-height: 0; grid-template-rows: 200px auto; }
  .bp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-list em { margin-left: 0; width: 100%; }
}
@media (max-width: 600px) {
  .bl-grid { grid-template-columns: 1fr; }
  .bp-list { grid-template-columns: 1fr; }
  .bp-list li { padding: 10px 14px; }
  .facts { grid-template-columns: 1fr; }
  .facts div { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; }
  .facts dd { margin: 0; }
  .cta-facts { grid-template-columns: 1fr; }
  .cta-facts div:nth-child(odd) { padding-right: 0; }
  .cp-row summary { grid-template-columns: 40px minmax(0, 1fr) 24px; gap: 12px; padding: 16px; }
  .cp-n { font-size: 24px; }
  .cp-body { padding: 0 16px 18px 16px; }
  .tam { grid-template-columns: 90px 1fr; }
  .tr-list li { grid-template-columns: 1fr; padding: 16px; }
  .tr-list li > span { grid-row: auto; padding: 0; }
  .note { width: 44%; }
  .note p { font-size: 11px; }
  .bt-board { aspect-ratio: 4 / 5; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(6, 1fr);
    grid-template-areas: "pv pv" "se rl" "se ca" "pa at" "pa re" "cu rc"; }
}

/* acabamentos */
.fin-atmos::after { background: linear-gradient(90deg, var(--bg) 0%, rgba(10, 13, 16, .8) 40%, rgba(10, 13, 16, .2) 100%), linear-gradient(0deg, var(--bg) 0%, transparent 30%), linear-gradient(180deg, var(--bg) 0%, transparent 35%); }
.plan10::before { top: 12px; }
.plan10 li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); position: absolute; top: -9.5px; left: 2px; }
.bs-tool .note p { color: #10161B; }