/* ===========================
   SOBRE — ESPECÍFICO
   segue o padrão visual (hero overlay + divider + cartões elevados)
   =========================== */

/* HERO (alinhado ao .hero-campanhas / .hero-marcas / .hero-contactos) */
.hero-sobre{
  position:relative; min-height:60vh; display:grid; place-items:center;
  background-image:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
    url('assets/sobre.jpg'); /* troca a imagem se preferires */
  background-size:cover; background-position: 0% 60%; background-repeat:no-repeat;
  text-align:center; overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.hero-sobre::after{
  content:"Sm";
  position:absolute; inset:auto 0 5% 0; margin:auto; width:100%; text-align:center;
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:26vw; line-height:1;
  color:rgba(255,255,255,.05); z-index:0;
}
.hero-inner{ position:relative; z-index:1; padding:4rem 1.25rem; }
.hero-title{
  font-family:'Montserrat',sans-serif; text-transform:uppercase; letter-spacing:.5px;
  color:#fff; font-size:clamp(2rem,4vw,3.2rem); margin-bottom:.35rem;
}
.hero-sub{ color:var(--brand-yellow); font-size:clamp(1rem,2vw,1.25rem); }

/* Divider subtil (igual ao site) */
.divider-soft{
  height:2px; border:0; margin:2.2rem 0 1.2rem;
  background:linear-gradient(to right, transparent, var(--brand-yellow), transparent);
  opacity:.6;
}

/* Títulos de secção */
.section-title{
  font-family:'Montserrat',sans-serif;
  font-weight:700;
}

/* Cartões dos valores */
.card-elev{
  border:0; border-radius:16px; background:#fff;
  box-shadow:0 8px 28px rgba(0,0,0,.08);
}
.card-elev .card-body{ padding:1.5rem 1.25rem; }
.value-icon{
  width:42px; height:42px; display:inline-grid; place-items:center;
  margin-bottom:.5rem; border-radius:10px;
  background:linear-gradient(135deg, var(--brand-green, #1b7b63), #226555);
  color:#fff;
}

/* Secção do legado */
.section-shadow{
  box-shadow:0 8px 28px rgba(0,0,0,.06);
}
.legacy-img-rect {
  max-width: 320px;   /* controla a largura */
  width: 100%;
  height: auto;       /* mantém a proporção original */
  border-radius: 12px; /* só arredonda os cantos */
  box-shadow: 0 8px 28px rgba(0,0,0,.12); /* sombra leve */
}

