/* O mapa do designer aparece a partir de 900px; abaixo disso a
   linha do tempo vertical assume, porque 1367px comprimidos num
   celular ficam ilegíveis. */
.fidelidade__mapa { display: none; width: 100%; height: auto; }
@media (min-width: 900px) {
  .fidelidade__mapa { display: block; }
  .fidelidade__lista { display: none !important; }
}

/* ============================================================
   PROGRAMA FIDELIDADE — linha do tempo horizontal no desktop,
   3x2 no tablet e VERTICAL no mobile. Encolher 6 colunas em
   375px geraria alvos de 40px e texto de 11px.
   ============================================================ */
.fidelidade__lista { list-style: none; padding: 0; display: grid; gap: var(--sp-lg); }

.fid {
  display: grid; gap: var(--sp-sm);
  grid-template-columns: auto 1fr;
  align-items: center;
  position: relative;
}
.fid__no { width: 76px; height: 76px; flex: none; }
.fid__texto { text-align: left; }
.fid__pedido {
  font-family: var(--font-display); font-size: var(--fs-display-sm);
  color: var(--c-tijolo); line-height: 1.1;
}
.fid__premio { font-size: var(--fs-sm); color: var(--c-texto); }

/* --- Mobile: linha do tempo vertical --- */
@media (max-width: 767px) {
  .fidelidade__lista { gap: var(--sp-xl); position: relative; }
  .fid::after {
    content: ''; position: absolute; left: 37px; top: 78px;
    width: 2px; height: calc(100% + var(--sp-xl) - 78px);
    background: repeating-linear-gradient(to bottom,
      var(--c-vermelho-fundo) 0 6px, transparent 6px 12px);
    transform-origin: top; animation: traca-y 600ms var(--ease-out) both;
  }
  .fid:last-child::after { display: none; }
}

/* --- Tablet: 3 x 2 --- */
@media (min-width: 768px) {
  .fidelidade__lista { grid-template-columns: repeat(3, 1fr); gap: var(--sp-xl); }
  .fid { grid-template-columns: 1fr; justify-items: center; text-align: center; align-items: start; align-content: start; }
  .fid__texto { text-align: center; }
}

/* --- Desktop: linha do tempo horizontal de 6 nós --- */
@media (min-width: 1024px) {
  .fidelidade__lista { grid-template-columns: repeat(6, 1fr); gap: var(--sp-md); }
  .fid::after {
    content: ''; position: absolute; top: 44px; left: calc(50% + 52px);
    width: calc(100% - 104px); height: 2px;
    background: repeating-linear-gradient(to right,
      var(--c-vermelho-fundo) 0 6px, transparent 6px 12px);
    transform-origin: left; animation: traca-x 600ms var(--ease-out) both;
  }
  .fid:last-child::after { display: none; }
  .fid__no { width: 88px; height: 88px; }
  .fid__pedido { font-size: clamp(0.95rem, 0.55rem + 0.62vw, 1.2rem); text-wrap: balance; }
}

.fidelidade__rodape { text-align: center; margin-top: clamp(40px, 5vw, 64px); }