{member.role}

{member.name}

{member.bio}

{member.email && (

{t('Correo', 'Email')}

{member.email}

)} {member.cv && member.cv !== '#' && (

{member.cvLabel ? t('Perfil', 'Profile') : t('Documentos', 'Documents')}

{member.cvLabel || t('Descargar CV', 'Download CV')}

)}

); }; /* ═══════════════════════════════════════════════════════════ NOTICIAS ═══════════════════════════════════════════════════════════ */ /* ── Noticias: almacenamiento (localStorage) + utilidades ─── El sitio es estático: la semilla pública vive en data.js y el admin trabaja sobre una copia en localStorage (por navegador). "Exportar JSON" permite publicar luego ese contenido para todos. */ const NEWS_LS_KEY = 'lpde_news_v1'; const NEWS_ADMIN_KEY = 'lpde_news_admin'; const NEWS_ADMIN_PASS = 'lpde2026'; function loadNews() { try { const raw = localStorage.getItem(NEWS_LS_KEY); if (raw) { const arr = JSON.parse(raw); if (Array.isArray(arr) && arr.length) return arr; } } catch (e) {} return (window.LPDE_DATA && window.LPDE_DATA.news) || []; } function saveNews(list) { try { localStorage.setItem(NEWS_LS_KEY, JSON.stringify(list)); } catch (e) { window.alert('No se pudo guardar en este navegador (probable límite por imágenes muy pesadas). Usa imágenes más livianas o exporta el JSON.'); } } function newsUid() { return 'n' + Date.now().toString(36) + Math.random().toString(36).slice(2, 6); } const newsCtlBtn = { padding: '5px 11px', borderRadius: 999, background: 'rgba(255,255,255,0.96)', border: '1px solid var(--line)', fontSize: 11, fontWeight: 700, fontFamily: 'var(--sans)', cursor: 'pointer', boxShadow: '0 2px 8px rgba(0,0,0,0.12)', color: 'var(--ink)' }; const NewsAdminControls = ({ onEdit, onDelete }) =>

; /* ── Crédito de autoría: "Equipo X — Nombre · Nombre" (o solo nombres) ── */ const newsByline = (news) => { const names = Array.isArray(news.authors) ? news.authors.filter(Boolean) : []; if (!names.length && !news.authorGroup) return null; return { group: news.authorGroup || '', names }; }; const NewsByline = ({ news, variant = 'inline' }) => { const b = newsByline(news); if (!b) return null; const namesStr = b.names.join(' · '); if (variant === 'mini') { return (

{b.group ? {b.group}{namesStr ? ' · ' : ''} : null} {namesStr}

); } return (

{b.group &&

{b.group}

} {namesStr &&

{namesStr}

}

); }; /* ── Render de un bloque de cuerpo (vista de lectura) ── */ const NewsBlock = ({ b }) => { if (!b) return null; if (b.t === 'h') return

{b.text}

; if (b.t === 'p') return

{b.text}

; if (b.t === 'stat') return (

{b.value}

{b.label}

); if (b.t === 'list') return (

{it}

); if (b.t === 'img') return (

); return null; }; /* ── Lector de noticia (vista de visitante) ── */ const NewsReader = ({ news, onClose }) => { const { t } = useLang(); if (!news) return null; return (

{news.cover &&

}

{news.tag} {news.date}

{news.title}

{news.excerpt &&

{news.excerpt}

} {(news.body || []).map((b, i) => )} {(!news.body || news.body.length === 0) &&

{t('Esta noticia aún no tiene contenido.', 'This article has no content yet.')}

}

); }; /* ── Editor de noticia (vista de administrador) ── */ const NewsEditor = ({ item, onSave, onClose }) => { const blank = { tag: 'NOTICIA', date: '', title: '', excerpt: '', cover: '', featured: false, authorGroup: '', authors: [], body: [] }; const [d, setD] = React.useState(() => item ? JSON.parse(JSON.stringify(item)) : blank); const set = (k, v) => setD((s) => ({ ...s, [k]: v })); const readImage = (file, cb) => { if (!file) return; const r = new FileReader(); r.onload = () => cb(r.result); r.readAsDataURL(file); }; const addBlock = (t) => { const base = t === 'stat' ? { t, value: '', label: '' } : t === 'list' ? { t, items: [''] } : t === 'img' ? { t, src: '', caption: '' } : { t, text: '' }; setD((s) => ({ ...s, body: [...(s.body || []), base] })); }; const updBlock = (i, patch) => setD((s) => ({ ...s, body: s.body.map((b, j) => j === i ? { ...b, ...patch } : b) })); const moveBlock = (i, dir) => setD((s) => { const a = [...s.body]; const j = i + dir; if (j < 0 || j >= a.length) return s; [a[i], a[j]] = [a[j], a[i]]; return { ...s, body: a }; }); const delBlock = (i) => setD((s) => ({ ...s, body: s.body.filter((_, j) => j !== i) })); const submit = () => { if (!d.title.trim()) { window.alert('La noticia necesita un título.'); return; } onSave({ ...d, title: d.title.trim() }); }; const lbl = { display: 'block', fontSize: 11, fontFamily: 'var(--mono)', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--mute)', marginBottom: 6 }; const iconBtn = { width: 36, height: 36, borderRadius: 999, background: 'var(--bg-alt)', border: '1px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }; const miniBtn = { width: 28, height: 28, borderRadius: 6, background: 'var(--bg-alt)', border: '1px solid var(--line)', cursor: 'pointer', fontSize: 13, lineHeight: 1, color: 'var(--ink-soft)' }; const blockLabels = { h: 'Subtítulo', p: 'Párrafo', stat: 'Dato', list: 'Lista', img: 'Imagen' }; return (

{item ? 'Editar noticia' : 'Nueva noticia'}

Etiqueta set('tag', e.target.value)} placeholder="INVESTIGACIÓN" />

Fecha set('date', e.target.value)} placeholder="FEB 2025" />

Título set('title', e.target.value)} placeholder="Título de la noticia" />

Extracto

set('excerpt', e.target.value)} placeholder="Resumen breve que se ve en la tarjeta" /></div>

<div style={{ marginBottom: 20 }}>
          <label style={lbl}>Imagen de portada</label>
          <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
            <div style={{ width: 120, height: 80, background: 'var(--bg-alt)', border: '1px solid var(--line)', overflow: 'hidden', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--mute)' }}>
              {d.cover ? <img src={d.cover} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : <span style={{ fontSize: 11 }}>Sin foto</span>}
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'flex-start' }}>
              <input type="file" accept="image/*" onChange={(e) => readImage(e.target.files[0], (data) => set('cover', data))} style={{ fontSize: 13 }} />
              {d.cover && <button className="btn btn-link" style={{ fontSize: 13 }} onClick={() => set('cover', '')}>Quitar portada</button>}
            </div>
          </div>
        </div>

<label style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 24, fontSize: 14, cursor: 'pointer' }}>
          <input type="checkbox" checked={!!d.featured} onChange={(e) => set('featured', e.target.checked)} style={{ accentColor: 'var(--red)' }} />
          Destacar (aparece grande arriba)
        </label>

<div style={{ borderTop: '1px solid var(--line)', paddingTop: 20, marginBottom: 24 }}>
          <h3 style={{ fontFamily: 'var(--serif)', fontSize: 22, marginBottom: 16 }}>Autoría</h3>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 14 }}>
            <div>
              <label style={lbl}>Equipo o área (opcional)</label>
              <input className="input" value={d.authorGroup || ''} onChange={(e) => set('authorGroup', e.target.value)} placeholder="Equipo de Investigación de la LPDE" />
            </div>
            <div>
              <label style={lbl}>Autor(es) · uno por línea</label>
              <textarea className="input" rows={3} style={{ borderRadius: 12, resize: 'vertical' }}
                value={(d.authors || []).join('\n')}
                onChange={(e) => set('authors', e.target.value.split('\n').map((s) => s.trim()).filter((s) => s !== ''))}
                placeholder={'Luis Valverde\nHideki Harada'} />
              <div style={{ fontSize: 11, color: 'var(--mute)', marginTop: 4 }}>Se mostrarán separados por "·" debajo del título.</div>
            </div>
          </div>
        </div>

