function Directives() {
  const people = CMGS_DATA.directives;

  return (
    <section id="directivos" className="cmgs-dir section">
      <div className="container">
        <div className="section-opener">
          <p className="eyebrow">— Liderazgo institucional —</p>
          <div className="divider"><span className="line"/><span className="dot"/><span className="line"/></div>
          <h2 className="title">Directivos</h2>
          <p className="lead">
            Un equipo con trayectoria militar y académica dedicado a la formación
            integral de nuestros cadetes.
          </p>
        </div>

        <div className="cmgs-dir-seal" aria-hidden="true">
          <img src="assets/logos/logo-colegio.png" alt="" loading="lazy" decoding="async" />
        </div>

        <div className="cmgs-dir-grid">
          {people.map((p, i) => (
            <article key={i} className="cmgs-dir-card">
              <div className="cmgs-dir-photo">
                <img src={p.img} alt={p.name} loading="lazy" decoding="async" />
                <span className="cmgs-dir-photo-frame"/>
              </div>
              {p.rank && <div className="cmgs-dir-rank">{p.rank}</div>}
              <h3 className="cmgs-dir-name">{p.name}</h3>
              <div className="cmgs-dir-role">{p.role}</div>
            </article>
          ))}
        </div>
      </div>

      <style>{`
        .cmgs-dir { position: relative; background: var(--paper); overflow: hidden; }
        .cmgs-dir-seal {
          position: absolute; right: -160px; top: 40%;
          width: 480px; height: 480px; opacity: 0.05;
          pointer-events: none;
        }
        .cmgs-dir-seal img { width: 100%; height: 100%; object-fit: contain; }
        .cmgs-dir-grid {
          display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
          position: relative; z-index: 1;
        }
        @media (max-width: 880px) { .cmgs-dir-grid { grid-template-columns: repeat(2, 1fr); } }
        /* En celulares pequeños reducimos el espacio entre tarjetas para que respiren */
        @media (max-width: 420px) { .cmgs-dir-grid { gap: 14px; } }
        .cmgs-dir-card { text-align: center; }
        .cmgs-dir-photo {
          position: relative; aspect-ratio: 4/5; margin-bottom: 18px; overflow: hidden;
          border-radius: 8px;
          background: var(--navy-800);
        }
        .cmgs-dir-photo img {
          width: 100%; height: 100%; object-fit: cover;
          /* Anclamos la imagen arriba para que la cabeza NUNCA se recorte;
             el recorte (si lo hay) sucede en la parte baja del pecho. */
          object-position: center top;
          filter: grayscale(0.25) contrast(1.05);
          transition: filter 360ms, transform 460ms var(--ease-out);
        }
        .cmgs-dir-card:hover .cmgs-dir-photo img { filter: grayscale(0); transform: scale(1.04); }
        .cmgs-dir-photo-frame {
          position: absolute; inset: 0; pointer-events: none;
          border: 2px solid transparent;
          transition: border-color 360ms;
        }
        .cmgs-dir-card:hover .cmgs-dir-photo-frame { border-color: var(--gold-500); }
        .cmgs-dir-rank {
          font: 600 10px/1 var(--font-body);
          letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-600);
          margin-bottom: 6px;
        }
        .cmgs-dir-name {
          font: 600 15px/1.2 var(--font-display); text-transform: uppercase;
          letter-spacing: 0.02em; color: var(--navy-900); margin: 0 0 4px;
        }
        .cmgs-dir-role { font: 400 13px/1.4 var(--font-body); color: var(--stone-500); }
      `}</style>
    </section>
  );
}

Object.assign(window, { Directives });