/* =========================================================
   metodo.css — ExperConsult site novo (Task 6: pagina O Metodo)
   SOMENTE o que e especifico desta pagina (nao cabe em home.css/
   motion.css sem inchar): hero curto, a linha do metodo (SVG + no
   que percorre o path via anime.js svg.createMotionPath + onScroll),
   blocos alternados das 5 etapas e a faixa de prova compacta.
   Reusa tokens.css/base.css/home.css/motion.css pro resto (header,
   footer, cards .braco-*, reveals genericos, reduced-motion global).
   Mobile-first 360. A orientacao real da linha (vertical/horizontal)
   e decidida em runtime por js/metodo.js medindo a caixa renderizada;
   aqui so o layout/posicionamento por breakpoint (>=1100px = linha
   horizontal, conforme o brief).
   ========================================================= */

/* ---------- 1. HERO CURTO (fundo grafite, sem a cena WOW do index) ---------- */
.subhero .wrap{ padding-block: var(--s4) 0; }
.subhero h1{ margin-top: var(--s2); font-size: clamp(2rem, 6.5vw, 3.6rem); }
.subhero .sub{ margin-top: var(--s2); max-width: 62ch; color: var(--muted-inv); }

@media (min-width: 768px){
  .subhero .wrap{ padding-block: var(--s3) 0; }
}

/* =========================================================
   2. A LINHA DO METODO — path SVG (injetado por JS) + no que
   percorre + 5 estacoes (dots HTML, "acendem" via classe is-lit)
   ========================================================= */
.metodo-full{ --acc-txt: var(--teal-txt); }
.metodo-full-track{ position: relative; margin-top: var(--s5); }

/* linha visual em CSS (gradiente das 3 cores da marca, na ordem
   das etapas); o SVG injetado por JS fica por cima, com um path
   invisivel que so serve de trilho geometrico pro no */
.metodo-full-line{
  position: absolute;
  left: 7px; top: 4px; bottom: 4px; width: 2px;
  background: linear-gradient(180deg, var(--teal), var(--verde) 45%, var(--magenta));
  z-index: 0;
}

.metodo-full-steps{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.metodo-full-step{ position: relative; padding-left: calc(var(--s4) + 4px); }

.metodo-full-dot{
  position: absolute;
  left: 0; top: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 3px solid var(--off);
  box-shadow: 0 0 0 1px rgba(18,22,27,.10);
  transition: opacity .4s ease, box-shadow .4s ease;
}
.metodo-full-dot.is-teal{ background: var(--teal); }
.metodo-full-dot.is-verde{ background: var(--verde); }
.metodo-full-dot.is-magenta{ background: var(--magenta); }
.metodo-full-dot.is-current{ box-shadow: 0 0 0 5px rgba(18,22,27,.18); }

.metodo-full-num{
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--muted);
}
.metodo-full-step h3{
  font-family: var(--disp);
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.1;
  margin-top: 2px;
}
.metodo-full-step p{ margin-top: 4px; color: var(--muted); max-width: 30ch; }

/* estado "apagado" pendente o no passar — SO sob js-anim (JS assumiu
   o controle). Sem JS (ou se ele falhar antes de rodar), as estacoes
   ja nascem com a cor final: nenhuma informacao presa atras de opacity
   0 permanente (dupla garantia com o media query de reduced-motion
   no fim do arquivo, mesma disciplina do motion.css). */
.js-anim .metodo-full-dot{ opacity: .32; }
.js-anim .metodo-full-dot.is-lit{ opacity: 1; }

/* o SVG injetado por JS ocupa a MESMA caixa da linha CSS acima
   (overflow visible: o no/anel sao maiores que a faixa de 2px e nao
   podem ser cortados) */
.metodo-full-svg{
  position: absolute;
  left: 7px; top: 4px; bottom: 4px; width: 2px;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}
.metodo-full-node .ring{ fill: none; stroke: var(--grafite); stroke-opacity: .25; stroke-width: 1.5; }
.metodo-full-node .core{ fill: var(--grafite); stroke: var(--off); stroke-width: 2; }

@media (min-width: 1100px){
  .metodo-full-steps{ flex-direction: row; gap: var(--s3); }
  .metodo-full-step{ flex: 1; padding-left: 0; padding-top: calc(16px + var(--s2)); }
  .metodo-full-dot{ top: 0; left: 0; }
  .metodo-full-line{
    left: 0; right: 0; top: 7px; bottom: auto; width: auto; height: 2px;
    background: linear-gradient(90deg, var(--teal), var(--verde) 45%, var(--magenta));
  }
  .metodo-full-svg{ left: 0; right: 0; top: 7px; bottom: auto; width: auto; height: 2px; }
  .metodo-full-step p{ max-width: 26ch; }
  /* distancia generosa de scroll pro no percorrer com sincronia
     visivel (cinema, nao fogos — PROMPT_WOW_HERO.md) */
  .metodo-full-track{ min-height: 64vh; display: flex; align-items: center; }
}

/* =========================================================
   3. AS 5 ETAPAS — blocos alternados sobre fundo grafite.
   Reusa .braco-card/.braco-bar/.braco-label/.braco-title/.braco-body
   (home.css) pro cartao claro; so o numero-fantasma, o wrapper
   alternado e a lista "o que voce recebe" sao novos aqui.
   ========================================================= */
.etapas-list{ display: flex; flex-direction: column; gap: var(--s4); margin-top: var(--s5); }
.etapa-block{ display: flex; flex-direction: column; gap: var(--s2); }

.etapa-n{
  font-family: var(--disp);
  font-weight: 900;
  font-size: clamp(2.2rem, 8vw, 3.6rem);
  line-height: 1;
  color: rgba(245, 243, 238, .20);
}

.etapa-block .braco-card{ flex: 1; }

.etapa-receb-label{
  margin-top: var(--s3);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.etapa-receb{
  list-style: none;
  padding: 0;
  margin-top: var(--s2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.etapa-receb li{ position: relative; padding-left: 20px; color: var(--txt); }
.etapa-receb li::before{
  content: "";
  position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--acc);
}

@media (min-width: 768px){
  .etapa-block{ flex-direction: row; align-items: flex-start; gap: var(--s4); }
  .etapa-n{ flex: 0 0 auto; width: 110px; text-align: right; padding-top: var(--s2); }
  .etapa-block:nth-child(even){ flex-direction: row-reverse; }
  .etapa-block:nth-child(even) .etapa-n{ text-align: left; }
}

/* =========================================================
   4. FAIXA DE PROVA COMPACTA — reusa .stats/.stat/.stat-n/.stat-l
   (motion.css), so troca a cor pra ler bem sobre fundo claro
   (text-safe: grafite/muted, nunca a cor viva como texto)
   ========================================================= */
.prova-compacta .stats{ justify-content: center; margin-top: 0; }
.prova-compacta .stat{ align-items: center; }
.prova-compacta .stat-n{ color: var(--txt); }
.prova-compacta .stat-l{ color: var(--muted); }

/* =========================================================
   5. reduced-motion => dupla garantia (espelha motion.css):
   estacoes SEMPRE acesas mesmo se o JS tiver marcado o estado
   "apagado" (.js-anim) antes de checar prefers-reduced-motion.
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .js-anim .metodo-full-dot{ opacity: 1 !important; }
}