function Experiencias() {
  return (
    <section className="bean-sec exp-section" id="experiencias">
      <Sparkle size={48} style={{ top: '10%', left: '6%', transform: 'rotate(-12deg)' }} color="var(--cream-3)" />
      <Sparkle size={36} style={{ bottom: '14%', right: '8%' }} color="var(--cream-3)" />
      <Sparkle size={28} style={{ top: '40%', right: '4%' }} color="var(--cream-3)" />

      <div className="container">
        <div className="sec-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 14, color: 'var(--cream-3)' }}>
              ⟢ Para curiosos
            </div>
            <h2>Experiencias<br/>de barra.</h2>
          </div>
          <p style={{ maxWidth: 360, fontSize: 17, lineHeight: 1.45 }}>
            Si vienes con tiempo y ganas de explorar, te montamos algo más serio. Reserva en la barra o por DM.
          </p>
        </div>

        <div className="exp-grid">
          <div className="exp-card">
            <div className="icon-badge"><IconBean size={32} color="var(--cream-3)" /></div>
            <h3>Experiencia<br/>sensorial</h3>
            <p>
              Prueba el mismo café preparado de tres formas diferentes:<br/>
              <strong>espresso + cortado + filtro manual.</strong> Una hora con el barista para detectar cómo cambia el grano según el método.
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
              <div className="exp-price">9 <small>/</small> 12<small>€</small></div>
              <div style={{ fontSize: 13, fontFamily: 'var(--mono)' }}>~60 MIN · 1–2 PAX</div>
            </div>
          </div>

          <div className="exp-card">
            <div className="icon-badge" style={{ background: 'var(--matcha)' }}>
              <IconCup size={28} color="var(--cream-3)" />
            </div>
            <h3>Filtro<br/>manual</h3>
            <p>
              Pregunta en la barra por el filtro del <strong>tostador invitado</strong> o por nuestros filtros especiales con café congelado. Cada semana algo distinto.
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
              <div className="exp-price" style={{ background: 'var(--matcha)' }}>5 <small>—</small> 20<small>€</small></div>
              <div style={{ fontSize: 13, fontFamily: 'var(--mono)' }}>EN BARRA · SIN RESERVA</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Experiencias });