/* =====================================================================
   sobre.css — regras exclusivas da /sobre/ e da /en/about/.

   Até 10/2026 este CSS ficava num <style> dentro de public/sobre/index.html.
   Saiu para cá quando a página ganhou a versão em inglês, para as duas não
   se desencontrarem. Header, rodapé, botões e tokens continuam em base.css.
   ===================================================================== */

/* Raio da base curva do bloco de produto. Não é um token da marca: os
   radius de base.css vão até `--radius-xl` (30px), que numa faixa de largura
   total mal se percebe. 72px é o valor em que a curva vira gesto . a
   referência usava algo em torno de 40px e a pedida foi "maior". */
:root { --radius-curva: 72px; }

/* ===============================================================
   SOBRE — regras exclusivas desta página.

   Header, rodapé, botões, tokens e a seção `.cta` vêm de base.css sem
   alteração. O que existe aqui é só o que a home não tinha.

   RITMO DE FUNDO (a página inteira em uma linha)
     hero .bg | ato 1 branco | PRODUTO lima | linha do tempo .bg | ato 4 branco | news .bg | cta .bg

   A lima aparece uma vez só no corpo, no bloco de produto, e é de lá que vem
   o peso dele . ela morava na linha do tempo até 18/09/2026 e migrou junto
   com o pedido de dar o maior foco ao CTA. O rodapé também é lima, mas fecha
   a página, não compete.

   Nenhuma seção é navy. O escuro aparece duas vezes, sempre CONTIDO numa
   forma: o bloco do "Hoje" na linha do tempo e o cartão da ambição no ato 4.

   UM TRATAMENTO POR SEÇÃO, e essa é a decisão central do layout:
     ato 1          grade editorial   argumento puro, não pede ilustração
     produto        lima + base curva a seção de maior peso; só título e CTA
     linha do tempo subgrid centrado   o único texto com estrutura temporal
     ato 4          dois cartões      visão, com a ambição isolada no escuro
   =============================================================== */

/* ---------- Hero ----------
   Um bloco tipográfico só: eyebrow + h1, e nada mais. As duas frases
   ("A burocracia não é o trabalho." / "Ela só ocupa o lugar dele.") eram
   h1 + linha de apoio em itálico, e agora são o mesmo h1. A segunda frase
   nunca foi subtítulo: ela é a virada da primeira, e separá-las em dois
   tamanhos fazia a página abrir com duas vozes em vez de uma. */
.sobre-hero { position: relative; overflow: hidden; padding: 140px 0 160px; }
.sobre-hero__inner {
  position: relative; z-index: 1;
  max-width: 1000px; margin: 0 auto; padding: 0 24px;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 28px;
}
/* Pílula lima com texto navy, e não texto lima solto. Em fundo claro a lima
   não tem contraste para ser cor de texto (regra da marca): o destaque vem
   de preencher uma forma e pôr o escuro por cima. */
.sobre-hero__eyebrow {
  display: inline-block; padding: 7px 16px; border-radius: var(--pill);
  background: var(--lima); color: var(--heading);
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}
.sobre-hero h1 {
  font-size: clamp(38px, 6.2vw, 68px); line-height: 1.06;
  letter-spacing: -.025em; color: #171717; text-wrap: balance;
}

/* A esfera. Um círculo grande logo abaixo do texto, cortado pelo
   `overflow: hidden` da seção . o que sobra é o arco.
   Duas camadas num `background` só: um halo lima na coroa (onde ela encosta
   no texto) e a esfera branca por baixo, que dissolve nas bordas. É a única
   forma de dar volume aqui sem imagem: a página não tem foto nenhuma, e a
   home resolve isso com WebGL (`grainient.js`), dependência que não se
   justifica para um enfeite de hero. */