<div style={{ borderTop: '1px solid var(--line)', paddingTop: 20 }}>
          <h3 style={{ fontFamily: 'var(--serif)', fontSize: 22, marginBottom: 16 }}>Contenido</h3>
          {(d.body || []).map((b, i) =>
            <div key={i} style={{ border: '1px solid var(--line)', borderRadius: 6, padding: 14, marginBottom: 12, background: 'var(--bg)' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
                <span className="kicker">{blockLabels[b.t] || b.t}</span>
                <div style={{ display: 'flex', gap: 6 }}>
                  <button onClick={() => moveBlock(i, -1)} style={miniBtn} title="Subir">↑</button>
                  <button onClick={() => moveBlock(i, 1)} style={miniBtn} title="Bajar">↓</button>
                  <button onClick={() => delBlock(i)} style={{ ...miniBtn, color: 'var(--red)' }} title="Eliminar">✕</button>
                </div>
              </div>
              {(b.t === 'h' || b.t === 'p') &&
                <textarea className="input" rows={b.t === 'h' ? 2 : 4} style={{ borderRadius: 12, resize: 'vertical' }} value={b.text || ''} onChange={(e) => updBlock(i, { text: e.target.value })} placeholder={b.t === 'h' ? 'Subtítulo' : 'Escribe el párrafo...'} />}
              {b.t === 'stat' &&
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 10 }}>
                  <input className="input" value={b.value || ''} onChange={(e) => updBlock(i, { value: e.target.value })} placeholder="408 pts" />
                  <input className="input" value={b.label || ''} onChange={(e) => updBlock(i, { label: e.target.value })} placeholder="Descripción del dato" />
                </div>}
              {b.t === 'list' &&
                <textarea className="input" rows={4} style={{ borderRadius: 12, resize: 'vertical' }} value={(b.items || []).join('\n')} onChange={(e) => updBlock(i, { items: e.target.value.split('\n').filter((x) => x.trim() !== '') })} placeholder="Un punto por línea" />}
              {b.t === 'img' &&
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {b.src && <img src={b.src} alt="" style={{ maxHeight: 160, width: 'auto', alignSelf: 'flex-start', border: '1px solid var(--line)' }} />}
                  <input type="file" accept="image/*" onChange={(e) => readImage(e.target.files[0], (data) => updBlock(i, { src: data }))} style={{ fontSize: 13 }} />
                  <input className="input" value={b.caption || ''} onChange={(e) => updBlock(i, { caption: e.target.value })} placeholder="Pie de imagen (opcional)" />
                </div>}
            </div>
          )}
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 8 }}>
            {[['p', '+ Párrafo'], ['h', '+ Subtítulo'], ['stat', '+ Dato'], ['list', '+ Lista'], ['img', '+ Imagen']].map(([t, l]) =>
              <button key={t} onClick={() => addBlock(t)} className="btn btn-ghost" style={{ padding: '8px 14px', fontSize: 13 }}>{l}</button>
            )}
          </div>
        </div>

<div style={{ display: 'flex', gap: 12, justifyContent: 'flex-end', marginTop: 28, borderTop: '1px solid var(--line)', paddingTop: 20 }}>
          <button className="btn btn-ghost" onClick={onClose}>Cancelar</button>
          <button className="btn btn-red" onClick={submit}>Guardar noticia <Icon name="check" size={14} /></button>
        </div>
      </div>
    </Modal>
  );
};

/* ─── Newsletter: form conectado al Web App de Apps Script ───
   Reusa el mismo endpoint de consultas (rama tipo:'newsletter',
   guarda en la pestaña "Newsletter" del Sheet de consultas). */
const NEWSLETTER_WEBAPP_URL = 'https://script.google.com/macros/s/AKfycbxSrnPxbP_8F6MYfG_MDlhD34ayGQUxZOYYC809p-PX4bu-k4r6LGaNNnvijPVOJOUk/exec';

const NewsletterForm = () => {
  const { t } = useLang();
  const [correo, setCorreo] = React.useState('');
  const [status, setStatus] = React.useState(null); // {kind:'sending'|'ok'|'error', msg}
  const sending = status && status.kind === 'sending';

return (
    <form onSubmit={submit}>
      <div className="kicker" style={{ marginBottom: 12 }}>{t('Tu correo', 'Your email')}</div>
      <div style={{ display: 'flex', gap: 8 }}>
        <input
          className="input"
          type="email"
          value={correo}
          onChange={(e) => { setCorreo(e.target.value); if (status && status.kind !== 'sending') setStatus(null); }}
          placeholder={t('nombre@colegio.edu.pe', 'name@school.edu')}
          disabled={sending}
          style={{ background: '#15151A', borderColor: '#2A2A30', color: '#fff', flex: 1 }}
        />
        <button type="submit" className="btn btn-red" disabled={sending} style={sending ? { opacity: 0.6, cursor: 'wait' } : undefined}>
          {sending ? t('Enviando…', 'Sending…') : <>{t('Suscribirme', 'Subscribe')} <Icon name="arrow" /></>}
        </button>
      </div>
      {status && status.kind !== 'sending' &&
        <p style={{ fontSize: 13, marginTop: 14, fontWeight: 600, color: status.kind === 'ok' ? '#7DD87D' : '#FF8A8A' }}>{status.msg}</p>}
      <p style={{ fontSize: 12, color: '#9C9AA0', marginTop: status ? 8 : 14 }}>{t('Al suscribirte aceptas nuestra política de privacidad. Puedes darte de baja cuando quieras.', 'By subscribing you accept our privacy policy. You can unsubscribe at any time.')}</p>
    </form>
  );
};

const types = ['Todos', ...Array.from(new Set(news.map((n) => n.tag).filter(Boolean)))];
  const visible = news.filter((n) =>
    (filter === 'Todos' || n.tag === filter) &&
    (query.trim() === '' || ((n.title || '') + ' ' + (n.excerpt || '')).toLowerCase().includes(query.trim().toLowerCase()))
  );
  const ordered = visible.slice().sort((a, b) => (b.featured === true) - (a.featured === true));
  const [featured, ...rest] = ordered;

return (
    <Page screen="03 Noticias">
      {/* Header */}
      <section style={{ paddingTop: 64, paddingBottom: 48, borderBottom: '1px solid var(--line)' }}>
        <div className="shell">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', flexWrap: 'wrap', gap: 32 }}>
            <div className="reveal">
              <span className="eyebrow">{t('Noticias & Publicaciones', 'News & Publications')}</span>
              <h1 className="display" style={{ fontSize: 'clamp(48px, 7vw, 100px)', marginTop: 20 }}>
                {t('Lo que ', 'What’s ')}<em className="it">{t('pasa', 'happening')}</em>{t(' en la Liga', ' at the League')}
              </h1>
            </div>
            <div className="reveal d1" style={{ display: 'flex', alignItems: 'center', gap: 12, background: 'var(--bg-alt)', padding: '8px 8px 8px 18px', borderRadius: 999, border: '1px solid var(--line)' }}>
              <Icon name="search" size={16} />
              <input className="input" placeholder={t('Buscar...', 'Search…')} value={query} onChange={(e) => setQuery(e.target.value)} style={{ border: 'none', background: 'transparent', padding: '6px 0', width: 240 }} />
            </div>
          </div>
        </div>
      </section>

{/* Filters */}
      <section style={{ padding: '24px 0', borderBottom: '1px solid var(--line)' }}>
        <div className="shell" style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
          {types.map((tg) =>
          <button key={tg} onClick={() => setFilter(tg)} style={{
            padding: '8px 16px', borderRadius: 999,
            background: filter === tg ? 'var(--red)' : 'transparent',
            color: filter === tg ? '#fff' : 'var(--ink-soft)',
            border: '1px solid ' + (filter === tg ? 'var(--red)' : 'transparent'),
            fontSize: 13, fontWeight: 500, fontFamily: 'var(--sans)', transition: 'all 180ms'
          }}>{tg === 'Todos' ? t('Todos', 'All') : tg}</button>
          )}
        </div>
      </section>

{/* Editorial grid */}
      {ordered.length === 0
        ? <section className="section"><div className="shell" style={{ textAlign: 'center', padding: '40px 0' }}>
            <p style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 22, color: 'var(--mute)' }}>
              {query ? t('No hay noticias para tu búsqueda.', 'No news matches your search.') : t('Aún no hay noticias publicadas.', 'No news published yet.')}
            </p>
          </div></section>
        : <section className="section">
          <div className="shell">
            {/* Featured */}
            {featured &&
            <article className="reveal" style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 56, marginBottom: 80, cursor: 'pointer' }} onClick={() => setReading(featured)}>
              <div style={{ aspectRatio: '4/3', overflow: 'hidden', background: 'var(--bg-alt)' }}>
                {featured.cover
                  ? <img src={featured.cover} alt={featured.title} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                  : <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--line-strong)', fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 48 }}>LPDE</div>}
              </div>
              <div style={{ alignSelf: 'center' }}>
                <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 20 }}>
                  <span className="tag red">{featured.tag}</span>
                  <span className="kicker">{featured.date}</span>
                </div>
                <h2 className="display" style={{ fontSize: 'clamp(36px, 4vw, 56px)', lineHeight: 1.05 }}>{featured.title}</h2>
                <p style={{ fontSize: 18, color: 'var(--ink-soft)', lineHeight: 1.55, marginTop: 20 }}>{featured.excerpt}</p>
                <NewsByline news={featured} variant="mini" />
                <button className="btn btn-link" style={{ marginTop: 28 }} onClick={(e) => { e.stopPropagation(); setReading(featured); }}>{t('Leer la nota', 'Read the story')} <Icon name="arrow" size={14} /></button>
              </div>
            </article>}

