/* 02-metodo-vendas · H02 · merge.
   Introdução e fundo: V1 (.method-section, efeito de leitura do título).
   Corpo: os cinco cards animados da rodada A ("Cinco instrumentos e o convite"), no acabamento
   da V1 (raio e vidro dos cards de resultado, janela no molde de .method-preview, filete interno).
   Sexto item: o convite, "cardzinho vazado" (contorno tracejado, sem fundo) com o botão laranja
   da base (pedido 18).
   Loops só em cena ([data-loop]); o estado base de cada mini-UI é legível parado. */

@property --h02-m0 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --h02-m1 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --h02-m2 { syntax: "<number>"; inherits: true; initial-value: 0; }

#h02.method-section {
  position: relative;
  z-index: 4;
  margin-top: 0;
  padding: 0 clamp(1.25rem, 5vw, 5rem) clamp(5rem, 8vw, 7rem);
  border-radius: 2.25rem 2.25rem 0 0;
  background: var(--dark-soft);
  box-shadow: 0 -1.5rem 4rem rgb(0 0 0 / 32%);
  color: var(--white);
}

#h02 .method-section__intro {
  width: min(68.5rem, 100%); /* mesma largura da grade: título e cards alinhados à esquerda */
  margin: 0 auto;
  padding: clamp(4.5rem, 6.5vw, 6rem) 0 0;
}

#h02 .method-section__intro-content {
  display: grid;
  align-content: start;
  text-align: left;
}

#h02 .method-section__eyebrow {
  margin: 0 0 1rem;
  color: var(--orange-editorial);
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  font-variation-settings: "wght" 400;
  font-weight: 400;
  line-height: 1.3;
}

/* Três linhas no desktop: a largura acompanha o corpo (em), então as quebras são as mesmas de
   1024 a 1440+; balance evita palavra sozinha na última linha nas larguras intermediárias.
   REV-03: escala reduzida para eyebrow + título + topo da 1ª fileira de cards caberem juntos em
   1366×768 e 1440×900. */
#h02 .method-section__title {
  max-width: min(17.5em, 100%);
  margin: 0;
  color: var(--white);
  font-size: clamp(2.35rem, 3.05vw, 2.95rem); /* REV-03: mais sutil; título + 1ª fileira na mesma tela */
  text-wrap: balance;
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1.04;
}

/* Ênfase serifada no início do título, como no "Assuma o controle" da V1. */
#h02 .method-section__title .is-emphasis {
  font-family: var(--font-serif);
  font-size: 1.045em;
  font-variation-settings: "wght" 300;
  font-weight: 300;
  letter-spacing: -0.048em;
}

/* Efeito de leitura: o JS troca o texto estático por letras que acendem com o scroll. */
#h02 .method-section__title-reading { color: #535353; }
#h02 .method-section__title-word { display: inline-block; white-space: nowrap; }
#h02 .method-section__title .reveal-character {
  color: rgb(
    calc(83 + 165 * var(--reveal, 0))
    calc(83 + 165 * var(--reveal, 0))
    calc(83 + 163 * var(--reveal, 0))
  );
}

/* ——— Corpo: grade de cards ——— */
#h02 {
  --h02-tinta: color-mix(in srgb, var(--white) 46%, transparent);
  --h02-tinta-fraca: color-mix(in srgb, var(--white) 17%, transparent);
  --h02-fio: var(--line-dark);
  --h02-fundo-col: color-mix(in srgb, var(--white) 3%, transparent);
  --h02-sombra: 0 14px 28px -16px rgb(0 0 0 / 0.8);
}

#h02 .h02-corpo {
  width: min(68.5rem, 100%);
  margin: 0 auto;
  padding-top: clamp(2.5rem, 4vw, 3.5rem);
}

#h02 .h02-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 1.45vw, 1.45rem);
}
@media (min-width: 640px) { #h02 .h02-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { #h02 .h02-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* card: geometria de .result-card da V1 levada para o escuro */
#h02 .h02-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(0.75rem, 1vw, 0.95rem) clamp(0.75rem, 1vw, 0.95rem) clamp(1.5rem, 2.15vw, 2rem);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: clamp(1.6rem, 2vw, 2.25rem);
  background: linear-gradient(160deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 2%)), var(--surface-dark);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 7%),
    0 1.6rem 4rem rgb(0 0 0 / 28%);
  transition:
    opacity 800ms var(--ease-out),
    transform 800ms var(--ease-out),
    border-color 240ms ease,
    box-shadow 240ms ease;
  transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0ms, 0ms;
}

