function Hero() {
  return (
    <section id="top" className="cmgs-hero">
      <div className="cmgs-hero-bg">
        {/* Imagen del hero: se ve de inmediato, por eso NO lleva lazy y
            está precargada (preload) desde el <head>. decoding="async"
            evita que bloquee el pintado mientras se decodifica. */}
        <img src="assets/gallery/actividades-01.jpg" alt="" decoding="async" />
      </div>
      <div className="cmgs-hero-overlay" />

      <div className="cmgs-hero-content container">
        <p className="cmgs-hero-eyebrow">— Bucaramanga · Santander · 1965 —</p>
        <h1 className="cmgs-hero-title">
          Colegio Militar<br />
          <span className="gold">General Santander</span>
        </h1>
        <p className="cmgs-hero-lead">
          Formamos cadetes íntegros, disciplinados y con excelencia académica,
          inspirados en los valores de <strong>Patria, Superación y Orden.</strong>
        </p>
        <div className="cmgs-hero-ctas">
          <a href="inscripciones.html" className="btn btn-gold">
            Inscripciones abiertas 2026
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
              <path d="M5 12h14M13 5l7 7-7 7"/>
            </svg>
          </a>
          <a href={CMGS_DATA.social.whatsapp} target="_blank" rel="noopener" className="btn btn-ghost-light">
            Contáctanos
          </a>
        </div>

        <div className="cmgs-hero-badges">
          <div className="cmgs-hero-badge">
            <span className="num">61</span>
            <span className="lbl">Años<br/>formando líderes</span>
          </div>
          <span className="sep" />
          <div className="cmgs-hero-badge">
            <span className="num">+25.000</span>
            <span className="lbl">Egresados<br/>al servicio de Colombia</span>
          </div>
        </div>
      </div>

      <div className="cmgs-hero-scrollcue" aria-hidden="true">
        <span>Scroll</span>
        <span className="line" />
      </div>

      <style>{`
        .cmgs-hero {
          position: relative;
          min-height: 100vh;
          display: flex; align-items: center;
          color: #fff;
          overflow: hidden;
        }
        .cmgs-hero-bg { position: absolute; inset: 0; z-index: 0; }
        .cmgs-hero-bg img, .cmgs-hero-bg video {
          width: 100%; height: 100%; object-fit: cover;
          animation: cmgs-kenburns 26s ease-in-out infinite alternate;
        }
        @keyframes cmgs-kenburns {
          0%   { transform: scale(1.05) translate(0, 0); }
          100% { transform: scale(1.15) translate(-2%, -1%); }
        }
        .cmgs-hero-overlay {
          position: absolute; inset: 0; z-index: 1;
          background:
            linear-gradient(180deg, rgba(10,23,51,0.55) 0%, rgba(10,23,51,0.78) 60%, rgba(10,23,51,0.92) 100%),
            radial-gradient(ellipse at 70% 20%, rgba(212,160,42,0.12), transparent 50%);
        }
        .cmgs-hero-content {
          position: relative; z-index: 2;
          width: 100%;
          padding-top: var(--header-h);
        }
        .cmgs-hero-eyebrow {
          font: 600 12px/1 var(--font-body);
          letter-spacing: 0.32em; text-transform: uppercase;
          color: var(--gold-400); margin: 0 0 18px;
        }
        .cmgs-hero-title {
          font: 700 clamp(46px, 7vw, 104px)/0.98 var(--font-display);
          text-transform: uppercase; letter-spacing: -0.02em;
          margin: 0 0 24px;
          text-shadow: 0 4px 30px rgba(0,0,0,0.5);
        }
        .cmgs-hero-title .gold {
          color: var(--gold-400);
          display: inline-block;
          background: linear-gradient(180deg, #f0d27a 0%, #d4a02a 60%, #8a6914 100%);
          -webkit-background-clip: text; background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        .cmgs-hero-lead {
          font: 400 18px/1.55 var(--font-body);
          color: rgba(255,255,255,0.88);
          max-width: 580px;
          margin: 0 0 36px;
        }
        .cmgs-hero-lead strong { color: var(--gold-300); font-weight: 600; }
        .cmgs-hero-ctas { display:flex; gap: 14px; flex-wrap: wrap; }
        .cmgs-hero-badges {
          display:flex; align-items:center; gap: 28px;
          margin-top: 56px;
          padding-top: 28px;
          border-top: 1px solid rgba(212,160,42,0.32);
          max-width: 580px;
        }
        .cmgs-hero-badge { display:flex; align-items:center; gap: 14px; }
        .cmgs-hero-badge .num {
          font: 700 clamp(32px, 3.4vw, 44px)/1 var(--font-display);
          color: var(--gold-400); letter-spacing: -0.02em;
        }
        .cmgs-hero-badge .lbl {
          font: 600 10px/1.3 var(--font-body);
          letter-spacing: 0.18em; text-transform: uppercase;
          color: rgba(255,255,255,0.7);
        }
        .cmgs-hero-badges .sep { width: 1px; height: 36px; background: rgba(212,160,42,0.32); }

        .cmgs-hero-scrollcue {
          position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
          z-index: 3; display:flex; flex-direction:column; align-items:center; gap: 8px;
          font: 600 9px/1 var(--font-body); letter-spacing: 0.3em; text-transform: uppercase;
          color: rgba(255,255,255,0.6);
        }
        .cmgs-hero-scrollcue .line { width: 1px; height: 32px; background: var(--gold-500); animation: cmgs-pulse 2s ease-in-out infinite; }
        @keyframes cmgs-pulse { 0%,100% { opacity: 0.3; transform: scaleY(0.6); } 50% { opacity: 1; transform: scaleY(1); } }
      `}</style>
    </section>
  );
}

Object.assign(window, { Hero });