.sobre-hero::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 68%; transform: translateX(-50%);
  width: min(1180px, 135vw); aspect-ratio: 1; border-radius: 50%;
  /* A esfera é LIMA (`--lima`, #e9ff81), a pedido em 21/09/2026. Antes era
     offwhite/600 (#d8d4ca) com só um calor lima na coroa: um arco neutro,
     dois degraus abaixo do fundo. Agora o acento da marca é a própria forma.

     A curva de dissolução é a mesma: cheio até 74% do raio, meio tom em 89%
     e transparente na borda . é ela que faz a esfera virar um arco difuso em
     vez de um disco recortado.

     A 40% DE OPACIDADE, e não em lima cheia. Em cima de `--bg` (#f7f5f0) a
     lima cheia virava um segundo campo de cor no topo da página e competia
     com o h1 e com a pílula "Sobre a Lugui", que são lima de verdade. A 40%
     a cor continua sendo reconhecível como lima e volta a ser atmosfera. Os
     degraus seguintes acompanham a mesma proporção (.45 -> .18). */
  background:
    radial-gradient(closest-side,
      rgba(233, 255, 129, .4) 0%, rgba(233, 255, 129, .4) 74%,
      rgba(233, 255, 129, .18) 89%, rgba(233, 255, 129, 0) 100%);
}

/* ---------- Grade editorial ----------
   Duas colunas: o título fica à esquerda, grudado no topo enquanto o texto
   rola ao lado. Abaixo de 860px vira uma coluna só e o `position: sticky`
   é desligado (num empilhamento vertical ele prenderia o título no meio
   da tela sem motivo).

   Sobrou só o ato 1. Os atos 2, 3 e 4 tinham esta mesma grade e ganharam
   tratamento próprio em 16/09/2026 (`.hoje`, `.historia`, `.futuro`) porque
   a repetição do mesmo layout quatro vezes seguidas era o que fazia a página
   parecer um documento. Mantida para o ato 1, que é o único texto puramente
   argumentativo da página e não pede ilustração. */
/* Seção reta, sem raio e sem sobreposição. O `padding-bottom` é bem maior que
   o de cima (208 contra 128) e isso NÃO é desequilíbrio: é o espaço em branco
   onde o bloco de produto sobe e se sobrepõe. Mexer neste número sem mexer no
   `margin-top` de `.produto__bloco` desalinha os dois. */
.ato { padding: 128px 0; }
.ato--claro { background: var(--surface); padding-bottom: 208px; }
.ato__grid {
  max-width: var(--content); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 64px;
}
.ato__titulo { position: sticky; top: 104px; align-self: start; }
.ato__titulo h2 {
  font-size: clamp(30px, 3.6vw, 42px); line-height: 1.1;
  letter-spacing: -.02em; color: var(--heading);
}
.ato__prosa { display: flex; flex-direction: column; gap: 20px; max-width: 620px; }
/* Corpo de 16px, o tamanho base do `body` . e não os 20px de texto-lead que
   as outras seções usam. Este é o único ato que é argumento corrido, com dois
   parágrafos longos e nenhuma ilustração ao lado; em 20px ele virava um
   paredão. O `max-width` acompanhou (680 -> 620) para a linha não passar de
   ~75 caracteres. */
.ato__prosa p { font-size: 16px; line-height: 1.65; color: var(--body); }

/* Grifo lima atrás de um número. Regra da marca: em fundo claro a lima é
   preenchimento com texto escuro por cima, nunca cor de texto . por isso a
   palavra fica navy e a lima entra atrás. O `box-decoration-break` mantém o
   realce inteiro quando a frase quebra de linha. */