/* brilho laranja no pé (result-card::after da V1) */
#h02 .h02-card::after {
  position: absolute;
  inset: auto -18% -46% 18%;
  height: 60%;
  background: radial-gradient(circle, rgb(255 108 17 / 9%) 0, transparent 62%);
  content: "";
  pointer-events: none;
}

#h02 .h02-card.is-in:hover {
  border-color: rgb(255 108 17 / 30%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 7%),
    0 2rem 5rem rgb(0 0 0 / 34%),
    0 0 2.25rem rgb(255 108 17 / 7%);
  transform: translate3d(0, -0.4rem, 0);
  transition-delay: 0ms;
  transition-duration: 240ms;
}

#h02 .h02-card__titulo {
  position: relative;
  z-index: 1;
  margin: clamp(1.5rem, 2vw, 1.85rem) clamp(0.75rem, 1.1vw, 1.1rem) 0;
  color: var(--white);
  font-size: clamp(1.35rem, 1.75vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1.1;
}
#h02 .h02-card__num { color: var(--orange-editorial); font-weight: 400; }

/* filete interno (result-card__copy da V1) */
#h02 .h02-card__texto {
  position: relative;
  z-index: 1;
  margin: 1.1rem clamp(0.75rem, 1.1vw, 1.1rem) 0;
  padding-top: 1.05rem;
  border-top: 1px solid rgb(255 255 255 / 10%);
  color: var(--muted-dark);
  font-size: clamp(0.95rem, 1.02vw, 1rem);
  font-weight: 350;
  letter-spacing: -0.01em;
  line-height: 1.55;
}

/* janela do objeto: molde de .method-preview da V1 (moldura de 0.5rem, anel fino) */
#h02 .h02-palco {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  height: clamp(10.5rem, 13vw, 11.75rem);
  padding: 1rem;
  overflow: hidden;
  border: 0.5rem solid var(--surface-dark);
  border-radius: clamp(1.1rem, 1.4vw, 1.45rem);
  background:
    radial-gradient(120% 80% at 88% 118%, rgb(255 108 17 / 12%), transparent 60%),
    #111111;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 16%), 0 1.2rem 2.4rem -1.2rem rgb(0 0 0 / 60%);
  isolation: isolate;
}
#h02 .h02-palco b {
  display: block;
  width: var(--w, 60%);
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--h02-tinta);
}
#h02 .h02-palco b.fraco { height: 4px; background: var(--h02-tinta-fraca); }