{/* Rest — mixed grid */}
            {rest.length > 0 &&
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 32, gridAutoRows: 'minmax(200px, auto)' }}>
              {rest.map((n, i) =>
                <NewsCard key={n.id || i} news={n} idx={i} onOpen={setReading} />
              )}
            </div>}
          </div>
        </section>
      }

<NewsReader news={reading} onClose={() => setReading(null)} />

{/* Newsletter */}
      <section style={{ background: 'var(--ink)', color: '#fff', padding: '96px 0' }}>
        <div className="shell">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
            <div>
              <span className="eyebrow" style={{ color: 'var(--red)' }}>{t('Newsletter mensual', 'Monthly newsletter')}</span>
              <h2 className="display" style={{ color: '#fff', fontSize: 'clamp(40px, 5vw, 72px)', marginTop: 16 }}>
                {t('Suscríbete al ', 'Subscribe to the ')}<em className="it" style={{ color: 'var(--red)' }}>newsletter</em>.
              </h2>
              <p style={{ color: '#B8B8C0', fontSize: 17, lineHeight: 1.6, marginTop: 20 }}>
                {t('Una vez al mes: torneos, becas, mociones recomendadas y la columna del director. Sin spam, sin marketing.', 'Once a month: tournaments, scholarships, recommended motions and the director’s column. No spam, no marketing.')}
              </p>
            </div>
            <NewsletterForm />
          </div>
        </div>
      </section>

{/* Publicaciones */}
      <section id="publicaciones" className="section" style={{ background: 'var(--bg-alt)', scrollMarginTop: 'var(--nav-h)' }}>
        <div className="shell">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 48, flexWrap: 'wrap', gap: 24 }} className="reveal">
            <div>
              <span className="eyebrow">{t('Publicaciones LPDE', 'LPDE Publications')}</span>
              <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 56px)', marginTop: 16 }}>{t('Materiales gratuitos para profesores y debatientes.', 'Free materials for teachers and debaters.')}</h2>
              <p style={{ fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.55, marginTop: 16, maxWidth: 640 }}>
                {t('Manuales, guías y nuestra revista ', 'Manuals, guides and our magazine ')}<em style={{ fontStyle: 'italic' }}>Dialógica</em>{t('. Acceso abierto — sin pago, sin registro.', '. Open access — no fees, no sign-up.')}
              </p>
            </div>
            <a href="https://lpdebate.org/lpde/publicaciones/" className="btn btn-ghost" target="_blank" rel="noopener">{t('Ver en lpdebate.org', 'View on lpdebate.org')} <Icon name="arrow-up-right" size={14} /></a>
          </div>

{/* ─── Revista Dialógica ─── */}
          <div className="reveal" style={{ marginBottom: 48 }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 20 }}>
              <h3 className="display" style={{ fontSize: 28 }}>{t('Revista ', '')}<em className="it">Dialógica</em>{t('', ' magazine')}</h3>
              <span className="kicker" style={{ color: 'var(--mute)' }}>{(D.publications.dialogica || []).length}{t(' ediciones', ' issues')}</span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: 16 }}>
              {(D.publications.dialogica || []).map((p, i) => (
                <a key={i} href={p.url} target="_blank" rel="noopener"
                  className={`reveal d${i % 4 + 1}`}
                  style={{ background: 'var(--bg)', border: '1px solid var(--line)', padding: '24px 22px', textDecoration: 'none', color: 'var(--ink)', display: 'flex', flexDirection: 'column', gap: 12, transition: 'all 220ms ease', minHeight: 180 }}
                  onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 12px 32px rgba(0,0,0,0.06)'; e.currentTarget.style.borderColor = 'var(--red)'; }}
                  onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.borderColor = 'var(--line)'; }}
                >
                  <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.14em', color: 'var(--red)', fontWeight: 700 }}>{p.num}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.15, color: 'var(--ink)' }}>{p.title}</div>
                    <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 16, color: 'var(--ink-2)', marginTop: 6 }}>{p.edition}</div>
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 12, borderTop: '1px solid var(--line)' }}>
                    <span className="kicker">{t('Leer', 'Read')}{p.host ? t(` en ${p.host}`, ` on ${p.host}`) : ''}</span>
                    <Icon name="arrow-up-right" size={14} />
                  </div>
                </a>
              ))}
            </div>
          </div>

{/* ─── Otras publicaciones ─── */}
          <div className="reveal d1">
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 20 }}>
              <h3 className="display" style={{ fontSize: 28 }}>{t('Otras publicaciones', 'Other publications')}</h3>
              <span className="kicker" style={{ color: 'var(--mute)' }}>{(D.publications.otras || []).length}{t(' materiales', ' resources')}</span>
            </div>
            <div style={{ background: 'var(--bg)', border: '1px solid var(--line)' }}>
              {(D.publications.otras || []).map((p, i) => (
                <a key={i} href={p.url} target="_blank" rel="noopener"
                  style={{ display: 'grid', gridTemplateColumns: '60px 1fr 130px 32px', alignItems: 'center', gap: 20, padding: '20px 28px', borderTop: i > 0 ? '1px solid var(--line)' : 'none', textDecoration: 'none', color: 'var(--ink)', transition: 'background 200ms' }}
                  onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--bg-alt)'; }}
                  onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}
                >
                  <div style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--mute)' }}>{p.num}</div>
                  <h4 style={{ fontFamily: 'var(--serif)', fontSize: 19, fontWeight: 400, color: 'var(--ink)', lineHeight: 1.3 }}>{p.title}</h4>
                  <div className="kicker" style={{ color: 'var(--ink-2)' }}>{p.type}</div>
                  <div style={{ textAlign: 'right', color: 'var(--mute)' }}><Icon name="arrow-up-right" size={16} /></div>
                </a>
              ))}
            </div>
          </div>
        </div>
      </section>
    </Page>);

};

const NewsCard = ({ news, idx, onOpen }) => {
  const { t } = useLang();
  // varied sizes for editorial feel
  const layouts = [
  { cols: 'span 3', big: true },
  { cols: 'span 3', big: false },
  { cols: 'span 2', big: false },
  { cols: 'span 2', big: false },
  { cols: 'span 2', big: false }];

const layout = layouts[idx % layouts.length];
  return (
    <article className={`reveal d${idx % 4 + 1}`} style={{ gridColumn: layout.cols, position: 'relative', cursor: 'pointer', display: 'flex', flexDirection: 'column' }}
      onClick={() => onOpen(news)}>

{news.cover &&
      <div style={{ aspectRatio: layout.big ? '16/10' : '4/3', overflow: 'hidden', background: 'var(--bg-alt)', marginBottom: 20 }}>
          <img src={news.cover} alt={news.title} style={{ width: '100%', height: '100%', objectFit: 'cover', transition: 'transform 500ms ease' }}
        onMouseEnter={(e) => {e.currentTarget.style.transform = 'scale(1.03)';}}
        onMouseLeave={(e) => {e.currentTarget.style.transform = 'scale(1)';}} />
        </div>
      }
      <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 10 }}>
        <span className="tag">{news.tag}</span>
        <span className="kicker">{news.date}</span>
      </div>
      <h3 className="display" style={{ fontSize: layout.big ? 30 : 22, lineHeight: 1.1, marginBottom: 8 }}>{news.title}</h3>
      <p style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.55 }}>{news.excerpt}</p>
      <NewsByline news={news} variant="mini" />
      <div className="kicker" style={{ marginTop: 12, color: 'var(--red)' }}>{t('Leer la nota →', 'Read the story →')}</div>
    </article>);

};

/* ═══════════════════════════════════════════════════════════
   NOTICIAS · ADMINISTRADOR (vista privada — CRUD + login)
   Ruta: ?admin=noticias  o  navegar a 'noticias-admin'
   ═══════════════════════════════════════════════════════════ */