.grifo {
  background: var(--lima); color: var(--heading); font-weight: 500;
  padding: 2px 6px; border-radius: 4px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* ---------- Bloco de produto (CTA em destaque) ----------
   Substituiu o ato 2 ("O que a Lugui faz hoje", mockup de iPhone + lista de
   quatro etapas) em 18/09/2026. O CSS daquele bloco . `.hoje`, `.etapas`,
   `.fone`, `.zap__*` e a citação `.punch` . foi apagado junto; se precisar
   de volta, está no histórico do git.

   ESTA É A SEÇÃO DE MAIOR PESO DA PÁGINA, e tudo aqui serve a isso:
     . a lima saiu da linha do tempo e veio para cá, então é o único campo de
       cor cheia do corpo da página (o rodapé também é lima, mas fecha);
     . o conteúdo é só título e botão, sem prosa em volta . o CTA não é um
       botão dentro de um bloco de texto, ele é o bloco;
     . o bloco é arredondado nos QUATRO cantos e recuado das bordas, então
       não é mais uma faixa: é um objeto pousado na página, e é daí que vem
       o destaque em relação às faixas retas em volta.

   A seção é só o respiro; quem tem cor e raio é `.produto__bloco`. Separar os
   dois é o que permite o recuo lateral . com a cor na própria <section>, ela
   iria de borda a borda e os cantos não teriam onde aparecer.
   Mesma estrutura do `.cta`/`.cta__card` em base.css.

   O BLOCO SOBE 128px e se sobrepõe ao ato 1, usando o `padding-bottom: 208px`
   que aquela seção reserva. Quem sobe é o BLOCO, não a seção: com a margem
   negativa na `<section>`, o fundo dela viria junto e taparia o branco do ato
   1 em toda a largura, em vez de deixar só o bloco por cima.
   Por isso a seção também não tem fundo próprio . o `--bg` que aparece em
   volta do bloco é o do `body`. Se ela tivesse fundo, ele começaria na borda
   de cima da seção e cortaria o branco do ato 1 numa linha reta.
   O `z-index` mantém o bloco acima do ato 1 na ordem de pintura. */
.produto { padding: 0 24px 96px; }
.produto__bloco {
  position: relative; z-index: 1;
  max-width: 1236px; margin: -128px auto 0;
  background: var(--lima); border-radius: var(--radius-curva);
  padding: 116px 40px; text-align: center;
}
/* Mesma escala dos outros títulos de seção da página (`.ato__titulo h2`,
   `.historia__head h2`, `.news__head h2`): clamp(30px, 3.6vw, 42px), altura
   de linha 1.1 e tracking -.02em. Ele era maior (34-58px, o tamanho de uma
   manchete de hero) e virava um segundo h1 no meio da rolagem . o destaque
   desta seção já vem do campo lima e da forma arredondada, não do corpo da
   letra. */
.produto h2 {
  max-width: 800px; margin: 0 auto;
  font-size: clamp(30px, 3.6vw, 42px); line-height: 1.1;
  letter-spacing: -.02em; color: var(--navy); text-wrap: balance;
}
/* Botão branco, e não o `.btn--primary` lima de base.css: em cima de lima ele
   desapareceria. Maior que os botões do site (o CTA é o protagonista aqui) e
   sem contorno . o branco já se separa da lima sozinho.

   SEM SOMBRA. Ela dava ao botão um plano próprio, como se flutuasse acima do
   bloco; sem ela os dois ficam no mesmo plano e o desenho fica mais limpo.
   Como o `translateY` do hover dependia da sombra para ler como elevação, o
   hover virou mudança de cor: branco -> offwhite-50. */
.produto__cta {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 40px; padding: 21px 48px; border-radius: var(--pill);
  background: var(--white); color: var(--heading);
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  transition: background var(--t);
}
.produto__cta:hover { background: #fbf8f0; }
.produto__cta:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(2, 21, 43, .35); }

/* ---------- Ato 3: linha do tempo ----------
   Sem cartões: os marcos ficam soltos sobre o fundo, com um fio horizontal e
   três pontos. É o tratamento mais tipográfico da página, que é o que a marca
   pede (tipografia como protagonista, cor como acento).

   FUNDO LIMA. É a seção de color-blocking da página . lima como campo cheio
   com texto escuro por cima, que é exatamente o uso que a marca prescreve, e
   o mesmo princípio do rodapé. Com ela, o ritmo da página vira uma escalada:
   claro, claro, LIMA, NAVY, claro.

   Dois efeitos colaterais de trocar branco por lima, tratados abaixo:
     . o grifo lima saiu do "R$ 40 milhões" (lima sobre lima não existe);
     . o fio deixou de ser `--lima-border` e virou navy translúcido, que é o
       que enxerga sobre lima. */
.historia { background: var(--bg); padding: 96px 0; }
.historia__head { max-width: var(--content); margin: 0 auto 72px; padding: 0 24px; text-align: center; }
.historia__head h2 {
  font-size: clamp(30px, 3.6vw, 42px); line-height: 1.1;
  letter-spacing: -.02em; color: var(--heading);
}
/* Sobre lima, o cinza `--body` (#595959) fica fraco. O texto desta seção usa
   navy translúcido: mesma família do título, sem o peso de um preto cheio. */
.historia__lead { font-size: 16px; line-height: 1.65; color: rgba(2, 21, 43, .72); max-width: 560px; margin: 16px auto 0; }

/* SUBGRID, e não três colunas independentes.
   O título do "Hoje" ("100+ imobiliárias") quebra em duas linhas enquanto
   "Fundação" cabe em uma. Com colunas independentes, cada marco empilha do
   seu jeito e a descrição do "Hoje" desce sozinha, desalinhada das outras
   duas. Com `grid-template-rows: subgrid`, as três faixas (quando, título,
   descrição) são as MESMAS linhas para os três marcos: a mais alta manda, e
   tudo alinha, não importa quantas linhas cada título ocupe.

   O `padding-top: 40px` que abria espaço para o ponto saiu do marco e veio
   para cá: padding num item subgrid deslocaria as linhas dele em relação às
   dos irmãos, que é exatamente o que estamos evitando. */
.linha {
  position: relative; max-width: var(--content); margin: 0 auto; padding: 40px 24px 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  column-gap: 40px; row-gap: 0;
  list-style: none;
}
/* Tudo centralizado: o ponto no meio da coluna, o texto centrado embaixo. */
.marco {
  position: relative; grid-row: span 3;
  display: grid; grid-template-rows: subgrid;
  justify-items: center; text-align: center;
}
/* O ponto, agora acima do marco (o respiro subiu para `.linha`).
   `z-index: 1` para ficar acima do fio e o fio não cortar o miolo. */
.marco::before {
  content: ''; position: absolute; top: -40px; left: 50%; transform: translateX(-50%); z-index: 1;
  width: 11px; height: 11px; border-radius: 50%; background: var(--navy);
}
/* O fio é um segmento POR MARCO, do centro do próprio ponto até o centro do
   ponto seguinte, e o último não tem nenhum . por isso `:not(:last-child)`.
   A alternativa era um fio só, atravessando a lista inteira, mas ele não tem
   como saber onde fica o último ponto: terminava na borda do container e
   sobrava um traço solto de uns 350px depois de "Hoje", com cara de linha
   inacabada.
   Com os pontos centrados, o segmento vai de 50% desta coluna até 50% da
   próxima: `calc(-50% - 40px)` é meia coluna mais o `gap` da grade. Se o gap
   mudar, muda aqui. */
.marco:not(:last-child)::after {
  content: ''; position: absolute; top: -35px; left: 50%; right: calc(-50% - 40px);
  height: 1px; background: rgba(2, 21, 43, .22);
}
.marco__quando {
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(2, 21, 43, .55);
}
.marco__titulo {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 3.2vw, 38px); line-height: 1.1;
  color: var(--navy); margin: 12px 0;
}
.marco__desc { font-size: 16px; line-height: 1.5; color: rgba(2, 21, 43, .72); max-width: 300px; }