/* ——— 01 Estratégia: o plano ——— */
#h02 .h02-plano__folha {
  width: min(100%, 17.5rem);
  padding: 0.9rem 1rem 0.55rem;
  border: 1px solid var(--h02-fio);
  border-radius: 0.75rem;
  background: var(--surface-dark);
  box-shadow: var(--h02-sombra);
  animation: h02-plano 9s linear infinite;
}
#h02 .h02-plano__metas { display: grid; gap: 0.6rem; }
#h02 .h02-plano__meta { display: flex; align-items: center; gap: 0.55rem; }
#h02 .h02-plano__meta b:last-child { margin-left: auto; }
#h02 .h02-plano__meta i {
  flex: none;
  width: 9px; height: 9px;
  border: 1.5px solid var(--h02-tinta);
  border-radius: 50%;
}
#h02 .h02-plano__meta:nth-child(1) i { background: color-mix(in srgb, var(--white) calc(var(--h02-m0) * 100%), transparent); }
#h02 .h02-plano__meta:nth-child(2) i { background: color-mix(in srgb, var(--white) calc(var(--h02-m1) * 100%), transparent); }
#h02 .h02-plano__meta:nth-child(3) i { background: color-mix(in srgb, var(--white) calc(var(--h02-m2) * 100%), transparent); }
#h02 .h02-plano__horizonte { position: relative; height: 2.1rem; margin-top: 0.85rem; border-top: 1px dashed var(--h02-fio); }
#h02 .h02-plano__linha { position: absolute; top: 0.9rem; left: 0; right: 0; height: 1px; background: var(--h02-tinta-fraca); }
#h02 .h02-plano__marco {
  position: absolute; top: 0.9rem; left: var(--x);
  width: 9px; height: 9px;
  border: 1.5px solid var(--h02-tinta);
  background: var(--surface-dark);
  transform: translate(-50%, -50%) rotate(45deg);
}
#h02 .h02-plano__marco:nth-of-type(3) { background: color-mix(in srgb, var(--white) calc(var(--h02-m0) * 100%), var(--surface-dark)); }
#h02 .h02-plano__marco:nth-of-type(4) { background: color-mix(in srgb, var(--white) calc(var(--h02-m1) * 100%), var(--surface-dark)); }
#h02 .h02-plano__marco:nth-of-type(5) { background: color-mix(in srgb, var(--white) calc(var(--h02-m2) * 100%), var(--surface-dark)); }
#h02 .h02-plano__prazo {
  position: absolute; top: 1.45rem; left: var(--x);
  width: 1.5rem; height: 4px;
  border-radius: var(--radius-pill);
  background: var(--h02-tinta-fraca);
  transform: translateX(-50%);
}
#h02 .h02-plano__agora {
  position: absolute; top: 0.3rem; left: 0;
  width: 1px; height: 1.2rem;
  background: var(--white);
  opacity: 0;
  animation: h02-agora 9s linear infinite;
}
#h02 .h02-plano__agora::after {
  content: ""; position: absolute; top: -3px; left: -2.5px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--white);
}
@keyframes h02-agora {
  0% { left: 0; opacity: 0; }
  5% { opacity: 1; }
  88% { left: 100%; opacity: 1; }
  94%, 100% { left: 100%; opacity: 0; }
}
@keyframes h02-plano {
  0%, 18% { --h02-m0: 0; }
  21%, 93% { --h02-m0: 1; }
  0%, 46% { --h02-m1: 0; }
  49%, 93% { --h02-m1: 1; }
  0%, 74% { --h02-m2: 0; }
  77%, 93% { --h02-m2: 1; }
  98%, 100% { --h02-m0: 0; --h02-m1: 0; --h02-m2: 0; }
}

/* ——— 02 Processos: o quadro de etapas ——— */
#h02 .h02-fluxo__quadro {
  --cw: calc((100% - 1.5rem) / 4);
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  width: min(100%, 19rem);
  height: 100%;
}
#h02 .h02-fluxo__col {
  display: grid;
  align-content: start;
  gap: 0.35rem;
  padding: 0.45rem 0.4rem;
  border-radius: 0.55rem;
  background: var(--h02-fundo-col);
}
#h02 .h02-fluxo__cab { display: block; width: 58%; height: 4px; margin: 0.1rem 0 0.15rem 0.1rem; border-radius: var(--radius-pill); background: var(--h02-tinta-fraca); }
#h02 .h02-fluxo__cartao,
#h02 .h02-fluxo__movel {
  display: flex; align-items: center; gap: 0.3rem;
  height: 1.7rem; padding: 0 0.35rem;
  border: 1px solid var(--h02-fio);
  border-radius: 0.4rem;
  background: var(--surface-dark);
}
#h02 .h02-fluxo__cartao i,
#h02 .h02-fluxo__movel i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--h02-tinta-fraca); }
#h02 .h02-fluxo__cartao b,
#h02 .h02-fluxo__movel b { flex: 1; height: 4px; background: var(--h02-tinta-fraca); }
#h02 .h02-fluxo__vaga { display: block; height: 1.7rem; border: 1px dashed var(--h02-fio); border-radius: 0.4rem; }
/* o cartão em destaque (laranja #2) passa da 2ª para a 3ª etapa */
#h02 .h02-fluxo__movel {
  position: absolute;
  top: calc(0.45rem + 4px + 0.25rem + 0.35rem + 1.7rem + 0.35rem);
  left: calc(var(--cw) + 0.5rem + 0.4rem);
  width: calc(var(--cw) - 0.8rem);
  border-color: color-mix(in srgb, var(--orange) 70%, transparent);
  box-shadow: var(--h02-sombra);
  animation: h02-avanca 6.5s var(--ease-out) infinite;
}
#h02 .h02-fluxo__movel i { background: var(--orange); }
#h02 .h02-fluxo__movel b { background: var(--h02-tinta); }
@keyframes h02-avanca {
  0% { left: calc(var(--cw) + 0.5rem + 0.4rem); opacity: 0; transform: none; }
  8%, 30% { left: calc(var(--cw) + 0.5rem + 0.4rem); opacity: 1; transform: none; }
  40% { transform: translateY(-4px) rotate(-2deg); }
  54%, 84% { left: calc(2 * var(--cw) + 1rem + 0.4rem); opacity: 1; transform: none; }
  94%, 100% { left: calc(2 * var(--cw) + 1rem + 0.4rem); opacity: 0; transform: none; }
}

