@font-face { font-family: 'Pixearg'; src: url('../fonts/CUERPO') format('truetype'); } @font-face { font-family: 'Titulo'; src: url('../fonts/TITULO') format('truetype'); } /* ===== BASE ===== */ body { background-color: #c0c0c0; color: #000000; font-family: 'Pixearg', monospace; margin: 0; padding: 0; background-image: url('../images/batman'); background-size: cover; background-repeat: no-repeat; font-size: 32px; -webkit-font-smoothing: none !important; -moz-osx-font-smoothing: auto; text-rendering: geometricPrecision; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; } /* ===== CONTENEDOR ===== */ .container { background-color: #fffdd0; border: 3px solid #000080; box-shadow: 6px 6px #808080; max-width: 960px; width: 90%; margin: 40px auto; padding: 20px; } /* ===== CABECERA ===== */ .top-banner { width: 100%; background-color: #000080; padding: 10px 0; display: flex; justify-content: center; align-items: center; } .flag-strip { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1200px; margin: auto; padding: 0 20px; } .side-gif { width: 100px; height: auto; } .flag-text { flex-grow: 1; text-align: center; color: #ffffff; padding: 0 20px; font-family: 'Pixearg', monospace; } /* ===== CONTENIDO ===== */ .main-content, .admin-content { text-align: center; } /* ===== TÍTULOS ===== */ h1 { color: #ff0000; text-shadow: 1px 1px #000000; font-size: 64px; font-family: 'Titulo', 'Pixearg', monospace; } /* ===== TEXTO ===== */ p { font-size: 24px; line-height: 1.6; color: #000000; } /* ===== BOTONES ===== */ .button { font-family: 'Pixearg', monospace; background-color: #dcdcdc; border: 2px outset #808080; padding: 10px 20px; cursor: pointer; font-size: 24px; margin-top: 20px; } .button:hover { background-color: #c0c0c0; } /* ===== FOOTER ===== */ .footer, .footer * { text-align: center; background-color: #000080; color: #ffffff; padding: 10px; font-family: 'Pixearg', monospace; font-size: 24px; margin-top: 20px; } /* ===== ADMIN ===== */ textarea { width: 90%; height: 200px; margin-top: 20px; font-family: monospace; padding: 10px; font-size: 24px; } .admin-content button { padding: 10px 20px; margin-top: 10px; font-weight: bold; cursor: pointer; font-family: 'Pixearg', monospace; } /* ===== MENSAJES ===== */ .mensaje { margin-top: 20px; color: #00ff00; font-weight: bold; animation: parpadeo 1s infinite; } @keyframes parpadeo { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ===== EVENTOS ===== */ .eventos { display: flex; flex-direction: column; gap: 20px; margin-top: 40px; } .evento { position: relative; background-size: contain; background-position: center; background-color: #000; color: #ffffff; border: 3px solid #000000; box-shadow: 4px 4px #808080; font-family: 'Pixearg', monospace; overflow: hidden; } .evento-principal { height: 260px; width: 100%; } .eventos-secundarios { display: flex; gap: 20px; justify-content: space-between; } .evento-secundario { flex: 1; height: 200px; } .evento-info { background: rgba(0, 0, 0, 0.5); height: 100%; padding: 15px; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; } .evento-titulo { font-size: 32px; font-family: 'Titulo'; background-color: rgba(255, 255, 255, 0.8); color: #000080; padding: 2px 8px; position: absolute; top: 8px; right: 8px; text-shadow: 1px 1px #fff; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'Titulo', 'Pixearg', monospace; } .evento-fecha { font-size: 20px; background-color: rgba(255, 0, 0, 0.7); color: #ff0; display: inline-block; padding: 2px 8px; margin-bottom: 6px; font-weight: bold; max-width: 20%; box-shadow: 1px 1px #ff0; } .evento-detalle { font-size: 18px; background-color: rgba(255, 255, 255, 0.6); color: #000; padding: 6px; box-shadow: 2px 2px #aaa; max-width: 60%; } .evento-precio { position: absolute; bottom: 10px; right: 10px; background: #ff0; color: #000; padding: 10px 14px; font-weight: bold; font-size: 20px; font-family: 'Titulo', 'Pixearg', monospace; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; transform: rotate(-20deg); box-shadow: 2px 2px #000; border: 2px solid #000; text-align: center; min-width: 100px; z-index: 10; }
.button-app {
  font-family: 'Pixearg', monospace;
  background-color: #00ff00;
  border: 3px outset #008000;
}
.button-app:hover {
  background-color: #66ff66;
}

/* h3: mismo “look” que h2 pero más pequeño */
#preview h3 {
  font-size: 1.1em;      /* más pequeño que h2 */
  font-weight: 700;
  margin: 0.6em 0 0.3em;
}

/* Caja incrustada estilo Win95 */
.wiki-box {
  display: inline-block;
  padding: 3px 8px;
  margin: 0 3px;
  font-size: 0.95em;

  background: #c0c0c0;
  color: #000;

  border: 2px solid;
  border-top-color: #ffffff;
  border-left-color: #ffffff;
  border-right-color: #404040;
  border-bottom-color: #404040;

  box-shadow:
    inset -1px -1px 0 #dfdfdf,
    inset 1px 1px 0 #808080;

  box-sizing: border-box;
}