/* Topo da home (hero): vitrine de imagens + cartões premium.
   Arquivo novo, carregado depois do site.css. Só usa as variáveis do sistema (brand.js). */
.hero.hero-bc{padding:80px 0 60px;overflow:hidden;
  background:
    radial-gradient(ellipse 55% 70% at 78% 40%,rgba(var(--red-rgb),.30),transparent 70%),
    radial-gradient(circle at 8% 100%,rgba(var(--red-d-rgb),.35),transparent 45%),
    linear-gradient(115deg,var(--bg) 40%,rgba(var(--red-d-rgb),.40) 100%)}
.hero.hero-bc:after{display:none}
.hero-bc .hero-bg{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(115deg,transparent 0 38px,rgba(var(--red-rgb),.06) 38px 40px);
  -webkit-mask-image:linear-gradient(90deg,transparent 40%,#000 95%);mask-image:linear-gradient(90deg,transparent 40%,#000 95%)}
.hero-bc .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center}
.hero-bc .tag{box-shadow:0 0 26px rgba(var(--red-rgb),.55)}
.hero-bc h1 em{text-shadow:0 0 38px rgba(var(--red-rgb),.55)}
.hero-bc .btn{box-shadow:0 10px 30px rgba(var(--red-rgb),.4)}
.hero-bc .btn:hover{box-shadow:0 14px 40px rgba(var(--red-rgb),.6);transform:skewX(-12deg) translateY(-2px)}
.hero-bc .btn.ghost{box-shadow:none}

/* vitrine de imagens */
.hero-vis{position:relative;height:470px}
.vf{position:absolute;margin:0;
  filter:drop-shadow(0 18px 34px rgba(var(--red-rgb),.38)) drop-shadow(0 2px 0 rgba(var(--red-rgb),.9))}
.vf span{display:block;width:100%;height:100%;overflow:hidden;
  clip-path:polygon(15% 0,100% 0,85% 100%,0 100%);background:var(--bg3)}
.vf img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.vf:hover img{transform:scale(1.06)}
.vf1{left:0;top:70px;width:38%;height:340px;z-index:1}
.vf2{left:27%;top:0;width:46%;height:470px;z-index:3}
.vf3{right:0;top:70px;width:38%;height:340px;z-index:2}
.vf1 img{object-position:30% center}
.vf2 img{object-position:38% center}
.vf3 img{object-position:55% center}

/* faixa de cartões */
.hero-bc .strip{grid-column:1/-1;position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px}
.hero-bc .si{padding:20px 22px;
  background:linear-gradient(145deg,rgba(var(--red-rgb),.14),transparent 55%),rgba(var(--bg-rgb),.82);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-top:3px solid var(--red);
  box-shadow:0 20px 46px rgba(0,0,0,.45);transition:transform .25s,border-color .25s,box-shadow .25s}
.hero-bc .si:hover{transform:translateY(-5px);border-color:var(--red);
  box-shadow:0 24px 54px rgba(0,0,0,.5),0 0 32px rgba(var(--red-rgb),.28)}
.hero-bc .si b{display:block;font-family:"Barlow Condensed",Impact,sans-serif;font-size:1.35rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;line-height:1.1}
.hero-bc .si small{display:block;margin-top:6px;color:var(--mut);font-size:.85rem;line-height:1.4}

@media(max-width:820px){
  .hero.hero-bc{padding:60px 0 40px}
  .hero-bc .wrap{grid-template-columns:1fr}
  .hero-vis{height:340px}
  .vf1,.vf3{height:250px;top:50px}
  .vf2{height:340px}
  .hero-bc .strip{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){.hero-bc .strip{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.vf img,.hero-bc .si,.hero-bc .btn{transition:none}.vf:hover img,.hero-bc .si:hover{transform:none}}