/* =========================================================
   HERO — pantalla principal con foto de camión y patrón de circuito
========================================================= */
.hero{
  height:100vh;min-height:640px;display:flex;align-items:center;justify-content:flex-start;
  position:relative;overflow:hidden;background:var(--color-black);
}
.hero-photo{
  position:absolute;inset:0;z-index:0;
  background-image:url('../assets/images/hero-truck.jpg');
  background-size:cover;background-position:center 60%;
  filter:saturate(0.85) contrast(1.05);
}
.hero-photo::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(100deg, rgba(6,8,12,0.96) 0%, rgba(6,8,12,0.9) 26%, rgba(6,8,12,0.5) 55%, rgba(6,8,12,0.6) 100%),
    linear-gradient(to top, rgba(6,8,12,0.92) 0%, transparent 32%);
}
.hero-circuit{
  position:absolute;inset:-10%;z-index:0;
  background-image:linear-gradient(var(--color-line) 1px, transparent 1px), linear-gradient(90deg, var(--color-line) 1px, transparent 1px);
  background-size:64px 64px;opacity:0.18;
  mask-image:linear-gradient(100deg, black 0%, black 40%, transparent 75%);
  -webkit-mask-image:linear-gradient(100deg, black 0%, black 40%, transparent 75%);
  will-change:transform;
}
.hero-dots{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0.7;}
.hero-dots circle{fill:var(--color-gold);}

.hero-content{position:relative;z-index:2;padding:0 24px;max-width:640px;margin:0 0 0 4%;}
.hero-logo{
  display:inline-flex;align-items:center;margin-bottom:28px;
  opacity:0;transform:translateY(18px);
  animation:heroLogoReveal .9s var(--ease-premium) forwards;
}
.hero-logo img{
  width:clamp(180px, 15vw, 270px);height:auto;object-fit:contain;display:block;
  filter:drop-shadow(0 0 14px rgba(244,180,0,0.28)) drop-shadow(0 12px 28px rgba(0,0,0,0.45));
}
.hero-logo-text{font-size:1.4rem;}
@keyframes heroLogoReveal{to{opacity:1;transform:translateY(0);}}
@media (max-width:1023px){.hero-logo{margin-bottom:22px;}}
@media (max-width:480px){.hero-logo img{width:clamp(145px, 52vw, 210px);}}
.hero-tag{
  font-family:var(--font-label);color:var(--color-gold);letter-spacing:0.4em;font-size:0.8rem;font-weight:700;
  margin-bottom:22px;display:inline-flex;align-items:center;gap:14px;
}
.hero-tag i{display:block;width:40px;height:1px;background:var(--color-gold);}
.hero h1{
  font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.02;color:var(--color-white);margin-bottom:22px;
  text-shadow:0 4px 30px rgba(0,0,0,0.5);
}
.hero h1 em{font-style:normal;color:var(--color-gold);text-shadow:0 0 26px var(--color-gold-glow);}
.hero p{font-size:1.05rem;color:var(--color-gray);max-width:560px;margin:0 0 36px;font-weight:300;}
.btn-row{display:flex;gap:16px;flex-wrap:wrap;}
.btn{
  display:inline-block;padding:15px 34px;font-family:var(--font-label);font-weight:700;
  letter-spacing:0.1em;font-size:0.85rem;text-transform:uppercase;text-decoration:none;
  transition:transform .3s var(--ease-premium), box-shadow .3s var(--ease-premium), background .3s var(--ease-premium), border-color .3s var(--ease-premium);
  border:1px solid transparent;
}
.btn:active{transform:scale(0.98);}
.btn-primary{background:var(--color-gold);color:#0a0a0a;}
.btn-primary:hover{background:var(--color-gold-premium);transform:translateY(-2px);box-shadow:0 10px 34px var(--color-gold-glow);}
.btn-ghost{border-color:rgba(245,245,240,0.4);color:var(--color-white);}
.btn-ghost:hover{border-color:var(--color-white);background:rgba(255,255,255,0.08);transform:translateY(-2px);}

@media (max-width:1023px){
  .hero-content{margin:0 auto;text-align:center;max-width:600px;}
  .hero-tag, .btn-row{justify-content:center;}
  .hero p{margin:0 auto 36px;}
}
@media (max-width:480px){
  .hero{min-height:92vh;}
}