/* ============================================================
   Visão de Mundo · Elliott Jaques · seção do painel consultorias (tenant denderson).
   Paleta PRÓPRIA preto/laranja/vermelho COM gradiente, autorizada pelo Chefe em
   22/07/2026 e escopada 100% a esta seção (exceção consciente ao anti-gradiente
   do DESIGN-UNIFICACAO §1 e à regra "cor só via token do shell"). O gradiente
   laranja→vermelho entra SÓ nos pontos-assinatura (title de ênfase, sec-rule,
   traços de rótulo, phase-badge, chevron aberto e o elemento-assinatura de cada
   infográfico). Fundos grandes de card, corpo de texto e bordas são preto sólido.
   Estrutura de seletores derivada da receita do T17 (tutorial-originkit), com
   toda referência de cor trocada para os tokens --vm-* e keyframes reprefixados
   para vm-* (nenhum vm-* existe em outra seção: garante zero colisão no DOM).
   Tipografia, radius e ease vêm do shell (var(--font-*), var(--radius), var(--ease)).
   ============================================================ */

/* standalone: página completa self-contained (elliott-jaques.denderson.ai).
   Derivado 1:1 do fragmento verificado do painel; escopo [data-sec] trocado por .vm,
   tokens do shell providos aqui no :root. Paleta e gradiente idênticos ao painel. */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ background: var(--vm-bg); color: var(--vm-ink-soft); font-family: var(--font-body); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img,svg{ display:block; }
::selection{ background: var(--vm-laranja); color: var(--vm-on-accent); }

:root{
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --radius: 18px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --vm-bg: oklch(0.11 0.008 40);
  --vm-surface: oklch(0.145 0.012 45);
  --vm-surface-2: oklch(0.18 0.016 50);
  --vm-line: oklch(0.32 0.035 45);
  --vm-line-soft: oklch(0.25 0.025 45);
  --vm-ink: oklch(0.975 0.006 75);
  --vm-ink-soft: oklch(0.82 0.02 60);
  --vm-ink-faint: oklch(0.62 0.025 55);
  --vm-laranja: oklch(0.72 0.19 45);      /* laranja vivo ~#ff7a1c */
  --vm-laranja-press: oklch(0.66 0.2 40);
  --vm-vermelho: oklch(0.55 0.21 27);     /* vermelho quente ~#d92714 */
  --vm-grad: linear-gradient(120deg, var(--vm-laranja), var(--vm-vermelho));
  --vm-on-accent: oklch(0.13 0.02 40);    /* texto sobre laranja/gradiente */
  --vm-serif: var(--font-display);
}

.vm{
  /* preto profundo levemente quente */
  --vm-bg: oklch(0.11 0.008 40);
  --vm-surface: oklch(0.145 0.012 45);
  --vm-surface-2: oklch(0.18 0.016 50);
  --vm-line: oklch(0.32 0.035 45);
  --vm-line-soft: oklch(0.25 0.025 45);
  --vm-ink: oklch(0.975 0.006 75);
  --vm-ink-soft: oklch(0.82 0.02 60);
  --vm-ink-faint: oklch(0.62 0.025 55);
  --vm-laranja: oklch(0.72 0.19 45);      /* laranja vivo ~#ff7a1c */
  --vm-laranja-press: oklch(0.66 0.2 40);
  --vm-vermelho: oklch(0.55 0.21 27);     /* vermelho quente ~#d92714 */
  --vm-grad: linear-gradient(120deg, var(--vm-laranja), var(--vm-vermelho));
  --vm-on-accent: oklch(0.13 0.02 40);    /* texto sobre laranja/gradiente */

  --vm-serif: var(--font-display);
  color: var(--vm-ink-soft);
  font-family: var(--font-body);
  display: block;
}
.vm *{ box-sizing: border-box; }
.vm a{ color: inherit; text-decoration: none; }
.vm h1,
.vm h2,
.vm h3,
.vm h4,
.vm p{ margin: 0; }

