/* HERO base */
.hm-hero{
  position:relative; min-height:100svh;
  background: var(--hero-bg, #000) no-repeat center/cover;
  overflow:hidden;
}
.hm-hero__overlay{ position:absolute; inset:0; pointer-events:none; }
.hm-hero__inner{ position:relative; z-index:1; display:grid; align-content:center; min-height:inherit; }

/* Grupo (logo + texto) con posicionamiento por variables */
.hm-hero__group{
  position:absolute; z-index:2;
  left: var(--group-x, 6vw);
  top:  var(--group-y, 22vh);
  display:grid; gap: var(--group-gap, clamp(10px,2vw,16px));
  justify-items:start;
}

/* Logo */
.hm-hero__logo{
  width: clamp(120px, 42vw, 520px);
  max-width:100%; height:auto;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,.45));
  transform: scale(var(--logo-scale, 1));
  transform-origin: top left;
}

/* Texto */
.hm-hero__text{
  max-width: min(48ch, 42vw);
  color:#f0f0f0; line-height:1.6;
  font-size: clamp(14px, 1vw + .3rem, 18px);
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.15);
  border-radius:10px; padding:15px 16px;
  backdrop-filter: blur(3px);
}

/* Botón y scroll */
.btn{ display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:8px; border:1px solid; text-decoration:none; }
.btn--light{ color:#111; background:#fff; border-color:#111; }
.btn--light:hover{ background:#f5f5f5; }
.hm-hero__scroll{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%); color:#fff; font-size:12px; opacity:.9; display:flex; align-items:center; gap:8px; }
.hm-hero__scroll i{ width:8px; height:8px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); margin-top:-2px; animation:hm-bounce 1.2s infinite ease-in-out; }
@keyframes hm-bounce{0%,100%{transform:translateY(0) rotate(-45deg);}50%{transform:translateY(4px) rotate(-45deg);}}

/* Responsive */
@media (max-width: 900px){
  .hm-hero{ min-height:72vh; }
  .hm-hero__inner{ justify-items:center; text-align:center; }
  .hm-hero__group{ position:static; gap:12px; }
  .hm-hero__logo{ width: clamp(160px, 50vw, 340px); transform:none; }
  .hm-hero__text{ max-width:92%; text-align:left; }
}