/* ============================================================
   about.css - estilos especificos da pagina Sobre
   ============================================================ */

/* --- Hero --- */
.about-hero{
  padding:48px 0 40px;
}

.about-hero-inner{
  display:grid;
  max-width:1180px;
  margin:0 auto;
  grid-template-columns:minmax(0, 1.08fr) minmax(300px, .78fr);
  align-items:start;
  gap:clamp(28px, 4.5vw, 58px);
}

.about-hero-copy{
  max-width:720px;
  justify-self:end;
}

.about-hero-copy h1{
  margin:0;
  font-size:clamp(3.15rem, 5vw, 5.6rem);
  line-height:.94;
  letter-spacing:-.07em;
  font-weight:500;
  text-wrap:balance;
}

.about-hero-copy p{
  margin-top:20px;
  max-width:62ch;
  font-size:1.08rem;
  line-height:1.72;
  color:var(--muted);
}

.about-portrait-shell{
  position:relative;
  width:min(100%, 400px);
  justify-self:start;
  align-self:start;
  padding:18px;
  border-radius:34px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
    radial-gradient(circle at top, rgba(244, 114, 182, .08), transparent 42%);
  box-shadow:0 28px 72px rgba(0,0,0,.34);
}

.about-portrait-shell::before{
  content:"";
  position:absolute;
  inset:-14px 18px auto auto;
  width:140px;
  height:140px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(96,165,250,.16), rgba(96,165,250,0));
  pointer-events:none;
}

.about-avatar{
  position:relative;
  width:100%;
  aspect-ratio:4 / 5;
  border-radius:26px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  background:#10141e;
  box-shadow:0 20px 54px rgba(0,0,0,.34);
}

.about-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 18%;
}

/* --- Stats row --- */
.about-stats{
  margin-top:28px;
  width:100%;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.07);
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:20px;
  text-align:left;
}

.about-stat strong{
  display:block;
  font-size:1.7rem;
  letter-spacing:-.05em;
  font-weight:800;
  color:#fff;
  margin-bottom:6px;
}

.about-stat span{
  display:block;
  font-size:.88rem;
  line-height:1.45;
  color:var(--muted-2);
}

/* --- Journey section --- */
.about-journey{
  padding:40px 0 28px;
}

.about-section-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:14px;
  margin-bottom:44px;
}

.about-section-head h2{
  font-size:clamp(2.5rem, 4vw, 4.5rem);
  line-height:.96;
  letter-spacing:-.07em;
  font-weight:700;
}

.about-section-head p{
  max-width:720px;
  font-size:1.04rem;
  line-height:1.58;
  color:var(--muted-2);
}

/* --- Timeline (horizontal two-column) --- */
.about-timeline{
  position:relative;
  max-width:1080px;
  margin:0 auto;
  padding:24px 0 12px;
}

.about-timeline::before{
  content:"";
  position:absolute;
  top:12px;
  bottom:10px;
  left:50%;
  transform:translateX(-50%);
  width:2px;
  background:linear-gradient(180deg,
    rgba(37,99,235,.18) 0%,
    rgba(37,99,235,.78) 18%,
    rgba(37,99,235,.78) 82%,
    rgba(37,99,235,.18) 100%
  );
  box-shadow:0 0 24px rgba(37,99,235,.18);
}

.about-timeline-item{
  position:relative;
  display:grid;
  grid-template-columns:1fr 120px 1fr;
  align-items:center;
  min-height:204px;
  margin-bottom:8px;
}

.about-timeline-item:last-child{margin-bottom:0}

.about-timeline-col{display:flex}
.about-left{justify-content:flex-end;padding-right:14px}
.about-right{justify-content:flex-start;padding-left:14px}

.about-timeline-card{
  width:min(100%, 420px);
}

.about-timeline-period{
  display:block;
  margin-bottom:12px;
  color:#60a5fa;
  font-size:.92rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.about-timeline-card h3{
  font-size:1.92rem;
  line-height:1.02;
  letter-spacing:-.055em;
  font-weight:700;
  margin-bottom:12px;
}

.about-timeline-card p{
  font-size:1.02rem;
  line-height:1.68;
  color:var(--muted);
}

.about-left-align{text-align:right}
.about-right-align{text-align:left}

.about-timeline-mid{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
}

.about-timeline-dot{
  width:18px;
  height:18px;
  border-radius:999px;
  background:var(--bg);
  border:2px solid rgba(96,165,250,.55);
  box-shadow:0 0 0 8px rgba(37,99,235,.06), 0 0 22px rgba(37,99,235,.22);
  position:relative;
  z-index:2;
}

.about-timeline-dot::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:999px;
  background:#2563eb;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1120px){
  .about-hero-inner{
    grid-template-columns:minmax(0, 1fr) minmax(260px, .74fr);
    gap:32px;
  }

  .about-stats{
    grid-template-columns:1fr;
  }
}

@media (max-width: 920px){
  .about-hero{
    padding-top:32px;
  }

  .about-hero-inner{
    grid-template-columns:1fr;
  }

  .about-portrait-shell{
    width:min(100%, 420px);
    justify-self:start;
  }

  .about-timeline::before{left:17px;transform:none}
  .about-timeline-item{
    grid-template-columns:34px 1fr;
    gap:14px;
    align-items:start;
    min-height:auto;
    margin-bottom:24px;
  }
  .about-left,.about-right{
    grid-column:2;
    justify-content:flex-start;
    padding:0;
  }
  .about-empty{display:none}
  .about-timeline-mid{
    grid-column:1;
    grid-row:1;
    justify-content:flex-start;
    padding-top:20px;
  }
  .about-timeline-card,
  .about-left-align,
  .about-right-align{
    width:100%;
    max-width:none;
    text-align:left;
  }
  .about-section-head{margin-bottom:30px}
}

@media (max-width: 640px){
  .about-hero-copy h1{font-size:clamp(2.5rem, 13vw, 3.6rem)}
  .about-hero-copy p{font-size:1rem}
  .about-portrait-shell{
    padding:14px;
    border-radius:28px;
  }
  .about-avatar{
    border-radius:22px;
  }
  .about-timeline-card h3{font-size:1.46rem}
  .about-section-head h2{font-size:clamp(2.1rem, 12vw, 2.8rem)}
}