/* ============================================================
   Cupoland — Página Sobre
   Componentes específicos (usa o design system de lando-assets/styles.css)
   ============================================================ */

/* ---------- Botões dos apps ---------- */
.btn--tg { background: var(--azul); color: #fff; }
.btn--tg:hover { background: #2159c4; color: #fff; }
.btn--wpp { background: #15803d; color: #fff; }
.btn--wpp:hover { background: #116a32; color: #fff; }
.btn svg { flex-shrink: 0; }

/* ---------- Emojis nos cards de compromisso ---------- */
.value-card__emoji {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 16px;
  font-size: 26px; line-height: 1;
  background: var(--lilas); border: 2px solid var(--roxo-ink); border-radius: 14px;
}

/* ---------- Timeline: ano em destaque ---------- */
.timeline__year {
  font-family: var(--font-display); font-weight: 600; color: var(--coral);
  font-size: 1.05rem; display: block; margin-bottom: 4px;
}

/* ---------- Nossa História: linha do tempo cronológica ----------
   Deixa de ser um grid de cards (onde o 4º ano ficava órfão numa 2ª linha) e
   vira uma timeline de verdade: espinha vertical à esquerda, o emoji de cada ano
   como marcador circular sobre a espinha, e os cards descendo em ordem
   (2022 → 2026). Escopo #historia pra NÃO afetar os passos .timeline da /cupo-ia,
   que compartilham a mesma classe. Mesma estrutura no desktop e no mobile. */
#historia .timeline {
  display: block;
  position: relative;
  max-width: 680px;
  margin: 42px auto 0;
  padding: 4px 0;
}
/* espinha */
#historia .timeline::before {
  content: "";
  position: absolute;
  left: 27px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 3px;
  background: var(--roxo-100);
}
/* cada card desloca pra direita, abrindo a coluna do trilho à esquerda */
#historia .timeline__item {
  position: relative;
  width: auto;
  margin: 0 0 22px 82px;
  padding: 20px 24px;
}
#historia .timeline__item:last-child { margin-bottom: 0; }
/* o emoji (1º filho) vira o marcador circular sobre a espinha */
#historia .timeline__item > span[aria-hidden="true"] {
  position: absolute;
  left: -78px; top: 18px;
  width: 48px; height: 48px; margin: 0;
  display: grid; place-items: center;
  background: var(--white);
  border: 2px solid var(--roxo-ink);
  border-radius: 50%;
  box-shadow: var(--pop-sm);
  z-index: 2;
}
/* conector curto do marcador até o card */
#historia .timeline__item::before {
  content: "";
  position: absolute;
  left: -30px; top: 40px;
  width: 30px; height: 3px;
  background: var(--roxo-100);
  z-index: 0;
}

@media (max-width: 600px) {
  #historia .timeline { margin-top: 30px; }
  #historia .timeline::before { left: 23px; }
  #historia .timeline__item { margin-left: 70px; }
  #historia .timeline__item > span[aria-hidden="true"] {
    left: -66px; top: 16px; width: 42px; height: 42px;
  }
  #historia .timeline__item::before { left: -26px; width: 26px; }
}