/* ——— 03 Tecnologia: as integrações (REV-05) ———
   Três ferramentas de entrada e três de saída ligadas a um hub de automação. Os pulsos entram um a
   um, o hub (o acento laranja) dispara, e os pulsos seguem para as saídas, que acendem ao receber.
   Parado: fios, nós e um pulso no meio de cada fio, legível como "ferramentas conectadas". */
#h02 .h02-integra__mapa { display: block; width: min(100%, 19rem); height: 100%; overflow: visible; }
#h02 .h02-integra__fios path { fill: none; stroke: var(--h02-fio); stroke-width: 1.2; stroke-dasharray: 3 3; }
#h02 .h02-integra__pulso {
  fill: none;
  stroke: var(--white);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 0.07 1.2;
  filter: drop-shadow(0 0 3px rgb(255 255 255 / 45%));
  stroke-dashoffset: -0.45;
  animation: h02-pulso-in 7s linear infinite;
  animation-delay: calc(var(--d) * 0.35s - 2.4s);
}
#h02 .h02-integra__pulso--out { animation-name: h02-pulso-out; }
#h02 .h02-integra__pulso--foco { stroke: var(--orange); filter: drop-shadow(0 0 3px rgb(255 108 17 / 70%)); }
#h02 .h02-integra__no rect { fill: var(--surface-dark); stroke: var(--h02-fio); stroke-width: 1; }
#h02 .h02-integra__icone { fill: none; stroke: var(--h02-tinta); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
#h02 .h02-integra__no--in rect { animation: h02-no-in 7s ease infinite; animation-delay: calc(var(--d) * 0.35s - 2.4s); }
#h02 .h02-integra__no--out rect { animation: h02-no-out 7s ease infinite; animation-delay: calc(var(--d) * 0.35s - 2.4s); }
#h02 .h02-integra__base { fill: var(--surface-dark); stroke: color-mix(in srgb, var(--orange) 70%, transparent); stroke-width: 1.2; }
#h02 .h02-integra__aura { fill: rgb(255 108 17 / 10%); stroke: none; transform-box: fill-box; transform-origin: center; opacity: 0.6; animation: h02-aura 7s var(--ease-out) -2.4s infinite; }
#h02 .h02-integra__raio { fill: var(--orange); stroke: none; }
/* pulso: o traço curto (0,1 do fio) corre do começo (offset 0,1) ao fim (offset -1) */
@keyframes h02-pulso-in {
  0% { stroke-dashoffset: 0.07; opacity: 1; }
  30% { stroke-dashoffset: -1; opacity: 1; }
  31%, 100% { stroke-dashoffset: -1; opacity: 0; }
}
@keyframes h02-pulso-out {
  0%, 46% { stroke-dashoffset: 0.07; opacity: 0; }
  47% { stroke-dashoffset: 0.07; opacity: 1; }
  76% { stroke-dashoffset: -1; opacity: 1; }
  77%, 100% { stroke-dashoffset: -1; opacity: 0; }
}
@keyframes h02-no-in {
  0%, 2% { stroke: var(--h02-tinta); }
  14%, 100% { stroke: var(--h02-fio); }
}
@keyframes h02-no-out {
  0%, 72% { stroke: var(--h02-fio); }
  78%, 90% { stroke: var(--h02-tinta); }
  100% { stroke: var(--h02-fio); }
}
@keyframes h02-aura {
  0%, 32% { opacity: 0.25; transform: scale(0.86); }
  40% { opacity: 1; transform: scale(1.08); }
  52%, 100% { opacity: 0.25; transform: scale(0.86); }
}

