/* ═══════════════ IV Torneo Descentralizado Nacional · Juliaca, Puno (?page=torneo-puno) ═══════════════
   Fuentes: entrada de WordPress /4to-descentralizado-puno/ (17 sep 2026), flyer oficial
   "POST IV Descentralizado Puno.jpg" y tabla "Horario IV Descentralizado".
   Reemplaza a la entrada de WordPress (301 en el .htaccess raíz). */

const TP_FORM_EQUIPOS_URL = 'https://forms.gle/FX67Zrd24V5U1eYr7';
const TP_FORM_ESPECTADORES_URL = 'https://forms.gle/pPJKR5AhyQuzRgePA';

// Materiales de preparación (los mismos enlaces de la entrada original).
const TP_MANUAL_WSDC_LPDE_URL = 'https://cidedidactica.org/lpde-manual-de-iniciacion-al-debate-en-formato-wsdc/';
const TP_MANUAL_TNDE_URL = 'https://drive.google.com/file/d/1sWyIJiCiPMJE-N4vwbNDrKSPJLgqKTRs/view?usp=sharing';
const TP_MANUAL_MED_URL = 'https://drive.google.com/file/d/1eUS8Uy6Kxjaq7ETjoP9Q8fXd-gD2Aidz/view?usp=sharing';

const TP_SEDE_MAPS_URL = 'https://www.google.com/maps/search/?api=1&query=I.E.P.+Elena+de+Santa+Mar%C3%ADa+Juliaca';

const TP_FECHAS_CLAVE = [
  {
    fecha: ['10 de octubre', 'October 10'],
    title: ['Cierre de inscripciones', 'Registration closes'],
    desc: ['Último día para inscribir a la delegación, o antes si se completan las 20 vacantes.', 'Last day to register a delegation, or earlier if the 20 places are filled.'],
  },
  {
    fecha: ['12, 14 y 16 de octubre', 'October 12, 14 and 16'],
    title: ['Talleres de preparación', 'Preparation workshops'],
    desc: ['Tres sesiones virtuales en vivo para equipos inscritos y jueces voluntarios.', 'Three live online sessions for registered teams and volunteer judges.'],
  },
  {
    fecha: ['23, 24 y 25 de octubre', 'October 23, 24 and 25'],
    title: ['Torneo', 'Tournament'],
    desc: ['Tres días de competencia presencial en la I.E.P. Elena de Santa María de Juliaca.', 'Three days of in-person competition at I.E.P. Elena de Santa María in Juliaca.'],
  },
  {
    fecha: ['26 de octubre', 'October 26'],
    title: ['Día de turismo', 'Tourism day'],
    desc: ['Día recomendado para conocer Puno. Sin actividad conjunta, pero con miembros del equipo aún en la ciudad.', 'Recommended day to explore Puno. No joint activity, but team members will still be in town.'],
  },
];

const TP_TALLERES = [
  {
    fecha: ['Lunes 12 de octubre · 8:00 – 9:00 p. m.', 'Monday, October 12 · 8:00 – 9:00 p.m.'],
    title: ['Charla de resolución de dudas y apoyo logístico para viajes', 'Q&A session and travel logistics support'],
    desc: [
      'Espacio para resolver preguntas sobre la inscripción, el viaje a Juliaca, el hospedaje y la organización del torneo.',
      'A session to answer questions about registration, travel to Juliaca, lodging and the tournament organization.',
    ],
  },
  {
    fecha: ['Miércoles 14 de octubre · 7:30 – 9:00 p. m.', 'Wednesday, October 14 · 7:30 – 9:00 p.m.'],
    title: ['Taller de resolución de dudas sobre el formato WSDC', 'WSDC format Q&A workshop'],
    desc: [
      'Repaso de la estructura del formato World Schools, los roles de cada orador y las dinámicas de las rondas impromptu.',
      'A review of the World Schools format structure, each speaker’s role and the dynamics of impromptu rounds.',
    ],
  },
  {
    fecha: ['Viernes 16 de octubre · 7:30 – 9:30 p. m.', 'Friday, October 16 · 7:30 – 9:30 p.m.'],
    title: ['Taller de adjudicación en formato WSDC', 'WSDC adjudication workshop'],
    desc: [
      'Cómo se decide un debate: criterios de evaluación, puntos de choque y retroalimentación. Dirigido especialmente a los jueces voluntarios.',
      'How a debate is decided: evaluation criteria, clash points and feedback. Aimed especially at volunteer judges.',
    ],
  },
];

const TP_CRONOGRAMA = [
  {
    label: ['Día 1', 'Day 1'],
    date: ['Viernes 23 de octubre', 'Friday, October 23'],
    rows: [
      { h: '9:00 – 9:45', a: ['Check-in', 'Check-in'], d: ['Recepción de participantes.', 'Participants arrive.'] },
      { h: '9:45 – 10:30', a: ['Inauguración', 'Opening ceremony'], d: ['Ceremonia de inauguración.', 'Opening ceremony.'] },
      { h: '10:30 – 12:00', a: ['Talleres 1', 'Workshops 1'], d: ['Primera ronda de talleres presenciales.', 'First block of in-person workshops.'], taller: true },
      { h: '12:00 – 13:30', a: ['Talleres 2', 'Workshops 2'], d: ['Segunda ronda de talleres presenciales.', 'Second block of in-person workshops.'], taller: true },
      { h: '13:30 – 15:00', a: ['Almuerzo', 'Lunch'], d: ['Almuerzo opcional en el colegio o delivery.', 'Optional lunch at the school or delivery.'], meal: true },
      { h: '15:00 – 17:30', a: ['Ronda 1', 'Round 1'], d: ['Moción impromptu · con retroalimentación.', 'Impromptu motion · with feedback.'], ronda: true },
      { h: '17:30 – 18:00', a: ['Debate de muestra', 'Demonstration debate'], d: ['Sobre la moción de la Ronda 1.', 'On the Round 1 motion.'] },
    ],
  },
  {
    label: ['Día 2', 'Day 2'],
    date: ['Sábado 24 de octubre', 'Saturday, October 24'],
    rows: [
      { h: '8:00 – 8:45', a: ['Check-in', 'Check-in'], d: ['Recepción de participantes.', 'Participants arrive.'] },
      { h: '8:45 – 9:00', a: ['Indicaciones', 'Briefing'], d: ['Indicaciones para el Día 2.', 'Instructions for Day 2.'] },
      { h: '9:00 – 11:30', a: ['Ronda 2', 'Round 2'], d: ['Moción impromptu · con retroalimentación.', 'Impromptu motion · with feedback.'], ronda: true },
      { h: '11:30 – 12:00', a: ['Debate de muestra', 'Demonstration debate'], d: ['Sobre la moción de la Ronda 2.', 'On the Round 2 motion.'] },
      { h: '12:00 – 13:30', a: ['Almuerzo', 'Lunch'], d: ['Almuerzo opcional en el colegio o delivery.', 'Optional lunch at the school or delivery.'], meal: true },
      { h: '13:30 – 16:00', a: ['Ronda 3', 'Round 3'], d: ['Moción impromptu · con retroalimentación.', 'Impromptu motion · with feedback.'], ronda: true },
      { h: '16:00 – 16:30', a: ['Debate de muestra', 'Demonstration debate'], d: ['Sobre la moción de la Ronda 3.', 'On the Round 3 motion.'] },
      { h: '16:30 – 19:00', a: ['Ronda 4', 'Round 4'], d: ['Moción impromptu · con retroalimentación.', 'Impromptu motion · with feedback.'], ronda: true },
      { h: '19:00 – 19:30', a: ['Debate de muestra', 'Demonstration debate'], d: ['Sobre la moción de la Ronda 4.', 'On the Round 4 motion.'] },
    ],
  },
  {
    label: ['Día 3', 'Day 3'],
    date: ['Domingo 25 de octubre', 'Sunday, October 25'],
    rows: [
      { h: '8:00 – 8:45', a: ['Check-in', 'Check-in'], d: ['Recepción de participantes.', 'Participants arrive.'] },
      { h: '8:45 – 9:00', a: ['Indicaciones', 'Briefing'], d: ['Indicaciones para el Día 3.', 'Instructions for Day 3.'] },
      { h: '9:00 – 11:30', a: ['Cuartos de final', 'Quarterfinals'], d: ['Moción impromptu · con retroalimentación.', 'Impromptu motion · with feedback.'], ronda: true },
      { h: '12:00 – 12:15', a: ['Anuncio de semifinalistas', 'Semifinalists announcement'], d: ['Se anuncian los clasificados a la semifinal.', 'Teams advancing to the semifinal are announced.'] },
      { h: '12:15 – 13:30', a: ['Almuerzo', 'Lunch'], d: ['Almuerzo opcional en el colegio o delivery.', 'Optional lunch at the school or delivery.'], meal: true },
      { h: '13:30 – 16:00', a: ['Semifinal', 'Semifinal'], d: ['Moción impromptu · con retroalimentación.', 'Impromptu motion · with feedback.'], ronda: true },
      { h: '16:00 – 16:15', a: ['Anuncio de finalistas', 'Finalists announcement'], d: ['Se anuncia el pase a la final.', 'The finalists are announced.'] },
      { h: '16:15 – 18:15', a: ['Final', 'Grand final'], d: ['Ronda silenciosa: el resultado se anuncia en la premiación.', 'Silent round: the result is announced at the awards ceremony.'], ronda: true },
      { h: '18:30 – 19:30', a: ['Premiación y clausura', 'Awards and closing'], d: ['Entrega de reconocimientos y clausura del torneo.', 'Awards ceremony and closing of the tournament.'] },
    ],
  },
];