const NewsAdminLogin = ({ onOk }) => {
  const [pass, setPass] = React.useState('');
  const [err, setErr] = React.useState(false);
  const submit = (e) => {
    e && e.preventDefault();
    if (pass === NEWS_ADMIN_PASS) {
      try { localStorage.setItem(NEWS_ADMIN_KEY, '1'); } catch (e) {}
      onOk();
    } else { setErr(true); }
  };
  return (
    <section style={{ minHeight: '70vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '64px 24px', background: 'var(--bg-alt)' }}>
      <form onSubmit={submit} style={{ width: '100%', maxWidth: 420, background: 'var(--bg)', border: '1px solid var(--line)', padding: 40 }}>
        <div className="kicker" style={{ color: 'var(--red)', marginBottom: 12 }}>Acceso restringido</div>
        <h1 className="display" style={{ fontSize: 32, lineHeight: 1.1, marginBottom: 8 }}>Administración de noticias</h1>
        <p style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.55, marginBottom: 24 }}>
          Esta vista es solo para el equipo editorial de la LPDE. Ingresa la clave para gestionar las noticias del sitio.
        </p>
        <label style={{ display: 'block', fontSize: 11, fontFamily: 'var(--mono)', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--mute)', marginBottom: 6 }}>Clave</label>
        <input
          className="input"
          type="password"
          value={pass}
          onChange={(e) => { setPass(e.target.value); setErr(false); }}
          autoFocus
          placeholder="••••••••"
          style={{ width: '100%', marginBottom: err ? 8 : 20 }}
        />
        {err && <div style={{ fontSize: 13, color: 'var(--red)', marginBottom: 12 }}>Clave incorrecta.</div>}
        <button type="submit" className="btn btn-red" style={{ width: '100%', justifyContent: 'center' }}>
          Entrar <Icon name="arrow" size={14} />
        </button>
      </form>
    </section>
  );
};

if (!authed) {
    return <Page screen="03 Noticias · Admin"><NewsAdminLogin onOk={() => setAuthed(true)} /></Page>;
  }

return (
    <Page screen="03 Noticias · Admin">
      {/* Barra superior */}
      <section style={{ background: 'var(--ink)', color: '#fff', borderBottom: '1px solid #2A2A30' }}>
        <div className="shell" style={{ display: 'flex', alignItems: 'center', gap: 16, padding: '20px 0', flexWrap: 'wrap' }}>
          <div>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--red)' }}>Modo administrador</div>
            <h1 className="display" style={{ color: '#fff', fontSize: 26, lineHeight: 1.1, marginTop: 4 }}>Noticias · gestión editorial</h1>
          </div>
          <div style={{ flex: 1 }} />
          <button className="btn btn-red" style={{ padding: '10px 16px' }} onClick={() => setEditing({ _new: true })}>
            <Icon name="plus" size={14} /> Nueva noticia
          </button>
          <button className="btn btn-light" style={{ padding: '10px 16px' }} onClick={exportJSON}>Exportar JSON</button>
          <button className="btn btn-light" style={{ padding: '10px 16px' }} onClick={resetSeed}>Restaurar publicadas</button>
          <button className="btn btn-light" style={{ padding: '10px 16px' }} onClick={() => setPage && setPage('noticias')}>Ver sitio público</button>
          <button className="btn btn-light" style={{ padding: '10px 16px' }} onClick={exit}>Cerrar sesión</button>
        </div>
      </section>

{/* Info de almacenamiento */}
      <section style={{ background: 'var(--bg-alt)', borderBottom: '1px solid var(--line)' }}>
        <div className="shell" style={{ padding: '14px 0', fontSize: 13, color: 'var(--ink-2)', display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
          <span><strong style={{ color: 'var(--ink)' }}>{news.length}</strong> noticia{news.length !== 1 ? 's' : ''} en este navegador.</span>
          <span style={{ color: 'var(--mute)' }}>Los cambios se guardan en localStorage. Para publicarlos al sitio público, exporta el JSON y reemplaza la semilla en <code style={{ fontFamily: 'var(--mono)', fontSize: 12, background: 'var(--bg)', padding: '2px 6px', border: '1px solid var(--line)' }}>data.js</code>.</span>
        </div>
      </section>

{/* Lista de noticias */}
      <section className="section">
        <div className="shell">
          {news.length === 0
            ? <div style={{ textAlign: 'center', padding: '64px 24px', border: '1px dashed var(--line-strong)', background: 'var(--bg)' }}>
                <p style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 22, color: 'var(--mute)', marginBottom: 20 }}>Aún no hay noticias.</p>
                <button className="btn btn-red" onClick={() => setEditing({ _new: true })}><Icon name="plus" size={14} /> Crear la primera</button>
              </div>
            : <div style={{ border: '1px solid var(--line)', background: 'var(--bg)' }}>
                {/* Header */}
                <div style={{ display: 'grid', gridTemplateColumns: '80px 1.6fr 1fr 110px 100px 220px', alignItems: 'center', gap: 16, padding: '12px 20px', borderBottom: '1px solid var(--line)', background: 'var(--bg-alt)', fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--mute)' }}>
                  <div>Portada</div>
                  <div>Título</div>
                  <div>Autoría</div>
                  <div>Fecha</div>
                  <div>Estado</div>
                  <div style={{ textAlign: 'right' }}>Acciones</div>
                </div>
                {news.map((n, i) => {
                  const by = newsByline(n);
                  return (
                    <div key={n.id || i} style={{ display: 'grid', gridTemplateColumns: '80px 1.6fr 1fr 110px 100px 220px', alignItems: 'center', gap: 16, padding: '16px 20px', borderBottom: i < news.length - 1 ? '1px solid var(--line)' : 'none' }}>
                      <div style={{ width: 64, height: 48, background: 'var(--bg-alt)', border: '1px solid var(--line)', overflow: 'hidden', flexShrink: 0 }}>
                        {n.cover
                          ? <img src={n.cover} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                          : <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--serif)', fontStyle: 'italic', color: 'var(--mute)', fontSize: 16 }}>—</div>}
                      </div>
                      <div>
                        <div style={{ display: 'inline-block', padding: '2px 8px', background: 'var(--bg-alt)', border: '1px solid var(--line)', fontSize: 10, fontFamily: 'var(--mono)', letterSpacing: '0.1em', color: 'var(--ink-2)', marginBottom: 6 }}>{n.tag || '—'}</div>
                        <div style={{ fontFamily: 'var(--serif)', fontSize: 18, lineHeight: 1.2, color: 'var(--ink)' }}>{n.title || <span style={{ color: 'var(--mute)', fontStyle: 'italic' }}>(sin título)</span>}</div>
                      </div>
                      <div style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.4 }}>
                        {by
                          ? <>
                              {by.group && <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--red)' }}>{by.group}</div>}
                              {by.names.length > 0 && <div>{by.names.join(' · ')}</div>}
                            </>
                          : <span style={{ color: 'var(--mute)', fontStyle: 'italic' }}>Sin autor</span>}
                      </div>
                      <div style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--ink-soft)' }}>{n.date || '—'}</div>
                      <div>
                        {n.featured
                          ? <span style={{ padding: '4px 10px', background: 'var(--red)', color: '#fff', fontSize: 10, fontFamily: 'var(--mono)', letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 700 }}>Destacada</span>
                          : <span style={{ padding: '4px 10px', background: 'var(--bg-alt)', border: '1px solid var(--line)', color: 'var(--ink-2)', fontSize: 10, fontFamily: 'var(--mono)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>Publicada</span>}
                      </div>
                      <div style={{ display: 'flex', gap: 6, justifyContent: 'flex-end', flexWrap: 'wrap' }}>
                        <button className="btn btn-ghost" style={{ padding: '6px 12px', fontSize: 12 }} onClick={() => setPreview(n)}>Ver</button>
                        <button className="btn btn-ghost" style={{ padding: '6px 12px', fontSize: 12 }} onClick={() => setEditing(n)}>Editar</button>
                        <button className="btn btn-ghost" style={{ padding: '6px 12px', fontSize: 12, color: 'var(--red)', borderColor: 'var(--red)' }} onClick={() => deleteItem(n.id)}>Borrar</button>
                      </div>
                    </div>
                  );
                })}
              </div>
          }
        </div>
      </section>

{/* Modales */}
      {editing && <NewsEditor item={editing._new ? null : editing} onSave={saveItem} onClose={() => setEditing(null)} />}
      <NewsReader news={preview} onClose={() => setPreview(null)} />
    </Page>
  );
};

/* ═══════════════════════════════════════════════════════════
   CALENDARIO — snippet (en home) + página completa
   Live fetch del Sheet con fallback al snapshot en data.js
   ═══════════════════════════════════════════════════════════ */

const MONTH_SHORT = ['ENE','FEB','MAR','ABR','MAY','JUN','JUL','AGO','SEP','OCT','NOV','DIC'];
const MONTH_LONG = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
const MONTH_SHORT_EN = ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'];
const MONTH_LONG_EN = ['January','February','March','April','May','June','July','August','September','October','November','December'];

/* Etiquetas EN del chrome del calendario (tags de evento + filtros; las claves
   en español siguen mandando en la lógica y en los datos vivos del Sheet) */
const EVENT_TAG_EN = {
  'SEMINARIO': 'SEMINAR',
  'INTERNACIONAL': 'INTERNATIONAL',
  'EXTERNO': 'EXTERNAL',
  'PASADO': 'PAST',
};
const CAL_FILTERS_EN = {
  'Todos': 'All',
  'Externos': 'External',
  'Virtual': 'Online',
  'Presencial': 'In person',
  'Internacional': 'International',
  'Seminarios': 'Seminars',
};

const _CAL_MES_MAP = {
  enero: 1, febrero: 2, marzo: 3, abril: 4, mayo: 5, junio: 6,
  julio: 7, agosto: 8, septiembre: 9, octubre: 10, noviembre: 11, diciembre: 12,
};
const CALENDAR_CSV_URL = 'https://docs.google.com/spreadsheets/d/1zeV3ASYhwPq5nIEEpz8NX4nH6TOOaF9I6BuZOYQIA0E/export?format=csv';

