/* repertorio/tecnicas.css */
/* Trechos CSS (SNIPPET) copiados das demos da skill sda-web-repertorio, sem alteração.
   Os ajustes para o site ficam no fim do arquivo, no bloco "AJUSTES DO SITE". */

/* ===== H04 · origem: tecnicas/H04-texto-que-acende.html ===== */
/* SNIPPET:CSS H04 ------------------------------------------------
   O texto É a imagem. Palavras passam de apagadas a acesas com a
   rolagem; palavras com data-key acendem em dourado. */
.h04{position:relative;height:280vh}
.h04__stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;padding:60px var(--gutter)}
.h04__text{max-width:1100px;font-weight:800;font-size:clamp(34px, 5.4vw, 80px);line-height:1.08;letter-spacing:-.04em;color:var(--navy)}
.h04__text .w{opacity:calc(.14 + .86 * var(--on, 0));transition:color .4s var(--ease-out)}
.h04__text .w.key{color:var(--gold)}
.h04__foot{position:absolute;left:var(--gutter);bottom:36px}
@media (prefers-reduced-motion: reduce){
  .h04{height:auto}.h04__stage{position:relative;height:auto;padding-block:100px}.h04__text .w{opacity:1}.h04__foot{position:static;margin-top:24px}
}
/* /SNIPPET:CSS H04 ----------------------------------------------- */

/* ===== H05 · origem: tecnicas/H05-painel-que-se-monta.html ===== */
/* SNIPPET:CSS H05 ------------------------------------------------
   Peças de um painel gerencial chegam de direções diferentes e se
   encaixam. Cada peça tem --t (0..1) próprio, calculado no JS. */
.h05{position:relative;height:300vh}
.h05__stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 360px), 1fr));gap:40px;align-items:center;max-width:var(--wrap);margin:0 auto;padding:70px var(--gutter)}
.h05__copy .h1{margin:14px 0 18px}
.h05__grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:14px}
.h05__tile{background:var(--navy2);border:1px solid var(--on-navy-line);border-radius:var(--radius);padding:18px 20px;
  opacity:var(--t, 0);transform:translate(calc((1 - var(--t, 0)) * var(--dx, 0px)), calc((1 - var(--t, 0)) * var(--dy, 40px))) rotate(calc((1 - var(--t, 0)) * var(--dr, 0deg)))}
.h05__tile--wide{grid-column:span 2}
.h05__label{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--on-navy-muted)}
.h05__num{margin-top:6px;font-size:clamp(26px, 2.6vw, 36px);font-weight:800;letter-spacing:-.03em;color:var(--on-navy)}
.h05__num small{font-size:.5em;color:var(--gold-l);margin-left:4px}
.h05__spark{margin-top:10px;width:100%;height:56px}
.h05__spark path{fill:none;stroke:var(--gold-l);stroke-width:2}
.h05__bar{margin-top:12px;height:8px;border-radius:4px;background:rgba(246,244,240,.12);overflow:hidden}
.h05__bar i{display:block;height:100%;width:calc(var(--fill, 0) * 100%);background:var(--gold-l);border-radius:4px}
.h05__note{margin-top:14px;font-size:12px;color:var(--on-navy-muted)}
@media (max-width: 760px), (orientation: portrait) and (max-width: 1024px){
  .h05{height:280vh}
  .h05__stage{grid-template-columns:minmax(0, 1fr);align-content:center;gap:14px;padding:66px var(--gutter) 16px}
  .h05__copy .h1{font-size:clamp(26px, 7.4vw, 40px);margin:8px 0 0}
  .h05__copy .lede{display:none}
  .h05__grid{gap:10px}
  .h05__tile{padding:12px 14px}
  .h05__num{font-size:22px;margin-top:2px}
  .h05__spark{height:30px;margin-top:6px}
  .h05__bar{margin-top:8px}
  .h05__note{margin-top:8px}
}
@media (prefers-reduced-motion: reduce){
  .h05{height:auto}.h05__stage{position:relative;height:auto;padding-block:80px}
}
/* /SNIPPET:CSS H05 ----------------------------------------------- */

/* ===== H07 · origem: tecnicas/H07-escada-de-maturidade.html ===== */
/* SNIPPET:CSS H07 ------------------------------------------------
   Degraus que sobem um a um com a rolagem. Cada degrau recebe --t
   (0..1) do JS: cresce de baixo para cima (scaleY) e acende o rótulo.
   O degrau atual fica em destaque e o texto ao lado acompanha. */
