/* ==========================================================================
   PÁGINA: SOBRE (sobre.php)
   ========================================================================== */

/* ---------- Nossa história ---------- */
.story{background:var(--white); padding-top:100px;}
.story-grid{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:64px;
  align-items:center;
}
.story-visual{
  aspect-ratio:1/1;
  border-radius:28px;
  background:linear-gradient(150deg, var(--blue-tint), var(--blue-tint-2));
  position:relative;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.story-visual .ring{
  position:absolute;
  border-radius:50%;
  border:1.5px solid rgba(0,82,255,.18);
}
.story-visual .ring.r1{width:78%; height:78%;}
.story-visual .ring.r2{width:56%; height:56%;}
.story-visual .ring.r3{width:34%; height:34%; background:var(--blue); border:none;
  display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 20px 40px -10px rgba(0,82,255,.5);}
.story-visual .ring.r3 span{font-family:'DM Sans',sans-serif; font-weight:400; font-size:15px; text-align:center; padding:0 10px;}

.story-copy p{color:var(--ink-soft); font-size:16.5px; margin-bottom:18px;}
.story-founder{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:26px;
  padding-top:26px;
  border-top:1px solid var(--line);
}
.story-founder .avatar{
  width:48px; height:48px;
  border-radius:50%;
  background:linear-gradient(140deg,var(--blue),var(--blue-deep));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:15px;
  flex-shrink:0;
}
.story-founder b{display:block; font-size:14.5px;}
.story-founder span{font-size:13px; color:var(--gray);}

/* ---------- Faixa de números ---------- */
.stats{background:var(--ink); padding:64px 0;}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  text-align:center;
}
.stat-item b{
  display:block;
  font-family:'DM Sans',sans-serif;
  font-size:38px;
  font-weight:400;
  color:#fff;
}
.stat-item span{font-size:14px; color:rgba(255,255,255,.55); font-weight:500;}

/* ---------- Valores ---------- */
.values{background:var(--blue-tint);}
.values-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.value-card{
  position:relative;
  background:var(--white);
  border-radius:var(--radius);
  padding:32px 26px;
  border:1px solid var(--line);
  overflow:hidden;
}
.value-card.reveal{
  transition:opacity .7s ease, translate .7s ease, transform .45s cubic-bezier(.4,0,.2,1), box-shadow .45s ease, border-color .45s ease;
}
.value-card::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:0;
  transition:opacity .35s ease;
}
.value-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px -18px rgba(11,27,59,.18);
  border-color:rgba(0,82,255,.25);
}
.value-card:hover::before{opacity:1;}
.value-icon{
  width:46px;height:46px;
  border-radius:13px;
  background:var(--blue-tint-2);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px;
  color:var(--blue);
}
.value-card h3{font-size:17px; font-weight:400; margin-bottom:10px;}
.value-card p{font-size:14.5px; color:var(--gray); line-height:1.6;}

/* ---------- Responsivo (sobre) ---------- */
@media (max-width:980px){
  .story-grid{grid-template-columns:1fr;}
  .story-visual{max-width:380px; margin:0 auto;}
  .stats-grid{grid-template-columns:1fr; gap:32px;}
  .values-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .values-grid{grid-template-columns:1fr;}
}