/* reveal: o IO do funil NÃO roda aqui, conteúdo sempre visível */
.vm .reveal{ opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.vm .reveal.in{ opacity: 1; transform: none; }
@media(prefers-reduced-motion:reduce){ .vm .reveal{ opacity:1; transform:none; transition:none; } }

/* layout */
.vm .container{ max-width: 1080px; margin-inline: auto; padding-inline: 0; }
.vm section{ padding-block: clamp(34px, 5vw, 60px); position: relative; }
.vm section.tight{ padding-block: clamp(26px, 4vw, 46px); }

/* régua de seção: a linha superior é gradiente (assinatura) */
.vm .sec-rule{ position: relative; border-top: 0; padding-top: 15px; margin-bottom: 30px; display: flex; align-items: baseline; justify-content: space-between; gap: 20px; font-family: var(--font-mono); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vm-ink-faint); }
.vm .sec-rule::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--vm-grad); border-radius: 2px; }
.vm .sec-rule .rom{ font-family: var(--vm-serif); font-style: italic; font-weight: 500; font-size: 0.95rem; color: var(--vm-laranja); letter-spacing: 0; text-transform: none; }
.vm .sec-rule .mid{ letter-spacing: 0.16em; }
@media(max-width:760px){ .vm .sec-rule .mid{ display: none; } }

