/* Complemento exclusivo da página sobre.html
   Carregar depois de assets/css/style.css.
   Não altera a Home; controla apenas classes da página Sobre. */

.about-hero{
  padding:72px 0 64px;
  background:linear-gradient(90deg,#fff 0%,#f4f9ff 100%);
  overflow:hidden;
}

.about-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(420px,1fr);
  gap:64px;
  align-items:center;
}

.about-copy .eyebrow{
  display:inline-block;
  margin-bottom:18px;
  color:#078fa0;
  font-weight:800;
}

.about-copy h1{
  margin:0 0 24px;
  color:#061d3d;
  font-size:clamp(2.4rem,5vw,5.2rem);
  line-height:1.02;
  letter-spacing:-.045em;
}

.about-copy h1 span{ color:#0b9aa8; }
.about-copy h1 strong{ color:#7136c7; }

.about-copy p{
  max-width:620px;
  color:#102847;
  font-size:1.08rem;
  line-height:1.7;
}

.about-photo{
  position:relative;
  min-height:360px;
}

.about-photo img{
  display:block;
  width:100%;
  height:100%;
  min-height:360px;
  object-fit:cover;
  object-position:center;
  border-radius:0;
  box-shadow:0 22px 55px rgba(4,24,54,.16);
}

.hex-photo img,
.rede-photo img{
  clip-path:polygon(24% 0,76% 0,100% 50%,76% 100%,24% 100%,0 50%);
}

.hex-frame{
  position:absolute;
  inset:-8px;
  pointer-events:none;
  clip-path:polygon(24% 0,76% 0,100% 50%,76% 100%,24% 100%,0 50%);
  border:10px solid transparent;
  background:linear-gradient(135deg,#0597a8,#1b73c9,#7a34c6) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}

.about-foundation{
  padding:56px 0;
  background:#fff;
  border-top:1px solid rgba(12,35,64,.08);
  border-bottom:1px solid rgba(12,35,64,.08);
}

.foundation-grid{
  display:grid;
  grid-template-columns:1.35fr 1fr 1fr .85fr;
  gap:34px;
}

.foundation-grid article{
  padding-right:28px;
  border-right:1px solid rgba(12,35,64,.12);
}

.foundation-grid article:last-child{
  border-right:0;
  padding-right:0;
}

.about-icon{
  font-size:34px;
  line-height:1;
  margin-bottom:14px;
}

.foundation-grid h2,
.about-organization h2,
.about-synergy h2,
.about-rede h2,
.about-final h2{
  color:#061d3d;
}

.foundation-grid h2{
  margin:0 0 14px;
  font-size:1.2rem;
}

.foundation-grid p,
.foundation-grid li{
  color:#102847;
  font-size:.98rem;
  line-height:1.65;
}

.value-list{
  list-style:none;
  padding:0;
  margin:0;
}

.value-list li{
  position:relative;
  padding-left:24px;
  margin-bottom:10px;
  font-weight:700;
}

.value-list li::before{
  content:'✓';
  position:absolute;
  left:0;
  color:#0897a7;
  font-weight:900;
}

.about-organization{
  padding:76px 0;
  background:linear-gradient(180deg,#f8fbff 0%,#fff 100%);
}

.section-title{
  max-width:850px;
  margin:0 auto 38px;
  text-align:center;
}

.section-title span{
  display:block;
  color:#078fa0;
  font-weight:800;
  margin-bottom:6px;
}

.section-title h2{
  margin:0 0 14px;
  font-size:clamp(1.8rem,3vw,2.6rem);
  line-height:1.1;
}

.section-title p{
  color:#102847;
  line-height:1.7;
  margin:0 auto;
}

.ecosystem-diagram{
  margin-top:38px;
}

.diagram-center{
  max-width:520px;
  margin:0 auto 34px;
  padding:26px 30px;
  text-align:center;
  border-radius:22px;
  background:#061d3d;
  color:#fff;
  box-shadow:0 18px 45px rgba(4,24,54,.16);
}

.diagram-center h3{
  margin:0 0 8px;
  font-size:2rem;
}

.diagram-center p{
  margin:0;
  opacity:.9;
}

.diagram-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

.diagram-card{
  background:#fff;
  border-radius:18px;
  padding:28px;
  border:1px solid rgba(12,35,64,.10);
  box-shadow:0 18px 45px rgba(4,24,54,.08);
  overflow:hidden;
}

.diagram-card img{
  display:block;
  width:auto;
  max-width:190px;
  max-height:78px;
  object-fit:contain;
  object-position:left center;
  margin:0 0 18px;
}

.diagram-card h3{
  margin:0 0 10px;
  color:#061d3d;
  font-size:1.45rem;
}

.diagram-card p{
  margin:0;
  color:#102847;
  line-height:1.65;
}

.academy-border{ border-top:4px solid #0b9aa8; }
.studio-border{ border-top:4px solid #7136c7; }
.tech-border{ border-top:4px solid #0a65b8; }

.rede-connector{
  margin:34px auto 0;
  max-width:840px;
  padding:28px 34px;
  text-align:center;
  border-radius:22px;
  background:#f3f7ff;
  border:1px solid rgba(12,35,64,.08);
}

.rede-connector h3{
  margin:0 0 8px;
  color:#7136c7;
  font-size:1.6rem;
}

.rede-connector p{
  margin:0;
  color:#102847;
  line-height:1.65;
}

.about-synergy{
  padding:70px 0;
  background:#fff;
}

.synergy-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  gap:14px;
  align-items:stretch;
  margin-top:34px;
}

.synergy-item{
  background:#fff;
  border:1px solid rgba(12,35,64,.10);
  border-radius:18px;
  padding:24px;
  text-align:center;
  box-shadow:0 14px 35px rgba(4,24,54,.07);
}

.synergy-item h3{
  margin:0 0 8px;
  color:#061d3d;
}

.synergy-item p{
  margin:0;
  color:#102847;
  line-height:1.55;
}

.synergy-arrow{
  align-self:center;
  color:#7136c7;
  font-size:2rem;
  font-weight:900;
}

.about-rede{
  padding:72px 0;
  background:linear-gradient(90deg,#fff 0%,#f6f2ff 100%);
}

.about-rede-grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);
  gap:64px;
  align-items:center;
}

.about-rede-copy span{
  display:block;
  color:#7136c7;
  font-weight:800;
  margin-bottom:8px;
}

.about-rede-copy h2{
  margin:0 0 16px;
  font-size:clamp(2rem,3.5vw,3.2rem);
  line-height:1.08;
}

.about-rede-copy p{
  color:#102847;
  line-height:1.7;
}

.btn-purple-solid{
  background:#7136c7;
  color:#fff;
  border-color:#7136c7;
}

.about-final{
  padding:60px 0;
  background:#fff;
}

.about-final-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:44px;
  align-items:center;
}

.future-card,
.final-card{
  display:flex;
  gap:22px;
  padding:30px;
  border-radius:20px;
  background:#fff;
  border:1px solid rgba(12,35,64,.10);
  box-shadow:0 14px 35px rgba(4,24,54,.06);
}

.final-card{
  display:block;
}

.rocket-icon{
  flex:0 0 64px;
  width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  background:#f3f7ff;
  font-size:34px;
}

.future-card h2,
.final-card h2{
  margin:0 0 12px;
}

.future-card p,
.final-card p{
  color:#102847;
  line-height:1.65;
}

.final-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:20px;
}

@media(max-width:1100px){
  .about-hero-grid,
  .about-rede-grid{
    grid-template-columns:1fr;
  }

  .foundation-grid{
    grid-template-columns:1fr 1fr;
  }

  .foundation-grid article:nth-child(2){
    border-right:0;
  }

  .diagram-grid,
  .about-final-grid{
    grid-template-columns:1fr;
  }

  .synergy-grid{
    grid-template-columns:1fr;
  }

  .synergy-arrow{
    transform:rotate(90deg);
    justify-self:center;
  }
}

@media(max-width:760px){
  .about-hero{ padding:44px 0 48px; }

  .foundation-grid{
    grid-template-columns:1fr;
  }

  .foundation-grid article{
    border-right:0;
    border-bottom:1px solid rgba(12,35,64,.10);
    padding-right:0;
    padding-bottom:22px;
  }

  .foundation-grid article:last-child{
    border-bottom:0;
  }

  .about-photo,
  .about-photo img{
    min-height:280px;
  }

  .future-card{
    flex-direction:column;
  }
}