/* Comité académico del torneo (biografías de la convocatoria). */
const TP_EQUIPO = [
  {
    name: 'Felipe Zenteno',
    role: ['Director Académico · LPDE', 'Academic Director · LPDE'],
    img: 'assets/equipo/felipe-zenteno.jpg?v=3',
    bio: [
      'Filósofo y maestrando en docencia universitaria. Cofundador y exdirector de la Selección Nacional de Debate Escolar. Campeón del Torneo de Debate Universitario OPEN PUCP (2023) y del Torneo de Debate Interuniversitario ToDI PUCP 2025. Fue entrenador del Colegio San Clemente (bicampeón nacional de debate) y de la Sociedad de Debate de la UPCH. Actualmente es entrenador del Colegio Áleph y director académico de la LPDE.',
      'Philosopher and master’s candidate in university teaching. Co-founder and former director of the National School Debate Team. Champion of the OPEN PUCP University Debate Tournament (2023) and the ToDI PUCP 2025 Inter-University Debate Tournament. He coached Colegio San Clemente (two-time national debate champion) and the UPCH Debate Society. He currently coaches Colegio Áleph and is the LPDE’s academic director.',
    ],
  },
  {
    name: 'Dante León',
    role: ['Director de Operaciones · LPDE', 'Operations Director · LPDE'],
    img: 'assets/equipo/dante-leon.jpg',
    bio: [
      'Pedagogo con estudios en Economía y Negocios Internacionales, maestrando en Educación (Tecnológico de Monterrey). Cofundador de la Liga Peruana de Debate Escolar (LPDE) y del Torneo Nacional de Debate Escolar (antes TIDE). Subcampeón Nacional de Debate Universitario (2017) y campeón del Torneo de Debate Universitario OPEN PUCP (2023). Actual director de operaciones de la LPDE, profesor de debate en St. George’s College y el Colegio Salcantay, y docente de la Universidad ESAN.',
      'Educator with studies in Economics and International Business, master’s candidate in Education (Tecnológico de Monterrey). Co-founder of the Peruvian School Debate League (LPDE) and of the National School Debate Tournament (formerly TIDE). National University Debate runner-up (2017) and champion of the OPEN PUCP University Debate Tournament (2023). Current LPDE operations director, debate teacher at St. George’s College and Colegio Salcantay, and lecturer at ESAN University.',
    ],
  },
  {
    name: 'Sofía Pacheco',
    role: ['Directora de Relaciones Interinstitucionales · LPDE / SNDE', 'Inter-Institutional Relations Director · LPDE / SNDE'],
    img: 'assets/equipo/sofia-pacheco.jpg',
    bio: [
      'Abogada y maestranda en docencia universitaria. Cofundadora del Torneo Nacional de Debate Escolar (antes TIDE). Subcampeona Nacional de Debate Universitario (2017). Actual directora de relaciones interinstitucionales de la LPDE y team manager de la Selección Nacional de Debate Escolar. Fue entrenadora del Colegio Montealto y del Colegio San Agustín de Lima.',
      'Lawyer and master’s candidate in university teaching. Co-founder of the National School Debate Tournament (formerly TIDE). National University Debate runner-up (2017). Current LPDE inter-institutional relations director and team manager of the National School Debate Team. She coached Colegio Montealto and Colegio San Agustín in Lima.',
    ],
  },
];

const TP_HOTELES = [
  {
    name: 'Samkauta Hotel & Suite',
    dir: 'Jr. Benigno Ballón 1031, Juliaca',
    ref: ['A 15 minutos del colegio en taxi (aprox.)', 'About 15 minutes from the school by taxi'],
    tarifas: [['Habitación doble: S/ 150 por noche (aprox.)', 'Double room: about S/ 150 per night']],
  },
  {
    name: 'Casa Suite',
    dir: 'Jr. Ignacio Miranda 340, Juliaca',
    ref: ['A 13 minutos del colegio en taxi (aprox.)', 'About 13 minutes from the school by taxi'],
    tarifas: [['Habitación doble: S/ 170 por noche (aprox.)', 'Double room: about S/ 170 per night']],
  },
  {
    name: 'Hotel California',
    dir: 'Jr. Callao N.º 218, Juliaca',
    ref: ['A 8 minutos del colegio en taxi (aprox.)', 'About 8 minutes from the school by taxi'],
    tarifas: [['Habitación doble: S/ 180 por noche (aprox.)', 'Double room: about S/ 180 per night']],
  },
];

const TP_PREMIOS = [
  { k: ['Equipo campeón', 'Champion team'], v: ['Trofeo y medallas', 'Trophy and medals'] },
  { k: ['Equipo subcampeón', 'Runner-up team'], v: ['Trofeo y medallas', 'Trophy and medals'] },
  { k: ['Tercer puesto', 'Third place'], v: ['Trofeo y medallas', 'Trophy and medals'] },
  { k: ['Top 10 de oradores', 'Top 10 speakers'], v: ['Medallas', 'Medals'] },
];

