function Especialidad() {
  const pillars = [
    {
      title: 'Tostadores invitados',
      body: 'Cada semana rota un café invitado en la barra. Lo pides como extra y te llevas algo nuevo en cada visita.',
    },
    {
      title: 'Filtro como ritual',
      body: 'Filtro manual con V60 y AeroPress. Te explicamos cada origen, lavado o natural, y por qué te va a saber a lo que te va a saber.',
    },
    {
      title: 'Leche de competición',
      body: 'La misma que usan los baristas en campeonato. Texturiza fino y deja un latte art que da pena beberse. Casi.',
    },
    {
      title: 'Tostadas hasta la 1',
      body: 'Aceite de Solo, mollete de Málaga, jamón ibérico, burrata, hummus de remolacha. Desayuno serio, no de relleno.',
    },
  ];

  return (
    <section className="bean-sec especialidad" id="especialidad">
      <Sparkle size={48} style={{ top: '8%', right: '6%', transform: 'rotate(20deg)' }} color="var(--cream-3)" />
      <Sparkle size={32} style={{ bottom: '12%', left: '4%' }} color="var(--cream-3)" />

      <div className="container">
        <div className="sec-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 14 }}>
              ⟢ Filosofía
            </div>
            <h2>
              Café de<br/>especialidad,<br/>
              <span style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontWeight: 400, color: 'var(--cream-3)' }}>
                sin postureo.
              </span>
            </h2>
          </div>
          <div style={{ maxWidth: 360 }}>
            <p className="esp-lead">
              Llevamos años obsesionados con el grano, la curva de tueste y el agua. Si te interesa, te lo contamos. Si no, te ponemos un buen <em>flat white</em> y a otra cosa.
            </p>
          </div>
        </div>

        <div className="esp-grid">
          <div className="pillars">
            {pillars.map((p, i) => (
              <div className="pillar" key={i}>
                <div className="pillar-num">{String(i+1).padStart(2,'0')}</div>
                <div>
                  <h3>{p.title}</h3>
                  <p>{p.body}</p>
                </div>
              </div>
            ))}
          </div>

          <div style={{ position: 'sticky', top: 100 }}>
            <div style={{
              background: 'var(--ink)',
              color: 'var(--cream-3)',
              border: 'var(--border)',
              borderRadius: 28,
              padding: 32,
              boxShadow: '10px 10px 0 var(--ink)',
              transform: 'rotate(-1.5deg)',
            }}>
              <div className="eyebrow" style={{ color: 'var(--orange)', marginBottom: 18 }}>
                ⟢ Café invitado
              </div>
              <div className="display" style={{ fontSize: 56, lineHeight: 0.9, marginBottom: 18 }}>
                El grano<br/>de la semana
              </div>
              <p style={{ fontSize: 15, lineHeight: 1.5, opacity: 0.9, marginBottom: 22 }}>
                Rotamos el café invitado cada semana. Pregunta en la barra por el origen y las notas de cata del que tenemos ahora mismo.
              </p>
              <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                <span style={{
                  padding: '6px 12px',
                  border: '2px solid var(--cream-3)',
                  borderRadius: 999,
                  fontFamily: 'var(--mono)',
                  fontSize: 12,
                  fontWeight: 500,
                }}>FILTRO</span>
                <span style={{
                  padding: '6px 12px',
                  border: '2px solid var(--cream-3)',
                  borderRadius: 999,
                  fontFamily: 'var(--mono)',
                  fontSize: 12,
                  fontWeight: 500,
                }}>+0.3€</span>
                <span style={{
                  padding: '6px 12px',
                  background: 'var(--orange)',
                  color: 'var(--cream-3)',
                  border: '2px solid var(--orange)',
                  borderRadius: 999,
                  fontFamily: 'var(--mono)',
                  fontSize: 12,
                  fontWeight: 700,
                }}>ESTA SEMANA</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Especialidad });