// Quiénes somos — misión, visión y objetivos
function QuienesSomos() {
  return (
    <section id="nosotros" className="py-20 lg:py-28 bg-bone-200">
      <div className="max-w-[1400px] mx-auto px-5 lg:px-10">

        <div className="grid lg:grid-cols-12 gap-10 lg:gap-16 mb-12 lg:mb-16 items-end">
          <div className="lg:col-span-7 reveal">
            <div className="font-mono text-[10px] tracking-[0.28em] uppercase text-ink-900/60 mb-3">
              02 — QUIÉNES SOMOS
            </div>
            <h2 className="font-display text-[clamp(44px,7vw,108px)] text-ink-900">
              Una <span className="text-fire-500">corporación</span><br/>
              hecha en la calle.
            </h2>
          </div>
          <p className="reveal lg:col-span-4 lg:col-start-9 text-[14.5px] leading-relaxed text-ink-900/85">
            {NOSOTROS.intro}
          </p>
        </div>

        <div className="grid md:grid-cols-2 gap-px bg-ink-900 border-2 border-ink-900 mb-4">
          <div className="bg-bone-100 p-7 lg:p-9 reveal">
            <div className="font-mono text-[10px] tracking-[0.22em] uppercase text-fire-600 mb-3">Misión</div>
            <p className="text-[15px] leading-relaxed text-ink-900">{NOSOTROS.mision}</p>
          </div>
          <div className="bg-ink-900 text-bone-100 p-7 lg:p-9 reveal" style={{ transitionDelay: '80ms' }}>
            <div className="font-mono text-[10px] tracking-[0.22em] uppercase text-electric-400 mb-3">Visión</div>
            <p className="text-[15px] leading-relaxed text-bone-100/90">{NOSOTROS.vision}</p>
          </div>
        </div>

        <div className="border-2 border-t-0 border-ink-900 bg-bone-100 p-7 lg:p-9">
          <div className="font-mono text-[10px] tracking-[0.22em] uppercase text-ink-900/60 mb-4">Objetivos</div>
          <div className="grid md:grid-cols-3 gap-6 lg:gap-8">
            {NOSOTROS.objetivos.map((o, i) => (
              <div key={i} className="reveal" style={{ transitionDelay: `${i*70}ms` }}>
                <div className="font-display text-[40px] text-fire-500 leading-none mb-2">0{i+1}</div>
                <p className="text-[13.5px] leading-relaxed text-ink-900/85">{o}</p>
              </div>
            ))}
          </div>
        </div>

      </div>
    </section>
  );
}

window.QuienesSomos = QuienesSomos;