/* =========================
   Start-UP • sobre.css
   ========================= */

/* usa as mesmas variáveis do stylenew.css */
:root{
  /* troque a imagem se quiser outra no banner da Sobre */
  --about-img: url('../img/elementos/data-center-CIO.jpg');
  --about-dark-top: rgba(0,0,0,.86);
  --about-dark-bot: rgba(0,0,0,.96);
  --about-red-1: rgba(251,0,0,.10);
  --about-red-2: rgba(251,0,0,.06);
}

/* HERO da Sobre (full-bleed + imagem bem fraquinha) */
.hero-about{
  min-height: 64vh; /* um pouco mais baixo que a home, para variar */
  background-image:
    radial-gradient(1200px 600px at 15% 20%, var(--about-red-1), transparent 60%),
    radial-gradient(1000px 600px at 85% 80%, var(--about-red-2), transparent 60%),
    linear-gradient(180deg, var(--about-dark-top), var(--about-dark-bot)),
    var(--about-img);
  background-size: auto, auto, auto, cover;
  background-position: center center, center center, center center, center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-attachment: scroll, scroll, scroll, fixed;
}
@media (max-width:1024px){
  .hero-about{ background-attachment: scroll, scroll, scroll, scroll; }
}

/* subtítulo do hero */
.hero-about .subtitle{
  margin-top: 10px;
  color: #dcdcdc;
  font-size: clamp(16px, 2.2vw, 20px);
}

/* containers mais estreitos para leitura agradável */
.container.narrow{
  max-width: 980px;
}

/* textos principais da página */
.lead{
  color:#cfcfcf;
  line-height: 1.9;
  font-size: 17px;
  margin: 10px auto 0;
  text-align: center;
}

/* títulos das seções (reaproveita o gradiente do tema) */
.text-center{ text-align:center; }