/* ============================================================
   HERO — banner principal do topo do site (título, botões e a
   ilustração azul em formato de "molde").
   ============================================================ */

.hero{padding:64px 0 88px; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;}
.hero h1{font-size:clamp(34px,5vw,54px); margin-top:14px; letter-spacing:-0.01em;}
.hero-sub{margin-top:20px; font-size:17.5px; color:var(--slate); max-width:520px;}
.hero-ctas{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
.hero-badges{display:flex; gap:26px; margin-top:44px; flex-wrap:wrap;}
.hero-badge{display:flex; align-items:center; gap:10px;}
.hero-badge-num{font-family:'Fredoka',sans-serif; font-weight:700; font-size:22px; color:var(--blue-deep);}
.hero-badge-label{font-size:12.5px; color:var(--slate); max-width:110px; line-height:1.3;}

.hero-visual{position:relative;}
.mold-blob{width:100%; height:auto;}
.hero-tag{
  position:absolute; top:8%; right:-4%; background:var(--white); border-radius:var(--radius-sm);
  padding:12px 16px; box-shadow:var(--shadow-card); display:flex; align-items:center; gap:10px;
  font-weight:700; font-size:13px; color:var(--blue-deep);
}
.hero-tag svg{width:20px; height:20px; color:var(--gold); flex-shrink:0;}
.hero-tag-2{
  position:absolute; bottom:6%; left:-2%; background:var(--blue); color:var(--white); border-radius:var(--radius-sm);
  padding:12px 18px; box-shadow:var(--shadow-soft); font-weight:700; font-size:13px;
}