/* ==========================================================================
   Andréia Freitas — QUEM É A ANDRÉIA + TRAJETÓRIA
   Consome os tokens de system.css e reaproveita .af-wrap e o anel de pincel
   (.af-brush, definido em hero.css). Valores vindos do protótipo aprovado.
   ========================================================================== */

.af-quem{
  position:relative;
  overflow:hidden;
  padding:110px 0 120px;
  background:var(--areia);
  font-family:var(--display);
  line-height:1.2;
}

/* borboletas de contorno nas laterais — só decoração */
.af-quem__deco{
  position:absolute;
  width:420px;
  height:auto;
  fill:none;
  stroke:var(--gold);
  stroke-width:.3;
  opacity:.28;
  pointer-events:none;
}
.af-quem__deco--l{ left:-90px; top:120px; transform:rotate(-18deg); }
.af-quem__deco--r{ right:-110px; top:520px; transform:rotate(16deg) scaleX(-1); }
.af-quem .af-wrap{ position:relative; }

.af-quem__eyebrow{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  margin:0;
  color:var(--gold-text);
  font-size:13px;
  font-weight:600;
  letter-spacing:.32em;
  text-transform:uppercase;
}
.af-quem__eyebrow::before,
.af-quem__eyebrow::after{
  content:"";
  width:30px;
  height:1px;
  background:var(--gold-text);
}

/* ---------- nome grande + retrato ---------- */
.af-quem__stage{
  position:relative;
  width:min(100%, 980px);
  margin:18px auto 0;
}
.af-quem__name{
  position:relative;
  z-index:1;
  margin:0;
  text-align:center;
  font-weight:600;
  text-transform:uppercase;
  color:var(--ink);
  font-size:clamp(84px, 15.5vw, 212px);
  line-height:.8;
  letter-spacing:.03em;
}
.af-quem__portrait{
  position:relative;
  z-index:2;
  width:min(78%, 440px);
  aspect-ratio:1/1.08;
  margin:calc(clamp(84px, 15.5vw, 212px) * -.42) auto 0;
}
.af-quem__circle{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  aspect-ratio:1/1;
  border-radius:50%;
  background:radial-gradient(circle at 50% 38%, #c1b674 0%, var(--gold) 58%, #ab9f5a 100%);
}
.af-quem__portrait .af-brush{
  position:absolute;
  left:-4%;
  bottom:-5%;
  top:auto;
  width:108%;
}
/* topo aberto e fundo arredondado: a cabeça sai do círculo por cima,
   o corpo é cortado pela curva de baixo */
.af-quem__clip{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:0 0 50% 50% / 0 0 46.3% 46.3%;
}
/* left/top/width calibrados para img/andreia-sobre.webp (1000×1500): rosto
   (x≈54,5% da foto) no centro do círculo, topo do cabelo no topo do recorte
   (= metade das letras de "ANDRÉIA") e antebraço cruzado na base do círculo */
.af-quem__clip img{
  position:absolute;
  left:46.3%;
  top:-1.7%;
  width:82%;
  transform:translateX(-50%);
  max-width:none;
  display:block;
}

/* ---------- texto ---------- */
.af-quem__text{
  max-width:760px;
  margin:64px auto 0;
  text-align:center;
}
.af-quem__text p{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.85;
  color:var(--text);
}
.af-quem__text .af-quem__quote{
  margin-top:28px;
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
  font-size:clamp(24px, 2.2vw, 30px);
  line-height:1.35;
  color:var(--ink);
}
.af-quem__quote em{ color:var(--gold-text); }

/* ==========================================================================
   TRAJETÓRIA — no desktop, SVG com o rastro e as 4 borboletas em
   x = 150/450/750/1050 de 1200, casando com as 4 colunas do grid abaixo
   ========================================================================== */
.af-traj{ margin-top:120px; }
.af-traj__head{ text-align:center; }
.af-traj__title{
  margin:16px 0 0;
  font-weight:500;
  color:var(--ink);
  font-size:clamp(32px, 2.8vw, 42px);
  line-height:1.15;
}
.af-traj__title em{ color:var(--gold-text); }
.af-traj__track{
  position:relative;
  margin-top:36px;
}
.af-traj__svg{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
}
.af-traj__list{
  list-style:none;
  margin:0;
  /* padding = metade do gap: os centros das 4 colunas caem exatamente em
     1/8, 3/8, 5/8 e 7/8 da largura, embaixo das borboletas do SVG */
  padding:0 16px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:32px;
}
.af-traj__list li{
  text-align:center;
  padding:0 6px;
}
.af-traj__year{
  display:block;
  font-style:italic;
  font-weight:600;
  font-size:27px;
  color:var(--ink);
  line-height:1;
}
.af-traj__year small{
  font-size:.62em;
  font-style:normal;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-text);
}
.af-traj__desc{
  display:block;
  margin:12px auto 0;
  max-width:27ch;
  font-family:var(--sans);
  font-size:14.5px;
  line-height:1.65;
  color:var(--text);
}
.af-traj__desc b{
  font-weight:500;
  color:var(--ink);
}
.af-traj__mark{ display:none; }