// Divide el CSV en filas respetando saltos de línea dentro de celdas entrecomilladas
// (el Sheet tiene \n embebidos en "contacto"/"dirigido"; un split('\n') simple rompe 7 eventos).
function _splitCalCSVRows(text) {
  const rows = []; let cur = '', inQ = false;
  for (let i = 0; i < text.length; i++) {
    const ch = text[i];
    if (ch === '"') { inQ = !inQ; cur += ch; }
    else if (ch === '\n' && !inQ) { rows.push(cur); cur = ''; }
    else cur += ch;
  }
  if (cur.trim()) rows.push(cur);
  return rows;
}

const isPastEvent = (ev) => {
  if (ev.tba || !ev.day) return false;
  const today = new Date();
  const year = today.getFullYear();
  if (year > 2026) return true;
  if (year < 2026) return false;
  const m = today.getMonth() + 1;
  const d = today.getDate();
  if (ev.mesNum < m) return true;
  if (ev.mesNum === m && ev.day < d) return true;
  return false;
};

const eventTag = (ev) => {
  if (ev.id === 10) return 'TNDE';
  if (ev.seminario) return 'SEMINARIO';
  if (ev.intl) return 'INTERNACIONAL';
  if (ev.lpde) return 'LPDE';
  return 'EXTERNO';
};

const CalendarioSnippet = ({ setPage }) => {
  const events = useCalendarEvents();
  const { t, lang } = useLang();
  const MS = lang === 'en' ? MONTH_SHORT_EN : MONTH_SHORT;

// Próximos 4 eventos (no pasados, con fecha definida)
  const upcoming = events.filter(e => !isPastEvent(e) && e.day != null).slice(0, 4);

return (
    <section className="section bg-pale">
      <div className="shell">
        <div className="reveal" style={{ marginBottom: 56, display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'end' }}>
          <div>
            <span className="eyebrow">{t('Calendario 2026', '2026 Calendar')}</span>
            <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 72px)', marginTop: 16, maxWidth: '14ch' }}>
              {t('Lo que se viene en los ', 'What’s ahead in the ')}<em className="it">{t('próximos meses', 'coming months')}</em>
            </h2>
          </div>
          <p style={{ fontSize: 17, color: 'var(--ink-2)', lineHeight: 1.6, maxWidth: 460 }}>
            {t('Torneos LPDE, encuentros amistosos, seminarios virtuales y campeonatos internacionales. Los eventos LPDE aparecen marcados en oscuro; el TNDE en rojo.', 'LPDE tournaments, friendly meets, online seminars and international championships. LPDE events are shown in dark gray; the TNDE in red.')}
          </p>
        </div>

{/* Year strip — 12 meses dinámicos */}
        <div className="reveal d1" style={{ background: 'var(--bg)', border: '1px solid var(--line)', padding: '20px 24px', marginBottom: 40 }}>
          <div className="kicker" style={{ marginBottom: 12 }}>{t('Vista anual · 2026', 'Year at a glance · 2026')}</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 6 }}>
            {MS.map((m, i) => {
              const monthEvents = events.filter(e => e.mesNum === i + 1);
              const isAug = (i + 1) === 8;
              return (
                <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
                  <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.08em', color: isAug ? 'var(--red)' : 'var(--mute)', fontWeight: isAug ? 700 : 400 }}>{m}</div>
                  <div style={{ display: 'flex', gap: 3, height: 14, minHeight: 14 }}>
                    {monthEvents.map((ev, j) => {
                      const isTnde = ev.id === 10;
                      return (
                        <div key={j} style={{
                          width: 6, height: 14,
                          background: isTnde ? 'var(--red)' : (ev.lpde ? 'var(--ink)' : 'var(--line-strong)'),
                          opacity: isPastEvent(ev) ? 0.35 : 1,
                        }}/>
                      );
                    })}
                    {monthEvents.length === 0 && <div style={{ width: 6, height: 14, background: 'var(--bg-alt)' }}/>}
                  </div>
                </div>
              );
            })}
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 24, marginTop: 16, paddingTop: 12, borderTop: '1px solid var(--line)', fontSize: 11, fontFamily: 'var(--mono)', color: 'var(--mute)' }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><span style={{ width: 8, height: 8, background: 'var(--red)' }}/>TNDE</span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><span style={{ width: 8, height: 8, background: 'var(--ink)' }}/>LPDE</span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><span style={{ width: 8, height: 8, background: 'var(--line-strong)' }}/>{t('Externo', 'External')}</span>
            <span style={{ marginLeft: 'auto' }}>{events.length}{t(' eventos planificados', ' events planned')}</span>
          </div>
        </div>

{/* Próximos 4 eventos */}
        <div className="kicker reveal d2" style={{ marginBottom: 16 }}>{t('Próximos eventos', 'Upcoming events')}</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {upcoming.map((ev, i) => {
            const isTnde = ev.id === 10;
            const tag = eventTag(ev);
            return (
              <article key={ev.id} className={`reveal d${i + 1}`}
                style={{
                  background: isTnde ? 'var(--ink)' : 'var(--bg)',
                  color: isTnde ? '#fff' : 'var(--ink)',
                  border: '1px solid ' + (isTnde ? 'var(--ink)' : 'var(--line)'),
                  padding: 24,
                  display: 'flex', flexDirection: 'column', gap: 14,
                  cursor: 'pointer',
                  transition: 'all 280ms ease',
                }}
                onMouseEnter={(e2) => { e2.currentTarget.style.transform = 'translateY(-4px)'; e2.currentTarget.style.boxShadow = '0 16px 40px rgba(0,0,0,0.08)'; }}
                onMouseLeave={(e2) => { e2.currentTarget.style.transform = 'translateY(0)'; e2.currentTarget.style.boxShadow = 'none'; }}
                onClick={() => setPage('calendario')}
              >
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                  <div>
                    <div style={{ fontFamily: 'var(--serif)', fontWeight: 400, fontSize: 'clamp(48px, 5vw, 72px)', lineHeight: 0.85 }}>
                      {ev.day}{ev.isRange ? '+' : ''}
                    </div>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 4 }}>
                      <span style={{ fontFamily: 'var(--mono)', fontSize: 12, fontWeight: 700, letterSpacing: '0.1em', color: 'var(--red)' }}>{MS[ev.mesNum - 1]}</span>
                    </div>
                  </div>
                  <span style={{ padding: '3px 9px', borderRadius: 3, background: isTnde ? 'rgba(255,255,255,0.14)' : 'var(--bg-alt)', color: isTnde ? '#fff' : 'var(--ink-soft)', fontSize: 9, fontWeight: 700, letterSpacing: '0.14em', fontFamily: 'var(--mono)', border: isTnde ? '1px solid rgba(255,255,255,0.2)' : '1px solid var(--line)' }}>
                    {lang === 'en' ? (EVENT_TAG_EN[tag] || tag) : tag}
                  </span>
                </div>
                <div style={{ flex: 1 }}>
                  <h3 style={{ fontFamily: 'var(--serif)', fontSize: 18, lineHeight: 1.2, marginBottom: 10 }}>
                    {ev.name}
                  </h3>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 11, color: isTnde ? '#B8B8C0' : 'var(--ink-2)' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><Icon name="map" size={12}/> {ev.ubicacion}</div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
                      {ev.horario}
                    </div>
                  </div>
                </div>
              </article>
            );
          })}
        </div>

<div className="reveal d3" style={{ marginTop: 32, textAlign: 'center' }}>
          <button className="btn btn-ghost" onClick={() => setPage('calendario')}>
            {t('Ver calendario completo', 'View full calendar')} <Icon name="arrow-up-right" size={14}/>
          </button>
        </div>
      </div>
    </section>
  );
};

/* ─── Descarga de evento como JPG (canvas 1080×1350, estilo editorial) ───
   El layout se MIDE antes de dibujar y baja de escala hasta caber:
   garantiza que la imagen nunca salga cortada. */
const _wrapCanvasText = (ctx, text, maxWidth) => {
  const words = [];
  String(text || '').split(/\s+/).filter(Boolean).forEach((w) => {
    // trocea palabras más anchas que la caja (URLs, correos largos)
    while (ctx.measureText(w).width > maxWidth && w.length > 4) {
      let cut = w.length - 1;
      while (cut > 1 && ctx.measureText(w.slice(0, cut)).width > maxWidth) cut--;
      words.push(w.slice(0, cut));
      w = w.slice(cut);
    }
    words.push(w);
  });
  const lines = [];
  let line = '';
  words.forEach((w) => {
    const probe = line ? line + ' ' + w : w;
    if (ctx.measureText(probe).width > maxWidth && line) { lines.push(line); line = w; }
    else line = probe;
  });
  if (line) lines.push(line);
  return lines;
};

// Como _wrapCanvasText pero limita líneas y cierra con "…" si truncó
const _fitCanvasLines = (ctx, text, maxWidth, maxLines) => {
  const lines = _wrapCanvasText(ctx, text, maxWidth);
  if (lines.length <= maxLines) return lines;
  const kept = lines.slice(0, maxLines);
  let last = kept[maxLines - 1] + '…';
  while (ctx.measureText(last).width > maxWidth && last.length > 2) last = last.slice(0, -2) + '…';
  kept[maxLines - 1] = last;
  return kept;
};

