// 06 — Ciencia en tu plato (grid de 8 tarjetas científicas)
function CCiencia() {
  const [, t] = window.useLang();
  return (
    <section className="cgclm-ciencia">
      <style>{`
        .cgclm-ciencia { padding: 80px 40px; background: var(--c-cream); }
        .cgclm-ciencia .csh-head {
          display: flex; align-items: end; justify-content: space-between;
          gap: 24px; margin-bottom: 40px; flex-wrap: wrap;
        }
        .cgclm-ciencia .csh-kicker {
          display: inline-flex; align-items: center; gap: 8px;
          font: 500 11px var(--font-body);
          letter-spacing: 0.18em; text-transform: uppercase;
          color: var(--c-green-deep);
          padding: 6px 14px;
          border: 1px solid var(--c-green-deep);
          border-radius: 999px;
        }
        .cgclm-ciencia .csh-title {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: clamp(28px, 3.6vw, 44px);
          line-height: 1.05;
          letter-spacing: -0.02em;
          margin: 14px 0 8px;
          color: var(--c-ink);
          max-width: 18ch;
          text-wrap: balance;
        }
        .cgclm-ciencia .csh-lede {
          font: 400 16px var(--font-body);
          color: var(--c-ink-soft);
          max-width: 56ch;
          text-wrap: pretty;
        }
        .cgclm-ciencia .csh-script {
          font-family: var(--font-script);
          font-size: clamp(40px, 6vw, 80px);
          color: var(--c-red);
          line-height: 1;
          align-self: end;
        }
        .cgclm-ciencia .csh-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 16px;
        }
        .cgclm-ciencia .csh-card {
          background: var(--c-cream);
          border: 1px solid var(--c-line);
          border-radius: 16px;
          padding: 24px;
          display: flex; flex-direction: column;
          min-height: 320px;
          position: relative;
          overflow: hidden;
          transition: all .35s cubic-bezier(.6,.2,.2,1);
        }
        .cgclm-ciencia .csh-card:hover {
          transform: translateY(-4px);
          box-shadow: 0 24px 40px -20px rgba(31,33,24,0.18);
        }
        .cgclm-ciencia .csh-card .csh-bar {
          position: absolute; left: 0; top: 0;
          width: 4px; height: 100%;
          background: var(--card-color, var(--c-green));
        }
        .cgclm-ciencia .csh-num {
          font-family: var(--font-impact);
          font-size: 11px; letter-spacing: 0.18em;
          color: var(--c-ink-soft);
          margin-bottom: 18px;
        }
        .cgclm-ciencia .csh-photo {
          width: 100%; aspect-ratio: 4/3;
          background:
            repeating-linear-gradient(135deg, rgba(0,0,0,0.05) 0 4px, transparent 4px 8px),
            var(--card-color, var(--c-green));
          border-radius: 8px;
          margin-bottom: 16px;
          display: flex; align-items: end; padding: 8px;
          font: 500 9px monospace;
          color: rgba(255,255,255,0.85);
          letter-spacing: 0.04em;
          opacity: 0.92;
        }
        .cgclm-ciencia .csh-name {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: 19px;
          line-height: 1.25;
          letter-spacing: -0.01em;
          margin: 0 0 10px;
          text-wrap: balance;
          color: var(--c-ink);
        }
        .cgclm-ciencia .csh-desc {
          font: 400 13px/1.5 var(--font-body);
          color: var(--c-ink-soft);
          flex: 1;
          text-wrap: pretty;
        }
        .cgclm-ciencia .csh-tag {
          display: inline-block;
          font: 600 10px var(--font-body);
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--card-color, var(--c-green));
          margin-top: 14px;
          align-self: flex-start;
          padding: 4px 0;
          border-top: 1px solid var(--c-line);
          width: 100%;
        }
        .cgclm-ciencia .csh-cta-row {
          margin-top: 36px;
          display: flex; justify-content: center;
        }
        .cgclm-ciencia .csh-cta {
          font: 600 14px var(--font-body);
          padding: 14px 22px;
          background: var(--c-ink); color: var(--c-cream);
          border-radius: 999px;
          text-decoration: none;
          display: inline-flex; align-items: center; gap: 8px;
          transition: all .25s;
        }
        .cgclm-ciencia .csh-cta:hover {
          background: var(--c-red);
          transform: translate(2px, -2px);
        }
        @media (max-width: 1100px) {
          .cgclm-ciencia .csh-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 600px) {
          .cgclm-ciencia { padding: 56px 22px; }
          .cgclm-ciencia .csh-grid { grid-template-columns: 1fr; }
        }
      `}</style>

      <div className="csh-head">
        <div>
          <span className="csh-kicker">— {t.ciencia.kicker}</span>
          <h2 className="csh-title">{t.ciencia.title}</h2>
          <p className="csh-lede">{t.ciencia.lede}</p>
        </div>
        <div className="csh-script">{t.ciencia.kicker}</div>
      </div>

      <div className="csh-grid">
        {t.ciencia.cards.map((c, i) => (
          <article key={i} className="csh-card" style={{ '--card-color': c.color }}>
            <div className="csh-bar"></div>
            <div className="csh-num">{c.num}</div>
            <div className="csh-photo"><span>[ photo · {c.tag.toLowerCase()} ]</span></div>
            <h3 className="csh-name">{c.t}</h3>
            <p className="csh-desc">{c.d}</p>
            <span className="csh-tag">— {c.tag}</span>
          </article>
        ))}
      </div>

      <div className="csh-cta-row">
        <a href="#" className="csh-cta">{t.ciencia.cta} <Arrow size={14} /></a>
      </div>
    </section>
  );
}

window.CCiencia = CCiencia;