/* O DESTAQUE DO "HOJE".
   Em fundo lima o grifo não existe mais (lima sobre lima), então o destaque
   inverte: bloco NAVY com o número em LIMA por cima. É o mesmo princípio do
   grifo, de cabeça para baixo, e é o uso que a marca autoriza . sobre fundo
   escuro a lima pode ser o próprio texto.

   O bloco fica só no título, não no marco inteiro: um cartão em volta dos
   três elementos desalinharia as linhas de base das outras duas colunas, e
   o ponto sobre o fio deixaria de tocar o cartão.

   Com o conteúdo centralizado o bloco não precisa de margem negativa: ele
   sangra igual para os dois lados, que é o comportamento certo aqui. */
.marco--hoje .marco__titulo {
  background: var(--navy); color: var(--lima);
  padding: 10px 18px; border-radius: var(--radius-card);
}
.marco--hoje .marco__quando { color: var(--navy); }
.marco--hoje::before { box-shadow: 0 0 0 4px rgba(2, 21, 43, .16); }

/* O tratamento de marco em placeholder (`.marco--vazio`: ponto vazado e
   título tracejado) saiu em 21/09/2026, quando o marco 2 ganhou texto. Se um
   dia entrar outro marco sem conteúdo, ele está no histórico do git. */

/* ---------- Ato 4: onde queremos chegar ----------
   Seção de FUNDO CLARO, com o conteúdo dentro de dois cartões lado a lado.
   Era uma faixa navy de ponta a ponta com a manchete solta; virou isto para
   ganhar estrutura, e porque a página já tinha peso escuro suficiente com o
   bloco "Hoje" da linha do tempo logo acima.

   O cartão da direita é navy: a seção continua clara, e o escuro fica contido
   numa forma, não na faixa inteira. Ele é o foco da seção . a frase da
   ambição, que antes se perdia no meio do segundo parágrafo.

   A referência tem foto no lado direito. Esta página não tem foto nenhuma, e
   foto de banco de imagem seria pior que texto: o lugar da foto virou o
   cartão da declaração. */
