/* ==================================================
   VIPZUE — SEÇÃO 04 / MÉTODO • COMO FUNCIONA
   ================================================== */

.metodo {
  background:
    radial-gradient(ellipse 52% 52% at 24% 48%, rgb(var(--bronze-rgb) / 0.24), transparent 70%),
    linear-gradient(to bottom, var(--grafite) 0%, var(--cafe) 45%, var(--grafite) 100%);
}

.metodo__frame {
  max-width: calc(var(--container-max) + 2 * var(--container-pad));
  margin-inline: auto;
  padding-block: var(--space-xl);
  background: radial-gradient(ellipse 60% 50% at 10% 30%, rgb(var(--bronze-rgb) / 0.16), transparent 60%);
}

.metodo__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

/* A coluna esquerda carrega personagens + caminho + 4 etapas, então
   precisa de mais espaço que a coluna editorial. */
@media (min-width: 960px) {
  .metodo__inner {
    grid-template-columns: 1.12fr 1fr;
    gap: var(--space-lg);
  }
}

/* Na referência os personagens ocupam uma faixa larga à esquerda,
   com o caminho luminoso do método correndo entre eles e as etapas. */
.metodo__left {
  --metodo-char-w: clamp(190px, 20vw, 320px);
  position: relative;
  display: grid;
  grid-template-columns: var(--metodo-char-w) 1fr;
  gap: var(--space-md);
  align-items: center;
}

/* Na referência os personagens têm presença: ocupam a altura da lista de
   etapas e sangram um pouco para fora da coluna, integrados ao caminho
   luminoso — não são um selo decorativo ao lado do texto. */
.metodo__characters {
  grid-column: 1;
  grid-row: 1 / -1;
  position: relative;
  width: calc(100% + clamp(1rem, 3vw, 3.5rem));
  margin-left: calc(clamp(1rem, 3vw, 3.5rem) * -1);
  align-self: center;
}

.metodo__characters::before {
  content: "";
  position: absolute;
  inset: 6% -6% 2% -6%;
  background: radial-gradient(ellipse at 50% 55%, rgb(var(--bronze-rgb) / 0.32), transparent 68%);
  filter: blur(28px);
  pointer-events: none;
}

.metodo__characters img {
  position: relative;
  width: 100%;
  filter: drop-shadow(0 30px 54px rgba(0, 0, 0, 0.68));
}

.metodo__line {
  display: none;
}

@media (min-width: 960px) {
  .metodo__line {
    display: block;
    position: absolute;
    left: calc(var(--metodo-char-w) - 14px);
    top: 4%;
    width: 74px;
    height: 92%;
    overflow: visible;
  }
}

.metodo__line-base {
  fill: none;
  stroke: rgb(var(--bronze-rgb) / 0.35);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.metodo__line-progress {
  fill: none;
  stroke: var(--champagne);
  stroke-width: 1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgb(var(--champagne-rgb) / 0.55));
}

.metodo__steps {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

@media (max-width: 959px) {
  .metodo__steps {
    grid-column: 1;
  }
  .metodo__left {
    grid-template-columns: 1fr;
  }
  .metodo__characters {
    grid-row: auto;
    width: 140px;
    margin-inline: auto;
  }
  /* No mobile o topo da moldura somava seu próprio respiro (64px) ao
     padding da seção — a distância entre "UM SISTEMA, UMA DIREÇÃO." (na
     transição de cima) e os bonecos ficava grande demais. */
  .metodo__frame {
    padding-block: var(--space-xs);
  }
  .metodo__inner {
    gap: var(--space-lg);
  }
}

@media (max-width: 720px) {
  /* Reforça (com mais especificidade que a regra genérica de
     .transition em transitions.css) a aproximação pedida entre
     "UM SISTEMA, UMA DIREÇÃO." e os bonecos do Método. */
  .transition--03-04 {
    padding-bottom: var(--space-md);
  }
}

.metodo-step {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
}

/* Na referência o número é solto em champagne, não dentro de um botão */
.metodo-step__node {
  flex: none;
  min-width: 2.2rem;
  font-size: clamp(1rem, 0.85rem + 0.5vw, 1.3rem);
  line-height: 1.5;
  font-weight: 500;
  color: var(--bronze);
}

.metodo-step h3 {
  font-family: var(--font-estrutura);
  font-weight: 600;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
  letter-spacing: 0;
  color: var(--marfim);
  margin-bottom: 0.35rem;
}

.metodo-step p {
  color: var(--text-muted);
  font-size: var(--fs-small);
  max-width: 42ch;
}

.metodo__right {
  align-self: center;
}

/* Esta coluna divide espaço com os personagens e as 4 etapas, então a
   headline é um degrau menor que a das seções de coluna única — assim
   mantém as 3 linhas da referência em vez de picotar em 5. */
.metodo__headline {
  font-size: clamp(1.75rem, 1rem + 2.3vw, 2.75rem);
  margin-block: var(--space-sm);
}

.metodo__paragraph {
  color: var(--text-muted);
  max-width: 52ch;
  margin-bottom: var(--space-md);
}