<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>línea de tiempo :: mi página</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Quicksand:wght@500;700&family=VT323&display=swap" rel="stylesheet">
<!-- Rutas absolutas (empiezan con "/") para que funcionen igual
     (ahora todos los archivos viven en la misma carpeta) -->
<link rel="stylesheet" href="style.css">
<style>
  /* Estilo propio de esta página para la línea de tiempo.
     Cada ".hito" es un punto en el tiempo. Duplicá el bloque
     para agregar más años/eventos. */
  .linea-tiempo { margin-top: 8px; border-left: 4px dashed var(--color-canela); padding-left: 24px; }
  .hito { margin-bottom: 28px; position: relative; }
  .hito::before { content: ""; position: absolute; left: -31px; top: 4px; width: 14px; height: 14px; background: var(--color-durazno); border: 2px solid var(--color-purpura); border-radius: 50%; }
  .hito .anio { font-family: 'Press Start 2P', monospace; color: var(--color-durazno); font-size: .85rem; }
  .hito p { color: var(--color-durazno); }
</style>
</head>
<body>
<div class="marco">

  <!-- BANNER: igual en todas las páginas del sitio. Si cambiás el
       título acá, cambialo también en index.html y en las demás
       demás páginas del sitio para que quede igual en todos lados. -->
  <header class="banner">
    <div class="banner-overlay">
      <h1 class="titulo-sitio">TU NOMBRE / TÍTULO ACÁ</h1>
      <p class="subtitulo-sitio">un subtítulo corto o una frase que te describa</p>
    </div>
  </header>

  <main class="columnas">

    <!-- COLUMNA IZQUIERDA: el menú (inventario), igual en todas las
         páginas. No hace falta tocar esto acá — se edita una sola
         vez en script.js -->
    <section class="col-izquierda">
      <h2 class="titulo-columna">✦ inventario ✦</h2>

      <div class="mc-inventario">
        <div class="mc-superior">
          <div class="mc-armadura">
            <div class="mc-slot" data-armadura="casco" title="casco"></div>
            <div class="mc-slot" data-armadura="pechera" title="pechera"></div>
            <div class="mc-slot" data-armadura="pantalones" title="pantalones"></div>
            <div class="mc-slot" data-armadura="botas" title="botas"></div>
          </div>
          <div class="mc-personaje" title="tu personaje"></div>
        </div>

        <div class="mc-grid" id="mc-grid">
          <div class="mc-slot"></div><div class="mc-slot"></div><div class="mc-slot"></div>
          <div class="mc-slot"></div><div class="mc-slot"></div><div class="mc-slot"></div>
          <div class="mc-slot"></div><div class="mc-slot"></div><div class="mc-slot"></div>
          <div class="mc-slot"></div><div class="mc-slot"></div><div class="mc-slot"></div>
          <div class="mc-slot"></div><div class="mc-slot"></div><div class="mc-slot"></div>
          <div class="mc-slot"></div><div class="mc-slot"></div><div class="mc-slot"></div>
          <div class="mc-slot"></div><div class="mc-slot"></div><div class="mc-slot"></div>
          <div class="mc-slot"></div><div class="mc-slot"></div><div class="mc-slot"></div>
          <div class="mc-slot"></div><div class="mc-slot"></div><div class="mc-slot"></div>
        </div>

        <div class="mc-hotbar" id="mc-hotbar">
          <div class="mc-slot"></div><div class="mc-slot"></div><div class="mc-slot"></div>
          <div class="mc-slot"></div><div class="mc-slot"></div><div class="mc-slot"></div>
          <div class="mc-slot"></div><div class="mc-slot"></div><div class="mc-slot"></div>
        </div>
      </div>

      <p class="mc-etiqueta"><span id="mc-etiqueta-texto">tocá un ítem para navegar</span> ✧</p>
    </section>

    <!-- COLUMNA DERECHA: ACÁ VA EL CONTENIDO PROPIO DE ESTA PÁGINA -->
    <section class="col-derecha">
      <h2 class="titulo-columna">✦ línea de tiempo ✦</h2>
      <div class="linea-tiempo">
        <!-- Duplicá este bloque .hito por cada evento que quieras agregar -->
        <div class="hito">
          <div class="anio">2020</div>
          <p>contá acá qué pasó ese año.</p>
        </div>
        <div class="hito">
          <div class="anio">2023</div>
          <p>otro hito importante.</p>
        </div>
        <div class="hito">
          <div class="anio">2026</div>
          <p>hito más reciente.</p>
        </div>
      </div>
    </section>

  </main>

  <footer>
    hecho a mano en neocities · última actualización: julio 2026
  </footer>

</div>
<script src="script.js"></script>
</body>
</html>