const TorneoPunoPage = ({ setPage }) => {
  const { t: tr, lang } = useLang();
  const L = (es, en) => (lang === 'en' ? en : es);
  const [tpDay, setTpDay] = React.useState(0);
  const day = TP_CRONOGRAMA[tpDay];
  const scrollTo = (id) => (e) => { e.preventDefault(); const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: 'smooth' }); };
  return (
    <Page screen="Torneo Puno">
      <div style={{ '--red': '#C8161D', '--red-deep': '#0F2540', '--red-tint': '#FBE7E8' }}>

        {/* Hero — split */}
        <section style={{ background: 'var(--red-deep)', color: '#fff', position: 'relative', overflow: 'hidden', paddingTop: 48, paddingBottom: 0 }}>
          <div className="shell" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'center', width: '100%', paddingBottom: 56 }}>
            <div>
              <div className="reveal" style={{ display: 'flex', alignItems: 'center', gap: 12, color: 'rgba(255,255,255,0.85)', fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 24 }}>
                <span style={{ width: 32, height: 1, background: '#fff' }} />
                {tr('Torneo Descentralizado Nacional de Debate Escolar', 'National Decentralized School Debate Tournament')}
              </div>
              <h1 className="display reveal d1" style={{ color: '#fff', fontSize: 'clamp(56px, 8vw, 130px)', lineHeight: 0.94 }}>
                {tr('IV Torneo', '4th Tournament')}<br />
                <em style={{ fontStyle: 'italic', opacity: 0.92 }}>Puno 2026</em>
              </h1>
              <p className="reveal d2" style={{ color: 'rgba(255,255,255,0.92)', fontSize: 21, marginTop: 28, maxWidth: 520, lineHeight: 1.45 }}>
                {tr('Viernes 23, sábado 24 y domingo 25 de octubre', 'Friday, October 23 to Sunday, October 25')}<br />
                {tr('I.E.P. Elena de Santa María · Juliaca, Puno', 'I.E.P. Elena de Santa María · Juliaca, Puno')}
              </p>
              <div className="reveal d2" style={{ display: 'inline-flex', alignItems: 'center', gap: 12, marginTop: 22, padding: '12px 18px', border: '1px solid rgba(255,255,255,0.35)', background: 'rgba(255,255,255,0.10)', borderRadius: 4, maxWidth: 520 }}>
                <span style={{ fontFamily: 'var(--serif)', fontSize: 34, lineHeight: 1, color: '#fff' }}>20</span>
                <span style={{ fontSize: 14, color: 'rgba(255,255,255,0.92)', lineHeight: 1.45 }}>
                  {tr('vacantes en total, asignadas por orden de inscripción. Máximo 6 equipos de Lima Metropolitana. Inscripciones abiertas hasta el 10 de octubre.',
                      'places in total, assigned in order of registration. Up to 6 teams from Metropolitan Lima. Registration open until October 10.')}
                </span>
              </div>
              <div className="reveal d3" style={{ display: 'flex', gap: 12, marginTop: 36, flexWrap: 'wrap', alignItems: 'center' }}>
                <a className="btn" href={TP_FORM_EQUIPOS_URL} target="_blank" rel="noopener"
                  style={{ background: '#fff', color: 'var(--red-deep)', fontWeight: 700, boxShadow: '0 8px 24px rgba(0,0,0,0.25)' }}>
                  {tr('Inscribe a tu equipo', 'Register your team')} <Icon name="arrow-up-right" size={14} />
                </a>
                <a href="#cronograma" onClick={scrollTo('cronograma')} className="btn btn-light">
                  {tr('Ver cronograma', 'See the schedule')} <Icon name="arrow" size={14} />
                </a>
                <a href="#viaje" onClick={scrollTo('viaje')} className="btn btn-light">
                  {tr('Cómo llegar y dónde dormir', 'Travel and lodging')} <Icon name="arrow" size={14} />
                </a>
              </div>
            </div>
            <div className="reveal d2" style={{ aspectRatio: '1/1', overflow: 'hidden', background: 'var(--red-deep)', alignSelf: 'stretch', minHeight: 320 }}>
              <img src="assets/torneo-puno/puno-torito.jpg" alt={tr('Torito de Pucará, ilustración del torneo', 'Pucará bull, tournament illustration')} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}/>
            </div>
          </div>
        </section>

        {/* Quick facts strip */}
        <section style={{ background: 'var(--ink)', color: '#fff', padding: '40px 0' }}>
          <div className="shell">
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 32 }}>
              {[
                { num: 20, label: tr('Vacantes · por orden de inscripción', 'Places · in order of registration') },
                { num: 7, label: tr('Rondas: 4 preliminares, cuartos, semifinal y final', 'Rounds: 4 prelims, quarters, semifinal and final') },
                { num: 3, label: tr('Días de torneo · 100 % presencial', 'Tournament days · fully in person') },
                { num: 10, label: tr('Jueces con experiencia que viajan desde Lima', 'Experienced judges travelling from Lima') },
                { num: tr('Gratuita', 'Free'), label: tr('Participación sin costo de inscripción', 'No registration fee') },
              ].map((s, i) => {
                const isNum = typeof s.num === 'number';
                return (
                  <div key={i} className={`reveal d${i + 1}`} style={{ borderLeft: '2px solid var(--red)', paddingLeft: 20 }}>
                    <div style={{ fontFamily: 'var(--serif)', fontSize: isNum ? 48 : 34, lineHeight: 1, color: '#fff', fontStyle: isNum ? 'normal' : 'italic' }}>
                      {isNum ? <CountUp to={s.num} /> : s.num}
                    </div>
                    <div className="kicker" style={{ color: '#9C9AA0', marginTop: 8 }}>{s.label}</div>
                  </div>
                );
              })}
            </div>
          </div>
        </section>

        {/* Organizan */}
        <section className="section-tight" style={{ background: 'var(--bg)', borderBottom: '1px solid var(--line)' }}>
          <div className="shell">
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 48, alignItems: 'center', justifyContent: 'space-between' }}>
              <div className="reveal" style={{ display: 'flex', flexWrap: 'wrap', gap: 28, alignItems: 'center' }}>
                <span className="kicker" style={{ color: 'var(--red)' }}>{tr('Un evento de', 'An event by')}</span>
                <img src="assets/logo-lpde-red.png" alt="Liga Peruana de Debate Escolar"
                  style={{ height: 44, width: 'auto', display: 'block' }} />
              </div>
              <div className="reveal d1" style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 20 }}>
                <span className="kicker" style={{ color: 'var(--mute)' }}>{tr('Coorganizado por', 'Co-organized by')}</span>
                <img src="assets/torneo-puno/logo-elena-santa-maria.png" alt="I.E.P. Elena de Santa María"
                  style={{ height: 64, width: 'auto', display: 'block', mixBlendMode: 'multiply' }} />
                <div style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.4, maxWidth: 180 }}>
                  {tr('I.E.P. Elena de Santa María · Juliaca', 'I.E.P. Elena de Santa María · Juliaca')}
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Presentación + detalles */}
        <section className="section bg-cool">
          <div className="shell">
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80 }}>
              <div className="reveal">
                <span className="eyebrow">{tr('El torneo', 'The tournament')}</span>
                <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 64px)', marginTop: 16 }}>
                  {tr('Cuarto año consecutivo en ', 'Fourth year in a row in ')}<em className="it">Juliaca</em>
                </h2>
                <p style={{ fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.65, marginTop: 24, maxWidth: '42ch' }}>
                  {tr('El debate escolar en el Perú ha crecido de manera significativa en los últimos años. Este año obtuvimos el tetracampeonato en el Mundial de Debate Escolar (MED Panamá 2026) y el Torneo Nacional de Debate Escolar reunió a más de 70 equipos de distintas regiones. Aún falta camino para descentralizar la práctica del debate: por eso, junto con la I.E.P. Elena de Santa María, lanzamos la cuarta edición del Torneo Descentralizado, que por cuarto año consecutivo se realiza en Juliaca.',
                      'School debate in Peru has grown significantly in recent years. This year we won our fourth consecutive World Schools Debating Championship in Spanish (MED Panama 2026), and the National School Debate Tournament brought together more than 70 teams from across the country. There is still a long way to go to decentralize debate: that is why, together with I.E.P. Elena de Santa María, we are launching the fourth edition of the Decentralized Tournament, held in Juliaca for the fourth year in a row.')}
                </p>
                <p style={{ fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.65, marginTop: 16, maxWidth: '42ch' }}>
                  {tr('La LPDE y el Colegio Elena de Santa María garantizan la calidad académica del torneo: convocan y cubren los viáticos de 10 jueces con experiencia en debate escolar y universitario que viajan desde Lima, y el equipo académico de la LPDE y la SNDE estará presente juzgando.',
                      'The LPDE and Colegio Elena de Santa María guarantee the tournament’s academic quality: they bring in and cover the travel expenses of 10 experienced school and university debate judges from Lima, and the LPDE and SNDE academic team will be present adjudicating.')}
                </p>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 24 }}>
                  <a className="btn" href={TP_FORM_EQUIPOS_URL} target="_blank" rel="noopener">
                    {tr('Registro de equipos', 'Team registration')} <Icon name="arrow-up-right" size={14} />
                  </a>
                  <a className="btn btn-ghost" href={TP_SEDE_MAPS_URL} target="_blank" rel="noopener">
                    <Icon name="map" size={14} /> {tr('Ver la sede en el mapa', 'See the venue on the map')}
                  </a>
                </div>
              </div>
              <div className="reveal d1" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 16, alignContent: 'start' }}>
                {[
                  { k: tr('Fechas', 'Dates'), v: tr('Viernes 23, sábado 24 y domingo 25 de octubre de 2026', 'Friday, Oct 23 to Sunday, Oct 25, 2026') },
                  { k: tr('Sede', 'Venue'), v: tr('I.E.P. Elena de Santa María · Parque del Niño de Juliaca, Yavero, Juliaca, Puno', 'I.E.P. Elena de Santa María · Parque del Niño de Juliaca, Yavero, Juliaca, Puno') },
                  { k: tr('Organizan', 'Organized by'), v: tr('LPDE y Colegio Elena de Santa María', 'LPDE and Colegio Elena de Santa María') },
                  { k: tr('Formato', 'Format'), v: tr('WSDC · 4 rondas preliminares, cuartos de final, semifinal y final. Todas las mociones son impromptu.', 'WSDC · 4 preliminary rounds, quarterfinals, semifinal and final. All motions are impromptu.') },
                  { k: tr('Vacantes', 'Places'), v: tr('20 equipos por orden de inscripción, un equipo por institución. Máximo 6 equipos de Lima Metropolitana.', '20 teams in order of registration, one team per school. Up to 6 teams from Metropolitan Lima.') },
                  { k: tr('Inscripciones', 'Registration'), v: tr('Abiertas hasta el 10 de octubre o hasta completar las vacantes.', 'Open until October 10 or until all places are filled.') },
                  { k: tr('Dirigido a', 'Open to'), v: tr('Estudiantes de 1.º a 5.º de secundaria', 'Students in grades 1 to 5 of secondary school') },
                  { k: tr('Modalidad', 'Mode'), v: tr('100 % presencial en Juliaca', 'Fully in person in Juliaca') },
                  { k: tr('Idioma', 'Language'), v: tr('Únicamente en español. Esta edición no cuenta con categoría en inglés.', 'Spanish only. This edition does not have an English-language category.') },
                  { k: tr('Costo', 'Cost'), v: tr('La participación es gratuita. Transporte y hospedaje corren por cuenta de cada delegación.', 'Participation is free. Travel and lodging are covered by each delegation.') },
                ].map((c, i) => (
                  <div key={i} style={{ border: '1px solid var(--line)', background: 'var(--bg)', padding: '22px 24px' }}>
                    <div className="kicker" style={{ color: 'var(--red)', marginBottom: 8 }}>{c.k}</div>
                    <div style={{ fontSize: 15, color: 'var(--ink)', lineHeight: 1.5 }}>{c.v}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* Quiénes participan */}
            <div style={{ marginTop: 64, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 24 }}>
              <div className="reveal" style={{ background: 'var(--ink)', color: '#fff', padding: '32px 32px', borderRadius: 4 }}>
                <span className="kicker" style={{ color: 'var(--red)' }}>{tr('Colegios miembros LPDE', 'LPDE member schools')}</span>
                <h3 style={{ fontFamily: 'var(--serif)', fontSize: 24, marginTop: 10, color: '#fff' }}>{tr('De todo el Perú', 'From across Peru')}</h3>
                <p style={{ fontSize: 14, color: '#C9C7CE', lineHeight: 1.6, marginTop: 10 }}>
                  {tr('Los colegios miembros de la LPDE pueden participar a nivel nacional, incluidos los de Lima Metropolitana.', 'LPDE member schools may participate nationwide, including those from Metropolitan Lima.')}
                </p>
                <button className="btn btn-link" onClick={() => setPage('colegios')} style={{ marginTop: 14, color: '#fff' }}>
                  {tr('Revisa si tu colegio es miembro', 'Check if your school is a member')} <Icon name="arrow" size={14} />
                </button>
              </div>
              <div className="reveal d1" style={{ background: 'var(--red-tint)', padding: '32px 32px', borderRadius: 4 }}>
                <span className="kicker" style={{ color: 'var(--red)' }}>{tr('Colegios no miembros', 'Non-member schools')}</span>
                <h3 style={{ fontFamily: 'var(--serif)', fontSize: 24, marginTop: 10, color: 'var(--ink)' }}>{tr('Únicamente de provincia', 'Provinces only')}</h3>
                <p style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.6, marginTop: 10 }}>
                  {tr('Los colegios que aún no son miembros de la Liga pueden participar únicamente si son de regiones fuera de Lima Metropolitana.', 'Schools that are not yet League members may participate only if they are from regions outside Metropolitan Lima.')}
                </p>
              </div>
            </div>

            {/* Vacantes limitadas */}
            <div className="reveal" style={{ marginTop: 24, border: '2px solid var(--red)', background: 'var(--bg)', padding: '36px 40px', borderRadius: 4, display: 'flex', flexWrap: 'wrap', gap: 36, alignItems: 'center' }}>
              <div style={{ textAlign: 'center' }}>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 88, lineHeight: 0.9, color: 'var(--red)' }}>20</div>
                <div className="kicker" style={{ color: 'var(--red)', marginTop: 6 }}>{tr('vacantes', 'places')}</div>
              </div>
              <div style={{ flex: '1 1 320px' }}>
                <h3 className="display" style={{ fontSize: 28, lineHeight: 1.15 }}>
                  {tr('Solo hay ', 'There are only ')}<em className="it">{tr('20 vacantes', '20 places')}</em>{tr(' y se asignan por orden de inscripción', ', assigned in order of registration')}
                </h3>
                <p style={{ fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.65, marginTop: 12, maxWidth: '62ch' }}>
                  {tr('La logística solo permite la inscripción de los 20 primeros equipos en registrarse, con un máximo de 6 equipos de Lima Metropolitana. Una vez completadas las vacantes, la inscripción se cierra aunque no haya llegado el 10 de octubre. Se permite un equipo por institución.',
                      'Logistics only allow the first 20 teams to register, with a maximum of 6 teams from Metropolitan Lima. Once the places are filled, registration closes even if October 10 has not arrived. One team per school.')}
                </p>
              </div>
            </div>

            {/* Equipos, docentes y espectadores */}
            <div style={{ marginTop: 24, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 24 }}>
              {[
                {
                  k: tr('Equipos', 'Teams'),
                  h: tr('De 3 a 5 estudiantes', 'Between 3 and 5 students'),
                  p: tr('Cada equipo está conformado por un mínimo de 3 y un máximo de 5 estudiantes de secundaria, de cualquier año. Un equipo por institución.',
                        'Each team has a minimum of 3 and a maximum of 5 secondary school students, from any grade. One team per school.'),
                },
                {
                  k: tr('Docentes y jueces', 'Teachers and judges'),
                  h: tr('1 o 2 docentes responsables', '1 or 2 responsible teachers'),
                  p: tr('Cada equipo viaja con uno o dos docentes responsables. La inscripción de un juez no es obligatoria; quienes deseen juzgar pueden sumarse como jueces voluntarios y participar de los talleres de preparación.',
                        'Each team travels with one or two responsible teachers. Registering a judge is not mandatory; those who wish to judge may join as volunteer judges and take part in the preparation workshops.'),
                },
                {
                  k: tr('Idioma', 'Language'),
                  h: tr('Únicamente en español', 'Spanish only'),
                  p: tr('Todas las rondas, mociones, talleres y materiales del torneo se desarrollan en español. Esta edición no cuenta con categoría en inglés.',
                        'All rounds, motions, workshops and tournament materials are in Spanish. This edition does not have an English-language category.'),
                },
                {
                  k: tr('Espectadores', 'Spectators'),
                  h: tr('Hasta 3 por equipo', 'Up to 3 per team'),
                  p: tr('Solo los equipos participantes pueden inscribir espectadores: familiares, escolares o docentes, con un máximo de 3 por equipo, a través del formulario de espectadores.',
                        'Only participating teams may register spectators: family members, students or teachers, up to 3 per team, through the spectator form.'),
                },
              ].map((c, i) => (
                <div key={i} className={`reveal d${i + 1}`} style={{ border: '1px solid var(--line)', background: 'var(--bg)', padding: '28px 30px' }}>
                  <span className="kicker" style={{ color: 'var(--red)' }}>{c.k}</span>
                  <h3 style={{ fontFamily: 'var(--serif)', fontSize: 22, marginTop: 10, color: 'var(--ink)' }}>{c.h}</h3>
                  <p style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.6, marginTop: 10 }}>{c.p}</p>
                </div>
              ))}
            </div>

            {/* Fechas clave */}
            <div className="reveal" style={{ marginTop: 64 }}>
              <span className="eyebrow">{tr('Fechas clave', 'Key dates')}</span>
              <h2 className="display" style={{ fontSize: 'clamp(32px, 4vw, 48px)', marginTop: 14, marginBottom: 28, maxWidth: '20ch' }}>
                {tr('El camino ', 'The road ')}<em className="it">{tr('a Juliaca', 'to Juliaca')}</em>
              </h2>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 20 }}>
                {TP_FECHAS_CLAVE.map((f, i) => (
                  <div key={i} className={`reveal d${i + 1}`} style={{ borderTop: '2px solid var(--red)', paddingTop: 18 }}>
                    <div style={{ fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.12em', color: 'var(--red)', textTransform: 'uppercase' }}>{L(f.fecha[0], f.fecha[1])}</div>
                    <h4 style={{ fontFamily: 'var(--serif)', fontSize: 20, marginTop: 10, color: 'var(--ink)' }}>{L(f.title[0], f.title[1])}</h4>
                    <p style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.6, marginTop: 8 }}>{L(f.desc[0], f.desc[1])}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>

        {/* Formato y mociones */}
        <section className="section" style={{ background: 'var(--bg)' }}>
          <div className="shell">
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' }}>
              <div className="reveal">
                <span className="eyebrow">{tr('Formato y mociones', 'Format and motions')}</span>
                <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 56px)', marginTop: 16, maxWidth: '18ch' }}>
                  {tr('WSDC, con todas las mociones ', 'WSDC, with every motion ')}<em className="it">impromptu</em>
                </h2>
                <p style={{ fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.65, marginTop: 20, maxWidth: '54ch' }}>
                  {tr('El torneo se disputa en formato WSDC (World Schools Debating Championship), el más usado a nivel escolar. Debido a experiencias pasadas durante el año, y para frenar el mal uso de la inteligencia artificial en la construcción de casos, todas las mociones del torneo serán impromptu: la moción, la postura y el rival se conocen 45 minutos antes del debate, y ese es el tiempo de preparación.',
                      'The tournament is held in the WSDC (World Schools Debating Championship) format, the most widely used at school level. Because of past experiences this year, and to curb the misuse of artificial intelligence in case building, every motion will be impromptu: the motion, side and opponent are revealed 45 minutes before the debate, and that is the preparation time.')}
                </p>
                <div className="reveal d1" style={{ marginTop: 24, border: '1px dashed var(--line-strong)', background: 'var(--red-tint)', padding: '20px 24px', display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                  <span style={{ color: 'var(--red)', flexShrink: 0, marginTop: 2 }}><Icon name="info" size={18}/></span>
                  <p style={{ fontSize: 14, color: 'var(--ink)', lineHeight: 1.6 }}>
                    {tr('Durante el tiempo de preparación no se permite el uso de dispositivos electrónicos ni la comunicación con los coaches.',
                        'During preparation time, electronic devices and communication with coaches are not allowed.')}
                  </p>
                </div>
              </div>
              <div className="reveal d1" style={{ border: '1px solid var(--line)', background: 'var(--bg-alt)', padding: '32px 32px' }}>
                <span className="kicker" style={{ color: 'var(--red)' }}>{tr('Material de preparación', 'Preparation materials')}</span>
                <p style={{ fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.6, marginTop: 12 }}>
                  {tr('Tres manuales para que tu equipo llegue preparado al formato:', 'Three manuals to get your team ready for the format:')}
                </p>
                <div style={{ display: 'grid', gap: 10, marginTop: 18 }}>
                  {[
                    [tr('Manual del formato WSDC · LPDE', 'WSDC format manual · LPDE'), TP_MANUAL_WSDC_LPDE_URL],
                    [tr('Manual para debatientes · TNDE', 'Debater’s manual · TNDE'), TP_MANUAL_TNDE_URL],
                    [tr('Manual del Mundial 2026', '2026 World Championship manual'), TP_MANUAL_MED_URL],
                  ].map((m, i) => (
                    <a key={i} className="btn btn-ghost" href={m[1]} target="_blank" rel="noopener" style={{ justifyContent: 'space-between', background: 'var(--bg)' }}>
                      {m[0]} <Icon name="arrow-up-right" size={14} />
                    </a>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Talleres de preparación */}
        <section className="section bg-cool">
          <div className="shell">
            <div className="reveal" style={{ marginBottom: 40 }}>
              <span className="eyebrow">{tr('Talleres de preparación', 'Preparation workshops')}</span>
              <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 56px)', marginTop: 16, maxWidth: '20ch' }}>
                {tr('Tres sesiones en vivo antes de ', 'Three live sessions before ')}<em className="it">{tr('viajar', 'travelling')}</em>
              </h2>
              <p style={{ fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.6, marginTop: 16, maxWidth: '58ch' }}>
                {tr('Los equipos inscritos y los jueces voluntarios podrán participar de tres sesiones virtuales en vivo la semana previa al torneo. Además, el viernes 23 habrá dos rondas de talleres presenciales en el colegio antes de la primera ronda.',
                    'Registered teams and volunteer judges may take part in three live online sessions the week before the tournament. In addition, on Friday the 23rd there will be two blocks of in-person workshops at the school before the first round.')}
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 24 }}>
              {TP_TALLERES.map((w, i) => (
                <div key={i} className={`reveal d${i + 1}`} style={{ border: '1px solid var(--line)', background: 'var(--bg)', padding: '28px 28px', display: 'flex', flexDirection: 'column' }}>
                  <div style={{ fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.12em', color: 'var(--red)', textTransform: 'uppercase' }}>
                    {L(w.fecha[0], w.fecha[1])}
                  </div>
                  <h3 style={{ fontFamily: 'var(--serif)', fontSize: 23, lineHeight: 1.15, marginTop: 12, color: 'var(--ink)' }}>{L(w.title[0], w.title[1])}</h3>
                  <p style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.6, marginTop: 12 }}>{L(w.desc[0], w.desc[1])}</p>
                  <div className="kicker" style={{ color: 'var(--mute)', marginTop: 'auto', paddingTop: 16 }}>{tr('Virtual · en vivo', 'Online · live')}</div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Cronograma */}
        <section id="cronograma" className="section" style={{ background: 'var(--bg)' }}>
          <div className="shell">
            <div className="reveal" style={{ marginBottom: 40 }}>
              <span className="eyebrow">{tr('Cronograma', 'Schedule')}</span>
              <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 56px)', marginTop: 16, maxWidth: '18ch' }}>
                {tr('Tres días de ', 'Three days of ')}<em className="it">{tr('debate', 'debate')}</em>{tr(', ronda por ronda', ', round by round')}
              </h2>
              <p style={{ fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.6, marginTop: 16, maxWidth: '54ch' }}>
                {tr('Cuatro rondas preliminares con retroalimentación, cuartos de final, semifinal y una final silenciosa. Horarios sujetos a ajustes de la organización.', 'Four preliminary rounds with feedback, quarterfinals, semifinal and a silent final. Times are subject to changes by the organizing team.')}
              </p>
            </div>

            <div className="reveal d1" style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 28 }}>
              {TP_CRONOGRAMA.map((d, i) => (
                <button key={i} onClick={() => setTpDay(i)} aria-pressed={tpDay === i} className="kicker" style={{
                  padding: '10px 18px', borderRadius: 4, cursor: 'pointer', transition: 'all 200ms',
                  border: '1px solid ' + (tpDay === i ? 'var(--red)' : 'var(--line-strong)'),
                  background: tpDay === i ? 'var(--red)' : 'transparent',
                  color: tpDay === i ? '#fff' : 'var(--ink-2)',
                }}>
                  {L(d.label[0], d.label[1])} · {L(d.date[0], d.date[1])}
                </button>
              ))}
            </div>

            <div className="reveal d2" style={{ border: '1px solid var(--line)', background: 'var(--bg)' }}>
              <div style={{ background: 'var(--ink)', color: '#fff', padding: '24px 28px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: 16 }}>
                <div>
                  <span className="kicker" style={{ color: 'var(--red)' }}>{L(day.label[0], day.label[1])}</span>
                  <h3 className="display" style={{ color: '#fff', fontSize: 26, marginTop: 6 }}>{L(day.date[0], day.date[1])}</h3>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div className="kicker" style={{ color: '#9C9AA0', marginBottom: 4 }}>{tr('Sede', 'Venue')}</div>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 17, color: '#fff', fontStyle: 'italic' }}>I.E.P. Elena de Santa María</div>
                </div>
              </div>
              <div>
                {day.rows.map((r, i) => (
                  <div key={i} style={{
                    display: 'grid', gridTemplateColumns: '130px 1fr', alignItems: 'baseline', gap: 20,
                    padding: '14px 28px', borderTop: i > 0 ? '1px solid var(--line)' : 'none',
                    background: r.ronda ? 'var(--red-tint)' : (r.meal ? 'var(--bg-alt)' : 'transparent'),
                  }}>
                    <div style={{ fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--ink-2)', letterSpacing: '0.02em' }}>{r.h}</div>
                    <div>
                      <span style={{ fontSize: 15, color: 'var(--ink)', fontWeight: (r.ronda || r.meal) ? 600 : 500 }}>{L(r.a[0], r.a[1])}</span>
                      <span style={{ fontSize: 14, color: 'var(--ink-2)' }}> — {L(r.d[0], r.d[1])}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Reconocimientos */}
            <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 48, alignItems: 'start' }}>
              <div className="reveal">
                <span className="eyebrow">{tr('Reconocimientos', 'Awards')}</span>
                <h3 className="display" style={{ fontSize: 'clamp(28px, 3.5vw, 40px)', marginTop: 14 }}>
                  {tr('Resultados y ', 'Results and ')}<em className="it">{tr('premiación', 'awards')}</em>
                </h3>
                <p style={{ fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.65, marginTop: 14, maxWidth: '44ch' }}>
                  {tr('Todos los participantes reciben un certificado de participación virtual. Los siguientes logros se reconocen con trofeos y medallas:',
                      'All participants receive a digital certificate of participation. The following achievements are recognized with trophies and medals:')}
                </p>
              </div>
              <div className="reveal d1" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 16 }}>
                {TP_PREMIOS.map((p, i) => (
                  <div key={i} style={{ border: '1px solid var(--line)', background: 'var(--bg)', padding: '22px 24px' }}>
                    <span style={{ color: 'var(--red)' }}><Icon name="trophy" size={20} /></span>
                    <div style={{ fontFamily: 'var(--serif)', fontSize: 20, marginTop: 10, color: 'var(--ink)' }}>{L(p.k[0], p.k[1])}</div>
                    <div className="kicker" style={{ color: 'var(--mute)', marginTop: 8 }}>{L(p.v[0], p.v[1])}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>

        {/* Equipo académico */}
        <section className="section" style={{ background: 'var(--ink)', color: '#fff' }}>
          <div className="shell">
            <div className="reveal" style={{ marginBottom: 40, maxWidth: '58ch' }}>
              <span className="eyebrow" style={{ color: 'var(--red)' }}>{tr('Equipo académico', 'Academic team')}</span>
              <h2 className="display" style={{ color: '#fff', fontSize: 'clamp(36px, 4.5vw, 56px)', marginTop: 16 }}>
                {tr('Conoce al comité ', 'Meet the ')}<em className="it">{tr('académico', 'academic committee')}</em>
              </h2>
              <p style={{ fontSize: 16, color: '#C9C7CE', lineHeight: 1.6, marginTop: 16 }}>
                {tr('El comité académico del torneo está a cargo del equipo directivo de la Liga Peruana de Debate Escolar y de la Selección Nacional de Debate Escolar.',
                    'The tournament’s academic committee is led by the leadership team of the Peruvian School Debate League and the National School Debate Team.')}
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 28 }}>
              {TP_EQUIPO.map((m, i) => (
                <div key={i} className={`reveal d${i + 1}`} style={{ display: 'flex', flexDirection: 'column' }}>
                  <div style={{ aspectRatio: '3/4', overflow: 'hidden', background: '#2A2A32' }}>
                    <img src={m.img} alt={m.name} loading="lazy"
                      style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', filter: 'contrast(1.04) saturate(0.85) sepia(0.22) brightness(1.03)' }} />
                  </div>
                  <h3 style={{ fontFamily: 'var(--serif)', fontSize: 23, color: '#fff', marginTop: 18 }}>{m.name}</h3>
                  <div className="kicker" style={{ color: 'var(--red)', marginTop: 6 }}>{L(m.role[0], m.role[1])}</div>
                  <p style={{ fontSize: 14, color: '#C9C7CE', lineHeight: 1.6, marginTop: 12 }}>{L(m.bio[0], m.bio[1])}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Inscripciones */}
        <section id="inscripciones" className="section bg-cool">
          <div className="shell">
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64, alignItems: 'center' }}>
              <div className="reveal">
                <span className="eyebrow">{tr('Inscripciones', 'Registration')}</span>
                <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 56px)', marginTop: 16, maxWidth: '16ch' }}>
                  {tr('Registra a tu ', 'Register your ')}<em className="it">{tr('delegación', 'delegation')}</em>
                </h2>
                <p style={{ fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.65, marginTop: 20, maxWidth: '48ch' }}>
                  {tr('Un formulario para los equipos competidores y otro, solo para equipos ya inscritos, para registrar hasta 3 espectadores. Las inscripciones cierran el 10 de octubre o al completarse las 20 vacantes.',
                      'One form for competing teams and another, only for already registered teams, to register up to 3 spectators. Registration closes on October 10 or when the 20 places are filled.')}
                </p>
              </div>
              <div className="reveal d1" style={{ display: 'grid', gap: 16 }}>
                <a href={TP_FORM_EQUIPOS_URL} target="_blank" rel="noopener" style={{ display: 'block', background: 'var(--ink)', color: '#fff', padding: '28px 32px', borderRadius: 4, textDecoration: 'none' }}>
                  <span className="kicker" style={{ color: 'var(--red)' }}>{tr('Formulario 1', 'Form 1')}</span>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 26, marginTop: 8, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
                    {tr('Registro de equipos', 'Team registration')} <Icon name="arrow-up-right" size={18} />
                  </div>
                  <p style={{ fontSize: 14, color: '#C9C7CE', lineHeight: 1.6, marginTop: 8 }}>
                    {tr('Equipo de 3 a 5 estudiantes, 1 o 2 docentes responsables y, opcionalmente, un juez.', 'Team of 3 to 5 students, 1 or 2 responsible teachers and, optionally, a judge.')}
                  </p>
                </a>
                <a href={TP_FORM_ESPECTADORES_URL} target="_blank" rel="noopener" style={{ display: 'block', border: '1px solid var(--line-strong)', background: 'var(--bg)', color: 'var(--ink)', padding: '28px 32px', borderRadius: 4, textDecoration: 'none' }}>
                  <span className="kicker" style={{ color: 'var(--red)' }}>{tr('Formulario 2', 'Form 2')}</span>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 26, marginTop: 8, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
                    {tr('Registro de espectadores', 'Spectator registration')} <Icon name="arrow-up-right" size={18} />
                  </div>
                  <p style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.6, marginTop: 8 }}>
                    {tr('Hasta 3 por equipo inscrito: docentes, escolares o familiares.', 'Up to 3 per registered team: teachers, students or family members.')}
                  </p>
                </a>
              </div>
            </div>

            {/* Almuerzo */}
            <div className="reveal d2" style={{ marginTop: 32, border: '1px dashed var(--line-strong)', background: 'var(--bg)', padding: '24px 32px', display: 'flex', gap: 14, alignItems: 'flex-start' }}>
              <span style={{ color: 'var(--red)', flexShrink: 0, marginTop: 2 }}><Icon name="info" size={18}/></span>
              <p style={{ fontSize: 14, color: 'var(--ink)', lineHeight: 1.6 }}>
                {tr('La participación no tiene costo. De manera opcional, se puede adquirir almuerzo en el mismo colegio: S/ 15 por persona y por día (S/ 45 por los tres días). También es posible pedir delivery, aunque el colegio está a unos 15 minutos del centro de Juliaca. Para solicitar almuerzo, escribe a ',
                    'Participation is free. Optionally, lunch can be purchased at the school: S/ 15 per person per day (S/ 45 for the three days). Delivery is also possible, although the school is about 15 minutes from downtown Juliaca. To request lunch, write to ')}
                <a href="mailto:contacto@lpdebate.org" style={{ color: 'var(--red)', fontWeight: 600 }}>contacto@lpdebate.org</a>
                {tr(' y te enviaremos los detalles de pago.', ' and we will send you the payment details.')}
              </p>
            </div>
          </div>
        </section>

        {/* Viaje: transporte, hospedaje, turismo */}
        <section id="viaje" className="section" style={{ background: 'var(--bg)' }}>
          <div className="shell">
            <div className="reveal" style={{ marginBottom: 48 }}>
              <span className="eyebrow">{tr('Guía de viaje', 'Travel guide')}</span>
              <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 56px)', marginTop: 16, maxWidth: '20ch' }}>
                {tr('Cómo llegar y ', 'How to get there and ')}<em className="it">{tr('dónde dormir', 'where to stay')}</em>
              </h2>
              <p style={{ fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.6, marginTop: 16, maxWidth: '58ch' }}>
                {tr('El transporte hasta el torneo y el hospedaje corren por cuenta de cada delegación. Aquí reunimos la información práctica de la organización.',
                    'Travel to the tournament and lodging are each delegation’s responsibility. Here is the practical information from the organizers.')}
              </p>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginBottom: 24 }}>
              <div className="reveal" style={{ overflow: 'hidden', aspectRatio: '16/6', maxWidth: '100%' }}>
                <img src="assets/torneo-puno/elena-fachada.jpg" alt="I.E.P. Elena de Santa María, Juliaca" loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
              </div>
              <div className="reveal d1" style={{ border: '1px solid var(--line)', background: 'var(--bg)', padding: '28px 32px' }}>
                <span className="kicker" style={{ color: 'var(--red)' }}>{tr('Cómo llegar a Juliaca', 'Getting to Juliaca')}</span>
                <p style={{ fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.65, marginTop: 12 }}>
                  {tr('Las compañías Sky y Latam operan vuelos al Aeropuerto de Juliaca. Desde Lima no es aconsejable viajar en bus; sí es una buena opción para las regiones aledañas. La sede se ubica en el Parque del Niño de Juliaca (Yavero), a unos 15 minutos del centro de la ciudad.',
                      'Sky and Latam operate flights to Juliaca Airport. Travelling by bus from Lima is not advisable; it is a good option for neighbouring regions. The venue is in Parque del Niño de Juliaca (Yavero), about 15 minutes from downtown.')}
                </p>
                <a className="btn btn-ghost" href={TP_SEDE_MAPS_URL} target="_blank" rel="noopener" style={{ marginTop: 16 }}>
                  <Icon name="map" size={14} /> {tr('Abrir en Google Maps', 'Open in Google Maps')}
                </a>
              </div>
            </div>

            {/* Hoteles */}
            <div className="reveal" style={{ marginBottom: 20 }}>
              <span className="kicker" style={{ color: 'var(--red)' }}>{tr('Hoteles recomendados en Juliaca', 'Recommended hotels in Juliaca')}</span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 20, marginBottom: 24 }}>
              {TP_HOTELES.map((h, i) => (
                <div key={i} className={`reveal d${i + 1}`} style={{ border: '1px solid var(--line)', background: 'var(--bg)', padding: '26px 28px', display: 'flex', flexDirection: 'column' }}>
                  <h3 style={{ fontFamily: 'var(--serif)', fontSize: 22, color: 'var(--ink)' }}>{h.name}</h3>
                  <div style={{ fontSize: 14, color: 'var(--ink-2)', marginTop: 6 }}>{h.dir}</div>
                  <div style={{ fontSize: 13, color: 'var(--mute)', marginTop: 4 }}>{L(h.ref[0], h.ref[1])}</div>
                  <div style={{ marginTop: 14, borderTop: '1px solid var(--line)', paddingTop: 12 }}>
                    {h.tarifas.map((t, j) => <div key={j} style={{ fontSize: 14, color: 'var(--ink)', lineHeight: 1.5 }}>{L(t[0], t[1])}</div>)}
                  </div>
                </div>
              ))}
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
              <div className="reveal" style={{ border: '1px solid var(--line)', background: 'var(--bg)', padding: '28px 32px' }}>
                <span className="kicker" style={{ color: 'var(--red)' }}>{tr('Hospedarse en la ciudad de Puno', 'Staying in the city of Puno')}</span>
                <p style={{ fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.65, marginTop: 12 }}>
                  {tr('La ciudad de Puno, a una hora del colegio como máximo, ofrece una oferta hotelera más amplia (Casa Andina, Sol Plaza, Marlon’s, Sumaq, Casona Plaza, entre otros). Es una buena opción hospedarse allí y contratar una movilidad privada hasta el colegio. Si necesitas ayuda con esto, la prof. Neyda Aparicio, coordinadora académica del Colegio Elena de Santa María, puede orientarte por WhatsApp: solicita su contacto a contacto@lpdebate.org.',
                      'The city of Puno, at most an hour from the school, has a wider range of hotels (Casa Andina, Sol Plaza, Marlon’s, Sumaq, Casona Plaza, among others). Staying there and hiring private transport to the school is a good option. If you need help with this, Prof. Neyda Aparicio, academic coordinator at Colegio Elena de Santa María, can guide you via WhatsApp: request her contact at contacto@lpdebate.org.')}
                </p>
              </div>
              <div className="reveal d1" style={{ background: 'var(--red-tint)', padding: '28px 32px' }}>
                <span className="kicker" style={{ color: 'var(--red)' }}>{tr('Hospedaje gratuito en el colegio', 'Free lodging at the school')}</span>
                <p style={{ fontSize: 15, color: 'var(--ink)', lineHeight: 1.65, marginTop: 12 }}>
                  {tr('Para dos delegaciones hay hospedaje disponible, sin costo, en el colegio y/o en el ala de huéspedes del convento de la congregación. Se priorizará a los colegios públicos que lo soliciten y los cupos se entregan por orden de petición. Para solicitarlo, escribe a ',
                      'Free lodging is available for two delegations at the school and/or in the guest wing of the congregation’s convent. Public schools that request it will be given priority, and places are granted in order of request. To apply, write to ')}
                  <a href="mailto:contacto@lpdebate.org" style={{ color: 'var(--red)', fontWeight: 600 }}>contacto@lpdebate.org</a>.
                </p>
              </div>
            </div>

            <div className="reveal d2" style={{ marginTop: 24, border: '1px solid var(--line)', background: 'var(--bg)', padding: '28px 32px' }}>
              <span className="kicker" style={{ color: 'var(--red)' }}>{tr('Día de turismo', 'Tourism day')}</span>
              <p style={{ fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.65, marginTop: 12 }}>
                {tr('El día de turismo recomendado es el lunes 26 de octubre. La organización no planificará una actividad conjunta, pero ese día algunos miembros del equipo organizador seguirán en Puno, atentos a cualquier apoyo que necesites. A criterio de cada colegio, la delegación también puede llegar días antes para hacer turismo.',
                    'The recommended tourism day is Monday, October 26. The organizers will not plan a joint activity, but some members of the organizing team will still be in Puno that day, available to help. Each school may also choose to arrive a few days early for sightseeing.')}
              </p>
            </div>
          </div>
        </section>

        {/* Consultas */}
        <section className="section" style={{ background: 'var(--ink)', color: '#fff' }}>
          <div className="shell" style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 64, alignItems: 'center' }}>
            <div className="reveal">
              <span className="eyebrow" style={{ color: 'var(--red)' }}>{tr('Consultas', 'Questions')}</span>
              <h2 className="display" style={{ color: '#fff', fontSize: 'clamp(36px, 4.5vw, 56px)', marginTop: 16 }}>
                {tr('¿Tienes alguna ', 'Have a ')}<em className="it">{tr('pregunta', 'question')}</em>?
              </h2>
              <p style={{ fontSize: 16, color: '#C9C7CE', lineHeight: 1.6, marginTop: 16, maxWidth: '48ch' }}>
                {tr('Escríbenos y te responderemos a la brevedad. También puedes dejar tu consulta en nuestro formulario y hacerle seguimiento en línea.',
                    'Write to us and we will get back to you shortly. You can also leave your question in our form and track it online.')}
              </p>
            </div>
            <div className="reveal d1" style={{ display: 'grid', gap: 12 }}>
              <a className="btn" href="mailto:contacto@lpdebate.org" style={{ background: '#fff', color: 'var(--ink)', fontWeight: 700, justifyContent: 'center' }}>
                <Icon name="mail" size={15}/> contacto@lpdebate.org
              </a>
              <button className="btn btn-light" onClick={() => setPage('consultas')} style={{ justifyContent: 'center', cursor: 'pointer' }}>
                {tr('Deja tu consulta en línea', 'Leave your question online')} <Icon name="arrow" size={14} />
              </button>
            </div>
          </div>
        </section>

      </div>
    </Page>
  );
};

Object.assign(window, { TorneoPunoPage });