.h07{position:relative;height:300vh}
.h07__stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);gap:clamp(24px, 5vw, 72px);align-items:center;max-width:var(--wrap);margin:0 auto;padding:72px var(--gutter) 40px}
.h07__copy .h1{margin:14px 0 18px}
.h07__level{margin-top:28px;min-height:7.5em}
.h07__level strong{display:block;font-size:13px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-l)}
.h07__level p{margin-top:8px;font-size:18px;color:var(--on-navy-muted);max-width:36ch}
.h07__stairs{position:relative;height:min(62vh, 520px);display:flex;align-items:flex-end;gap:clamp(6px, 1.2vw, 14px)}
.h07__step{position:relative;flex:1 1 0;height:var(--h);display:flex;flex-direction:column;justify-content:flex-end}
.h07__block{position:absolute;inset:0;border-radius:12px 12px 0 0;background:var(--navy2);border:1px solid var(--on-navy-line);border-bottom:0;
  transform-origin:bottom;transform:scaleY(calc(.04 + .96 * var(--t, 0)));transition:background-color .4s var(--ease-out), border-color .4s var(--ease-out)}
.h07__step.is-current .h07__block{background:rgba(212,168,67,.18);border-color:var(--gold-l)}
.h07__lbl{position:relative;padding:14px 12px;opacity:var(--t, 0);transform:translateY(calc((1 - var(--t, 0)) * 12px))}
.h07__lbl span{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--gold-l)}
.h07__lbl b{display:block;margin-top:4px;font-size:clamp(13px, 1.3vw, 16px);font-weight:700;color:var(--on-navy);line-height:1.25}
.h07__flag{position:absolute;left:50%;top:-34px;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--gold-l);box-shadow:0 0 0 8px rgba(212,168,67,.18);
  opacity:0;transform:scale(.4);transition:opacity .4s var(--ease-out), transform .4s var(--ease-out)}
.h07__step.is-current .h07__flag{opacity:1;transform:scale(1)}
/* Celular e tablet em pé: continua animado, texto em cima e escada embaixo */
@media (max-width: 760px), (orientation: portrait) and (max-width: 1024px){
  .h07{height:280vh}
  .h07__stage{grid-template-columns:minmax(0, 1fr);align-content:center;gap:16px;padding:68px var(--gutter) 20px}
  .h07__copy .h1{font-size:clamp(28px, 8vw, 42px);margin:8px 0 6px}
  .h07__copy .lede{display:none}
  .h07__level{margin-top:10px;min-height:5.6em}
  .h07__level p{font-size:15px}
  .h07__stairs{height:42svh}
  .h07__lbl{padding:8px 6px}
  .h07__lbl b{font-size:11px}
}
/* Estática: só com "reduzir movimento" */
@media (prefers-reduced-motion: reduce){
  .h07{height:auto}.h07__stage{position:relative;height:auto;padding-block:80px}
}
/* /SNIPPET:CSS H07 ----------------------------------------------- */

/* ===== H08 · origem: tecnicas/H08-processo-que-se-conecta.html ===== */
/* SNIPPET:CSS H08 ------------------------------------------------
   Etapas de um processo surgem em sequência e linhas SVG as ligam.
   As linhas são calculadas a partir da posição real das caixas,
   então o mesmo HTML serve para linha (desktop) e coluna (celular). */
.h08{position:relative;height:300vh}
.h08__stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(28px, 5vh, 56px);max-width:var(--wrap);margin:0 auto;padding:72px var(--gutter) 40px}
.h08__head .h2{margin-top:12px;max-width:20ch}
.h08__flow{position:relative}
.h08__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.h08__svg path{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:var(--o, 1)}
.h08__nodes{position:relative;display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));gap:clamp(24px, 4vw, 56px)}
.h08__node{position:relative;background:var(--white);border:1px solid var(--border2);border-radius:var(--radius);padding:18px 18px 20px;box-shadow:0 18px 40px -30px rgba(11,31,58,.35);
  opacity:var(--t, 0);transform:translateY(calc((1 - var(--t, 0)) * 18px)) scale(calc(.94 + .06 * var(--t, 0)))}
