/* Roberti — página Sobre.
   A linha do tempo nasceu como capítulo 8 da home e foi movida para cá em 12/08/2026.
   O motivo não é tamanho: no rodapé da home ela caía ENTRE as obras e o contato, ou
   seja, no meio do caminho de quem acabou de ver o portfólio e quer falar. História
   interrompendo conversão. E a §9 do briefing já descrevia /sobre como "história, linha
   do tempo, missão/visão/valores" — a tabela da home é que contradizia a própria rota.

   A trilha é a MESMA do capítulo 8: esta página importa historia.css e historia.js sem
   copiar nada. Por isso o bloco da trilha aqui é escuro, como era na home. */
@import url("marca.css");
@import url("historia.css");

body { background: var(--papel); color: var(--tinta); font-family: var(--fonte-texto); }

/* ---------- abertura ---------- */
.sb-abre {
  padding: var(--gap-secao) clamp(16px, 4vw, 56px);
  position: relative;
}
.sb-interno { max-width: var(--largura-max); margin: 0 auto; position: relative; }
.sb-etiqueta {
  font-family: var(--fonte-titulo);
  font-size: var(--t-etiqueta);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--indigo);
  margin: 0 0 14px;
}
.sb-titulo {
  font-family: var(--fonte-titulo);
  font-weight: 300;
  font-size: clamp(28px, 4.8vw, 58px);
  line-height: 1.04;
  letter-spacing: var(--tracking-titulo);
  margin: 0 0 clamp(20px, 2.6vw, 32px);
  max-width: 20ch;
}
.sb-titulo b { font-weight: 400; }

/* ---------- abertura: foto ao lado do texto ----------
   Antes o texto era um bloco de duas colunas sozinho, sem âncora visual. A aérea da
   fábrica é o retrato certo aqui: é sobre a Roberti, não sobre uma obra de cliente. */
.sb-grade {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: clamp(22px, 3.6vw, 60px);
  align-items: start;
}
.sb-foto { margin: 0; }
.sb-foto img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 3 / 2; object-fit: cover;
}
.sb-foto figcaption {
  margin-top: 10px;
  font-family: var(--fonte-titulo);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--tinta-65);
}

.sb-corpo {
  font-size: var(--t-corpo);
  line-height: 1.68;
  color: var(--tinta-65);
}
.sb-corpo p { margin: 0 0 1.15em; }
.sb-corpo p:last-child { margin-bottom: 0; }
/* a primeira linha entra maior: dá começo de leitura sem mexer no texto */
.sb-corpo p:first-child { font-size: var(--t-sub); line-height: 1.5; color: var(--tinta); }
.sb-corpo b { color: var(--tinta); font-weight: 400; }

.sb-citacao {
  margin: clamp(30px, 4vw, 56px) 0 0;
  padding-top: clamp(22px, 2.6vw, 34px);
  border-top: 1px solid var(--tinta-13);
  position: relative;
}
/* o degradê oficial entra como régua, onde não carrega texto */
.sb-citacao::before {
  content: "";
  position: absolute; top: -1px; left: 0;
  width: clamp(64px, 8vw, 120px); height: 3px;
  background: var(--degrade);
}
.sb-citacao p {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 300;
  font-size: clamp(21px, 2.8vw, 36px);
  line-height: 1.2;
  letter-spacing: var(--tracking-titulo);
  color: var(--tinta);
  max-width: 26ch;
}

/* ---------- missão, visão, valores ----------
   O texto é do catálogo e não muda. O que muda é a estrutura: missão e visão viram dois
   cartões de peso igual, e valores vira lista numerada de largura cheia. Antes eram três
   colunas iguais, o que dava a valores o mesmo espaço de uma frase e comprimia os cinco
   itens numa coluna estreita. */
.sb-pilares {
  background: var(--papel);
  padding: 0 clamp(16px, 4vw, 56px) var(--gap-secao);
}
.pilares-interno {
  max-width: var(--largura-max); margin: 0 auto;
  padding-top: clamp(26px, 3.4vw, 48px);
  border-top: 1px solid var(--tinta-13);
  display: flex; flex-direction: column;
  gap: clamp(16px, 2.2vw, 28px);
}
.pilares-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 28px);
}
.pilar, .pilar-valores {
  background: #ffffffa6;
  border: 1px solid var(--tinta-13);
  padding: clamp(20px, 2.6vw, 36px);
  position: relative;
}
/* fio do degradê no topo do cartão: acento da marca sem tocar no texto */
.pilar::before, .pilar-valores::before {
  content: "";
  position: absolute; top: -1px; left: -1px;
  width: clamp(48px, 6vw, 88px); height: 3px;
  background: var(--degrade);
}
.pilar-rot {
  font-family: var(--fonte-titulo);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--indigo);
  margin: 0 0 clamp(12px, 1.6vw, 18px);
}
.pilar-txt {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 300;
  font-size: clamp(17px, 1.9vw, 23px);
  line-height: 1.36;
  color: var(--tinta);
}
.pilar-txt b { font-weight: 400; }

/* os cinco valores em fila, numerados */
.pilar-lista {
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: valor;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 26px);
}
.pilar-lista li {
  counter-increment: valor;
  border-top: 1px solid var(--tinta-13);
  padding-top: 12px;
  font-family: var(--fonte-titulo);
  font-size: clamp(14px, 1.3vw, 16.5px);
  line-height: 1.3;
  color: var(--tinta);
}
.pilar-lista li::before {
  content: counter(valor, decimal-leading-zero);
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--indigo);
}

/* ---------- fecho ---------- */
.sb-fecho {
  background: var(--tinta);
  color: var(--papel);
  padding: clamp(34px, 5vw, 72px) clamp(16px, 4vw, 56px);
}
.sb-fecho-interno {
  max-width: var(--largura-max); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px;
}
.sb-fecho p {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 300;
  font-size: clamp(20px, 2.6vw, 32px);
  line-height: 1.15;
  max-width: 24ch;
}
.sb-fecho p b { font-weight: 400; }
.sb-bt {
  font-family: var(--fonte-titulo);
  font-size: 13.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--papel);
  color: var(--tinta);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 9px;
  transition: background .2s;
}
.sb-bt:hover { background: #fff; }
.sb-bt:focus-visible { outline: 2px solid var(--claro); outline-offset: 3px; }

@media (max-width: 940px) {
  .pilar-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .sb-grade { grid-template-columns: 1fr; }
  .pilares-duo { grid-template-columns: 1fr; }
  .sb-titulo { max-width: none; }
}
@media (max-width: 480px) {
  .pilar-lista { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .sb-bt { transition: none; } }