// Mundo.jsx — el mundo / la crónica de los Siete (verbatim lore)
function Mundo() {
  return (
    <Section id="mundo">
      <SectionHead eyebrow="La Crónica de los Siete" title="El Mundo" />
      <div style={{
        maxWidth: 980, margin: '0 auto',
        display: 'grid', gap: 'clamp(32px,5vw,64px)',
        gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 360px), 1fr))',
      }}>
        <div className="dk-reveal">
          <div style={{
            fontFamily: 'var(--font-display)', textTransform: 'uppercase', letterSpacing: '0.2em',
            fontSize: 12, color: 'var(--gold)', marginBottom: 18,
          }}>El Origen</div>
          <p style={{ fontSize: 18, lineHeight: 1.9, color: 'var(--text-primary)', margin: 0 }}>
            En el principio, cuando el mundo era joven y sin nombre, despertaron los
            Drakhar: siete dioses con forma de dragón. Cada uno encarnaba una fuerza
            primordial. Los hombres llegaron después, pequeños y temblorosos, y al ver
            a los Siete los adoraron. Así nació Drakharon: el gran imperio que floreció
            durante siglos bajo el signo de los siete dragones — hasta que la traición
            lo quebró todo.
          </p>
        </div>
        <div className="dk-reveal" style={{ transitionDelay: '0.12s' }}>
          <div style={{
            fontFamily: 'var(--font-display)', textTransform: 'uppercase', letterSpacing: '0.2em',
            fontSize: 12, color: 'var(--gold)', marginBottom: 18,
          }}>Los Reinos Rivales</div>
          <p style={{ fontSize: 18, lineHeight: 1.9, color: 'var(--text-muted)', margin: 0 }}>
            Sobre las ruinas del imperio crecieron reinos rivales que olvidaron a los
            Siete. En el norte, las tierras de hierro y nieve guardan la memoria. En
            el Yermo, el desierto donde estuvo la capital, los Hijos del Yermo
            sobreviven a la sombra del mal dormido. En los Pantanos de Khaal, los
            muertos no descansan. Y bajo las Montañas del Trueno, el último dios leal
            espera.
          </p>
        </div>
      </div>
      <div style={{ margin: '64px auto 0' }}><Divider /></div>
    </Section>
  );
}
Object.assign(window, { Mundo });