/* =========================================================
   B2 Rocket Layout — Distribuidora Paris
   sobre.css: abertura, objetivo, linha do tempo e chamada final.

   Os componentes são os mesmos da home — título com marcador, rótulo, botão,
   faixa de marcas. O arranjo é outro de propósito: quem chega aqui vindo da
   home precisa sentir que mudou de página.
   ========================================================= */

/* ---------- abertura ---------- */
/* A foto é quadrada e avança sobre um bloco azul deslocado. Esse desencontro
   proposital entre a foto e o bloco é o que dá profundidade sem sombra. */

.brl-abertura{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  column-gap:clamp(40px, 5vw, 88px);
  align-items:center;
  max-width:var(--paris-larg);
  margin:0 auto;
  padding:clamp(56px, 6vw, 96px) var(--paris-pad) 0;
}
.brl-abertura-foto{position:relative}
.brl-abertura-foto::before{
  content:"";
  position:absolute;
  left:-28px;bottom:-28px;
  width:62%;height:62%;
  background:var(--paris-azul);
  z-index:0;
}
.brl-abertura-foto img{
  position:relative;z-index:1;
  width:100%;height:auto;display:block;
}
.brl-abertura-texto .brl-titulo{margin-top:20px}
.brl-abertura-texto p:not([class]){
  margin:20px 0 0;
  font-size:17px;line-height:1.8;color:var(--paris-tinta-2);
}
.brl-abertura-texto .brl-titulo + p:not([class]){margin-top:34px}

/* ---------- nosso objetivo ---------- */

.brl-objetivo{
  max-width:var(--paris-larg);
  margin:clamp(72px, 7vw, 120px) auto 0;
  padding:0 var(--paris-pad);
}
.brl-objetivo-cabeca{text-align:center}
.brl-objetivo-grade{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(40px, 4.5vw, 72px);
  margin-top:58px;
}
.brl-objetivo-lado{display:grid;gap:40px;align-content:start}
.brl-objetivo h3{
  margin:0 0 14px;
  font-size:var(--rotulo-corpo);
  font-weight:var(--rotulo-peso);
  letter-spacing:var(--rotulo-espaco);
  text-transform:uppercase;
  color:var(--paris-azul);
  padding-left:var(--rotulo-espaco);
}
.brl-objetivo p{
  margin:0 0 16px;
  font-size:17px;line-height:1.8;color:var(--paris-tinta-2);
}
.brl-objetivo p:last-child{margin-bottom:0}

.brl-valores{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.brl-valores li{
  position:relative;
  padding-left:26px;
  font-size:17px;line-height:1.6;color:var(--paris-tinta-2);
}
/* Traço reto no lugar do ponto: é a mesma linguagem do resto do site. */
.brl-valores li::before{
  content:"";
  position:absolute;left:0;top:.72em;
  width:14px;height:1px;
  background:var(--paris-vermelho);
}

/* ---------- linha do tempo ---------- */
/* Vertical, e por um motivo só: são doze marcos. Na horizontal cada um ficaria
   com cerca de 95px de largura no container de 1200px, e "Convenção Paris
   Distribuidora · São Paulo" quebraria em seis linhas. A horizontal servia bem
   aos sete marcos antigos; não serve a doze.

   O vocabulário é o mesmo do fluxo da home: círculo com anel concêntrico,
   haste, ano DENTRO do círculo. O que mudou é o eixo.

   Três regras de montagem que não são detalhe:

   1. Todo marco tem a MESMA altura. A linha do tempo não desenha a distância
      entre os anos — 1993 para 1997 ocupa o mesmo que 2024 para 2025. Quem
      tenta mapear o intervalo real acaba com um gráfico ilegível no começo e
      espremido no fim.
   2. O texto e o ano ficam na MESMA faixa, lado a lado. Os dois são grid-row:1
      explícito; sem isso o item da coluna 1 cai para uma segunda fileira (o
      cursor de posicionamento automático já passou dela) e o texto desce meia
      altura em relação ao seu próprio círculo.
   3. Nada depende de rolagem. A linha inteira já nasce acesa e a vida vem da
      onda em looping descrita lá embaixo. */

/* A seção da história usa a medida de GRADE (1380px), não a de texto (1200px).
   O common.css já separa as duas: texto tem teto de legibilidade por volta de
   70 caracteres e os 1200 chegam lá; grade não tem esse limite e sufoca na
   mesma medida. A linha do tempo é grade — duas colunas de texto curto ao lado
   de um eixo —, então pertence à medida maior. Isso devolve cerca de 160px a
   cada coluna de texto. */
.brl-historia{
  max-width:var(--paris-larg-grade);
  margin:clamp(72px, 7vw, 120px) auto 0;
  padding:0 var(--paris-pad);
}
/* O cabeçalho continua na medida de texto, centrado dentro da seção larga: é
   título e rótulo, não grade. */
.brl-historia-cabeca{
  max-width:var(--paris-larg);
  margin:0 auto;
  text-align:center;
}

.brl-linha-caixa{margin-top:clamp(40px, 4vw, 60px)}
.brl-linha{
  position:relative;
  list-style:none;
  margin:0 auto;
  padding:0;

  /* Duração do ciclo inteiro da onda. Mudar aqui muda a linha toda. */
  --onda:6s;
}

.brl-linha li{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 88px minmax(0,1fr);
  grid-template-rows:auto;
  align-items:center;
  min-height:124px;

  /* --ordem e --total vêm do template, contando TODAS as fileiras, placas de
     fase incluídas. É por isso que a onda atravessa as placas na mesma
     velocidade em vez de dar um salto ao passar por elas. */
  --atraso:calc(var(--onda) * var(--ordem) / var(--total) * .62);
}

/* ---- a haste ---- */

.brl-linha-haste{
  position:absolute;
  top:0;bottom:0;left:50%;
  width:2px;margin-left:-1px;
  background:var(--paris-linha);
}
/* No primeiro e no último item a haste nasce e morre no próprio marco —
   nada de traço sobrando para fora da história. */
.brl-linha li:first-child .brl-linha-haste{top:50%}
.brl-linha li:last-child  .brl-linha-haste{bottom:50%}

.brl-linha-avanco{
  position:absolute;inset:0;
  background:var(--paris-vermelho);
}

/* ---- o nó ---- */
/* Anel por fora, círculo por dentro, como no fluxo da home. O disco branco do
   nó interrompe a haste: sem ele, o traço cruzaria o anel por dentro. */

.brl-linha-no{
  grid-column:2;
  grid-row:1;
  justify-self:center;
  position:relative;
  width:72px;height:72px;
  display:flex;align-items:center;justify-content:center;
  background:var(--paris-branco);
  border-radius:50%;
  z-index:1;
}
.brl-linha-anel{
  position:absolute;inset:0;
  border:1px solid var(--paris-vermelho);
  border-radius:50%;
  opacity:0;
}
.brl-linha-bolha{
  position:relative;
  width:58px;height:58px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--paris-azul);
  border:1.5px solid var(--paris-azul);
  font-family:var(--fonte-titulo);
  font-size:18px;font-weight:600;line-height:1;
  letter-spacing:.01em;
  color:var(--paris-branco);
}

