/* /proximas-etapas: cartões de etapa com o estado de cada uma, texto sem botões. Só tokens. */
@layer paginas {
  .etapas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .etapas__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    /* O link do rodapé (#tecnicos…) não esconde o título atrás do cabeçalho fixo. */
    scroll-margin-top: 6rem;
  }

  .etapas__item:target {
    border-color: var(--color-accent);
  }

  .etapas__estado {
    align-self: flex-start;
    padding: 0 var(--space-2);
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-pill);
    color: var(--color-fg-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .etapas__estado--parcial {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }
  :where(html[data-movimento="ligado"]) .etapas__item {
    transition:
      border-color 0.15s ease,
      transform 0.15s ease;
  }

  :where(html[data-movimento="ligado"]) .etapas__item:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
  }
}