/* home-w3-diagramas (06/10/2026): diagramas de #fundamentos, #metodo e #entregas,
   no padrão do guia leadlovers2026/design/diagramas (caixa sólida, texto de alto
   contraste, fluxo em HTML/CSS, traço que se desenha). Sem JS: estado final. */

/* ---------- Acentos por elemento ---------- */
:root { --fx-on: #fff; --fx-gap: 40px; }
:root[data-theme="dark"] { --fx-on: #0e1821; }
.fx-azul { --fx-a: var(--acc-azul, #0176d3); --fx-ink: var(--acc-azul-ink, #005ea8); }
.fx-verde { --fx-a: var(--acc-verde, #12a150); --fx-ink: var(--acc-verde-ink, #0f6b3a); }
.fx-amarelo, .fx-example { --fx-a: var(--acc-amarelo, #ffc531); --fx-ink: var(--acc-amarelo-ink, #7a5300); }
.fx-coral { --fx-a: var(--acc-coral, #ff5a5f); --fx-ink: var(--acc-coral-ink, #b3262b); }
.fx-violeta { --fx-a: var(--acc-violeta, #7c5cff); --fx-ink: var(--acc-violeta-ink, #5536d6); }
:root[data-theme="dark"] .fx-azul { --fx-ink: #8acaff; }
:root[data-theme="dark"] .fx-verde { --fx-ink: #7ee2a8; }
:root[data-theme="dark"] :is(.fx-amarelo, .fx-example) { --fx-ink: #ffd76a; }
:root[data-theme="dark"] .fx-coral { --fx-ink: #ff9a9d; }
:root[data-theme="dark"] .fx-violeta { --fx-ink: #b9a8ff; }
/* Fundo suave derivado da superfície: claro no claro, escuro no escuro. */
:is(.fx-azul, .fx-verde, .fx-amarelo, .fx-coral, .fx-violeta, .fx-example) { --fx-bg: color-mix(in srgb, var(--fx-a) 11%, var(--surface, #fff)); --fx-edge: color-mix(in srgb, var(--fx-a) 45%, var(--line, #d5dfe6)); }
:root[data-theme="dark"] :is(.fx-azul, .fx-verde, .fx-amarelo, .fx-coral, .fx-violeta, .fx-example) { --fx-bg: color-mix(in srgb, var(--fx-a) 20%, var(--surface, #14222e)); }
.fx-ico { display: block; width: 24px; height: 24px; flex: none; }

/* ---------- #fundamentos: cartões de conceito ---------- */
.concept-grid.fx-concepts { gap: 24px; }
.concept-grid .fx-card { position: relative; isolation: isolate; overflow: hidden; padding: 24px 24px 26px; border: 1px solid var(--line); border-top: 5px solid var(--fx-a); border-radius: var(--radius-lg, 22px); background: var(--surface); box-shadow: 0 1px 2px rgb(16 32 48 / 6%); }
.concept-grid .fx-card::before { position: absolute; z-index: -1; content: ""; width: 220px; height: 220px; top: -110px; right: -90px; border-radius: 50%; background: radial-gradient(circle, var(--fx-bg) 0%, transparent 70%); pointer-events: none; }
.concept-grid .fx-card p { color: var(--ink-secondary); }
.fx-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.fx-ico-wrap, .fx-step-ico, .fx-example-ico { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--fx-edge); border-radius: 14px; background: var(--fx-bg); color: var(--fx-ink); }
.fx-num { padding: 3px 11px; border-radius: 999px; background: var(--fx-bg); color: var(--fx-ink); font-size: .875rem; font-weight: 750; letter-spacing: .06em; font-variant-numeric: tabular-nums; }

/* ---------- Diagrama de estrutura (raiz e ramos) ---------- */
.fx-tree { --n: 4; --g: 16px; --stub: 24px; margin: 40px 0 0; padding: 28px clamp(16px, 3vw, 32px) 22px; border: 1px solid var(--line); border-radius: var(--radius-lg, 22px); background: var(--surface); }
.fx-tree-3 { --n: 3; }
.fx-tree-root { position: relative; max-width: 30rem; margin: 0 auto; padding: 14px 22px; border-radius: 16px; background: var(--ink); color: var(--paper); text-align: center; }
.fx-tree-root .fx-tree-label { display: block; color: inherit; font-size: .875rem; font-weight: 600; letter-spacing: .02em; }
.fx-tree-root strong { display: block; color: inherit; font-size: 1.125rem; line-height: 1.4; }
.fx-tree-root::after { position: absolute; content: ""; left: calc(50% - 2px); top: 100%; width: 4px; height: var(--stub); border-radius: 2px; background: var(--line-strong); transform-origin: top; }
.fx-tree-kids { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--g); margin: calc(var(--stub) * 2) 0 0; padding: 0; list-style: none; }
.fx-tree-kids::before { position: absolute; content: ""; top: calc(var(--stub) * -1); height: 4px; margin-top: -2px; inset-inline: calc((100% - (var(--n) - 1) * var(--g)) / (2 * var(--n))); border-radius: 2px; background: var(--grad-brasil, linear-gradient(90deg, #12a150, #ffc531, #0176d3)); transform-origin: center; }
.fx-tree-kids > li { position: relative; min-width: 0; padding: 14px 14px 16px; border: 2px solid var(--fx-a); border-radius: 14px; background: var(--fx-bg); color: var(--ink); text-align: center; line-height: 1.45; }
.fx-tree-kids > li::before { position: absolute; content: ""; left: calc(50% - 2px); top: calc(var(--stub) * -1 - 2px); width: 4px; height: var(--stub); border-radius: 2px; background: var(--fx-a); transform-origin: top; }
.fx-tree-kids strong { display: block; color: var(--fx-ink); font-size: 1rem; }
.fx-tree-kids li > span:not(.fx-kid-ico) { display: block; margin-top: 2px; color: var(--ink); font-size: .9375rem; }
.fx-kid-ico { display: flex; justify-content: center; margin-bottom: 6px; color: var(--fx-ink); }
.fx-tree figcaption { margin-top: 20px; color: var(--ink-secondary); font-size: .9375rem; line-height: 1.6; text-align: center; }
.editorial-explanation .fx-tree { margin: 24px 0; }

/* Exemplo hipotético: moldura tracejada, convenção de ilustração do guia. */
.fx-example { display: flex; align-items: flex-start; gap: 18px; max-width: 850px; margin-top: 32px; padding: 20px 22px; border: 2px dashed var(--fx-edge); border-radius: 18px; background: var(--surface); }
.fx-example .section-intro { margin-top: 0; }

/* ---------- #metodo: fluxograma do diagnóstico ---------- */
.method-grid.fx-flow { gap: var(--fx-gap); }
.fx-flow .method-step { padding: 22px 20px 24px; border: 1px solid var(--line); border-top: 5px solid var(--fx-a); border-radius: 18px; background: var(--surface); box-shadow: 0 1px 2px rgb(16 32 48 / 6%); }
.fx-flow .method-step:hover { border-color: var(--line); border-top-color: var(--fx-a); }
.fx-flow .step-number { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 0 18px; border-radius: 50%; background: var(--fx-ink); color: var(--fx-on); font-size: .9375rem; font-weight: 750; letter-spacing: 0; }
.fx-flow .fx-step-ico { position: absolute; top: 22px; right: 20px; width: 44px; height: 44px; border-radius: 12px; }
.fx-flow .method-step h3 { padding-right: 4px; }
.fx-flow .method-step p { text-align: left; }
/* Conector pontilhado + ponta de seta no vão entre as caixas. */
.fx-flow .method-step:not(:last-child)::after { position: absolute; content: ""; top: 46px; left: 100%; width: calc(var(--fx-gap) - 8px); height: 4px; background: radial-gradient(circle, var(--fx-a) 1.8px, transparent 2.4px) 0 0 / 10px 4px repeat-x; transform-origin: left center; }
.fx-flow .method-step:not(:last-child)::before { position: absolute; content: ""; top: 42px; left: calc(100% + var(--fx-gap) - 10px); border-left: 9px solid var(--fx-a); border-block: 6px solid transparent; }
/* Retorno ao início: a rodada seguinte recomeça pelo mapeamento. */
.fx-flow-loop { position: relative; height: 30px; margin: 18px calc((100% - 3 * var(--fx-gap)) / 8) 34px; border: 2px dashed var(--line-strong); border-top: 0; border-radius: 0 0 16px 16px; text-align: center; }
.fx-flow-loop::before { position: absolute; content: ""; left: -8px; top: -10px; border-bottom: 10px solid var(--line-strong); border-inline: 7px solid transparent; }
.fx-flow-loop span { position: relative; top: 16px; display: inline-block; max-width: calc(100% - 32px); padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-secondary); font-size: .9375rem; line-height: 1.45; }
.fx-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.fx-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--fx-edge); border-radius: 999px; background: var(--fx-bg); color: var(--fx-ink); font-size: .9375rem; font-weight: 650; line-height: 1.4; }
.fx-chips li::before { content: ""; width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--fx-a); }

/* ---------- #entregas: linha do tempo com progresso ---------- */
.delivery-list.fx-timeline { --fx-p: 1; position: relative; border-top: 0; counter-reset: fxstep; }
.fx-timeline::before, .fx-timeline::after { position: absolute; content: ""; left: 19px; top: 26px; bottom: 40px; width: 4px; border-radius: 2px; }
.fx-timeline::before { background: var(--line); }
.fx-timeline::after { background: var(--grad-brasil, linear-gradient(180deg, #12a150, #ffc531, #0176d3)); transform: scaleY(var(--fx-p)); transform-origin: top; }
.delivery-list.fx-timeline > div { z-index: 1; margin: 0 0 14px 58px; padding: 18px 20px 18px; border: 1px solid var(--line); border-left: 4px solid var(--fx-a); border-radius: 16px; background: var(--surface); counter-increment: fxstep; }
.delivery-list.fx-timeline > div::before { content: counter(fxstep, decimal-leading-zero); content: counter(fxstep, decimal-leading-zero) / ""; display: grid; place-items: center; left: -58px; top: 16px; width: 42px; height: 42px; box-sizing: border-box; border: 3px solid var(--fx-ink); border-radius: 50%; background: var(--fx-ink); color: var(--fx-on); font-size: .875rem; font-weight: 750; transform: none; }
.delivery-list.fx-timeline > div:hover::before { transform: scale(1.08); }
.fx-timeline dt { color: var(--ink); }
.fx-timeline dd { color: var(--ink-secondary); }

/* ---------- Estados animados (só com JS e movimento permitido) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .concept-grid .fx-card, .fx-flow .method-step, .delivery-list.fx-timeline > div { transition: transform 260ms var(--ease-saida, ease), box-shadow 260ms ease, border-color 200ms ease; }
  .concept-grid .fx-card:hover, .delivery-list.fx-timeline > div:hover { transform: translateY(-4px); box-shadow: 0 18px 38px color-mix(in srgb, var(--fx-a) 24%, transparent); }
  .fx-card .fx-ico-wrap { transition: transform 320ms var(--ease-mola, ease); }
  .fx-card:hover .fx-ico-wrap { transform: rotate(-6deg) scale(1.08); }

  .fx-anim .fx-tree-root::after, .fx-anim .fx-tree-kids > li::before { transform: scaleY(0); transition: transform 380ms var(--ease-saida, ease); }
  .fx-anim .fx-tree-kids::before { transform: scaleX(0); transition: transform 520ms var(--ease-saida, ease) 300ms; }
  .fx-anim .fx-tree-kids > li::before { transition-delay: calc(700ms + var(--i, 0) * 110ms); }
  .fx-anim.is-live .fx-tree-root::after, .fx-anim.is-live .fx-tree-kids > li::before { transform: scaleY(1); }
  .fx-anim.is-live .fx-tree-kids::before { transform: scaleX(1); }

  .fx-anim .method-step:not(:last-child)::after { transform: scaleX(0); transition: transform 500ms var(--ease-saida, ease); }
  .fx-anim .method-step:not(:last-child)::before { opacity: 0; transition: opacity 200ms ease 380ms; }
  .fx-anim .method-step.is-done::after { transform: scaleX(1); animation: fx-dots-x 900ms linear 520ms 5; }
  .fx-anim .method-step.is-done::before { opacity: 1; }
  .fx-anim .method-step:not(.is-done):not(.is-active) .step-number { background: var(--surface-raised); color: var(--ink); box-shadow: inset 0 0 0 2px var(--line-strong); }
  .fx-anim .step-number { transition: background-color 300ms ease, color 300ms ease, box-shadow 300ms ease; }
  .fx-flow .method-step.is-active { transform: translateY(-4px); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-a) 40%, transparent), 0 18px 38px color-mix(in srgb, var(--fx-a) 20%, transparent); }
  .fx-flow .method-step.is-active .step-number { animation: fx-pulse 1.6s ease-out 3; }

  .fx-timeline.fx-anim::after { transition: transform 120ms linear; }
  .fx-timeline.fx-anim > div:not(.is-reached)::before { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
  .fx-timeline.fx-anim > div::before { transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, transform 300ms var(--ease-mola, ease); }
  .fx-timeline.fx-anim > div.is-reached::before { animation: fx-pop 420ms var(--ease-mola, ease); }
}
@keyframes fx-dots-x { to { background-position: 10px 0; } }
@keyframes fx-dots-y { to { background-position: 0 10px; } }
@keyframes fx-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fx-a) 55%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
@keyframes fx-pop { 50% { transform: scale(1.15); } }

/* ---------- Responsivo: fluxo vertical e ramos empilhados ---------- */
@media (max-width: 900px) {
  :root { --fx-gap: 36px; }
  .method-grid.fx-flow { grid-template-columns: 1fr; }
  .fx-flow .method-step:not(:last-child)::after { top: 100%; left: 40px; width: 4px; height: calc(var(--fx-gap) - 8px); background: radial-gradient(circle, var(--fx-a) 1.8px, transparent 2.4px) 0 0 / 4px 10px repeat-y; transform-origin: center top; }
  .fx-flow .method-step:not(:last-child)::before { top: calc(100% + var(--fx-gap) - 10px); left: 36px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 9px solid var(--fx-a); border-bottom: 0; }
  .fx-flow-loop { height: auto; margin: 20px 0 8px; border: 0; text-align: left; }
  .fx-flow-loop::before { display: none; }
  .fx-flow-loop span { top: 0; max-width: 100%; border-style: dashed; border-color: var(--line-strong); border-radius: 14px; }
  @media (prefers-reduced-motion: no-preference) {
    .fx-anim .method-step:not(:last-child)::after { transform: scaleY(0); }
    .fx-anim .method-step.is-done::after { transform: scaleY(1); animation-name: fx-dots-y; }
  }
}
@media (max-width: 720px) {
  .fx-tree { --stub: 20px; padding-inline: 16px; }
  .fx-tree-root { max-width: none; margin: 0; padding: 12px 16px; border-radius: 12px; text-align: left; }
  .fx-tree-root::after { left: 22px; }
  .fx-tree-kids { grid-template-columns: 1fr; gap: 12px; margin-top: var(--stub); padding-left: 44px; }
  .fx-tree-kids::before { inset: 0 auto 30px 22px; top: 0; width: 4px; height: auto; margin: 0; background: var(--grad-brasil, linear-gradient(180deg, #12a150, #ffc531, #0176d3)); transform-origin: top; }
  .fx-tree-kids > li { text-align: left; }
  .fx-tree-kids > li::before { left: -20px; top: calc(50% - 2px); width: 20px; height: 4px; transform-origin: left; }
  .fx-kid-ico { justify-content: flex-start; }
  .fx-tree figcaption { text-align: left; }
  .fx-example { flex-direction: column; gap: 12px; padding: 18px; }
  @media (prefers-reduced-motion: no-preference) {
    .fx-anim .fx-tree-kids::before { transform: scaleY(0); }
    .fx-anim.is-live .fx-tree-kids::before { transform: scaleY(1); }
    .fx-anim .fx-tree-kids > li::before { transform: scaleX(0); }
    .fx-anim.is-live .fx-tree-kids > li::before { transform: scaleX(1); }
  }
}
@media (max-width: 640px) {
  .delivery-list.fx-timeline > div { margin-left: 54px; padding: 16px; }
  .delivery-list.fx-timeline > div::before { left: -54px; }
  .concept-grid .fx-card { padding: 20px 18px 22px; }
}

@media print {
  .fx-flow .method-step::after, .fx-flow .method-step::before, .fx-flow-loop::before { display: none; }
  .fx-timeline::after { transform: none; }
}