function Metodologia() {
  const steps = [
    { num: '01', title: 'Diagnóstico', desc: 'Sesiones con stakeholders, auditoría visual, benchmark y análisis competitivo. Salimos con la jugada clara.' },
    { num: '02', title: 'Definición', desc: 'Posicionamiento, narrativa y dirección creativa. Un brief estratégico que alinea al equipo entero.' },
    { num: '03', title: 'Diseño', desc: 'Identidad, UX/UI o producto según la carta. Iteramos en sprints con feedback estructurado.' },
    { num: '04', title: 'Entrega', desc: 'Handoff técnico, guía de marca y documentación. Tu equipo queda listo para escalar sin nosotros.' },
  ];

  return (
    <section className="metodologia" id="proceso">
      <div className="metodologia__head">
        <div className="eyebrow reveal">04 · Cómo trabajamos</div>
        <h2 className="h-section reveal" style={{ marginTop: 24, '--delay': '100ms' }}>
          Sin azar.<br/><span className="italic-display">Cuatro tiempos.</span>
        </h2>
      </div>

      <div className="metodologia__steps">
        {steps.map((s, i) => (
          <div key={i} className="metodologia__step reveal" style={{ '--delay': `${i * 100}ms` }} data-hover>
            <div className="metodologia__step-num">— {s.num}</div>
            <div>
              <h3 className="metodologia__step-title">{s.title}</h3>
              <p className="metodologia__step-desc">{s.desc}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}
window.Metodologia = Metodologia;