/* ——— 04 Pessoas: a equipe e as trilhas ——— */
#h02 .h02-equipe__grupo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; width: min(100%, 18.5rem); }
#h02 .h02-equipe__pessoa { display: grid; justify-items: center; gap: 0.5rem; }
#h02 .h02-equipe__pessoa i {
  width: 2.9rem; height: 2.9rem; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, var(--h02-tinta-fraca) 0 26%, transparent 27%),
    radial-gradient(circle at 50% 108%, var(--h02-tinta-fraca) 0 44%, transparent 45%),
    var(--surface-dark);
  box-shadow: inset 0 0 0 1px var(--h02-fio);
}
#h02 .h02-equipe__pessoa b { width: 70%; height: 4px; background: var(--h02-tinta-fraca); }
#h02 .h02-equipe__trilha { display: flex; gap: 3px; width: 100%; margin-top: 0.2rem; }
#h02 .h02-equipe__trilha s {
  position: relative; flex: 1; height: 6px; overflow: hidden;
  border-radius: 2px; background: var(--h02-fio);
}
#h02 .h02-equipe__trilha s.ok { background: var(--h02-tinta); }
#h02 .h02-equipe__trilha s.vez::after {
  content: ""; position: absolute; inset: 0;
  background: var(--white);
  transform: scaleX(0.5); transform-origin: left center;
  animation: h02-trilha 5.4s var(--ease-out) infinite;
  animation-delay: calc(var(--i) * -1.3s);
}
@keyframes h02-trilha {
  0% { transform: scaleX(0); opacity: 1; }
  70%, 88% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* ——— 05 Gestão: o painel de acompanhamento (REV-04) ———
   Três indicadores (traços, sem números) com a seta de tendência; barras que crescem uma a uma, a
   última em laranja; a linha de tendência se desenha e o ponto final acende. Parado: tudo no fim do
   ciclo, barras cheias e linha desenhada. */
#h02 .h02-painel__tela {
  display: grid;
  gap: 0.55rem;
  width: min(100%, 19rem);
  padding: 0.6rem;
  border: 1px solid var(--h02-fio);
  border-radius: 0.75rem;
  background: var(--surface-dark);
  box-shadow: var(--h02-sombra);
}
#h02 .h02-painel__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
#h02 .h02-painel__kpi {
  position: relative;
  display: grid;
  gap: 0.35rem;
  padding: 0.45rem 0.5rem 0.5rem;
  border-radius: 0.45rem;
  background: var(--h02-fundo-col);
  box-shadow: inset 0 0 0 1px var(--h02-fio);
}
#h02 .h02-painel__kpi b:not(.fraco) { height: 7px; transform-origin: left center; animation: h02-kpi 8s var(--ease-out) infinite; animation-delay: calc(var(--i) * 0.25s - 3.6s); }
/* seta de tendência: triângulo em CSS no canto do indicador */
#h02 .h02-painel__kpi s {
  position: absolute; top: 0.45rem; right: 0.45rem;
  width: 0; height: 0;
  border: 3.5px solid transparent;
  border-bottom: 5px solid var(--h02-tinta);
  border-top-width: 0;
}
#h02 .h02-painel__kpi--foco { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--orange) 45%, transparent); }
#h02 .h02-painel__kpi--foco s { border-bottom-color: var(--orange); animation: h02-seta 8s var(--ease-out) -3.6s infinite; }
#h02 .h02-painel__graficos { display: grid; grid-template-columns: 1fr 1.25fr; gap: 0.5rem; height: 4.4rem; }
#h02 .h02-painel__barras {
  display: flex; align-items: flex-end; gap: 4px;
  padding: 0.4rem 0.45rem 0.35rem;
  border-radius: 0.45rem;
  background: var(--h02-fundo-col);
  box-shadow: inset 0 -1px 0 var(--h02-fio);
}
#h02 .h02-painel__barras span {
  flex: 1;
  height: var(--h);
  border-radius: 2px 2px 1px 1px;
  background: var(--h02-tinta-fraca);
  transform-origin: center bottom;
  animation: h02-barra 8s var(--ease-out) infinite;
  animation-delay: calc(var(--i) * 0.16s - 3.6s);
}
#h02 .h02-painel__barras .h02-painel__barra--foco { background: var(--orange); }
#h02 .h02-painel__tendencia { position: relative; border-radius: 0.45rem; background: var(--h02-fundo-col); overflow: hidden; }
#h02 .h02-painel__tendencia svg { position: absolute; inset: 0.35rem 0.4rem; width: calc(100% - 0.8rem); height: calc(100% - 0.7rem); overflow: visible; }
#h02 .h02-painel__grade { fill: none; stroke: var(--h02-fio); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
#h02 .h02-painel__area { fill: color-mix(in srgb, var(--white) 6%, transparent); stroke: none; animation: h02-area 8s var(--ease-out) -3.6s infinite; }
#h02 .h02-painel__linha {
  fill: none;
  stroke: var(--h02-tinta);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 0;
  vector-effect: non-scaling-stroke;
  animation: h02-linha 8s var(--ease-out) -3.6s infinite;
}
/* ponto final da linha (98% × 9/56 do svg, que tem 0,35rem/0,4rem de margem) */
#h02 .h02-painel__ponto {
  position: absolute;
  left: calc(0.4rem + (100% - 0.8rem) * 0.98);
  top: calc(0.35rem + (100% - 0.7rem) * 0.16);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 3px rgb(255 108 17 / 18%);
  transform: translate(-50%, -50%);
  animation: h02-ponto 8s var(--ease-out) -3.6s infinite;
}
@keyframes h02-barra {
  0%, 6% { transform: scaleY(0.12); }
  26%, 86% { transform: scaleY(1); }
  96%, 100% { transform: scaleY(0.12); }
}
@keyframes h02-kpi {
  0%, 6% { transform: scaleX(0.2); }
  24%, 86% { transform: scaleX(1); }
  96%, 100% { transform: scaleX(0.2); }
}
@keyframes h02-linha {
  0%, 12% { stroke-dashoffset: 1; opacity: 1; }
  48%, 86% { stroke-dashoffset: 0; opacity: 1; }
  96% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes h02-area {
  0%, 30% { opacity: 0; }
  52%, 86% { opacity: 1; }
  96%, 100% { opacity: 0; }
}
@keyframes h02-ponto {
  0%, 46% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  52% { opacity: 1; transform: translate(-50%, -50%) scale(1.5); }
  58%, 86% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  96%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
@keyframes h02-seta {
  0%, 22% { transform: translateY(1.5px); opacity: 0.5; }
  30%, 86% { transform: none; opacity: 1; }
  96%, 100% { transform: translateY(1.5px); opacity: 0.5; }
}


/* ——— ritmo e defasagem entre os cinco ———
   Cada objeto tem o seu período (9 · 6,5 · 7 · 5,4 · 8 s) e começa num ponto diferente do ciclo,
   então os cinco nunca batem juntos. */
#h02 .h02-plano__folha,
#h02 .h02-plano__agora { animation-delay: -0.6s; }
#h02 .h02-fluxo__movel { animation-delay: -1.2s; }
/* 03 (integrações, 7 s) e 05 (painel, 8 s) levam a defasagem nos próprios blocos: -2,4 s e -3,6 s. */

/* 01: a folha respira de leve enquanto o "agora" corre */
#h02 .h02-plano__folha { animation-name: h02-plano, h02-flutua; animation-duration: 9s, 9s; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite; }
@keyframes h02-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* 02: as colunas vizinhas acusam a chegada do cartão */
#h02 .h02-fluxo__col:nth-child(3) { animation: h02-coluna 6.5s var(--ease-out) -1.2s infinite; }
@keyframes h02-coluna {
  0%, 44% { background: var(--h02-fundo-col); }
  56%, 80% { background: color-mix(in srgb, var(--orange) 7%, transparent); }
  94%, 100% { background: var(--h02-fundo-col); }
}

/* 04: a vez passa de pessoa em pessoa (anel laranja) enquanto a trilha dela avança */
#h02 .h02-equipe__pessoa i { animation: h02-vez 5.4s var(--ease-out) infinite; animation-delay: calc(var(--i) * 1.35s - 5.4s); }
@keyframes h02-vez {
  0% { box-shadow: inset 0 0 0 1px var(--h02-fio), 0 0 0 0 rgb(255 108 17 / 0%); transform: none; }
  8%, 22% { box-shadow: inset 0 0 0 1.5px var(--orange), 0 0 0 5px rgb(255 108 17 / 14%); transform: translateY(-2px); }
  34%, 100% { box-shadow: inset 0 0 0 1px var(--h02-fio), 0 0 0 0 rgb(255 108 17 / 0%); transform: none; }
}
#h02 .h02-equipe__trilha s.vez::after { animation-delay: calc(var(--i) * 1.35s - 5.4s); }

/* ——— 06 O convite (pedido 18) ———
   "Cardzinho vazado": não repete o material dos cinco. Sem fundo, sem sombra, sem janela; só um
   contorno tracejado fino e, no centro, o "CLIQUE AQUi E" e o botão laranja (padrão da base). */
#h02 .h02-card--convite {
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 3vw, 2.75rem) clamp(1.25rem, 2vw, 2rem);
  border: 1.5px dashed rgb(255 255 255 / 20%);
  background: transparent;
  box-shadow: none;
}
#h02 .h02-card--convite::after { display: none; }
#h02 .h02-card--convite.is-in:hover {
  border-color: rgb(255 108 17 / 45%);
  box-shadow: none;
  transform: none;
}