const downloadEventJPG = (ev, lang) => {
  const css = getComputedStyle(document.body);
  const RED = (css.getPropertyValue('--red') || '#E30613').trim();
  const INK = (css.getPropertyValue('--ink') || '#0F0F12').trim();
  const CREAM = (css.getPropertyValue('--bg-alt') || '#F7F5EF').trim();
  const dark = ev.id === 10; // tarjeta TNDE en oscuro, como en la web
  const W = 1080, H = 1350, M = 90, CW = W - M * 2;
  const SERIF = '"Instrument Serif", Georgia, serif';
  const SANS = '"Source Sans 3", Arial, sans-serif';
  const MONO = '"JetBrains Mono", monospace';
  const bg = dark ? INK : CREAM;
  const fg = dark ? '#FFFFFF' : INK;
  const sub = dark ? '#C9C9D0' : '#4B4B53';
  const mute = dark ? '#9C9AA0' : '#6B7280';
  const past = isPastEvent(ev);
  const baseTag = eventTag(ev);
  const eventTagLabel = lang === 'en' ? (EVENT_TAG_EN[baseTag] || baseTag) : baseTag;
  const ML = lang === 'en' ? MONTH_LONG_EN : MONTH_LONG;

const draw = (logoImg) => {
    const canvas = document.createElement('canvas');
    canvas.width = W; canvas.height = H;
    const ctx = canvas.getContext('2d');
    const CONTENT_TOP = 282;
    const CONTENT_BOTTOM = H - 210; // el pie es fijo; nada puede invadirlo
    const monthName = (ML[(ev.mesNum || 12) - 1] || '').toUpperCase();
    const fechaTxt = ev.fecha || (lang === 'en' ? 'Date TBA' : 'Fecha por anunciar');
    const L = (es, en) => (lang === 'en' ? en : es);

// Dibuja (o solo mide, con dry=true) el contenido a una escala S. Devuelve la y final.
    const render = (S, dry) => {
      const fecha = Math.round(60 * S);
      const title = Math.round(74 * S), titleLH = Math.round(82 * S);
      const val = Math.round(33 * S), valLH = Math.round(43 * S);
      const gap = Math.round(34 * S);
      const maxTitle = S >= 0.9 ? 3 : 4;
      let y = CONTENT_TOP;

// Chips: categoría (+ PASADO si aplica, sin perder la categoría)
      ctx.font = '500 23px ' + MONO;
      let chipX = M;
      const chips = past ? [eventTagLabel, L('PASADO', 'PAST')] : [eventTagLabel];
      chips.forEach((c, ci) => {
        const w = ctx.measureText(c).width + 44;
        if (!dry) {
          ctx.fillStyle = ci === 0 && !past ? RED : (ci === 0 ? RED : (dark ? '#2A2A30' : '#D4D2CC'));
          if (ctx.roundRect) { ctx.beginPath(); ctx.roundRect(chipX, y, w, 48, 6); ctx.fill(); }
          else ctx.fillRect(chipX, y, w, 48);
          ctx.fillStyle = ci === 0 ? '#FFFFFF' : (dark ? '#C9C9D0' : '#4B4B53');
          ctx.fillText(c, chipX + 22, y + 33);
        }
        chipX += w + 14;
      });
      y += 48 + Math.round(44 * S);

// Mes (kicker) + fecha (serif itálica roja)
      if (!dry) {
        ctx.fillStyle = mute;
        ctx.font = '500 24px ' + MONO;
        ctx.fillText(monthName, M, y + 24);
      }
      y += 24 + Math.round(26 * S);
      ctx.font = 'italic 400 ' + fecha + 'px ' + SERIF;
      const fechaLines = _fitCanvasLines(ctx, fechaTxt, CW, 1);
      if (!dry) {
        ctx.fillStyle = RED;
        ctx.fillText(fechaLines[0], M, y + fecha * 0.78);
      }
      y += fecha + gap;

// Título
      ctx.font = '900 ' + title + 'px ' + SANS;
      const titleLines = _fitCanvasLines(ctx, ev.name, CW, maxTitle);
      titleLines.forEach((l) => {
        if (!dry) { ctx.fillStyle = fg; ctx.fillText(l, M, y + title * 0.78); }
        y += titleLH;
      });
      y += gap;

// Regla corta roja entre título y datos
      if (!dry) { ctx.fillStyle = RED; ctx.fillRect(M, y, 56, 4); }
      y += Math.round(40 * S);

// Detalles: Ubicación + Horario en dos columnas; el resto a lo ancho
      const colW = Math.floor((CW - 48) / 2);
      const block = (label, value, x, width, maxLines) => {
        if (!value) return 0;
        let by = 0;
        if (!dry) {
          ctx.fillStyle = mute;
          ctx.font = '500 21px ' + MONO;
          ctx.fillText(label.toUpperCase(), x, y + by + 21);
        }
        by += 21 + 16;
        ctx.font = '400 ' + val + 'px ' + SANS;
        const lines = _fitCanvasLines(ctx, value, width, maxLines);
        lines.forEach((l) => {
          if (!dry) { ctx.fillStyle = sub; ctx.fillText(l, x, y + by + val * 0.78); }
          by += valLH;
        });
        return by;
      };
      const h1 = block(L('Ubicación', 'Location'), ev.ubicacion, M, colW, 2);
      const h2 = block(L('Horario', 'Time'), ev.horario, M + colW + 48, colW, 2);
      if (h1 || h2) y += Math.max(h1, h2) + gap;
      const h3 = block(L('Organiza', 'Hosted by'), ev.org, M, CW, 1);
      if (h3) y += h3 + gap;
      const h4 = block(L('Dirigido a', 'For'), ev.dirigido, M, CW, S >= 0.85 ? 3 : 2);
      if (h4) y += h4 + gap;
      const h5 = block(L('Contacto', 'Contact'), ev.contacto, M, CW, S >= 0.85 ? 2 : 1);
      if (h5) y += h5;
      return y;
    };

// 1) Pasada de medición: baja la escala hasta que el contenido cabe
    const scales = [1, 0.92, 0.84, 0.76, 0.68];
    let S = scales[scales.length - 1];
    for (const s of scales) {
      if (render(s, true) <= CONTENT_BOTTOM) { S = s; break; }
    }

// 2) Pasada real
    ctx.fillStyle = bg;
    ctx.fillRect(0, 0, W, H);
    try { ctx.letterSpacing = '3px'; } catch (e) {}

// Cabecera fija: logo + kicker + línea
    if (logoImg) {
      const lh = 54, lw = lh * (logoImg.width / logoImg.height);
      ctx.drawImage(logoImg, M, M - 6, lw, lh);
    } else {
      ctx.fillStyle = RED;
      ctx.font = '900 44px ' + SANS;
      ctx.fillText('LPDE', M, M + 38);
    }
    ctx.fillStyle = mute;
    ctx.font = '500 22px ' + MONO;
    ctx.textAlign = 'right';
    ctx.fillText(lang === 'en' ? '2026 CALENDAR' : 'CALENDARIO 2026', W - M, M + 34);
    ctx.textAlign = 'left';
    ctx.strokeStyle = dark ? '#2A2A30' : '#D4D2CC';
    ctx.lineWidth = 2;
    ctx.beginPath(); ctx.moveTo(M, 206); ctx.lineTo(W - M, 206); ctx.stroke();

render(S, false);

// Pie fijo
    ctx.strokeStyle = dark ? '#2A2A30' : '#D4D2CC';
    ctx.beginPath(); ctx.moveTo(M, H - 150); ctx.lineTo(W - M, H - 150); ctx.stroke();
    ctx.fillStyle = RED;
    ctx.fillRect(M, H - 150, 64, 4);
    ctx.fillStyle = mute;
    ctx.font = '500 23px ' + MONO;
    ctx.fillText('lpdebate.org', M, H - 88);
    ctx.textAlign = 'right';
    ctx.fillText(lang === 'en' ? 'Peruvian School Debate League' : 'Liga Peruana de Debate Escolar', W - M, H - 88);
    ctx.textAlign = 'left';

canvas.toBlob((blob) => {
      if (!blob) return;
      const a = document.createElement('a');
      const slug = String(ev.name || 'evento').toLowerCase().normalize('NFD').replace(/[̀-ͯ]/g, '').replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '').slice(0, 60);
      a.href = URL.createObjectURL(blob);
      a.download = `lpde-${slug}.jpg`;
      a.click();
      setTimeout(() => URL.revokeObjectURL(a.href), 4000);
    }, 'image/jpeg', 0.92);
  };

const start = () => {
    const logo = new Image();
    logo.onload = () => draw(logo);
    logo.onerror = () => draw(null);
    logo.src = dark ? 'assets/logo-lpde-white.png' : 'assets/logo-lpde-red.png';
  };
  if (document.fonts && document.fonts.ready) document.fonts.ready.then(start);
  else start();
};

