/* ==========================================================
   SOBRE — usa a base de css/home.css. Aqui ficam só as partes próprias.
   ========================================================== */

h1, h2, h3 { line-height: 1.12; }

/* O cabeçalho é fixo (64px): o conteúdo começa logo abaixo dele */
main { padding-top: 64px; }

/* ---------- Abertura ---------- */
.abertura { padding: clamp(56px, 8vw, 112px) 0; overflow: hidden; }
.abertura-grade { display: grid; gap: 40px; align-items: center; }
.abertura h1 {
  font-size: clamp(34px, 4.6vw, 60px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.04;
  margin-bottom: 20px;
}
.abertura .lede { font-size: 17px; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.abertura-foto { margin: 0; }
.abertura-foto img { width: 100%; height: auto; }

/* ---------- Título mundial ---------- */
.titulo-mundial { padding: clamp(56px, 7vw, 104px) 0; }
.titulo-mundial-grade { display: grid; gap: 20px 56px; align-items: center; }
.tri { font-size: clamp(88px, 14vw, 180px); font-weight: 600; letter-spacing: -0.04em; line-height: 0.9; }
.titulo-mundial .h2 { margin-bottom: 14px; }

/* ---------- História ---------- */
.historia h2, .como h2, .linhas h2 { margin-bottom: clamp(28px, 4vw, 52px); }
.tempo { border-top: 1px solid var(--line); }
.tempo li { display: grid; gap: 8px 40px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.tempo .ano { font-size: clamp(28px, 3vw, 40px); font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.tempo h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.tempo li p:not(.ano) { color: var(--ink-2); max-width: 64ch; }

/* ---------- Como fazemos ---------- */
.como-lista { display: grid; gap: 0; border-top: 1px solid var(--line); }
.como-lista > div { padding: 24px 0; border-bottom: 1px solid var(--line); }
.como-lista dt { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.como-lista dd { color: var(--ink-2); max-width: 52ch; }

/* ---------- Linhas ---------- */
.linhas-lista { display: grid; gap: 40px 24px; }
.linhas-lista a { display: block; }
.linha-img { display: block; aspect-ratio: 16 / 11; overflow: hidden; background: #000; margin-bottom: 18px; }
.linha-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.linhas-lista a:hover .linha-img img { transform: scale(1.04); }
.linhas .linha-nome { display: block; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.linhas .linha-desc { display: block; margin: 6px 0 16px; color: var(--muted); max-width: 34ch; }

@media (min-width: 700px) {
  .como-lista { grid-template-columns: repeat(2, 1fr); column-gap: 56px; }
  .linhas-lista { grid-template-columns: repeat(3, 1fr); }
  .tempo li { grid-template-columns: 160px 1fr; }
}
@media (min-width: 960px) {
  .abertura-grade { grid-template-columns: 1fr 1fr; gap: 72px; }
  .titulo-mundial-grade { grid-template-columns: auto 1fr; }
}