/* ==========================================================================
   Sobre — estilos específicos (Figma Desktop - About us 19627:1851)
   O hero (.page-hero), a faixa de imagem (.image-band), os cartões
   (.card-grid/.info-card), testemunhos e CTA vêm de main.css. Aqui só
   fica o que é próprio desta página.
   ========================================================================== */

/* ---- Hero ------------------------------------------------------------------ */
.sobre-hero__title, .sobre-hero__lead {
	opacity: 0; transform: translateY(24px);
	animation: sobreHeroIn 1s var(--ease-out) forwards;
}
.sobre-hero__title { animation-delay: 0.15s; }
.sobre-hero__lead { animation-delay: 0.45s; }
@keyframes sobreHeroIn { to { opacity: 1; transform: none; } }

/* ---- Sobre nós -------------------------------------------------------------- */
/* Texto em duas colunas (584 + 553 no design) e, colada ao fundo da
   secção, a faixa de imagem a toda a largura. */
.sobre-about { padding-top: var(--section-y-sm); }
.sobre-about__inner {
	display: grid; grid-template-columns: minmax(0, 584fr) minmax(0, 553fr);
	gap: 48px 79px; align-items: end;
	padding-bottom: var(--section-y-sm);
}
.sobre-about__col { display: flex; flex-direction: column; align-items: flex-start; }
.sobre-about__heading { display: flex; flex-direction: column; gap: 10px; }
.sobre-about__heading .h-2 { color: var(--c-ink); }
.sobre-about__text { color: var(--c-ink-2); }
.sobre-about__col--main .sobre-about__text { margin-top: 16px; }
.sobre-about__col--main .sobre-about__heading + .sobre-about__text { margin-top: 24px; }
.sobre-about__col--aside .btn { margin-top: 24px; }

@media (max-width: 900px) {
	.sobre-about__inner { grid-template-columns: 1fr; gap: 32px; align-items: start; }
}

/* ---- Linha do tempo --------------------------------------------------------- */
.sobre-timeline { background: var(--c-white); }
.sobre-timeline__inner {
	display: grid; grid-template-columns: minmax(0, 322px) minmax(0, 738px);
	justify-content: space-between; gap: 48px; align-items: stretch;
}
/* O wrapper ocupa toda a altura da linha da grelha (align-items: stretch)
   para o bloco sticky ter espaço para deslizar ao longo dos 4 momentos,
   tal como a lista da secção "Três décadas" na Home. */
.sobre-timeline__head { align-self: stretch; }
.sobre-timeline__sticky {
	position: sticky; top: calc(var(--nav-h) + 56px);
	display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
}
.sobre-timeline__title { color: var(--c-ink); }
.sobre-timeline__list { display: flex; flex-direction: column; }
.sobre-timeline__item { position: relative; padding: 40px 0 48px; }
/* Linha divisória que se desenha da esquerda para a direita ao entrar
   no viewport (main.js acrescenta .is-visible ao .reveal). */
.sobre-timeline__item::before {
	content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
	background: rgba(0, 0, 0, 0.1);
	transform: scaleX(0); transform-origin: left;
	transition: transform 1.1s var(--ease-out) 0.2s;
}
.sobre-timeline__item.is-visible::before { transform: scaleX(1); }
.sobre-timeline__year {
	font-size: clamp(30px, 2.95vw, 42px); line-height: 1.2; font-weight: 400;
	letter-spacing: -0.01em; color: var(--c-cyan);
}
.sobre-timeline__label {
	margin-top: 8px; font-size: 14px; line-height: 1.5; font-weight: 700;
	letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-muted);
}
.sobre-timeline__text { margin-top: 16px; color: var(--c-ink-2); }

@media (max-width: 900px) {
	.sobre-timeline__inner { grid-template-columns: 1fr; gap: 32px; }
	.sobre-timeline__sticky { position: static; }
	.sobre-timeline__item { padding: 32px 0 40px; }
	.sobre-timeline__item:first-child { padding-top: 0; }
	.sobre-timeline__item:first-child::before { display: none; }
	.sobre-timeline__item:last-child { padding-bottom: 0; }
}

/* ---- 3 princípios ---------------------------------------------------------- */
.sobre-principles__head { margin-bottom: 60px; }
.sobre-principles__head .h-2 { color: var(--c-ink); }
.sobre-principle__body { display: flex; flex-direction: column; }
.sobre-principle .info-card__text { max-width: 335px; }

@media (max-width: 900px) {
	.sobre-principles__head { margin-bottom: 40px; }
}
@media (max-width: 640px) {
	.sobre-principle { min-height: 0; gap: 40px; }
	.sobre-principle .info-card__text { max-width: none; }
}

/* ---- Movimento reduzido ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.sobre-hero__title, .sobre-hero__lead { opacity: 1; transform: none; animation: none; }
	.sobre-timeline__item::before { transform: none; transition: none; }
}

/* Segundo parágrafo da coluna direita (políticas e compliance do cliente) */
.sobre-about__text--muted {
	margin-top: 18px; font-size: 15px; line-height: 1.6;
	color: var(--c-text-muted); font-weight: 400;
}