const CalendarioPage = ({ setPage }) => {
  const events = useCalendarEvents();
  const { t, lang } = useLang();
  const ML = lang === 'en' ? MONTH_LONG_EN : MONTH_LONG;
  const [filter, setFilter] = React.useState('Todos');
  const [hidePast, setHidePast] = React.useState(false);
  const filters = ['Todos', 'LPDE', 'Externos', 'Virtual', 'Presencial', 'Internacional', 'Seminarios'];

const matchFilter = (e) => {
    if (filter === 'Todos') return true;
    if (filter === 'LPDE') return e.lpde;
    if (filter === 'Externos') return e.ext;
    if (filter === 'Virtual') return e.virtual;
    if (filter === 'Presencial') return e.presencial;
    if (filter === 'Internacional') return e.intl;
    if (filter === 'Seminarios') return e.seminario;
    return true;
  };

const visible = events.filter(matchFilter).filter((e) => !hidePast || !isPastEvent(e));

// Agrupar por mes
  const byMonth = {};
  visible.forEach(e => {
    const k = e.mesNum;
    if (!byMonth[k]) byMonth[k] = [];
    byMonth[k].push(e);
  });

return (
    <Page screen="08 Calendario">
      {/* Hero */}
      <section style={{ paddingTop: 80, paddingBottom: 64, borderBottom: '1px solid var(--line)' }}>
        <div className="shell">
          <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 64, alignItems: 'end' }}>
            <div className="reveal">
              <span className="eyebrow">{t('Calendario 2026', '2026 Calendar')}</span>
              <h1 className="display" style={{ fontSize: 'clamp(56px, 8vw, 120px)', marginTop: 20, maxWidth: '14ch' }}>
                {t('Todo lo que se viene en la ', 'Everything coming up at the ')}<em className="it">{t('Liga', 'League')}</em>
              </h1>
            </div>
            <p className="reveal d1" style={{ fontSize: 17, color: 'var(--ink-2)', lineHeight: 1.6 }}>
              {events.length}{t(' eventos planificados para 2026: torneos LPDE, encuentros amistosos, seminarios virtuales, campeonatos externos e internacionales. Usa los filtros para ver solo lo que te interesa.', ' events planned for 2026: LPDE tournaments, friendly meets, online seminars, and external and international championships. Use the filters to see only what interests you.')}
            </p>
          </div>
        </div>
      </section>

{/* Filtros sticky */}
      <section style={{ padding: '24px 0', borderBottom: '1px solid var(--line)', position: 'sticky', top: 'var(--nav-h)', background: 'rgba(255,255,255,0.92)', backdropFilter: 'blur(8px)', zIndex: 50 }}>
        <div className="shell" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {filters.map(f =>
              <button key={f} onClick={() => setFilter(f)} style={{
                padding: '8px 16px', borderRadius: 999,
                background: filter === f ? 'var(--ink)' : 'transparent',
                color: filter === f ? '#fff' : 'var(--ink-soft)',
                border: '1px solid ' + (filter === f ? 'var(--ink)' : 'var(--line)'),
                fontSize: 13, fontWeight: 600, fontFamily: 'var(--sans)',
                cursor: 'pointer', transition: 'all 180ms',
              }}>{lang === 'en' ? (CAL_FILTERS_EN[f] || f) : f}</button>
            )}
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <button onClick={() => setHidePast(!hidePast)} aria-pressed={hidePast} style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '8px 16px', borderRadius: 999,
              background: hidePast ? 'var(--red)' : 'transparent',
              color: hidePast ? '#fff' : 'var(--ink-soft)',
              border: '1px solid ' + (hidePast ? 'var(--red)' : 'var(--line)'),
              fontSize: 13, fontWeight: 600, fontFamily: 'var(--sans)',
              cursor: 'pointer', transition: 'all 180ms',
            }}>
              {hidePast && <Icon name="check" size={13}/>}
              {t('Ocultar pasados', 'Hide past events')}
            </button>
            <div className="kicker">{visible.length}{t(' evento', ' event')}{visible.length !== 1 ? 's' : ''}</div>
          </div>
        </div>
      </section>

{/* Eventos agrupados por mes */}
      <section className="section">
        <div className="shell">
          {Object.keys(byMonth).sort((a, b) => parseInt(a) - parseInt(b)).map(monthKey => {
            const month = parseInt(monthKey);
            const list = byMonth[monthKey];
            return (
              <div key={monthKey} style={{ marginBottom: 56 }}>
                <div className="reveal" style={{ display: 'flex', alignItems: 'baseline', gap: 18, marginBottom: 28, paddingBottom: 14, borderBottom: '1px solid var(--line)' }}>
                  <span style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 22, color: 'var(--red)' }}>{String(month).padStart(2, '0')}</span>
                  <h2 className="display" style={{ fontSize: 36 }}>{ML[month - 1]}</h2>
                  <div className="kicker" style={{ marginLeft: 'auto' }}>{list.length}{t(' evento', ' event')}{list.length > 1 ? 's' : ''}</div>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: 16 }}>
                  {list.map((ev, i) => {
                    const past = isPastEvent(ev);
                    const isTnde = ev.id === 10;
                    const tag = past ? 'PASADO' : eventTag(ev);
                    return (
                      <article key={ev.id} className={`reveal d${(i % 4) + 1}`}
                        style={{
                          background: isTnde ? 'var(--ink)' : 'var(--bg)',
                          color: isTnde ? '#fff' : 'var(--ink)',
                          border: '1px solid ' + (isTnde ? 'var(--ink)' : 'var(--line)'),
                          padding: 22,
                          display: 'flex', flexDirection: 'column', gap: 14,
                          opacity: past ? 0.55 : 1,
                          transition: 'all 280ms ease',
                        }}
                        onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 12px 32px rgba(0,0,0,0.06)'; }}
                        onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}
                      >
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 10 }}>
                          <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.08em', color: isTnde ? '#fff' : 'var(--ink-soft)' }}>
                            {ev.fecha}
                          </div>
                          <span style={{ padding: '3px 8px', borderRadius: 3, background: isTnde ? 'rgba(255,255,255,0.14)' : 'var(--bg-alt)', color: isTnde ? '#fff' : 'var(--ink-soft)', fontSize: 9, fontWeight: 700, letterSpacing: '0.14em', fontFamily: 'var(--mono)', whiteSpace: 'nowrap' }}>
                            {lang === 'en' ? (EVENT_TAG_EN[tag] || tag) : tag}
                          </span>
                        </div>
                        <h3 style={{ fontFamily: 'var(--serif)', fontSize: 19, lineHeight: 1.25 }}>
                          {ev.name}
                        </h3>
                        <div style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 12, color: isTnde ? '#B8B8C0' : 'var(--ink-2)' }}>
                          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><Icon name="map" size={12}/> {ev.ubicacion}</div>
                          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
                            {ev.horario}
                          </div>
                          <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.06em', textTransform: 'uppercase', marginTop: 4, color: isTnde ? '#9C9AA0' : 'var(--mute)' }}>
                            {t('Organiza · ', 'Hosted by · ')}{ev.org}
                          </div>
                          <div style={{ fontSize: 12 }}>
                            {t('Dirigido a: ', 'For: ')}{ev.dirigido}
                          </div>
                        </div>
                        {ev.contacto && (
                          <div style={{ paddingTop: 12, borderTop: '1px solid ' + (isTnde ? '#2A2A30' : 'var(--line)'), fontSize: 11, color: isTnde ? '#9C9AA0' : 'var(--mute)', fontFamily: 'var(--mono)' }}>
                            {ev.contacto}
                          </div>
                        )}
                        <div style={{ marginTop: 'auto', paddingTop: 10, display: 'flex', justifyContent: 'flex-end' }}>
                          <button
                            onClick={(e) => { e.stopPropagation(); downloadEventJPG(ev, lang); }}
                            title={t('Descarga esta tarjeta como imagen JPG', 'Download this card as a JPG image')}
                            style={{
                              display: 'inline-flex', alignItems: 'center', gap: 6,
                              background: 'none', border: 'none', cursor: 'pointer',
                              fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase',
                              color: isTnde ? '#9C9AA0' : 'var(--mute)', padding: '4px 0',
                            }}
                            onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--red)'; }}
                            onMouseLeave={(e) => { e.currentTarget.style.color = isTnde ? '#9C9AA0' : 'var(--mute)'; }}
                          >
                            <Icon name="download" size={12}/> {t('Descargar JPG', 'Download JPG')}
                          </button>
                        </div>
                      </article>
                    );
                  })}
                </div>
              </div>
            );
          })}
        </div>
      </section>