/* HERO */
.vm .sv-head{ margin-bottom: 6px; }
.vm .eyebrow{ display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--vm-laranja); }
.vm .eyebrow::before{ content: ""; width: 20px; height: 2px; border-radius: 2px; background: var(--vm-grad); }
.vm .eyebrow .nm{ display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; background: var(--vm-grad); color: var(--vm-on-accent); font-weight: 800; font-size: 0.66rem; letter-spacing: 0; }
.vm .sv-head h1{ font-family: var(--font-display); font-weight: 800; line-height: 1.03; letter-spacing: -0.04em; font-size: clamp(2.1rem, 5vw, 3.4rem); color: var(--vm-ink); margin: 16px 0 14px; }
.vm .sv-head h1 em,
.vm .sv-head h1 .hl{ font-style: normal; background: var(--vm-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vm .sv-head .sub{ max-width: 66ch; color: var(--vm-ink-soft); font-size: 1.08rem; line-height: 1.62; }

.vm h1.display{ font-family: var(--font-display); font-weight: 800; line-height: 1.04; letter-spacing: -0.04em; font-size: clamp(1.9rem, 4vw, 3rem); color: var(--vm-ink); }
.vm h1.display em,
.vm h1.display .hl{ font-style: normal; background: var(--vm-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vm .intro-lead{ max-width: 66ch; color: var(--vm-ink-soft); font-size: 1.08rem; line-height: 1.62; }

/* âncora editorial (frase forte) */
.vm .anchor{ margin-top: 30px; border-left: 3px solid transparent; border-image: var(--vm-grad) 1; padding: 6px 0 6px 22px; }
.vm .anchor p{ font-family: var(--vm-serif); font-style: italic; font-weight: 600; font-size: clamp(1.25rem, 2.4vw, 1.7rem); line-height: 1.3; color: var(--vm-ink); letter-spacing: -0.01em; max-width: 30ch; }
.vm .anchor p .hl{ color: var(--vm-laranja); font-style: normal; }
.vm .anchor small{ display: block; margin-top: 14px; font-family: var(--font-body); font-style: normal; font-weight: 400; font-size: 0.98rem; line-height: 1.6; color: var(--vm-ink-faint); max-width: 66ch; }

/* basecard (fundação / fecho), superfície preta elevada */
.vm .basecard{ border: 1px solid var(--vm-line); border-radius: var(--radius); background: var(--vm-surface-2); color: var(--vm-ink-soft); padding: clamp(24px, 4vw, 46px); position: relative; overflow: hidden; }
.vm .basecard::before{ content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--vm-grad); pointer-events: none; }
.vm .basecard .blabel{ position: relative; font-family: var(--font-mono); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vm-laranja); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.vm .basecard .blabel::before{ content: ""; width: 20px; height: 2px; border-radius: 2px; background: var(--vm-grad); }
.vm .basecard h2{ position: relative; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 3.4vw, 2.5rem); letter-spacing: -0.03em; line-height: 1.06; margin-bottom: 16px; color: var(--vm-ink); }
.vm .basecard h2 em{ font-style: normal; background: var(--vm-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vm .basecard p.bp{ position: relative; color: var(--vm-ink-soft); font-size: 1rem; line-height: 1.62; max-width: 66ch; margin-bottom: 22px; }

/* fecho: os 5 pontos numerados */
.vm .points{ position: relative; display: grid; gap: 14px; margin-top: 6px; }
.vm .point{ display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: baseline; border: 1px solid var(--vm-line); border-radius: 14px; background: color-mix(in oklch, var(--vm-laranja) 4%, transparent); padding: 18px 22px; }
.vm .point .pn{ font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; line-height: 1; color: var(--vm-on-accent); background: var(--vm-grad); width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.vm .point p{ color: var(--vm-ink-soft); font-size: 0.97rem; line-height: 1.58; margin: 0; }
.vm .point p b{ color: var(--vm-ink); font-weight: 700; }
@media(max-width:560px){ .vm .point{ grid-template-columns: 1fr; gap: 10px; } }

/* lesson (blocos densos dentro do acordeão) */
.vm .lesson{ margin-top: 4px; }
.vm .lesson .lblock{ margin-top: 22px; }
.vm .lesson .lblock:first-child{ margin-top: 0; }
.vm .lesson .lh{ font-family: var(--font-mono); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vm-ink); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.vm .lesson .lh::before{ content: ""; width: 18px; height: 2px; background: var(--vm-grad); border-radius: 2px; flex: 0 0 auto; }
.vm .lesson p{ color: var(--vm-ink-soft); font-size: 0.97rem; line-height: 1.66; margin-bottom: 12px; max-width: 72ch; }
.vm .lesson p:last-child{ margin-bottom: 0; }
.vm .lesson p b{ color: var(--vm-ink); font-weight: 700; }
.vm .lesson p .term{ font-family: var(--font-mono); font-size: 0.9em; color: var(--vm-laranja); font-style: normal; }
.vm .lesson ul.dense{ list-style: none; padding: 0; margin: 6px 0 12px; display: grid; gap: 9px; }
.vm .lesson ul.dense li{ position: relative; padding-left: 18px; font-size: 0.95rem; line-height: 1.55; color: var(--vm-ink-soft); max-width: 72ch; overflow-wrap: anywhere; }
.vm .lesson ul.dense li::before{ content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--vm-laranja); }
.vm .lesson ul.dense li b{ color: var(--vm-ink); font-weight: 700; }

/* ===== ACCORDION (.acc) ===== */
.vm .acc{ margin: 0 0 16px; }
.vm .acc>summary{ list-style: none; cursor: pointer; display: block; position: relative; background: var(--vm-surface); border: 1px solid var(--vm-line); border-radius: 16px; padding: clamp(16px,2.2vw,24px) clamp(52px,7vw,62px) clamp(16px,2.2vw,24px) clamp(18px,2.4vw,28px); transition: transform 0.18s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease); -webkit-tap-highlight-color: transparent; }
.vm .acc>summary::-webkit-details-marker{ display: none; }
.vm .acc>summary::marker{ content: ""; }
.vm .acc>summary:hover{ border-color: var(--vm-laranja); background: var(--vm-surface-2); }
.vm .acc>summary:focus-visible{ outline: 2px solid var(--vm-laranja); outline-offset: 3px; }
.vm .acc[open]>summary{ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; }
.vm .acc[open]>summary:hover{ background: var(--vm-surface); }

.vm .acc .achead{ display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.vm .acc .achead .stag{ font-family: var(--font-mono); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vm-ink-faint); margin-bottom: 6px; }
.vm .acc .achead h3{ font-family: var(--font-display); font-weight: 800; font-size: clamp(1.2rem,2.2vw,1.6rem); letter-spacing: -0.02em; line-height: 1.12; color: var(--vm-ink); }

/* badge nº do bloco: fundo gradiente (assinatura) */
.vm .phase-badge{ display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--vm-grad); color: var(--vm-on-accent); font-family: var(--font-display); font-weight: 800; font-size: 0.85rem; line-height: 1; flex-shrink: 0; }

/* teaser (some quando aberto) */
.vm .acc .acteaser{ margin-top: 10px; color: var(--vm-ink-faint); font-size: 0.9rem; line-height: 1.55; max-width: 72ch; }
.vm .acc[open] .acteaser{ display: none; }

/* chevron: aberto ganha fundo gradiente (assinatura) */
.vm .acc>summary .acchev{ position: absolute; top: clamp(16px,2.4vw,24px); right: clamp(16px,2.2vw,22px); width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--vm-line); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--vm-laranja); background: var(--vm-surface-2); transition: transform 0.25s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease), color 0.18s var(--ease); }
.vm .acc>summary:hover .acchev{ border-color: var(--vm-laranja); }
.vm .acc[open]>summary .acchev{ transform: rotate(180deg); background: var(--vm-grad); border-color: transparent; color: var(--vm-on-accent); }
.vm .acc>summary .acchev svg{ width: 14px; height: 14px; display: block; }