.h08__node span{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--gold);font-size:13px;font-weight:800;color:var(--navy)}
.h08__node b{display:block;margin-top:12px;font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--navy)}
.h08__node p{margin-top:4px;font-size:13px;color:var(--muted);line-height:1.45}
.h08__node.is-last{border-color:var(--gold);background:var(--gold-xs)}
/* Celular e tablet em pé: etapas em coluna, linhas verticais */
@media (max-width: 760px), (orientation: portrait) and (max-width: 1024px){
  .h08{height:280vh}
  .h08__stage{gap:18px;padding:66px var(--gutter) 16px}
  .h08__head .h2{font-size:clamp(26px, 7.4vw, 38px)}
  .h08__nodes{grid-template-columns:minmax(0, 1fr);gap:16px;max-width:420px}
  .h08__node{display:grid;grid-template-columns:34px minmax(0, 1fr);column-gap:14px;align-items:center;padding:12px 14px}
  .h08__node b{margin-top:0;font-size:15px}
  .h08__node p{grid-column:2;margin-top:0;font-size:12px}
}
@media (prefers-reduced-motion: reduce){
  .h08{height:auto}.h08__stage{position:relative;height:auto;padding-block:80px}
}
/* /SNIPPET:CSS H08 ----------------------------------------------- */

/* ===== H09 · origem: tecnicas/H09-conciliacao.html ===== */
/* SNIPPET:CSS H09 ------------------------------------------------
   Extrato bancário de um lado, lançamentos do sistema do outro.
   Com a rolagem, os pares se ligam (data-match igual) e ficam
   conferidos; o que sobra aparece como pendência no fim. */
.h09{position:relative;height:300vh}
.h09__stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0, 4fr) minmax(0, 8fr);gap:clamp(24px, 5vw, 72px);align-items:center;max-width:var(--wrap);margin:0 auto;padding:72px var(--gutter) 40px}
.h09__copy .h2{margin:12px 0 16px}
.h09__sum{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap}
.h09__sum span{padding:8px 14px;border-radius:100px;font-size:13px;font-weight:600;background:var(--white);border:1px solid var(--border2);color:var(--navy)}
.h09__sum b{font-weight:800}
.h09__board{position:relative;display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);column-gap:clamp(48px, 7vw, 96px)}
.h09__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.h09__svg path{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:var(--o, 1)}
.h09__col h3{font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-text);margin-bottom:12px}
.h09__col ul{display:grid;gap:8px}
.h09__row{display:grid;grid-template-columns:auto minmax(0, 1fr) auto;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--white);border:1px solid var(--border2);font-size:13px;
  transition:background-color .35s var(--ease-out), border-color .35s var(--ease-out)}
