/* ==========================================================================
   Componente · Esteira (#s-esteira)
   Timeline editorial: linha contínua + nós tipográficos.
   Sem cards, pills ou badges — o fluxo e a tipografia carregam a mensagem.
   ========================================================================== */

#s-esteira {
  padding: 0;
  display: block;
}

#s-esteira .content.esteira {
  width: 100%;
  max-width: none;
  height: 100%;
  padding: 8.5vh 6% 7vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 3.2vh;
  box-sizing: border-box;
}

/* ---------- cabeçalho ---------- */
.esteira__head {
  display: flex;
  flex-direction: column;
  gap: .7vh;
}

.esteira__head .kicker { margin-bottom: 0; }

.esteira__head h2 {
  margin: 0;
  max-width: 28ch;
  font-size: clamp(28px, 3.3vw, 48px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.045em;
}

/* ---------- trilha ---------- */
.esteira__track {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(40px, 7vh, 72px);
  min-height: 0;
  padding: 1vh 0;
}

.esteira__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  position: relative;
}

/* linha contínua atrás dos nós */
.esteira__row::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 7px;
  height: 1px;
  background: color-mix(in srgb, var(--white) 22%, transparent);
}

.esteira__node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-right: 1.5vw;
  min-width: 0;
}

.esteira__dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--bg, #0B0B0C);
  border: 2px solid color-mix(in srgb, var(--white) 35%, transparent);
  box-sizing: border-box;
  z-index: 1;
}

.esteira__n {
  font-size: clamp(11px, .8vw, 13px);
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--gray);
  font-variant-numeric: tabular-nums;
}

.esteira__node strong {
  font-size: clamp(16px, 1.35vw, 24px);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.2;
  color: var(--white);
  max-width: 12ch;
}

/* estados — só no ponto e no peso tipográfico */
.esteira__node.is-ok .esteira__dot {
  border-color: color-mix(in srgb, var(--white) 45%, transparent);
  background: color-mix(in srgb, var(--white) 18%, transparent);
}

.esteira__node.is-fail .esteira__dot {
  border-color: #E24A0E;
  background: #E24A0E;
}

.esteira__node.is-fail .esteira__n { color: #E24A0E; }

.esteira__node.is-warn .esteira__dot {
  border-color: #E24A0E;
  background: transparent;
  box-shadow: inset 0 0 0 3px #E24A0E;
}

.esteira__node.is-warn .esteira__n { color: #E24A0E; }
.esteira__node.is-warn strong { color: var(--white); }

.esteira__node.is-loss .esteira__dot {
  width: 18px;
  height: 18px;
  border: 0;
  background: #E24A0E;
}

.esteira__node.is-loss .esteira__n,
.esteira__node.is-loss strong {
  color: #E24A0E;
}

.esteira__node.is-loss strong {
  font-size: clamp(18px, 1.55vw, 28px);
  font-weight: 600;
}

/* ---------- rodapé tipográfico ---------- */
.esteira__end {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
  padding-top: 2.4vh;
  border-top: 1px solid color-mix(in srgb, var(--white) 14%, transparent);
}

.esteira__punch {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(18px, 1.7vw, 28px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--white);
}

.esteira__punch em {
  color: #E24A0E;
  font-style: normal;
}

.esteira__owner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px 18px;
  align-items: start;
}

.esteira__owner-label {
  font-size: clamp(22px, 2vw, 34px);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1;
  color: #E24A0E;
}

.esteira__owner p {
  margin: 0;
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.45;
  color: var(--gray);
  max-width: 36ch;
}

.esteira__owner strong {
  color: var(--white);
  font-weight: 600;
}

@media (max-width: 1100px) {
  .esteira__row { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .esteira__row::before { display: none; }
  .esteira__end { grid-template-columns: 1fr; gap: 22px; }
}