/* =========================
   /assets/css/hero.css
   Hero side-by-side + moldura moderna + LCP estável
   ========================= */

.hero{
  position:relative; min-height:100vh;
  display:flex; align-items:center; overflow:hidden;
  background:#fff; color:var(--ink);
}
.hero-bg{
  position:absolute; inset:0; pointer-events:none;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  background-color:var(--surface);
  opacity:1;
}
.hero-inner{
  position:relative; z-index:1;
  display:grid; gap:clamp(1.5rem, 4vw, 3rem);
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  align-items:center;
  min-height:min(92vh, 980px);
  padding-top:clamp(4rem, 8vw, 7rem);
  padding-bottom:clamp(3rem, 6vw, 5rem);
}
.hero-title{ color:var(--ink); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }
.hero-actions .btn{ min-width:210px; }

.hero-media{
  position:relative; justify-self:end; width:min(420px, 90vw); transform:translateZ(0);
}

/* Moldura moderna do mockup */
.frame-modern{
  position:relative; border-radius:24px; overflow:hidden; isolation:isolate; background:transparent;
  box-shadow:0 10px 30px rgba(0,0,0,.12), 0 2px 10px rgba(0,0,0,.06);
}
.frame-modern::before{
  content:""; position:absolute; inset:0; padding:2px; border-radius:26px;
  background:linear-gradient(135deg, #ffd7f0, #e9d8ff, #d9f1ff, #fff7d6);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.frame-modern::after{
  content:""; position:absolute; inset:0; border-radius:24px; background:#fff; transform:translate(10px,12px); z-index:-1;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.frame-modern img{
  display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:24px; background:#f7f2ea;
}

/* Mobile ajustes */
@media (max-width:920px){
  .hero-inner{ grid-template-columns:1fr; min-height:auto; }
  .hero-media{ order:2; max-width:520px; margin-inline:auto; margin-top:24px; }
}
@media (max-width:480px){
  .frame-modern::after{ transform:translate(6px,8px); }
}