/* ===========================================================
   SOBRE — "Hey!"
   Fundo permanece --black; nenhuma superfície clara.
   =========================================================== */
.about{
  position:relative;
  background:var(--bg);
  padding:140px 20px 220px;
}

.about__grid{
  /* o bloco inteiro entra de uma vez, então ganha mais tempo que um
     elemento solto — senão a entrada passa despercebida */
  --fx-dur:2.1s;

  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  max-width:1240px;
  margin-inline:auto;
}

.about__title{
  font-size:clamp(44px,8vw,72px);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1;
  color:var(--cream);
  margin-bottom:28px;
}

.about__lead{
  font-size:clamp(16px,2.4vw,18px);
  font-weight:600;
  letter-spacing:-0.04em;
  line-height:1.4;
  color:var(--cream);
  max-width:36ch;
}

/* "Sou o João." é uma linha solta antes do bloco — respiro entre as duas */
.about__lead + .about__lead{margin-top:18px;}

.about__body p{
  font-size:16px;
  font-weight:300;
  letter-spacing:-0.04em;
  line-height:1.5;
  color:var(--cream-50);
  max-width:42ch;
  margin-bottom:20px;
}

/* o CTA virou componente compartilhado: styles/cta.css */

/* -----------------------------------------------------------
   SLOT DA FOTO — mesma lógica do slot da hero: caixa invisível
   que diz onde o #morphCard tem que terminar.
   Mesma proporção (5/6) do slot inicial, pra viagem ser uma
   escala uniforme e a foto nunca distorcer.
   ----------------------------------------------------------- */
.about__slot{
  position:relative;   /* âncora do card quando ele estaciona aqui dentro */
  width:100%;
  max-width:300px;
  aspect-ratio:5/6;
  justify-self:center;
  visibility:hidden;
}

@media (max-width:767px){
  /* No celular a foto pousa antes da copy. Assim o percurso termina sem
     atravessar as linhas e a leitura vira: imagem, apresentação, detalhes. */
  .about__slot{order:1;max-width:min(78vw,300px);margin-bottom:8px;}
  .about__col--left{order:2;}
  .about__body{order:3;}
  .about__grid{gap:34px;}
}

@media (min-width:768px){
  .about{padding:180px 40px 260px;}
  .about__grid{
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:48px;
  }
  .about__col--left{align-self:center;}
  .about__slot{width:clamp(240px,26vw,300px);max-width:none;}
  .about__body{align-self:end;}
}

@media (min-width:1024px){
  .about{padding:200px 5vw 320px;}
  .about__grid{gap:64px;}
}