/* ===== HERO — layout final adaptável (correção de centralização + mobile) ===== */
@media(max-width:900px){
  .hero{align-items:flex-start;min-height:auto}
  .hero .wrap{max-width:100%;margin:0;padding:108px 22px 40px}
  .hero-copy{max-width:100%;margin:0}
  .hero-bg{left:0;right:0;width:100%}
  .hero-bg img{object-fit:cover;object-position:76% top;transform:none;-webkit-mask-image:none;mask-image:none}
  .hero-bg::after{background:linear-gradient(180deg,rgba(4,16,14,.42) 0%,rgba(4,16,14,.72) 30%,rgba(4,16,14,.92) 56%,var(--bg) 84%)}
}
@media(max-width:760px){
  .hero .grid-bg{display:none}
  .hero-tag{font-size:11px;letter-spacing:.2em;margin-bottom:14px}
  .hero-brand{height:56px;margin-bottom:18px}
  .hero h1{font-size:clamp(29px,8vw,40px);line-height:1.08;max-width:100%}
  .hero p.lead{margin-top:16px;font-size:16px;line-height:1.55;color:#cdddd4;max-width:100%;font-weight:300}
  .hero-cta{margin-top:26px;gap:12px;width:100%}
  .hero-cta .btn{flex:1 1 auto;justify-content:center;padding:14px 18px;font-size:14px}
  .hero-ruler{margin-top:28px}
  .hero-foot{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:22px 20px}
  .hero-foot .hf b{font-size:30px}
  .hero-foot .hf span{font-size:12px}
}
@media(max-width:400px){ .hero h1{font-size:27px} .hero-foot .hf b{font-size:26px} }