.h09__row time{font-weight:700;color:var(--navy)}
.h09__row em{font-style:normal;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h09__row strong{font-weight:800;color:var(--navy);white-space:nowrap}
.h09__row.ok{background:var(--gold-xs);border-color:rgba(184,146,42,.4)}
.h09__row.pend{border-style:dashed;border-color:var(--navy)}
.h09__row.pend em::after{content:" · pendente";font-weight:700;color:var(--navy)}
.h09__note{margin-top:14px;font-size:12px;color:var(--muted)}
@media (max-width: 760px), (orientation: portrait) and (max-width: 1024px){
  .h09{height:280vh}
  .h09__stage{grid-template-columns:minmax(0, 1fr);align-content:center;gap:16px;padding:66px var(--gutter) 16px}
  .h09__copy .h2{font-size:clamp(26px, 7.4vw, 38px);margin:8px 0 4px}
  .h09__copy .lede{display:none}
  .h09__sum{margin-top:8px}
  .h09__board{column-gap:28px}
  .h09__row{grid-template-columns:minmax(0, 1fr);gap:0;padding:7px 9px;font-size:12px}
  .h09__row em{display:none}
  .h09__row.pend time::after{content:" · pendente";font-weight:600}
}
@media (prefers-reduced-motion: reduce){
  .h09{height:auto}.h09__stage{position:relative;height:auto;padding-block:80px}
}
/* /SNIPPET:CSS H09 ----------------------------------------------- */

/* ===== G02 · origem: tecnicas/G02-linha-realizado-projetado.html ===== */
/* SNIPPET:CSS G02 ------------------------------------------------
   Linha do saldo de caixa: realizado (contínuo, com área) e
   projetado (tracejado). Uma máscara retangular revela o gráfico
   da esquerda para a direita conforme ele entra na tela. */
.g02{max-width:960px}
.g02__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:18px}
.g02__head .h3{margin-top:6px}
.g02__legend{display:flex;gap:16px;font-size:13px;color:var(--muted)}
.g02__legend span{display:inline-flex;align-items:center;gap:6px}
.g02__legend i{width:18px;height:0;border-top:2.5px solid var(--navy)}
.g02__legend i.proj{border-top:2.5px dashed var(--gold)}
.g02__svg{display:block;width:100%;overflow:visible}
.g02__svg .grid{stroke:var(--border2)}
.g02__svg .zero{stroke:var(--navy);stroke-opacity:.35}
.g02__svg .axis{font:500 11px var(--font);fill:var(--muted)}
.g02__svg .area{fill:var(--gold-xs)}
.g02__svg .real{fill:none;stroke:var(--navy);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.g02__svg .proj{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-dasharray:6 6;stroke-linecap:round}
.g02__svg .dot{fill:var(--white);stroke:var(--navy);stroke-width:2}
.g02__svg .dot.now{fill:var(--gold);stroke:var(--gold)}
.g02__svg .lbl{font:700 12px var(--font);fill:var(--navy)}
.g02__note{margin-top:12px;font-size:12px;color:var(--muted)}
/* /SNIPPET:CSS G02 ----------------------------------------------- */

/* ===== G04 · origem: tecnicas/G04-cascata-dre.html ===== */
/* SNIPPET:CSS G04 ------------------------------------------------
   Gráfico em cascata (waterfall) da DRE: barras flutuantes mostram
   como a receita vira resultado. Barras entram em sequência, cada
   uma "caindo" a partir da anterior, ligadas por linhas tracejadas. */
.g04{max-width:1000px}
.g04__head .h3{margin:6px 0 18px}
.g04__svg{display:block;width:100%;overflow:visible}
.g04__svg .grid{stroke:var(--border2)}
.g04__svg .axis{font:500 11px var(--font);fill:var(--muted)}
.g04__svg .lbl{font:600 11px var(--font);fill:var(--ink);text-anchor:middle}
.g04__svg .bar{transform-box:fill-box;opacity:var(--t, 0);transform:scaleY(calc(.2 + .8 * var(--t, 0)))}
.g04__svg .bar.total{fill:var(--navy);transform-origin:50% 100%}
.g04__svg .bar.menos{fill:var(--white);stroke:var(--navy);stroke-width:1.5;transform-origin:50% 0%}
.g04__svg .bar.resultado{fill:var(--gold);transform-origin:50% 100%}
.g04__svg .val{font:800 12px var(--font);fill:var(--navy);text-anchor:middle;opacity:var(--t, 0)}
.g04__svg .link{stroke:var(--navy);stroke-opacity:.35;stroke-dasharray:3 4;opacity:var(--t, 0)}
.g04__note{margin-top:12px;font-size:12px;color:var(--muted)}
/* /SNIPPET:CSS G04 ----------------------------------------------- */

/* ===== G05 · origem: tecnicas/G05-mapa-de-calor.html ===== */
/* SNIPPET:CSS G05 ------------------------------------------------
   Mapa de calor (categorias × meses). A intensidade da cor é o
   valor normalizado (--v, 0..1). As células acendem em diagonal ao
   entrar na tela; cada célula é focável e mostra o valor. */
.g05{max-width:1000px}
.g05__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:18px}
.g05__head .h3{margin-top:6px}
.g05__scale{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.g05__scale i{width:90px;height:10px;border-radius:5px;background:linear-gradient(90deg, var(--offwhite), var(--gold))}
.g05__wrap{overflow-x:auto;padding-bottom:6px}
.g05__grid{display:grid;grid-template-columns:minmax(110px, 1.4fr) repeat(var(--cols), minmax(30px, 1fr));gap:4px;min-width:520px}
.g05__grid .rh{font-size:13px;font-weight:600;color:var(--ink);display:flex;align-items:center}
.g05__grid .ch{font-size:11px;font-weight:600;color:var(--muted);text-align:center}
.g05__cell{position:relative;aspect-ratio:1.4;border-radius:6px;background:var(--offwhite);overflow:visible;outline-offset:2px}
.g05__cell::before{content:"";position:absolute;inset:0;border-radius:6px;background:var(--gold);opacity:calc(var(--v) * var(--t, 0))}
.g05__cell::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);white-space:nowrap;padding:6px 10px;border-radius:8px;
  background:var(--navy);color:var(--offwhite);font-size:12px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s var(--ease-out);z-index:2}
