/* ============================================================
   ÉGIDA — hero.css
   ============================================================ */

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100svh;
  display:grid; place-content:center;
  text-align:center; overflow:hidden;
  background:var(--grad-dark);
}
.hero__bg{
  position:absolute; inset:0;
  background:url('../../assets/fondos/EGIDA_Fondo_Azul_Oscuro_1920x1080.jpg') center/cover;
  opacity:.35; mix-blend-mode:luminosity;
}
.net-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:.5;
}
.hero__content{ position:relative; z-index:2; padding:6rem 0 4rem; }
.hero__logo-wrap{
  display:flex; justify-content:center; margin-bottom:2.6rem;
}
.hero__logo{
  width:min(560px, 82vw);
  animation:heroIn 1.1s var(--ease) .15s both;
}
.hero__title{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.15rem,2.4vw,1.7rem);
  min-height:1.5em; color:var(--grey); letter-spacing:.14em;
  text-transform:uppercase;
}
.hero__sub{ display:none; }
.typed{ color:var(--white); }
.typed-cursor{
  color:var(--orange); font-weight:300;
  animation:blink 1s steps(1) infinite; margin-left:2px;
}
@keyframes blink{ 50%{ opacity:0 } }
@keyframes heroIn{ from{ opacity:0; transform:translateY(28px) } to{ opacity:1; transform:none } }
.hero__cta{
  display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; margin-top:2.4rem;
  animation:heroIn 1s var(--ease) .5s both;
}
.hero__sub{ margin-top:2rem; font-size:.9rem; color:rgba(235,235,242,.65); animation:heroIn 1s var(--ease) .7s both; }
.hero__scroll{
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%); z-index:2;
}
.hero__scroll-track{
  display:block; width:26px; height:44px; border-radius:999px;
  border:1.5px solid rgba(255,255,255,.4); position:relative;
}
.hero__scroll-dot{
  position:absolute; top:8px; left:50%; width:5px; height:5px; margin-left:-2.5px;
  border-radius:50%; background:var(--orange);
  animation:scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot{ 0%{ transform:translateY(0); opacity:1 } 70%{ transform:translateY(20px); opacity:0 } 100%{ opacity:0 } }