.futuro { background: var(--surface); padding: 112px 0; }
.futuro__inner {
  max-width: var(--content); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 24px;
  align-items: stretch;
}
.futuro__card {
  background: var(--bg); border-radius: var(--radius-xl);
  padding: 56px 48px; display: flex; flex-direction: column;
}
.futuro__eyebrow {
  display: block; font-family: var(--font-display); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px;
}
/* Título em dois pesos: 400 na frase, 700 no trecho que importa. A referência
   faz isso com cinza + preto, mas aqui a cor é a MESMA nos dois . `--muted`
   (#82807a) é offwhite/800, o tom de legenda e metadado deste sistema, e não
   é tom de título. Quem cria a hierarquia é só o peso. */
.futuro h2 {
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; letter-spacing: -.02em;
  font-weight: 400; color: var(--heading); margin-bottom: 32px;
}
.futuro h2 b { font-weight: 700; }
.futuro__prosa { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.futuro__prosa p { font-size: 16px; line-height: 1.65; color: var(--body); }

/* O cartão da declaração. Navy com a frase em branco e o trecho decisivo em
   lima . sobre fundo escuro a lima pode ser o próprio texto, que é a única
   situação em que a marca autoriza isso. */
.futuro__decl {
  background: var(--navy); border-radius: var(--radius-xl);
  padding: 56px 44px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
}
.futuro__decl-label {
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5);
}
.futuro__decl-txt {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(24px, 2.8vw, 32px); line-height: 1.2; color: var(--white);
}
.futuro__decl-txt em { font-style: normal; color: var(--lima); }

/* ---------- Na mídia ----------
   QUATRO matérias desde 21/09/2026, empilhadas numa lista de cartões largos.

   A nota antiga aqui dizia que, com a segunda matéria, isto viraria uma grade
   de cartões (`repeat(auto-fit, minmax(300px, 1fr))`). Não virou: as manchetes
   de imprensa têm 8 a 14 palavras, e numa coluna de ~280px elas ocupam quatro
   ou cinco linhas cada. O cartão largo já resolvido . veículo | manchete |
   seta, tudo numa linha só . lê como uma lista de imprensa, cresce sem
   quebrar e não precisa de um número par de itens para fechar a grade. */
.news { background: var(--bg); padding: 96px 0 112px; }
.news__head { max-width: var(--content); margin: 0 auto 40px; padding: 0 24px; }
.news__head h2 {
  font-size: clamp(30px, 3.6vw, 42px); line-height: 1.1;
  letter-spacing: -.02em; color: var(--heading); margin-bottom: 12px;
}
.news__head p { font-size: 16px; line-height: 1.65; color: var(--body); max-width: 560px; }
.news__lista {
  max-width: var(--content); margin: 0 auto; padding: 0 24px;
  display: grid; gap: 16px;
}
.news__item {
  background: var(--surface); border-radius: var(--radius-lg);
  padding: 36px 40px;
  display: grid; grid-template-columns: 168px minmax(0, 1fr) auto;
  gap: 40px; align-items: center;
  transition: background var(--t), transform .12s ease;
}
.news__item:hover { background: var(--offwhite-100); transform: translateY(-2px); }
.news__item:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(2,21,43,.22); }
/* O NOME DO VEÍCULO EM TEXTO, e não o logo dele.
   Até 21/09/2026 havia uma matéria só e ela trazia o logo da Exame em webp.
   Com quatro veículos seriam quatro arquivos, cada um com peso, proporção e
   cor próprios . uma fileira visualmente desigual, e três logos de terceiros
   para hospedar e manter. O nome em maiúsculas pequenas usa a tipografia da
   marca, alinha os quatro na mesma linha de base e não depende de asset.
   O `assets/v1/news-exame.webp` que servia ao cartão antigo saiu do repo
   junto: asset sem uso vira dúvida na próxima leitura. Se um dia os logos
   voltarem, são quatro arquivos novos e uma decisão nova. */