.g05__cell:hover::after,.g05__cell:focus-visible::after{opacity:1}
.g05__cell:focus-visible{outline:2px solid var(--navy)}
.g05__note{margin-top:12px;font-size:12px;color:var(--muted)}
@media (prefers-reduced-motion: reduce){.g05__cell{--t:1}}
/* /SNIPPET:CSS G05 ----------------------------------------------- */

/* ===== I06 · origem: tecnicas/I06-cenarios-lado-a-lado.html ===== */
/* SNIPPET:CSS I06 ------------------------------------------------ */
.i06__base{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr));gap:14px;margin-top:28px}
.i06__f{display:grid;gap:6px}
.i06__f label{font-size:13px;font-weight:600;color:var(--navy)}
.i06__f input{font:inherit;font-size:16px;font-weight:700;color:var(--navy);background:var(--white);border:1px solid var(--border2);border-radius:12px;padding:11px 14px;min-height:46px;width:100%}
.i06__f input:focus{outline:none;border-color:var(--gold)}
.i06__cards{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr));gap:14px;margin-top:18px}
.i06__card{display:grid;gap:12px}
.i06__card h3{font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-text)}
.i06__card.base{border-color:var(--gold)}
.i06__slider label{display:flex;justify-content:space-between;font-size:13px;font-weight:600;color:var(--navy)}
.i06__slider input{width:100%;accent-color:var(--navy);height:28px}
.i06__res{font-size:clamp(24px, 2.6vw, 32px);font-weight:800;letter-spacing:-.03em;color:var(--navy)}
.i06__res.neg{color:var(--muted)}
.i06__res small{display:block;font-size:12px;font-weight:600;letter-spacing:0;color:var(--muted)}
.i06__bar{position:relative;height:10px;border-radius:5px;background:var(--offwhite)}
.i06__bar::before{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--border2)}
.i06__bar i{position:absolute;top:0;bottom:0;border-radius:5px;background:var(--navy);transition:left .4s var(--ease-out), width .4s var(--ease-out)}
.i06__bar i.neg{background:repeating-linear-gradient(45deg, var(--navy) 0 4px, transparent 4px 8px);border:1px solid var(--navy)}
.i06__card.base .i06__bar i:not(.neg){background:var(--gold)}
.i06__note{margin-top:14px;font-size:13px;color:var(--muted)}
/* /SNIPPET:CSS I06 ----------------------------------------------- */

/* =====================================================================
   AJUSTES DO SITE (o que muda em relação às demos da skill)
   ===================================================================== */

/* H07 em fundo claro (Desenvolvimento Empresarial: a seção seguinte já é navy) */
.h07--light .h07__level strong { color: var(--gold-text); }
.h07--light .h07__level p { color: var(--muted); }
.h07--light .h07__block { background: var(--white); border-color: var(--border2); }
.h07--light .h07__step.is-current .h07__block { background: var(--gold-xs); border-color: var(--gold); }
.h07--light .h07__lbl span { color: var(--gold-text); }
.h07--light .h07__lbl b { color: var(--navy); }
.h07--light .h07__flag { background: var(--gold); box-shadow: 0 0 0 8px var(--gold-xs); }
.h07 .est-link { margin-top: 6px; }

/* H05 em fundo claro (Ferramentas: o topo da página já é navy); as peças continuam navy */
.h05--light .h05__note { color: var(--muted); }

/* H08 sobre navy com 4 etapas (Processos Operacionais: ocupa o lugar da seção "Como funciona") */
.h08.is-navy .h08__svg path { stroke: var(--gold-l); }
.h08--4 .h08__nodes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px), (orientation: portrait) and (max-width: 1024px) {
  .h08--4 .h08__nodes { grid-template-columns: minmax(0, 1fr); }
}

/* H09 em off-white (BPO Financeiro) */
.h09.is-offwhite .h09__sum span { background: var(--white); }

/* H04 com frase de duas orações (Sobre): corpo um pouco menor para caber inteiro na tela */
.h04--sobre .h04__text { max-width: 980px; font-size: clamp(30px, 4.6vw, 66px); }

/* Gráficos G dentro de .est-split: ocupam a coluna inteira */
.est-split .g02, .est-split .g04, .est-split .g05 { max-width: none; }

/* H08 sobre navy: a última etapa fica branca com contorno dourado
   (o --gold-xs translúcido da demo some sobre navy e o texto navy não aparece) */
.h08.is-navy .h08__node.is-last { background: var(--white); border-color: var(--gold-l); box-shadow: 0 0 0 3px rgba(212,168,67,.35), 0 18px 40px -30px rgba(0,0,0,.5); }