/* corpo */
.vm .acc .acbody{ border: 1px solid var(--vm-line); border-top: 0; border-radius: 0 0 16px 16px; background: var(--vm-surface); padding: clamp(6px,1vw,12px) clamp(18px,2.6vw,30px) clamp(20px,2.6vw,30px); animation: vm-accslide 0.26s var(--ease); }
@keyframes vm-accslide{ from{ opacity: 0; transform: translateY(-6px); } to{ opacity: 1; transform: none; } }
.vm .acc .acbody>.infographic:first-child{ margin-top: 6px; }
@media(prefers-reduced-motion:reduce){
  .vm .acc .acbody{ animation: none; }
  .vm .acc>summary .acchev{ transition: none; }
}

/* prose (p.what / p.note) */
.vm .acbody p.what{ color: var(--vm-ink-soft); font-size: 0.96rem; line-height: 1.6; margin-top: 4px; }
.vm .acbody p.what b{ color: var(--vm-ink); font-weight: 700; }
.vm .acbody p.what .term{ font-family: var(--font-mono); font-size: 0.9em; color: var(--vm-laranja); }
.vm .acbody p.note{ margin-top: 14px; font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.5; color: var(--vm-ink-faint); border-left: 2px solid transparent; border-image: var(--vm-grad) 1; padding: 4px 0 4px 14px; background: color-mix(in oklch, var(--vm-laranja) 5%, transparent); overflow-wrap: anywhere; }

/* keep-rule (nota de método / fontes do fecho) */
.vm .keep-rule{ margin-top: 24px; border-top: 1px dashed var(--vm-line); padding-top: 18px; }
.vm .keep-rule .krh{ font-family: var(--font-mono); font-weight: 600; font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vm-ink-faint); margin-bottom: 12px; }
.vm .keep-rule .what{ color: var(--vm-ink-soft); }
.vm .keep-rule .note{ margin-top: 14px; }

/* ============================================================
   INFOGRÁFICO por bloco: ilustração gerada (WebP), embutida como <img class="ig-img">.
   O wrapper .infographic e o rótulo .infographic::before (data-fig) são mantidos.
   ============================================================ */
.vm .infographic{
  --ac: var(--vm-laranja);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0 22px;
  padding: clamp(24px, 4vw, 34px) clamp(18px, 3vw, 30px) clamp(18px, 3vw, 26px);
  border: 1px solid var(--vm-line);
  border-radius: 16px;
  background: var(--vm-surface-2);
  overflow: hidden;
}
.vm .infographic::before{
  content: attr(data-fig);
  position: absolute;
  top: 12px;
  left: 16px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vm-ink-faint);
}
.vm .infographic .ig-img{
  width: 100%;
  max-width: 720px;
  height: auto;
  display: block;
  margin-inline: auto;
  border-radius: var(--radius);
}
.vm .infographic .ig-img.sq{
  max-width: 460px;
}
@media(max-width:560px){
  .vm .infographic .ig-img{ max-width: 100%; }
}

/* mobile */
@media(max-width:680px){
  .vm .point{ padding: 16px 18px; }
}
@media(max-width:560px){
  .vm .sv-head h1{ font-size: clamp(1.9rem, 8vw, 2.4rem); }
}

/* rodapé do standalone */
.vm-foot{ border-top: 1px solid var(--vm-line); background: var(--vm-bg); padding: 34px 0 48px; }
.vm-foot .container{ max-width: 1080px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.vm-foot-link{ font-family: var(--font-display); font-weight: 800; font-size: 1rem; letter-spacing: -0.01em; background: var(--vm-grad); -webkit-background-clip: text; background-clip: text; color: transparent; text-decoration: none; }
.vm-foot-tag{ font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vm-ink-faint); }