{/* CTA back to home */}
      <section style={{ background: 'var(--bg-alt)', padding: '64px 0', borderTop: '1px solid var(--line)' }}>
        <div className="shell" style={{ textAlign: 'center' }}>
          <p style={{ fontFamily: 'var(--serif)', fontSize: 20, fontStyle: 'italic', color: 'var(--ink-soft)', marginBottom: 20 }}>
            {t('Información actualizada desde el calendario oficial LPDE.', 'Information updated live from the official LPDE calendar.')}
          </p>
          <button className="btn btn-primary" onClick={() => setPage('presentacion')}>
            {t('Volver al inicio', 'Back to home')} <Icon name="arrow" size={14}/>
          </button>
        </div>
      </section>
    </Page>
  );
};

Object.assign(window, { PresentacionPage, EquipoPage, NoticiasPage, NoticiasAdminPage, CalendarioSnippet, CalendarioPage, TEAM_EN, TeamCard, TeamModal });

/* FrentCard — distinct visual treatment per frente */
const FrentCard = ({ f, idx }) => {
  const base = {
    position: 'relative', overflow: 'hidden', cursor: 'pointer',
    padding: '40px 40px 36px', minHeight: 360,
    display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
    transition: 'transform 320ms ease',
  };
  const variants = {
    photo: {
      ...base, background: '#0B0B0E', color: '#fff',
      backgroundImage: `linear-gradient(135deg, rgba(11,11,14,0.86) 0%, rgba(11,11,14,0.55) 100%), url(${f.img})`,
      backgroundSize: 'cover', backgroundPosition: 'center',
    },
    red: { ...base, background: 'var(--red)', color: '#fff' },
    cream: { ...base, background: '#F4F1E8', color: 'var(--ink)' },
    outline: { ...base, background: '#0B0B0E', color: '#fff', border: '1px solid #2A2A30' },
  };
  const numColor = {
    photo: 'rgba(255,255,255,0.96)',
    red: '#fff',
    cream: 'var(--red)',
    outline: 'var(--red)',
  }[f.variant];
  const tagStyle = {
    photo: { background: 'rgba(255,255,255,0.14)', color: '#fff', border: '1px solid rgba(255,255,255,0.2)' },
    red: { background: 'rgba(255,255,255,0.18)', color: '#fff', border: '1px solid rgba(255,255,255,0.25)' },
    cream: { background: 'var(--ink)', color: '#fff', border: '1px solid var(--ink)' },
    outline: { background: 'transparent', color: 'var(--red)', border: '1px solid var(--red)' },
  }[f.variant];
  const descColor = {
    photo: 'rgba(255,255,255,0.78)',
    red: 'rgba(255,255,255,0.86)',
    cream: 'var(--ink-2)',
    outline: '#A0A0A8',
  }[f.variant];
  const statLabelColor = {
    photo: 'rgba(255,255,255,0.55)',
    red: 'rgba(255,255,255,0.7)',
    cream: 'var(--ink-2)',
    outline: '#7A7A82',
  }[f.variant];

return (
    <div className={`reveal d${idx + 1}`} onClick={f.cta} style={variants[f.variant]}
      onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-6px)'; }}
      onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; }}
    >
      {/* Giant editorial number watermark */}
      <div aria-hidden="true" style={{
        position: 'absolute', top: -20, right: -24,
        fontFamily: 'var(--serif)', fontStyle: 'italic', fontWeight: 400,
        fontSize: 'clamp(180px, 22vw, 320px)', lineHeight: 0.78,
        letterSpacing: '-0.06em', color: numColor,
        opacity: f.variant === 'cream' ? 0.18 : (f.variant === 'red' ? 0.28 : 0.14),
        pointerEvents: 'none', userSelect: 'none',
      }}>{f.n}</div>

{/* Top row: tag */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', position: 'relative', zIndex: 2 }}>
        <span style={{ ...tagStyle, display: 'inline-flex', alignItems: 'center', padding: '5px 12px', borderRadius: 999, fontSize: 10, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', fontFamily: 'var(--sans)' }}>
          {f.tag}
        </span>
        <span style={{ width: 36, height: 36, borderRadius: 999, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: f.variant === 'cream' ? 'var(--ink)' : 'rgba(255,255,255,0.12)', color: f.variant === 'cream' ? '#fff' : 'currentColor', border: f.variant === 'cream' ? 'none' : '1px solid rgba(255,255,255,0.18)' }}>
          <Icon name="arrow-up-right" size={14} />
        </span>
      </div>

{/* Bottom block */}
      <div style={{ position: 'relative', zIndex: 2 }}>
        <h3 className="display" style={{ fontSize: 'clamp(36px, 3.4vw, 52px)', color: 'inherit', lineHeight: 1, marginBottom: 14 }}>
          {f.t}
        </h3>
        <p style={{ color: descColor, fontSize: 15, lineHeight: 1.55, maxWidth: '32ch', marginBottom: 28 }}>{f.d}</p>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, paddingTop: 20, borderTop: '1px solid ' + (f.variant === 'cream' ? 'rgba(0,0,0,0.12)' : 'rgba(255,255,255,0.14)') }}>
          <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 'clamp(40px, 4vw, 56px)', lineHeight: 0.9, color: f.variant === 'cream' ? 'var(--red)' : (f.variant === 'red' ? '#fff' : 'var(--red)') }}>
            {f.stat}
          </div>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: statLabelColor, lineHeight: 1.3 }}>
            {f.statLabel}
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { FrentCard });

{t('Argumentar', 'Argument')}
{t('da sentido al', 'gives meaning to')}
{t('mundo que ', 'the world we ')}{t('habitamos', 'inhabit')}

{t('Casi una década formando a las próximas ', 'Nearly a decade shaping Peru’s next generation of ')}{t('voces críticas', 'critical voices')}{t(' del país.', '.')}

{t('Una comunidad ', 'An ')}{t('académica', 'academic')}{t(', no un torneo.', ' community, not a tournament.')}

{t('De la fundación al ', 'From our founding to ')}{t('tricampeonato mundial', 'three straight world titles')}.

{e.t}

{t('Cuatro frentes,', 'Four fronts,')}
{t('una misma ', 'one shared ')}{t('misión', 'mission')}

{t('Torneo Nacional', 'National School')}
{t('de ', '')}{t('Debate Escolar', 'Debate Tournament')}

{t('Cien colegios.', 'One hundred schools.')}
{t('Un solo ', 'One shared ')}{t('campo de juego', 'playing field')}

{t('La plataforma de ', 'The LPDE’s ')}e-learning{t(' de la LPDE', ' platform')}

{t('Universidades y colegios que ', 'Universities and schools that ')}{t('apuestan', 'believe')}{t(' por el debate.', ' in debate.')}

{t('¿Eres profesor, estudiante o colegio?', 'Are you a teacher, a student or a school?')}

{t('Las personas detrás de la ', 'The people behind the ')}{t('liga', 'League')}

TBA

{member.name}

{member.name}

{b.text}

{news.title}

{item ? 'Editar noticia' : 'Nueva noticia'}

{t('Argumentar', 'Argument')} {t('da sentido al', 'gives meaning to')} {t('mundo que ', 'the world we ')}{t('habitamos', 'inhabit')}

{t('Casi una década formando a las próximas ', 'Nearly a decade shaping Peru’s next generation of ')}{t('voces críticas', 'critical voices')}{t(' del país.', '.')}

{t('Una comunidad ', 'An ')}{t('académica', 'academic')}{t(', no un torneo.', ' community, not a tournament.')}

{t('De la fundación al ', 'From our founding to ')}{t('tricampeonato mundial', 'three straight world titles')}.

{e.t}

{t('Cuatro frentes,', 'Four fronts,')}{t('una misma ', 'one shared ')}{t('misión', 'mission')}

{t('Torneo Nacional', 'National School')}{t('de ', '')}{t('Debate Escolar', 'Debate Tournament')}

{t('Cien colegios.', 'One hundred schools.')}{t('Un solo ', 'One shared ')}{t('campo de juego', 'playing field')}

{t('La plataforma de ', 'The LPDE’s ')}e-learning{t(' de la LPDE', ' platform')}

{t('Universidades y colegios que ', 'Universities and schools that ')}{t('apuestan', 'believe')}{t(' por el debate.', ' in debate.')}

{t('¿Eres profesor, estudiante o colegio?', 'Are you a teacher, a student or a school?')}

{t('Las personas detrás de la ', 'The people behind the ')}{t('liga', 'League')}

TBA

{member.name}

{member.name}

{b.text}

{news.title}

{item ? 'Editar noticia' : 'Nueva noticia'}

{t('Argumentar', 'Argument')}
{t('da sentido al', 'gives meaning to')}
{t('mundo que ', 'the world we ')}{t('habitamos', 'inhabit')}

{t('Cuatro frentes,', 'Four fronts,')}
{t('una misma ', 'one shared ')}{t('misión', 'mission')}

{t('Torneo Nacional', 'National School')}
{t('de ', '')}{t('Debate Escolar', 'Debate Tournament')}

{t('Cien colegios.', 'One hundred schools.')}
{t('Un solo ', 'One shared ')}{t('campo de juego', 'playing field')}