.news__veiculo {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--heading);
}
/* `display: block` nos dois: o cartão inteiro é um <a>, então título e meta
   são <span> (um <a> não pode conter <p>/<h3> em HTML válido). Sem isto eles
   ficam inline e a data emenda na mesma linha do título, e o `margin-top`
   do meta é silenciosamente ignorado. */
.news__title { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 500; line-height: 1.3; color: var(--heading); }
.news__meta { display: block; font-size: 14px; color: var(--muted); margin-top: 8px; }
/* A seta é decorativa: quem usa leitor de tela já sabe que é um link, e o
   destino está no texto do próprio link. Daí o `aria-hidden` no HTML. */
.news__seta {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  background: var(--lima); color: var(--heading);
  display: grid; place-items: center; font-size: 17px;
  transition: transform var(--t);
}
.news__item:hover .news__seta { transform: translateX(3px); }

/* A coluna "Navegar" do rodapé é usada pelas duas páginas, então o CSS dela
   mora em base.css, junto com o resto do rodapé. */

/* ---------- Responsivo ---------- */
@media (max-width: 860px) {
  .ato { padding: 80px 0; }
  .ato--claro { padding-bottom: 136px; }
  .ato__grid { grid-template-columns: 1fr; gap: 24px; }
  .ato__titulo { position: static; }
  .sobre-hero { padding: 80px 0 100px; }
  .sobre-hero__inner { gap: 20px; }
  /* A esfera sobe e encolhe: com o h1 ocupando mais linhas em tela estreita,
     manter `top: 68%` jogaria o arco para fora do recorte da seção. */
  .sobre-hero::after { top: 60%; width: 150vw; }

  /* O raio cai junto com a altura do bloco: 72px numa faixa de 300px de
     altura comeria quase metade dela. A subida cai para 80px, casando com o
     `padding-bottom: 136px` do ato 1 nesta faixa. */
  .produto { padding: 0 16px 56px; }
  .produto__bloco { margin-top: -80px; padding: 72px 24px; border-radius: 40px; }
  .produto__cta { margin-top: 32px; padding: 18px 40px; }

  /* Ato 4: os dois cartões empilham. O padding cai junto, senão sobra mais
     moldura do que texto em tela estreita. */
  .futuro { padding: 72px 0; }
  .futuro__inner { grid-template-columns: 1fr; }
  .futuro__card, .futuro__decl { padding: 40px 28px; }
  .futuro h2 { margin-bottom: 24px; }

  /* Linha do tempo na vertical. Três marcos lado a lado abaixo de 860px
     dariam ~250px de coluna, e "100+ imobiliárias" quebraria em três linhas.
     Na vertical o fio vira um trilho à esquerda e cada marco recua para
     abrir espaço para ele. */
  .historia { padding: 64px 0; }
  .historia__head { margin-bottom: 48px; }
  /* Empilhado e ainda centralizado. O trilho vertical à esquerda saiu junto
     com o alinhamento à esquerda: com o texto centrado, um fio correndo pela
     margem ficaria órfão, e um fio pelo meio passaria por trás das palavras.
     No lugar dele, um tique curto de 24px no vão entre um marco e o outro:
     conecta sem atravessar nada. */
  /* Empilhado, o subgrid deixa de servir: não há colunas irmãs para alinhar,
     e cada marco volta a ser uma pilha simples. */
  .linha { grid-template-columns: 1fr; grid-template-rows: none; padding-top: 0; }
  .marco { grid-row: auto; display: flex; flex-direction: column; align-items: center; padding: 40px 0 44px; }
  .marco:last-child { padding-bottom: 0; }
  .marco::before { top: 0; }
  .marco:not(:last-child)::after {
    top: auto; bottom: 10px; left: 50%; right: auto;
    transform: translateX(-50%); width: 1px; height: 24px;
  }
  .marco__titulo { margin: 8px 0; }
  .marco--hoje .marco__titulo { padding: 8px 14px; }
  .marco__desc { max-width: 340px; }

  /* O cartão da matéria empilha: nome do veículo em cima, manchete embaixo.
     A seta sai . numa coluna só ela ficaria sozinha no fim do bloco, e o
     cartão inteiro já é o link. */
  .news { padding: 64px 0 80px; }
  .news__item { grid-template-columns: 1fr; gap: 20px; padding: 28px; }
  .news__seta { display: none; }
  .news__title { font-size: 18px; }
}