function Fuerzas() {
  const fuerzas = [
    {
      num: '01',
      suit: '♠',
      name: <>Rigor <em>estratégico</em></>,
      palo: 'Picas',
      desc: 'Actuamos con intelecto y autoridad. No diseñamos sin pensar; cada decisión tiene un fundamento lógico y datos detrás.',
    },
    {
      num: '02',
      suit: '♣',
      name: <>Propósito y <em>significado</em></>,
      palo: 'Tréboles',
      desc: 'Investigamos para dar profundidad. Buscamos el porqué para que cada proyecto florezca con sentido.',
    },
    {
      num: '03',
      suit: '♦',
      name: <>Excelencia <em>visual</em></>,
      palo: 'Diamantes',
      desc: 'Ejecución precisa y sistémica. La claridad y la calidad técnica son innegociables en nuestra entrega.',
    },
    {
      num: '04',
      suit: '♥',
      name: <>El alma del <em>proyecto</em></>,
      palo: 'Corazones',
      desc: 'Representa la pasión y la meta del partner. Protegemos y damos voz al corazón de cada negocio que tomamos.',
    },
  ];

  return (
    <section className="fuerzas" id="fuerzas">
      <div className="fuerzas__head">
        <div>
          <div className="eyebrow reveal">02 · Quiénes somos</div>
          <h2 className="h-section fuerzas__title reveal" style={{ marginTop: 24, '--delay': '100ms' }}>
            Cuatro fuerzas,<br/><span className="italic-display" style={{ color: 'var(--accent)' }}>una sola</span> obsesión.
          </h2>
        </div>
        <p className="lede reveal" style={{ '--delay': '200ms', alignSelf: 'end' }}>
          Somos cuatro perfiles senior unidos por la excelencia. Cada palo de la baraja representa una fuerza específica que ponemos sobre la mesa.
        </p>
      </div>

      <div className="fuerzas__cards">
        {fuerzas.map((f, i) => (
          <div key={i} className="fuerza-card reveal" style={{ '--delay': `${i * 80}ms` }} data-hover>
            <div>
              <div className="fuerza-card__num">{f.num} · {f.palo}</div>
              <div className="fuerza-card__suit">{f.suit}</div>
            </div>
            <div>
              <h3 className="fuerza-card__name">{f.name}</h3>
              <p className="fuerza-card__desc">{f.desc}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}
window.Fuerzas = Fuerzas;