/* ---- o texto ---- */
/* A primeira linha é o FATO: é ela que a pessoa lê ao passar o olho. Sai na
   SEM-SERIFA, fina e grande — 25px no peso 300. A serifada dos títulos é
   desenhada para a linha de três ou quatro palavras de um título; em frase
   corrida de doze marcos, com modulação de traço grosso e fino em corpo médio,
   ela atrasa a leitura. Peso 300 pede corpo grande: fina e pequena some.

   As linhas seguintes são complemento e ficam menores, mais claras e um peso
   acima — o contraste entre as duas vem de corpo e peso, não de trocar de
   família. A serifada continua só no ano, dentro do círculo, onde é rótulo de
   três ou quatro algarismos, não texto de leitura. */

.brl-linha-info{
  grid-row:1;
  padding:0 clamp(16px, 1.8vw, 28px);
}
.brl-linha li.e-esq .brl-linha-info{grid-column:1;text-align:right}
.brl-linha li.e-dir .brl-linha-info{grid-column:3;text-align:left}

.brl-linha-fato{
  display:block;
  font-family:var(--fonte-texto);
  font-size:25px;
  font-weight:300;
  line-height:1.34;
  letter-spacing:-.012em;
  color:var(--paris-azul);
  /* Equilibra as linhas em vez de encher a primeira e largar uma palavra órfã
     na segunda. O navegador que não conhecer a propriedade quebra como antes;
     não há perda. */
  text-wrap:balance;
}
.brl-linha-info span{
  display:block;
  font-size:17px;
  line-height:1.6;
  color:var(--paris-tinta-2);
  text-wrap:pretty;
}
.brl-linha-info span + span{margin-top:10px}
.brl-linha-info .brl-linha-fato + span{margin-top:13px}

/* ---- a placa de fase ---- */
/* Corta a história em duas eras sem cortar a linha: a haste atravessa por
   trás e a placa fica por cima, em ângulo reto, como placa de estação. */

.brl-linha-placa{
  display:grid;
  place-items:center;
  min-height:116px;
}
.brl-linha-chip{
  position:relative;
  z-index:1;
  grid-column:1 / -1;
  background:var(--paris-branco);
  border:1px solid var(--paris-linha-forte);
  padding:13px 26px;
  text-align:center;
}
.brl-linha-chip b{
  display:block;
  font-size:12px;
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--paris-vermelho);
  padding-left:.26em;
}
.brl-linha-chip span{
  display:block;
  margin-top:7px;
  font-size:14px;
  line-height:1.4;
  color:var(--paris-cinza);
}

/* ---- varejo: o círculo vazado ---- */
/* 1993 e 1997 são o fundamento, mas ainda não são a distribuidora. Contorno
   azul em vez de preenchimento azul: separa as duas eras sem inventar cor. */

