/* ==========================================================================
   Nossa História
   ========================================================================== */

/* ---------- Introdução ---------- */
.history-intro { padding-block: var(--space-4) var(--space-6); }
.history-intro h1 { margin-bottom: var(--space-5); }
.history-intro .lead { font-size: var(--text-md); line-height: 1.7; }

/* ---------- História com colagem ---------- */
.history-story { padding-top: var(--space-5); overflow-x: clip; } /* a colagem é levemente girada */
.history-story__grid { display: grid; gap: var(--space-6); align-items: start; }
.history-story__collage { margin: 0; justify-self: center; width: min(100%, 460px); }
.history-story__collage img { width: 100%; filter: drop-shadow(0 16px 28px rgb(0 0 0 / 0.18)); rotate: -1.5deg; }
.history-story__text { font-size: var(--text-md); line-height: 1.75; }

@media (min-width: 1024px) {
  .history-story__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); }
  /* A colagem acompanha a leitura do texto longo. */
  .history-story__collage { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
}

/* ---------- A marca ---------- */
.history-brand .prose { font-size: var(--text-md); line-height: 1.75; }

/* ---------- Linha do tempo ---------- */
.history-timeline__head { margin-inline: auto; margin-bottom: var(--space-6); }
.history-timeline__head .lead { margin: 0; }

.timeline { --tl-accent: var(--orange-700); } /* contraste AA para texto grande */
/* Sem JavaScript: todos os marcos em lista vertical. */
.timeline__years, .timeline__nav, .timeline__progress { display: none; }
.timeline__panels { display: grid; gap: var(--space-5); }
.timeline__item { display: grid; grid-template-columns: 64px 1fr; gap: var(--space-4); align-items: start; }
.timeline__icon { display: grid; place-items: center; width: 64px; aspect-ratio: 1; color: var(--green-600); }
.timeline__icon img { width: 100%; height: 100%; object-fit: contain; }
.timeline__icon .icon { width: 70%; height: 70%; }
.timeline__year { margin: 0 0 var(--space-2); font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); line-height: 1; color: var(--tl-accent); }
.timeline__body p { margin: 0; font-size: var(--text-md); line-height: 1.7; }

/* Com JavaScript: carrossel com abas de anos. */
.js .timeline__years {
  display: flex; gap: var(--space-2); margin: 0 0 var(--space-5); padding: var(--space-2) var(--space-1);
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin;
  mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
}
.js .timeline__years button {
  flex: none; scroll-snap-align: center; min-width: 64px; min-height: 40px; padding: 0.4rem 0.9rem;
  border: 2px solid var(--color-border); border-radius: var(--radius-pill); background: var(--white);
  font-weight: 700; font-size: var(--text-sm); color: var(--gray-600); cursor: pointer;
  transition: background-color var(--duration), color var(--duration), border-color var(--duration);
}
.js .timeline__years button:hover { border-color: var(--green-700); color: var(--green-700); }
.js .timeline__years button[aria-selected="true"] { background: var(--green-700); border-color: var(--green-700); color: var(--white); }

.js .timeline__stage { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); }
.js .timeline__nav {
  display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: var(--green-100); color: var(--green-700); cursor: pointer; transition: background-color var(--duration), color var(--duration);
}
.js .timeline__nav:hover:not(:disabled) { background: var(--green-700); color: var(--white); }
.js .timeline__nav:disabled { opacity: 0.35; cursor: default; }
.js .timeline__nav .icon { width: 26px; height: 26px; }

.js .timeline__panels { display: grid; min-height: 260px; }
.js .timeline__item {
  grid-area: 1 / 1; align-self: center;
  padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); background: var(--white);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(0.98);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0s linear 0.4s;
}
.js .timeline__item.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.js .timeline__item.is-before { transform: translateY(-16px) scale(0.98); }

.js .timeline__progress { display: block; height: 4px; margin-top: var(--space-5); border-radius: 4px; background: var(--gray-200); overflow: hidden; }
.js .timeline__progress span { display: block; height: 100%; width: 0; background: var(--orange-500); transition: width 0.4s var(--ease); }

@media (min-width: 768px) {
  .timeline__item { grid-template-columns: 1fr 160px; gap: var(--space-6); align-items: center; }
  .timeline__icon { order: 2; width: 160px; }
  .timeline__year { font-size: var(--text-3xl); }
}
@media (max-width: 599px) {
  /* No celular as setas ficam abaixo do cartão, lado a lado. */
  .js .timeline__stage { grid-template-columns: 1fr 1fr; }
  .js .timeline__panels { grid-column: 1 / -1; grid-row: 1; }
  .js .timeline__nav--prev { justify-self: start; }
  .js .timeline__nav--next { justify-self: end; }
  .js .timeline__item { grid-template-columns: 1fr; }
  .js .timeline__icon { width: 72px; }
  .js .timeline__panels { min-height: 0; }
}

/* ---------- Propósito ---------- */
.history-purpose h2 { margin-bottom: var(--space-6); }
.history-purpose__grid { gap: var(--space-5); }
.purpose-card {
  display: grid; justify-items: center; align-content: start; gap: var(--space-3); padding: var(--space-6) var(--space-5);
  background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow); text-align: center;
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.purpose-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.purpose-card__icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--green-100); color: var(--green-700); }
.purpose-card__icon img { width: 38px; height: 38px; object-fit: contain; }
.purpose-card h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); color: var(--green-600); text-transform: uppercase; letter-spacing: 0.03em; }
.purpose-card p { margin: 0; color: var(--color-muted); }

/* ---------- Encerramento ---------- */
.history-outro .prose { font-size: var(--text-md); line-height: 1.75; }
.history-outro strong:only-child, .history-outro p:last-child strong {
  display: block; margin-top: var(--space-4); font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-xl); color: var(--orange-text); letter-spacing: 0.02em;
}