/* ==================================================================
   06 · FPILOTO: artigo com citacao  (widget fp-sobre)

   Copiado do lab (lab/especialista/secoes/fpiloto/fpiloto.css), que fica
   congelado como referencia aprovada. As classes continuam .fpiloto.

   Navy. A secao "sobre", em tom de texto: o H2 a esquerda, os paragrafos
   numa coluna de leitura deslocada, e o destaque saindo do texto na largura
   toda, entre dois fios. Fecha com as duas frases do fechamento, uma por
   linha, espelhando as duas frases do H2 (experiencia, proximidade).
   Nenhuma outra secao do site tem citacao; aqui nao ha grade nem espelho.
   ================================================================== */

.fpiloto{
  position:relative;
  background:var(--navy);
  color:var(--paper);
  padding-block:clamp(6rem,15vh,11rem);
}
.fpiloto__caixa{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gutter);
}

.fpiloto__h2{
  grid-column:1 / span 10;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(2.5rem,5vw,5.5rem);
  line-height:.94;
  letter-spacing:-.04em;
}
/* Uma frase por bloco, cada uma equilibrada sozinha: no celular, com uma
   quebra <br> simples, "faz." e "projeto" sobravam sozinhas na linha. */
.fpiloto__h2 span{display:block;text-wrap:balance}

/* Coluna de leitura: da coluna 5 a 11. */
.fpiloto__textos{
  grid-column:5 / span 7;
  display:grid;
  gap:1em;
  max-width:52ch;
  margin-top:clamp(2.5rem,6vh,4rem);
  font-size:var(--t-lead);
  line-height:1.5;
  color:var(--fg-2);
  text-wrap:pretty;
}

/* O destaque: largura toda, entre dois fios desenhados na entrada. */
.fpiloto__faixa{
  position:relative;
  grid-column:1 / -1;
  margin-top:clamp(3.5rem,9vh,6rem);
  padding-block:clamp(2rem,5vh,3.5rem);
}
.fpiloto__faixa::before,.fpiloto__faixa::after{
  content:'';
  position:absolute;
  left:0;right:0;
  height:1px;
  background:var(--rule-dark-strong);
  transform-origin:left;
}
.fpiloto__faixa::before{top:0;transform:scaleX(var(--fio-a,1))}
.fpiloto__faixa::after{bottom:0;transform:scaleX(var(--fio-b,1))}
.fpiloto__destaque{
  max-width:16em;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(2.25rem,4.6vw,5rem);
  line-height:.98;
  letter-spacing:-.035em;
  color:var(--paper);
  text-wrap:balance;
}
/* Linhas do destaque, quando separadas pelo JS para subirem de uma fenda.
   O respiro embaixo guarda o descendente (p, ç) que a fenda cortaria. */
.fpiloto__linha{display:block;overflow:clip;padding-bottom:.14em;margin-bottom:-.14em}
.fpiloto__linha-in{display:block}

.fpiloto__textos--fim{margin-top:clamp(2.5rem,6vh,4rem)}

.fpiloto__fechamento{
  grid-column:5 / -1;
  margin-top:clamp(2rem,5vh,3rem);
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.25rem,1.9vw,2rem);
  line-height:1.3;
  letter-spacing:-.012em;
  color:var(--paper);
  text-wrap:balance;
}
.fpiloto__fechamento span{display:block}

@media (max-width:1099.98px){
  .fpiloto{padding-block:clamp(4.5rem,14vw,7rem)}
  .fpiloto__caixa{grid-template-columns:minmax(0,1fr)}
  .fpiloto__h2,.fpiloto__textos,.fpiloto__faixa,.fpiloto__fechamento{grid-column:1}
  .fpiloto__h2{font-size:clamp(2.25rem,9.5vw,4rem)}
  .fpiloto__destaque{font-size:clamp(2rem,9vw,3.25rem)}
  .fpiloto__faixa{margin-top:clamp(2.5rem,10vw,3.5rem)}
  .fpiloto__fechamento{font-size:clamp(1.25rem,5.4vw,1.625rem)}
  .fpiloto__fechamento span{display:inline}
}