#h02 .h02-convite {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  text-align: center;
}
/* "CLIQUE AQUi E": caixa alta por CSS, como o site antigo exibia; o texto-fonte fica literal */
#h02 .h02-convite__pre {
  margin: 0;
  color: var(--orange-editorial);
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-variation-settings: "wght" 400;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* botão: só a geometria, a tipografia e a seta de .hero-cta da V1; cor, fundo, borda, sombra e
   brilho vêm do "Botão Facto" da base */
#h02 .h02-cta {
  display: inline-flex;
  max-width: 100%;
  min-height: 3.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.035em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 180ms var(--ease-out);
}
#h02 .h02-cta svg {
  width: 1.25rem;
  flex: none;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}
#h02 .h02-cta:hover,
#h02 .h02-cta:focus-visible { transform: translateY(-2px); }

/* ——— Movimento reduzido: cada objeto fica no estado base, parado e legível ——— */
@media (prefers-reduced-motion: reduce) {
  #h02 .h02-palco,
  #h02 .h02-palco * { animation: none !important; }
  #h02 .h02-card.is-in:hover,
  #h02 .h02-cta:hover,
  #h02 .h02-cta:focus-visible { transform: none; }
}

/* ——— Responsivo ——— */
@media (max-width: 900px) {
  #h02.method-section { padding: 0 1.5rem 5rem; }
  #h02 .method-section__intro { padding: 5rem 0 0; }
}

@media (max-width: 640px) {
  #h02 .method-section__title {
    font-size: clamp(1.95rem, 8.2vw, 2.35rem);
    line-height: 1.04;
    text-wrap: balance;
  }
}

@media (max-width: 560px) {
  #h02.method-section {
    padding: 0 1.25rem 4rem;
    border-radius: 1.5rem 1.5rem 0 0;
  }
  #h02 .method-section__intro { padding: 4rem 0 0; }
  #h02 .method-section__eyebrow { font-size: 1rem; }
  #h02 .h02-card { border-radius: 1.6rem; }
  #h02 .h02-palco { height: 10.5rem; border-width: 0.4rem; border-radius: 1.1rem; }
  #h02 .h02-cta { padding-inline: 1.25rem; font-size: 0.98rem; }
}

@media (max-width: 400px) {
  #h02 .h02-cta { gap: 0.6rem; padding-inline: 1rem; font-size: 0.92rem; white-space: nowrap; }
  #h02 .h02-cta svg { width: 1.1rem; }
}

/* 320: o título passa de seis linhas, onde o balance não age; pretty tira "vendas" de sozinha. */
@media (max-width: 360px) {
  #h02 .method-section__title { font-size: 1.8rem; text-wrap: pretty; }
}