/* ==========================================================================
   RESPONSIVO — trajetória vertical, borboleta pequena ao lado de cada item
   ========================================================================== */
/* notebook: borboletas menores e mais para as bordas, fora do nome e do texto */
@media (min-width:1024px) and (max-width:1279px){
  .af-quem__deco{ width:300px; }
  .af-quem__deco--l{ left:-190px; top:60px; }
  .af-quem__deco--r{ right:-220px; top:auto; bottom:160px; }
}

@media (max-width:1023px){
  .af-quem{ padding:88px 0 96px; }
  .af-quem__deco{ width:260px; }
  .af-quem__deco--l{ left:-150px; top:40px; }
  .af-quem__deco--r{ right:-160px; top:auto; bottom:80px; }
  .af-quem__name{ font-size:clamp(52px, 16.5vw, 110px); }
  .af-quem__portrait{
    margin-top:0;
    width:min(60%, 400px);
  }
  .af-quem__text{ margin-top:44px; max-width:65ch; }
  .af-quem__text p{ font-size:16px; line-height:1.8; }
  .af-traj{ margin-top:80px; }
  .af-traj__svg{ display:none; }
  .af-traj__list{
    grid-template-columns:1fr;
    gap:0;
    padding:0;
    max-width:520px;
    margin:0 auto;
    position:relative;
  }
  .af-traj__list::before{
    content:"";
    position:absolute;
    left:21px;
    top:12px;
    bottom:12px;
    border-left:1.5px dashed rgba(34,51,63,.35);
  }
  .af-traj__list li{
    position:relative;
    text-align:left;
    padding:0 0 34px 64px;
  }
  .af-traj__mark{
    display:grid;
    place-items:center;
    position:absolute;
    left:0;
    top:-6px;
    width:44px;
    height:44px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(181,169,100,.45) 0%, var(--areia) 72%);
  }
  .af-traj__mark svg{ width:28px; }
  .af-traj__desc{ margin-left:0; max-width:none; font-size:15px; line-height:1.7; }
}
@media (max-width:767px){
  .af-quem{ padding:72px 0 80px; }
  .af-quem__portrait{ width:min(84%, 340px); }
  /* borboletas só com a ponta nos cantos, dentro do respiro da seção,
     longe do eyebrow e do texto da trajetória */
  .af-quem__deco--l{ left:-130px; top:-150px; }
  .af-quem__deco--r{ right:-130px; bottom:-150px; }
}

/* o reset global de movimento reduzido zera todo transform; estes são de
   posição/orientação, não de animação */
@media (prefers-reduced-motion: reduce){
  .af-quem__deco--l{ transform:rotate(-18deg) !important; }
  .af-quem__deco--r{ transform:rotate(16deg) scaleX(-1) !important; }
  .af-quem__clip img{ transform:translateX(-50%) !important; }
}