.brl-linha li[data-fase="varejo"] .brl-linha-bolha{
  background:var(--paris-branco);
  border-color:var(--paris-azul);
  color:var(--paris-azul);
}

/* ---- o marco que ainda não aconteceu ---- */
/* 2027 é promessa, não fato. Haste tracejada, anel vazado e etiqueta: a página
   não pode anunciar como feito um CD que ainda vai abrir. */

.brl-linha li[data-futuro] .brl-linha-haste{
  background:transparent;
  background-image:repeating-linear-gradient(
    to bottom,
    var(--paris-linha-forte) 0 7px,
    transparent 7px 14px
  );
}
.brl-linha li[data-futuro] .brl-linha-avanco{display:none}
.brl-linha li[data-futuro] .brl-linha-bolha{
  background:var(--paris-branco);
  border-style:dashed;
  border-color:var(--paris-vermelho);
  color:var(--paris-azul);
}
.brl-linha-previsto{
  font-size:11px !important;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--paris-vermelho) !important;
  /* O vão até o fato vem do span + span logo abaixo; margem aqui dobraria. */
}

/* ---- a onda ---- */
/* Em looping, e SEMPRE de cima para baixo: cada ciclo recomeça no 1993. A onda
   percorre as fileiras em 62% do ciclo e os 38% restantes são pausa — é a
   pausa que faz a repartida no topo ser lida como recomeço, e não como um
   fluxo contínuo de bolinhas piscando.
   O atraso de cada fileira é fração da posição dela na linha, calculada em CSS
   a partir de --ordem e --total. Acrescentar ou tirar um marco não pede
   nenhum ajuste aqui.
   Só transform e opacity são animados: os dois rodam na GPU, sem recalcular
   layout, o que é o que permite doze anéis em looping sem custo de rolagem. */

.brl-linha-anel{
  animation:brl-linha-onda var(--onda) linear infinite;
  animation-delay:var(--atraso);
}
@keyframes brl-linha-onda{
  0%  {opacity:0;   transform:scale(.78)}
  5%  {opacity:.75; transform:scale(1)}
  18% {opacity:0;   transform:scale(1.34)}
  100%{opacity:0;   transform:scale(1.34)}
}

/* A bola responde junto, de leve. Mais do que isto e a linha do tempo vira
   enfeite piscando ao lado do texto. */
.brl-linha-bolha{
  animation:brl-linha-bate var(--onda) ease-out infinite;
  animation-delay:var(--atraso);
}
@keyframes brl-linha-bate{
  0%  {transform:scale(1)}
  5%  {transform:scale(1.07)}
  18% {transform:scale(1)}
  100%{transform:scale(1)}
}

/* Movimento permanente é o primeiro a sair para quem pediu menos movimento no
   sistema. A linha continua legível: o anel fica parado, discreto. */
@media (prefers-reduced-motion:reduce){
  .brl-linha-anel{animation:none;opacity:.3;transform:scale(1.12)}
  .brl-linha-bolha{animation:none}
}

/* ---------- chamada final ---------- */

.brl-chamada{
  max-width:var(--paris-larg);
  margin:clamp(72px, 7vw, 110px) auto 0;
  padding:0 var(--paris-pad);
  text-align:center;
}
.brl-chamada p{margin:36px 0 0}

/* ---------- faixa de marcas ---------- */
/* Fecha a página logo abaixo da chamada, em fundo branco: aqui ela não é uma
   seção com título, é assinatura. O cinza do fundo pertence à home, onde a
   faixa precisa se separar das seções vizinhas; aqui ela é a última coisa
   antes do rodapé e não tem de que se separar. */
.brl-marcas{
  background:var(--paris-branco);
  margin-top:clamp(56px, 5vw, 88px);
  padding-top:0;
}

/* ---------- telas menores ---------- */

@media (max-width:1100px){
  .brl-objetivo-grade{grid-template-columns:minmax(0,1fr);gap:44px}
}

@media (max-width:860px){
  .brl-abertura{
    grid-template-columns:minmax(0,1fr);
    row-gap:36px;
  }
  .brl-abertura-foto::before{left:-16px;bottom:-16px}

  /* Em tela estreita não há dois lados para alternar: a haste vai para a
     esquerda e todo o texto fica à direita dela, numa coluna só. A altura
     continua igual em todos os marcos. */
  .brl-linha li{
    grid-template-columns:58px minmax(0,1fr);
    min-height:112px;
  }
  .brl-linha-haste{left:29px}
  .brl-linha-no{
    grid-column:1;
    justify-self:start;
    width:58px;height:58px;
  }
  .brl-linha-bolha{width:48px;height:48px;font-size:16px}
  .brl-linha li.e-esq .brl-linha-info,
  .brl-linha li.e-dir .brl-linha-info{
    grid-column:2;
    text-align:left;
    padding:0 0 0 24px;
  }
  .brl-linha-fato{font-size:21px}
  .brl-linha-info span{font-size:16px}

  .brl-linha-placa{min-height:104px;justify-items:start}
  .brl-linha-chip{text-align:left;padding:12px 20px}
}